proje-react-panel 1.0.15 → 1.0.17-test-8

package/src/components/components/InnerForm.tsx

@@ -1,62 +1,100 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { InputOptions } from '../../decorators/form/Input';
 import { FormField } from './FormField';
 import { FormOptions } from '../../decorators/form/FormOptions';
 import { AnyClass } from '../../types/AnyClass';
 import { OnSubmitFN, GetDetailsDataFN } from '../pages/FormPage';
-import { DefaultValues } from 'react-hook-form';
-import { useParams } from 'react-router';
+import { useParams, useNavigate } from 'react-router';
 
-interface InnerFormProps<T extends AnyClass> {
+interface InnerFormProps<T> {
   formOptions: FormOptions;
   onSubmit: OnSubmitFN<T>;
-  redirect?: string;
   getDetailsData?: GetDetailsDataFN<T>;
+  redirectBackOnSuccess?: boolean;
+  onSelectPreloader?: (inputOptions: InputOptions) => Promise<{ label: string; value: string }[]>;
+  type?: 'json' | 'formData';
 }
 
-export function InnerForm<T extends AnyClass>({
+export function InnerForm<T>({
   formOptions,
   onSubmit,
-  redirect,
   getDetailsData,
+  redirectBackOnSuccess,
+  onSelectPreloader,
+  type,
 }: InnerFormProps<T>) {
   const params = useParams();
-  const form = useForm<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 form = useForm<any>({
     resolver: formOptions.resolver,
   });
-
+  const formRef = useRef<HTMLFormElement>(null);
+  const navigate = useNavigate();
   const inputs = formOptions.inputs;
   useEffect(() => {
     if (getDetailsData) {
-      getDetailsData(params.id as string).then(data => {
+      getDetailsData(params as Record<string, string>).then(data => {
         form.reset({ ...data });
-      });
+      }); 
     }
-  }, [, form.reset]);
+  }, [params, form.reset]);
 
   return (
     <div className="form-wrapper">
       <FormProvider {...form}>
         <form
+          ref={formRef}
           onSubmit={form.handleSubmit(
             async dataForm => {
-              await onSubmit(dataForm);
-              if (redirect) {
-                window.location.href = redirect;
+              try {
+                console.log('dataForm', dataForm);
+                const data =
+                  type === 'json'
+                    ? dataForm
+                    : (() => {
+                        const formData = new FormData(formRef.current!);
+                        for (const key in dataForm) {
+                          if (!formData.get(key)) {
+                            formData.append(key, dataForm[key]);
+                          }
+                        }
+                        console.log('formData', formData);
+                        return formData;
+                      })();
+                console.log('data', data);
+                await onSubmit(data);
+                setErrorMessage(null);
+                if (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: InputOptions) => (
               <FormField
                 key={input.name || ''}
                 input={input}
                 register={form.register}
+                onSelectPreloader={onSelectPreloader}
                 error={
                   input.name
                     ? { message: (form.formState.errors[input.name as keyof T] as any)?.message }

package/src/components/components/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/components/index.ts

@@ -2,7 +2,7 @@ export { InnerForm } from './InnerForm';
 export { FormField } from './FormField';
 export { LoadingScreen } from './LoadingScreen';
 export { Counter } from './Counter';
-export { ImageUploader } from './ImageUploader';
+export { Uploader } from './Uploader';
 export { ErrorComponent } from './ErrorComponent';
 export { Label } from './Label';
-export { ErrorBoundary } from './ErrorBoundary'; 
+export { ErrorBoundary } from './ErrorBoundary';

package/src/components/components/list/Datagrid.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { CellOptions } from '../../../decorators/list/Cell';
+import { Link } from 'react-router';
+import { useAppStore } from '../../../store/store';
+import { ImageCellOptions } from '../../../decorators/list/ImageCell';
+import { ListData } from '../../../decorators/list/ListData';
+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';
+
+interface DatagridProps<T> {
+  data: T[];
+  listData: ListData<T>;
+  onRemoveItem?: (item: T) => Promise<void>;
+}
+
+export function Datagrid<T>({ data, listData, onRemoveItem }: DatagridProps<T>) {
+  const cells = listData.cells;
+  const listGeneralCells = data?.[0]
+    ? typeof listData.list?.cells === 'function'
+      ? listData.list?.cells?.(data[0])
+      : listData.list?.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 listData.list?.cells === 'function'
+                  ? listData.list?.cells?.(item)
+                  : listData.list?.cells
+                : null;
+              return (
+                <tr key={index}>
+                  {cells.map(cellOptions => {
+                    // @ts-ignore
+                    const value = item[cellOptions.name];
+                    let render = value ?? '-'; // Default value if the field is undefined or null
+
+                    switch (cellOptions.type) {
+                      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 'string':
+                      default:
+                        render = value ? value.toString() : (cellOptions?.placeHolder ?? '-'); // Handles string type or default fallback
+                        break;
+                    }
+                    /*
+								if (cellOptions.linkTo) {
+									render = <Link to={cellOptions.linkTo(item)}>{formattedValue}</Link>;
+								}
+*/
+                    return <td key={cellOptions.name}>{render}</td>;
+                  })}
+                  {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={() => {
+                          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/EmptyList.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export const EmptyList: React.FC = () => {
+  return (
+    <div className="empty-list">
+      <div className="empty-list-content">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="64"
+          height="64"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+          <polyline points="13 2 13 9 20 9" />
+        </svg>
+        <h3>No Data Found</h3>
+        <p>There are no items to display at the moment.</p>
+      </div>
+    </div>
+  );
+};

package/src/components/components/list/FilterPopup.tsx

@@ -0,0 +1,202 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { ListData } from '../../../decorators/list/ListData';
+import { CellOptions, StaticSelectFilter } from '../../../decorators/list/Cell';
+import Select from 'react-select';
+
+interface FilterPopupProps<T> {
+  isOpen: boolean;
+  onClose: () => void;
+  onApplyFilters: (filters: Record<string, string>) => void;
+  listData: ListData<T>;
+  activeFilters?: Record<string, string>;
+}
+
+interface FilterFieldProps {
+  field: CellOptions;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+function FilterField({ field, value, onChange }: FilterFieldProps): React.ReactElement {
+  switch (field.filter?.type) {
+    case 'static-select': {
+      const filter = field.filter as StaticSelectFilter;
+      return (
+        <Select
+          id={field.name}
+          menuPortalTarget={document.body}
+          styles={{
+            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',
+              },
+            }),
+          }}
+          value={
+            value
+              ? {
+                  value: value,
+                  label: filter.options.find(opt => opt.value === value)?.label || value,
+                }
+              : null
+          }
+          onChange={option => onChange(option?.value || '')}
+          options={filter.options.map(opt => ({
+            value: opt.value,
+            label: opt.label,
+          }))}
+          placeholder={`Filter by ${field.title || field.name}`}
+          isClearable
+        />
+      );
+    }
+    default:
+      return (
+        <input
+          type={field.type === 'number' ? 'number' : 'text'}
+          id={field.name}
+          value={value || ''}
+          onChange={e => onChange(e.target.value)}
+          placeholder={`Filter by ${field.title || field.name}`}
+        />
+      );
+  }
+}
+
+export function FilterPopup<T>({
+  isOpen,
+  onClose,
+  onApplyFilters,
+  listData,
+  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]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const handleFilterChange = (fieldName: string, value: any) => {
+    setFilters(prev => ({
+      ...prev,
+      [fieldName]: value,
+    }));
+  };
+
+  const handleApply = () => {
+    onApplyFilters(filters);
+    onClose();
+  };
+
+  return (
+    <div className="filter-popup-overlay">
+      <div ref={popupRef} className="filter-popup">
+        <div className="filter-popup-header">
+          <h3>Filter</h3>
+          <button onClick={onClose} className="close-button">
+            ×
+          </button>
+        </div>
+        <div className="filter-popup-content">
+          {fields.map((field: CellOptions) => (
+            <div key={field.name} className="filter-field">
+              <label htmlFor={field.name}>{field.title || field.name}</label>
+              <FilterField
+                field={field}
+                value={filters[field.name || '']}
+                onChange={value => handleFilterChange(field.name || '', value)}
+              />
+            </div>
+          ))}
+        </div>
+        <div className="filter-popup-footer">
+          <button onClick={onClose} className="cancel-button">
+            Cancel
+          </button>
+          <button onClick={handleApply} className="apply-button">
+            Apply Filters
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}