diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue index 7be67fc4d7..a8dbe2affa 100644 --- a/packages/nc-gui/components/smartsheet/Kanban.vue +++ b/packages/nc-gui/components/smartsheet/Kanban.vue @@ -43,6 +43,7 @@ const { groupingFieldColOptions, groupingField, groupingFieldColumn, + countByStack, } = useKanbanViewData(meta, view as any) const { isUIAllowed } = useUIPermission() @@ -143,7 +144,10 @@ async function onMove(event: any, stackKey: string) { if (event.added) { const ele = event.added.element ele.row[groupingField.value] = stackKey === 'Uncategorized' ? null : stackKey + countByStack.value[stackKey] += 1 await updateOrSaveRow(ele) + } else if (event.removed) { + countByStack.value[stackKey] -= 1 } } @@ -282,11 +286,11 @@ openNewRecordFormHook?.on(async () => { -
+
- {{ formattedData[stack.title].length }} - {{ formattedData[stack.title].length !== 1 ? $t('objects.records') : $t('objects.record') }} + {{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }} + {{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
diff --git a/packages/nc-gui/composables/useKanbanViewData.ts b/packages/nc-gui/composables/useKanbanViewData.ts index 6201983ebe..1260e7181b 100644 --- a/packages/nc-gui/composables/useKanbanViewData.ts +++ b/packages/nc-gui/composables/useKanbanViewData.ts @@ -33,6 +33,7 @@ export function useKanbanViewData( // ], // } const formattedData = useState>('KanbanFormattedData', () => ({})) + const countByStack = useState>('KanbanCountByStack', () => ({})) const groupingField = useState('KanbanGroupingField', () => '') const groupingFieldColumn = useState>('KanbanGroupingFieldColumn', () => ({})) @@ -46,21 +47,30 @@ export function useKanbanViewData( async function loadKanbanData() { if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return - // reset formattedData to avoid storing previous data after changing grouping field + // reset formattedData & countByStack to avoid storing previous data after changing grouping field formattedData.value = {} + countByStack.value = {} await Promise.all( groupingFieldColOptions.value.map(async (option) => { - let where = `(${groupingField.value},eq,${option.title})` - if (option.title === 'Uncategorized') { - where = `(${groupingField.value},is,null)` - } - const response = await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, { - ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }), - ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }), - where, - }) - formattedData.value[option.title] = formatData(response.list) + const where = + option.title === 'Uncategorized' ? `(${groupingField.value},is,null)` : `(${groupingField.value},eq,${option.title})` + + formattedData.value[option.title] = formatData( + ( + await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, { + ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }), + ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }), + where, + }) + ).list, + ) + countByStack.value[option.title] = + ( + await api.dbViewRow.count('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, { + where, + }) + ).count || 0 }), ) } @@ -230,6 +240,7 @@ export function useKanbanViewData( updateKanbanMeta, kanbanMetaData, formattedData, + countByStack, groupingField, groupingFieldColOptions, groupingFieldColumn,