nocodb/packages/nc-gui-v2/composables/useViewData.ts

import type { Api, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
import type { ComputedRef, Ref } from 'vue'
import { useNuxtApp } from '#app'
import { useProject } from '#imports'
import { NOCO } from '~/lib'
import { notification } from 'ant-design-vue'
import { extractSdkResponseErrorMsg } from '~/utils'

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

export function useViewData(
  meta: Ref<TableType> | ComputedRef<TableType> | undefined,
  viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
  where?: ComputedRef<string | undefined>,
) {
  const data = ref<Record<string, any>[]>()
  const formattedData = ref<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }[]>([])
  const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
  const selectedRows = reactive([])

  const { project } = useProject()
  const { $api } = useNuxtApp()

  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
    if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
    const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
      ...params,
      where: where?.value,
    })
    data.value = response.list
    formattedData.value = formatData(response.list)
    paginationData.value = response.pageInfo
  }

  const updateRowProperty = async (row: Record<string, any>, property: string) => {
    try {
      const id = meta?.value?.columns
        ?.filter((c) => c.pk)
        .map((c) => row[c.title as string])
        .join('___') as string

      return $api.dbViewRow.update(
        NOCO,
        project?.value.id as string,
        meta?.value.id as string,
        viewMeta?.value?.id as string,
        id,
        {
          [property]: row[property],
        },
        // todo:
        // {
        //   query: { ignoreWebhook: !saved }
        // }
      )

      /*

          todo: audit

          // audit
            this.$api.utils
              .auditRowUpdate(id, {
                fk_model_id: this.meta.id,
                column_name: column.title,
                row_id: id,
                value: getPlainText(rowObj[column.title]),
                prev_value: getPlainText(oldRow[column.title])
              })
              .then(() => {})
          */
    } catch (error) {
      notification.error({
        message: 'Row update failed',
        description:
          await extractSdkResponseErrorMsg(error),
      })
    }
  }
  const insertRow = async (row: Record<string, any>, rowIndex = formattedData.value?.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?.splice(rowIndex ?? 0, 1, {
        row: insertedData,
        rowMeta: {},
        oldRow: { ...insertedData },
      })
    } catch (error) {
      notification.error({
        message: 'Row insert failed',
        description:
          await extractSdkResponseErrorMsg(error),
      })
    }
  }

  const changePage = async (page: number) => {
    paginationData.value.page = page
    await loadData({ offset: (page - 1) * (paginationData.value.pageSize || 25), where: where?.value } as any)
  }

  const addRow = () => {
    formattedData.value.push({
      row: {},
      oldRow: {},
      rowMeta: { new: true },
    })
  }

  return {
    data,
    loadData,
    paginationData,
    formattedData,
    insertRow,
    updateRowProperty,
    changePage,
    addRow,
    selectedRows,
  }
}