proje-react-panel 1.4.0 → 1.5.0

package/src/components/DetailsPage.tsx

@@ -33,10 +33,14 @@ export function DetailsPage<T extends AnyClass>({ model, CustomHeader }: Details
   }, [params, detailsClass.getDetailsData, detailsClass]);
 
   useEffect(() => {
+    if (!detailsClass.primaryId) {
+      return;
+    }
+
     setData(data => {
       if (data) {
         const detailsData =
-          allDetailsData?.[detailsClass.key]?.[data[detailsClass.primaryId] as string] ??
+          allDetailsData?.[detailsClass.key]?.[data[detailsClass.primaryId!] as string] ??
           ({} as Partial<T>);
 
         return { ...data, ...detailsData };

package/src/components/list/CellField.tsx

@@ -7,18 +7,21 @@ import { ImageCell } from './cells/ImageCell';
 import { UUIDCell } from './cells/UUIDCell';
 import { DefaultCell } from './cells/DefaultCell';
 import { DownloadCell } from './cells/DownloadCell';
+import { LinkCell } from './cells/LinkCell';
 
 interface CellFieldProps<T extends AnyClass> {
   configuration: CellConfiguration;
-  value: T[keyof T];
+  item: T;
 }
 
 export function CellField<T extends AnyClass>({
   configuration,
-  value,
+  item,
 }: CellFieldProps<T>): React.ReactElement {
   let render;
 
+  const value = item[configuration.name];
+
   switch (configuration.type) {
     case 'boolean':
       render = <BooleanCell value={value} />;
@@ -35,6 +38,9 @@ export function CellField<T extends AnyClass>({
     case 'download':
       render = <DownloadCell value={value} configuration={configuration} />;
       break;
+    case 'link':
+      render = <LinkCell item={item} configuration={configuration} />;
+      break;
     default:
       render = <DefaultCell value={value} configuration={configuration} />;
       break;

package/src/components/list/Datagrid.tsx

@@ -3,11 +3,13 @@ import { Link } from 'react-router';
 import { EmptyList } from './EmptyList';
 import SearchIcon from '../../assets/icons/svg/search.svg';
 import PencilIcon from '../../assets/icons/svg/pencil.svg';
+import DownArrowIcon from '../../assets/icons/svg/down-arrow-backup-2.svg';
 import TrashIcon from '../../assets/icons/svg/trash.svg';
 import { ListPageMeta } from '../../decorators/list/getListPageMeta';
 import { AnyClass } from '../../types/AnyClass';
 import { CellField } from './CellField';
 import { CellConfiguration } from '../../decorators/list/Cell';
+import { useAppStore } from '../../store/store';
 
 interface DatagridProps<T extends AnyClass> {
   data: T[];
@@ -21,6 +23,7 @@ export function Datagrid<T extends AnyClass>({
   onRemoveItem,
 }: DatagridProps<T>) {
   const cells = listPageMeta.cells;
+  const listData = useAppStore(state => state.listData[listPageMeta.class.key]);
   const listGeneralCells = data?.[0]
     ? typeof listPageMeta.class.cells === 'function'
       ? listPageMeta.class.cells?.(data[0])
@@ -38,9 +41,9 @@ export function Datagrid<T extends AnyClass>({
               {cells.map(cellOptions => (
                 <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
               ))}
-              {listGeneralCells?.details && <th>Details</th>}
-              {listGeneralCells?.edit && <th>Edit</th>}
-              {listGeneralCells?.delete && <th>Delete</th>}
+              {(listGeneralCells?.details ||
+                listGeneralCells?.edit ||
+                listGeneralCells?.delete) && <th>Actions</th>}
             </tr>
           </thead>
           <tbody>
@@ -50,55 +53,73 @@ export function Datagrid<T extends AnyClass>({
                   ? listPageMeta.class.cells?.(item)
                   : listPageMeta.class.cells
                 : null;
+              const listDataItem = listPageMeta.class.primaryId
+                ? (listData?.[item[listPageMeta.class.primaryId!] as string] as
+                    | Record<string, unknown>
+                    | undefined)
+                : null;
               return (
                 <tr key={index}>
                   {cells.map((configuration: CellConfiguration) => {
-                    const value = item[configuration.name];
                     return (
                       <CellField
                         key={configuration.name}
+                        item={{
+                          ...(listDataItem ?? {}),
+                          ...item,
+                        }}
                         configuration={configuration}
-                        value={value}
                       />
                     );
                   })}
-                  {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 && (
+                  {(listCells?.details || listCells?.edit || listCells?.delete) && (
                     <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={() => {
-                          listCells.delete
-                            ?.onRemoveItem?.(item)
-                            .then(() => {
-                              onRemoveItem?.(item);
-                            })
-                            .catch((e: unknown) => {
-                              console.error(e);
-                              const message =
-                                e instanceof Error ? e.message : 'Error deleting item';
-                              alert(message);
-                            });
-                        }}
-                        className="util-cell-link util-cell-link-remove"
-                      >
-                        <TrashIcon className="icon icon-trash" />
-                        <span className="util-cell-label">{listCells.delete.label}</span>
-                      </a>
+                      <div className="util-cell-actions">
+                        <p className="util-cell-actions-label">
+                          Actions <DownArrowIcon className="icon icon-down" />
+                        </p>
+                        <ul className="util-cell-actions-list">
+                          {listCells?.details && (
+                            <li>
+                              <Link to={listCells.details.path} className="util-cell-link">
+                                <SearchIcon className="icon icon-search" />
+                                <span className="util-cell-label">{listCells.details.label}</span>
+                              </Link>
+                            </li>
+                          )}
+                          {listCells?.edit && (
+                            <li>
+                              <Link to={listCells.edit.path} className="util-cell-link">
+                                <PencilIcon className="icon icon-pencil" />
+                                <span className="util-cell-label">{listCells.edit.label}</span>
+                              </Link>
+                            </li>
+                          )}
+                          {listCells?.delete && (
+                            <li>
+                              <a
+                                onClick={() => {
+                                  listCells.delete
+                                    ?.onRemoveItem?.(item)
+                                    .then(() => {
+                                      onRemoveItem?.(item);
+                                    })
+                                    .catch((e: unknown) => {
+                                      console.error(e);
+                                      const message =
+                                        e instanceof Error ? e.message : 'Error deleting item';
+                                      alert(message);
+                                    });
+                                }}
+                                className="util-cell-link util-cell-link-remove"
+                              >
+                                <TrashIcon className="icon icon-trash" />
+                                <span className="util-cell-label">{listCells.delete.label}</span>
+                              </a>
+                            </li>
+                          )}
+                        </ul>
+                      </div>
                     </td>
                   )}
                 </tr>

package/src/components/list/ListPage.tsx

@@ -106,6 +106,9 @@ export function ListPage<T extends AnyClass>({
       />
       <div className="list-footer">
         <Pagination pagination={pagination} onPageChange={fetchData} />
+        <p className="list-footer-total">
+          TOTAL: {pagination.total} / SHOWING: {pagination.limit}
+        </p>
       </div>
       <FilterPopup
         isOpen={isFilterOpen}

package/src/components/list/cells/ImageCell.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CellConfiguration } from '../../../decorators/list/Cell';
 import { ImageCellConfiguration } from '../../../decorators/list/cells/ImageCell';
+
 interface ImageCellProps {
   value: string;
   configuration: CellConfiguration;

package/src/components/list/cells/LinkCell.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+import { LinkCellConfiguration } from '../../../decorators/list/cells/LinkCell';
+import { Link } from 'react-router';
+
+interface LinkCellProps<T> {
+  item: T;
+  configuration: CellConfiguration;
+}
+
+export function LinkCell<T>({ item, configuration }: LinkCellProps<T>) {
+  const linkConfiguration = configuration as LinkCellConfiguration<T>;
+  const value = item[configuration.name as keyof T] ?? 'Link';
+
+  return (
+    <Link to={linkConfiguration.path ?? linkConfiguration.url ?? ''}>
+      {linkConfiguration.onClick ? (
+        <button
+          onClick={() => {
+            linkConfiguration.onClick?.(item as T);
+          }}
+        >
+          {value?.toString()}
+        </button>
+      ) : (
+        value?.toString() || linkConfiguration.placeHolder
+      )}
+    </Link>
+  );
+}

package/src/decorators/details/Details.ts

@@ -7,7 +7,7 @@ export type GetDetailsDataFN<T> = (param: Record<string, string>) => Promise<T>;
 interface DetailsOptions<T extends AnyClass> {
   getDetailsData: GetDetailsDataFN<T>;
   key?: string;
-  primaryId: keyof T;
+  primaryId?: keyof T;
 }
 
 export type DetailsConfiguration<T extends AnyClass> = DetailsOptions<T> & {

package/src/decorators/list/Cell.ts

@@ -14,7 +14,7 @@ export interface StaticSelectFilter extends Filter {
 }
 
 export type CellTypes = 'string' | 'date' | 'number' | 'boolean' | 'uuid';
-export type ExtendedCellTypes = CellTypes | 'image' | 'download';
+export type ExtendedCellTypes = CellTypes | 'image' | 'download' | 'link';
 
 export interface CellOptions {
   name?: string;

package/src/decorators/list/List.ts

@@ -35,9 +35,13 @@ export interface ListOptions<T> {
   getData: GetDataForList<T>;
   headers?: ListHeaderOptions;
   cells?: ((item: T) => ListCellOptions<T>) | ListCellOptions<T>;
+  primaryId?: string;
+  key?: string;
 }
 
-export type ListConfiguration<T> = ListOptions<T>;
+export type ListConfiguration<T> = ListOptions<T> & {
+  key: string;
+};
 
 export function List<T>(options?: ListOptions<T> | ((item: T) => ListOptions<T>)): ClassDecorator {
   return (target: object) => {
@@ -50,11 +54,13 @@ export function List<T>(options?: ListOptions<T> | ((item: T) => ListOptions<T>)
 export function getListConfiguration<T extends AnyClass>(
   entityClass: AnyClassConstructor<T>
 ): ListConfiguration<T> {
-  const listConfiguration = Reflect.getMetadata(LIST_METADATA_KEY, entityClass);
+  const listConfiguration: ListOptions<T> = Reflect.getMetadata(LIST_METADATA_KEY, entityClass);
   if (!listConfiguration) {
     throw new Error('List decerator should be used on class');
   }
   return {
     ...listConfiguration,
+    primaryId: listConfiguration.primaryId,
+    key: listConfiguration.key || entityClass.name,
   };
 }

package/src/decorators/list/cells/LinkCell.ts

@@ -0,0 +1,22 @@
+import { CellConfiguration, CellOptions } from '../Cell';
+import { ExtendedCell } from '../ExtendedCell';
+
+export interface LinkCellOptions<T> extends Omit<CellOptions, 'type'> {
+  url?: string;
+  path?: string;
+  onClick?: (data: T) => void;
+}
+
+export interface LinkCellConfiguration<T> extends CellConfiguration {
+  type: 'link';
+  url?: string;
+  path?: string;
+  onClick?: (data: T) => void;
+}
+
+export function LinkCell<T>(options?: LinkCellOptions<T>): PropertyDecorator {
+  return ExtendedCell(options, (_, options) => ({
+    ...options,
+    type: 'link',
+  }));
+}

package/src/index.ts

@@ -13,13 +13,14 @@ export {
 } from './decorators/list/List';
 export { ImageCell } from './decorators/list/cells/ImageCell';
 export { Cell } from './decorators/list/Cell';
+export { DownloadCell } from './decorators/list/cells/DownloadCell';
+export { LinkCell } from './decorators/list/cells/LinkCell';
 
 //FORM
 export { FormPage } from './components/form/FormPage';
 export { Form, type OnSubmitFN } from './decorators/form/Form';
 export { Input } from './decorators/form/Input';
 export { SelectInput } from './decorators/form/inputs/SelectInput';
-export { DownloadCell } from './decorators/list/cells/DownloadCell';
 //for nested form fields
 export { getInputFields } from './decorators/form/Input';
 
@@ -39,3 +40,4 @@ export { logout } from './utils/logout';
 
 //SERVICES
 export { updateDetailsData } from './services/DataService';
+export { updateListData } from './services/DataService';

package/src/services/DataService.ts

@@ -1,6 +1,7 @@
 import { getDetailsPageMeta } from '../decorators/details/getDetailsPageMeta';
 import { AnyClass, AnyClassConstructor } from '../types/AnyClass';
 import { useAppStore } from '../store/store';
+import { getListPageMeta } from '../decorators/list/getListPageMeta';
 
 export function updateDetailsData<T extends AnyClass>(
   model: AnyClassConstructor<T>,
@@ -8,11 +9,30 @@ export function updateDetailsData<T extends AnyClass>(
 ) {
   const { class: detailsClass } = getDetailsPageMeta(model);
   const key = detailsClass.key;
-  const id = detailsClass.primaryId;
-  console.log('updateDetailsData', model, data, detailsClass);
-  if (!data[id]) {
-    throw new Error(`Id ${id} not found in data`);
+  if (!detailsClass.primaryId) {
+    throw new Error('Primary id is required to use this utility function');
   }
 
-  useAppStore.getState().updateDetailsData(key, data[id]?.toString(), data);
+  if (!data[detailsClass.primaryId]) {
+    throw new Error(`Id ${detailsClass.primaryId} not found in data`);
+  }
+
+  useAppStore.getState().updateDetailsData(key, data[detailsClass.primaryId]?.toString(), data);
+}
+
+export function updateListData<T extends AnyClass>(
+  model: AnyClassConstructor<T>,
+  data: Partial<T>
+) {
+  const { class: listClass } = getListPageMeta(model);
+  const key = listClass.key;
+  if (!listClass.primaryId) {
+    throw new Error('Primary id is required to use this utility function');
+  }
+
+  if (!data[listClass.primaryId]) {
+    throw new Error(`Id ${listClass.primaryId} not found in data`);
+  }
+
+  useAppStore.getState().updateListData(key, data[listClass.primaryId]?.toString(), data);
 }

package/src/store/store.ts

@@ -6,6 +6,8 @@ import { User } from '../types/User';
 interface AppState {
   detailsData: Record<string, Record<string, unknown>>;
   updateDetailsData: (key: string, id: string, data: unknown) => void;
+  listData: Record<string, Record<string, unknown>>;
+  updateListData: (key: string, id: string, data: unknown) => void;
   user: User | null;
   login: (user: User) => void;
   logout: () => void;
@@ -25,6 +27,11 @@ export const useAppStore = createWithEqualityFn<AppState>()(
             [key]: { ...get().detailsData[key], [id]: data },
           },
         }),
+      listData: {},
+      updateListData: (key: string, id: string, data: unknown) =>
+        set({
+          listData: { ...get().listData, [key]: { ...get().listData[key], [id]: data } },
+        }),
     }),
     {
       name: 'app-store-1',

package/src/styles/list.scss

@@ -64,10 +64,16 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     align-items: center;
     height: $footer-height;
     font-size: 24px;
+    padding-right: 12px;
     font-weight: bold;
     text-align: center;
     color: #ffffff;
   }
+  .list-footer-total {
+    font-size: 12px;
+    font-weight: 500;
+    color: #ffffff;
+  }
   .datagrid {
     padding: 0 0 0 8px;
     height: $datagrid-height;
@@ -158,6 +164,11 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
       fill: #ff0000;
       stroke: none;
     }
+    &.icon-down {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+    }
   }
 
   .util-cell-label {
@@ -209,3 +220,48 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     transition: background-color 0.2s ease;
   }
 }
+.util-cell-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  &:hover {
+    .util-cell-actions-list {
+      display: flex;
+    }
+  }
+}
+.util-cell-actions-label {
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: underline;
+}
+.util-cell-actions-list {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  display: none;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background-color: #2b2b2b;
+  border: 1px solid #444444;
+  border-radius: 4px;
+  z-index: 1000;
+  > li {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #444444;
+    cursor: pointer;
+    &:hover {
+      background-color: #444444;
+    }
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}