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

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

@@ -0,0 +1,176 @@
+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>>;
+
+function 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>
+  );
+}
+
+export function ListPage<T extends AnyClass>({
+  model,
+  getData,
+  onRemoveItem,
+  customHeader,
+}: {
+  model: any;
+  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) {
+            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);
+            }
+          }
+        }}
+      />
+      <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

@@ -2,15 +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: 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> {
-  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>({
@@ -18,15 +22,20 @@ export function FormPage<T extends AnyClass>({
   getDetailsData,
   onSubmit,
   redirect,
+  onSelectPreloader,
+  redirectBackOnSuccess = true,
+  type = 'json',
   ...rest
 }: FormPageProps<T>) {
   const formOptions = useMemo(() => getFormFields(model), [model]);
   return (
     <InnerForm
       getDetailsData={getDetailsData}
-      redirect={redirect}
       onSubmit={onSubmit}
       formOptions={formOptions}
+      redirectBackOnSuccess={redirectBackOnSuccess}
+      onSelectPreloader={onSelectPreloader}
+      type={type}
     />
   );
 }

package/src/decorators/form/Input.ts

@@ -8,13 +8,15 @@ 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 }[];
+  optionsPreload?: boolean;
+  nestedFields?: InputOptions[];
 }
 
 export function Input(options?: InputOptions): PropertyDecorator {
@@ -30,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/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,32 @@
-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 ListCellOptions<T> {
+  details?: { path: string; label: string };
+  edit?: { path: string; label: string };
+  delete?: { label: string };
+}
+
+export interface ListOptions<T> {
+  headers?: ListHeaderOptions;
+  cells?: ((item: T) => ListCellOptions<T>) | ListCellOptions<T>;
+}
 
-export function List(options?: ListOptions): ClassDecorator {
-	return (target: Function) => {
-		if (options) {
-			Reflect.defineMetadata(LIST_KEY, options, target);
-		}
-	};
+export function List<T>(options?: ListOptions<T> | ((item: T) => ListOptions<T>)): ClassDecorator {
+  return (target: Function) => {
+    if (options) {
+      Reflect.defineMetadata(LIST_KEY, options, target);
+    }
+  };
 }
 
-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/index.ts

@@ -1,12 +1,15 @@
 export type { OnSubmitFN, GetDetailsDataFN } from './components/pages/FormPage';
-export type { GetDataForList } from './components/pages/ListPage';
-export type { PaginatedResponse, PaginationParams } from './components/pages/ListPage';
 export type { InitPanelOptions } from './types/initPanelOptions';
 export type { ScreenCreatorData } from './types/ScreenCreatorData';
 export type { OnLogin } from './components/pages/Login';
 export type { AnyClass } from './types/AnyClass';
+export type {
+  GetDataForList,
+  PaginatedResponse,
+  GetDataParams,
+} from './components/components/list/ListPage';
 
-export { ListPage } from './components/pages/ListPage';
+export { ListPage } from './components/components/list/ListPage';
 export { FormPage } from './components/pages/FormPage';
 export type { FormPageProps } from './components/pages/FormPage';
 export { Login } from './components/pages/Login';
@@ -21,3 +24,5 @@ export { Crud } from './decorators/Crud';
 export { Cell } from './decorators/list/Cell';
 export { Input } from './decorators/form/Input';
 // Export page components
+export { getFormFields } from './decorators/form/getFormFields';
+export { getInputFields } from './decorators/form/Input';

package/src/styles/filter-popup.scss

@@ -0,0 +1,134 @@
+.filter-popup {
+  position: absolute;
+  top: 60px; //TODO: make this variable $list-header-height
+  //TODO: make this variable
+  left: 260px;
+  right: 10px;
+  background: #1e1e1e;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  border: 1px solid #333;
+  z-index: 10;
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    h3 {
+      margin: 0;
+      font-size: 1.2rem;
+      color: #ffffff;
+    }
+  }
+
+  &-content {
+    max-height: 400px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #2d2d2d;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #444;
+      border-radius: 4px;
+
+      &:hover {
+        background: #555;
+      }
+    }
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+  }
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0;
+  color: #999;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: #ffffff;
+  }
+}
+
+.filter-field {
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 0.9rem;
+    color: #bbb;
+  }
+
+  input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #444;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    background: #2d2d2d;
+    color: #ffffff;
+    transition: all 0.2s ease;
+
+    &:focus {
+      border-color: #0066cc;
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
+    }
+
+    &::placeholder {
+      color: #666;
+    }
+  }
+}
+
+.cancel-button,
+.apply-button {
+  padding: 10px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: all 0.2s ease;
+}
+
+.cancel-button {
+  background: #2d2d2d;
+  border: 1px solid #444;
+  color: #bbb;
+
+  &:hover {
+    background: #333;
+    border-color: #555;
+    color: #fff;
+  }
+}
+
+.apply-button {
+  background: #0066cc;
+  border: 1px solid #0056b3;
+  color: white;
+
+  &:hover {
+    background: #0056b3;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
+  }
+}

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,13 +1,15 @@
-@forward './sidebar';
-@forward './form';
-@forward './layout';
-@forward './list';
-@forward './login';
-@forward './error-boundary';
-@forward './image-uploader';
-@forward './counter';
-@forward './loading-screen';
-@forward './pagination';
+@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;
@@ -31,16 +33,10 @@
   *::after {
     box-sizing: border-box;
   }
-
-  // Imported styles will be scoped under .layout
-  @import './sidebar';
-  @import './form';
-  @import './list';
-  @import './login';
-  @import './error-boundary';
-  @import './image-uploader';
-  @import './counter';
-  @import './loading-screen';
-  @import './pagination';
-  @import './scrollbar';
+}
+.icon {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  fill: currentColor;
 }