Browse Source

feat(gui-v2): integrate unlink with local state

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3025/head
Pranav C 2 years ago
parent
commit
747d1e9ee7
  1. 13
      packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
  2. 13
      packages/nc-gui-v2/components/virtual-cell/HasMany.vue
  3. 14
      packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
  4. 8
      packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
  5. 13
      packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
  6. 15
      packages/nc-gui-v2/composables/useSmartsheetRowStore.ts

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

@ -30,7 +30,8 @@ const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, un
)
await loadRelatedTableMeta()
const { state, isNew } = useSmartsheetRowStoreOrThrow()
const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
const value = computed(() => {
if (cellValue?.value) {
return cellValue?.value
@ -39,13 +40,21 @@ const value = computed(() => {
}
return null
})
const unlinkRef = async (rec: Record<string, any>) => {
if (isNew.value) {
removeLTARRef(rec, column?.value as ColumnType)
} else {
await unlink(rec)
}
}
</script>
<template>
<div class="flex w-full chips-wrapper align-center" :class="{ active }">
<div class="chips d-flex align-center flex-grow">
<template v-if="value">
<ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value)" />
<ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
</template>
</div>
<div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">

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

@ -36,6 +36,8 @@ const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, un
)
await loadRelatedTableMeta()
const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
const localCellValue = computed(() => {
if (cellValue?.value) {
return cellValue?.value
@ -56,6 +58,15 @@ const cells = computed(() =>
return [...acc, { value, item: curr }]
}, [] as any[]),
)
const unlinkRef = async (rec: Record<string, any>) => {
if (isNew.value) {
removeLTARRef(rec, column?.value as ColumnType)
} else {
await unlink(rec)
}
}
</script>
<template>
@ -63,7 +74,7 @@ const cells = computed(() =>
<template v-if="!isForm">
<div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
<template v-if="cells">
<ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
<ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
<span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
>more...

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

@ -32,7 +32,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
await loadRelatedTableMeta()
const { state, isNew } = useSmartsheetRowStoreOrThrow()
const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
const localCellValue = computed(() => {
if (cellValue?.value) {
@ -54,6 +54,16 @@ const cells = computed(() =>
return [...acc, { value, item: curr }]
}, [] as any[]),
)
const unlinkRef = async (rec: Record<string, any>) => {
if (isNew.value) {
removeLTARRef(rec, column?.value as ColumnType)
} else {
await unlink(rec)
}
}
</script>
<template>
@ -61,7 +71,7 @@ const cells = computed(() =>
<template v-if="!isForm">
<div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
<template v-if="cells">
<ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
<ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
<span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
</template>

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

@ -1,21 +1,23 @@
<script setup lang="ts">
import { ActiveCellInj, ReadonlyInj } from '~/context'
import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context'
import MdiCloseThickIcon from '~icons/mdi/close-thick'
interface Props {
value?: string | number | boolean
item?: any
}
const { value } = defineProps<Props>()
const { value, item } = defineProps<Props>()
const emit = defineEmits(['unlink'])
const readonly = inject(ReadonlyInj, false)
const active = inject(ActiveCellInj, ref(false))
const isForm = inject(IsFormInj)
</script>
<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 }">
<span class="name">{{ value }}</span>
<div v-show="active" v-if="!readonly" class="flex align-center">
<div v-show="active || isForm" v-if="!readonly" class="flex align-center">
<MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
</div>
</div>

13
packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@ -1,6 +1,7 @@
<script lang="ts" setup>
import { watchEffect } from '@vue/runtime-core'
import { Modal } from 'ant-design-vue'
import type { ColumnType } from 'nocodb-sdk'
import { useLTARStoreOrThrow, useVModel } from '#imports'
import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
import { ColumnInj, IsFormInj } from '~/context'
@ -25,7 +26,7 @@ const {
getRelatedTableRowId,
} = useLTARStoreOrThrow()
const { isNew, state } = useSmartsheetRowStoreOrThrow()
const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
watch([vModel, isForm], (nextVal) => {
if (nextVal[0] || nextVal[1]) {
@ -34,10 +35,14 @@ watch([vModel, isForm], (nextVal) => {
})
const unlinkRow = async (row: Record<string, any>) => {
await unlink(row)
await loadChildrenList()
if (isNew.value) {
removeLTARRef(row, column?.value as ColumnType)
} else {
await unlink(row)
await loadChildrenList()
}
}
const container = computed(() =>
isForm
? h('div', {

15
packages/nc-gui-v2/composables/useSmartsheetRowStore.ts

@ -6,7 +6,7 @@ import { useVirtualCell } from '~/composables/useVirtualCell'
const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
// state
const state = ref<Record<string, Record<string, any> | Record<string, any>[]>>({})
const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
// getters
const isNew = computed(() => row.value?.rowMeta?.new)
@ -16,18 +16,29 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
const { isHm, isMm } = $(useVirtualCell(ref(column)))
if (isHm || isMm) {
state.value[column.title!] = state.value[column.title!] || []
state.value[column.title!].push(value)
state.value[column.title!]!.push(value)
} else {
state.value[column.title!] = value
}
}
// actions
const removeLTARRef = async (value: Record<string, any>, column: ColumnType) => {
const { isHm, isMm } = $(useVirtualCell(ref(column)))
if (isHm || isMm) {
state.value[column.title!]?.splice(state.value[column.title!]?.indexOf(value), 1)
} else {
state.value[column.title!] = null
}
}
return {
row,
state,
isNew,
// todo: use better name
addLTARRef,
removeLTARRef,
}
}, 'smartsheet-row-store')

Loading…
Cancel
Save