proje-react-panel 1.0.17 → 1.1.1

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

package/src/components/list/ListHeader.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react';
+import { Link } from 'react-router';
+import { AnyClass } from '../../types/AnyClass';
+import CreateIcon from '../../assets/icons/svg/create.svg';
+import FilterIcon from '../../assets/icons/svg/filter.svg';
+import { ListPageMeta } from '../../decorators/list/getListPageMeta';
+
+interface ListHeaderProps<T extends AnyClass> {
+  listPageMeta: ListPageMeta<T>;
+  filtered: boolean;
+  onFilterClick: () => void;
+  customHeader?: React.ReactNode;
+}
+
+export function ListHeader<T extends AnyClass>({
+  listPageMeta,
+  filtered,
+  onFilterClick,
+  customHeader,
+}: ListHeaderProps<T>) {
+  const fields = useMemo(
+    () => listPageMeta.cells.filter(cell => !!cell.filter),
+    [listPageMeta.cells]
+  );
+
+  const header = listPageMeta.class.headers;
+  return (
+    <div className="list-header">
+      <div className="header-title">{header?.title || 'List'}</div>
+      {customHeader && <div className="header-custom">{customHeader}</div>}
+      <div className="header-actions">
+        {!!fields.length && (
+          <button onClick={onFilterClick} className="filter-button">
+            <FilterIcon className={`icon icon-filter ${filtered ? 'active' : ''}`} />
+            Filter
+          </button>
+        )}
+        {header?.create && (
+          <Link to={header.create.path} className="create-button">
+            <CreateIcon className="icon icon-create" />
+            {header.create.label}
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,85 +1,30 @@
 import React, { useMemo, useCallback, useEffect, useState } from 'react';
-import { Link, useParams, useNavigate } from 'react-router';
+import { useParams, useNavigate } from 'react-router';
 import { Datagrid } from './Datagrid';
 import { ErrorComponent } from '../ErrorComponent';
 import { LoadingScreen } from '../LoadingScreen';
-import { AnyClass } from '../../../types/AnyClass';
-import { getListFields } from '../../../decorators/list/getListFields';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { Pagination } from './Pagination';
-import { ListData } from '../../../decorators/list/ListData';
-import CreateIcon from '../../../assets/icons/svg/create.svg';
-import FilterIcon from '../../../assets/icons/svg/filter.svg';
+import { ListHeader } from './ListHeader';
 import { FilterPopup } from './FilterPopup';
-
-export interface GetDataParams {
-  page?: number;
-  limit?: number;
-  filters?: Record<string, any>;
-}
-
-export interface PaginatedResponse<T> {
-  data: T[];
-  total: number;
-  page: number;
-  limit: number;
-}
-
-export type GetDataForList<T> = (params: GetDataParams) => Promise<PaginatedResponse<T>>;
-
-const ListHeader = <T extends AnyClass>({
-  listData,
-  filtered,
-  onFilterClick,
-  customHeader,
-}: {
-  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;
-  return (
-    <div className="list-header">
-      <div className="header-title">{header?.title || 'List'}</div>
-      {customHeader && <div className="header-custom">{customHeader}</div>}
-      <div className="header-actions">
-        {!!fields.length && (
-          <button onClick={onFilterClick} className="filter-button">
-            <FilterIcon className={`icon icon-filter ${filtered ? 'active' : ''}`} />
-            Filter
-          </button>
-        )}
-        {header?.create && (
-          <Link to={header.create.path} className="create-button">
-            <CreateIcon className="icon icon-create" />
-            {header.create.label}
-          </Link>
-        )}
-      </div>
-    </div>
-  );
-};
+import { getListPageMeta } from '../../decorators/list/getListPageMeta';
 
 export function ListPage<T extends AnyClass>({
   model,
-  getData,
-  onRemoveItem,
   customHeader,
 }: {
-  model: T;
-  getData: GetDataForList<T>;
+  model: AnyClassConstructor<T>;
   customHeader?: React.ReactNode;
-  onRemoveItem?: (item: T) => Promise<void>;
 }) {
+  const listPageMeta = useMemo(() => getListPageMeta(model), [model]);
+
   const [loading, setLoading] = useState(true);
-  const [pagination, setPagination] = useState({ total: 0, page: 0, limit: 0 });
   const [data, setData] = useState<any>(null);
   const [error, setError] = useState<unknown>(null);
+
+  const [pagination, setPagination] = useState({ total: 0, page: 0, limit: 0 });
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   const [activeFilters, setActiveFilters] = useState<Record<string, string>>();
-  const listData = useMemo(() => getListFields(model), [model]);
   const params = useParams();
   const navigate = useNavigate();
 
@@ -87,7 +32,10 @@ export function ListPage<T extends AnyClass>({
     async (page: number, filters?: Record<string, string>) => {
       setLoading(true);
       try {
-        const result = await getData({ page, filters: filters ?? activeFilters ?? {} });
+        const result = await listPageMeta.class.getData({
+          page,
+          filters: filters ?? activeFilters ?? {},
+        });
         setData(result.data);
         setPagination({
           total: result.total,
@@ -101,7 +49,7 @@ export function ListPage<T extends AnyClass>({
         setLoading(false);
       }
     },
-    [getData, activeFilters]
+    [activeFilters, listPageMeta.class.getData]
   );
 
   useEffect(() => {
@@ -117,7 +65,7 @@ export function ListPage<T extends AnyClass>({
     if (activeFilters) {
       fetchData(parseInt(params.page as string) || 1, activeFilters);
     }
-  }, [fetchData, params.page, activeFilters]);
+  }, [fetchData, params.page, activeFilters, listPageMeta.class.getData]);
 
   const handleFilterApply = (filters: Record<string, any>) => {
     setActiveFilters(filters);
@@ -141,26 +89,16 @@ export function ListPage<T extends AnyClass>({
   return (
     <div className="list">
       <ListHeader
-        listData={listData}
+        listPageMeta={listPageMeta}
         filtered={!!(activeFilters && !!Object.keys(activeFilters).length)}
         onFilterClick={() => setIsFilterOpen(true)}
         customHeader={customHeader}
       />
       <Datagrid
-        listData={listData}
+        listPageMeta={listPageMeta}
         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);
-              },
-            });
-          }
+        onRemoveItem={async () => {
+          await fetchData(pagination.page);
         }}
       />
       <div className="list-footer">
@@ -171,7 +109,7 @@ export function ListPage<T extends AnyClass>({
         activeFilters={activeFilters}
         onClose={() => setIsFilterOpen(false)}
         onApplyFilters={handleFilterApply}
-        listData={listData}
+        listPageMeta={listPageMeta}
       />
     </div>
   );

package/src/decorators/details/Details.ts

@@ -0,0 +1,31 @@
+import 'reflect-metadata';
+import { AnyClass } from '../../types/AnyClass';
+
+const DETAILS_METADATA_KEY = 'DetailsMetaData';
+export type GetDetailsDataFN<T> = (param: Record<string, string>) => Promise<T>;
+
+interface DetailsOptions<T extends AnyClass> {
+  getDetailsData: GetDetailsDataFN<T>;
+}
+
+export interface DetailsConfiguration<T extends AnyClass> extends DetailsOptions<T> {}
+
+export function Details<T extends AnyClass>(options?: DetailsOptions<T>): ClassDecorator {
+  return (target: Function) => {
+    if (options) {
+      Reflect.defineMetadata(DETAILS_METADATA_KEY, options, target);
+    }
+  };
+}
+
+export function getDetailsConfiguration<T extends AnyClass>(
+  entityClass: T
+): DetailsConfiguration<T> {
+  const detailsConfiguration = Reflect.getMetadata(DETAILS_METADATA_KEY, entityClass);
+  if (!detailsConfiguration) {
+    throw new Error('Details decerator should be used on class');
+  }
+  return {
+    ...detailsConfiguration,
+  };
+}

package/src/decorators/details/DetailsItem.ts

@@ -0,0 +1,40 @@
+import 'reflect-metadata';
+import { AnyClass } from '../../types/AnyClass';
+
+const DETAILS_ITEM_KEY = Symbol('detailsItem');
+
+interface DetailsItemOptions {
+  //NOTE: all optional to support autoFields merging
+  name?: string;
+}
+export interface DetailsItemConfiguration extends DetailsItemOptions {
+  name: string;
+}
+
+export function DetailsItem(options?: DetailsItemOptions): PropertyDecorator {
+  return (target, propertyKey) => {
+    const existingInputs: string[] = Reflect.getMetadata(DETAILS_ITEM_KEY, target) || [];
+    Reflect.defineMetadata(DETAILS_ITEM_KEY, [...existingInputs, propertyKey.toString()], target);
+
+    if (options) {
+      const keyString = `${DETAILS_ITEM_KEY.toString()}:${propertyKey.toString()}:options`;
+      Reflect.defineMetadata(keyString, options, target);
+    }
+  };
+}
+
+export function getDetailsItemFields<T extends AnyClass>(
+  entityClass: T
+): DetailsItemConfiguration[] {
+  const prototype = (entityClass as any).prototype;
+  const inputFields: string[] = Reflect.getMetadata(DETAILS_ITEM_KEY, prototype) || [];
+
+  return inputFields.map(field => {
+    const fields: DetailsItemOptions =
+      Reflect.getMetadata(`${DETAILS_ITEM_KEY.toString()}:${field}:options`, prototype) || {};
+    return {
+      ...fields,
+      name: fields.name || field,
+    };
+  });
+}

package/src/decorators/details/getDetailsPageMeta.ts

@@ -0,0 +1,15 @@
+import { AnyClass } from '../../types/AnyClass';
+import { DetailsItemConfiguration, getDetailsItemFields } from './DetailsItem';
+import { DetailsConfiguration, getDetailsConfiguration } from './Details';
+
+export interface DetailsPageMeta<T extends AnyClass> {
+  class: DetailsConfiguration<T>;
+  items: DetailsItemConfiguration[];
+}
+
+export function getDetailsPageMeta<T extends AnyClass>(entityClass: T): DetailsPageMeta<T> {
+  return {
+    class: getDetailsConfiguration(entityClass),
+    items: getDetailsItemFields<T>(entityClass),
+  };
+}

package/src/decorators/form/Form.ts

@@ -1,18 +1,44 @@
-import "reflect-metadata";
-import { AnyClass } from "../../types/AnyClass";
+import 'reflect-metadata';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
+import { GetDetailsDataFN } from '../details/Details';
+import { InputConfiguration } from './Input';
 
-const FORM_METADATA_KEY = "FormMetadata"; // More descriptive name indicating it's a metadata key
+const DETAILS_METADATA_KEY = 'DetailsMetaData';
+export type OnSubmitFN<T> = (data: T | FormData) => Promise<T | FormData>;
 
-export interface FormConfiguration {} // Better describes that this is configuration/options for the form
+interface FormOptions<T extends AnyClass> {
+  onSubmit: OnSubmitFN<T>;
+  getDetailsData?: GetDetailsDataFN<T>;
+  redirectBackOnSuccess?: boolean;
+  type?: 'json' | 'formData';
+}
+
+export interface FormConfiguration<T extends AnyClass> extends FormOptions<T> {
+  redirectBackOnSuccess: boolean;
+  type: 'json' | 'formData';
+}
 
-export function FormDecorator(options?: FormConfiguration): ClassDecorator {
-	return (target: Function) => {
-		if (options) {
-			Reflect.defineMetadata(FORM_METADATA_KEY, options, target);
-		}
-	};
+export function Form<T extends AnyClass>(options?: FormOptions<T>): ClassDecorator {
+  return (target: Function) => {
+    if (options) {
+      Reflect.defineMetadata(DETAILS_METADATA_KEY, options, target);
+    }
+  };
 }
 
-export function getFormConfiguration(entityClass: AnyClass): FormConfiguration | undefined {
-	return Reflect.getMetadata(FORM_METADATA_KEY, entityClass);
+export function getFormConfiguration<T extends AnyClass, K extends AnyClassConstructor<T>>(
+  entityClass: K
+): FormConfiguration<T> {
+  const formOptions: FormOptions<T> = Reflect.getMetadata(
+    DETAILS_METADATA_KEY,
+    entityClass as Object
+  );
+  if (!formOptions) {
+    throw new Error('Form decerator should be used on class');
+  }
+  return {
+    ...formOptions,
+    type: formOptions.type ?? 'json',
+    redirectBackOnSuccess: formOptions.redirectBackOnSuccess ?? true,
+  };
 }

package/src/decorators/form/Input.ts

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import { AnyClass } from '../../types/AnyClass';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 
 const INPUT_KEY = Symbol('input');
 
@@ -7,15 +7,25 @@ const isFieldSensitive = (fieldName: string): boolean => {
   return ['password'].some(term => fieldName.toLowerCase().includes(term));
 };
 
+export type InputTypes = 'input' | 'textarea' | 'file-upload' | 'checkbox' | 'hidden' | 'nested';
+export type ExtendedInputTypes = InputTypes | 'select';
+
 export interface InputOptions {
-  type?: 'input' | 'select' | 'textarea' | 'file-upload' | 'checkbox' | 'hidden' | 'nested';
+  type?: InputTypes;
   inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
   name?: string;
   label?: string;
   placeholder?: string;
-  cancelPasswordValidationOnEdit?: boolean;
-  options?: { value: string; label: string }[];
-  nestedFields?: InputOptions[];
+  nestedFields?: InputConfiguration[];
+}
+
+export interface ExtendedInputOptions extends Omit<InputOptions, 'type'> {
+  type: ExtendedInputTypes;
+}
+
+export interface InputConfiguration extends Omit<InputOptions, 'type'> {
+  name: string;
+  type: ExtendedInputTypes;
 }
 
 export function Input(options?: InputOptions): PropertyDecorator {
@@ -30,8 +40,22 @@ export function Input(options?: InputOptions): PropertyDecorator {
   };
 }
 
-export function getInputFields<T extends AnyClass>(entityClass: T): InputOptions[] {
-  const prototype = entityClass.prototype;
+export function ExtendedInput(options?: ExtendedInputOptions): PropertyDecorator {
+  return (target, propertyKey) => {
+    const existingInputs: string[] = Reflect.getMetadata(INPUT_KEY, target) || [];
+    Reflect.defineMetadata(INPUT_KEY, [...existingInputs, propertyKey.toString()], target);
+
+    if (options) {
+      const keyString = `${INPUT_KEY.toString()}:${propertyKey.toString()}:options`;
+      Reflect.defineMetadata(keyString, options, target);
+    }
+  };
+}
+
+export function getInputFields<T extends AnyClass>(
+  entityClass: AnyClassConstructor<T>
+): InputConfiguration[] {
+  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) || {};
@@ -46,8 +70,6 @@ export function getInputFields<T extends AnyClass>(entityClass: T): InputOptions
       inputType: inputType,
       type: fields?.type ?? 'input',
       selectOptions: fields?.selectOptions ?? [],
-      cancelPasswordValidationOnEdit:
-        fields?.cancelPasswordValidationOnEdit ?? inputType === 'password',
     };
   });
 }

package/src/decorators/form/getFormPageMeta.ts

@@ -0,0 +1,21 @@
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
+import { getInputFields, InputConfiguration } from './Input';
+import { FormConfiguration, getFormConfiguration } from './Form';
+import { classValidatorResolver } from '@hookform/resolvers/class-validator';
+import { Resolver } from 'react-hook-form';
+
+export interface FormPageMeta<T extends AnyClass> {
+  resolver: Resolver<T>;
+  class: FormConfiguration<T>;
+  inputs: InputConfiguration[];
+}
+
+export function getFormPageMeta<T extends AnyClass, K extends AnyClassConstructor<T>>(
+  entityClass: K
+): FormPageMeta<T> {
+  return {
+    resolver: classValidatorResolver(entityClass),
+    class: getFormConfiguration(entityClass),
+    inputs: getInputFields(entityClass),
+  };
+}

package/src/decorators/form/inputs/SelectInput.ts

@@ -0,0 +1,19 @@
+import { ExtendedInput, ExtendedInputOptions, InputConfiguration, InputOptions } from '../Input';
+
+export interface SelectInputOptions extends InputOptions {
+  onSelectPreloader?: () => Promise<{ label: string; value: any }[]>;
+  defaultOptions?: { value: any; label: string }[];
+}
+
+export interface SelectInputConfiguration extends InputConfiguration {
+  type: 'select';
+  onSelectPreloader?: () => Promise<{ label: string; value: string }[]>;
+  defaultOptions?: { value: any; label: string }[];
+}
+
+export function SelectInput(options?: SelectInputOptions): PropertyDecorator {
+  return ExtendedInput({
+    ...options,
+    type: 'select',
+  } as ExtendedInputOptions);
+}