proje-react-panel 1.1.3 → 1.1.5

package/src/api/CrudApi.ts

@@ -1,59 +1,65 @@
 interface FetchOptions {
-	token: string;
-	baseUrl: string;
+  token: string;
+  baseUrl: string;
 }
 
 export const CrudApi = {
-	getList: (options: FetchOptions, api: string) => {
-		return fetch(`${options.baseUrl}/${api}`, {
-			method: "GET",
-			headers: { "Content-Type": "application/json", Authorization: `Bearer ${options.token}` },
-		}).then((res) => {
-			if (res.ok) {
-				return res.json();
-			}
-			throw res;
-		});
-	},
-	create: (options: FetchOptions, api: string, data: any) => {
-		const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
-		// Don't set Content-Type for FormData
-		if (!(data instanceof FormData)) {
-			headers["Content-Type"] = "application/json";
-		}
+  getList: (options: FetchOptions, api: string) => {
+    return fetch(`${options.baseUrl}/${api}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
+    }).then(res => {
+      if (res.ok) {
+        return res.json();
+      }
+      throw res;
+    });
+  },
+  //TODO: fix this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  create: (options: FetchOptions, api: string, data: any) => {
+    const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
+    // Don't set Content-Type for FormData
+    if (!(data instanceof FormData)) {
+      headers['Content-Type'] = 'application/json';
+    }
 
-		return fetch(`${options?.baseUrl ?? ""}/${api}`, {
-			method: "POST",
-			headers,
-			body: data instanceof FormData ? data : JSON.stringify(data),
-		}).then((res) => res.json());
-	},
-	details: (options: FetchOptions, api: string, id: any) => {
-		return fetch(`${options?.baseUrl ?? ""}/${api}/${id}`, {
-			method: "GET",
-			headers: { "Content-Type": "application/json", Authorization: `Bearer ${options.token}` },
-		}).then((res) => {
-			return res.json();
-		});
-	},
-	edit: (options: FetchOptions, api: string, data: any) => {
-		const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
-		// Don't set Content-Type for FormData
-		if (!(data instanceof FormData)) {
-			headers["Content-Type"] = "application/json";
-		}
-		return fetch(`${options?.baseUrl ?? ""}/${api}/${data.id}`, {
-			method: "PUT",
-			headers,
-			body: data instanceof FormData ? data : JSON.stringify(data),
-		}).then((res) => res.json());
-	},
-	delete: (options: FetchOptions, api: string, id: string) => {
-		return fetch(`${options?.baseUrl ?? ""}/${api}/${id}`, {
-			method: "DELETE",
-			headers: { "Content-Type": "application/json", Authorization: `Bearer ${options.token}` },
-		}).then((res) => {
-			return res.clone().json();
-		});
-	},
+    return fetch(`${options?.baseUrl ?? ''}/${api}`, {
+      method: 'POST',
+      headers,
+      body: data instanceof FormData ? data : JSON.stringify(data),
+    }).then(res => res.json());
+  },
+  //TODO: fix this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  details: (options: FetchOptions, api: string, id: any) => {
+    return fetch(`${options?.baseUrl ?? ''}/${api}/${id}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
+    }).then(res => {
+      return res.json();
+    });
+  },
+  //TODO: fix this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  edit: (options: FetchOptions, api: string, data: any) => {
+    const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
+    // Don't set Content-Type for FormData
+    if (!(data instanceof FormData)) {
+      headers['Content-Type'] = 'application/json';
+    }
+    return fetch(`${options?.baseUrl ?? ''}/${api}/${data.id}`, {
+      method: 'PUT',
+      headers,
+      body: data instanceof FormData ? data : JSON.stringify(data),
+    }).then(res => res.json());
+  },
+  delete: (options: FetchOptions, api: string, id: string) => {
+    return fetch(`${options?.baseUrl ?? ''}/${api}/${id}`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
+    }).then(res => {
+      return res.clone().json();
+    });
+  },
 };

package/src/components/DetailsPage.tsx

@@ -1,18 +1,19 @@
 import { useParams } from 'react-router';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { ErrorComponent } from './ErrorComponent';
-import { AnyClass } from '../types/AnyClass';
+import { AnyClass, AnyClassConstructor } from '../types/AnyClass';
 import { getDetailsPageMeta } from '../decorators/details/getDetailsPageMeta';
 import { LoadingScreen } from './LoadingScreen';
 
 interface DetailsPageProps<T extends AnyClass> {
-  model: new (...args: any[]) => T;
+  model: AnyClassConstructor<T>;
 }
 
 export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>) {
+  const id = useId();
   const { class: detailsClass, items } = useMemo(() => getDetailsPageMeta(model), [model]);
   const params = useParams();
-  const [data, setData] = useState<any>(null);
+  const [data, setData] = useState<T | null>(null);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
 
@@ -20,16 +21,18 @@ export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>)
     detailsClass
       .getDetailsData(params as Record<string, string>)
       .then(data => {
-        setData(data);
+        //TODO: any is not a good solution, we need to find a better way to do this
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setData(data as any);
       })
       .catch(setError)
       .finally(() => setLoading(false));
-  }, [params, detailsClass?.getDetailsData]);
+  }, [params, detailsClass.getDetailsData, detailsClass]);
 
   if (error) {
     return (
       <div className="error-container">
-        <ErrorComponent error={error} />
+        <ErrorComponent error={error} id={id} />
       </div>
     );
   }
@@ -37,7 +40,7 @@ export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>)
   if (loading) {
     return (
       <div className="loading-container">
-        <LoadingScreen />
+        <LoadingScreen id={id} />
       </div>
     );
   }
@@ -47,7 +50,7 @@ export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>)
       {items.map(item => (
         <div key={item.name} className="details-item">
           <div className="item-label">{item.name}</div>
-          <div className="item-value">{data[item.name]}</div>
+          <div className="item-value">{data?.[item.name]}</div>
         </div>
       ))}
     </div>

package/src/components/ErrorComponent.tsx

@@ -1,35 +1,38 @@
-import React from "react";
+import React from 'react';
 //TODO: create, edit, details
-export function ErrorComponent({ error }: { error: unknown | Response }) {
-	const getErrorMessage = (errorInner: unknown | Response) => {
-		if (errorInner instanceof Response) {
-			switch (errorInner.status) {
-				case 400:
-					return "Bad Request: The request was invalid or malformed.";
-				case 401:
-					return "Unauthorized: Please log in to access this resource.";
-				case 404:
-					return "Not Found: The requested resource could not be found.";
-				case 403:
-					return "Forbidden: You don't have permission to access this resource.";
-				case 500:
-					return "Internal Server Error: Something went wrong on our end.";
-				default:
-					return `Error ${errorInner.status}: ${errorInner.statusText || "Something went wrong."}`;
-			}
-		}
-		return (errorInner as { message?: string })?.message || "Something went wrong. Please try again later.";
-	};
-
-	return (
-		<div  className="error-container">
-			<div className="error-icon">
-				<i className="fa fa-exclamation-circle" />
-			</div>
-			<div className="error-content">
-				<h3>Error Occurred</h3>
-				<p>{getErrorMessage(error)}</p>
-			</div>
-		</div>
-	);
+export function ErrorComponent({ error, id }: { error: unknown | Response; id: string }) {
+  const getErrorMessage = (errorInner: unknown | Response) => {
+    if (errorInner instanceof Response) {
+      switch (errorInner.status) {
+        case 400:
+          return 'Bad Request: The request was invalid or malformed.';
+        case 401:
+          return 'Unauthorized: Please log in to access this resource.';
+        case 404:
+          return 'Not Found: The requested resource could not be found.';
+        case 403:
+          return "Forbidden: You don't have permission to access this resource.";
+        case 500:
+          return 'Internal Server Error: Something went wrong on our end.';
+        default:
+          return `Error ${errorInner.status}: ${errorInner.statusText || 'Something went wrong.'}`;
+      }
+    }
+    return (
+      (errorInner as { message?: string })?.message ||
+      'Something went wrong. Please try again later.'
+    );
+  };
+//Note: key added for react-router bug. Page is not reload 
+  return (
+    <div key={id} className="error-container">
+      <div className="error-icon">
+        <i className="fa fa-exclamation-circle" />
+      </div>
+      <div className="error-content">
+        <h3>Error Occurred</h3>
+        <p>{getErrorMessage(error)}</p>
+      </div>
+    </div>
+  );
 }

package/src/components/LoadingScreen.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
-export function LoadingScreen() {
+export function LoadingScreen({ id }: { id: string }) {
+  //Note: key added for react-router bug. Page is not reload
   return (
-    <div className="loading-screen">
+    <div key={id} className="loading-screen">
       <div className="loading-container">
         <div className="loading-spinner"></div>
         <div className="loading-text">Loading...</div>
       </div>
     </div>
   );
-}
+}

package/src/components/Login.tsx

@@ -9,12 +9,14 @@ interface LoginFormData {
   password: string;
 }
 
-export type OnLogin = {
+export interface OnLogin {
   login: (username: string, password: string) => Promise<LoginResponse>;
-};
+}
 
 interface LoginResponse {
-  user: any; // Replace with proper user type if available
+  //TODO: any is not a good solution, we need to find a better way to do this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  user: any;
   token: string;
 }
 
@@ -33,7 +35,7 @@ export function Login({ onLogin }: LoginProps) {
     onLogin.login(data.username, data.password).then((dataInner: LoginResponse) => {
       const { user, token } = dataInner;
       localStorage.setItem('token', token);
-      useAppStore.setState({ user });
+      useAppStore.getState().login(user);
       navigate('/');
     });
   };
@@ -52,6 +54,9 @@ export function Login({ onLogin }: LoginProps) {
               label: 'Username',
               placeholder: 'Enter your username',
               type: 'input',
+              inputType: 'text',
+              includeInCSV: true,
+              includeInJSON: true,
             }}
             register={register}
             error={errors.username}
@@ -63,6 +68,8 @@ export function Login({ onLogin }: LoginProps) {
               inputType: 'password',
               placeholder: 'Enter your password',
               type: 'input',
+              includeInCSV: true,
+              includeInJSON: true,
             }}
             register={register}
             error={errors.password}

package/src/components/Panel.tsx

@@ -1,11 +1,10 @@
-import React, { useEffect } from 'react';
-import { initPanel } from '../initPanel';
-import { InitPanelOptions } from '../types/initPanelOptions';
+import React from 'react';
 import { ErrorBoundary } from './ErrorBoundary';
+import { ToastContainer } from 'react-toastify';
 
-type AppProps = {
+interface AppProps {
   children: React.ReactNode;
-};
+}
 
 export function Panel({ children }: AppProps) {
   /*useEffect(() => {
@@ -13,5 +12,10 @@ export function Panel({ children }: AppProps) {
     initPanel(options);
   }, [init]);*/
 
-  return <ErrorBoundary>{children}</ErrorBoundary>;
+  return (
+    <ErrorBoundary>
+      {children}
+      <ToastContainer />
+    </ErrorBoundary>
+  );
 }

package/src/components/form/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { InputConfiguration } from '../../decorators/form/Input';
 import { useFormContext } from 'react-hook-form';
 import { Label } from './Label';

package/src/components/form/FormField.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { InputConfiguration, InputOptions } from '../../decorators/form/Input';
+import React from 'react';
+import { InputConfiguration } from '../../decorators/form/Input';
 import { useFormContext, UseFormRegister } from 'react-hook-form';
 import { Uploader } from './Uploader';
 import { Checkbox } from './Checkbox';
@@ -8,16 +8,17 @@ import { Select } from './Select';
 
 interface FormFieldProps {
   input: InputConfiguration;
+  //TODO: any is not a good solution, we need to find a better way to do this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register: UseFormRegister<any>;
   error?: { message?: string };
   baseName?: string;
-  onSelectPreloader?: (
-    inputOptions: InputConfiguration
-  ) => Promise<{ label: string; value: string }[]>;
 }
 
 interface NestedFormFieldsProps {
   input: InputConfiguration;
+  //TODO: any is not a good solution, we need to find a better way to do this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register: UseFormRegister<any>;
 }
 
@@ -25,8 +26,11 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
   const form = useFormContext();
   //TODO: inputOptions İnputResult seperate
   const data = form.getValues(input.name!);
+  console.log('--_>', data, input, input.nestedFields);
   return (
     <div>
+      {/* TODO: any is not a good solution, we need to find a better way to do this */}
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       {data?.map((value: any, index: number) => (
         <div key={index}>
           {input.nestedFields?.map((nestedInput: InputConfiguration) => (
@@ -37,7 +41,7 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
               register={register}
               error={
                 input.name
-                  ? { message: (form.formState.errors[input.name] as any)?.message }
+                  ? { message: (form.formState.errors[input.name] as { message: string })?.message }
                   : undefined
               }
             />
@@ -48,8 +52,8 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
   );
 }
 
-export function FormField({ input, register, error, baseName, onSelectPreloader }: FormFieldProps) {
-  const fieldName = (baseName ? baseName.toString() + '.' : '') + input.name || '';
+export function FormField({ input, register, error, baseName }: FormFieldProps) {
+  const fieldName: string = (baseName ? baseName.toString() + '.' : '') + input.name || '';
   const renderField = () => {
     switch (input.type) {
       case 'textarea':
@@ -70,7 +74,7 @@ export function FormField({ input, register, error, baseName, onSelectPreloader
       case 'nested':
         return <NestedFormFields input={input} register={register} />;
       default:
-        null;
+        return null;
     }
   };
 

package/src/components/form/FormHeader.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AnyClass } from '../../types/AnyClass';
+import { FormUtils } from './FormPage';
+
+interface FormHeaderProps<T extends AnyClass> {
+  title?: string;
+  header?: (utils: FormUtils<T>) => React.ReactNode;
+  utils: FormUtils<T>;
+}
+
+export function FormHeader<T extends AnyClass>({ utils, header, title }: FormHeaderProps<T>) {
+  return (
+    <div className="form-header">
+      {title && <h2 className="form-title">{title}</h2>}
+      <div className="form-actions">{header ? header(utils) : null}</div>
+    </div>
+  );
+}

package/src/components/form/FormPage.tsx

@@ -2,30 +2,171 @@ import React, { useEffect, useMemo } from 'react';
 import { InnerForm } from './InnerForm';
 import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { useParams } from 'react-router';
-import { FormProvider, Resolver, useForm } from 'react-hook-form';
+import { FormProvider, Resolver, useForm, UseFormReturn, Path, PathValue } from 'react-hook-form';
 import { getFormPageMeta } from '../../decorators/form/getFormPageMeta';
+import { FormHeader } from './FormHeader';
+import { InputConfiguration } from '../../decorators/form/Input';
+
+export interface FormUtils<T extends AnyClass> {
+  getValues: () => T;
+  setValues: (values: Partial<T>) => void;
+  toJSON: (values: Partial<T>) => string;
+  fromJSON: (json: string) => Partial<T>;
+  export: (data: string, extension: 'txt' | 'json' | 'csv') => void;
+  import: () => Promise<string>;
+}
 
 export interface FormPageProps<T extends AnyClass> {
   model: AnyClassConstructor<T>;
+  title?: string;
+  documentTitle?: string;
+  header?: (utils: FormUtils<T>) => React.ReactNode;
 }
 
-export function FormPage<T extends AnyClass>({ model }: FormPageProps<T>) {
+function useCreateFormUtils<T extends AnyClass>(
+  inputs: InputConfiguration[],
+  form: UseFormReturn<T>
+): FormUtils<T> {
+  return {
+    getValues: form.getValues,
+    setValues: (values: Partial<T>) => {
+      Object.entries(values).forEach(([key, value]) => {
+        const input = inputs.find(input => input.name === key);
+        //form.reset(); //TODO: if there is default fix it??
+        if (input) {
+          if (input.nestedFields) {
+            if (Array.isArray(value)) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const innerArray: Record<string, any>[] = [];
+              value.forEach(nestedValue => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const innerObject: Record<string, any> = {};
+                input.nestedFields!.forEach(nestedInput => {
+                  if (nestedInput.includeInJSON) {
+                    innerObject[nestedInput.name] = nestedValue[nestedInput.name];
+                  }
+                });
+                innerArray.push(innerObject);
+              });
+              form.setValue(key as Path<T>, innerArray as PathValue<T, Path<T>>);
+            } else {
+              console.warn('Non-array nested fields are not supported for json conversion', value);
+            }
+          } else {
+            form.setValue(key as Path<T>, value);
+          }
+        }
+      });
+    },
+    toJSON: (values: Partial<T>) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const jsonData: Record<string, any> = {};
+      Object.entries(values).forEach(([key, value]) => {
+        const input = inputs.find(input => input.name === key);
+        //form.reset(); //TODO: if there is default fix it??
+        if (input && input.includeInJSON) {
+          if (input.nestedFields) {
+            jsonData[key] = [];
+            if (Array.isArray(value)) {
+              //TODO: fix this
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              value.forEach((innerValue: any) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const nestedObject: Record<string, any> = {};
+                jsonData[key].push(nestedObject);
+                Object.entries(innerValue).forEach(([nestedKey, nestedValue]) => {
+                  const nestedInput = input.nestedFields!.find(
+                    nestedInput => nestedInput.name === nestedKey
+                  );
+                  if (nestedInput && nestedInput.includeInJSON) {
+                    nestedObject[nestedKey] = nestedValue;
+                  }
+                });
+              });
+            } else {
+              console.warn('Non-array nested fields are not supported for json conversion', value);
+            }
+          } else {
+            jsonData[key] = value;
+          }
+        }
+      });
+      return JSON.stringify(jsonData, null, 2);
+    },
+    fromJSON: (json: string): Partial<T> => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const jsonObject: Record<string, any> = {};
+      const jsonData = JSON.parse(json);
+      Object.entries(jsonData).forEach(([key, value]) => {
+        const input = inputs.find(input => input.name === key);
+        if (input && input.includeInJSON) {
+          jsonObject[key] = value;
+        }
+      });
+      return jsonObject as Partial<T>;
+    },
+    export: (data: string, extension: 'txt' | 'json' | 'csv') => {
+      const blob = new Blob([data], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `form-data.${extension}`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    },
+    import: () => {
+      return new Promise<string>(resolve => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.txt,.json,.csv';
+        input.onchange = e => {
+          const file = (e.target as HTMLInputElement).files?.[0];
+          if (file) {
+            const reader = new FileReader();
+            reader.onload = event => {
+              resolve(event.target?.result as string);
+            };
+            reader.readAsText(file);
+          }
+        };
+        input.click();
+      });
+    },
+  };
+}
+
+export function FormPage<T extends AnyClass>({
+  model,
+  title,
+  documentTitle,
+  header,
+}: FormPageProps<T>) {
   const { class: formClass, inputs, resolver } = useMemo(() => getFormPageMeta(model), [model]);
+  const params = useParams();
   const form = useForm<T>({
     resolver: resolver as Resolver<T>,
   });
+  const utils = useCreateFormUtils(inputs, form);
+
+  useEffect(() => {
+    if (documentTitle) {
+      document.title = documentTitle;
+    }
+  }, [documentTitle]);
 
-  const params = useParams();
   useEffect(() => {
     if (formClass.getDetailsData) {
       formClass.getDetailsData(params as Record<string, string>).then(data => {
-        form.reset(data as any);
+        form.reset(data as T);
       });
     }
-  }, [params, form.reset, formClass.getDetailsData]);
+  }, [params, form.reset, formClass.getDetailsData, formClass, form]);
 
   return (
     <FormProvider {...form}>
+      <FormHeader title={title} utils={utils} header={header} />
       <InnerForm inputs={inputs} formClass={formClass} />
     </FormProvider>
   );