proje-react-panel 1.3.3 → 1.4.1

package/src/components/DetailsPage.tsx

@@ -4,18 +4,21 @@ import { ErrorComponent } from './ErrorComponent';
 import { AnyClass, AnyClassConstructor } from '../types/AnyClass';
 import { getDetailsPageMeta } from '../decorators/details/getDetailsPageMeta';
 import { LoadingScreen } from './LoadingScreen';
+import { useAppStore } from '../store/store';
 
 interface DetailsPageProps<T extends AnyClass> {
   model: AnyClassConstructor<T>;
+  CustomHeader?: ({ data }: { data: T | null }) => React.ReactNode;
 }
 
-export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>) {
+export function DetailsPage<T extends AnyClass>({ model, CustomHeader }: DetailsPageProps<T>) {
   const id = useId();
   const { class: detailsClass, items } = useMemo(() => getDetailsPageMeta(model), [model]);
   const params = useParams();
   const [data, setData] = useState<T | null>(null);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
+  const allDetailsData = useAppStore(state => state.detailsData);
 
   useEffect(() => {
     detailsClass
@@ -29,6 +32,19 @@ export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>)
       .finally(() => setLoading(false));
   }, [params, detailsClass.getDetailsData, detailsClass]);
 
+  useEffect(() => {
+    setData(data => {
+      if (data) {
+        const detailsData =
+          allDetailsData?.[detailsClass.key]?.[data[detailsClass.primaryId] as string] ??
+          ({} as Partial<T>);
+
+        return { ...data, ...detailsData };
+      }
+      return null;
+    });
+  }, [detailsClass.key, detailsClass.primaryId, allDetailsData]);
+
   if (error) {
     return (
       <div className="error-container">
@@ -47,6 +63,11 @@ export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>)
 
   return (
     <div className="details-page">
+      {CustomHeader && (
+        <div className="details-header">
+          <CustomHeader data={data} />
+        </div>
+      )}
       {items.map(item => (
         <div key={item.name} className="details-item">
           <div className="item-label">{item.name}</div>

package/src/components/form/FormPage.tsx

@@ -160,10 +160,13 @@ export function FormPage<T extends AnyClass>({
     defaultValues: inputs.reduce(
       (acc, input) => {
         if (input.type === 'nested') {
-          acc[input.name] = input.nestedFields?.reduce((acc, nestedInput) => {
-            acc[nestedInput.name] = nestedInput.defaultValue;
-            return acc;
-          }, {} as Record<string, unknown>);
+          acc[input.name] = input.nestedFields?.reduce(
+            (acc, nestedInput) => {
+              acc[nestedInput.name] = nestedInput.defaultValue;
+              return acc;
+            },
+            {} as Record<string, unknown>
+          );
         } else {
           acc[input.name] = input.defaultValue;
         }
@@ -183,10 +186,17 @@ export function FormPage<T extends AnyClass>({
   useEffect(() => {
     if (formClass.getDetailsData) {
       formClass.getDetailsData(params as Record<string, string>).then(data => {
-        form.reset(data as T);
+        inputs.forEach(input => {
+          if (input.type === 'nested') {
+            //TODO: examine this
+            form.setValue(input.name as Path<T>, data[input.name]);
+          } else {
+            form.setValue(input.name as Path<T>, data[input.name]);
+          }
+        });
       });
     }
-  }, [params, form.reset, formClass.getDetailsData, formClass, form]);
+  }, [form, formClass, inputs, params]);
 
   return (
     <div className={`form-wrapper ${className ?? ''}`}>

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/details/Details.ts

@@ -6,9 +6,13 @@ export type GetDetailsDataFN<T> = (param: Record<string, string>) => Promise<T>;
 
 interface DetailsOptions<T extends AnyClass> {
   getDetailsData: GetDetailsDataFN<T>;
+  key?: string;
+  primaryId: keyof T;
 }
 
-export type DetailsConfiguration<T extends AnyClass> = DetailsOptions<T>;
+export type DetailsConfiguration<T extends AnyClass> = DetailsOptions<T> & {
+  key: string;
+};
 
 export function Details<T extends AnyClass>(options?: DetailsOptions<T>): ClassDecorator {
   return (target: object) => {
@@ -27,5 +31,6 @@ export function getDetailsConfiguration<T extends AnyClass>(
   }
   return {
     ...detailsConfiguration,
+    key: detailsConfiguration.key || entityClass.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

@@ -36,3 +36,7 @@ export { Layout } from './components/layout';
 export { Login } from './components/Login';
 export { login } from './utils/login';
 export { logout } from './utils/logout';
+
+//SERVICES
+export { updateDetailsData } from './services/DataService';
+export { updateListData } from './services/DataService';

package/src/services/DataService.ts

@@ -0,0 +1,34 @@
+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>,
+  data: Partial<T>
+) {
+  const { class: detailsClass } = getDetailsPageMeta(model);
+  const key = detailsClass.key;
+  const id = detailsClass.primaryId;
+  console.log('updateDetailsData', model, data, detailsClass);
+  if (!data[id]) {
+    throw new Error(`Id ${id} not found in data`);
+  }
+
+  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

@@ -4,6 +4,10 @@ import { shallow } from 'zustand/vanilla/shallow';
 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;
@@ -11,16 +15,30 @@ interface AppState {
 
 export const useAppStore = createWithEqualityFn<AppState>()(
   persist(
-    set => ({
+    (set, get) => ({
       user: null,
       login: (user: User) => set({ user }),
       logout: () => set({ user: null }),
+      detailsData: {},
+      updateDetailsData: (key: string, id: string, data: unknown) =>
+        set({
+          detailsData: {
+            ...get().detailsData,
+            [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',
       storage: createJSONStorage(() => localStorage),
       partialize: state => ({
         user: state.user,
+        detailsData: {},
       }),
     }
   ),

package/src/styles/details.scss

@@ -12,6 +12,10 @@
   max-width: 1200px;
   margin: 0 auto;
 
+  .details-header {
+    margin-bottom: 2rem;
+  }
+
   .details-item {
     background: var(--background-color);
     border-radius: 8px;