Browse Source

fix/Added creating a new record and opening expanded form when clicking on the Add new row button

pull/3225/head
Muhammed Mustafa 2 years ago
parent
commit
ba0a82d5e8
  1. 20
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  2. 9
      packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
  3. 6
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
  4. 3
      packages/nc-gui-v2/components/tabs/Smartsheet.vue
  5. 9
      packages/nc-gui-v2/composables/useViewData.ts
  6. 1
      packages/nc-gui-v2/context/index.ts

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

@ -45,6 +45,7 @@ const readOnly = inject(ReadonlyInj, false)
const isLocked = inject(IsLockedInj, false)
const reloadViewDataHook = inject(ReloadViewDataHookInj)
const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)
const { isUIAllowed } = useUIPermission()
@ -87,6 +88,7 @@ const {
deleteSelectedRows,
selectedAllRecords,
loadAggCommentsCount,
removeLastEmptyRow,
} = useViewData(meta, view as any, xWhere)
const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
@ -107,6 +109,17 @@ reloadViewDataHook?.on(async () => {
loadAggCommentsCount()
})
const expandForm = (row: Row, state?: Record<string, any>) => {
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
}
openNewRecordFormHook?.on(async () => {
const newRow = await addEmptyRow()
expandForm(newRow)
})
const selectCell = (row: number, col: number) => {
selected.row = row
selected.col = col
@ -293,12 +306,6 @@ const onNavigate = (dir: NavigateDir) => {
break
}
}
const expandForm = (row: Row, state: Record<string, any>) => {
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
}
</script>
<template>
@ -504,6 +511,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
:row="expandedFormRow"
:state="expandedFormRowState"
:meta="meta"
@remove-last-empty-row="removeLastEmptyRow"
/>
</div>
</template>

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

@ -36,7 +36,7 @@ interface Props {
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const emits = defineEmits(['update:modelValue', 'removeLastEmptyRow'])
const row = toRef(props, 'row')
@ -91,6 +91,11 @@ watch(
const isExpanded = useVModel(props, 'modelValue', emits, {
defaultValue: false,
})
const onClose = () => {
if (row.value?.rowMeta?.new) emits('removeLastEmptyRow')
isExpanded.value = false
}
</script>
<script lang="ts">
@ -101,7 +106,7 @@ export default {
<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="onClose" />
<div class="!bg-gray-100 rounded">
<div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
<div class="flex-grow overflow-auto scrollbar-thin-primary">

6
packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue

@ -1,7 +1,9 @@
<script setup lang="ts">
const emits = defineEmits(['addRow'])
import { OpenNewRecordFormHookInj, inject } from '#imports'
const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
const isLocked = inject(IsLockedInj)
const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)!
</script>
<template>
@ -13,7 +15,7 @@ const isLocked = inject(IsLockedInj)
>
<MdiPlusOutline
:class="{ 'cursor-pointer group-hover:(!text-white)': !isLocked, 'disabled': isLocked }"
@click="!isLocked ? emits('addRow') : {}"
@click="!isLocked ? openNewRecordFormHook.trigger() : {}"
/>
</div>
</a-tooltip>

3
packages/nc-gui-v2/components/tabs/Smartsheet.vue

@ -8,6 +8,7 @@ import {
IsFormInj,
IsLockedInj,
MetaInj,
OpenNewRecordFormHookInj,
ReloadViewDataHookInj,
TabMetaInj,
computed,
@ -42,6 +43,7 @@ watchEffect(async () => {
})
const reloadEventHook = createEventHook<void>()
const openNewRecordFormHook = createEventHook<void>()
const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
@ -54,6 +56,7 @@ provide(TabMetaInj, tabMeta)
provide(ActiveViewInj, activeView)
provide(IsLockedInj, isLocked)
provide(ReloadViewDataHookInj, reloadEventHook)
provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
provide(FieldsInj, fields)
provide(IsFormInj, isForm)

9
packages/nc-gui-v2/composables/useViewData.ts

@ -214,6 +214,14 @@ export function useViewData(
oldRow: {},
rowMeta: { new: true },
})
return formattedData.value[addAfter]
}
const removeLastEmptyRow = () => {
const lastRow = formattedData.value[formattedData.value.length - 1]
if (lastRow.rowMeta.new) {
formattedData.value.pop()
}
}
const deleteRowById = async (id: string) => {
@ -356,5 +364,6 @@ export function useViewData(
updateFormView,
aggCommentCount,
loadAggCommentsCount,
removeLastEmptyRow,
}
}

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

@ -21,6 +21,7 @@ export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection
export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')

Loading…
Cancel
Save