Browse Source

add 'delete row' and 'duplicate row' buttons to edit overaly - WIP

pull/4898/head
Daniel Spaude 2 years ago
parent
commit
d20c5afa3d
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 13
      packages/nc-gui/components/smartsheet/expanded-form/Header.vue
  2. 87
      packages/nc-gui/components/smartsheet/expanded-form/MoreActions.vue
  3. 27
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  4. 15
      packages/nc-gui/composables/useViewData.ts

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

@ -12,7 +12,7 @@ import {
const props = defineProps<{ view?: ViewType }>() const props = defineProps<{ view?: ViewType }>()
const emit = defineEmits(['cancel']) const emit = defineEmits(['cancel', 'duplicateRow'])
const route = useRoute() const route = useRoute()
@ -75,9 +75,14 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
} }
}) })
const { deleteRowById } = useViewData(meta, ref(props.view)) const { deleteRowById, addEmptyRow } = useViewData(meta, ref(props.view))
const duplicateRow = () => alert('duplicateRow') // const onDuplicateRowClick = async () => {
// // const newRow = duplicateRowById(primaryKey.value)
// // console.log('newRow', newRow)
// const newRow = await addEmptyRow()
// // expandForm(newRow)
// }
const showDeleteRowModal = ref(false) const showDeleteRowModal = ref(false)
@ -172,7 +177,7 @@ const onConfirmDeleteRowClick = async () => {
<template #overlay> <template #overlay>
<div class="bg-gray-50 py-2 shadow-lg !border"> <div class="bg-gray-50 py-2 shadow-lg !border">
<div> <div>
<div v-e="['a:actions:download-csv']" class="nc-menu-item" @click="duplicateRow"> <div v-e="['a:actions:download-csv']" class="nc-menu-item" @click="emit('duplicateRow')">
<MdiContentCopy class="text-gray-500" /> <MdiContentCopy class="text-gray-500" />
{{ $t('activity.duplicateRow') }} {{ $t('activity.duplicateRow') }}
</div> </div>

87
packages/nc-gui/components/smartsheet/expanded-form/MoreActions.vue

@ -1,87 +0,0 @@
<script lang="ts" setup>
// import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, inject, ref, useI18n, useNuxtApp, useProject } from '#imports'
import type { TableType, ViewType } from 'nocodb-sdk'
// const { t } = useI18n()
// const sharedViewListDlg = ref(false)
// const isPublicView = inject(IsPublicInj, ref(false))
// const isView = false
// const { project } = useProject()
// const { $api } = useNuxtApp()
// const meta = inject(MetaInj, ref())
// const fields = inject(FieldsInj, ref([]))
// const selectedView = inject(ActiveViewInj, ref())
const { meta, view, primaryKey } = defineProps<{
meta: TableType
view: ViewType
primaryKey: string
}>()
const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
const { deleteRowById } = useViewData(ref(meta), ref(view))
const duplicateRow = () => alert('duplicateRow')
const onDeleteRowClick = async () => {
// alert('deleteRow')
await deleteRowById(primaryKey)
reloadTrigger.trigger()
// loadData()
// deleteRow
}
</script>
<template>
<div>
<a-dropdown>
<a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
<div class="flex gap-1 items-center">
<MdiFlashOutline />
<!-- More -->
<span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
<MdiMenuDown class="text-grey" />
</div>
</a-button>
<template #overlay>
<div class="bg-gray-50 py-2 shadow-lg !border">
<div>
<div v-e="['a:actions:download-csv']" class="nc-menu-item" @click="duplicateRow">
<MdiContentCopy class="text-gray-500" />
{{ $t('activity.duplicateRow') }}
</div>
<div v-e="['a:actions:download-excel']" class="nc-menu-item" @click="onDeleteRowClick">
<MdiDelete class="text-gray-500" />
{{ $t('activity.deleteRow') }}
</div>
</div>
</div>
</template>
</a-dropdown>
<!-- <a-modal
v-model:visible="sharedViewListDlg"
:class="{ active: sharedViewListDlg }"
:title="$t('activity.listSharedView')"
width="max(900px,60vw)"
:footer="null"
wrap-class-name="nc-modal-shared-view-list"
>
<LazySmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
</a-modal> -->
</div>
</template>

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

@ -59,6 +59,8 @@ provide(MetaInj, meta)
const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row) const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
const duplicatingRowInProgress = ref(false)
if (props.loadRow) { if (props.loadRow) {
await loadRow() await loadRow()
} }
@ -100,6 +102,27 @@ const onClose = () => {
isExpanded.value = false isExpanded.value = false
} }
const onDuplicateRow = () => {
// isExpanded.value = false
duplicatingRowInProgress.value = true
const previousRow = Object.assign({}, row.value)
row.value = { row: {}, oldRow: {}, rowMeta: { new: true } }
setTimeout(async () => {
// await nextTick()
row.value = previousRow
// row.value = {
// ...row.value,
// rowMeta: {
// ...row.value.rowMeta,
// new: true,
// },
// }
isExpanded.value = true
duplicatingRowInProgress.value = false
message.success('Prepared duplicated row (not saved yet)')
}, 500)
}
const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook()) const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
// override reload trigger and use it to reload grid and the form itself // override reload trigger and use it to reload grid and the form itself
@ -147,13 +170,15 @@ export default {
class="nc-drawer-expanded-form" class="nc-drawer-expanded-form"
:class="{ active: isExpanded }" :class="{ active: isExpanded }"
> >
<SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" /> <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicateRow="onDuplicateRow" />
<div class="!bg-gray-100 rounded flex-1"> <div class="!bg-gray-100 rounded flex-1">
<div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]"> <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
<div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container"> <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
<div class="w-[500px] mx-auto"> <div class="w-[500px] mx-auto">
<a-spin v-if="duplicatingRowInProgress" class="!flex items-center" />
<div <div
v-if="!duplicatingRowInProgress"
v-for="(col, i) of fields" v-for="(col, i) of fields"
v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord" v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord"
:key="col.title" :key="col.title"

15
packages/nc-gui/composables/useViewData.ts

@ -100,6 +100,7 @@ export function useViewData(
})) }))
function addEmptyRow(addAfter = formattedData.value.length) { function addEmptyRow(addAfter = formattedData.value.length) {
debugger
formattedData.value.splice(addAfter, 0, { formattedData.value.splice(addAfter, 0, {
row: {}, row: {},
oldRow: {}, oldRow: {},
@ -109,6 +110,19 @@ export function useViewData(
return formattedData.value[addAfter] return formattedData.value[addAfter]
} }
// // function createNewRowWithDuplicatedValues()
// function duplicateRowById(rowId: string) {
// debugger
// const row = formattedData.value.find((row) => row.row.id === rowId)
// if (row) {
// const newRow = addEmptyRow(formattedData.value.indexOf(row) + 1)
// newRow.row = { ...row.row }
// return newRow
// }
// }
function removeLastEmptyRow() { function removeLastEmptyRow() {
const lastRow = formattedData.value[formattedData.value.length - 1] const lastRow = formattedData.value[formattedData.value.length - 1]
@ -528,6 +542,7 @@ export function useViewData(
updateFormView, updateFormView,
aggCommentCount, aggCommentCount,
loadAggCommentsCount, loadAggCommentsCount,
// duplicateRowById,
removeLastEmptyRow, removeLastEmptyRow,
removeRowIfNew, removeRowIfNew,
} }

Loading…
Cancel
Save