mirror of https://github.com/nocodb/nocodb
github-actions[bot]
12 months ago
committed by
GitHub
366 changed files with 10173 additions and 3468 deletions
|
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 280 B |
|
After Width: | Height: | Size: 805 B |
|
Before Width: | Height: | Size: 725 B After Width: | Height: | Size: 735 B |
|
Before Width: | Height: | Size: 458 B After Width: | Height: | Size: 473 B |
@ -1,11 +1,12 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
const props = defineProps<{ |
const props = defineProps<{ |
||||||
sourceId: string |
sourceId: string |
||||||
|
showAllColumns?: boolean |
||||||
}>() |
}>() |
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<div class="w-full h-full !p-0"> |
<div class="w-full h-full !p-0"> |
||||||
<ErdView :source-id="props.sourceId" /> |
<ErdView :source-id="props.sourceId" :show-all-columns="props.showAllColumns" /> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|||||||
@ -0,0 +1,136 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { ColumnType } from 'nocodb-sdk' |
||||||
|
import { message } from 'ant-design-vue' |
||||||
|
import { useVModel } from '#imports' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
modelValue: boolean |
||||||
|
column: ColumnType |
||||||
|
extra: any |
||||||
|
}>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const { api } = useApi() |
||||||
|
|
||||||
|
const dialogShow = useVModel(props, 'modelValue', emit) |
||||||
|
|
||||||
|
const { $e, $poller } = useNuxtApp() |
||||||
|
|
||||||
|
const { activeTable: _activeTable } = storeToRefs(useTablesStore()) |
||||||
|
|
||||||
|
const reloadDataHook = inject(ReloadViewDataHookInj) |
||||||
|
|
||||||
|
const { eventBus } = useSmartsheetStoreOrThrow() |
||||||
|
|
||||||
|
const { getMeta } = useMetas() |
||||||
|
|
||||||
|
const meta = inject(MetaInj, ref()) |
||||||
|
|
||||||
|
const options = ref({ |
||||||
|
includeData: true, |
||||||
|
}) |
||||||
|
|
||||||
|
const optionsToExclude = computed(() => { |
||||||
|
const { includeData } = options.value |
||||||
|
return { |
||||||
|
excludeData: !includeData, |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const isLoading = ref(false) |
||||||
|
|
||||||
|
const reloadTable = async () => { |
||||||
|
await getMeta(meta!.value!.id!, true) |
||||||
|
eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD) |
||||||
|
reloadDataHook?.trigger() |
||||||
|
} |
||||||
|
|
||||||
|
const _duplicate = async () => { |
||||||
|
try { |
||||||
|
isLoading.value = true |
||||||
|
const jobData = await api.dbTable.duplicateColumn(props.column.base_id!, props.column.id!, { |
||||||
|
options: optionsToExclude.value, |
||||||
|
extra: props.extra, |
||||||
|
}) |
||||||
|
|
||||||
|
$poller.subscribe( |
||||||
|
{ id: jobData.id }, |
||||||
|
async (data: { |
||||||
|
id: string |
||||||
|
status?: string |
||||||
|
data?: { |
||||||
|
error?: { |
||||||
|
message: string |
||||||
|
} |
||||||
|
message?: string |
||||||
|
result?: any |
||||||
|
} |
||||||
|
}) => { |
||||||
|
if (data.status !== 'close') { |
||||||
|
if (data.status === JobStatus.COMPLETED) { |
||||||
|
reloadTable() |
||||||
|
isLoading.value = false |
||||||
|
dialogShow.value = false |
||||||
|
} else if (data.status === JobStatus.FAILED) { |
||||||
|
message.error(`There was an error duplicating the column.`) |
||||||
|
reloadTable() |
||||||
|
isLoading.value = false |
||||||
|
dialogShow.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
$e('a:column:duplicate') |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
isLoading.value = false |
||||||
|
dialogShow.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onKeyStroke('Enter', () => { |
||||||
|
// should only trigger this when our modal is open |
||||||
|
if (dialogShow.value) { |
||||||
|
_duplicate() |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
duplicate: _duplicate, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<GeneralModal |
||||||
|
v-model:visible="dialogShow" |
||||||
|
:class="{ active: dialogShow }" |
||||||
|
:closable="!isLoading" |
||||||
|
:mask-closable="!isLoading" |
||||||
|
:keyboard="!isLoading" |
||||||
|
centered |
||||||
|
wrap-class-name="nc-modal-column-duplicate" |
||||||
|
:footer="null" |
||||||
|
class="!w-[30rem]" |
||||||
|
@keydown.esc="dialogShow = false" |
||||||
|
> |
||||||
|
<div> |
||||||
|
<div class="prose-xl font-bold self-center">{{ $t('general.duplicate') }} {{ $t('objects.column') }}</div> |
||||||
|
|
||||||
|
<div class="mt-4">Are you sure you want to duplicate the field?</div> |
||||||
|
|
||||||
|
<div class="prose-md self-center text-gray-500 mt-4">{{ $t('title.advancedSettings') }}</div> |
||||||
|
|
||||||
|
<a-divider class="!m-0 !p-0 !my-2" /> |
||||||
|
|
||||||
|
<div class="text-xs p-2"> |
||||||
|
<a-checkbox v-model:checked="options.includeData" :disabled="isLoading">{{ $t('labels.includeData') }}</a-checkbox> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="flex flex-row gap-x-2 mt-2.5 pt-2.5 justify-end"> |
||||||
|
<NcButton v-if="!isLoading" key="back" type="secondary" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton> |
||||||
|
<NcButton key="submit" type="primary" :loading="isLoading" @click="_duplicate">{{ $t('general.confirm') }} </NcButton> |
||||||
|
</div> |
||||||
|
</GeneralModal> |
||||||
|
</template> |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { ColumnType } from 'nocodb-sdk' |
||||||
|
import { isVirtualCol } from 'nocodb-sdk' |
||||||
|
|
||||||
|
defineProps<{ |
||||||
|
column: ColumnType |
||||||
|
modelValue: any |
||||||
|
}>() |
||||||
|
|
||||||
|
provide(ReadonlyInj, true) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="pointer-events-none"> |
||||||
|
<LazySmartsheetRow :row="{ row: { [column.title]: modelValue }, rowMeta: {} }"> |
||||||
|
<LazySmartsheetVirtualCell v-if="isVirtualCol(column)" :model-value="modelValue" class="!text-gray-600" :column="column" /> |
||||||
|
|
||||||
|
<LazySmartsheetCell |
||||||
|
v-else |
||||||
|
:model-value="modelValue" |
||||||
|
class="!text-gray-600" |
||||||
|
:column="column" |
||||||
|
:edit-enabled="false" |
||||||
|
:read-only="true" |
||||||
|
/> |
||||||
|
</LazySmartsheetRow> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,150 @@ |
|||||||
|
import type { ColumnType } from 'nocodb-sdk' |
||||||
|
|
||||||
|
export const useColumnDrag = ({ |
||||||
|
fields, |
||||||
|
tableBodyEl, |
||||||
|
gridWrapper, |
||||||
|
}: { |
||||||
|
fields: Ref<ColumnType[]> |
||||||
|
tableBodyEl: Ref<HTMLElement | undefined> |
||||||
|
gridWrapper: Ref<HTMLElement | undefined> |
||||||
|
}) => { |
||||||
|
const { eventBus } = useSmartsheetStoreOrThrow() |
||||||
|
const { addUndo, defineViewScope } = useUndoRedo() |
||||||
|
|
||||||
|
const { activeView } = storeToRefs(useViewsStore()) |
||||||
|
|
||||||
|
const { gridViewCols, updateGridViewColumn } = useViewColumnsOrThrow() |
||||||
|
const { leftSidebarWidth } = storeToRefs(useSidebarStore()) |
||||||
|
const { width } = useWindowSize() |
||||||
|
|
||||||
|
const draggedCol = ref<ColumnType | null>(null) |
||||||
|
const dragColPlaceholderDomRef = ref<HTMLElement | null>(null) |
||||||
|
const toBeDroppedColId = ref<string | null>(null) |
||||||
|
|
||||||
|
const reorderColumn = async (colId: string, toColId: string) => { |
||||||
|
const toBeReorderedViewCol = gridViewCols.value[colId] |
||||||
|
|
||||||
|
const toViewCol = gridViewCols.value[toColId]! |
||||||
|
const toColIndex = fields.value.findIndex((f) => f.id === toColId) |
||||||
|
|
||||||
|
const nextToColField = toColIndex < fields.value.length - 1 ? fields.value[toColIndex + 1] : null |
||||||
|
const nextToViewCol = nextToColField ? gridViewCols.value[nextToColField.id!] : null |
||||||
|
|
||||||
|
const lastCol = fields.value[fields.value.length - 1] |
||||||
|
const lastViewCol = gridViewCols.value[lastCol.id!] |
||||||
|
|
||||||
|
const newOrder = nextToViewCol ? toViewCol.order! + (nextToViewCol.order! - toViewCol.order!) / 2 : lastViewCol.order! + 1 |
||||||
|
const oldOrder = toBeReorderedViewCol.order |
||||||
|
|
||||||
|
toBeReorderedViewCol.order = newOrder |
||||||
|
|
||||||
|
addUndo({ |
||||||
|
undo: { |
||||||
|
fn: async () => { |
||||||
|
if (!fields.value) return |
||||||
|
|
||||||
|
toBeReorderedViewCol.order = oldOrder |
||||||
|
await updateGridViewColumn(colId, { order: oldOrder } as any) |
||||||
|
|
||||||
|
eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD) |
||||||
|
}, |
||||||
|
args: [], |
||||||
|
}, |
||||||
|
redo: { |
||||||
|
fn: async () => { |
||||||
|
if (!fields.value) return |
||||||
|
|
||||||
|
toBeReorderedViewCol.order = newOrder |
||||||
|
await updateGridViewColumn(colId, { order: newOrder } as any) |
||||||
|
|
||||||
|
eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD) |
||||||
|
}, |
||||||
|
args: [], |
||||||
|
}, |
||||||
|
scope: defineViewScope({ view: activeView.value }), |
||||||
|
}) |
||||||
|
|
||||||
|
await updateGridViewColumn(colId, { order: newOrder } as any, true) |
||||||
|
|
||||||
|
eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD) |
||||||
|
} |
||||||
|
|
||||||
|
const onDragStart = (colId: string, e: DragEvent) => { |
||||||
|
if (!e.dataTransfer) return |
||||||
|
|
||||||
|
const dom = document.querySelector('[data-testid="drag-icon-placeholder"]') |
||||||
|
|
||||||
|
e.dataTransfer.dropEffect = 'none' |
||||||
|
e.dataTransfer.effectAllowed = 'none' |
||||||
|
|
||||||
|
e.dataTransfer.setDragImage(dom!, 10, 10) |
||||||
|
e.dataTransfer.clearData() |
||||||
|
e.dataTransfer.setData('text/plain', colId) |
||||||
|
|
||||||
|
draggedCol.value = fields.value.find((f) => f.id === colId) ?? null |
||||||
|
|
||||||
|
const remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize) |
||||||
|
|
||||||
|
const placeholderHeight = tableBodyEl.value?.getBoundingClientRect().height ?? 6.1 * remInPx |
||||||
|
dragColPlaceholderDomRef.value!.style.height = `${placeholderHeight}px` |
||||||
|
|
||||||
|
const x = e.clientX - leftSidebarWidth.value |
||||||
|
|
||||||
|
if (x >= 0 && dragColPlaceholderDomRef.value) { |
||||||
|
dragColPlaceholderDomRef.value.style.left = `${x.toString()}px` |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onDrag = (e: DragEvent) => { |
||||||
|
e.preventDefault() |
||||||
|
|
||||||
|
if (!e.dataTransfer) return |
||||||
|
if (!draggedCol.value) return |
||||||
|
|
||||||
|
if (!dragColPlaceholderDomRef.value) return |
||||||
|
|
||||||
|
if (e.clientX === 0) { |
||||||
|
dragColPlaceholderDomRef.value!.style.left = `0px` |
||||||
|
dragColPlaceholderDomRef.value!.style.height = '0px' |
||||||
|
reorderColumn(draggedCol.value!.id!, toBeDroppedColId.value!) |
||||||
|
draggedCol.value = null |
||||||
|
toBeDroppedColId.value = null |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
const y = dragColPlaceholderDomRef.value!.getBoundingClientRect().top |
||||||
|
const domsUnderMouse = document.elementsFromPoint(e.clientX, y) |
||||||
|
const columnDom = domsUnderMouse.find((dom) => dom.classList.contains('nc-grid-column-header')) |
||||||
|
|
||||||
|
if (columnDom) { |
||||||
|
toBeDroppedColId.value = columnDom?.getAttribute('data-col') ?? null |
||||||
|
} |
||||||
|
|
||||||
|
const x = e.clientX - leftSidebarWidth.value |
||||||
|
|
||||||
|
if (x >= 0) { |
||||||
|
dragColPlaceholderDomRef.value.style.left = `${x.toString()}px` |
||||||
|
} |
||||||
|
|
||||||
|
const remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize) |
||||||
|
|
||||||
|
if (x < leftSidebarWidth.value + 1 * remInPx) { |
||||||
|
setTimeout(() => { |
||||||
|
gridWrapper.value!.scrollLeft -= 2.5 |
||||||
|
}, 250) |
||||||
|
} else if (width.value - x - leftSidebarWidth.value < 15 * remInPx) { |
||||||
|
setTimeout(() => { |
||||||
|
gridWrapper.value!.scrollLeft += 2.5 |
||||||
|
}, 250) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
onDrag, |
||||||
|
onDragStart, |
||||||
|
draggedCol, |
||||||
|
dragColPlaceholderDomRef, |
||||||
|
toBeDroppedColId, |
||||||
|
} |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue