Browse Source

fix(gui-v2): create a store for LTAR column

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2990/head
Pranav C 2 years ago
parent
commit
8e1c7fca09
  1. 12
      packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
  2. 12
      packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
  3. 4
      packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
  4. 25
      packages/nc-gui-v2/composables/columns/useLTARColumn.ts
  5. 1
      packages/nc-gui-v2/composables/index.ts
  6. 65
      packages/nc-gui-v2/composables/useLTARStore.ts
  7. 1
      packages/nc-gui-v2/context/index.ts

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

@ -1,24 +1,30 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from '@vue/reactivity'
import { Row } from 'ant-design-vue'
import type { ColumnType } from 'nocodb-sdk' import type { ColumnType } from 'nocodb-sdk'
import { provide, useVirtualCell } from '#imports' import { provide, useVirtualCell } from '#imports'
import { ColumnInj, ValueInj, ActiveCellInj } from '~/context' import { ColumnInj, ValueInj, ActiveCellInj, RowInj } from '~/context'
import { NavigateDir } from '~/lib' import { NavigateDir } from '~/lib'
interface Props { interface Props {
column: ColumnType column: ColumnType
modelValue: any modelValue: any
row: Record<string, any>
active?: boolean active?: boolean
} }
const props = defineProps<Props>() const props = defineProps<Props>()
const { column, modelValue: value, } = props const emit = defineEmits(['update:modelValue', 'navigate'])
const { column, modelValue: value, row } = props
const active = toRef(props, 'active', false) const active = toRef(props, 'active', false)
const emit = defineEmits(['update:modelValue', 'navigate'])
provide(ColumnInj, column) provide(ColumnInj, column)
provide(ValueInj, value) provide(ValueInj, value)
provide(ActiveCellInj, active) provide(ActiveCellInj, active)
provide(RowInj, row)
provide('value', value)
const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column) const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
</script> </script>

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

@ -1,25 +1,27 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk' import type { ColumnType } from 'nocodb-sdk'
import ItemChip from './components/ItemChip.vue' import ItemChip from './components/ItemChip.vue'
import { ColumnInj, ValueInj } from '~/context' import { ColumnInj, ValueInj, RowInj } from '~/context'
import { useBelongsTo } from '#imports' import { useBelongsTo } from '#imports'
import { useProvideLTARStore } from '#imports'
import MdiExpandIcon from '~icons/mdi/arrow-expand' import MdiExpandIcon from '~icons/mdi/arrow-expand'
const column = inject(ColumnInj) const column = inject(ColumnInj)
const value = inject(ValueInj) const value = inject(ValueInj)
const row = inject(RowInj)
const active = false const active = false
const localState = null const localState = null
const { parentMeta, loadParentMeta, primaryValueProp } = useBelongsTo(column as ColumnType) const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp,childrenExcludedList } = useProvideLTARStore(column as ColumnType, row)
await loadParentMeta() await loadRelatedTableMeta()
const data = await childrenExcludedList()
</script> </script>
<template> <template>
<div class="flex w-full chips-wrapper align-center group" :class="{ active }"> <div class="flex w-full chips-wrapper align-center group" :class="{ active }">
<div class="chips d-flex align-center flex-grow"> <div class="chips d-flex align-center flex-grow">
<template v-if="value || localState"> <template v-if="value || localState">
<ItemChip :active="active" :item="value" :value="value[primaryValueProp]" /> <ItemChip :active="active" :item="value" :value="value[relatedTablePrimaryValueProp]" />
</template> </template>
</div> </div>
<div class="flex-1" /> <div class="flex-1" />

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

@ -13,9 +13,9 @@ const active = inject(ActiveCellInj, false)
</script> </script>
<template> <template>
<div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }" > <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }">
<span class="name">{{ value }}</span> <span class="name">{{ value }}</span>
<div v-show="active" v-if="!readonly" class="flex align-center "> <div v-show="active" v-if="!readonly" class="flex align-center">
<MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" /> <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" />
</div> </div>
</div> </div>

25
packages/nc-gui-v2/composables/columns/useLTARColumn.ts

@ -1,13 +1,14 @@
import {ColumnType, LinkToAnotherRecordType, TableType} from "nocodb-sdk"; import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
import {Ref} from "vue"; import type { Ref } from 'vue'
export default (column: Ref<ColumnType>) =>{ export default (column: Ref<ColumnType>) => {
const { $api } = useNuxtApp()
const {$api} = useNuxtApp() const { metas, getMeta } = useMetas()
const {metas,getMeta} = useMetas()
const colOptions = computed<LinkToAnotherRecordType>(() => column.value.colOptions as LinkToAnotherRecordType) const colOptions = computed<LinkToAnotherRecordType>(() => column.value.colOptions as LinkToAnotherRecordType)
const relatedTableMeta = computed<TableType>(() => colOptions?.value && metas.value?.[colOptions.value?.fk_related_model_id as string]) const relatedTableMeta = computed<TableType>(
() => colOptions?.value && metas.value?.[colOptions.value?.fk_related_model_id as string],
)
const removeChild = () => { const removeChild = () => {
// todo: audit // todo: audit
@ -26,10 +27,9 @@ export default (column: Ref<ColumnType>) =>{
// await this.$api.dbTableRow.nestedAdd('noco', this.projectName, this.meta.title, id, 'bt', this.column.title, pid); // await this.$api.dbTableRow.nestedAdd('noco', this.projectName, this.meta.title, id, 'bt', this.column.title, pid);
} }
const loadRelatedTableMeta= async ()=>{ const loadRelatedTableMeta = async () => {
return getMeta(colOptions.value?.fk_related_model_id as string) return getMeta(colOptions.value?.fk_related_model_id as string)
} }
// this.data = await this.$api.dbTableRow.nestedChildrenExcludedList( // this.data = await this.$api.dbTableRow.nestedChildrenExcludedList(
// 'noco', // 'noco',
@ -45,7 +45,6 @@ export default (column: Ref<ColumnType>) =>{
// } // }
// ); // );
// this.data = await this.$api.dbTableRow.nestedList( // this.data = await this.$api.dbTableRow.nestedList(
// 'noco', // 'noco',
// this.projectName, // this.projectName,
@ -59,5 +58,5 @@ export default (column: Ref<ColumnType>) =>{
// } // }
// ); // );
return {addChild, removeChild, loadRelatedTableMeta, relatedTableMeta} return { addChild, removeChild, loadRelatedTableMeta, relatedTableMeta }
} }

1
packages/nc-gui-v2/composables/index.ts

@ -21,3 +21,4 @@ export * from './useViewSorts'
export * from './useVirtualCell' export * from './useVirtualCell'
export * from './useColumnCreateStore' export * from './useColumnCreateStore'
export * from './useSmartsheetStore' export * from './useSmartsheetStore'
export * from './useLTARStore'

65
packages/nc-gui-v2/composables/useLTARStore.ts

@ -0,0 +1,65 @@
import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
import { useMetas } from './useMetas'
import { useInjectionState } from '#imports'
import { useProject } from '~/composables/useProject'
import { NOCO } from '~/lib'
const [useProvideLTARStore, useLTARStore] = useInjectionState((column: ColumnType, row?: Record<string, any>) => {
// state
const { metas, getMeta } = useMetas()
const { project } = useProject()
const { $api } = useNuxtApp()
// getters
const meta = computed(() => metas?.value?.[column.fk_model_id as string])
const relatedTableMeta = computed<TableType>(() => {
return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
})
const rowId = computed(() =>
meta.value.columns
.filter((c) => c.pk)
.map((c) => row?.[c.title])
.join('___'),
)
// actions
const loadRelatedTableMeta = async () => {
await getMeta((column.colOptions as any)?.fk_related_model_id as string)
}
const relatedTablePrimaryValueProp = computed(() => {
return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
})
const size = 25
const query = ''
const page = 1
const childrenExcludedList = async () => {
// this.data =
return await $api.dbTableRow.nestedChildrenExcludedList(
NOCO,
project.value.id as string,
meta.value.title,
rowId.value,
(column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
column.title as string,
// todo: swagger type correction
{
limit: size,
offset: size * (page - 1),
where: query && `(${relatedTablePrimaryValueProp.value},like,${query})`,
} as any,
)
}
return { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, childrenExcludedList, rowId }
}, 'ltar-store')
export { useProvideLTARStore }
export function useLTARStoreOrThrow() {
const ltarStore = useLTARStore()
if (ltarStore == null) throw new Error('Please call `useLTARStore` on the appropriate parent component')
return ltarStore
}

1
packages/nc-gui-v2/context/index.ts

@ -6,6 +6,7 @@ import type { TabItem } from '~/composables/useTabs'
export const EditEnabledInj: InjectionKey<boolean> = Symbol('edit-enabled') export const EditEnabledInj: InjectionKey<boolean> = Symbol('edit-enabled')
export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell') export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
export const RowInj: InjectionKey<Ref<Record<string, any>>> = Symbol('row')
export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection') export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection') export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection') export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')

Loading…
Cancel
Save