proje-react-panel 1.0.17-test3 → 1.0.17-test6

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

@@ -40,86 +40,93 @@ export function Datagrid<T>({ data, listData, onRemoveItem }: DatagridProps<T>)
             </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>;
-                })}
-                {listGeneralCells?.details && (
-                  <td>
-                    <Link to={listGeneralCells.details.path} className="util-cell-link">
-                      <SearchIcon className="icon icon-search" />
-                      <span className="util-cell-label">{listGeneralCells.details.label}</span>
-                    </Link>
-                  </td>
-                )}
-                {listGeneralCells?.edit && (
-                  <td>
-                    <Link to={listGeneralCells.edit.path} className="util-cell-link">
-                      <PencilIcon className="icon icon-pencil" />
-                      <span className="util-cell-label">{listGeneralCells.edit.label}</span>
-                    </Link>
-                  </td>
-                )}
-                {listGeneralCells?.delete && (
-                  <td>
-                    <a
-                      onClick={() => {
-                        onRemoveItem?.(item);
-                      }}
-                      className="util-cell-link"
-                    >
-                      <TrashIcon className="icon icon-trash" />
-                      <span className="util-cell-label">{listGeneralCells.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/ListPage.tsx

@@ -26,7 +26,7 @@ export interface PaginatedResponse<T> {
 
 export type GetDataForList<T> = (params: GetDataParams) => Promise<PaginatedResponse<T>>;
 
-const ListHeader = <T extends AnyClass>({
+function ListHeader<T extends AnyClass>({
   listData,
   filtered,
   onFilterClick,
@@ -36,7 +36,7 @@ const ListHeader = <T extends AnyClass>({
   filtered: boolean;
   onFilterClick: () => void;
   customHeader?: React.ReactNode;
-}) => {
+}) {
   const fields = useMemo(() => listData.cells.filter(cell => !!cell.filter), [listData.cells]);
 
   const header = listData.list?.headers;
@@ -60,7 +60,7 @@ const ListHeader = <T extends AnyClass>({
       </div>
     </div>
   );
-};
+}
 
 export function ListPage<T extends AnyClass>({
   model,
@@ -68,7 +68,7 @@ export function ListPage<T extends AnyClass>({
   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>({
         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,15 +2,17 @@ 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;
 }
 
@@ -19,6 +21,7 @@ export function FormPage<T extends AnyClass>({
   getDetailsData,
   onSubmit,
   redirect,
+  onSelectPreloader,
   redirectBackOnSuccess = true,
   ...rest
 }: FormPageProps<T>) {
@@ -29,6 +32,7 @@ export function FormPage<T extends AnyClass>({
       onSubmit={onSubmit}
       formOptions={formOptions}
       redirectBackOnSuccess={redirectBackOnSuccess}
+      onSelectPreloader={onSelectPreloader}
     />
   );
 }

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/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/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;