proje-react-panel 1.0.15 → 1.0.17-test1

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/index.scss

@@ -1,6 +1,6 @@
+@forward './layout';
 @forward './sidebar';
 @forward './form';
-@forward './layout';
 @forward './list';
 @forward './login';
 @forward './error-boundary';
@@ -8,6 +8,7 @@
 @forward './counter';
 @forward './loading-screen';
 @forward './pagination';
+@forward './filter-popup';
 
 .layout {
   display: flex;
@@ -31,16 +32,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;
 }

package/src/styles/list.scss

@@ -1,12 +1,9 @@
-@import './scrollbar';
+@import 'utils/scrollbar';
 $header-height: 60px;
 $footer-height: 60px;
 $datagrid-height: calc(100vh - ($header-height + $footer-height));
 .list {
   width: 100%;
-  padding: 0 0 0 16px;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   background-color: #2b2b2b;
   color: #e0e0e0;
   max-height: 100vh;
@@ -16,11 +13,51 @@ $datagrid-height: calc(100vh - ($header-height + $footer-height));
 
   .list-header {
     height: $header-height;
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    background: linear-gradient(90deg, #2b2b2b 0%, #3c3c3c 100%);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+    .header-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #ffffff;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .header-actions {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+
+      .create-button {
+        padding: 8px 16px;
+        background-color: #4caf50;
+        color: white;
+        border-radius: 4px;
+        text-decoration: none;
+        font-size: 14px;
+        font-weight: 500;
+        transition: background-color 0.2s ease;
+
+        &:hover {
+          background-color: #45a049;
+        }
+        .icon-create {
+          fill: currentColor;
+          stroke: none;
+          position: relative;
+          top: 2px;
+          right: 2px;
+        }
+      }
+    }
   }
+
   .list-footer {
     display: flex;
     justify-content: space-between;
@@ -32,6 +69,7 @@ $datagrid-height: calc(100vh - ($header-height + $footer-height));
     color: #ffffff;
   }
   .datagrid {
+    padding: 0 0 0 8px;
     height: $datagrid-height;
     min-height: $datagrid-height;
     max-height: $datagrid-height;
@@ -65,4 +103,107 @@ $datagrid-height: calc(100vh - ($header-height + $footer-height));
       background-color: #444444;
     }
   }
+
+  .empty-list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: 2rem;
+
+    .empty-list-content {
+      text-align: center;
+      color: #888;
+
+      svg {
+        margin-bottom: 1rem;
+        color: #666;
+      }
+
+      h3 {
+        font-size: 1.5rem;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        color: #fff;
+      }
+
+      p {
+        font-size: 1rem;
+        color: #888;
+      }
+    }
+  }
+}
+
+.util-cell-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+  text-decoration: none;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: #333;
+  }
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    stroke: none;
+    &.icon-trash {
+      fill: #ff0000;
+      stroke: none;
+    }
+  }
+
+  .util-cell-label {
+    font-size: 14px;
+  }
+}
+
+.filter-button {
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #45a049;
+  }
+  .icon-filter {
+    position: relative;
+    top: 2px;
+    right: 2px;
+    width: 15px;
+    height: 15px;
+    stroke: currentColor;
+    stroke-width: 2;
+    fill: none;
+    &.active {
+      fill: currentColor;
+    }
+  }
+}
+.header-custom {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 24px;
+  gap: 16px;
+  a {
+    padding: 8px 16px;
+    background-color: #4caf50;
+    color: white;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.2s ease;
+  }
 }

package/src/types/ScreenCreatorData.ts

@@ -1,14 +1,14 @@
-import { CellOptions } from "../decorators/list/Cell";
-import { CrudOptions } from "../decorators/Crud";
-import { InputOptions } from "../decorators/form/Input";
-import { ListOptions } from "../decorators/list/List";
-
+import { CellOptions } from '../decorators/list/Cell';
+import { CrudOptions } from '../decorators/Crud';
+import { InputOptions } from '../decorators/form/Input';
+import { ListOptions } from '../decorators/list/List';
+//TODO: remove
 export interface ScreenCreatorData {
-	resolver: any;
-	fields: string[];
-	inputs: InputOptions[];
-	crud?: CrudOptions;
-	path: string;
-	list?: ListOptions;
-	cells: CellOptions[];
+  resolver: any;
+  fields: string[];
+  inputs: InputOptions[];
+  crud?: CrudOptions;
+  path: string;
+  list?: ListOptions<any>;
+  cells: CellOptions[];
 }

package/src/types/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import React from 'react';
+  const SVGComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default SVGComponent;
+}

package/src/components/list/Datagrid.tsx

@@ -1,101 +0,0 @@
-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';
-
-interface ListProps<T> {
-  data: T[];
-  cells: CellOptions[];
-}
-
-export function Datagrid<T>({ data, cells }: ListProps<T>) {
-  if (!data || data.length === 0) {
-    return <div>No items available</div>;
-  }
-
-  return (
-    <div className="datagrid">
-      <table className="datagrid-table">
-        <thead>
-          <tr>
-            {cells.map(cellOptions => (
-              <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
-            ))}
-            <th />
-            <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>;
-              })}
-              <td>
-                {/*@ts-ignore*/}
-                <Link to={'edit/' + (item?.id ?? '-')}>Edit</Link>
-                {/*@ts-ignore*/}
-                <Link to={'details/' + (item?.id ?? '-')}>Details</Link>
-              </td>
-              <td>
-                <button
-                  onClick={() => {
-                    /*@ts-ignore*/
-                    //CrudApi.delete({ ...fetchSettings, token }, screen.controller, item?.id);
-                  }}
-                >
-                  Delete
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/src/components/pages/ListPage.tsx

@@ -1,85 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import { useEffect, useState } from 'react';
-import { Link, useParams } from 'react-router';
-import { Datagrid } from '../list/Datagrid';
-import { ErrorComponent } from '../components/ErrorComponent';
-import { LoadingScreen } from '../components/LoadingScreen';
-import { AnyClass } from '../../types/AnyClass';
-import { getListFields } from '../../decorators/list/getListFields';
-import { Pagination } from '../list/Pagination';
-
-export interface PaginationParams {
-  page?: number;
-  limit?: number;
-}
-
-export interface PaginatedResponse<T> {
-  data: T[];
-  total: number;
-  page: number;
-  limit: number;
-}
-
-export type GetDataForList<T> = ({
-  page,
-}: PaginationParams) => PaginatedResponse<T> | Promise<PaginatedResponse<T>>;
-
-export function ListPage<T extends AnyClass>({
-  model,
-  getData,
-}: {
-  model: T;
-  getData: GetDataForList<T>;
-}) {
-  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>(null);
-  const listData = useMemo(() => getListFields(model), [model]);
-  const params = useParams();
-
-  const fetchData = useCallback(
-    async (page: number) => {
-      setLoading(true);
-      try {
-        const result = await getData({ page });
-        setData(result.data);
-        setPagination({
-          total: result.total,
-          page: result.page,
-          limit: result.limit,
-        });
-      } catch (e: unknown) {
-        setError(e);
-        console.error(e);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [getData]
-  );
-
-  useEffect(() => {
-    fetchData(parseInt(params.page as string) || 1);
-  }, [fetchData, params.page]);
-
-  if (loading) return <LoadingScreen />;
-  if (error) return <ErrorComponent error={error} />;
-
-  return (
-    <div className="list">
-      <div className="list-header">
-        <Link to={'create'}>Create</Link>
-      </div>
-      <Datagrid cells={listData.cells} data={data} />
-      <div className="list-footer">
-        <Pagination
-          pagination={pagination}
-          onPageChange={(page: number) => {
-            fetchData(page);
-          }}
-        />
-      </div>
-    </div>
-  );
-}