import { getDefaultPagination } from '@/utils/pagination'; import { useService } from '@/services'; import { plainClone } from '@/utils/object'; import { emptyObjectFunc } from '@/utils/func'; import { translate } from '@/utils/i18n'; import { loadNamespaceLocalStorage, saveNamespaceLocalStorage, } from '@/utils/storage'; import { getMd5 } from '@/utils/hash'; // i18n const t = translate; export const globalLayoutSettingsKey = 'globalLayoutSettings'; export const getDefaultStoreState = ( ns: StoreNamespace ): BaseStoreState => { const namespaceSettings = loadNamespaceLocalStorage( ns, globalLayoutSettingsKey ); const defaultPagination = getDefaultPagination(); const tablePagination = { ...defaultPagination, ...namespaceSettings.pagination, }; return { ns, dialogVisible: { createEdit: true, }, activeDialogKey: undefined, form: {} as T, isSelectiveForm: false, selectedFormFields: [], readonlyFormFields: [], formList: [], newFormFn: emptyObjectFunc, confirmLoading: false, tableLoading: false, tableData: [], tableTotal: 0, tablePagination, tableListFilter: [], tableListSort: [], allList: [], sidebarCollapsed: false, actionsCollapsed: false, tabs: [{ id: 'overview', title: t('common.tabs.overview') }], disabledTabKeys: [], afterSave: [], }; }; export const getDefaultStoreGetters = ( opts?: GetDefaultStoreGettersOptions ): BaseStoreGetters> => { if (!opts) opts = {}; if (!opts.selectOptionValueKey) opts.selectOptionValueKey = '_id'; if (!opts.selectOptionLabelKey) opts.selectOptionLabelKey = 'name'; return { dialogVisible: (state: BaseStoreState) => state.activeDialogKey !== undefined, formListIds: (state: BaseStoreState) => state.formList.map(d => (d as BaseModel)._id as string), allListSelectOptions: (state: BaseStoreState) => state.allList.map(d => { const _d = d as BaseModel; return { value: _d[opts?.selectOptionValueKey as string], label: _d[opts?.selectOptionLabelKey as string], }; }), allDict: (state: BaseStoreState) => { const dict = new Map(); state.allList.forEach(d => dict.set((d as BaseModel)._id as string, d as any) ); return dict; }, }; }; export const getDefaultStoreMutations = (): BaseStoreMutations => { return { showDialog: (state: BaseStoreState, key: DialogKey) => { state.activeDialogKey = key; }, hideDialog: (state: BaseStoreState) => { // reset all other state variables state.isSelectiveForm = false; state.selectedFormFields = []; state.formList = []; state.confirmLoading = false; // set active dialog key as undefined state.activeDialogKey = undefined; }, setForm: (state: BaseStoreState, value: T) => { state.form = value; }, resetForm: (state: BaseStoreState) => { state.form = state.newFormFn() as T; }, setIsSelectiveForm: (state: BaseStoreState, value: boolean) => { state.isSelectiveForm = value; }, setSelectedFormFields: (state: BaseStoreState, value: string[]) => { state.selectedFormFields = value; }, resetSelectedFormFields: (state: BaseStoreState) => { state.selectedFormFields = []; }, setReadonlyFormFields: (state: BaseStoreState, value: string[]) => { state.readonlyFormFields = value; }, resetReadonlyFormFields: (state: BaseStoreState) => { state.readonlyFormFields = []; }, setFormList: (state: BaseStoreState, value: T[]) => { state.formList = value; }, resetFormList: (state: BaseStoreState) => { state.formList = []; }, setConfirmLoading: (state: BaseStoreState, value: boolean) => { state.confirmLoading = value; }, setTableLoading: (state: BaseStoreState, value: boolean) => { state.tableLoading = value; }, setTableData: ( state: BaseStoreState, payload: TableDataWithTotal ) => { const { data, total } = payload; state.tableData = data; state.tableTotal = total; }, resetTableData: (state: BaseStoreState) => { state.tableData = []; }, setTablePagination: ( state: BaseStoreState, pagination: TablePagination ) => { state.tablePagination = pagination; saveNamespaceLocalStorage(state.ns, globalLayoutSettingsKey, { pagination, }); }, resetTablePagination: (state: BaseStoreState) => { const pagination = getDefaultPagination(); state.tablePagination = pagination; saveNamespaceLocalStorage(state.ns, globalLayoutSettingsKey, { pagination, }); }, setTableListFilter: ( state: BaseStoreState, filter: FilterConditionData[] ) => { state.tableListFilter = filter; }, resetTableListFilter: (state: BaseStoreState) => { state.tableListFilter = []; }, setTableListFilterByKey: ( state: BaseStoreState, { key, conditions } ) => { const filter = state.tableListFilter.filter(d => d.key !== key); conditions.forEach(d => { d.key = key; filter.push(d); }); state.tableListFilter = filter; }, resetTableListFilterByKey: (state: BaseStoreState, key) => { state.tableListFilter = state.tableListFilter.filter(d => d.key !== key); }, setTableListSort: (state: BaseStoreState, sort: SortData[]) => { state.tableListSort = sort; }, resetTableListSort: (state: BaseStoreState) => { state.tableListSort = []; }, setTableListSortByKey: (state: BaseStoreState, { key, sort }) => { const idx = state.tableListSort.findIndex(d => d.key === key); if (idx === -1) { if (sort) { state.tableListSort.push(sort); } } else { if (sort) { state.tableListSort[idx] = plainClone(sort); } else { state.tableListSort.splice(idx, 1); } } }, resetTableListSortByKey: (state: BaseStoreState, key) => { state.tableListSort = state.tableListSort.filter(d => d.key !== key); }, setAllList: (state: BaseStoreState, value: T[]) => { state.allList = value; }, resetAllList: (state: BaseStoreState) => { state.allList = []; }, setTabs: (state: BaseStoreState, tabs) => { state.tabs = tabs; }, setDisabledTabKeys: (state: BaseStoreState, keys) => { state.disabledTabKeys = keys; }, resetDisabledTabKeys: (state: BaseStoreState) => { state.disabledTabKeys = []; }, setAfterSave: (state: BaseStoreState, fnList) => { state.afterSave = fnList; }, }; }; export const getDefaultStoreActions = ( endpoint: string ): { deleteList: ( { commit }: StoreActionContext>, ids: string[] ) => Promise; getAllList: ({ commit, }: StoreActionContext>) => Promise>; createList: ( { state, commit }: StoreActionContext>, data: T[] ) => Promise>; getById: ( { commit }: StoreActionContext>, id: string ) => Promise>; getList: ({ state, commit, }: StoreActionContext>) => Promise>; deleteById: ( { commit }: StoreActionContext>, id: string ) => Promise; create: ( { commit }: StoreActionContext>, form: T ) => Promise>; getListWithParams: ( _: StoreActionContext>, params?: ListRequestParams ) => Promise>; updateById: ( { commit }: StoreActionContext>, { id, form, }: { id: string; form: T; } ) => Promise>; updateList: ( { state, commit }: StoreActionContext>, { ids, data, fields }: BatchRequestPayloadWithData ) => Promise; } => { const { getById, create, updateById, deleteById, getList, getAll, createList, updateList, deleteList, } = useService(endpoint); return { getById: async ( { commit }: StoreActionContext>, id: string ) => { const res = await getById(id); commit('setForm', res.data); return res; }, create: async (_: StoreActionContext>, form: T) => { return await create(form); }, updateById: async ( _: StoreActionContext>, { id, form }: { id: string; form: T } ) => { return await updateById(id, form); }, deleteById: async ( _: StoreActionContext>, id: string ) => { return await deleteById(id); }, getList: async ({ state, commit, }: StoreActionContext>) => { console.debug('getList'); const { page, size } = state.tablePagination; try { commit('setTableLoading', true); const res = await getList({ page, size, conditions: JSON.stringify(state.tableListFilter), sort: JSON.stringify(state.tableListSort), } as ListRequestParams); // table data const tableData = { data: res.data || [], total: res.total }; // check if the data has changes against the current data if (getMd5(tableData.data) !== getMd5(state.tableData)) { commit('setTableData', tableData); } return res; } catch (e) { throw e; } finally { commit('setTableLoading', false); } }, getListWithParams: async ( _: StoreActionContext>, params?: ListRequestParams ) => { return await getList(params); }, getAllList: async ({ commit }: StoreActionContext>) => { const res = await getAll(); commit('setAllList', res.data || []); return res; }, createList: async (_: StoreActionContext>, data: T[]) => { return await createList(data); }, updateList: async ( _: StoreActionContext>, { ids, data, fields }: BatchRequestPayloadWithData ) => { return await updateList(ids, data, fields); }, deleteList: async ( _: StoreActionContext>, ids: string[] ) => { return await deleteList(ids); }, }; };