mt-flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
276 lines (275 loc) • 10.3 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { create, useStore } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { mtmClient } from '../mtmapi/mtm.client';
import { DeleteById, GetById, mtmApiAddItem, mtmApiCall } from '../mtmapi/mtmapi';
import { RES_URL_ROOT } from './consts';
import { createContext, useContext, useEffect, useRef } from 'react';
import { subscribeWithSelector } from 'zustand/middleware';
export const createResViewSlice = (set, get, initState) => {
return {
depth: 0,
isLoadingDetail: false,
isLoadingList: false,
isOpenNewForm: false,
debug: false,
openQuery: false,
items: [],
// isOpenDebug: false,
// setDebug(debug) {
// set({ ...get(), debug })
// },
async addItem(item) {
const pre = get();
const res = get().resView?.res;
if (res) {
return;
}
console.log('add item: ', item);
set({ ...pre, items: [...pre.items, item] });
//同步到后端
const addItemResult = await mtmApiAddItem(res, item);
console.log('add item result:', addItemResult);
},
setDepth(depth) {
if (depth > 0) {
console.log('setDepth call', depth);
set({ ...get(), depth });
}
},
cleanItems() {
set({ ...get(), items: [] });
},
setActivateId(activateId) {
set({ ...get(), activateId });
get().loadDetailData();
},
handleBacktoList() {
history.pushState({}, '', `${RES_URL_ROOT} / ${get().resView?.res}`);
set({ ...get(), activateId: undefined, activateItem: undefined });
},
async listQuery(newValues) {
console.log('listQuery, state:', get());
const pre = get();
if (!pre.resView) {
console.log('resView 对象为空，跳过数据加载');
return;
}
const viewType = pre.resView.viewType;
const res = pre.resView.res;
// if (viewType == "list") {
set({
...pre,
isLoadingList: true,
queryParams: {
...pre.queryParams,
...newValues,
},
});
// let parentIdField = pre.resView?.parentIdField
// if (!parentIdField) {
// //如果没有具体指定上级过滤字段，则根据res 名称 生成。
// parentIdField = pre.parentResView?.res
// }
const finnalParams = {
...pre.queryParams,
};
// finnalParams[parentIdField!] = pre.parentItemId
const result = await mtmApiCall(res, '', finnalParams);
const responseItems = result.items;
set({
...get(),
isLoadingList: false,
items: [
...responseItems.map((ritem) => {
return {
...ritem,
};
}),
],
});
// } else if (pre.resView.viewType == "edit") {
// console.log("TODO: 加载 edit 数据")
// }
},
async loadDetailData() {
const pre = get();
set({ ...pre, isLoadingDetail: true });
const res = pre.resView.res;
if (pre.activateId) {
//TODO: 添加前端缓存
const activateItem = await GetById(res, pre.activateId);
set({ ...pre, isLoadingDetail: false, activateItem });
}
},
async updateItem(item) {
const pre = get();
console.log('TODO:更新item', item);
// ResStoreService.syncUpdate(pre.resName, item)
},
setOpenDebug: (isOpenDebug) => set((state) => {
return { isOpenDebug };
}),
setIsLoadingList: (isLoadingList) => set((state) => {
return { isLoadingList };
}),
setOpenNewForm: (isOpenNewForm) => set((state) => {
return { isOpenNewForm };
}),
setQueryParams: (queryParams) => set((state) => {
return { queryParams };
}),
setOpenQuery: (openQuery) => set((state) => {
return { openQuery };
}),
setOpenDeleteConfrom(isOpenDeleteConfrom) {
set({ ...get(), isOpenDeleteConfrom });
},
async deleteItem(id) {
const res = get().resView.res;
await DeleteById(res, id);
},
setDeleteItemId(deleteItemId) {
set({ ...get(), deleteItemId });
},
async LoadViewConfig() {
set({ ...get(), isLoadingResView: true });
const viewData = get().resView;
if (!viewData) {
//假如没有传入resView 的完整数据，则根据 resViewId 从后端加载。
console.log('TODO: 需要从后端根据 resViewId 加载 resView 数据');
}
const pre = get();
//从视图配置中，搜索相关的表单。
//补充： 这个方式过时。新的方式是，直接使用api加载。
const createItemForm = viewData.forms?.find((form) => {
return form.res == pre.resView?.res && form.action == 'create';
});
const queryForm = viewData?.forms?.find((form) => {
return form.res == pre.resView?.res && form.action == 'listquery';
});
const editForm = viewData?.forms?.find((form) => {
return form.res == pre.resView?.res && form.action == 'edit';
});
set({
...get(),
isLoadingResView: false,
resView: viewData,
newItemForm: createItemForm,
queryForm,
editForm,
});
},
isLoadingResView: false,
setLoadingResView(isLoadingResView) {
set({ ...get(), isLoadingResView });
},
activatedSubView: undefined,
setActivatedSubView(activatedSubView) {
set({ ...get(), activatedSubView });
},
parentItemId: undefined,
setParentItemId(parentItemId) {
if (parentItemId) {
set({ ...get(), parentItemId });
get().listQuery();
}
},
activatedTagId: undefined,
setActivatedTagId(activatedTagId) {
set({ ...get(), activatedTagId });
},
activateSubViewId: undefined,
setActivateSubViewId(activateSubViewId) {
const finedResView = get().resView.subViews.find((x) => x.id.toString() == activateSubViewId);
set({ ...get(), activateSubViewId, activateSubView: finedResView });
},
async setResView(resView) {
const pre = get();
// let depth = 0
//当前视图的深度为上级视图的深度+1
// if (pre.parentState) {
// const parentDepth = pre.parentState?.depth || 0
// depth = parentDepth + 1
// }
// const resView = pre.resView
if (!pre.resView.subViews) {
//嵌套视图中,还需要继续加载子视图配置，因为上级视图仅加载了他自己子视图。第三级的还没加载。
resView = await mtmClient.resView.getResViewById(pre.resView.id.toString());
// console.log("newResView:", newResView)
// set({ ...get(), resView: newResView })
}
set({ ...get(), resView });
},
...initState,
};
};
export const createResAppStore = (initProps) => {
return create()(devtools(persist(subscribeWithSelector((...a) => {
return {
...createResViewSlice(...a),
// ...createDashSlice(...a),
//初始值，
//提示：可以用SSR的方式设置初始值，能覆盖各个Slice中内部的初始值，这样，Slice内部可以不用管初始值的相关部分。
...initProps,
};
}), {
name: `resAppStore-${initProps?.resView?.id}`,
version: 1,
// skipHydration: true,
onRehydrateStorage(state) {
// console.log("onRehydrateStorage[resView]", state)
},
})));
};
//-----------context
const Context = createContext(null);
export function ResApp2Provider({ children, ...props }) {
const storeRef = useRef();
if (!storeRef.current) {
storeRef.current = createResAppStore(props);
}
useEffect(() => {
storeRef.current?.getState().setParentItemId(props?.parentItemId);
}, [props?.parentItemId]);
useEffect(() => {
// console.log('props?.depth', props?.depth);
if (props.depth) {
storeRef.current?.getState().setDepth(props?.depth);
}
}, [props?.depth]);
useEffect(() => {
console.log('props?.resView', props?.resView);
if (props?.resView) {
storeRef.current?.getState().setResView(props.resView);
}
}, [props?.resView]);
return (_jsxs(Context.Provider, { value: storeRef.current, children: [children, _jsx(SubscriptionSetup, {})] }));
}
//------------事件订阅
function SubscriptionSetup() {
const store = useResV2Store();
useEffect(() => {
// const unsub2 = store.subscribe((state) => state.items, (a) => {
// })
return () => {
// unsub2()
};
}, []);
useEffect(() => {
store.getState().LoadViewConfig();
}, []);
return _jsx(_Fragment, {});
}
export function useResV2Store(selector, equals) {
const store = useContext(Context);
if (!store)
throw new Error('Missing ResAppProvider');
if (selector) {
return useStore(store, selector, equals);
}
else {
return store;
}
}