Browse Source

feat(gui-v2): lookup cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3003/head
Pranav C 2 years ago
parent
commit
4a099b65ba
  1. 5
      packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
  2. 4
      packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
  3. 4
      packages/nc-gui-v2/components/virtual-cell/Formula.vue
  4. 4
      packages/nc-gui-v2/components/virtual-cell/HasMany.vue
  5. 65
      packages/nc-gui-v2/components/virtual-cell/Lookup.vue
  6. 4
      packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
  7. 4
      packages/nc-gui-v2/components/virtual-cell/Rollup.vue

5
packages/nc-gui-v2/components/smartsheet/VirtualCell.vue

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import { provide, useVirtualCell } from '#imports'
import { ColumnInj } from '~/context'
import { ColumnInj, ValueInj } from '~/context'
import { NavigateDir } from '~/lib'
interface Props {
@ -14,7 +14,7 @@ const { column, modelValue: value } = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'navigate'])
provide(ColumnInj, column)
provide('value', value)
provide(ValueInj, value)
const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
</script>
@ -31,6 +31,7 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
<VirtualCellRollup v-else-if="isRollup" />
<VirtualCellFormula v-else-if="isFormula" />
<VirtualCellCount v-else-if="isCount" />
<VirtualCellLookup v-else-if="isLookup" />
</div>
</template>

4
packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

@ -1,11 +1,11 @@
<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import ItemChip from './components/ItemChip.vue'
import { ColumnInj } from '~/context'
import { ColumnInj, ValueInj } from '~/context'
import { useBelongsTo } from '#imports'
const column = inject(ColumnInj)
const value = inject('value')
const value = inject(ValueInj)
const active = false
const localState = null

4
packages/nc-gui-v2/components/virtual-cell/Formula.vue

@ -1,12 +1,12 @@
<script lang="ts" setup>
import { computed, useProject } from '#imports'
import { ColumnInj } from '~/context'
import { ColumnInj, ValueInj } from '~/context'
import { handleTZ } from '~/utils/dateTimeUtils'
import { replaceUrlsWithLink } from '~/utils/urlUtils'
const column = inject(ColumnInj)
const value = inject('value')
const value = inject(ValueInj)
const { isPg } = useProject()

4
packages/nc-gui-v2/components/virtual-cell/HasMany.vue

@ -1,11 +1,11 @@
<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import ItemChip from './components/ItemChip.vue'
import { ColumnInj } from '~/context'
import { ColumnInj, ValueInj } from '~/context'
import { useHasMany } from '#imports'
const column = inject(ColumnInj)
const value = inject('value')
const value = inject(ValueInj)
const active = false
const { childMeta, loadChildMeta, primaryValueProp } = useHasMany(column as ColumnType)

65
packages/nc-gui-v2/components/virtual-cell/Lookup.vue

@ -1,40 +1,59 @@
<script lang="ts" setup>
import { ColumnType, LinkToAnotherRecordType, LookupType, isVirtualCol } from 'nocodb-sdk'
import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
import { RelationTypes, isVirtualCol, UITypes } from 'nocodb-sdk'
import { useColumn } from '~/composables'
import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj, ValueInj } from '~/context'
import { ColumnInj, MetaInj, ReadonlyInj, ValueInj } from '~/context'
const { metas, getMeta } = useMetas()
const {metas, getMeta} = useMetas();
provide(ReadonlyInj, true)
provide(ReadonlyInj, true);
const column = inject(ColumnInj) as ColumnType & { colOptions: LookupType }
const meta = inject(MetaInj)
const value = inject(ValueInj)
const arrValue = Array.isArray(value) ? value : [value]
const column = inject(ColumnInj) as ColumnType & { colOptions: LookupType };
const meta = inject(MetaInj);
const value = inject(ValueInj);
const relationColumn = meta?.value.columns?.find((c) => c.id === column.colOptions.fk_relation_column_id) as ColumnType & {
colOptions: LinkToAnotherRecordType
}
await getMeta(relationColumn.colOptions.fk_related_model_id as string)
const lookupTableMeta = metas?.value[relationColumn.colOptions.fk_related_model_id as string]
const lookupColumn = lookupTableMeta?.columns?.find((c) => c.id === column.colOptions.fk_lookup_column_id) as ColumnType
const relationColumn = meta?.value.columns?.find(c => c.id === column.colOptions.fk_relation_column_id) as ColumnType & { colOptions: LinkToAnotherRecordType };
await getMeta(relationColumn.colOptions.fk_related_model_id as string);
const lookupTableMeta = metas?.value[relationColumn.colOptions.fk_related_model_id as string];
const lookupColumn = lookupTableMeta?.columns?.find(c => c.id === column.colOptions.fk_lookup_column_id) as ColumnType;
provide(MetaInj, ref(lookupTableMeta));
provide(MetaInj, ref(lookupTableMeta))
const lookupColumnMetaProps = useColumn(lookupColumn)
</script>
<template>
<div class="w-full h-full">
{{lookupColumnMetaProps}}
<div class="w-full h-full flex gap-1">
<template v-if="lookupColumn">
<!-- Render virtual cell -->
<div v-if="isVirtualCol(lookupColumn)">
<template
v-if="lookupColumn.uidt === UITypes.LinkToAnotherRecord && lookupColumn.colOptions.type === RelationTypes.BELONGS_TO"
>
<SmartsheetVirtualCell
:edit-enabled="false" v-if="isVirtualCol(lookupColumn)" v-model="value" :column="lookupColumn"
/>
<SmartsheetCell
v-else
v-model="value"
:column="lookupColumn"
v-for="(v, i) of arrValue"
:key="i"
:edit-enabled="false"
:model-value="v"
:column="lookupColumn"
/>
</template>
<SmartsheetVirtualCell v-else :edit-enabled="false" :model-value="arrValue" :column="lookupColumn" />
</div>
<!-- Render normal cell -->
<template v-else>
<!-- For attachment cell avoid adding chip style -->
<div v-for="(v, i) in arrValue" :key="i"
:class="{'bg-gray-100 px-2 rounded-full':!lookupColumnMetaProps.isAttachment}">
<SmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" />
</div>
</template>
</template>
</div>
</template>

4
packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue

@ -1,11 +1,11 @@
<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import ItemChip from './components/ItemChip.vue'
import { ColumnInj } from '~/context'
import { ColumnInj, ValueInj } from '~/context'
import { useManyToMany } from '#imports'
const column = inject(ColumnInj)
const value = inject('value')
const value = inject(ValueInj)
const active = false
const isLocked = false

4
packages/nc-gui-v2/components/virtual-cell/Rollup.vue

@ -1,5 +1,7 @@
<script setup lang="ts">
const value = inject('value')
import { ValueInj } from '~/context'
const value = inject(ValueInj)
</script>
<template>

Loading…
Cancel
Save