mirror of https://github.com/nocodb/nocodb
DarkPhoenix2704
4 months ago
3 changed files with 252 additions and 0 deletions
@ -0,0 +1,234 @@
|
||||
<script setup lang="ts"> |
||||
import { type ColumnType, UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk' |
||||
import Draggable from 'vuedraggable' |
||||
import { generateUniqueColumnName } from '~/helpers/parsers/parserHelpers' |
||||
|
||||
interface Props { |
||||
column: ColumnType |
||||
value?: boolean |
||||
} |
||||
|
||||
const props = defineProps<Props>() |
||||
|
||||
const baseStore = useBase() |
||||
|
||||
const { loadTables } = baseStore |
||||
|
||||
const meta = inject(MetaInj, ref()) |
||||
|
||||
const activeView = inject(ActiveViewInj, ref()) |
||||
|
||||
const columnsHash = ref() |
||||
|
||||
const { tables } = toRefs(baseStore) |
||||
|
||||
const { getMeta } = useMetas() |
||||
|
||||
const { $api } = useNuxtApp() |
||||
|
||||
const { metas } = useMetas() |
||||
|
||||
const column = toRef(props, 'column') |
||||
|
||||
const getIcon = (c: ColumnType) => |
||||
h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), { |
||||
columnMeta: c, |
||||
}) |
||||
|
||||
const value = useVModel(props, 'value') |
||||
|
||||
const searchField = ref('') |
||||
|
||||
const relatedModel = computedAsync(async () => { |
||||
const fkRelatedModelId = (column.value.colOptions as any)?.fk_related_model_id |
||||
|
||||
if (fkRelatedModelId) { |
||||
let table = tables.value.find((t) => t.id === fkRelatedModelId) |
||||
|
||||
if (!table) { |
||||
await loadTables() |
||||
table = tables.value.find((t) => t.id === fkRelatedModelId) |
||||
} |
||||
return table |
||||
} |
||||
return null |
||||
}) |
||||
|
||||
const filteredColumns = ref< |
||||
{ |
||||
column: ColumnType |
||||
show: boolean |
||||
id: string |
||||
}[] |
||||
>([]) |
||||
|
||||
const selectedFields = ref<Record<string, boolean>>({}) |
||||
|
||||
watch([relatedModel, searchField], async () => { |
||||
if (relatedModel.value) { |
||||
const columns = metas.value[relatedModel.value.id].columns |
||||
filteredColumns.value = columns |
||||
.filter((c) => !isSystemColumn(c)) |
||||
.filter((c) => c?.title?.toLowerCase().startsWith(searchField.value?.toLowerCase())) |
||||
} |
||||
}) |
||||
|
||||
const clearAll = () => { |
||||
Object.keys(selectedFields.value).forEach((k) => (selectedFields.value[k] = false)) |
||||
} |
||||
|
||||
const selectAll = () => { |
||||
filteredColumns.value.forEach((c) => (selectedFields.value[c.id] = true)) |
||||
} |
||||
|
||||
const isLoading = ref(false) |
||||
|
||||
const createLookups = async () => { |
||||
try { |
||||
isLoading.value = true |
||||
|
||||
const bulkOpsCols: { |
||||
op: 'add' |
||||
column: ColumnType |
||||
}[] = [] as any |
||||
|
||||
const currIndex = meta.value?.columns?.length ?? 0 |
||||
|
||||
for (const [k] of Object.entries(selectedFields.value).filter(([, v]) => v)) { |
||||
const lookupCol = metas.value[relatedModel.value?.id].columns.find((c) => c.id === k) |
||||
const index = filteredColumns.value.findIndex((c) => c.id === k) |
||||
const tempCol = { |
||||
uidt: UITypes.Lookup, |
||||
fk_lookup_column_id: k, |
||||
fk_relation_column_id: column.value.id, |
||||
lookupTableTitle: relatedModel.value?.title, |
||||
lookupColumnTitle: lookupCol?.title || lookupCol.column_name, |
||||
table_name: meta.value?.table_name, |
||||
title: `${lookupCol?.title} from ${relatedModel.value?.title}`, |
||||
view_id: activeView.value?.id, |
||||
order: currIndex + index, |
||||
column_name: `${lookupCol?.title} from (${relatedModel.value?.title})`, |
||||
column_order: { |
||||
order: currIndex + index, |
||||
view_id: activeView.value?.id, |
||||
}, |
||||
} |
||||
|
||||
const newColName = generateUniqueColumnName({ |
||||
formState: tempCol, |
||||
metaColumns: relatedModel.value?.columns, |
||||
tableExplorerColumns: meta.value?.columns, |
||||
}) |
||||
|
||||
bulkOpsCols.push({ |
||||
op: 'add', |
||||
column: { |
||||
...tempCol, |
||||
title: newColName, |
||||
}, |
||||
}) |
||||
} |
||||
|
||||
await $api.dbTableColumn.bulk(meta.value?.id, { |
||||
hash: columnsHash.value, |
||||
ops: bulkOpsCols, |
||||
}) |
||||
|
||||
await getMeta(meta?.value?.id as string, true) |
||||
|
||||
value.value = false |
||||
} catch (e) { |
||||
console.error(e) |
||||
} finally { |
||||
isLoading.value = false |
||||
} |
||||
} |
||||
|
||||
onMounted(async () => { |
||||
columnsHash.value = (await $api.dbTableColumn.hash(meta.value?.id)).hash |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<NcModal v-model:visible="value" size="small"> |
||||
<div class="flex flex-col gap-3"> |
||||
<h1 class="text-base text-gray-800 font-semibold">{{ $t('general.addLookupField') }}</h1> |
||||
<div class="text-gray-900"> |
||||
{{ $t('labels.addNewLookupHelperText') }} |
||||
</div> |
||||
|
||||
<div class="flex w-full gap-2 justify-between items-center"> |
||||
<a-input v-model:value="searchField" class="w-full h-8 flex-1" size="small" :placeholder="$t('placeholder.searchFields')"> |
||||
<template #prefix> |
||||
<component :is="iconMap.search" class="w-4 text-gray-500 h-4" /> |
||||
</template> |
||||
</a-input> |
||||
<div class="flex items-center gap-2"> |
||||
<NcButton size="small" type="text" @click="clearAll"> {{ $t('labels.clearAll') }} </NcButton> |
||||
<NcButton size="small" type="text" @click="selectAll"> {{ $t('general.addAll') }} </NcButton> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="border-1 rounded-md h-[250px] nc-scrollbar-md border-gray-200"> |
||||
<Draggable v-model="filteredColumns" item-key="id" ghost-class="nc-lookup-menu-items-ghost"> |
||||
<template #item="{ element: field }"> |
||||
<div |
||||
:key="field.id" |
||||
:data-testid="`nc-lookup-add-menu-${field.title}`" |
||||
class="px-3 py-1 flex flex-row items-center rounded-md hover:bg-gray-100" |
||||
@click.stop="selectedFields[field.id] = !selectedFields[field.id]" |
||||
> |
||||
<component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" /> |
||||
<div class="flex flex-row items-center w-full cursor-pointer truncate ml-1 py-[5px] pr-2"> |
||||
<component :is="getIcon(field)" class="!w-3.5 !h-3.5 !text-gray-500" /> |
||||
<NcTooltip class="flex-1 pl-1 pr-2 truncate" show-on-truncate-only> |
||||
<template #title> |
||||
{{ field.title }} |
||||
</template> |
||||
<template #default>{{ field.title }}</template> |
||||
</NcTooltip> |
||||
|
||||
<NcCheckbox v-model:checked="selectedFields[field.id]" size="default" /> |
||||
</div> |
||||
|
||||
<div class="flex-1" /> |
||||
</div> |
||||
</template> |
||||
</Draggable> |
||||
</div> |
||||
|
||||
<div class="flex w-full gap-2 justify-end"> |
||||
<NcButton type="secondary" size="small"> |
||||
{{ $t('general.cancel') }} |
||||
</NcButton> |
||||
|
||||
<NcButton |
||||
:loading="isLoading" |
||||
:disabled="!Object.values(selectedFields).filter(Boolean).length" |
||||
size="small" |
||||
@click="createLookups" |
||||
> |
||||
{{ |
||||
$t('general.addLookupField', { |
||||
count: Object.values(selectedFields).filter(Boolean).length || '', |
||||
}) |
||||
}} |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
</NcModal> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.ant-input::placeholder { |
||||
@apply text-gray-500; |
||||
} |
||||
|
||||
.ant-input:placeholder-shown { |
||||
@apply text-gray-500 !text-md; |
||||
} |
||||
|
||||
.ant-input-affix-wrapper { |
||||
@apply px-4 rounded-lg py-2 w-84 border-1 focus:border-brand-500 border-gray-200 !ring-0; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue