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

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

@ -1,10 +1,14 @@
<script setup lang="ts">
import type { ColumnType, TableType } from 'nocodb-sdk'
import { isVirtualCol } from 'nocodb-sdk'
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 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 { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
import { FieldsInj, IsFormInj, MetaInj } from '~/context'
@ -13,15 +17,42 @@ interface Props {
modelValue: string | null
row: Row
state?: Record<string, any> | null
meta: TableType
loadRow?: boolean
useMetaFields ?:boolean
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const fields = inject(FieldsInj, ref([]))
const _fields = inject(FieldsInj, ref([]))
const row = toRef(props, 'row')
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)
@ -47,7 +78,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
<template>
<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">
<div class="flex">
<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">
<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="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"
>more...
</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">
<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="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>
</template>

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

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

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

@ -101,7 +101,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
}
const save = async () => {
let data;
let data
try {
// todo:
// if (this.presetValues) {
@ -117,7 +117,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
}, {} as Record<string, any>)
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:
// 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) {
const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
for (const relatedRow of relatedRows) {
await linkRecord(
id,
extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
column,
colOptions.type,
)
await linkRecord(id, extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]), column, colOptions.type)
}
} else if (isBt && state.value?.[column.title!]) {
await linkRecord(

Loading…
Cancel
Save