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,28 +229,7 @@ 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">
-          <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={handleReplaceAll}>
-                    Replace
-                  </span>
-                </button>
-                <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>
-              </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
@@ -253,10 +256,7 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
               onRowMouseLeave={compact || medium ? handleLeaveRow : undefined}
               rowClassName={row => {
                 if (selectedSignatures.some(x => x.eve_id === row.eve_id)) {
-                    return clsx(
+                  return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200');
-                      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);
@@ -321,8 +321,27 @@ export const SystemSignaturesContent = ({ systemId, settings }: SystemSignatures
           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>
     </>
   );
 };