proje-react-panel 1.0.14 → 1.0.16

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/components/list/Pagination.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+interface PaginationProps {
+  pagination: {
+    total: number;
+    page: number;
+    limit: number;
+  };
+  onPageChange: (page: number) => void;
+}
+
+export function Pagination({ pagination, onPageChange }: PaginationProps) {
+  const { total, page, limit } = pagination;
+  const totalPages = Math.floor(total / limit);
+
+  if (totalPages <= 1) return null;
+
+  const renderPageNumbers = () => {
+    const pages = [];
+    const range = 2; // Number of pages to show before and after current page
+
+    // Always show first 2 pages
+    for (let i = 1; i <= Math.min(2, totalPages); i++) {
+      pages.push(
+        <button
+          key={i}
+          onClick={() => onPageChange(i)}
+          className={`pagination-item ${page === i ? 'active' : ''}`}
+          disabled={page === i}
+        >
+          {i}
+        </button>
+      );
+    }
+
+    // Add ellipsis if needed
+    if (page - range > 3) {
+      pages.push(
+        <span key="ellipsis1" className="pagination-ellipsis">
+          ...
+        </span>
+      );
+    }
+
+    // Show pages around current page
+    for (let i = Math.max(3, page - range); i <= Math.min(totalPages - 2, page + range); i++) {
+      if (i > 2 && i < totalPages - 1) {
+        pages.push(
+          <button
+            key={i}
+            onClick={() => onPageChange(i)}
+            className={`pagination-item ${page === i ? 'active' : ''}`}
+            disabled={page === i}
+          >
+            {i}
+          </button>
+        );
+      }
+    }
+
+    // Add ellipsis if needed
+    if (page + range < totalPages - 2) {
+      pages.push(
+        <span key="ellipsis2" className="pagination-ellipsis">
+          ...
+        </span>
+      );
+    }
+
+    // Always show last 2 pages
+    for (let i = Math.max(totalPages - 1, 3); i <= totalPages; i++) {
+      if (i > 2) {
+        pages.push(
+          <button
+            key={i}
+            onClick={() => onPageChange(i)}
+            className={`pagination-item ${page === i ? 'active' : ''}`}
+            disabled={page === i}
+          >
+            {i}
+          </button>
+        );
+      }
+    }
+
+    return pages;
+  };
+
+  return (
+    <div className="pagination">
+      <button
+        onClick={() => onPageChange(page - 1)}
+        className={`pagination-item ${page === 1 ? 'disabled' : ''}`}
+        disabled={page === 1}
+        aria-disabled={page === 1}
+      >
+        Previous
+      </button>
+      {renderPageNumbers()}
+      <button
+        onClick={() => onPageChange(page + 1)}
+        className={`pagination-item ${page === totalPages ? 'disabled' : ''}`}
+        disabled={page === totalPages}
+        aria-disabled={page === totalPages}
+      >
+        Next
+      </button>
+    </div>
+  );
+}

package/src/components/components/list/index.ts

@@ -0,0 +1 @@
+ 

package/src/components/layout/Layout.tsx

@@ -8,15 +8,18 @@ export function Layout<IconType>({
 	children,
 	menu,
 	getIcons,
+	logout,
 }: {
 	children?: React.ReactNode;
 	menu?: (screens: Record<string, ScreenCreatorData>) => { name: string; path: string; iconType: IconType }[];
 	getIcons?: (iconType: IconType) => React.ReactNode;
+	logout?: () => void;
 }) {
 	const { user, screenPaths } = useAppStore((s) => ({
 		user: s.user,
 		screenPaths: s.screenPaths,
 	}));
+	const data = useAppStore();
 	const navigate = useNavigate();
 	if (!user) {
 		navigate(screenPaths.login);
@@ -24,7 +27,11 @@ export function Layout<IconType>({
 
 	return (
 		<div className="layout">
-			<SideBar menu={menu} getIcons={getIcons} />
+			<SideBar onLogout={() => {
+				if (logout) {
+					logout();
+				}
+			}} menu={menu} getIcons={getIcons} />
 			<main className="content">{children}</main>
 		</div>
 	);

package/src/components/layout/SideBar.tsx

@@ -1,42 +1,114 @@
-import React, { useState } from "react";
-import { Link } from "react-router";
-import { ScreenCreatorData } from "../../types/ScreenCreatorData";
-import { useAppStore } from "../../store/store";
+import React, { useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router';
+import { ScreenCreatorData } from '../../types/ScreenCreatorData';
+import { useAppStore } from '../../store/store';
 
 type GetMenuFunction<IconType> = (
-	screens: Record<string, ScreenCreatorData>
+  screens: Record<string, ScreenCreatorData>
 ) => { name: string; path: string; iconType: IconType }[];
 
 type GetIconsFunction<IconType> = (iconType: IconType) => React.ReactNode;
 
 export function SideBar<IconType>({
-	menu,
-	getIcons,
+  menu,
+  getIcons,
+  onLogout,
 }: {
-	menu?: GetMenuFunction<IconType>;
-	getIcons?: GetIconsFunction<IconType>;
+  menu?: GetMenuFunction<IconType>;
+  getIcons?: GetIconsFunction<IconType>;
+  onLogout?: () => void;
 }) {
-	const screens = useAppStore((s) => s.screens ?? {});
-	const [isOpen, setIsOpen] = useState(true);
+  const { screens, screenPaths } = useAppStore(s => ({
+    screens: s.screens ?? {},
+    screenPaths: s.screenPaths ?? {},
+  }));
+  const [isOpen, setIsOpen] = useState(true);
+  const location = useLocation();
+  const navigate = useNavigate();
 
-	return (
-		<div className={`sidebar ${isOpen ? "open" : "closed"}`}>
-			<button className="toggle-button" onClick={() => setIsOpen(!isOpen)}>
-				{isOpen ? "<" : ">"}
-			</button>
-			<nav className="nav-links">
-				{menu?.(screens).map((item, index) => (
-					<Link key={index} to={item.path} className="nav-link">
-						<span className={"nav-links-icon"}>{getIcons?.(item.iconType)}</span>
-						{isOpen ? <span>{item.name}</span> : null}
-					</Link>
-				))}
-				{/*{screens.map(([key, screen], index) => (
-					<Link key={`screen-${index}`} to={`/${key}`} className="nav-link">
-						{isOpen ? <span>{key}</span> : null}
-					</Link>
-				))}*/}
-			</nav>
-		</div>
-	);
+  // Helper function to determine if a link is active
+  const isActiveLink = (path: string) => {
+    // For root path, we need exact match
+    if (path === '/') {
+      return location.pathname === path;
+    }
+
+    // Normalize paths by removing leading/trailing slashes for comparison
+    const normalizedPath = path.replace(/^\/+|\/+$/g, '');
+    const normalizedLocation = location.pathname.replace(/^\/+|\/+$/g, '');
+
+    // Check if the current path matches the link path
+    return (
+      normalizedLocation === normalizedPath || normalizedLocation.startsWith(`${normalizedPath}/`)
+    );
+  };
+
+  return (
+    <div className={`sidebar ${isOpen ? 'open' : 'closed'}`}>
+      <button
+        className="toggle-button"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
+        aria-expanded={isOpen}
+      >
+        {isOpen ? '<' : '>'}
+      </button>
+      <nav className="nav-links">
+        {menu?.(screens).map((item, index) => (
+          <Link
+            key={index}
+            to={item.path}
+            className={`nav-link ${isActiveLink(item.path) ? 'active' : ''}`}
+            aria-current={isActiveLink(item.path) ? 'page' : undefined}
+          >
+            <span className={'nav-links-icon'}>{getIcons?.(item.iconType)}</span>
+            {isOpen ? <span>{item.name}</span> : null}
+          </Link>
+        ))}
+      </nav>
+      {onLogout && (
+        <div className="sidebar-footer">
+          <button
+            className="logout-button"
+            onClick={() => {
+              if (onLogout) {
+                onLogout();
+                navigate(screenPaths.login);
+              }
+            }}
+            aria-label="Logout"
+          >
+            <span className="nav-links-icon">
+              {
+                /*TODO: remove*/
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 12H2V4H6"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M10 8L14 4M14 4L10 0M14 4H6"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              }
+            </span>
+            {isOpen ? <span>Logout</span> : null}
+          </button>
+        </div>
+      )}
+    </div>
+  );
 }

package/src/components/layout/index.ts

@@ -0,0 +1,2 @@
+export { SideBar } from './SideBar';
+export { Layout } from './Layout';