proje-react-panel 1.0.15 → 1.0.16

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

@@ -0,0 +1,121 @@
+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 extends { id: string }> {
+  data: T[];
+  listData: ListData;
+  onRemoveItem?: (item: T) => Promise<void>;
+}
+
+export function Datagrid<T extends { id: string }>({ data, listData, onRemoveItem }: DatagridProps<T>) {
+  const cells = listData.cells;
+  const utilCells = listData.list?.utilCells;
+
+  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>
+              ))}
+              {utilCells?.details && <th>Details</th>}
+              {utilCells?.edit && <th>Edit</th>}
+              {utilCells?.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
+
+                  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>;
+                })}
+                {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>
+            ))}
+          </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 {
+  isOpen: boolean;
+  onClose: () => void;
+  onApplyFilters: (filters: Record<string, string>) => void;
+  listData: ListData;
+  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({
+  isOpen,
+  onClose,
+  onApplyFilters,
+  listData,
+  activeFilters,
+}: FilterPopupProps): 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>
+  );
+}

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

@@ -0,0 +1,178 @@
+import React, { useMemo, useCallback, useEffect, useState } from 'react';
+import { Link, 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 { 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 { 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 = ({
+  listData,
+  filtered,
+  onFilterClick,
+  customHeader,
+}: {
+  listData: ListData;
+  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>
+  );
+};
+
+export function ListPage<T extends AnyClass & { id: string }>({
+  model,
+  getData,
+  onRemoveItem,
+  customHeader,
+}: {
+  model: T;
+  getData: GetDataForList<T>;
+  customHeader?: React.ReactNode;
+  onRemoveItem?: (item: T) => Promise<void>;
+}) {
+  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 [isFilterOpen, setIsFilterOpen] = useState(false);
+  const [activeFilters, setActiveFilters] = useState<Record<string, string>>();
+  const listData = useMemo(() => getListFields(model), [model]);
+  const params = useParams();
+  const navigate = useNavigate();
+
+  const fetchData = useCallback(
+    async (page: number, filters?: Record<string, string>) => {
+      setLoading(true);
+      try {
+        const result = await getData({ page, filters: filters ?? activeFilters ?? {} });
+        setData(result.data);
+        setPagination({
+          total: result.total,
+          page: result.page,
+          limit: result.limit,
+        });
+      } catch (e) {
+        setError(e);
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [getData, activeFilters]
+  );
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const filtersFromUrl: Record<string, string> = {};
+    searchParams.forEach((value, key) => {
+      filtersFromUrl[key] = value;
+    });
+    setActiveFilters(filtersFromUrl);
+  }, [location.search]);
+
+  useEffect(() => {
+    if (activeFilters) {
+      fetchData(parseInt(params.page as string) || 1, activeFilters);
+    }
+  }, [fetchData, params.page, activeFilters]);
+
+  const handleFilterApply = (filters: Record<string, any>) => {
+    setActiveFilters(filters);
+
+    // Convert filters to URLSearchParams
+    const searchParams = new URLSearchParams();
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        searchParams.append(key, String(value));
+      }
+    });
+    const queryString = searchParams.toString();
+    const newUrl = `${location.pathname}${queryString ? `?${queryString}` : ''}`;
+    navigate(newUrl);
+    fetchData(1, filters); // Reset to first page when filters change
+  };
+
+  if (loading) return <LoadingScreen />;
+  if (error) return <ErrorComponent error={error} />;
+
+  return (
+    <div className="list">
+      <ListHeader
+        listData={listData}
+        filtered={!!(activeFilters && !!Object.keys(activeFilters).length)}
+        onFilterClick={() => setIsFilterOpen(true)}
+        customHeader={customHeader}
+      />
+      <Datagrid
+        listData={listData}
+        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);
+              },
+            });
+          }
+        }}
+      />
+      <div className="list-footer">
+        <Pagination pagination={pagination} onPageChange={fetchData} />
+      </div>
+      <FilterPopup
+        isOpen={isFilterOpen}
+        activeFilters={activeFilters}
+        onClose={() => setIsFilterOpen(false)}
+        onApplyFilters={handleFilterApply}
+        listData={listData}
+      />
+    </div>
+  );
+}

package/src/components/pages/FormPage.tsx

@@ -3,7 +3,7 @@ import { InnerForm } from '../components';
 import { AnyClass } from '../../types/AnyClass';
 import { getFormFields } from '../../decorators/form/getFormFields';
 
-export type GetDetailsDataFN<T> = (param: string) => Promise<T>;
+export type GetDetailsDataFN<T> = (param: Record<string, string>) => Promise<T>;
 export type OnSubmitFN<T> = (data: T) => Promise<T>;
 
 export interface FormPageProps<T extends AnyClass> {
@@ -11,6 +11,7 @@ export interface FormPageProps<T extends AnyClass> {
   getDetailsData?: GetDetailsDataFN<T>;
   redirect?: string;
   onSubmit: OnSubmitFN<T>;
+  redirectBackOnSuccess?: boolean;
 }
 
 export function FormPage<T extends AnyClass>({
@@ -18,15 +19,16 @@ export function FormPage<T extends AnyClass>({
   getDetailsData,
   onSubmit,
   redirect,
+  redirectBackOnSuccess = true,
   ...rest
 }: FormPageProps<T>) {
   const formOptions = useMemo(() => getFormFields(model), [model]);
   return (
     <InnerForm
       getDetailsData={getDetailsData}
-      redirect={redirect}
       onSubmit={onSubmit}
       formOptions={formOptions}
+      redirectBackOnSuccess={redirectBackOnSuccess}
     />
   );
 }

package/src/decorators/form/Input.ts

@@ -8,13 +8,14 @@ const isFieldSensitive = (fieldName: string): boolean => {
 };
 
 export interface InputOptions {
+  type?: 'input' | 'select' | 'textarea' | 'file-upload' | 'checkbox' | 'hidden' | 'nested';
+  inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
   name?: string;
   label?: string;
   placeholder?: string;
-  inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
-  type?: 'input' | 'select' | 'textarea' | 'file-upload' | 'checkbox' | 'hidden';
-  selectOptions?: string[]; //TODO: label/value
   cancelPasswordValidationOnEdit?: boolean;
+  options?: { value: string; label: string }[];
+  nestedFields?: InputOptions[];
 }
 
 export function Input(options?: InputOptions): PropertyDecorator {

package/src/decorators/list/Cell.ts

@@ -1,22 +1,32 @@
-import "reflect-metadata";
+import 'reflect-metadata';
 
-export const CELL_KEY = Symbol("cell");
+export const CELL_KEY = Symbol('cell');
+
+interface Filter {
+  type: 'string' | 'number' | 'date' | 'static-select';
+}
+
+export interface StaticSelectFilter extends Filter {
+  type: 'static-select';
+  options: { value: string; label: string }[];
+}
 
 export interface CellOptions {
-	name?: string;
-	title?: string;
-	type?: "string" | "date" | "image";
-	placeHolder?: string;
+  name?: string;
+  title?: string;
+  type?: 'string' | 'date' | 'image' | 'number';
+  placeHolder?: string;
+  filter?: Filter | StaticSelectFilter;
 }
 
 export function Cell(options?: CellOptions): PropertyDecorator {
-	return (target, propertyKey) => {
-		const existingCells: string[] = Reflect.getMetadata(CELL_KEY, target) || [];
-		Reflect.defineMetadata(CELL_KEY, [...existingCells, propertyKey.toString()], target);
+  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);
-		}
-	};
+    if (options) {
+      const keyString = `${CELL_KEY.toString()}:${propertyKey.toString()}:options`;
+      Reflect.defineMetadata(keyString, options, target);
+    }
+  };
 }

package/src/decorators/list/List.ts

@@ -1,17 +1,31 @@
-import "reflect-metadata";
+import 'reflect-metadata';
 
-const LIST_KEY = "List";
+const LIST_KEY = 'List';
 
-export interface ListOptions {}
+export interface ListHeaderOptions {
+  title?: string;
+  create?: { path: string; label: string };
+}
+
+export interface ListUtilCellOptions {
+  details?: { path: string; label: string };
+  edit?: { path: string; label: string };
+  delete?: { path: string; label: string };
+}
+
+export interface ListOptions {
+  headers?: ListHeaderOptions;
+  utilCells?: ListUtilCellOptions;
+}
 
 export function List(options?: ListOptions): ClassDecorator {
-	return (target: Function) => {
-		if (options) {
-			Reflect.defineMetadata(LIST_KEY, options, target);
-		}
-	};
+  return (target: Function) => {
+    if (options) {
+      Reflect.defineMetadata(LIST_KEY, options, target);
+    }
+  };
 }
 
 export function getClassListData(entityClass: any): ListOptions | undefined {
-	return Reflect.getMetadata(LIST_KEY, entityClass);
+  return Reflect.getMetadata(LIST_KEY, entityClass);
 }