proje-react-panel 1.4.0 → 1.4.1

package/src/components/list/Datagrid.tsx

@@ -8,6 +8,7 @@ import { ListPageMeta } from '../../decorators/list/getListPageMeta';
 import { AnyClass } from '../../types/AnyClass';
 import { CellField } from './CellField';
 import { CellConfiguration } from '../../decorators/list/Cell';
+import { useAppStore } from '../../store/store';
 
 interface DatagridProps<T extends AnyClass> {
   data: T[];
@@ -21,6 +22,7 @@ export function Datagrid<T extends AnyClass>({
   onRemoveItem,
 }: DatagridProps<T>) {
   const cells = listPageMeta.cells;
+  const listData = useAppStore(state => state.listData[listPageMeta.class.key]);
   const listGeneralCells = data?.[0]
     ? typeof listPageMeta.class.cells === 'function'
       ? listPageMeta.class.cells?.(data[0])
@@ -50,10 +52,13 @@ export function Datagrid<T extends AnyClass>({
                   ? listPageMeta.class.cells?.(item)
                   : listPageMeta.class.cells
                 : null;
+              const listDataItem = listData?.[item[listPageMeta.class.primaryId]] as
+                | Record<string, unknown>
+                | undefined;
               return (
                 <tr key={index}>
                   {cells.map((configuration: CellConfiguration) => {
-                    const value = item[configuration.name];
+                    const value = listDataItem?.[configuration.name] ?? item[configuration.name];
                     return (
                       <CellField
                         key={configuration.name}

package/src/decorators/list/List.ts

@@ -35,9 +35,14 @@ export interface ListOptions<T> {
   getData: GetDataForList<T>;
   headers?: ListHeaderOptions;
   cells?: ((item: T) => ListCellOptions<T>) | ListCellOptions<T>;
+  primaryId: string;
+  key?: string;
 }
 
-export type ListConfiguration<T> = ListOptions<T>;
+export type ListConfiguration<T> = ListOptions<T> & {
+  primaryId: string;
+  key: string;
+};
 
 export function List<T>(options?: ListOptions<T> | ((item: T) => ListOptions<T>)): ClassDecorator {
   return (target: object) => {
@@ -50,11 +55,13 @@ export function List<T>(options?: ListOptions<T> | ((item: T) => ListOptions<T>)
 export function getListConfiguration<T extends AnyClass>(
   entityClass: AnyClassConstructor<T>
 ): ListConfiguration<T> {
-  const listConfiguration = Reflect.getMetadata(LIST_METADATA_KEY, entityClass);
+  const listConfiguration: ListOptions<T> = Reflect.getMetadata(LIST_METADATA_KEY, entityClass);
   if (!listConfiguration) {
     throw new Error('List decerator should be used on class');
   }
   return {
     ...listConfiguration,
+    primaryId: listConfiguration.primaryId,
+    key: listConfiguration.key || entityClass.name,
   };
 }

package/src/index.ts

@@ -39,3 +39,4 @@ export { logout } from './utils/logout';
 
 //SERVICES
 export { updateDetailsData } from './services/DataService';
+export { updateListData } from './services/DataService';

package/src/services/DataService.ts

@@ -1,6 +1,7 @@
 import { getDetailsPageMeta } from '../decorators/details/getDetailsPageMeta';
 import { AnyClass, AnyClassConstructor } from '../types/AnyClass';
 import { useAppStore } from '../store/store';
+import { getListPageMeta } from '../decorators/list/getListPageMeta';
 
 export function updateDetailsData<T extends AnyClass>(
   model: AnyClassConstructor<T>,
@@ -16,3 +17,18 @@ export function updateDetailsData<T extends AnyClass>(
 
   useAppStore.getState().updateDetailsData(key, data[id]?.toString(), data);
 }
+
+export function updateListData<T extends AnyClass>(
+  model: AnyClassConstructor<T>,
+  data: Partial<T>
+) {
+  const { class: listClass } = getListPageMeta(model);
+  const key = listClass.key;
+  const id = listClass.primaryId;
+  console.log('updateListData', model, data, listClass);
+  if (!data[id]) {
+    throw new Error(`Id ${id} not found in data`);
+  }
+
+  useAppStore.getState().updateListData(key, data[id]?.toString(), data);
+}

package/src/store/store.ts

@@ -6,6 +6,8 @@ import { User } from '../types/User';
 interface AppState {
   detailsData: Record<string, Record<string, unknown>>;
   updateDetailsData: (key: string, id: string, data: unknown) => void;
+  listData: Record<string, Record<string, unknown>>;
+  updateListData: (key: string, id: string, data: unknown) => void;
   user: User | null;
   login: (user: User) => void;
   logout: () => void;
@@ -25,6 +27,11 @@ export const useAppStore = createWithEqualityFn<AppState>()(
             [key]: { ...get().detailsData[key], [id]: data },
           },
         }),
+      listData: {},
+      updateListData: (key: string, id: string, data: unknown) =>
+        set({
+          listData: { ...get().listData, [key]: { ...get().listData[key], [id]: data } },
+        }),
     }),
     {
       name: 'app-store-1',