fix(Signatures): Signatures update fixes

fixes #25

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

@@ -88,9 +88,30 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
       data: { system_id: systemId },
     });
 
+    setAskUser(false);
     setSignatures(signatures);
   }, [outCommand, systemId]);
 
+  const updateSignatures = useCallback(
+    async (newSignatures: SystemSignature[], updateOnly: boolean) => {
+      const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
+
+      const { signatures: updatedSignatures } = await outCommand({
+        type: OutCommand.updateSignatures,
+        data: {
+          system_id: systemId,
+          added,
+          updated,
+          removed,
+        },
+      });
+
+      setSignatures(() => updatedSignatures);
+      setSelectedSignatures([]);
+    },
+    [outCommand, systemId],
+  );
+
   const handleUpdateSignatures = useCallback(
     async (newSignatures: SystemSignature[], updateOnly: boolean) => {
       const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
@@ -145,15 +166,17 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
       return;
     }
 
-    const signatures = parseSignatures(
+    const newSignatures = parseSignatures(
       clipboardContent,
       settings.map(x => x.key),
     );
 
-    if (!signaturesRef.current || !signaturesRef.current.length) {
+    const { removed } = getActualSigs(signaturesRef.current, newSignatures, false);
-      handleUpdateSignatures(signatures, false);
+
+    if (!signaturesRef.current || !signaturesRef.current.length || !removed.length) {
+      handleUpdateSignatures(newSignatures, false);
     } else {
-      setParsedSignatures(signatures);
+      setParsedSignatures(newSignatures);
       setAskUser(true);
     }
   }, [clipboardContent]);
@@ -161,6 +184,7 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
   useEffect(() => {
     if (!systemId) {
       setSignatures([]);
+      setAskUser(false);
       return;
     }
 
@@ -205,124 +229,119 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
 
   return (
     <>
-      {askUser && (
+      <div ref={tableRef} className={'h-full '}>
-        <div className="flex w-full h-full bg-stone-900/95 backdrop-blur-sm">
+        {filteredSignatures.length === 0 ? (
-          <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
+          <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
-            <div className="text-stone-400/80 text-sm">
+            No signatures
-              <div className="flex flex-col text-center gap-2">
+          </div>
-                <button className="p-button p-component p-button-outlined p-button-sm btn-wide">
+        ) : (
-                  <span className="p-button-label p-c" onClick={handleReplaceAll}>
+          <>
-                    Replace
+            <DataTable
-                  </span>
+              className={classes.Table}
-                </button>
+              value={filteredSignatures}
-                <button className="p-button p-component p-button-outlined p-button-sm btn-wide">
+              size="small"
-                  <span className="p-button-label p-c" onClick={handleUpdateOnly}>
+              selectionMode="multiple"
-                    Update
+              selection={selectedSignatures}
-                  </span>
+              metaKeySelection
-                </button>
+              onSelectionChange={e => setSelectedSignatures(e.value)}
+              dataKey="eve_id"
+              tableClassName="w-full select-none"
+              resizableColumns={false}
+              rowHover
+              selectAll
+              sortField={sortSettings.sortField}
+              sortOrder={sortSettings.sortOrder}
+              onSort={event => setSortSettings(() => ({ sortField: event.sortField, sortOrder: event.sortOrder }))}
+              onRowMouseEnter={compact || medium ? handleEnterRow : undefined}
+              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');
+                }
+
+                const dateClass = getRowColorByTimeLeft(row.updated_at ? new Date(row.updated_at) : undefined);
+                if (!dateClass) {
+                  return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200');
+                }
+
+                return clsx(classes.TableRowCompact, dateClass);
+              }}
+            >
+              <Column
+                bodyClassName="p-0 px-1"
+                field="group"
+                body={renderIcon}
+                style={{ maxWidth: 26, minWidth: 26, width: 26, height: 25 }}
+              ></Column>
+
+              <Column
+                field="eve_id"
+                header="Id"
+                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                style={{ maxWidth: 72, minWidth: 72, width: 72 }}
+                sortable
+              ></Column>
+              <Column
+                field="group"
+                header="Group"
+                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                hidden={compact}
+                sortable
+              ></Column>
+              <Column
+                field="name"
+                header="Name"
+                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                body={renderName}
+                style={{ maxWidth: nameColumnWidth }}
+                hidden={compact || medium}
+                sortable
+              ></Column>
+              <Column
+                field="updated_at"
+                header="Updated"
+                dataType="date"
+                bodyClassName="w-[80px] text-ellipsis overflow-hidden whitespace-nowrap"
+                body={renderTimeLeft}
+                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>
+          </>
+        )}
+        <WdTooltip
+          className="bg-stone-900/95 text-slate-50"
+          ref={tooltipRef}
+          content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
+        />
+        {askUser && (
+          <div className="absolute left-[1px] top-[29px] h-[calc(100%-30px)] w-[calc(100%-3px)] bg-stone-900/10 backdrop-blur-sm">
+            <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
+              <div className="text-stone-400/80 text-sm">
+                <div className="flex flex-col text-center gap-2">
+                  <button className="p-button p-component p-button-outlined p-button-sm btn-wide">
+                    <span className="p-button-label p-c" onClick={handleUpdateOnly}>
+                      Update
+                    </span>
+                  </button>
+                  <button className="p-button p-component p-button-outlined p-button-sm btn-wide">
+                    <span className="p-button-label p-c" onClick={handleReplaceAll}>
+                      Update & Delete
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        )}
-      )}
+      </div>
-      {!askUser && (
-        <div ref={tableRef} className="h-full">
-          {filteredSignatures.length === 0 ? (
-            <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
-              No signatures
-            </div>
-          ) : (
-            <>
-              <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={false}
-                rowHover
-                selectAll
-                sortField={sortSettings.sortField}
-                sortOrder={sortSettings.sortOrder}
-                onSort={event => setSortSettings(() => ({ sortField: event.sortField, sortOrder: event.sortOrder }))}
-                onRowMouseEnter={compact || medium ? handleEnterRow : undefined}
-                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',
-                    );
-                  }
-
-                  const dateClass = getRowColorByTimeLeft(row.updated_at ? new Date(row.updated_at) : undefined);
-                  if (!dateClass) {
-                    return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200');
-                  }
-
-                  return clsx(classes.TableRowCompact, dateClass);
-                }}
-              >
-                <Column
-                  bodyClassName="p-0 px-1"
-                  field="group"
-                  body={renderIcon}
-                  style={{ maxWidth: 26, minWidth: 26, width: 26, height: 25 }}
-                ></Column>
-
-                <Column
-                  field="eve_id"
-                  header="Id"
-                  bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                  style={{ maxWidth: 72, minWidth: 72, width: 72 }}
-                  sortable
-                ></Column>
-                <Column
-                  field="group"
-                  header="Group"
-                  bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                  hidden={compact}
-                  sortable
-                ></Column>
-                <Column
-                  field="name"
-                  header="Name"
-                  bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                  body={renderName}
-                  style={{ maxWidth: nameColumnWidth }}
-                  hidden={compact || medium}
-                  sortable
-                ></Column>
-                <Column
-                  field="updated_at"
-                  header="Updated"
-                  dataType="date"
-                  bodyClassName="w-[80px] text-ellipsis overflow-hidden whitespace-nowrap"
-                  body={renderTimeLeft}
-                  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>
-            </>
-          )}
-          <WdTooltip
-            className="bg-stone-900/95 text-slate-50"
-            ref={tooltipRef}
-            content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
-          />
-        </div>
-      )}
     </>
   );
 };