header item scalability

Vizzuality · Aug 31, 2023 · 3950c58 · 3950c58
1 parent b0870b9
commit 3950c58
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 45 deletions.
diff --git a/.../project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx b/.../project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
@@ -6,23 +6,16 @@ import { cn } from 'utils/cn';
 
 import { HeaderItem } from './types';
 
-const HeaderItem = ({
-  className,
-  text,
-  name,
-  columns,
-  sorting,
-  onClick,
-}: HeaderItem): JSX.Element => {
+const HeaderItem = ({ className, text, name, sorting, onClick }: HeaderItem): JSX.Element => {
   const sortingMatches = /^(-?)(.+)$/.exec(sorting);
   const sortField = sortingMatches[2];
   const sortOrder = sortingMatches[1] === '-' ? 'desc' : 'asc';
 
-  const isActive = columns[name] === sortField;
+  const isActive = name === sortField;
 
   const handleClick = useCallback(() => {
-    onClick(columns[name]);
-  }, [onClick, columns, name]);
+    onClick(name);
+  }, [onClick, name]);
 
   return (
     <button

diff --git a/...t/project/sidebar/project/inventory-panel/components/inventory-table/header-item/types.ts b/...t/project/sidebar/project/inventory-panel/components/inventory-table/header-item/types.ts
@@ -2,9 +2,6 @@ export type HeaderItem = {
   className?: string;
   text: string;
   name: string;
-  columns: {
-    [key: string]: string;
-  };
   sorting: string;
   onClick?: (field: string) => void;
 };
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
@@ -1,5 +1,6 @@
 import Checkbox from 'components/forms/checkbox';
 import Loading from 'components/loading';
+import { cn } from 'utils/cn';
 
 import HeaderItem from './header-item';
 import RowItem from './row-item';
@@ -43,29 +44,24 @@ const InventoryTable = ({
                   onChange={onSelectAll}
                 />
               </th>
-              {columns['name'] && (
-                <th className="flex-1 pl-2">
-                  <HeaderItem
-                    text={'Name'}
-                    name={'name'}
-                    columns={columns}
-                    sorting={sorting}
-                    onClick={onSortChange}
-                  />
-                </th>
-              )}
-              {columns['tag'] && (
-                <th className="flex flex-1 justify-start py-2 pl-14">
-                  <HeaderItem
-                    className="justify-center"
-                    text={'Type'}
-                    name={'tag'}
-                    columns={columns}
-                    sorting={sorting}
-                    onClick={onSortChange}
-                  />
-                </th>
-              )}
+              {columns.map((column) => {
+                return (
+                  <th
+                    key={column.name}
+                    className={cn({
+                      'flex-1 border pl-2': true,
+                      [column.className]: !!column.className,
+                    })}
+                  >
+                    <HeaderItem
+                      text={column.text}
+                      name={column.name}
+                      sorting={sorting}
+                      onClick={onSortChange}
+                    />
+                  </th>
+                );
+              })}
             </tr>
           </thead>
           <tbody className="block max-h-[calc(100vh-430px)] divide-y divide-gray-400 overflow-y-auto overflow-x-hidden pl-1 align-baseline text-sm">

diff --git a/...out/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx b/...out/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
@@ -31,7 +31,12 @@ const RowItem = ({
           checked={selectedIds.includes(id)}
         />
       </td>
-      <td className="px-1 pb-2 pt-5">
+      <td
+        className={cn({
+          'flex flex-col px-1 pb-2 pt-5': true,
+          'w-52': tag,
+        })}
+      >
         <span className="inline-flex">{name}</span>
         <div className="mt-1.5 text-xs text-gray-300">
           Currently in use in

diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts
@@ -13,8 +13,10 @@ export type InventoryTable = {
   data: DataItem[];
   noDataMessage: string;
   columns: {
-    [key: string]: string;
-  };
+    name: string;
+    text: string;
+    className?: string;
+  }[];
   sorting: string;
   selectedIds: string[];
   onSortChange: (field: string) => void;

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
@@ -13,10 +13,17 @@ import { Feature } from 'types/api/feature';
 
 import InventoryTable, { type DataItem } from '../components/inventory-table';
 
-const FEATURES_TABLE_COLUMNS = {
-  name: 'featureClassName',
-  tag: 'tag',
-};
+const FEATURES_TABLE_COLUMNS = [
+  {
+    name: 'featureClassName',
+    text: 'Name',
+  },
+  {
+    name: 'tag',
+    text: 'Type',
+    className: 'flex flex-1 justify-start py-2 pl-14',
+  },
+];
 
 const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -26,7 +33,7 @@ const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }):
   );
 
   const [filters, setFilters] = useState<Parameters<typeof useAllFeatures>[1]>({
-    sort: 'featureClassName',
+    sort: FEATURES_TABLE_COLUMNS[0].name,
   });
   const [selectedFeaturesIds, setSelectedFeaturesIds] = useState<Feature['id'][]>([]);
   const { query } = useRouter();