proje-react-panel 1.1.2 → 1.1.4

package/src/components/Panel.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
-import { initPanel } from '../initPanel';
-import { InitPanelOptions } from '../types/initPanelOptions';
 import { ErrorBoundary } from './ErrorBoundary';
+import { ToastContainer } from 'react-toastify';
 
 type AppProps = {
   children: React.ReactNode;
@@ -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/InnerForm.tsx

@@ -5,6 +5,7 @@ import { FormField } from './FormField';
 import { useNavigate } from 'react-router';
 import { FormConfiguration } from '../../decorators/form/Form';
 import { AnyClass } from '../../types/AnyClass';
+import { toast } from 'react-toastify';
 
 interface InnerFormProps<T extends AnyClass> {
   inputs: InputConfiguration[];
@@ -17,6 +18,7 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
   const formRef = useRef<HTMLFormElement>(null);
   const navigate = useNavigate();
   const form = useFormContext<T>();
+  const loadingRef = useRef(false);
 
   return (
     <div className="form-wrapper">
@@ -24,6 +26,8 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
         ref={formRef}
         onSubmit={form.handleSubmit(
           async (dataForm: T) => {
+            if (loadingRef.current) return;
+            loadingRef.current = true;
             try {
               const data =
                 formClass.type === 'json'
@@ -37,17 +41,25 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
                       }
                       return formData;
                     })();
-              await formClass.onSubmit(data);
+              const resut = await formClass.onSubmit(data);
+              form.reset(resut);
               setErrorMessage(null);
+              toast.success('Form submitted successfully');
               if (formClass.redirectBackOnSuccess) {
                 navigate(-1);
               }
+              if (formClass.redirectSuccessUrl) {
+                navigate(formClass.redirectSuccessUrl);
+              }
             } catch (error: any) {
               const message =
                 error?.response?.data?.message ||
                 (error instanceof Error ? error.message : 'An error occurred');
+              toast.error('Something went wrong');
               setErrorMessage(message);
               console.error(error);
+            } finally {
+              loadingRef.current = false;
             }
           },
           (errors, event) => {

package/src/components/list/CellField.tsx

@@ -1,63 +1,47 @@
 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';
+import { CellConfiguration, ExtendedCellTypes } from '../../decorators/list/Cell';
+import { BooleanCell } from './cells/BooleanCell';
+import { DateCell } from './cells/DateCell';
+import { ImageCell } from './cells/ImageCell';
+import { UUIDCell } from './cells/UUIDCell';
+import { DefaultCell } from './cells/DefaultCell';
+import { DownloadCell } from './cells/DownloadCell';
 
 interface CellFieldProps<T extends AnyClass> {
-  cellOptions: any; // TODO: Create proper type for cellOptions
+  configuration: CellConfiguration;
   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
+export function CellField<T extends AnyClass>({
+  configuration,
+  item,
+  value,
+}: CellFieldProps<T>): React.ReactElement {
+  let render;
 
-  switch (cellOptions.type as ExtendedCellTypes) {
-    case 'boolean': {
-      render = value ? <CheckIcon className="icon icon-true" /> : <CrossIcon className="icon icon-false" />;
+  switch (configuration.type) {
+    case 'boolean':
+      render = <BooleanCell value={value} />;
       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')}`;
-      }
+      render = <DateCell value={value} />;
       break;
-
-    case 'image': {
-      const imageCellOptions = cellOptions as ImageCellOptions;
-      render = (
-        <img
-          width={100}
-          height={100}
-          src={imageCellOptions.baseUrl + value}
-          style={{ objectFit: 'contain' }}
-        />
-      );
+    case 'image':
+      render = <ImageCell value={value} configuration={configuration} />;
       break;
-    }
     case 'uuid':
-      if (value && typeof value === 'string' && value.length >= 6) {
-        render = `${value.slice(0, 3)}...${value.slice(-3)}`;
-      }
+      render = <UUIDCell value={value} />;
+      break;
+    case 'download':
+      render = <DownloadCell value={value} configuration={configuration} />;
       break;
     default:
-      render = value ? value.toString() : (cellOptions?.placeHolder ?? '-');
+      render = <DefaultCell value={value} configuration={configuration} />;
       break;
   }
 
-  /*
-  if (cellOptions.linkTo) {
-    render = <Link to={cellOptions.linkTo(item)}>{formattedValue}</Link>;
-  }
-  */
-
-  return <td key={cellOptions.name}>{render}</td>;
+  return <td key={configuration.name}>{render}</td>;
 }

package/src/components/list/Datagrid.tsx

@@ -5,9 +5,9 @@ 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';
+import { CellConfiguration } from '../../decorators/list/Cell';
 
 interface DatagridProps<T extends AnyClass> {
   data: T[];
@@ -52,13 +52,12 @@ export function Datagrid<T extends AnyClass>({
                 : null;
               return (
                 <tr key={index}>
-                  {cells.map(cellOptions => {
-                    // @ts-ignore
-                    const value = item[cellOptions.name];
+                  {cells.map((configuration: CellConfiguration) => {
+                    const value = item[configuration.name];
                     return (
                       <CellField
-                        key={cellOptions.name}
-                        cellOptions={cellOptions}
+                        key={configuration.name}
+                        configuration={configuration}
                         item={item}
                         value={value}
                       />
@@ -84,9 +83,17 @@ export function Datagrid<T extends AnyClass>({
                     <td>
                       <a
                         onClick={() => {
-                          listCells.delete?.onRemoveItem?.(item).then(() => {
-                            onRemoveItem?.(item);
-                          });
+                          listCells.delete
+                            ?.onRemoveItem?.(item)
+                            .then(() => {
+                              onRemoveItem?.(item);
+                            })
+                            .catch((e: unknown) => {
+                              console.error(e);
+                              const message =
+                                e instanceof Error ? e.message : 'Error deleting item';
+                              alert(message);
+                            });
                         }}
                         className="util-cell-link util-cell-link-remove"
                       >

package/src/components/list/ListPage.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useEffect, useState } from 'react';
+import React, { useMemo, useCallback, useEffect, useState, useId } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import { Datagrid } from './Datagrid';
 import { ErrorComponent } from '../ErrorComponent';
@@ -16,6 +16,7 @@ export function ListPage<T extends AnyClass>({
   model: AnyClassConstructor<T>;
   customHeader?: React.ReactNode;
 }) {
+  const id = useId();
   const listPageMeta = useMemo(() => getListPageMeta(model), [model]);
 
   const [loading, setLoading] = useState(true);
@@ -83,8 +84,8 @@ export function ListPage<T extends AnyClass>({
     fetchData(1, filters); // Reset to first page when filters change
   };
 
-  if (loading) return <LoadingScreen />;
-  if (error) return <ErrorComponent error={error} />;
+  if (loading) return <LoadingScreen id={id} />;
+  if (error) return <ErrorComponent id={id} error={error} />;
 
   return (
     <div className="list">

package/src/components/list/cells/BooleanCell.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import CheckIcon from '../../../assets/icons/svg/check.svg';
+import CrossIcon from '../../../assets/icons/svg/cross.svg';
+
+interface BooleanCellProps {
+  value: boolean;
+}
+
+export function BooleanCell({ value }: BooleanCellProps) {
+  return value ? (
+    <CheckIcon className="icon icon-true" />
+  ) : (
+    <CrossIcon className="icon icon-false" />
+  );
+}

package/src/components/list/cells/DateCell.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface DateCellProps {
+  value: string | number | Date;
+}
+
+export function DateCell({ value }: DateCellProps) {
+  if (!value) return <>-</>;
+
+  const date = new Date(value);
+  return (
+    <>
+      {`${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')}`}
+    </>
+  );
+}

package/src/components/list/cells/DefaultCell.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+
+interface DefaultCellProps {
+  value: any;
+  configuration: CellConfiguration;
+}
+
+export function DefaultCell({ value, configuration }: DefaultCellProps): React.ReactElement {
+  return <>{value ? value.toString() : configuration.placeHolder}</>;
+}

package/src/components/list/cells/DownloadCell.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+import { DownloadCellConfiguration } from '../../../decorators/list/cells/DownloadCell';
+
+interface DownloadCellProps {
+  value: string;
+  configuration: CellConfiguration;
+}
+
+export function DownloadCell({ value, configuration }: DownloadCellProps): React.ReactElement {
+  if (!value) return <>-</>;
+
+  const downloadConfiguration = configuration as DownloadCellConfiguration;
+  const baseUrl = downloadConfiguration.baseUrl || '';
+  const downloadUrl = baseUrl + value;
+
+  return (
+    <a
+      href={downloadUrl}
+      download
+      className="download-link"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Download
+    </a>
+  );
+}

package/src/components/list/cells/ImageCell.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+import { ImageCellConfiguration } from '../../../decorators/list/cells/ImageCell';
+interface ImageCellProps {
+  value: string;
+  configuration: CellConfiguration;
+}
+
+export function ImageCell({ value, configuration }: ImageCellProps) {
+  const imageConfiguration = configuration as ImageCellConfiguration;
+  if (!value) return <>-</>;
+
+  return (
+    <img
+      width={100}
+      height={100}
+      src={imageConfiguration.baseUrl + value}
+      style={{ objectFit: 'contain' }}
+      alt=""
+    />
+  );
+}

package/src/components/list/cells/UUIDCell.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface UUIDCellProps {
+  value: string;
+}
+
+export function UUIDCell({ value }: UUIDCellProps) {
+  if (!value || typeof value !== 'string' || value.length < 6) return <>-</>;
+
+  return <>{`${value.slice(0, 3)}...${value.slice(-3)}`}</>;
+}

package/src/decorators/form/Form.ts

@@ -4,18 +4,22 @@ import { GetDetailsDataFN } from '../details/Details';
 import { InputConfiguration } from './Input';
 
 const DETAILS_METADATA_KEY = 'DetailsMetaData';
-export type OnSubmitFN<T> = (data: T | FormData) => Promise<T | FormData>;
+export type OnSubmitFN<T> = (data: T | FormData) => Promise<T>;
 
 interface FormOptions<T extends AnyClass> {
   onSubmit: OnSubmitFN<T>;
   getDetailsData?: GetDetailsDataFN<T>;
+  /** @deprecated */
   redirectBackOnSuccess?: boolean;
   type?: 'json' | 'formData';
+  redirectSuccessUrl?: string;
 }
 
 export interface FormConfiguration<T extends AnyClass> extends FormOptions<T> {
+  /** @deprecated */
   redirectBackOnSuccess: boolean;
   type: 'json' | 'formData';
+  redirectSuccessUrl?: string;
 }
 
 export function Form<T extends AnyClass>(options?: FormOptions<T>): ClassDecorator {

package/src/decorators/list/Cell.ts

@@ -1,7 +1,8 @@
 import 'reflect-metadata';
 import { AnyClass } from '../../types/AnyClass';
+import { createDecorator, DecoratorMap } from '../../utils/decerators';
 
-export const CELL_KEY = Symbol('cell');
+export const CELL_KEY: Symbol = Symbol('cell');
 
 interface Filter {
   type: 'string' | 'number' | 'date' | 'static-select';
@@ -13,7 +14,7 @@ export interface StaticSelectFilter extends Filter {
 }
 
 export type CellTypes = 'string' | 'date' | 'number' | 'boolean' | 'uuid';
-export type ExtendedCellTypes = CellTypes | 'image';
+export type ExtendedCellTypes = CellTypes | 'image' | 'download';
 
 export interface CellOptions {
   name?: string;
@@ -22,38 +23,23 @@ export interface CellOptions {
   placeHolder?: string;
   filter?: Filter | StaticSelectFilter;
 }
-export interface ExtendedCellOptions extends Omit<CellOptions, 'type'> {
-  type?: ExtendedCellTypes;
-}
 
 export interface CellConfiguration extends Omit<CellOptions, 'type'> {
   name: string;
   type: ExtendedCellTypes;
 }
 
-export function Cell(options?: CellOptions): PropertyDecorator {
-  //TODO: reduce all similar code
-  return (target, propertyKey) => {
-    const existingCells: string[] = Reflect.getMetadata(CELL_KEY, target) || [];
-    Reflect.defineMetadata(CELL_KEY, [...existingCells, propertyKey.toString()], target);
-
-    if (options) {
-      const keyString = `${CELL_KEY.toString()}:${propertyKey.toString()}:options`;
-      Reflect.defineMetadata(keyString, options, target);
-    }
-  };
-}
-
-export function ExtendedCell(options?: ExtendedCellOptions): PropertyDecorator {
-  return (target, propertyKey) => {
-    const existingCells: string[] = Reflect.getMetadata(CELL_KEY, target) || [];
-    Reflect.defineMetadata(CELL_KEY, [...existingCells, propertyKey.toString()], target);
+export const cellMap: DecoratorMap<CellOptions, CellConfiguration> = (
+  { propertyKey },
+  options
+) => ({
+  ...options,
+  name: options.name || propertyKey.toString(),
+  type: options.type || 'string',
+});
 
-    if (options) {
-      const keyString = `${CELL_KEY.toString()}:${propertyKey.toString()}:options`;
-      Reflect.defineMetadata(keyString, options, target);
-    }
-  };
+export function Cell(options?: CellOptions): PropertyDecorator {
+  return createDecorator(CELL_KEY, options, cellMap);
 }
 
 export function getCellFields<T extends AnyClass>(entityClass: T): CellConfiguration[] {
@@ -61,12 +47,8 @@ export function getCellFields<T extends AnyClass>(entityClass: T): CellConfigura
   const inputFields: string[] = Reflect.getMetadata(CELL_KEY, prototype) || [];
 
   return inputFields.map(field => {
-    const fields: CellOptions =
+    const fields: CellConfiguration =
       Reflect.getMetadata(`${CELL_KEY.toString()}:${field}:options`, prototype) || {};
-    return {
-      ...fields,
-      name: fields.name || field,
-      type: fields.type as ExtendedCellTypes,
-    };
+    return fields;
   });
 }

package/src/decorators/list/ExtendedCell.ts

@@ -0,0 +1,32 @@
+import {
+  CELL_KEY,
+  CellConfiguration,
+  CellOptions,
+  CellTypes,
+  Cell,
+  ExtendedCellTypes,
+  cellMap,
+} from './Cell';
+import { createDecorator, DecoratorMap } from '../../utils/decerators';
+
+export interface ExtendedCellOptions extends Omit<CellOptions, 'type'> {
+  type?: ExtendedCellTypes;
+}
+
+interface ExtendedCellConfiguration extends Omit<CellConfiguration, 'name'> {
+  name?: string;
+}
+
+export function ExtendedCell<T extends ExtendedCellOptions, K extends ExtendedCellConfiguration>(
+  options?: T,
+  map?: DecoratorMap<T, K>
+): PropertyDecorator {
+  return createDecorator<T, K>(CELL_KEY, options, ({ target, propertyKey }, optionsInner) => {
+    const config = cellMap({ target, propertyKey }, optionsInner as CellOptions);
+    const newConfig: K | undefined = map ? map({ target, propertyKey }, optionsInner) : undefined;
+    return {
+      ...config,
+      ...newConfig,
+    } as K;
+  });
+}

package/src/decorators/list/cells/DownloadCell.ts

@@ -0,0 +1,18 @@
+import { CellConfiguration, CellOptions } from '../Cell';
+import { ExtendedCell } from '../ExtendedCell';
+
+export interface DownloadCellOptions extends Omit<CellOptions, 'type'> {
+  baseUrl: string;
+}
+
+export interface DownloadCellConfiguration extends CellConfiguration {
+  type: 'download';
+  baseUrl: string;
+}
+
+export function DownloadCell(options?: DownloadCellOptions): PropertyDecorator {
+  return ExtendedCell(options, (_, options) => ({
+    ...options,
+    type: 'download',
+  }));
+}

package/src/decorators/list/cells/ImageCell.ts

@@ -1,17 +1,18 @@
-import 'reflect-metadata';
-import { Cell, CellConfiguration, CellOptions, ExtendedCell } from '../Cell';
+import { CellConfiguration, CellOptions } from '../Cell';
+import { ExtendedCell, ExtendedCellOptions } from '../ExtendedCell';
 
-export interface ImageCellOptions extends CellOptions {
+export interface ImageCellOptions extends Omit<CellOptions, 'type'> {
   baseUrl: string;
 }
 
 export interface ImageCellConfiguration extends CellConfiguration {
   type: 'image';
+  baseUrl: string;
 }
 
 export function ImageCell(options?: ImageCellOptions): PropertyDecorator {
-  return ExtendedCell({
+  return ExtendedCell(options, (_, options) => ({
     ...options,
     type: 'image',
-  });
+  }));
 }

package/src/index.ts

@@ -19,6 +19,7 @@ export { FormPage } from './components/form/FormPage';
 export { Form, type OnSubmitFN } from './decorators/form/Form';
 export { Input } from './decorators/form/Input';
 export { SelectInput } from './decorators/form/inputs/SelectInput';
+export { DownloadCell } from './decorators/list/cells/DownloadCell';
 //for nested form fields
 export { getInputFields } from './decorators/form/Input';
 

package/src/styles/list.scss

@@ -1,7 +1,7 @@
 @import 'utils/scrollbar';
 $header-height: 60px;
 $footer-height: 60px;
-$datagrid-height: calc(100vh - ($header-height + $footer-height));
+$datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
 .list {
   width: 100%;
   background-color: #2b2b2b;

package/src/utils/decerators.ts

@@ -0,0 +1,24 @@
+export type DecoratorMap<T, K> = (
+  { target, propertyKey }: { target: Object; propertyKey: string | symbol },
+  options: T
+) => K;
+export function createDecorator<T extends { name?: string }, K>(
+  key: Symbol,
+  options?: T,
+  map?: DecoratorMap<T, K>
+): PropertyDecorator {
+  return (target, propertyKey) => {
+    const propKeyStr = propertyKey.toString();
+    const existingCells: string[] = Reflect.getMetadata(key, target) || [];
+
+    if (options) {
+      const keyString = `${key.toString()}:${propKeyStr}:options`;
+      const config = map ? map({ target, propertyKey }, options) : options;
+
+      Reflect.defineMetadata(key, [...existingCells, propKeyStr], target);
+      Reflect.defineMetadata(keyString, config, target);
+    } else {
+      Reflect.defineMetadata(key, [...existingCells, propKeyStr], target);
+    }
+  };
+}