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

import type { ComputedRef, Ref } from 'vue'
import type { Api, ColumnType, KanbanType, TableType, ViewType } from 'nocodb-sdk'
import { useI18n } from 'vue-i18n'
import { message } from 'ant-design-vue'
import type { Row } from '~/composables/useViewData'
import { enumColor } from '~/utils'
import { useNuxtApp } from '#app'

export function useKanbanViewData(
  meta: Ref<TableType> | ComputedRef<TableType> | undefined,
  viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
  where?: ComputedRef<string | undefined>,
) {
  const { t } = useI18n()
  const isPublic = inject(IsPublicInj, ref(false))
  const { api } = useApi()
  const { project } = useProject()
  const { $api, $e } = useNuxtApp()
  const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
  const { isUIAllowed } = useUIPermission()
  const groupingFieldColOptions = useState<Record<string, any>[]>('KanbanGroupingFieldColOptions', () => [])
  const kanbanMetaData = useState<KanbanType>('KanbanMetaData', () => ({}))
  // formattedData structure
  // {
  //   [val1] : [
  //     {row: {...}, oldRow: {...}, rowMeta: {...}},
  //     {row: {...}, oldRow: {...}, rowMeta: {...}},
  //     ...
  //   ],
  //   [val2] : [
  //     {row: {...}, oldRow: {...}, rowMeta: {...}},
  //     {row: {...}, oldRow: {...}, rowMeta: {...}},
  //     ...
  //   ],
  // }
  const formattedData = useState<Record<string, Row[]>>('KanbanFormattedData', () => ({}))
  const groupingField = useState<string>('KanbanGroupingField', () => '')

  const formatData = (list: Record<string, any>[]) =>
    list.map((row) => ({
      row: { ...row },
      oldRow: { ...row },
      rowMeta: {},
    }))

  async function loadKanbanData(params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
    // each stack only loads 25 records -> scroll to load more (to be integrated with infinite scroll)
    // TODO: integrate with infinite scroll
    // TODO: handle share view case
    if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return

    // reset formattedData to avoid storing previous data after changing grouping field
    formattedData.value = {}

    const { grp_column_id, stack_meta } = kanbanMetaData.value

    const stackMetaObj = JSON.parse(stack_meta as string) || {}

    if (stack_meta && grp_column_id && stackMetaObj[grp_column_id]) {
      // the target stack meta exists, use it directly
      groupingFieldColOptions.value = stackMetaObj[grp_column_id]
    } else {
      // retrieve the grouping field column
      const groupingFieldColumn = meta?.value?.columns?.filter((f) => f.title === groupingField.value)[0] as Record<string, any>
      // build stack meta
      groupingFieldColOptions.value = [
        ...(groupingFieldColumn?.colOptions?.options ?? []),
        // enrich uncategorized stack
        { id: 'uncategorized', title: 'Uncategorized', order: 0, color: enumColor.light[2] },
      ].sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)

      // if grouping column id is present, add the grouping field column options to stackMetaObj
      if (grp_column_id) {
        stackMetaObj[grp_column_id] = groupingFieldColOptions.value
        await updateKanbanMeta({
          stack_meta: stackMetaObj,
        })
      }
    }

    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, {
          ...params,
          ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
          ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
          where,
        })
        formattedData.value[option.title] = formatData(response.list)
      }),
    )
  }

  async function loadKanbanMeta() {
    if (!viewMeta?.value?.id) return
    kanbanMetaData.value = await $api.dbView.kanbanRead(viewMeta.value.id)
    // set groupingField
    const groupingFieldCol = meta?.value?.columns?.filter((f) => f.id === kanbanMetaData?.value?.grp_column_id)[0]
    groupingField.value = groupingFieldCol?.title as string
  }

  async function updateKanbanMeta(updateObj: Partial<KanbanType>) {
    if (!viewMeta?.value?.id) return
    await $api.dbView.kanbanUpdate(viewMeta.value.id, {
      ...kanbanMetaData.value,
      ...updateObj,
    })
    await loadKanbanMeta()
  }

  async function insertRow(row: Record<string, any>, rowIndex = formattedData.value.uncatgorized?.length) {
    try {
      const insertObj = meta?.value?.columns?.reduce((o: any, col) => {
        if (!col.ai && row?.[col.title as string] !== null) {
          o[col.title as string] = row?.[col.title as string]
        }
        return o
      }, {})

      const insertedData = await $api.dbViewRow.create(
        NOCO,
        project?.value.id as string,
        meta?.value.id as string,
        viewMeta?.value?.id as string,
        insertObj,
      )

      formattedData.value.uncatgorized?.splice(rowIndex ?? 0, 1, {
        row: insertedData,
        rowMeta: {},
        oldRow: { ...insertedData },
      })

      return insertedData
    } catch (error: any) {
      message.error(await extractSdkResponseErrorMsg(error))
    }
  }

  async function updateRowProperty(toUpdate: Row, property: string) {
    try {
      const id = extractPkFromRow(toUpdate.row, meta?.value.columns as ColumnType[])

      const updatedRowData = await $api.dbViewRow.update(
        NOCO,
        project?.value.id as string,
        meta?.value.id as string,
        viewMeta?.value?.id as string,
        id,
        {
          [property]: toUpdate.row[property],
        },
        // todo:
        // {
        //   query: { ignoreWebhook: !saved }
        // }
      )
      // audit
      $api.utils
        .auditRowUpdate(id, {
          fk_model_id: meta?.value.id as string,
          column_name: property,
          row_id: id,
          value: getHTMLEncodedText(toUpdate.row[property]),
          prev_value: getHTMLEncodedText(toUpdate.oldRow[property]),
        })
        .then(() => {})

      /** update row data(to sync formula and other related columns) */
      Object.assign(toUpdate.row, updatedRowData)
      Object.assign(toUpdate.oldRow, updatedRowData)
    } catch (e: any) {
      message.error(`${t('msg.error.rowUpdateFailed')} ${await extractSdkResponseErrorMsg(e)}`)
    }
  }

  async function updateOrSaveRow(row: Row) {
    if (row.rowMeta.new) {
      await insertRow(row.row, formattedData.value[row.row.title].indexOf(row))
    } else {
      await updateRowProperty(row, groupingField.value)
    }
  }

  function addEmptyRow(addAfter = formattedData.value.Uncategorized?.length) {
    formattedData.value.Uncategorized.splice(addAfter, 0, {
      row: {},
      oldRow: {},
      rowMeta: { new: true },
    })

    return formattedData.value.Uncategorized[addAfter]
  }

  watch(groupingField, async (v) => await loadKanbanData())

  return {
    loadKanbanData,
    loadKanbanMeta,
    updateKanbanMeta,
    kanbanMetaData,
    formattedData,
    groupingField,
    groupingFieldColOptions,
    updateOrSaveRow,
    addEmptyRow,
  }
}