多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

733 lines
27 KiB

import type { ComputedRef, Ref } from 'vue'
import type { Api, ColumnType, KanbanType, SelectOptionType, SelectOptionsType, TableType, ViewType } from 'nocodb-sdk'
type GroupingFieldColOptionsType = SelectOptionType & { collapsed: boolean }
const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
(
meta: Ref<TableType | KanbanType | undefined>,
viewMeta: Ref<ViewType | KanbanType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
shared = false,
) => {
if (!meta) {
throw new Error('Table meta is not available')
}
const addNewStackId = 'addNewStack'
const { t } = useI18n()
const { api } = useApi()
const { base, sqlUis } = storeToRefs(useBase())
const { $e, $api } = useNuxtApp()
const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
const { sharedView, fetchSharedViewData, fetchSharedViewGroupedData } = useSharedView()
const { isUIAllowed } = useRoles()
const isPublic = ref(shared) || inject(IsPublicInj, ref(false))
const password = ref<string | null>(null)
const { search } = useFieldQuery()
const { addUndo, clone, defineViewScope } = useUndoRedo()
// save history of stack changes for undo/redo
const moveHistory = ref<{ op: 'added' | 'removed'; pk: string; stack: string; index: number }[]>([])
const sqlUi = ref(
(meta.value as TableType)?.source_id ? sqlUis.value[(meta.value as TableType).source_id!] : Object.values(sqlUis.value)[0],
)
const xWhere = computed(() => {
let where
const col =
(meta.value as TableType)?.columns?.find(({ id }) => id === search.value.field) ||
(meta.value as TableType)?.columns?.find((v) => v.pv)
if (!col) return
if (!search.value.query.trim()) return
if (sqlUi.value && ['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
where = `(${col.title},like,%${search.value.query.trim()}%)`
} else {
where = `(${col.title},eq,${search.value.query.trim()})`
}
return where
})
provide(SharedViewPasswordInj, password)
// kanban view meta data
const kanbanMetaData = ref<KanbanType>({})
// grouping field column options - e.g. title, fk_column_id, color etc
const groupingFieldColOptions = ref<GroupingFieldColOptionsType[]>([])
// formattedData structure
// {
// [val1] : [
// {row: {...}, oldRow: {...}, rowMeta: {...}},
// {row: {...}, oldRow: {...}, rowMeta: {...}},
// ...
// ],
// [val2] : [
// {row: {...}, oldRow: {...}, rowMeta: {...}},
// {row: {...}, oldRow: {...}, rowMeta: {...}},
// ...
// ],
// }
const formattedData = ref<Map<string | null, Row[]>>(new Map<string | null, Row[]>())
// countByStack structure
// {
// "uncategorized": 0,
// [val1]: 10,
// [val2]: 20
// }
const countByStack = ref<Map<string | null, number>>(new Map<string | null, number>())
// grouping field title
const groupingField = ref<string>('')
// grouping field column
const groupingFieldColumn = ref<ColumnType | undefined>()
// stack meta in object format
const stackMetaObj = ref<Record<string, GroupingFieldColOptionsType[]>>({})
const shouldScrollToRight = ref(false)
const formatData = (list: Record<string, any>[]) =>
list.map((row) => ({
row: { ...row },
oldRow: { ...row },
rowMeta: {},
}))
async function loadKanbanData() {
if ((!base?.value?.id || !meta.value?.id || !viewMeta?.value?.id || !groupingFieldColumn?.value?.id) && !isPublic.value)
return
// reset formattedData & countByStack to avoid storing previous data after changing grouping field
formattedData.value = new Map<string | null, Row[]>()
countByStack.value = new Map<string | null, number>()
let groupData
if (isPublic.value) {
groupData = await fetchSharedViewGroupedData(groupingFieldColumn!.value!.id!, {
sortsArr: sorts.value,
filtersArr: nestedFilters.value,
})
} else {
groupData = await api.dbViewRow.groupedDataList(
'noco',
base.value.id!,
meta.value!.id!,
viewMeta.value!.id!,
groupingFieldColumn!.value!.id!,
{ where: xWhere.value },
{},
)
}
for (const data of groupData ?? []) {
const key = data.key
formattedData.value.set(key, formatData(data.value.list))
countByStack.value.set(key, data.value.pageInfo.totalRows || 0)
}
}
const filerDuplicateRecords = (existingRecords: Row[], newRecords: Row[]) => {
const existingRecordsMap = (existingRecords || []).reduce((acc, curr) => {
const primaryKey = extractPkFromRow(curr.row, meta!.value!.columns as ColumnType[])
if (primaryKey) {
acc[primaryKey] = curr
}
return acc
}, {} as Record<string, Row>)
return (newRecords || []).filter(({ row }) => {
const primaryKey = extractPkFromRow(row, meta!.value!.columns as ColumnType[])
if (primaryKey && existingRecordsMap[primaryKey]) {
return false
}
return true
})
}
async function loadMoreKanbanData(stackTitle: string, params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
if ((!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic.value) return
let where = `(${groupingField.value},eq,${stackTitle})`
if (stackTitle === null) {
where = `(${groupingField.value},is,null)`
}
if (xWhere.value) {
where = `${where} and ${xWhere.value}`
}
const response = !isPublic.value
? await api.dbViewRow.list('noco', base.value.id!, meta.value!.id!, viewMeta.value!.id!, {
...params,
...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
where,
})
: await fetchSharedViewData({
...params,
sortsArr: sorts.value,
filtersArr: nestedFilters.value,
offset: params.offset,
where,
})
formattedData.value.set(stackTitle, [
...formattedData.value.get(stackTitle)!,
...filerDuplicateRecords(formattedData.value.get(stackTitle)!, formatData(response!.list!)),
])
}
async function loadKanbanMeta() {
if (!viewMeta?.value?.id || !meta?.value?.columns) return
kanbanMetaData.value = isPublic.value
? (sharedView.value?.view as KanbanType)
: await $api.dbView.kanbanRead(viewMeta.value.id)
// set groupingField
groupingFieldColumn.value = !isPublic.value
? (meta.value.columns as ColumnType[]).filter((f) => f.id === kanbanMetaData.value.fk_grp_col_id)[0] || {}
: (parseProp(sharedView.value?.meta).groupingFieldColumn! as ColumnType)
groupingField.value = groupingFieldColumn.value.title!
const { fk_grp_col_id, meta: stack_meta } = kanbanMetaData.value
stackMetaObj.value = parseProp(stack_meta) || {}
if (stackMetaObj.value && fk_grp_col_id && stackMetaObj.value[fk_grp_col_id]) {
// keep the existing order (index of the array) but update the values done outside kanban
let isChanged = false
let hasNewOptionsAdded = false
for (const option of (groupingFieldColumn.value.colOptions as SelectOptionsType)?.options ?? []) {
const idx = stackMetaObj.value[fk_grp_col_id].findIndex((ele) => ele.id === option.id)
if (idx !== -1) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { collapsed, ...rest } = stackMetaObj.value[fk_grp_col_id][idx]
if (!deepCompare(rest, option)) {
// update the option in stackMetaObj
stackMetaObj.value[fk_grp_col_id][idx] = {
...stackMetaObj.value[fk_grp_col_id][idx],
...option,
}
// rename the key in formattedData & countByStack
if (option.title !== rest.title) {
// option.title is new key
// rest.title is old key
formattedData.value.set(option.title!, formattedData.value.get(rest.title!)!)
countByStack.value.set(option.title!, countByStack.value.get(rest.title!)!)
// update grouping field value under the edited stack
await bulkUpdateGroupingFieldValue(option.title!)
}
isChanged = true
}
} else {
// new option found - add to stackMetaObj
stackMetaObj.value[fk_grp_col_id].push({
...option,
collapsed: false,
})
formattedData.value.set(option.title!, [])
countByStack.value.set(option.title!, 0)
isChanged = true
hasNewOptionsAdded = true
}
}
// handle deleted options
const columnOptionIds = (groupingFieldColumn.value?.colOptions as SelectOptionsType)?.options.map(({ id }) => id)
const cols = stackMetaObj.value[fk_grp_col_id].filter(({ id }) => id !== 'uncategorized' && !columnOptionIds.includes(id))
for (const col of cols) {
const idx = stackMetaObj.value[fk_grp_col_id].map((ele: Record<string, any>) => ele.id).indexOf(col.id)
if (idx !== -1) {
stackMetaObj.value[fk_grp_col_id].splice(idx, 1)
// there are two cases
// 1. delete option from Add / Edit Stack in kanban view
// 2. delete option from grid view, then switch to kanban view
// for the second case, formattedData.value and countByStack.value would be empty at this moment
// however, the data will be correct after rendering
if (formattedData.value.size && countByStack.value.size && formattedData.value.has(col.title!)) {
// for the first case, no reload is executed.
// hence, we set groupingField to null for all records under the target stack
await bulkUpdateGroupingFieldValue(col.title!, true)
// merge the to-be-deleted stack to uncategorized stack
formattedData.value.set(null, [...(formattedData.value.get(null) || []), ...formattedData.value.get(col.title!)!])
// update the record count
countByStack.value.set(null, (countByStack.value.get(null) || 0) + (countByStack.value.get(col.title!) || 0))
}
isChanged = true
}
}
groupingFieldColOptions.value = [...stackMetaObj.value[fk_grp_col_id]]
if (isChanged) {
await updateKanbanStackMeta()
if (hasNewOptionsAdded) {
shouldScrollToRight.value = true
}
}
} else {
// build stack meta
groupingFieldColOptions.value = [
...((groupingFieldColumn.value?.colOptions as SelectOptionsType & { collapsed: boolean })?.options ?? []),
// enrich uncategorized stack
{ id: 'uncategorized', title: null, order: 0, color: themeV3Colors.gray[500] } as any,
]
// sort by initial order
.sort((a, b) => a.order! - b.order!)
// enrich `collapsed`
.map((ele) => ({
...ele,
collapsed: false,
}))
await updateKanbanStackMeta()
}
}
async function updateKanbanStackMeta() {
const { fk_grp_col_id } = kanbanMetaData.value
if (fk_grp_col_id) {
stackMetaObj.value[fk_grp_col_id] = groupingFieldColOptions.value
await updateKanbanMeta({
meta: stackMetaObj.value,
})
}
}
async function updateKanbanMeta(updateObj: Partial<KanbanType>) {
if (
!viewMeta?.value?.id ||
!isUIAllowed('dataEdit', {
skipSourceCheck: true,
})
)
return
await $api.dbView.kanbanUpdate(viewMeta.value.id, updateObj)
}
function findRowInState(rowData: Record<string, any>) {
const pk: Record<string, string> = rowPkData(rowData, meta?.value?.columns as ColumnType[])
for (const rows of formattedData.value.values()) {
for (const row of rows) {
if (Object.keys(pk).every((k) => pk[k] === row.row[k])) {
return row
}
}
}
}
async function insertRow(row: Record<string, any>, rowIndex = formattedData.value.get(null)!.length, undo = false) {
try {
const insertObj = (meta?.value?.columns as ColumnType[]).reduce((o: Record<string, any>, col) => {
if ((!col.ai || undo) && row?.[col.title as string] !== null) {
o[col.title!] = row?.[col.title as string]
}
return o
}, {})
const insertedData = await $api.dbViewRow.create(
NOCO,
base?.value.id as string,
meta.value?.id as string,
viewMeta?.value?.id as string,
insertObj,
)
if (!undo) {
const id = extractPkFromRow(insertedData, meta.value?.columns as ColumnType[])
addUndo({
redo: {
fn: async function redo(this: UndoRedoAction, row: Row, rowIndex: number) {
const pkData = rowPkData(row.row, meta.value?.columns as ColumnType[])
row.row = { ...pkData, ...row.row }
await insertRow(row, rowIndex, true)
addOrEditStackRow(row, true)
},
args: [clone(row), rowIndex],
},
undo: {
fn: async function undo(this: UndoRedoAction, id: string) {
await deleteRowById(id)
const row = findRowInState(insertedData)
if (row) removeRowFromTargetStack(row)
},
args: [id],
},
scope: defineViewScope({ view: viewMeta.value as ViewType }),
})
}
formattedData.value.get(null)?.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, undo = false) {
try {
const id = extractPkFromRow(toUpdate.row, meta?.value?.columns as ColumnType[])
const updatedRowData = await $api.dbViewRow.update(
NOCO,
base?.value.id as string,
meta.value?.id as string,
viewMeta?.value?.id as string,
id,
{
[property]: toUpdate.row[property],
},
// todo:
// {
// query: { ignoreWebhook: !saved }
// }
)
if (!undo) {
const oldRowIndex = moveHistory.value.find((ele) => ele.op === 'removed' && ele.pk === id)
const nextRowIndex = moveHistory.value.find((ele) => ele.op === 'added' && ele.pk === id)
addUndo({
redo: {
fn: async function redo(toUpdate: Row, property: string) {
const updatedData = await updateRowProperty(toUpdate, property, true)
const row = findRowInState(toUpdate.row)
if (row) {
Object.assign(row.row, updatedData)
if (row.row[groupingField.value] !== row.oldRow[groupingField.value])
addOrEditStackRow(row, false, nextRowIndex?.index)
Object.assign(row.oldRow, updatedData)
}
},
args: [clone(toUpdate), property],
},
undo: {
fn: async function undo(toUpdate: Row, property: string) {
const updatedData = await updateRowProperty(
{ row: toUpdate.oldRow, oldRow: toUpdate.row, rowMeta: toUpdate.rowMeta },
property,
true,
)
const row = findRowInState(toUpdate.row)
if (row) {
Object.assign(row.row, updatedData)
if (row.row[groupingField.value] !== row.oldRow[groupingField.value])
addOrEditStackRow(row, false, oldRowIndex?.index)
Object.assign(row.oldRow, updatedData)
}
},
args: [clone(toUpdate), property],
},
scope: defineViewScope({ view: viewMeta.value as ViewType }),
})
/** update row data(to sync formula and other related columns) */
Object.assign(toUpdate.row, updatedRowData)
Object.assign(toUpdate.oldRow, updatedRowData)
}
return 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.get(row.row.title!)!.indexOf(row))
} else {
await updateRowProperty(row, groupingField.value)
}
}
async function bulkUpdateGroupingFieldValue(stackTitle: string, moveToUncategorizedStack = false) {
try {
// set groupingField to target value for all records under the target stack
// if isTargetValueNull is true, then it means the cards under stackTitle will move to Uncategorized stack
const groupingFieldVal = moveToUncategorizedStack ? null : stackTitle
await api.dbTableRow.bulkUpdateAll(
'noco',
base.value.id!,
meta.value?.id as string,
{
[groupingField.value]: groupingFieldVal,
},
{
where: `(${groupingField.value},eq,${stackTitle})`,
},
)
if (formattedData.value.has(stackTitle)) {
// update to groupingField value to target value
formattedData.value.set(
stackTitle,
formattedData.value.get(stackTitle)!.map((o) => ({
...o,
row: {
...o.row,
[groupingField.value]: groupingFieldVal,
},
oldRow: {
...o.oldRow,
[groupingField.value]: o.row[groupingField.value],
},
})),
)
}
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
}
async function deleteStack(stackTitle: string, stackIdx: number) {
if (!viewMeta?.value?.id || !groupingFieldColumn.value) return
try {
// set groupingField to null for all records under the target stack
await bulkUpdateGroupingFieldValue(stackTitle, true)
// merge the to-be-deleted stack to uncategorized stack
formattedData.value.set(null, [...formattedData.value.get(null)!, ...formattedData.value.get(stackTitle)!])
countByStack.value.set(null, (countByStack.value.get(null) || 0) + (countByStack.value.get(stackTitle) || 0))
// clear state for the to-be-deleted stack
formattedData.value.delete(stackTitle)
countByStack.value.delete(stackTitle)
// delete the stack, i.e. grouping field value
const newOptions = (groupingFieldColumn.value.colOptions as SelectOptionsType).options.filter(
(o) => o.title !== stackTitle,
)
;(groupingFieldColumn.value.colOptions as SelectOptionsType).options = newOptions
const cdf = groupingFieldColumn.value.cdf ? groupingFieldColumn.value.cdf.replace(/^'/, '').replace(/'$/, '') : null
await api.dbTableColumn.update(groupingFieldColumn.value.id!, {
...groupingFieldColumn.value,
colOptions: {
options: newOptions,
},
cdf: cdf === stackTitle ? null : cdf,
} as any)
// update kanban stack meta
groupingFieldColOptions.value.splice(stackIdx, 1)
stackMetaObj.value[kanbanMetaData.value.fk_grp_col_id!] = groupingFieldColOptions.value
await updateKanbanStackMeta()
$e('a:kanban:delete-stack')
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
}
function addEmptyRow(addAfter = formattedData.value.get(null)!.length) {
formattedData.value.get(null)!.splice(addAfter, 0, {
row: {},
oldRow: {},
rowMeta: { new: true },
})
return formattedData.value.get(null)![addAfter]
}
function addOrEditStackRow(row: Row, isNewRow: boolean, rowIndex?: number) {
const stackTitle = row.row[groupingField.value]
const oldStackTitle = row.oldRow[groupingField.value]
if (isNewRow) {
// add a new record
if (stackTitle) {
// push the row to target stack
if (rowIndex !== undefined) {
formattedData.value.get(stackTitle)!.splice(rowIndex, 0, row)
} else {
formattedData.value.get(stackTitle)!.push(row)
}
// increase the current count in the target stack by 1
countByStack.value.set(stackTitle, countByStack.value.get(stackTitle)! + 1)
// clear the one under uncategorized since we don't reload the view
removeRowFromUncategorizedStack()
} else {
// data will be still in Uncategorized stack
// no action is required
}
} else {
// update existing record
const targetPrimaryKey = extractPkFromRow(row.row, meta!.value!.columns as ColumnType[])
const idxToUpdateOrDelete = formattedData.value
.get(oldStackTitle)!
.findIndex((ele) => extractPkFromRow(ele.row, meta!.value!.columns as ColumnType[]) === targetPrimaryKey)
if (idxToUpdateOrDelete !== -1) {
if (stackTitle !== oldStackTitle) {
// remove old row from countByStack & formattedData
countByStack.value.set(oldStackTitle, countByStack.value.get(oldStackTitle)! - 1)
const updatedRow = formattedData.value.get(oldStackTitle)!
updatedRow.splice(idxToUpdateOrDelete, 1)
formattedData.value.set(oldStackTitle, updatedRow)
// add new row to countByStack & formattedData
countByStack.value.set(stackTitle, countByStack.value.get(stackTitle)! + 1)
if (rowIndex !== undefined) {
const targetStack = formattedData.value.get(stackTitle)!
targetStack.splice(rowIndex, 0, row)
formattedData.value.set(stackTitle, targetStack)
} else {
formattedData.value.set(stackTitle, [...formattedData.value.get(stackTitle)!, row])
}
} else {
// update the row in formattedData
const updatedRow = formattedData.value.get(stackTitle)!
if (rowIndex !== undefined) {
updatedRow.splice(idxToUpdateOrDelete, 1)
updatedRow.splice(rowIndex, 0, row)
} else {
updatedRow[idxToUpdateOrDelete] = row
}
formattedData.value.set(oldStackTitle, updatedRow)
}
}
}
}
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]
// remove target row from formattedData
formattedData.value.set(
stackTitle,
formattedData.value
.get(stackTitle)!
.filter((ele) => extractPkFromRow(ele.row, meta!.value!.columns as ColumnType[]) !== targetPrimaryKey),
)
// decrease countByStack of target stack by 1
countByStack.value.set(stackTitle, countByStack.value.get(stackTitle)! - 1)
}
function removeRowFromUncategorizedStack() {
// remove the last record
formattedData.value.get(null)!.pop()
// decrease total count by 1
countByStack.value.set(null, countByStack.value.get(null)! - 1)
}
async function deleteRow(row: Row, undo = false) {
try {
if (!undo) {
addUndo({
redo: {
fn: async function redo(this: UndoRedoAction, r: Row) {
await deleteRow(r, true)
},
args: [clone(row)],
},
undo: {
fn: async function undo(this: UndoRedoAction, row: Row) {
const pkData = rowPkData(row.row, meta.value?.columns as ColumnType[])
row.row = { ...pkData, ...row.row }
await insertRow(row.row, undefined, true)
addOrEditStackRow(row, true)
},
args: [clone(row)],
},
scope: defineViewScope({ view: viewMeta.value as ViewType }),
})
}
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',
base.value.id as string,
meta.value?.id as string,
viewMeta.value?.id as string,
encodeURIComponent(id),
)
if (res.message) {
message.info(
`Record delete failed: ${`Unable to delete record with ID ${id} because of the following:
\n${res.message.join('\n')}.\n
Clear the data first & try again`})}`,
)
return false
}
return true
}
return {
loadKanbanData,
loadMoreKanbanData,
loadKanbanMeta,
updateKanbanMeta,
kanbanMetaData,
formattedData,
countByStack,
groupingField,
groupingFieldColOptions,
groupingFieldColumn,
updateOrSaveRow,
addEmptyRow,
addOrEditStackRow,
deleteStack,
updateKanbanStackMeta,
removeRowFromUncategorizedStack,
shouldScrollToRight,
deleteRow,
moveHistory,
addNewStackId,
}
},
'kanban-view-store',
)
export { useProvideKanbanViewStore }
export function useKanbanViewStoreOrThrow() {
const kanbanViewStore = useKanbanViewStore()
if (kanbanViewStore == null) throw new Error('Please call `useProvideKanbanViewStore` on the appropriate parent component')
return kanbanViewStore
}