mirror of https://github.com/nocodb/nocodb
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.
740 lines
27 KiB
740 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 uncategorizedStackId = 'uncategorized' |
|
|
|
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)) { |
|
// Don't update stack meta if it is shared view and |
|
// shared view meta grouping field options not matched with actual column options |
|
if (isPublic.value) continue |
|
|
|
// 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 !== uncategorizedStackId && !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: uncategorizedStackId, 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, |
|
encodeURIComponent(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() { |
|
if (isPublic.value) return |
|
// 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 = extractPkFromRow(row.row, meta?.value?.columns) |
|
|
|
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, |
|
uncategorizedStackId, |
|
} |
|
}, |
|
'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 |
|
}
|
|
|