Browse Source

feat(migration): show expanded form on clicking chips

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3025/head
Pranav C 2 years ago
parent
commit
d65aaa687f
  1. 1
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  2. 7
      packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
  3. 41
      packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
  4. 8
      packages/nc-gui-v2/components/virtual-cell/HasMany.vue
  5. 8
      packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
  6. 22
      packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
  7. 4
      packages/nc-gui-v2/composables/useExpandedFormStore.ts
  8. 7
      packages/nc-gui-v2/composables/useSmartsheetRowStore.ts

1
packages/nc-gui-v2/components/smartsheet/Grid.vue

@ -436,6 +436,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
v-model="expandedFormDlg" v-model="expandedFormDlg"
:row="expandedFormRow" :row="expandedFormRow"
:state="expandedFormRowState" :state="expandedFormRowState"
:meta="meta"
/> />
</div> </div>
</template> </template>

7
packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@ -5,13 +5,12 @@ import { useExpandedFormStoreOrThrow } from '~/composables/useExpandedFormStore'
import MdiDoorOpen from '~icons/mdi/door-open' import MdiDoorOpen from '~icons/mdi/door-open'
import MdiDoorClosed from '~icons/mdi/door-closed' import MdiDoorClosed from '~icons/mdi/door-closed'
const emit = defineEmits(['cancel'])
const { meta } = useSmartsheetStoreOrThrow() const { meta } = useSmartsheetStoreOrThrow()
const { commentsDrawer, row, primaryValue, save: _save } = useExpandedFormStoreOrThrow() const { commentsDrawer, row, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow() const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
const emit = defineEmits(['cancel'])
const save = async () => { const save = async () => {
if (isNew.value) { if (isNew.value) {
const data = await _save() const data = await _save()
@ -41,8 +40,8 @@ const iconColor = '#1890ff'
<template v-if="primaryValue">: {{ primaryValue }}</template> <template v-if="primaryValue">: {{ primaryValue }}</template>
</h5> </h5>
<div class="flex-grow" /> <div class="flex-grow" />
<mdi-reload /> <mdi-reload class="cursor-pointer select-none" />
<component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" /> <component :is="drawerToggleIcon" class="cursor-pointer select-none" @click="commentsDrawer = !commentsDrawer" />
<a-button size="small" class="!text" @click="emit('cancel')"> <a-button size="small" class="!text" @click="emit('cancel')">
<!-- Cancel --> <!-- Cancel -->
{{ $t('general.cancel') }} {{ $t('general.cancel') }}

41
packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue

@ -1,10 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ColumnType, TableType } from 'nocodb-sdk'
import { isVirtualCol } from 'nocodb-sdk' import { isVirtualCol } from 'nocodb-sdk'
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
import { Ref, computed, provide, toRef, watch } from 'vue' import { computed, provide, toRef, watch } from 'vue'
import Comments from './Comments.vue' import Comments from './Comments.vue'
import Header from './Header.vue' import Header from './Header.vue'
import { useSmartsheetStoreOrThrow } from '~/composables' import { NOCO } from '~/lib'
import { extractPkFromRow } from '~/utils'
import { useNuxtApp } from '#app'
import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables'
import type { Row } from '~/composables' import type { Row } from '~/composables'
import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore' import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
import { FieldsInj, IsFormInj, MetaInj } from '~/context' import { FieldsInj, IsFormInj, MetaInj } from '~/context'
@ -13,15 +17,42 @@ interface Props {
modelValue: string | null modelValue: string | null
row: Row row: Row
state?: Record<string, any> | null state?: Record<string, any> | null
meta: TableType
loadRow?: boolean
useMetaFields ?:boolean
} }
const props = defineProps<Props>() const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue']) const emits = defineEmits(['update:modelValue'])
const fields = inject(FieldsInj, ref([])) const _fields = inject(FieldsInj, ref([]))
const row = toRef(props, 'row') const row = toRef(props, 'row')
const state = toRef(props, 'state') const state = toRef(props, 'state')
const meta = toRef(props, 'meta')
const fields = computed(() => {
if (props.useMetaFields) {
return meta.value.columns ?? []
}
return _fields.value
})
provide(MetaInj, meta)
const { $api } = useNuxtApp()
if (props.loadRow) {
const { project } = useProject()
row.value.row = await $api.dbTableRow.read(
NOCO,
project.value.id as string,
meta.value.title,
extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]),
)
row.value.oldRow = { ...row.value.row }
row.value.rowMeta = {}
}
const { meta } = useSmartsheetStoreOrThrow() useProvideSmartsheetStore(ref({}) as any, meta)
provide(IsFormInj, true) provide(IsFormInj, true)
@ -47,7 +78,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
<template> <template>
<a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false"> <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
<Header @cancel="isExpanded = false" /> <Header @cancel="isExpanded = false" />
<a-card class="!bg-gray-100"> <a-card class="!bg-gray-100">
<div class="flex"> <div class="flex">
<div class="flex-grow"> <div class="flex-grow">

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

@ -71,8 +71,12 @@ const unlinkRef = async (rec: Record<string, any>) => {
<template v-if="!isForm"> <template v-if="!isForm">
<div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden"> <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
<template v-if="cells"> <template v-if="cells">
<ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" /> <ItemChip
v-for="(cell, i) of cells"
:key="i"
:item="ch"
:value="cell.value"
@unlink="unlinkRef(cell.item)" />
<span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true" <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
>more... >more...
</span> </span>

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

@ -71,7 +71,13 @@ const unlinkRef = async (rec: Record<string, any>) => {
<template v-if="!isForm"> <template v-if="!isForm">
<div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden"> <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
<template v-if="cells"> <template v-if="cells">
<ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" /> <ItemChip
v-for="(cell, i) of cells"
:key="i"
:item="ch"
: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> <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
</template> </template>

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useLTARStoreOrThrow } from '~/composables'
import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context' import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context'
import MdiCloseThickIcon from '~icons/mdi/close-thick' import MdiCloseThickIcon from '~icons/mdi/close-thick'
@ -8,18 +9,37 @@ interface Props {
} }
const { value, item } = defineProps<Props>() const { value, item } = defineProps<Props>()
const emit = defineEmits(['unlink']) const emit = defineEmits(['unlink'])
const { relatedTableMeta } = useLTARStoreOrThrow()
const readonly = inject(ReadonlyInj, false) const readonly = inject(ReadonlyInj, false)
const active = inject(ActiveCellInj, ref(false)) const active = inject(ActiveCellInj, ref(false))
const isForm = inject(IsFormInj) const isForm = inject(IsFormInj)
const expandedFormDlg = ref(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 }"
@click="expandedFormDlg = true"
>
<span class="name">{{ value }}</span> <span class="name">{{ value }}</span>
<div v-show="active || isForm" 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')" /> <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
</div> </div>
<SmartsheetExpandedForm
v-if="expandedFormDlg"
v-model="expandedFormDlg"
:row="{ row: item }"
:meta="relatedTableMeta"
load-row
use-meta-fields
/>
</div> </div>
</template> </template>

4
packages/nc-gui-v2/composables/useExpandedFormStore.ts

@ -101,7 +101,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
} }
const save = async () => { const save = async () => {
let data; let data
try { try {
// todo: // todo:
// if (this.presetValues) { // if (this.presetValues) {
@ -117,7 +117,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
}, {} as Record<string, any>) }, {} as Record<string, any>)
if (row.value.rowMeta.new) { if (row.value.rowMeta.new) {
data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj) data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
/* todo: /* todo:
// save hasmany and manytomany relations from local state // save hasmany and manytomany relations from local state

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

@ -75,12 +75,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
if (isHm || isMm) { if (isHm || isMm) {
const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[] const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
for (const relatedRow of relatedRows) { for (const relatedRow of relatedRows) {
await linkRecord( await linkRecord(id, extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]), column, colOptions.type)
id,
extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
column,
colOptions.type,
)
} }
} else if (isBt && state.value?.[column.title!]) { } else if (isBt && state.value?.[column.title!]) {
await linkRecord( await linkRecord(

Loading…
Cancel
Save