Browse Source

refactor(nc-gui): replace virtual cell icon with render fn

pull/3847/head
braks 2 years ago
parent
commit
b60e861caa
  1. 2
      packages/nc-gui/components/smartsheet/header/CellIcon.ts
  2. 0
      packages/nc-gui/components/smartsheet/header/CellIcon.vue
  3. 85
      packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts

2
packages/nc-gui/components/smartsheet/header/CellIcon.ts

@ -126,7 +126,7 @@ export default defineComponent({
return () => {
if (!column.value) return null
return h(renderIcon(column.value, abstractType.value), { class: 'text-grey mx-1 !text-sm' })
return h(renderIcon(column.value, abstractType.value), { class: 'text-grey mx-1 !text-xs' })
}
},
})

0
packages/nc-gui/components/smartsheet/header/CellIcon.vue

85
packages/nc-gui/components/smartsheet/header/VirtualCellIcon.vue → packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { PropType } from '@vue/runtime-core'
import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
import { RelationTypes, UITypes } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { ColumnInj, MetaInj, computed, inject, isBt, isHm, isLookup, isMm, isRollup, ref, toRef } from '#imports'
import { RelationTypes, UITypes } from 'nocodb-sdk'
import { ColumnInj, MetaInj, defineComponent, h, inject, isBt, isHm, isLookup, isMm, isRollup, ref, toRef, watch } from '#imports'
import GenericIcon from '~icons/mdi/square-rounded'
import HMIcon from '~icons/mdi/table-arrow-right'
import BTIcon from '~icons/mdi/table-arrow-left'
@ -13,28 +13,10 @@ import CountIcon from '~icons/mdi/counter'
import SpecificDBTypeIcon from '~icons/mdi/database-settings'
import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
const props = defineProps<{ columnMeta?: ColumnType }>()
const columnMeta = toRef(props, 'columnMeta')
const column = inject(ColumnInj, ref(columnMeta)) as Ref<ColumnType & { colOptions: LookupType }>
let relationColumn: ColumnType & { colOptions: LookupType }
if (column) {
if (isLookup(column.value) || isBt(column.value) || isRollup(column.value) || isMm(column.value) || isHm(column.value)) {
const meta = inject(MetaInj, ref())
relationColumn = meta.value?.columns?.find((c) => c.id === column.value?.colOptions?.fk_relation_column_id) as ColumnType & {
colOptions: LinkToAnotherRecordType
}
}
}
const icon = computed(() => {
switch (column.value?.uidt) {
const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
switch (column.uidt) {
case UITypes.LinkToAnotherRecord:
switch ((column.value.colOptions as LinkToAnotherRecordType)?.type) {
switch ((column.colOptions as LinkToAnotherRecordType)?.type) {
case RelationTypes.MANY_TO_MANY:
return { icon: MMIcon, color: 'text-accent' }
case RelationTypes.HAS_MANY:
@ -70,10 +52,55 @@ const icon = computed(() => {
case UITypes.Count:
return { icon: CountIcon, color: 'text-grey' }
}
return { icon: GenericIcon, color: 'text-grey' }
})
</script>
}
export default defineComponent({
name: 'VirtualCellIcon',
props: {
columnMeta: {
type: Object as PropType<ColumnType>,
required: false,
},
},
setup(props) {
const columnMeta = toRef(props, 'columnMeta')
const column = inject(ColumnInj, ref(columnMeta)) as Ref<ColumnType & { colOptions: LookupType }>
let relationColumn: ColumnType & { colOptions: LookupType }
<template>
<component :is="icon.icon" class="mx-1 !text-xs" :class="icon.color" />
</template>
watch(
column,
() => {
if (column && column.value) {
if (
isMm(column.value) ||
isHm(column.value) ||
isBt(column.value) ||
isLookup(column.value) ||
isRollup(column.value)
) {
const meta = inject(MetaInj, ref())
relationColumn = meta.value?.columns?.find(
(c) => c.id === column.value?.colOptions?.fk_relation_column_id,
) as ColumnType & {
colOptions: LinkToAnotherRecordType
}
}
}
},
{ immediate: true },
)
return () => {
if (!column.value) return null
const { icon: Icon, color } = renderIcon(column.value, relationColumn)
return h(Icon, { class: `${color} mx-1 !text-xs` })
}
},
})
Loading…
Cancel
Save