feat(Map): Revision of sorting from also adding ability to sort all columns

Fixes #2

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.module.scss

@@ -4,3 +4,15 @@
   font-size: 12px !important;
   line-height: 8px;
 }
+
+.Table {
+  :global {
+    .p-sortable-column > .p-column-header-content > span:last-child {
+      transform: scale(0.7);
+
+      & > svg {
+        margin-left: 4px;
+      }
+    }
+  }
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx

@@ -25,6 +25,7 @@ import {
   renderName,
   renderTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
+// import { PrimeIcons } from 'primereact/api';
 
 interface SystemSignaturesContentProps {
   systemId: string;
@@ -50,7 +51,7 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
   const handleResize = useCallback(() => {
     if (tableRef.current) {
       const tableWidth = tableRef.current.offsetWidth;
-      const otherColumnsWidth = 265;
+      const otherColumnsWidth = 276;
       const availableWidth = tableWidth - otherColumnsWidth;
       setNameColumnWidth(`${availableWidth}px`);
     }
@@ -159,6 +160,16 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
     setHoveredSig(null);
   }, []);
 
+  // const renderToolbar = (/*row: SystemSignature*/) => {
+  //   return (
+  //     <div className="flex justify-end items-center gap-2">
+  //       <span className={clsx(PrimeIcons.PENCIL, 'text-[10px]')}></span>
+  //     </div>
+  //   );
+  // };
+
+  const headerClasses = clsx(classes.HeaderRow, 'text-[12px] py-[3px]');
+
   return (
     <div ref={tableRef} className="h-full">
       {filteredSignatures.length === 0 ? (
@@ -168,19 +179,21 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
       ) : (
         <>
           <DataTable
+            className={classes.Table}
             value={filteredSignatures}
             size="small"
             selectionMode="multiple"
             selection={selectedSignatures}
+            metaKeySelection
             onSelectionChange={e => setSelectedSignatures(e.value)}
             dataKey="eve_id"
             tableClassName="w-full select-none"
-            resizableColumns
+            resizableColumns={false}
             rowHover
             selectAll
             sortField="eve_id"
-            onRowMouseEnter={handleEnterRow}
+            onRowMouseEnter={compact || medium ? handleEnterRow : undefined}
-            onRowMouseLeave={handleLeaveRow}
+            onRowMouseLeave={compact || medium ? handleLeaveRow : undefined}
             rowClassName={row => {
               if (selectedSignatures.some(x => x.eve_id === row.eve_id)) {
                 return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200');
@@ -196,47 +209,55 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
           >
             <Column
               bodyClassName="p-0 px-1"
+              headerClassName={headerClasses}
               field="group"
               body={renderIcon}
               style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-              headerStyle={{ fontSize: "14px", padding: "0.25rem" }}
             ></Column>
 
             <Column
               field="eve_id"
               header="Id"
+              headerClassName={headerClasses}
               bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
               style={{ maxWidth: 72, minWidth: 72, width: 72 }}
-              headerStyle={{ fontSize: "14px", padding: "0.25rem" }}
               sortable
             ></Column>
             <Column
               field="group"
               header="Group"
+              headerClassName={headerClasses}
               bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
               hidden={compact}
-              headerStyle={{ fontSize: "14px", padding: "0.25rem" }}
               sortable
             ></Column>
             <Column
               field="name"
               header="Name"
+              headerClassName={headerClasses}
               bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
               body={renderName}
               style={{ maxWidth: nameColumnWidth }}
               hidden={compact || medium}
-              headerStyle={{ fontSize: "14px", padding: "0.25rem" }}
               sortable
             ></Column>
             <Column
               field="updated_at"
               header="Updated"
               dataType="date"
+              headerClassName={headerClasses}
               bodyClassName="w-[80px] text-ellipsis overflow-hidden whitespace-nowrap"
               body={renderTimeLeft}
-              headerStyle={{ fontSize: "14px", padding: "0.25rem" }}
               sortable
             ></Column>
+
+            {/*<Column*/}
+            {/*  bodyClassName="p-0 pl-1 pr-2"*/}
+            {/*  field="group"*/}
+            {/*  body={renderToolbar}*/}
+            {/*  headerClassName={headerClasses}*/}
+            {/*  style={{ maxWidth: 26, minWidth: 26, width: 26 }}*/}
+            {/*></Column>*/}
           </DataTable>
         </>
       )}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/renderTimeLeft.tsx

@@ -3,7 +3,7 @@ import { TimeLeft } from '@/hooks/Mapper/components/ui-kit';
 
 export const renderTimeLeft = (row: SystemSignature) => {
   return (
-    <div className="flex justify-end w-full items-center">
+    <div className="flex w-full items-center">
       <TimeLeft cDate={row.updated_at ? new Date(row.updated_at) : undefined} />
     </div>
   );