Browse Source

fix(nc-gui): kanban types

pull/3818/head
Wing-Kam Wong 2 years ago
parent
commit
f075a9d725
  1. 37
      packages/nc-gui/composables/useKanbanViewData.ts

37
packages/nc-gui/composables/useKanbanViewData.ts

@ -1,5 +1,5 @@
import type { ComputedRef, Ref } from 'vue' import type { ComputedRef, Ref } from 'vue'
import type { Api, ColumnType, KanbanType, TableType, ViewType, SelectOptionType } from 'nocodb-sdk' import type { Api, ColumnType, KanbanType, SelectOptionType, SelectOptionsType, TableType, ViewType } from 'nocodb-sdk'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import type { Row } from '~/composables/useViewData' import type { Row } from '~/composables/useViewData'
@ -10,6 +10,8 @@ export function useKanbanViewData(
meta: Ref<TableType> | ComputedRef<TableType> | undefined, meta: Ref<TableType> | ComputedRef<TableType> | undefined,
viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined, viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
) { ) {
type GroupingFieldColOptionsType = SelectOptionType & { collapsed: boolean }
const { t } = useI18n() const { t } = useI18n()
const { api } = useApi() const { api } = useApi()
const { project } = useProject() const { project } = useProject()
@ -22,10 +24,7 @@ export function useKanbanViewData(
const kanbanMetaData = useState<KanbanType>('KanbanMetaData', () => ({})) const kanbanMetaData = useState<KanbanType>('KanbanMetaData', () => ({}))
// grouping field column options - e.g. title, fk_column_id, color etc // grouping field column options - e.g. title, fk_column_id, color etc
const groupingFieldColOptions = useState<Record<string, SelectOptionType & { collapsed: boolean }>[]>( const groupingFieldColOptions = useState<GroupingFieldColOptionsType[]>('KanbanGroupingFieldColOptions', () => [])
'KanbanGroupingFieldColOptions',
() => [],
)
// formattedData structure // formattedData structure
// { // {
@ -54,10 +53,10 @@ export function useKanbanViewData(
const groupingField = useState<string>('KanbanGroupingField', () => '') const groupingField = useState<string>('KanbanGroupingField', () => '')
// grouping field column // grouping field column
const groupingFieldColumn = useState<ColumnType>('KanbanGroupingFieldColumn') const groupingFieldColumn = useState<ColumnType | undefined>('KanbanGroupingFieldColumn')
// stack meta in object format // stack meta in object format
const stackMetaObj = ref<Record<string, any>>({}) const stackMetaObj = ref<Record<string, GroupingFieldColOptionsType[]>>({})
const formatData = (list: Record<string, any>[]) => const formatData = (list: Record<string, any>[]) =>
list.map((row) => ({ list.map((row) => ({
@ -74,7 +73,7 @@ export function useKanbanViewData(
countByStack.value = {} countByStack.value = {}
await Promise.all( await Promise.all(
groupingFieldColOptions.value.map(async (option: SelectOptionType) => { groupingFieldColOptions.value.map(async (option: GroupingFieldColOptionsType) => {
const where = const where =
option.title === 'Uncategorized' ? `(${groupingField.value},is,null)` : `(${groupingField.value},eq,${option.title})` option.title === 'Uncategorized' ? `(${groupingField.value},is,null)` : `(${groupingField.value},eq,${option.title})`
const response = await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, { const response = await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
@ -105,7 +104,7 @@ export function useKanbanViewData(
if (!viewMeta?.value?.id || !meta?.value?.columns) return if (!viewMeta?.value?.id || !meta?.value?.columns) return
kanbanMetaData.value = await $api.dbView.kanbanRead(viewMeta.value.id) kanbanMetaData.value = await $api.dbView.kanbanRead(viewMeta.value.id)
// set groupingField // set groupingField
groupingFieldColumn.value = meta.value.columns.filter((f) => f.id === kanbanMetaData.value.grp_column_id)[0] groupingFieldColumn.value = meta.value.columns.filter((f: ColumnType) => f.id === kanbanMetaData.value.grp_column_id)[0] || {}
groupingField.value = groupingFieldColumn.value.title! groupingField.value = groupingFieldColumn.value.title!
@ -113,16 +112,10 @@ export function useKanbanViewData(
stackMetaObj.value = stack_meta ? JSON.parse(stack_meta as string) : {} stackMetaObj.value = stack_meta ? JSON.parse(stack_meta as string) : {}
// TOOD: fix types if (stackMetaObj.value && grp_column_id && stackMetaObj.value[grp_column_id]) {
if (
stackMetaObj.value &&
grp_column_id &&
stackMetaObj.value[grp_column_id] &&
groupingFieldColumn.value?.colOptions.options
) {
// keep the existing order (index of the array) but update the values // keep the existing order (index of the array) but update the values
for (const option of groupingFieldColumn.value.colOptions.options) { for (const option of (groupingFieldColumn.value.colOptions as SelectOptionsType).options) {
const idx = stackMetaObj.value[grp_column_id].findIndex((ele: Record<string, any>) => ele.id === option.id) const idx = stackMetaObj.value[grp_column_id].findIndex((ele) => ele.id === option.id)
if (idx !== -1) { if (idx !== -1) {
// update the option in stackMetaObj // update the option in stackMetaObj
stackMetaObj.value[grp_column_id][idx] = { stackMetaObj.value[grp_column_id][idx] = {
@ -139,7 +132,8 @@ export function useKanbanViewData(
} }
} }
// handle deleted options // handle deleted options
const columnOptionIds = groupingFieldColumn.value.colOptions.options.map(({ id }) => id) const columnOptionIds = (groupingFieldColumn.value?.colOptions as SelectOptionsType)?.options.map(({ id }) => id)
stackMetaObj.value[grp_column_id] stackMetaObj.value[grp_column_id]
.filter(({ id }) => id !== 'uncategorized' && !columnOptionIds.includes(id)) .filter(({ id }) => id !== 'uncategorized' && !columnOptionIds.includes(id))
.forEach(({ id }) => { .forEach(({ id }) => {
@ -152,12 +146,12 @@ export function useKanbanViewData(
} else { } else {
// build stack meta // build stack meta
groupingFieldColOptions.value = [ groupingFieldColOptions.value = [
...(groupingFieldColumn.value?.colOptions?.options ?? []), ...((groupingFieldColumn.value?.colOptions as SelectOptionsType & { collapsed: boolean })?.options ?? []),
// enrich uncategorized stack // enrich uncategorized stack
{ id: 'uncategorized', title: 'Uncategorized', order: 0, color: enumColor.light[2] }, { id: 'uncategorized', title: 'Uncategorized', order: 0, color: enumColor.light[2] },
] ]
// sort by initial order // sort by initial order
.sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order) .sort((a, b) => a.order! - b.order!)
// enrich `collapsed` // enrich `collapsed`
.map((ele) => ({ .map((ele) => ({
...ele, ...ele,
@ -302,7 +296,6 @@ export function useKanbanViewData(
oldRow: {}, oldRow: {},
rowMeta: { new: true }, rowMeta: { new: true },
}) })
return formattedData.value.Uncategorized[addAfter] return formattedData.value.Uncategorized[addAfter]
} }

Loading…
Cancel
Save