mirror of https://github.com/nocodb/nocodb
Raju Udava
1 year ago
committed by
GitHub
24 changed files with 357 additions and 421 deletions
@ -1,97 +0,0 @@ |
|||||||
import type { ColumnType, GridColumnReqType, GridColumnType, ViewType } from 'nocodb-sdk' |
|
||||||
import type { Ref } from 'vue' |
|
||||||
import { IsPublicInj, computed, inject, ref, useMetas, useNuxtApp, useRoles, useUndoRedo, watch } from '#imports' |
|
||||||
|
|
||||||
const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState( |
|
||||||
(view: Ref<(ViewType & { columns?: GridColumnType[] }) | undefined>, statePublic = false) => { |
|
||||||
const { isUIAllowed } = useRoles() |
|
||||||
|
|
||||||
const { $api } = useNuxtApp() |
|
||||||
|
|
||||||
const { metas } = useMetas() |
|
||||||
|
|
||||||
const { addUndo, defineViewScope } = useUndoRedo() |
|
||||||
|
|
||||||
const gridViewCols = ref<Record<string, GridColumnType>>({}) |
|
||||||
const resizingColOldWith = ref('200px') |
|
||||||
const isPublic = inject(IsPublicInj, ref(statePublic)) |
|
||||||
|
|
||||||
const columns = computed<ColumnType[]>(() => metas.value?.[view.value?.fk_model_id as string]?.columns || []) |
|
||||||
|
|
||||||
const loadGridViewColumns = async () => { |
|
||||||
if (!view.value?.id && !isPublic.value) return |
|
||||||
|
|
||||||
const colsData: GridColumnType[] = |
|
||||||
(isPublic.value ? view.value?.columns : await $api.dbView.gridColumnsList(view.value!.id!)) ?? [] |
|
||||||
|
|
||||||
gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>( |
|
||||||
(o, col) => ({ |
|
||||||
...o, |
|
||||||
[col.fk_column_id as string]: col, |
|
||||||
}), |
|
||||||
{}, |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
/** when columns changes(create/delete) reload grid columns |
|
||||||
* or when view changes reload columns width */ |
|
||||||
watch( |
|
||||||
[() => columns.value?.length, () => view.value?.id], |
|
||||||
async (n) => { |
|
||||||
if (n[1]) await loadGridViewColumns() |
|
||||||
}, |
|
||||||
{ immediate: true }, |
|
||||||
) |
|
||||||
|
|
||||||
const updateGridViewColumn = async (id: string, props: Partial<GridColumnReqType>, undo = false) => { |
|
||||||
if (!undo) { |
|
||||||
const oldProps = Object.keys(props).reduce<Partial<GridColumnReqType>>((o: any, k) => { |
|
||||||
if (gridViewCols.value[id][k as keyof GridColumnType]) { |
|
||||||
if (k === 'width') o[k] = `${resizingColOldWith.value}px` |
|
||||||
else o[k] = gridViewCols.value[id][k as keyof GridColumnType] |
|
||||||
} |
|
||||||
return o |
|
||||||
}, {}) |
|
||||||
addUndo({ |
|
||||||
redo: { |
|
||||||
fn: (w: Partial<GridColumnReqType>) => updateGridViewColumn(id, w, true), |
|
||||||
args: [props], |
|
||||||
}, |
|
||||||
undo: { |
|
||||||
fn: (w: Partial<GridColumnReqType>) => updateGridViewColumn(id, w, true), |
|
||||||
args: [oldProps], |
|
||||||
}, |
|
||||||
scope: defineViewScope({ view: view.value }), |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// sync with server if allowed
|
|
||||||
if (!isPublic.value && isUIAllowed('viewFieldEdit') && gridViewCols.value[id]?.id) { |
|
||||||
await $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, { |
|
||||||
...props, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
if (gridViewCols.value?.[id]) { |
|
||||||
Object.assign(gridViewCols.value[id], { |
|
||||||
...gridViewCols.value[id], |
|
||||||
...props, |
|
||||||
}) |
|
||||||
} else { |
|
||||||
// fallback to reload
|
|
||||||
await loadGridViewColumns() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return { loadGridViewColumns, updateGridViewColumn, gridViewCols, resizingColOldWith } |
|
||||||
}, |
|
||||||
'useGridViewColumn', |
|
||||||
) |
|
||||||
|
|
||||||
export { useProvideGridViewColumn } |
|
||||||
|
|
||||||
export function useGridViewColumnOrThrow() { |
|
||||||
const gridViewColumn = useGridViewColumn() |
|
||||||
if (gridViewColumn == null) throw new Error('Please call `useProvideGridViewColumn` on the appropriate parent component') |
|
||||||
return gridViewColumn |
|
||||||
} |
|
||||||
@ -1,296 +1,363 @@ |
|||||||
import { ViewTypes, isSystemColumn } from 'nocodb-sdk' |
import { ViewTypes, isSystemColumn } from 'nocodb-sdk' |
||||||
import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk' |
import type { ColumnType, GridColumnReqType, GridColumnType, MapType, TableType, ViewType } from 'nocodb-sdk' |
||||||
import type { ComputedRef, Ref } from 'vue' |
import type { ComputedRef, Ref } from 'vue' |
||||||
import { IsPublicInj, computed, inject, ref, storeToRefs, useBase, useNuxtApp, useRoles, useUndoRedo, watch } from '#imports' |
import { computed, ref, storeToRefs, useBase, useNuxtApp, useRoles, useUndoRedo, watch } from '#imports' |
||||||
import type { Field } from '#imports' |
import type { Field } from '#imports' |
||||||
|
|
||||||
export function useViewColumns( |
const [useProvideViewColumns, useViewColumns] = useInjectionState( |
||||||
view: Ref<ViewType | undefined>, |
( |
||||||
meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>, |
view: Ref<ViewType | undefined>, |
||||||
reloadData?: () => void, |
meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>, |
||||||
) { |
reloadData?: () => void, |
||||||
const isPublic = inject(IsPublicInj, ref(false)) |
isPublic = false, |
||||||
|
) => { |
||||||
|
const fields = ref<Field[]>() |
||||||
|
|
||||||
const fields = ref<Field[]>() |
const filterQuery = ref('') |
||||||
|
|
||||||
const filterQuery = ref('') |
const { $api, $e } = useNuxtApp() |
||||||
|
|
||||||
const { $api, $e } = useNuxtApp() |
const { isUIAllowed } = useRoles() |
||||||
|
|
||||||
const { isUIAllowed } = useRoles() |
const { isSharedBase } = storeToRefs(useBase()) |
||||||
|
|
||||||
const { isSharedBase } = storeToRefs(useBase()) |
const isViewColumnsLoading = ref(false) |
||||||
|
|
||||||
const isViewColumnsLoading = ref(false) |
const { addUndo, defineViewScope } = useUndoRedo() |
||||||
|
|
||||||
const { addUndo, defineViewScope } = useUndoRedo() |
const isLocalMode = computed( |
||||||
|
() => isPublic || !isUIAllowed('viewFieldEdit') || !isUIAllowed('viewFieldEdit') || isSharedBase.value, |
||||||
|
) |
||||||
|
|
||||||
const isLocalMode = computed( |
const localChanges = ref<Field[]>([]) |
||||||
() => isPublic.value || !isUIAllowed('viewFieldEdit') || !isUIAllowed('viewFieldEdit') || isSharedBase.value, |
|
||||||
) |
|
||||||
|
|
||||||
const localChanges = ref<Field[]>([]) |
const isColumnViewEssential = (column: ColumnType) => { |
||||||
|
// TODO: consider at some point ti delegate this via a cleaner design pattern to view specific check logic
|
||||||
|
// which could be inside of a view specific helper class (and generalized via an interface)
|
||||||
|
// (on the other hand, the logic complexity is still very low atm - might be overkill)
|
||||||
|
return view.value?.type === ViewTypes.MAP && (view.value?.view as MapType)?.fk_geo_data_col_id === column.id |
||||||
|
} |
||||||
|
|
||||||
const isColumnViewEssential = (column: ColumnType) => { |
const metaColumnById = computed<Record<string, ColumnType>>(() => { |
||||||
// TODO: consider at some point ti delegate this via a cleaner design pattern to view specific check logic
|
if (!meta.value?.columns) return {} |
||||||
// which could be inside of a view specific helper class (and generalized via an interface)
|
|
||||||
// (on the other hand, the logic complexity is still very low atm - might be overkill)
|
|
||||||
return view.value?.type === ViewTypes.MAP && (view.value?.view as MapType)?.fk_geo_data_col_id === column.id |
|
||||||
} |
|
||||||
|
|
||||||
const metaColumnById = computed<Record<string, ColumnType>>(() => { |
return (meta.value.columns as ColumnType[]).reduce( |
||||||
if (!meta.value?.columns) return {} |
(acc, curr) => ({ |
||||||
|
...acc, |
||||||
|
[curr.id!]: curr, |
||||||
|
}), |
||||||
|
{}, |
||||||
|
) as Record<string, ColumnType> |
||||||
|
}) |
||||||
|
|
||||||
return (meta.value.columns as ColumnType[]).reduce( |
const gridViewCols = ref<Record<string, GridColumnType>>({}) |
||||||
(acc, curr) => ({ |
|
||||||
...acc, |
|
||||||
[curr.id!]: curr, |
|
||||||
}), |
|
||||||
{}, |
|
||||||
) as Record<string, ColumnType> |
|
||||||
}) |
|
||||||
|
|
||||||
const loadViewColumns = async () => { |
const loadViewColumns = async () => { |
||||||
if (!meta || !view) return |
if (!meta || !view) return |
||||||
|
|
||||||
let order = 1 |
let order = 1 |
||||||
|
|
||||||
if (view.value?.id) { |
if (view.value?.id) { |
||||||
const data = (isPublic.value ? meta.value?.columns : (await $api.dbViewColumn.list(view.value.id)).list) as any[] |
const data = (isPublic ? meta.value?.columns : (await $api.dbViewColumn.list(view.value.id)).list) as any[] |
||||||
|
|
||||||
const fieldById = data.reduce<Record<string, any>>((acc, curr) => { |
const fieldById = data.reduce<Record<string, any>>((acc, curr) => { |
||||||
curr.show = !!curr.show |
curr.show = !!curr.show |
||||||
|
|
||||||
return { |
|
||||||
...acc, |
|
||||||
[curr.fk_column_id]: curr, |
|
||||||
} |
|
||||||
}, {}) |
|
||||||
|
|
||||||
fields.value = meta.value?.columns |
|
||||||
?.map((column: ColumnType) => { |
|
||||||
const currentColumnField = fieldById[column.id!] || {} |
|
||||||
|
|
||||||
return { |
return { |
||||||
title: column.title, |
...acc, |
||||||
fk_column_id: column.id, |
[curr.fk_column_id]: curr, |
||||||
...currentColumnField, |
|
||||||
show: currentColumnField.show || isColumnViewEssential(currentColumnField), |
|
||||||
order: currentColumnField.order || order++, |
|
||||||
system: isSystemColumn(metaColumnById?.value?.[currentColumnField.fk_column_id!]), |
|
||||||
isViewEssentialField: isColumnViewEssential(column), |
|
||||||
} |
} |
||||||
}) |
}, {}) |
||||||
.sort((a: Field, b: Field) => a.order - b.order) |
|
||||||
|
fields.value = meta.value?.columns |
||||||
if (isLocalMode.value && fields.value) { |
?.map((column: ColumnType) => { |
||||||
for (const field of localChanges.value) { |
const currentColumnField = fieldById[column.id!] || {} |
||||||
const fieldIndex = fields.value.findIndex((f) => f.fk_column_id === field.fk_column_id) |
|
||||||
if (fieldIndex !== undefined && fieldIndex > -1) { |
return { |
||||||
fields.value[fieldIndex] = field |
title: column.title, |
||||||
fields.value = fields.value.sort((a: Field, b: Field) => a.order - b.order) |
fk_column_id: column.id, |
||||||
|
...currentColumnField, |
||||||
|
show: currentColumnField.show || isColumnViewEssential(currentColumnField), |
||||||
|
order: currentColumnField.order || order++, |
||||||
|
system: isSystemColumn(metaColumnById?.value?.[currentColumnField.fk_column_id!]), |
||||||
|
isViewEssentialField: isColumnViewEssential(column), |
||||||
|
} |
||||||
|
}) |
||||||
|
.sort((a: Field, b: Field) => a.order - b.order) |
||||||
|
|
||||||
|
if (isLocalMode.value && fields.value) { |
||||||
|
for (const field of localChanges.value) { |
||||||
|
const fieldIndex = fields.value.findIndex((f) => f.fk_column_id === field.fk_column_id) |
||||||
|
if (fieldIndex !== undefined && fieldIndex > -1) { |
||||||
|
fields.value[fieldIndex] = field |
||||||
|
fields.value = fields.value.sort((a: Field, b: Field) => a.order - b.order) |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
|
const colsData: GridColumnType[] = (isPublic.value ? view.value?.columns : fields.value) ?? [] |
||||||
|
|
||||||
|
gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>( |
||||||
|
(o, col) => ({ |
||||||
|
...o, |
||||||
|
[col.fk_column_id as string]: col, |
||||||
|
}), |
||||||
|
{}, |
||||||
|
) |
||||||
} |
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
const showAll = async (ignoreIds?: any) => { |
|
||||||
if (isLocalMode.value) { |
|
||||||
fields.value = fields.value?.map((field: Field) => ({ |
|
||||||
...field, |
|
||||||
show: true, |
|
||||||
})) |
|
||||||
reloadData?.() |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
if (view?.value?.id) { |
const showAll = async (ignoreIds?: any) => { |
||||||
if (ignoreIds) { |
if (isLocalMode.value) { |
||||||
await $api.dbView.showAllColumn(view.value.id, { |
fields.value = fields.value?.map((field: Field) => ({ |
||||||
ignoreIds, |
...field, |
||||||
}) |
show: true, |
||||||
} else { |
})) |
||||||
await $api.dbView.showAllColumn(view.value.id) |
reloadData?.() |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if (view?.value?.id) { |
||||||
|
if (ignoreIds) { |
||||||
|
await $api.dbView.showAllColumn(view.value.id, { |
||||||
|
ignoreIds, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
await $api.dbView.showAllColumn(view.value.id) |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
|
await loadViewColumns() |
||||||
|
reloadData?.() |
||||||
|
$e('a:fields:show-all') |
||||||
} |
} |
||||||
|
const hideAll = async (ignoreIds?: any) => { |
||||||
|
if (isLocalMode.value) { |
||||||
|
fields.value = fields.value?.map((field: Field) => ({ |
||||||
|
...field, |
||||||
|
show: !!field.isViewEssentialField, |
||||||
|
})) |
||||||
|
reloadData?.() |
||||||
|
return |
||||||
|
} |
||||||
|
if (view?.value?.id) { |
||||||
|
if (ignoreIds) { |
||||||
|
await $api.dbView.hideAllColumn(view.value.id, { |
||||||
|
ignoreIds, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
await $api.dbView.hideAllColumn(view.value.id) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
await loadViewColumns() |
await loadViewColumns() |
||||||
reloadData?.() |
|
||||||
$e('a:fields:show-all') |
|
||||||
} |
|
||||||
const hideAll = async (ignoreIds?: any) => { |
|
||||||
if (isLocalMode.value) { |
|
||||||
fields.value = fields.value?.map((field: Field) => ({ |
|
||||||
...field, |
|
||||||
show: !!field.isViewEssentialField, |
|
||||||
})) |
|
||||||
reloadData?.() |
reloadData?.() |
||||||
return |
$e('a:fields:show-all') |
||||||
} |
} |
||||||
if (view?.value?.id) { |
|
||||||
if (ignoreIds) { |
const saveOrUpdate = async (field: any, index: number) => { |
||||||
await $api.dbView.hideAllColumn(view.value.id, { |
if (isLocalMode.value && fields.value) { |
||||||
ignoreIds, |
fields.value[index] = field |
||||||
|
meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => { |
||||||
|
if (column.id === field.fk_column_id) { |
||||||
|
return { |
||||||
|
...column, |
||||||
|
...field, |
||||||
|
id: field.fk_column_id, |
||||||
|
} |
||||||
|
} |
||||||
|
return column |
||||||
}) |
}) |
||||||
} else { |
|
||||||
await $api.dbView.hideAllColumn(view.value.id) |
localChanges.value.push(field) |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
await loadViewColumns() |
if (isUIAllowed('viewFieldEdit')) { |
||||||
reloadData?.() |
if (field.id && view?.value?.id) { |
||||||
$e('a:fields:show-all') |
await $api.dbViewColumn.update(view.value.id, field.id, field) |
||||||
} |
} else if (view.value?.id) { |
||||||
|
const insertedField = (await $api.dbViewColumn.create(view.value.id, field)) as any |
||||||
|
|
||||||
const saveOrUpdate = async (field: any, index: number) => { |
/** update the field in fields if defined */ |
||||||
if (isLocalMode.value && fields.value) { |
if (fields.value) fields.value[index] = insertedField |
||||||
fields.value[index] = field |
|
||||||
meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => { |
return insertedField |
||||||
if (column.id === field.fk_column_id) { |
|
||||||
return { |
|
||||||
...column, |
|
||||||
...field, |
|
||||||
id: field.fk_column_id, |
|
||||||
} |
|
||||||
} |
} |
||||||
return column |
} |
||||||
}) |
|
||||||
|
|
||||||
localChanges.value.push(field) |
await loadViewColumns() |
||||||
|
reloadData?.() |
||||||
} |
} |
||||||
|
|
||||||
if (isUIAllowed('viewFieldEdit')) { |
const showSystemFields = computed({ |
||||||
if (field.id && view?.value?.id) { |
get() { |
||||||
await $api.dbViewColumn.update(view.value.id, field.id, field) |
return (view.value?.show_system_fields as boolean) || false |
||||||
} else if (view.value?.id) { |
}, |
||||||
const insertedField = (await $api.dbViewColumn.create(view.value.id, field)) as any |
set(v: boolean) { |
||||||
|
if (view?.value?.id) { |
||||||
|
if (!isLocalMode.value) { |
||||||
|
$api.dbView |
||||||
|
.update(view.value.id, { |
||||||
|
show_system_fields: v, |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
loadViewColumns() |
||||||
|
reloadData?.() |
||||||
|
}) |
||||||
|
} |
||||||
|
view.value.show_system_fields = v |
||||||
|
} |
||||||
|
$e('a:fields:system-fields') |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
/** update the field in fields if defined */ |
const filteredFieldList = computed(() => { |
||||||
if (fields.value) fields.value[index] = insertedField |
return ( |
||||||
|
fields.value?.filter((field: Field) => { |
||||||
|
if (metaColumnById?.value?.[field.fk_column_id!]?.pv) return true |
||||||
|
|
||||||
return insertedField |
// hide system columns if not enabled
|
||||||
} |
if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) { |
||||||
} |
return false |
||||||
|
} |
||||||
|
|
||||||
await loadViewColumns() |
if (filterQuery.value === '') { |
||||||
reloadData?.() |
return true |
||||||
} |
} else { |
||||||
|
return field.title.toLowerCase().includes(filterQuery.value.toLowerCase()) |
||||||
|
} |
||||||
|
}) || [] |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
const showSystemFields = computed({ |
const sortedAndFilteredFields = computed<ColumnType[]>(() => { |
||||||
get() { |
return (fields?.value |
||||||
return (view.value?.show_system_fields as boolean) || false |
?.filter((field: Field) => { |
||||||
}, |
// hide system columns if not enabled
|
||||||
set(v: boolean) { |
if ( |
||||||
if (view?.value?.id) { |
!showSystemFields.value && |
||||||
if (!isLocalMode.value) { |
metaColumnById.value && |
||||||
$api.dbView |
metaColumnById?.value?.[field.fk_column_id!] && |
||||||
.update(view.value.id, { |
isSystemColumn(metaColumnById.value?.[field.fk_column_id!]) && |
||||||
show_system_fields: v, |
!metaColumnById.value?.[field.fk_column_id!]?.pv |
||||||
}) |
) { |
||||||
.finally(() => { |
return false |
||||||
loadViewColumns() |
} |
||||||
reloadData?.() |
return field.show && metaColumnById?.value?.[field.fk_column_id!] |
||||||
}) |
}) |
||||||
} |
?.sort((a: Field, b: Field) => a.order - b.order) |
||||||
view.value.show_system_fields = v |
?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[] |
||||||
} |
}) |
||||||
$e('a:fields:system-fields') |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
const filteredFieldList = computed(() => { |
|
||||||
return ( |
|
||||||
fields.value?.filter((field: Field) => { |
|
||||||
if (metaColumnById?.value?.[field.fk_column_id!]?.pv) return true |
|
||||||
|
|
||||||
// hide system columns if not enabled
|
|
||||||
if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) { |
|
||||||
return false |
|
||||||
} |
|
||||||
|
|
||||||
if (filterQuery.value === '') { |
const toggleFieldVisibility = (checked: boolean, field: any) => { |
||||||
return true |
const fieldIndex = fields.value?.findIndex((f) => f.fk_column_id === field.fk_column_id) |
||||||
} else { |
if (!fieldIndex && fieldIndex !== 0) return |
||||||
return field.title.toLowerCase().includes(filterQuery.value.toLowerCase()) |
addUndo({ |
||||||
} |
undo: { |
||||||
}) || [] |
fn: (v: boolean) => { |
||||||
) |
field.show = !v |
||||||
}) |
saveOrUpdate(field, fieldIndex) |
||||||
|
}, |
||||||
const sortedAndFilteredFields = computed<ColumnType[]>(() => { |
args: [checked], |
||||||
return (fields?.value |
|
||||||
?.filter((field: Field) => { |
|
||||||
// hide system columns if not enabled
|
|
||||||
if ( |
|
||||||
!showSystemFields.value && |
|
||||||
metaColumnById.value && |
|
||||||
metaColumnById?.value?.[field.fk_column_id!] && |
|
||||||
isSystemColumn(metaColumnById.value?.[field.fk_column_id!]) && |
|
||||||
!metaColumnById.value?.[field.fk_column_id!]?.pv |
|
||||||
) { |
|
||||||
return false |
|
||||||
} |
|
||||||
return field.show && metaColumnById?.value?.[field.fk_column_id!] |
|
||||||
}) |
|
||||||
?.sort((a: Field, b: Field) => a.order - b.order) |
|
||||||
?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[] |
|
||||||
}) |
|
||||||
|
|
||||||
const toggleFieldVisibility = (checked: boolean, field: any) => { |
|
||||||
const fieldIndex = fields.value?.findIndex((f) => f.fk_column_id === field.fk_column_id) |
|
||||||
if (!fieldIndex && fieldIndex !== 0) return |
|
||||||
addUndo({ |
|
||||||
undo: { |
|
||||||
fn: (v: boolean) => { |
|
||||||
field.show = !v |
|
||||||
saveOrUpdate(field, fieldIndex) |
|
||||||
}, |
}, |
||||||
args: [checked], |
redo: { |
||||||
}, |
fn: (v: boolean) => { |
||||||
redo: { |
field.show = v |
||||||
fn: (v: boolean) => { |
saveOrUpdate(field, fieldIndex) |
||||||
field.show = v |
}, |
||||||
saveOrUpdate(field, fieldIndex) |
args: [checked], |
||||||
}, |
}, |
||||||
args: [checked], |
scope: defineViewScope({ view: view.value }), |
||||||
}, |
}) |
||||||
scope: defineViewScope({ view: view.value }), |
saveOrUpdate(field, fieldIndex) |
||||||
}) |
} |
||||||
saveOrUpdate(field, fieldIndex) |
|
||||||
} |
// reload view columns when active view changes
|
||||||
|
// or when columns count changes(delete/add)
|
||||||
// reload view columns when active view changes
|
watch( |
||||||
// or when columns count changes(delete/add)
|
[() => view?.value?.id, () => meta.value?.columns?.length], |
||||||
watch( |
async ([newViewId]) => { |
||||||
[() => view?.value?.id, () => meta.value?.columns?.length], |
// reload only if view belongs to current table
|
||||||
async ([newViewId]) => { |
if (newViewId && view.value?.fk_model_id === meta.value?.id) { |
||||||
// reload only if view belongs to current table
|
isViewColumnsLoading.value = true |
||||||
if (newViewId && view.value?.fk_model_id === meta.value?.id) { |
try { |
||||||
isViewColumnsLoading.value = true |
await loadViewColumns() |
||||||
try { |
} catch (e) { |
||||||
await loadViewColumns() |
console.error(e) |
||||||
} catch (e) { |
} |
||||||
console.error(e) |
isViewColumnsLoading.value = false |
||||||
} |
} |
||||||
isViewColumnsLoading.value = false |
}, |
||||||
|
{ immediate: true }, |
||||||
|
) |
||||||
|
|
||||||
|
const resizingColOldWith = ref('200px') |
||||||
|
|
||||||
|
const updateGridViewColumn = async (id: string, props: Partial<GridColumnReqType>, undo = false) => { |
||||||
|
if (!undo) { |
||||||
|
const oldProps = Object.keys(props).reduce<Partial<GridColumnReqType>>((o: any, k) => { |
||||||
|
if (gridViewCols.value[id][k as keyof GridColumnType]) { |
||||||
|
if (k === 'width') o[k] = `${resizingColOldWith.value}px` |
||||||
|
else o[k] = gridViewCols.value[id][k as keyof GridColumnType] |
||||||
|
} |
||||||
|
return o |
||||||
|
}, {}) |
||||||
|
addUndo({ |
||||||
|
redo: { |
||||||
|
fn: (w: Partial<GridColumnReqType>) => updateGridViewColumn(id, w, true), |
||||||
|
args: [props], |
||||||
|
}, |
||||||
|
undo: { |
||||||
|
fn: (w: Partial<GridColumnReqType>) => updateGridViewColumn(id, w, true), |
||||||
|
args: [oldProps], |
||||||
|
}, |
||||||
|
scope: defineViewScope({ view: view.value }), |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// sync with server if allowed
|
||||||
|
if (!isPublic.value && isUIAllowed('viewFieldEdit') && gridViewCols.value[id]?.id) { |
||||||
|
await $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, { |
||||||
|
...props, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (gridViewCols.value?.[id]) { |
||||||
|
Object.assign(gridViewCols.value[id], { |
||||||
|
...gridViewCols.value[id], |
||||||
|
...props, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
// fallback to reload
|
||||||
|
await loadViewColumns() |
||||||
} |
} |
||||||
}, |
} |
||||||
{ immediate: true }, |
|
||||||
) |
return { |
||||||
|
fields, |
||||||
return { |
loadViewColumns, |
||||||
fields, |
filteredFieldList, |
||||||
loadViewColumns, |
filterQuery, |
||||||
filteredFieldList, |
showAll, |
||||||
filterQuery, |
hideAll, |
||||||
showAll, |
saveOrUpdate, |
||||||
hideAll, |
sortedAndFilteredFields, |
||||||
saveOrUpdate, |
showSystemFields, |
||||||
sortedAndFilteredFields, |
metaColumnById, |
||||||
showSystemFields, |
toggleFieldVisibility, |
||||||
metaColumnById, |
isViewColumnsLoading, |
||||||
toggleFieldVisibility, |
updateGridViewColumn, |
||||||
isViewColumnsLoading, |
gridViewCols, |
||||||
} |
resizingColOldWith, |
||||||
|
} |
||||||
|
}, |
||||||
|
'useViewColumnsOrThrow', |
||||||
|
) |
||||||
|
|
||||||
|
export { useProvideViewColumns } |
||||||
|
|
||||||
|
export function useViewColumnsOrThrow() { |
||||||
|
const viewColumns = useViewColumns() |
||||||
|
if (viewColumns == null) throw new Error('Please call `useProvideViewColumns` on the appropriate parent component') |
||||||
|
return viewColumns |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue