proje-react-panel 1.5.0 → 1.6.0

package/src/components/list/CellField.tsx

@@ -20,31 +20,40 @@ export function CellField<T extends AnyClass>({
 }: CellFieldProps<T>): React.ReactElement {
   let render;
 
-  const value = item[configuration.name];
-
   switch (configuration.type) {
     case 'boolean':
-      render = <BooleanCell value={value} />;
+      render = <BooleanCell item={item} configuration={configuration} />;
       break;
     case 'date':
-      render = <DateCell value={value} />;
+      render = <DateCell item={item} configuration={configuration} />;
       break;
     case 'image':
-      render = <ImageCell value={value} configuration={configuration} />;
+      render = <ImageCell item={item} configuration={configuration} />;
       break;
     case 'uuid':
-      render = <UUIDCell value={value} />;
+      render = <UUIDCell item={item} configuration={configuration} />;
       break;
     case 'download':
-      render = <DownloadCell value={value} configuration={configuration} />;
+      render = <DownloadCell item={item} configuration={configuration} />;
       break;
     case 'link':
       render = <LinkCell item={item} configuration={configuration} />;
       break;
     default:
-      render = <DefaultCell value={value} configuration={configuration} />;
+      render = <DefaultCell item={item} configuration={configuration} />;
       break;
   }
-
-  return <td key={configuration.name}>{render}</td>;
+  const width = configuration.style?.width;
+  const minWidth = configuration.style?.minWidth;
+  return (
+    <td
+      key={configuration.name}
+      style={{
+        minWidth,
+        width,
+      }}
+    >
+      {render}
+    </td>
+  );
 }

package/src/components/list/Datagrid.tsx

@@ -24,10 +24,10 @@ export function Datagrid<T extends AnyClass>({
 }: 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])
-      : listPageMeta.class.cells
+  const listActions = data?.[0]
+    ? typeof listPageMeta.class.actions === 'function'
+      ? listPageMeta.class.actions?.(data[0])
+      : listPageMeta.class.actions
     : null;
 
   return (
@@ -39,20 +39,27 @@ export function Datagrid<T extends AnyClass>({
           <thead>
             <tr>
               {cells.map(cellOptions => (
-                <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
+                <th
+                  key={cellOptions.name}
+                  style={{ width: cellOptions.style?.width, minWidth: cellOptions.style?.minWidth }}
+                >
+                  {cellOptions.title ?? cellOptions.name}
+                </th>
               ))}
-              {(listGeneralCells?.details ||
-                listGeneralCells?.edit ||
-                listGeneralCells?.delete) && <th>Actions</th>}
+              {(listActions?.details ||
+                listActions?.edit ||
+                listActions?.delete ||
+                listActions?.customActions?.length) && <th style={{ width: '30px' }}>Actions</th>}
             </tr>
           </thead>
           <tbody>
             {data.map((item, index) => {
               const listCells = item
-                ? typeof listPageMeta.class.cells === 'function'
-                  ? listPageMeta.class.cells?.(item)
-                  : listPageMeta.class.cells
+                ? typeof listPageMeta.class.actions === 'function'
+                  ? listPageMeta.class.actions?.(item)
+                  : listPageMeta.class.actions
                 : null;
+              //TODO: memoize this
               const listDataItem = listPageMeta.class.primaryId
                 ? (listData?.[item[listPageMeta.class.primaryId!] as string] as
                     | Record<string, unknown>
@@ -73,7 +80,7 @@ export function Datagrid<T extends AnyClass>({
                     );
                   })}
                   {(listCells?.details || listCells?.edit || listCells?.delete) && (
-                    <td>
+                    <td style={{ width: '30px' }}>
                       <div className="util-cell-actions">
                         <p className="util-cell-actions-label">
                           Actions <DownArrowIcon className="icon icon-down" />
@@ -118,6 +125,13 @@ export function Datagrid<T extends AnyClass>({
                               </a>
                             </li>
                           )}
+                          {listCells?.customActions?.map(action => (
+                            <li key={action.label}>
+                              <a onClick={() => action.onClick(item)} className="util-cell-link">
+                                <span className="util-cell-label">{action.label}</span>
+                              </a>
+                            </li>
+                          ))}
                         </ul>
                       </div>
                     </td>

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

@@ -1,12 +1,17 @@
 import React from 'react';
 import CheckIcon from '../../../assets/icons/svg/check.svg';
 import CrossIcon from '../../../assets/icons/svg/cross.svg';
+import { AnyClass } from '../../../types/AnyClass';
+import { CellConfiguration } from '../../../decorators/list/Cell';
 
 interface BooleanCellProps {
-  value: boolean;
+  item: AnyClass;
+  configuration: CellConfiguration;
 }
 
-export function BooleanCell({ value }: BooleanCellProps) {
+export function BooleanCell({ item, configuration }: BooleanCellProps) {
+  const value = item[configuration.name];
+
   return value ? (
     <CheckIcon className="icon icon-true" />
   ) : (

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

@@ -1,10 +1,14 @@
 import React from 'react';
+import { AnyClass } from '../../../types/AnyClass';
+import { CellConfiguration } from '../../../decorators/list/Cell';
 
 interface DateCellProps {
-  value: string | number | Date;
+  item: AnyClass;
+  configuration: CellConfiguration;
 }
 
-export function DateCell({ value }: DateCellProps) {
+export function DateCell({ item, configuration }: DateCellProps) {
+  const value = item[configuration.name];
   if (!value) return <>-</>;
 
   const date = new Date(value);

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { CellConfiguration } from '../../../decorators/list/Cell';
+import { AnyClass } from '../../../types/AnyClass';
 
 interface DefaultCellProps {
-  //TODO: any is not a good solution, we need to find a better way to do this
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any;
+  item: AnyClass;
   configuration: CellConfiguration;
 }
 
-export function DefaultCell({ value, configuration }: DefaultCellProps): React.ReactElement {
+export function DefaultCell({ item, configuration }: DefaultCellProps): React.ReactElement {
+  const value = item[configuration.name];
   return <>{value ? value.toString() : configuration.placeHolder}</>;
 }

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import { CellConfiguration } from '../../../decorators/list/Cell';
 import { DownloadCellConfiguration } from '../../../decorators/list/cells/DownloadCell';
+import { AnyClass } from '../../../types/AnyClass';
 
 interface DownloadCellProps {
-  value: string;
+  item: AnyClass;
   configuration: CellConfiguration;
 }
 
-export function DownloadCell({ value, configuration }: DownloadCellProps): React.ReactElement {
+export function DownloadCell({ item, configuration }: DownloadCellProps): React.ReactElement {
+  const value = item[configuration.name];
   if (!value) return <>-</>;
 
   const downloadConfiguration = configuration as DownloadCellConfiguration;

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

@@ -1,14 +1,16 @@
 import React from 'react';
 import { CellConfiguration } from '../../../decorators/list/Cell';
 import { ImageCellConfiguration } from '../../../decorators/list/cells/ImageCell';
+import { AnyClass } from '../../../types/AnyClass';
 
 interface ImageCellProps {
-  value: string;
+  item: AnyClass;
   configuration: CellConfiguration;
 }
 
-export function ImageCell({ value, configuration }: ImageCellProps) {
+export function ImageCell({ item, configuration }: ImageCellProps) {
   const imageConfiguration = configuration as ImageCellConfiguration;
+  const value = item[configuration.name];
   if (!value) return <>-</>;
 
   return (

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

@@ -15,13 +15,14 @@ export function LinkCell<T>({ item, configuration }: LinkCellProps<T>) {
   return (
     <Link to={linkConfiguration.path ?? linkConfiguration.url ?? ''}>
       {linkConfiguration.onClick ? (
-        <button
+        <a
+          className="util-cell-link"
           onClick={() => {
             linkConfiguration.onClick?.(item as T);
           }}
         >
           {value?.toString()}
-        </button>
+        </a>
       ) : (
         value?.toString() || linkConfiguration.placeHolder
       )}

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

@@ -1,10 +1,14 @@
 import React from 'react';
+import { AnyClass } from '../../../types/AnyClass';
+import { CellConfiguration } from '../../../decorators/list/Cell';
 
 interface UUIDCellProps {
-  value: string;
+  item: AnyClass;
+  configuration: CellConfiguration;
 }
 
-export function UUIDCell({ value }: UUIDCellProps) {
+export function UUIDCell({ item, configuration }: UUIDCellProps) {
+  const value = item[configuration.name];
   if (!value || typeof value !== 'string' || value.length < 6) return <>-</>;
 
   return <>{`${value.slice(0, 3)}...${value.slice(-3)}`}</>;

package/src/decorators/list/Cell.ts

@@ -22,6 +22,10 @@ export interface CellOptions {
   type?: CellTypes;
   placeHolder?: string;
   filter?: Filter | StaticSelectFilter;
+  style?: {
+    minWidth?: string;
+    width?: string;
+  };
 }
 
 export interface CellConfiguration extends Omit<CellOptions, 'type'> {

package/src/decorators/list/List.ts

@@ -25,7 +25,8 @@ export interface ListHeaderOptions {
   create?: { path: string; label: string };
 }
 
-export interface ListCellOptions<T> {
+export interface ListActionOptions<T> {
+  customActions?: { label: string; onClick: (item: T) => void; icon?: string }[];
   details?: { path: string; label: string };
   edit?: { path: string; label: string };
   delete?: { label: string; onRemoveItem?: (item: T) => Promise<void> };
@@ -34,7 +35,7 @@ export interface ListCellOptions<T> {
 export interface ListOptions<T> {
   getData: GetDataForList<T>;
   headers?: ListHeaderOptions;
-  cells?: ((item: T) => ListCellOptions<T>) | ListCellOptions<T>;
+  actions?: ((item: T) => ListActionOptions<T>) | ListActionOptions<T>;
   primaryId?: string;
   key?: string;
 }

package/src/store/store.ts

@@ -34,7 +34,7 @@ export const useAppStore = createWithEqualityFn<AppState>()(
         }),
     }),
     {
-      name: 'app-store-1',
+      name: 'proje-panel-store',
       storage: createJSONStorage(() => localStorage),
       partialize: state => ({
         user: state.user,

package/src/styles/components/button.scss

@@ -0,0 +1,14 @@
+.panel-button {
+  padding: 0.5rem 1rem;
+  border: 1px solid #444444;
+  border-radius: 4px;
+  background-color: cornflowerblue;
+  color: #ffffff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  &:hover {
+    transform: scale(1.01);
+  }
+}

package/src/styles/index.scss

@@ -11,8 +11,8 @@
 @import './components/uploader.scss';
 @import './components/checkbox';
 @import './components/form-header';
+@import './components/button';
 @import './details';
-
 //TODO: import deprecated
 .layout {
   display: flex;

package/src/styles/list.scss

@@ -86,14 +86,18 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
   }
 
   .datagrid-table {
-    width: 100%;
+    min-width: 100%;
+    table-layout: fixed;
     border-collapse: collapse;
+    position: relative;
 
     th,
     td {
       padding: 12px 16px;
       text-align: left;
       border-bottom: 1px solid #444444;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     th {
@@ -265,3 +269,6 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     }
   }
 }
+.util-cell-link {
+  cursor: pointer;
+}