github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(nc-gui): introduce delete row in kanban view

pull/3563/head
Wing-Kam Wong 2 years ago
parent
154e72ffd8
commit
ccc8a04e43
2 changed files with 294 additions and 192 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 427
      packages/nc-gui/components/smartsheet/Kanban.vue
  2. 59
      packages/nc-gui/composables/useKanbanViewStore.ts

427
packages/nc-gui/components/smartsheet/Kanban.vue
Unescape View File

@ -66,6 +66,7 @@ const {
deleteStack, deleteStack,
removeRowFromUncategorizedStack, removeRowFromUncategorizedStack,
shouldScrollToRight, shouldScrollToRight,
deleteRow,
} = useKanbanViewStoreOrThrow() } = useKanbanViewStoreOrThrow()
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
@ -82,6 +83,8 @@ provide(IsKanbanInj, ref(true))
provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable')) provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
const fields = inject(FieldsInj, ref([])) const fields = inject(FieldsInj, ref([]))
const kanbanContainerRef = ref() const kanbanContainerRef = ref()
@ -105,7 +108,7 @@ reloadViewMetaHook?.on(async () => {
}) })
const expandForm = (row: RowType, state?: Record<string, any>) => { const expandForm = (row: RowType, state?: Record<string, any>) => {
if (!isUIAllowed('xcDatatableEditable')) return if (!hasEditPermission) return
const rowId = extractPkFromRow(row.row, meta.value!.columns!) const rowId = extractPkFromRow(row.row, meta.value!.columns!)
@ -123,6 +126,25 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
} }
} }
const _contextMenu = ref(false)
const contextMenu = computed({
get: () => _contextMenu.value,
set: (val) => {
if (hasEditPermission) {
_contextMenu.value = val
}
},
})
const contextMenuTarget = ref<RowType | null>(null)
const showContextMenu = (e: MouseEvent, target?: RowType) => {
e.preventDefault()
if (target) {
contextMenuTarget.value = target
}
}
const expandedFormOnRowIdDlg = computed({ const expandedFormOnRowIdDlg = computed({
get() { get() {
return !!route.query.rowId return !!route.query.rowId
@ -250,212 +272,233 @@ watch(
} }
}, },
) )
// reset context menu target on hide
watch(contextMenu, () => {
if (!contextMenu.value) {
contextMenuTarget.value = null
}
})
</script> </script>
<template> <template>
<div class="flex h-full bg-white px-2"> <div class="flex h-full bg-white px-2">
<div ref="kanbanContainerRef" class="nc-kanban-container flex my-4 px-3 overflow-x-scroll overflow-y-hidden"> <div ref="kanbanContainerRef" class="nc-kanban-container flex my-4 px-3 overflow-x-scroll overflow-y-hidden">
<!-- Draggable Stack --> <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']" overlay-class-name="nc-dropdown-kanban-context-menu">
<Draggable <!-- Draggable Stack -->
v-model="groupingFieldColOptions" <Draggable
class="flex gap-4" v-model="groupingFieldColOptions"
item-key="id" class="flex gap-4"
group="kanban-stack" item-key="id"
draggable=".nc-kanban-stack" group="kanban-stack"
filter=".not-draggable" draggable=".nc-kanban-stack"
:move="onMoveCallback" filter=".not-draggable"
@start="(e) => e.target.classList.add('grabbing')" :move="onMoveCallback"
@end="(e) => e.target.classList.remove('grabbing')" @start="(e) => e.target.classList.add('grabbing')"
@change="onMoveStack($event)" @end="(e) => e.target.classList.remove('grabbing')"
> @change="onMoveStack($event)"
<template #item="{ element: stack, index: stackIdx }"> >
<div class="nc-kanban-stack" :class="{ 'w-[50px]': stack.collapsed }"> <template #item="{ element: stack, index: stackIdx }">
<!-- Non Collapsed Stacks --> <div class="nc-kanban-stack" :class="{ 'w-[50px]': stack.collapsed }">
<a-card <!-- Non Collapsed Stacks -->
v-if="!stack.collapsed" <a-card
:key="stack.id" v-if="!stack.collapsed"
class="mx-4 !bg-[#f0f2f5] flex flex-col w-[280px] h-full rounded-[12px]" :key="stack.id"
:class="{ class="mx-4 !bg-[#f0f2f5] flex flex-col w-[280px] h-full rounded-[12px]"
'not-draggable': stack.id === 'uncategorized' || isLocked || isPublic || !isUIAllowed('xcDatatableEditable'), :class="{
'!cursor-default': isLocked || !isUIAllowed('xcDatatableEditable'), 'not-draggable': stack.id === 'uncategorized' || isLocked || isPublic || !hasEditPermission,
}" '!cursor-default': isLocked || !hasEditPermission,
:head-style="{ paddingBottom: '0px' }" }"
:body-style="{ padding: '0px', height: '100%' }" :head-style="{ paddingBottom: '0px' }"
> :body-style="{ padding: '0px', height: '100%' }"
<!-- Header Color Bar --> >
<div :style="`background-color: ${stack.color}`" class="nc-kanban-stack-head-color h-[10px]"></div> <!-- Header Color Bar -->
<div :style="`background-color: ${stack.color}`" class="nc-kanban-stack-head-color h-[10px]"></div>
<!-- Skeleton -->
<a-skeleton v-if="!formattedData[stack.title] || !countByStack" class="p-4" /> <!-- Skeleton -->
<a-skeleton v-if="!formattedData[stack.title] || !countByStack" class="p-4" />
<!-- Stack -->
<a-layout v-else class="!bg-[#f0f2f5]"> <!-- Stack -->
<a-layout-header> <a-layout v-else class="!bg-[#f0f2f5]">
<div class="nc-kanban-stack-head font-bold flex items-center px-[15px]"> <a-layout-header>
<a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-kanban-stack-context-menu"> <div class="nc-kanban-stack-head font-bold flex items-center px-[15px]">
<div <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-kanban-stack-context-menu">
class="flex items-center w-full" <div
:class="{ 'capitalize': stack.title === 'uncategorized', 'cursor-pointer': !isLocked }" class="flex items-center w-full"
> :class="{ 'capitalize': stack.title === 'uncategorized', 'cursor-pointer': !isLocked }"
<LazyGeneralTruncateText>{{ stack.title }}</LazyGeneralTruncateText> >
<span v-if="!isLocked" class="w-full flex w-[15px]"> <LazyGeneralTruncateText>{{ stack.title }}</LazyGeneralTruncateText>
<mdi-menu-down class="text-grey text-lg ml-auto" /> <span v-if="!isLocked" class="w-full flex w-[15px]">
</span> <mdi-menu-down class="text-grey text-lg ml-auto" />
</div> </span>
<template v-if="!isLocked" #overlay> </div>
<a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded"> <template v-if="!isLocked" #overlay>
<a-menu-item <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded">
v-if="isUIAllowed('xcDatatableEditable') && !isPublic" <a-menu-item
v-e="['c:kanban:add-new-record']" v-if="hasEditPermission && !isPublic"
@click="openNewRecordFormHook.trigger(stack.title === 'uncategorized' ? null : stack.title)" v-e="['c:kanban:add-new-record']"
> @click="openNewRecordFormHook.trigger(stack.title === 'uncategorized' ? null : stack.title)"
<div class="py-2 flex gap-2 items-center"> >
<mdi-plus class="text-gray-500" /> <div class="py-2 flex gap-2 items-center">
{{ $t('activity.addNewRecord') }} <mdi-plus class="text-gray-500" />
</div> {{ $t('activity.addNewRecord') }}
</a-menu-item> </div>
<a-menu-item v-e="['c:kanban:collapse-stack']" @click="handleCollapseStack(stackIdx)"> </a-menu-item>
<div class="py-2 flex gap-2 items-center"> <a-menu-item v-e="['c:kanban:collapse-stack']" @click="handleCollapseStack(stackIdx)">
<mdi-arrow-collapse class="text-gray-500" /> <div class="py-2 flex gap-2 items-center">
{{ $t('activity.kanban.collapseStack') }} <mdi-arrow-collapse class="text-gray-500" />
</div> {{ $t('activity.kanban.collapseStack') }}
</a-menu-item> </div>
<a-menu-item </a-menu-item>
v-if="stack.title !== 'uncategorized' && !isPublic && isUIAllowed('xcDatatableEditable')" <a-menu-item
v-e="['c:kanban:delete-stack']" v-if="stack.title !== 'uncategorized' && !isPublic && hasEditPermission"
@click="handleDeleteStackClick(stack.title, stackIdx)" v-e="['c:kanban:delete-stack']"
> @click="handleDeleteStackClick(stack.title, stackIdx)"
<div class="py-2 flex gap-2 items-center">
<mdi-delete class="text-gray-500" />
{{ $t('activity.kanban.deleteStack') }}
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</a-layout-header>
<a-layout-content class="overflow-y-hidden">
<div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-stack-title="stack.title">
<!-- Draggable Record Card -->
<Draggable
v-model="formattedData[stack.title]"
item-key="row.Id"
draggable=".nc-kanban-item"
group="kanban-card"
class="h-full"
filter=".not-draggable"
@start="(e) => e.target.classList.add('grabbing')"
@end="(e) => e.target.classList.remove('grabbing')"
@change="onMove($event, stack.title)"
>
<template #item="{ element: record }">
<div class="nc-kanban-item py-2 px-[15px]">
<LazySmartsheetRow :row="record">
<a-card
hoverable
:data-stack="stack.title"
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px] shadow-lg"
:class="{
'not-draggable': isLocked || !isUIAllowed('xcDatatableEditable') || isPublic,
'!cursor-default': isLocked || !isUIAllowed('xcDatatableEditable') || isPublic,
}"
:body-style="{ padding: '10px' }"
@click="expandFormClick($event, record)"
> >
<div <div class="py-2 flex gap-2 items-center">
v-for="col in fields" <mdi-delete class="text-gray-500" />
:key="`record-${record.row.id}-${col.id}`" {{ $t('activity.kanban.deleteStack') }}
class="flex flex-col rounded-lg w-full" </div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</a-layout-header>
<a-layout-content class="overflow-y-hidden">
<div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-stack-title="stack.title">
<!-- Draggable Record Card -->
<Draggable
v-model="formattedData[stack.title]"
item-key="row.Id"
draggable=".nc-kanban-item"
group="kanban-card"
class="h-full"
filter=".not-draggable"
@start="(e) => e.target.classList.add('grabbing')"
@end="(e) => e.target.classList.remove('grabbing')"
@change="onMove($event, stack.title)"
>
<template #item="{ element: record }">
<div class="nc-kanban-item py-2 px-[15px]">
<LazySmartsheetRow :row="record">
<a-card
hoverable
:data-stack="stack.title"
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px] shadow-lg"
:class="{
'not-draggable': isLocked || !hasEditPermission || isPublic,
'!cursor-default': isLocked || !hasEditPermission || isPublic,
}"
:body-style="{ padding: '10px' }"
@click="expandFormClick($event, record)"
@contextmenu="showContextMenu($event, record)"
> >
<!-- Smartsheet Header (Virtual) Cell -->
<div v-if="!isRowEmpty(record, col)" class="flex flex-row w-full justify-start pt-2">
<div class="w-full text-gray-400">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
</div>
</div>
<!-- Smartsheet (Virtual) Cell -->
<div <div
v-if="!isRowEmpty(record, col)" v-for="col in fields"
class="flex flex-row w-full items-center justify-start pl-[6px]" :key="`record-${record.row.id}-${col.id}`"
:class="{ '!ml-[-12px]': col.uidt === UITypes.SingleSelect }" class="flex flex-col rounded-lg w-full"
> >
<LazySmartsheetVirtualCell <!-- Smartsheet Header (Virtual) Cell -->
v-if="isVirtualCol(col)" <div v-if="!isRowEmpty(record, col)" class="flex flex-row w-full justify-start pt-2">
v-model="record.row[col.title]" <div class="w-full text-gray-400">
class="text-sm pt-1" <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
:column="col" <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
:row="record" </div>
/> </div>
<LazySmartsheetCell
v-else <!-- Smartsheet (Virtual) Cell -->
v-model="record.row[col.title]" <div
class="text-sm pt-1" v-if="!isRowEmpty(record, col)"
:column="col" class="flex flex-row w-full items-center justify-start pl-[6px]"
:edit-enabled="false" :class="{ '!ml-[-12px]': col.uidt === UITypes.SingleSelect }"
:read-only="true" >
/> <LazySmartsheetVirtualCell
v-if="isVirtualCol(col)"
v-model="record.row[col.title]"
class="text-sm pt-1"
:column="col"
:row="record"
/>
<LazySmartsheetCell
v-else
v-model="record.row[col.title]"
class="text-sm pt-1"
:column="col"
:edit-enabled="false"
:read-only="true"
/>
</div>
</div> </div>
</div> </a-card>
</a-card> </LazySmartsheetRow>
</LazySmartsheetRow> </div>
</div> </template>
</template> </Draggable>
</Draggable>
</div>
</a-layout-content>
<a-layout-footer>
<div v-if="formattedData[stack.title] && countByStack[stack.title] >= 0" class="mt-5 text-center">
<!-- Stack Title -->
<mdi-plus
v-if="!isPublic"
class="text-pint-500 text-lg text-primary cursor-pointer"
@click="openNewRecordFormHook.trigger(stack.title === 'uncategorized' ? null : stack.title)"
/>
<!-- Record Count -->
<div class="nc-kanban-data-count">
{{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
{{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
</div> </div>
</a-layout-content>
<a-layout-footer>
<div v-if="formattedData[stack.title] && countByStack[stack.title] >= 0" class="mt-5 text-center">
<!-- Stack Title -->
<mdi-plus
v-if="!isPublic"
class="text-pint-500 text-lg text-primary cursor-pointer"
@click="openNewRecordFormHook.trigger(stack.title === 'uncategorized' ? null : stack.title)"
/>
<!-- Record Count -->
<div class="nc-kanban-data-count">
{{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
{{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
</div>
</div>
</a-layout-footer>
</a-layout>
</a-card>
<!-- Collapsed Stacks -->
<a-card
v-else
:key="`${stack.id}-collapsed`"
:style="`background-color: ${stack.color} !important`"
class="nc-kanban-stack nc-kanban-collapsed-stack mx-4 flex items-center w-[300px] h-[50px] rounded-[12px] cursor-pointer h-full !pr-[10px]"
:class="{
'not-draggable': stack.id === 'uncategorized' || isLocked || isPublic || !hasEditPermission,
}"
:body-style="{ padding: '0px', height: '100%', width: '100%', background: '#f0f2f5 !important' }"
>
<div class="items-center justify-between" @click="handleCollapseStack(stackIdx)">
<!-- Skeleton -->
<a-skeleton v-if="!formattedData[stack.title] || !countByStack" class="!w-[150px] pl-5" :paragraph="false" />
<div v-else class="nc-kanban-data-count mt-[12px] mx-[10px]">
<!-- Stack title -->
<div class="float-right flex gap-2 items-center cursor-pointer font-bold">
<LazyGeneralTruncateText>{{ stack.title }}</LazyGeneralTruncateText>
<mdi-menu-down class="text-grey text-lg" />
</div>
<!-- Record Count -->
{{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
{{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
</div> </div>
</a-layout-footer>
</a-layout>
</a-card>
<!-- Collapsed Stacks -->
<a-card
v-else
:key="`${stack.id}-collapsed`"
:style="`background-color: ${stack.color} !important`"
class="nc-kanban-stack nc-kanban-collapsed-stack mx-4 flex items-center w-[300px] h-[50px] rounded-[12px] cursor-pointer h-full !pr-[10px]"
:class="{
'not-draggable': stack.id === 'uncategorized' || isLocked || isPublic || !isUIAllowed('xcDatatableEditable'),
}"
:body-style="{ padding: '0px', height: '100%', width: '100%', background: '#f0f2f5 !important' }"
>
<div class="items-center justify-between" @click="handleCollapseStack(stackIdx)">
<!-- Skeleton -->
<a-skeleton v-if="!formattedData[stack.title] || !countByStack" class="!w-[150px] pl-5" :paragraph="false" />
<div v-else class="nc-kanban-data-count mt-[12px] mx-[10px]">
<!-- Stack title -->
<div class="float-right flex gap-2 items-center cursor-pointer font-bold">
<LazyGeneralTruncateText>{{ stack.title }}</LazyGeneralTruncateText>
<mdi-menu-down class="text-grey text-lg" />
</div>
<!-- Record Count -->
{{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
{{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
</div> </div>
</a-card>
</div>
</template>
</Draggable>
<!-- Drop down Menu -->
<template v-if="!isLocked && hasEditPermission" #overlay>
<a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
<a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget)">
<div v-e="['a:row:delete']" class="nc-project-menu-item">
<!-- Delete Row -->
{{ $t('activity.deleteRow') }}
</div> </div>
</a-card> </a-menu-item>
</div> </a-menu>
</template> </template>
</Draggable> </a-dropdown>
</div> </div>
</div> </div>

59
packages/nc-gui/composables/useKanbanViewStore.ts
Unescape View File

@ -441,6 +441,19 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
} }
} }
function removeRowFromTargetStack(row: Row) {
// primary key of Row to be deleted
const targetPrimaryKey = extractPkFromRow(row.row, meta!.value!.columns as ColumnType[])
// stack title of Row to be deleted
const stackTitle = row.row[groupingField.value] ?? 'uncategorized'
// remove target row from formattedData
formattedData.value[stackTitle] = formattedData.value[stackTitle].filter(
(ele) => extractPkFromRow(ele.row, meta!.value!.columns as ColumnType[]) !== targetPrimaryKey,
)
// decrease countByStack of target stack by 1
countByStack.value[stackTitle] -= 1
}
function removeRowFromUncategorizedStack() { function removeRowFromUncategorizedStack() {
// remove the last record // remove the last record
formattedData.value.uncategorized.pop() formattedData.value.uncategorized.pop()
@ -448,6 +461,51 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
countByStack.value.uncategorized -= 1 countByStack.value.uncategorized -= 1
} }
async function deleteRow(row: Row) {
try {
if (!row.rowMeta.new) {
const id = (meta?.value?.columns as ColumnType[])
?.filter((c) => c.pk)
.map((c) => row.row[c.title!])
.join('___')
const deleted = await deleteRowById(id as string)
if (!deleted) {
return
}
}
// remove deleted row from state
removeRowFromTargetStack(row)
} catch (e: any) {
message.error(`${t('msg.error.deleteRowFailed')}: ${await extractSdkResponseErrorMsg(e)}`)
}
}
async function deleteRowById(id: string) {
if (!id) {
throw new Error("Delete not allowed for table which doesn't have primary Key")
}
const res: any = await $api.dbViewRow.delete(
'noco',
project.value.id as string,
meta.value?.id as string,
viewMeta.value?.id as string,
id,
)
if (res.message) {
message.info(
`Row delete failed: ${`Unable to delete row with ID ${id} because of the following:
\n${res.message.join('\n')}.\n
Clear the data first & try again`})}`,
)
return false
}
return true
}
return { return {
loadKanbanData, loadKanbanData,
loadMoreKanbanData, loadMoreKanbanData,
@ -466,6 +524,7 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
updateKanbanStackMeta, updateKanbanStackMeta,
removeRowFromUncategorizedStack, removeRowFromUncategorizedStack,
shouldScrollToRight, shouldScrollToRight,
deleteRow,
} }
}, },
'kanban-view-store', 'kanban-view-store',

Write Preview
Loading…
Cancel
Save