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

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

@@ -9,15 +9,19 @@ 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 extends { id: string }> {
+interface DatagridProps<T> {
   data: T[];
-  listData: ListData;
+  listData: ListData<T>;
   onRemoveItem?: (item: T) => Promise<void>;
 }
 
-export function Datagrid<T extends { id: string }>({ data, listData, onRemoveItem }: DatagridProps<T>) {
+export function Datagrid<T>({ data, listData, onRemoveItem }: DatagridProps<T>) {
   const cells = listData.cells;
-  const utilCells = listData.list?.utilCells;
+  const listGeneralCells = data?.[0]
+    ? typeof listData.list?.cells === 'function'
+      ? listData.list?.cells?.(data[0])
+      : listData.list?.cells
+    : null;
 
   return (
     <div className="datagrid">
@@ -30,89 +34,99 @@ export function Datagrid<T extends { id: string }>({ data, listData, onRemoveIte
               {cells.map(cellOptions => (
                 <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
               ))}
-              {utilCells?.details && <th>Details</th>}
-              {utilCells?.edit && <th>Edit</th>}
-              {utilCells?.delete && <th>Delete</th>}
+              {listGeneralCells?.details && <th>Details</th>}
+              {listGeneralCells?.edit && <th>Edit</th>}
+              {listGeneralCells?.delete && <th>Delete</th>}
             </tr>
           </thead>
           <tbody>
-            {data.map((item, index) => (
-              <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
+            {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;
+                    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 '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;
                     }
-                    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>;
-                })}
-                {utilCells?.details && (
-                  <td>
-                    <Link to={`${utilCells.details.path}/${item.id}`} className="util-cell-link">
-                      <SearchIcon className="icon icon-search" />
-                      <span className="util-cell-label">{utilCells.details.label}</span>
-                    </Link>
-                  </td>
-                )}
-                {utilCells?.edit && (
-                  <td>
-                    <Link to={`${utilCells.edit.path}/${item.id}`} className="util-cell-link">
-                      <PencilIcon className="icon icon-pencil" />
-                      <span className="util-cell-label">{utilCells.edit.label}</span>
-                    </Link>
-                  </td>
-                )}
-                {utilCells?.delete && (
-                  <td>
-                    <a onClick={() => {
-                      onRemoveItem?.(item)
-                    }} className="util-cell-link">
-                      <TrashIcon className="icon icon-trash" />
-                      <span className="util-cell-label">{utilCells.delete.label}</span>
-                    </a>
-                  </td>
-                )}
-              </tr>
-            ))}
+                    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>
       )}

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

@@ -3,11 +3,11 @@ import { ListData } from '../../../decorators/list/ListData';
 import { CellOptions, StaticSelectFilter } from '../../../decorators/list/Cell';
 import Select from 'react-select';
 
-interface FilterPopupProps {
+interface FilterPopupProps<T> {
   isOpen: boolean;
   onClose: () => void;
   onApplyFilters: (filters: Record<string, string>) => void;
-  listData: ListData;
+  listData: ListData<T>;
   activeFilters?: Record<string, string>;
 }
 
@@ -126,13 +126,13 @@ function FilterField({ field, value, onChange }: FilterFieldProps): React.ReactE
   }
 }
 
-export function FilterPopup({
+export function FilterPopup<T>({
   isOpen,
   onClose,
   onApplyFilters,
   listData,
   activeFilters,
-}: FilterPopupProps): React.ReactElement | null {
+}: 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]);

package/src/components/components/list/ListPage.tsx

@@ -26,17 +26,17 @@ export interface PaginatedResponse<T> {
 
 export type GetDataForList<T> = (params: GetDataParams) => Promise<PaginatedResponse<T>>;
 
-const ListHeader = ({
+function ListHeader<T extends AnyClass>({
   listData,
   filtered,
   onFilterClick,
   customHeader,
 }: {
-  listData: ListData;
+  listData: ListData<T>;
   filtered: boolean;
   onFilterClick: () => void;
   customHeader?: React.ReactNode;
-}) => {
+}) {
   const fields = useMemo(() => listData.cells.filter(cell => !!cell.filter), [listData.cells]);
 
   const header = listData.list?.headers;
@@ -60,15 +60,15 @@ const ListHeader = ({
       </div>
     </div>
   );
-};
+}
 
-export function ListPage<T extends AnyClass & { id: string }>({
+export function ListPage<T extends AnyClass>({
   model,
   getData,
   onRemoveItem,
   customHeader,
 }: {
-  model: T;
+  model: any;
   getData: GetDataForList<T>;
   customHeader?: React.ReactNode;
   onRemoveItem?: (item: T) => Promise<void>;
@@ -151,15 +151,13 @@ export function ListPage<T extends AnyClass & { id: string }>({
         data={data}
         onRemoveItem={async (item: T) => {
           if (onRemoveItem) {
-            alert({
-              title: 'Are you sure you want to delete this item?',
-              message: 'This action cannot be undone.',
-              onConfirm: async () => {
-                await onRemoveItem(item);
-                setData(data.filter((d: T) => d.id !== item.id));
-                await fetchData(pagination.page);
-              },
-            });
+            if (
+              confirm('Are you sure you want to delete this item? This action cannot be undone.')
+            ) {
+              await onRemoveItem(item);
+              //setData(data.filter((d: T) => d.id !== item.id));
+              await fetchData(pagination.page);
+            }
           }
         }}
       />

package/src/components/pages/FormPage.tsx

@@ -2,16 +2,19 @@ import React, { useMemo } from 'react';
 import { InnerForm } from '../components';
 import { AnyClass } from '../../types/AnyClass';
 import { getFormFields } from '../../decorators/form/getFormFields';
+import { InputOptions } from '../../decorators/form/Input';
 
 export type GetDetailsDataFN<T> = (param: Record<string, string>) => Promise<T>;
 export type OnSubmitFN<T> = (data: T) => Promise<T>;
 
 export interface FormPageProps<T extends AnyClass> {
-  model: T;
+  model: any; //TODO: use T not typeof T
   getDetailsData?: GetDetailsDataFN<T>;
   redirect?: string;
   onSubmit: OnSubmitFN<T>;
+  onSelectPreloader?: (inputOptions: InputOptions) => Promise<{ label: string; value: string }[]>;
   redirectBackOnSuccess?: boolean;
+  type?: 'json' | 'formData';
 }
 
 export function FormPage<T extends AnyClass>({
@@ -19,7 +22,9 @@ export function FormPage<T extends AnyClass>({
   getDetailsData,
   onSubmit,
   redirect,
+  onSelectPreloader,
   redirectBackOnSuccess = true,
+  type = 'json',
   ...rest
 }: FormPageProps<T>) {
   const formOptions = useMemo(() => getFormFields(model), [model]);
@@ -29,6 +34,8 @@ export function FormPage<T extends AnyClass>({
       onSubmit={onSubmit}
       formOptions={formOptions}
       redirectBackOnSuccess={redirectBackOnSuccess}
+      onSelectPreloader={onSelectPreloader}
+      type={type}
     />
   );
 }

package/src/decorators/form/Input.ts

@@ -15,6 +15,7 @@ export interface InputOptions {
   placeholder?: string;
   cancelPasswordValidationOnEdit?: boolean;
   options?: { value: string; label: string }[];
+  optionsPreload?: boolean;
   nestedFields?: InputOptions[];
 }
 
@@ -31,7 +32,8 @@ export function Input(options?: InputOptions): PropertyDecorator {
 }
 
 export function getInputFields<T extends AnyClass>(entityClass: T): InputOptions[] {
-  const prototype = entityClass.prototype;
+  //TODO2: ANY IS NOT A GOOD SOLUTION, WE NEED TO FIND A BETTER WAY TO DO THIS
+  const prototype = (entityClass as any).prototype;
   const inputFields: string[] = Reflect.getMetadata(INPUT_KEY, prototype) || [];
   return inputFields.map(field => {
     const fields = Reflect.getMetadata(`${INPUT_KEY.toString()}:${field}:options`, prototype) || {};

package/src/decorators/form/getFormFields.ts

@@ -5,6 +5,7 @@ import { getFormConfiguration } from "./Form";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export function getFormFields<T extends AnyClass>(entityClass: T): FormOptions {
+	console.log(entityClass);
 	return {
 		resolver: classValidatorResolver(entityClass as any),
 		form: getFormConfiguration(entityClass),

package/src/decorators/list/List.ts

@@ -7,18 +7,18 @@ export interface ListHeaderOptions {
   create?: { path: string; label: string };
 }
 
-export interface ListUtilCellOptions {
+export interface ListCellOptions<T> {
   details?: { path: string; label: string };
   edit?: { path: string; label: string };
-  delete?: { path: string; label: string };
+  delete?: { label: string };
 }
 
-export interface ListOptions {
+export interface ListOptions<T> {
   headers?: ListHeaderOptions;
-  utilCells?: ListUtilCellOptions;
+  cells?: ((item: T) => ListCellOptions<T>) | ListCellOptions<T>;
 }
 
-export function List(options?: ListOptions): ClassDecorator {
+export function List<T>(options?: ListOptions<T> | ((item: T) => ListOptions<T>)): ClassDecorator {
   return (target: Function) => {
     if (options) {
       Reflect.defineMetadata(LIST_KEY, options, target);
@@ -26,6 +26,7 @@ export function List(options?: ListOptions): ClassDecorator {
   };
 }
 
-export function getClassListData(entityClass: any): ListOptions | undefined {
-  return Reflect.getMetadata(LIST_KEY, entityClass);
+export function getClassListData<T>(entityClass: T): ListOptions<T> | undefined {
+  //TODO: try to remove any
+  return Reflect.getMetadata(LIST_KEY, entityClass as any);
 }

package/src/decorators/list/ListData.ts

@@ -1,7 +1,7 @@
-import { ListOptions } from "./List";
-import { CellOptions } from "./Cell";
+import { ListOptions } from './List';
+import { CellOptions } from './Cell';
 
-export interface ListData {
-	list?: ListOptions;
-	cells: CellOptions[];
+export interface ListData<T> {
+  list?: ListOptions<T>;
+  cells: CellOptions[];
 }

package/src/decorators/list/getListFields.ts

@@ -1,10 +1,10 @@
-import { getClassListData } from "./List";
-import { getCellFields } from "./GetCellFields";
-import { ListData } from "./ListData";
+import { getClassListData } from './List';
+import { getCellFields } from './GetCellFields';
+import { ListData } from './ListData';
 
-export function getListFields<T>(entityClass: T): ListData {
-	return {
-		list: getClassListData(entityClass),
-		cells: getCellFields(entityClass),
-	};
+export function getListFields<T>(entityClass: T): ListData<T> {
+  return {
+    list: getClassListData(entityClass),
+    cells: getCellFields(entityClass),
+  };
 }

package/src/styles/form.scss

@@ -1,10 +1,8 @@
 .form-wrapper {
-  max-width: 400px;
   padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   background-color: #1a1a1a;
   color: #f2f2f2;
+  width: 100%;
 
   form {
     display: flex;
@@ -59,7 +57,7 @@
 
     select {
       appearance: none;
-      background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
       background-repeat: no-repeat;
       background-position: right 0.7rem top 50%;
       background-size: 0.65rem auto;

package/src/styles/index.scss

@@ -1,15 +1,15 @@
-@use './layout';
-// Imported styles will be scoped under .layout
-@use './sidebar';
-@use './form';
-@use './list';
-@use './login';
-@use './error-boundary';
-@use './image-uploader';
-@use './counter';
-@use './loading-screen';
-@use './pagination';
-@use './filter-popup';
+@import './layout';
+@import './sidebar';
+@import './form';
+@import './list';
+@import './login';
+@import './error-boundary';
+@import './image-uploader';
+@import './counter';
+@import './loading-screen';
+@import './pagination';
+@import './filter-popup';
+@import './uploader';
 
 .layout {
   display: flex;

package/src/styles/list.scss

@@ -143,7 +143,9 @@ $datagrid-height: calc(100vh - ($header-height + $footer-height));
   color: #666;
   text-decoration: none;
   transition: color 0.2s ease;
-
+  &.util-cell-link-remove {
+    cursor: pointer;
+  }
   &:hover {
     color: #333;
   }

package/src/styles/uploader.scss

@@ -0,0 +1,86 @@
+.uploader {
+  &-container {
+    padding: 1.5rem;
+    border: 2px dashed var(--border-color, #e0e0e0);
+    border-radius: 8px;
+    background-color: var(--bg-color, #fafafa);
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: var(--primary-color, #2196f3);
+      background-color: var(--bg-hover-color, #f5f5f5);
+    }
+  }
+
+  &-button {
+    background-color: var(--primary-color, #2196f3);
+    color: var(--button-text-color, white);
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: var(--primary-hover-color, #1976d2);
+    }
+
+    &:active {
+      background-color: var(--primary-active-color, #1565c0);
+    }
+  }
+
+  &-files {
+    margin-top: 1.5rem;
+    display: grid;
+    gap: 1rem;
+  }
+
+  &-file {
+    background-color: var(--file-bg-color, white);
+    padding: 1rem;
+    border-radius: 6px;
+    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.05));
+    display: grid;
+    gap: 0.5rem;
+
+    p {
+      margin: 0;
+      color: var(--text-color, #424242);
+      font-size: 0.875rem;
+
+      &:first-child {
+        color: var(--primary-color, #1976d2);
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+:root {
+  --border-color: #424242;
+  --bg-color: #1e1e1e;
+  --bg-hover-color: #2d2d2d;
+  --primary-color: #64b5f6;
+  --primary-hover-color: #42a5f5;
+  --primary-active-color: #2196f3;
+  --button-text-color: #ffffff;
+  --file-bg-color: #2d2d2d;
+  --shadow-color: rgba(0, 0, 0, 0.2);
+  --text-color: #e0e0e0;
+}
+
+// Dark theme
+[data-theme='dark'] {
+  --border-color: #424242;
+  --bg-color: #1e1e1e;
+  --bg-hover-color: #2d2d2d;
+  --primary-color: #64b5f6;
+  --primary-hover-color: #42a5f5;
+  --primary-active-color: #2196f3;
+  --button-text-color: #ffffff;
+  --file-bg-color: #2d2d2d;
+  --shadow-color: rgba(0, 0, 0, 0.2);
+  --text-color: #e0e0e0;
+}

package/src/types/AnyClass.ts

@@ -1 +1,3 @@
-export type AnyClass = abstract new (...args: any[]) => any;
+//export type AnyClass = abstract new (...args: any[]) => any;
+//TODO2: ANY IS NOT A GOOD SOLUTION, WE NEED TO FIND A BETTER WAY TO DO THIS
+export type AnyClass = any;