proje-react-panel 1.0.17 → 1.1.0

package/src/components/{components → form}/FormField.tsx

@@ -1,19 +1,22 @@
-import React from 'react';
-import { InputOptions } from '../../decorators/form/Input';
-import { Label } from './Label';
+import React, { useEffect, useState } from 'react';
+import { InputConfiguration, InputOptions } from '../../decorators/form/Input';
 import { useFormContext, UseFormRegister } from 'react-hook-form';
-import { ImageUploader } from './ImageUploader';
+import { Uploader } from './Uploader';
 import { Checkbox } from './Checkbox';
+import { Label } from './Label';
 
 interface FormFieldProps {
-  input: InputOptions;
+  input: InputConfiguration;
   register: UseFormRegister<any>;
   error?: { message?: string };
   baseName?: string;
+  onSelectPreloader?: (
+    inputOptions: InputConfiguration
+  ) => Promise<{ label: string; value: string }[]>;
 }
 
 interface NestedFormFieldsProps {
-  input: InputOptions;
+  input: InputConfiguration;
   register: UseFormRegister<any>;
 }
 
@@ -25,7 +28,7 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
     <div>
       {data?.map((value: any, index: number) => (
         <div key={index}>
-          {input.nestedFields?.map((nestedInput: InputOptions) => (
+          {input.nestedFields?.map((nestedInput: InputConfiguration) => (
             <FormField
               key={nestedInput.name?.toString() ?? ''}
               baseName={input.name + '[' + index + ']'}
@@ -44,39 +47,42 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
   );
 }
 
-export function FormField({ input, register, error, baseName }: FormFieldProps) {
+export function FormField({ input, register, error, baseName, onSelectPreloader }: FormFieldProps) {
   const fieldName = (baseName ? baseName.toString() + '.' : '') + input.name || '';
+  const [options, setOptions] = useState<{ label: string; value: string }[]>(input.options || []);
+  useEffect(() => {
+    if (input.optionsPreload && onSelectPreloader) {
+      onSelectPreloader(input).then(option => {
+        setOptions(option);
+      });
+    }
+  }, [input]);
   const renderField = () => {
     switch (input.type) {
       case 'textarea':
-        return <textarea {...register(fieldName)} placeholder={input.placeholder} id={fieldName} />;
+        return <textarea {...register(fieldName)} placeholder={input.placeholder} />;
       case 'select':
         return (
-          <select {...register(fieldName)} id={fieldName}>
+          <select {...register(fieldName)}>
             <option value="">Select {fieldName}</option>
-            {input.options?.map(option => (
+            {options?.map(option => (
               <option key={option.value} value={option.value}>
                 {option.label}
               </option>
             ))}
           </select>
         );
-      case 'input': { 
+      case 'input': {
         return (
-          <input
-            type={input.inputType}
-            {...register(fieldName)}
-            placeholder={input.placeholder}
-            id={fieldName}
-          />
+          <input type={input.inputType} {...register(fieldName)} placeholder={input.placeholder} />
         );
       }
       case 'file-upload':
-        return <ImageUploader />;
+        return <Uploader input={input} />;
       case 'checkbox':
-        return <Checkbox {...register(fieldName)} id={fieldName} />;
+        return <Checkbox input={input} />;
       case 'hidden':
-        return <input type="hidden" {...register(fieldName)} id={fieldName} />;
+        return <input type="hidden" {...register(fieldName)} />;
       case 'nested':
         return <NestedFormFields input={input} register={register} />;
       default:
@@ -86,7 +92,9 @@ export function FormField({ input, register, error, baseName }: FormFieldProps)
 
   return (
     <div className="form-field">
-      <Label htmlFor={fieldName} label={input.label} fieldName={fieldName} />
+      {input.type !== 'checkbox' && (
+        <Label htmlFor={fieldName} label={input.label} fieldName={fieldName} />
+      )}
       {renderField()}
       {error && <span className="error-message">{error.message}</span>}
     </div>

package/src/components/form/FormPage.tsx

@@ -0,0 +1,32 @@
+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 { getFormPageMeta } from '../../decorators/form/getFormPageMeta';
+
+export interface FormPageProps<T extends AnyClass> {
+  model: AnyClassConstructor<T>;
+}
+
+export function FormPage<T extends AnyClass>({ model }: FormPageProps<T>) {
+  const { class: formClass, inputs, resolver } = useMemo(() => getFormPageMeta(model), [model]);
+  const form = useForm<T>({
+    resolver: resolver as Resolver<T>,
+  });
+
+  const params = useParams();
+  useEffect(() => {
+    if (formClass.getDetailsData) {
+      formClass.getDetailsData(params as Record<string, string>).then(data => {
+        form.reset(data as any);
+      });
+    }
+  }, [params, form.reset, formClass.getDetailsData]);
+
+  return (
+    <FormProvider {...form}>
+      <InnerForm inputs={inputs} formClass={formClass} />
+    </FormProvider>
+  );
+}

package/src/components/form/InnerForm.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { FormProvider, useForm, useFormContext, UseFormReturn } from 'react-hook-form';
+import { InputConfiguration } from '../../decorators/form/Input';
+import { FormField } from './FormField';
+import { useNavigate } from 'react-router';
+import { FormConfiguration } from '../../decorators/form/Form';
+import { AnyClass } from '../../types/AnyClass';
+
+interface InnerFormProps<T extends AnyClass> {
+  inputs: InputConfiguration[];
+  formClass: FormConfiguration<T>;
+}
+
+export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormProps<T>) {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  //TODO: any is not a good solution, we need to find a better way to do this
+  const formRef = useRef<HTMLFormElement>(null);
+  const navigate = useNavigate();
+  const form = useFormContext<T>();
+
+  return (
+    <div className="form-wrapper">
+      <form
+        ref={formRef}
+        onSubmit={form.handleSubmit(
+          async (dataForm: T) => {
+            try {
+              const data =
+                formClass.type === 'json'
+                  ? dataForm
+                  : (() => {
+                      const formData = new FormData(formRef.current!);
+                      for (const key in dataForm) {
+                        if (!formData.get(key)) {
+                          formData.append(key, dataForm[key]);
+                        }
+                      }
+                      return formData;
+                    })();
+              await formClass.onSubmit(data);
+              setErrorMessage(null);
+              if (formClass.redirectBackOnSuccess) {
+                navigate(-1);
+              }
+            } catch (error: any) {
+              const message =
+                error?.response?.data?.message ||
+                (error instanceof Error ? error.message : 'An error occurred');
+              setErrorMessage(message);
+              console.error(error);
+            }
+          },
+          (errors, event) => {
+            //TOOD: put error if useer choose global error
+            console.log('error creating creation', errors, event);
+          }
+        )}
+      >
+        <div>
+          {errorMessage && (
+            <div className="error-message" style={{ color: 'red', marginBottom: '1rem' }}>
+              {errorMessage}
+            </div>
+          )}
+          {inputs?.map((input: InputConfiguration) => (
+            <FormField
+              key={input.name || ''}
+              input={input}
+              register={form.register}
+              onSelectPreloader={formClass.onSelectPreloader}
+              error={
+                input.name
+                  ? { message: (form.formState.errors[input.name as keyof T] as any)?.message }
+                  : undefined
+              }
+            />
+          ))}
+          <button type="submit" className="submit-button">
+            Submit
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/src/components/form/Label.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  htmlFor: string;
+  label?: string;
+  fieldName: string;
+  children?: React.ReactNode;
+}
+
+export function Label({ label, fieldName, children, ...props }: LabelProps) {
+  return (
+    <label {...props} className={'label ' + props.className}>
+      {
+        <span>
+          {label ? label + ':' : fieldName.charAt(0).toUpperCase() + fieldName.slice(1) + ':'}
+        </span>
+      }
+      {children}
+    </label>
+  );
+}

package/src/components/form/Uploader.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { useForm, Controller, useFormContext } from 'react-hook-form';
+import { InputOptions } from '../../decorators/form/Input';
+
+interface UploaderProps {
+  input: InputOptions;
+  maxLength?: number;
+}
+
+export function Uploader({ input, maxLength = 1 }: UploaderProps) {
+  const form = useFormContext();
+  const [files, setFiles] = useState<File[]>([]);
+  const id = input.name!;
+
+  useEffect(() => {
+    // Update form value whenever files change
+    form.setValue(input.name + '_files', files.length > 0);
+  }, [files, form, input.name]);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (maxLength > 1) {
+      throw new Error('TODO: Multiple file upload is not implemented yet');
+    }
+
+    const fileList = e.target.files;
+    if (fileList) {
+      const filesArray = Array.from(fileList);
+      setFiles(prevFiles => [...prevFiles, ...filesArray]);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    setFiles(prevFiles => prevFiles.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="uploader-container">
+      <button
+        type="button"
+        className="uploader-button"
+        onClick={() => document.getElementById(id)?.click()}
+      >
+        Upload Files
+      </button>
+      <input id={id} hidden name={input.name} onChange={onChange} type="file" multiple />
+      {files.length > 0 && (
+        <div className="uploader-files">
+          {files.map((file, index) => (
+            <div key={`${file.name}-${index}`} className="uploader-file">
+              <p>{file.name}</p>
+              <p>{(file.size / 1024 / 1024).toFixed(2)} MB</p>
+              <p>{file.type || 'Unknown type'}</p>
+              <button
+                onClick={() => removeFile(index)}
+                className="remove-file-button"
+                type="button"
+              >
+                Remove
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/layout/Layout.tsx

@@ -1,38 +1,35 @@
-import React from "react";
-import { SideBar } from "./SideBar";
-import { ScreenCreatorData } from "../../types/ScreenCreatorData";
-import { useAppStore } from "../../store/store";
-import { useNavigate } from "react-router";
+import React from 'react';
+import { SideBar } from './SideBar';
+import { useAppStore } from '../../store/store';
+import { useNavigate } from 'react-router';
 
 export function Layout<IconType>({
-	children,
-	menu,
-	getIcons,
-	logout,
+  children,
+  menu,
+  getIcons,
+  logout,
 }: {
-	children?: React.ReactNode;
-	menu?: (screens: Record<string, ScreenCreatorData>) => { name: string; path: string; iconType: IconType }[];
-	getIcons?: (iconType: IconType) => React.ReactNode;
-	logout?: () => void;
+  children?: React.ReactNode;
+  menu?: () => { name: string; path: string; iconType: IconType }[];
+  getIcons?: (iconType: IconType) => React.ReactNode;
+  logout?: (type: 'redirect' | 'logout') => void;
 }) {
-	const { user, screenPaths } = useAppStore((s) => ({
-		user: s.user,
-		screenPaths: s.screenPaths,
-	}));
-	const data = useAppStore();
-	const navigate = useNavigate();
-	if (!user) {
-		navigate(screenPaths.login);
-	}
+  const { user } = useAppStore(s => ({
+    user: s.user,
+  }));
+  const navigate = useNavigate();
+  if (!user) {
+    logout?.('redirect');
+  }
 
-	return (
-		<div className="layout">
-			<SideBar onLogout={() => {
-				if (logout) {
-					logout();
-				}
-			}} menu={menu} getIcons={getIcons} />
-			<main className="content">{children}</main>
-		</div>
-	);
+  return (
+    <div className="layout">
+      <SideBar
+        onLogout={logout}
+        menu={menu}
+        getIcons={getIcons}
+      />
+      <main className="content">{children}</main>
+    </div>
+  );
 }

package/src/components/layout/SideBar.tsx

@@ -1,11 +1,7 @@
 import React, { useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router';
-import { ScreenCreatorData } from '../../types/ScreenCreatorData';
-import { useAppStore } from '../../store/store';
 
-type GetMenuFunction<IconType> = (
-  screens: Record<string, ScreenCreatorData>
-) => { name: string; path: string; iconType: IconType }[];
+type GetMenuFunction<IconType> = () => { name: string; path: string; iconType: IconType }[];
 
 type GetIconsFunction<IconType> = (iconType: IconType) => React.ReactNode;
 
@@ -16,12 +12,8 @@ export function SideBar<IconType>({
 }: {
   menu?: GetMenuFunction<IconType>;
   getIcons?: GetIconsFunction<IconType>;
-  onLogout?: () => void;
+  onLogout?: (type: 'redirect' | 'logout') => void;
 }) {
-  const { screens, screenPaths } = useAppStore(s => ({
-    screens: s.screens ?? {},
-    screenPaths: s.screenPaths ?? {},
-  }));
   const [isOpen, setIsOpen] = useState(true);
   const location = useLocation();
   const navigate = useNavigate();
@@ -54,7 +46,7 @@ export function SideBar<IconType>({
         {isOpen ? '<' : '>'}
       </button>
       <nav className="nav-links">
-        {menu?.(screens).map((item, index) => (
+        {menu?.().map((item, index) => (
           <Link
             key={index}
             to={item.path}
@@ -72,8 +64,7 @@ export function SideBar<IconType>({
             className="logout-button"
             onClick={() => {
               if (onLogout) {
-                onLogout();
-                navigate(screenPaths.login);
+                onLogout('logout');
               }
             }}
             aria-label="Logout"

package/src/components/list/CellField.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ImageCellOptions } from '../../decorators/list/cells/ImageCell';
+import { AnyClass } from '../../types/AnyClass';
+import { ExtendedCellTypes } from '../../decorators/list/Cell';
+import CheckIcon from '../../assets/icons/svg/check.svg';
+import CrossIcon from '../../assets/icons/svg/cross.svg';
+
+interface CellFieldProps<T extends AnyClass> {
+  cellOptions: any; // TODO: Create proper type for cellOptions
+  item: T;
+  value: any;
+}
+
+export function CellField<T extends AnyClass>({ cellOptions, item, value }: CellFieldProps<T>) {
+  let render = value ?? '-'; // Default value if the field is undefined or null
+
+  switch (cellOptions.type as ExtendedCellTypes) {
+    case 'boolean': {
+      render = value ? <CheckIcon className="icon icon-true" /> : <CrossIcon className="icon icon-false" />;
+      break;
+    }
+    case 'date':
+      if (value) {
+        const date = new Date(value);
+        render = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1)
+          .toString()
+          .padStart(2, '0')}/${date.getFullYear()} ${date
+          .getHours()
+          .toString()
+          .padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+      }
+      break;
+
+    case 'image': {
+      const imageCellOptions = cellOptions as ImageCellOptions;
+      render = (
+        <img
+          width={100}
+          height={100}
+          src={imageCellOptions.baseUrl + value}
+          style={{ objectFit: 'contain' }}
+        />
+      );
+      break;
+    }
+    case 'uuid':
+      if (value && typeof value === 'string' && value.length >= 6) {
+        render = `${value.slice(0, 3)}...${value.slice(-3)}`;
+      }
+      break;
+    default:
+      render = value ? value.toString() : (cellOptions?.placeHolder ?? '-');
+      break;
+  }
+
+  /*
+  if (cellOptions.linkTo) {
+    render = <Link to={cellOptions.linkTo(item)}>{formattedValue}</Link>;
+  }
+  */
+
+  return <td key={cellOptions.name}>{render}</td>;
+}

package/src/components/list/Datagrid.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { EmptyList } from './EmptyList';
+import SearchIcon from '../../assets/icons/svg/search.svg';
+import PencilIcon from '../../assets/icons/svg/pencil.svg';
+import TrashIcon from '../../assets/icons/svg/trash.svg';
+import { ListPageMeta } from '../../decorators/list/getListPageMeta';
+import { ImageCellOptions } from '../../decorators/list/cells/ImageCell';
+import { AnyClass } from '../../types/AnyClass';
+import { CellField } from './CellField';
+
+interface DatagridProps<T extends AnyClass> {
+  data: T[];
+  listPageMeta: ListPageMeta<T>;
+  onRemoveItem?: (item: T) => Promise<void>;
+}
+
+export function Datagrid<T extends AnyClass>({
+  data,
+  listPageMeta,
+  onRemoveItem,
+}: DatagridProps<T>) {
+  const cells = listPageMeta.cells;
+  const listGeneralCells = data?.[0]
+    ? typeof listPageMeta.class.cells === 'function'
+      ? listPageMeta.class.cells?.(data[0])
+      : listPageMeta.class.cells
+    : null;
+
+  return (
+    <div className="datagrid">
+      {!data || data.length === 0 ? (
+        <EmptyList />
+      ) : (
+        <table className="datagrid-table">
+          <thead>
+            <tr>
+              {cells.map(cellOptions => (
+                <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
+              ))}
+              {listGeneralCells?.details && <th>Details</th>}
+              {listGeneralCells?.edit && <th>Edit</th>}
+              {listGeneralCells?.delete && <th>Delete</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((item, index) => {
+              const listCells = item
+                ? typeof listPageMeta.class.cells === 'function'
+                  ? listPageMeta.class.cells?.(item)
+                  : listPageMeta.class.cells
+                : null;
+              return (
+                <tr key={index}>
+                  {cells.map(cellOptions => {
+                    // @ts-ignore
+                    const value = item[cellOptions.name];
+                    return (
+                      <CellField
+                        key={cellOptions.name}
+                        cellOptions={cellOptions}
+                        item={item}
+                        value={value}
+                      />
+                    );
+                  })}
+                  {listCells?.details && (
+                    <td>
+                      <Link to={listCells.details.path} className="util-cell-link">
+                        <SearchIcon className="icon icon-search" />
+                        <span className="util-cell-label">{listCells.details.label}</span>
+                      </Link>
+                    </td>
+                  )}
+                  {listCells?.edit && (
+                    <td>
+                      <Link to={listCells.edit.path} className="util-cell-link">
+                        <PencilIcon className="icon icon-pencil" />
+                        <span className="util-cell-label">{listCells.edit.label}</span>
+                      </Link>
+                    </td>
+                  )}
+                  {listCells?.delete && (
+                    <td>
+                      <a
+                        onClick={() => {
+                          listCells.delete?.onRemoveItem?.(item).then(() => {
+                            onRemoveItem?.(item);
+                          });
+                        }}
+                        className="util-cell-link util-cell-link-remove"
+                      >
+                        <TrashIcon className="icon icon-trash" />
+                        <span className="util-cell-label">{listCells.delete.label}</span>
+                      </a>
+                    </td>
+                  )}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

package/src/components/{components/list → list}/FilterPopup.tsx

@@ -1,18 +1,19 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { ListData } from '../../../decorators/list/ListData';
-import { CellOptions, StaticSelectFilter } from '../../../decorators/list/Cell';
+import { CellConfiguration, StaticSelectFilter } from '../../decorators/list/Cell';
 import Select from 'react-select';
+import { ListPageMeta } from '../../decorators/list/getListPageMeta';
+import { AnyClass } from '../../types/AnyClass';
 
-interface FilterPopupProps<T> {
+interface FilterPopupProps<T extends AnyClass> {
   isOpen: boolean;
   onClose: () => void;
   onApplyFilters: (filters: Record<string, string>) => void;
-  listData: ListData<T>;
+  listPageMeta: ListPageMeta<T>;
   activeFilters?: Record<string, string>;
 }
 
 interface FilterFieldProps {
-  field: CellOptions;
+  field: CellConfiguration;
   value: string;
   onChange: (value: string) => void;
 }
@@ -126,16 +127,19 @@ function FilterField({ field, value, onChange }: FilterFieldProps): React.ReactE
   }
 }
 
-export function FilterPopup<T>({
+export function FilterPopup<T extends AnyClass>({
   isOpen,
   onClose,
   onApplyFilters,
-  listData,
+  listPageMeta,
   activeFilters,
 }: FilterPopupProps<T>): React.ReactElement | null {
   const [filters, setFilters] = React.useState<Record<string, any>>(activeFilters ?? {});
   const popupRef = useRef<HTMLDivElement>(null);
-  const fields = useMemo(() => listData.cells.filter(cell => !!cell.filter), [listData.cells]);
+  const fields = useMemo(
+    () => listPageMeta.cells.filter(cell => !!cell.filter),
+    [listPageMeta.cells]
+  );
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -177,7 +181,7 @@ export function FilterPopup<T>({
           </button>
         </div>
         <div className="filter-popup-content">
-          {fields.map((field: CellOptions) => (
+          {fields.map((field: CellConfiguration) => (
             <div key={field.name} className="filter-field">
               <label htmlFor={field.name}>{field.title || field.name}</label>
               <FilterField