proje-react-panel 1.0.17 → 1.1.1

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

@@ -1,19 +1,23 @@
-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';
+import { Select } from './Select';
 
 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 +29,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 +48,25 @@ 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 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 input={input} fieldName={fieldName} />;
+      case 'input': {
         return (
-          <select {...register(fieldName)} id={fieldName}>
-            <option value="">Select {fieldName}</option>
-            {input.options?.map(option => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-        );
-      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 +76,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,84 @@
+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}
+              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/Select.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { InputConfiguration } from '../../decorators/form/Input';
+import { useFormContext, Controller, useWatch } from 'react-hook-form';
+import { SelectInputConfiguration } from '../../decorators/form/inputs/SelectInput';
+import ReactSelect, { SingleValue } from 'react-select';
+import { darkSelectStyles } from './SelectStyles';
+
+interface SelectProps {
+  input: InputConfiguration;
+  fieldName: string;
+}
+
+interface OptionType {
+  label: string;
+  value: string;
+}
+
+export function Select({ input, fieldName }: SelectProps) {
+  const inputSelect = input as SelectInputConfiguration;
+  const { control } = useFormContext();
+  const [options, setOptions] = useState<OptionType[]>(inputSelect.defaultOptions || []);
+  const [key, setKey] = useState(0);
+  useEffect(() => {
+    if (inputSelect.onSelectPreloader) {
+      inputSelect.onSelectPreloader().then(option => {
+        setOptions(option);
+        setKey(key + 1);
+      });
+    }
+  }, [input]);
+
+  return (
+    <Controller
+      name={fieldName}
+      control={control}
+      render={({ field }) => {
+        return (
+          <ReactSelect
+            key={key}
+            options={options}
+            styles={darkSelectStyles}
+            value={options.find(option => option.value === field.value) || null}
+            onChange={(selectedOption: OptionType | null) => {
+              field.onChange(selectedOption?.value);
+            }}
+          />
+        );
+      }}
+    />
+  );
+}

package/src/components/form/SelectStyles.ts

@@ -0,0 +1,73 @@
+import { StylesConfig } from 'react-select';
+
+interface OptionType {
+  label: string;
+  value: string;
+}
+
+export const darkSelectStyles: StylesConfig<OptionType, false> = {
+  control: (baseStyles, state) => ({
+    ...baseStyles,
+    backgroundColor: '#1f2937',
+    borderColor: state.isFocused ? '#6366f1' : '#374151',
+    boxShadow: state.isFocused ? '0 0 0 1px #6366f1' : 'none',
+    '&:hover': {
+      borderColor: '#6366f1',
+    },
+    borderRadius: '6px',
+    padding: '2px',
+    color: 'white',
+  }),
+  option: (baseStyles, state) => ({
+    ...baseStyles,
+    backgroundColor: state.isSelected ? '#6366f1' : state.isFocused ? '#374151' : '#1f2937',
+    color: 'white',
+    '&:active': {
+      backgroundColor: '#6366f1',
+    },
+    '&:hover': {
+      backgroundColor: '#374151',
+    },
+    cursor: 'pointer',
+  }),
+  input: baseStyles => ({
+    ...baseStyles,
+    color: 'white',
+  }),
+  placeholder: baseStyles => ({
+    ...baseStyles,
+    color: '#9ca3af',
+  }),
+  singleValue: baseStyles => ({
+    ...baseStyles,
+    color: 'white',
+  }),
+  menuPortal: baseStyles => ({
+    ...baseStyles,
+    zIndex: 9999,
+  }),
+  menu: baseStyles => ({
+    ...baseStyles,
+    backgroundColor: '#1f2937',
+    border: '1px solid #374151',
+    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  }),
+  menuList: baseStyles => ({
+    ...baseStyles,
+    padding: '4px',
+  }),
+  dropdownIndicator: baseStyles => ({
+    ...baseStyles,
+    color: '#9ca3af',
+    '&:hover': {
+      color: '#6366f1',
+    },
+  }),
+  clearIndicator: baseStyles => ({
+    ...baseStyles,
+    color: '#9ca3af',
+    '&:hover': {
+      color: '#6366f1',
+    },
+  }),
+};

package/src/components/form/Uploader.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { InputConfiguration } from '../../decorators/form/Input';
+
+interface UploaderProps {
+  input: InputConfiguration;
+  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>;
+}