proje-react-panel 1.3.2 → 1.4.0

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/FormField.tsx

@@ -28,7 +28,7 @@ function NestedFormFields({ input, register, fieldName }: NestedFormFieldsProps)
   //TODO: inputOptions İnputResult seperate
   const data = form.getValues(fieldName);
   return (
-    <div>
+    <div className="nested-form-field-inner">
       {/* TODO: any is not a good solution, we need to find a better way to do this */}
       {Array.isArray(data) ? (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -101,7 +101,7 @@ export function FormField({ input, register, error, baseName }: FormFieldProps)
   }, [input, register, fieldName]);
 
   return (
-    <div className="form-field">
+    <div className={`form-field ${input.type === 'nested' ? 'nested-form-field' : ''}`}>
       {input.type !== 'hidden' && input.type !== 'checkbox' && (
         <Label htmlFor={fieldName} label={input.label} fieldName={fieldName} />
       )}

package/src/components/form/FormPage.tsx

@@ -159,7 +159,17 @@ export function FormPage<T extends AnyClass>({
     resolver: resolver as Resolver<T>,
     defaultValues: inputs.reduce(
       (acc, input) => {
-        acc[input.name] = input.defaultValue;
+        if (input.type === 'nested') {
+          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;
+        }
         return acc;
       },
       {} as Record<string, unknown>
@@ -176,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/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/index.ts

@@ -36,3 +36,6 @@ 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';

package/src/services/DataService.ts

@@ -0,0 +1,18 @@
+import { getDetailsPageMeta } from '../decorators/details/getDetailsPageMeta';
+import { AnyClass, AnyClassConstructor } from '../types/AnyClass';
+import { useAppStore } from '../store/store';
+
+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);
+}

package/src/store/store.ts

@@ -4,6 +4,8 @@ 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;
   user: User | null;
   login: (user: User) => void;
   logout: () => void;
@@ -11,16 +13,25 @@ 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 },
+          },
+        }),
     }),
     {
       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;

package/src/styles/form.scss

@@ -12,6 +12,22 @@
   .form-field {
     margin-bottom: 16px;
 
+    &.nested-form-field {
+      position: relative;
+      &:before {
+        display: block;
+        content: '';
+        position: absolute;
+        left: 12px;
+        top: 25px;
+        bottom: 4px;
+        width: 1px;
+        border-left: 1px dashed #444;
+      }
+    }
+    .nested-form-field-inner {
+      margin-left: 42px;
+    }
     input[type='text'],
     input[type='password'],
     input[type='email'],

package/src/styles/login.scss

@@ -3,9 +3,11 @@
   justify-content: center;
   align-items: center;
   min-height: 100vh;
+  max-width: 100vw;
+  max-height: 100vh;
   background: linear-gradient(135deg, #1a1a1a 0%, #2d3436 100%);
-
-  form {
+  padding: 0;
+   form {
     width: 400px;
     background: #1a1a1a;
     border-radius: 8px;