Added reading and using of spool orders in locations

client/src/pages/locations/components/location.tsx

@@ -21,6 +21,8 @@ export function Location({
   onDelete,
   moveLocation,
   onEditTitle,
+  locationSpoolOrder,
+  setLocationSpoolOrder,
 }: {
   index: number;
   title: string;
@@ -29,6 +31,8 @@ export function Location({
   onDelete?: () => void;
   moveLocation: (dragIndex: number, hoverIndex: number) => void;
   onEditTitle: (newTitle: string) => void;
+  locationSpoolOrder: number[];
+  setLocationSpoolOrder: (spoolOrder: number[]) => void;
 }) {
   const [editTitle, setEditTitle] = useState(false);
   const [newTitle, setNewTitle] = useState(title);
@@ -123,7 +127,12 @@ export function Location({
         )}
         {showDelete && <Button icon={<DeleteOutlined />} size="small" type="text" onClick={onDelete} />}
       </h3>
-      <SpoolList location={title} spools={spools} />
+      <SpoolList
+        location={title}
+        spools={spools}
+        spoolOrder={locationSpoolOrder}
+        setSpoolOrder={setLocationSpoolOrder}
+      />
     </div>
   );
 }

client/src/pages/locations/components/locationContainer.tsx

@@ -4,7 +4,7 @@ import { Button } from "antd";
 import { useEffect, useMemo } from "react";
 import { useSetSetting } from "../../../utils/querySettings";
 import { ISpool } from "../../spools/model";
-import { renameSpoolLocation, useLocations } from "../functions";
+import { renameSpoolLocation, useLocations, useLocationsSpoolOrders } from "../functions";
 import { Location } from "./location";
 
 export function LocationContainer() {
@@ -14,6 +14,10 @@ export function LocationContainer() {
   const settingsLocations = useLocations();
   const setLocationsSetting = useSetSetting<string[]>("locations");
 
+  const locationsSpoolOrders = useLocationsSpoolOrders();
+  console.log("locationsSpoolOrders", locationsSpoolOrders);
+  const setLocationsSpoolOrders = useSetSetting<Record<string, number[]>>("locations_spoolorders");
+
   const { data, isLoading, isError } = useList<ISpool>({
     resource: "spool",
     meta: {
@@ -83,9 +87,18 @@ export function LocationContainer() {
     setLocationsSetting.mutate(newLocs);
   };
 
+  const setLocationSpoolOrder = (location: string, spoolOrder: number[]) => {
+    setLocationsSpoolOrders.mutate({
+      ...locationsSpoolOrders,
+      [location]: spoolOrder,
+    });
+  };
+
   // Create containers
   const containers = locationsList.map((loc, idx) => {
     const spools = spoolLocations[loc] ?? [];
+    const spoolOrder = locationsSpoolOrders[loc] ?? [];
+
     return (
       <Location
         key={loc}
@@ -98,6 +111,8 @@ export function LocationContainer() {
         }}
         moveLocation={moveLocation}
         onEditTitle={(newTitle: string) => onEditTitle(loc, newTitle)}
+        locationSpoolOrder={spoolOrder}
+        setLocationSpoolOrder={(spoolOrder: number[]) => setLocationSpoolOrder(loc, spoolOrder)}
       />
     );
   });

client/src/pages/locations/components/spoolList.tsx

@@ -9,22 +9,41 @@ import { SpoolCard } from "./spoolCard";
 
 const { useToken } = theme;
 
-export function SpoolList({ location, spools }: { location: string; spools: ISpool[] }) {
+export function SpoolList({
+  location,
+  spools,
+  spoolOrder,
+  setSpoolOrder,
+}: {
+  location: string;
+  spools: ISpool[];
+  spoolOrder: number[];
+  setSpoolOrder: (spoolOrder: number[]) => void;
+}) {
   const { token } = useToken();
   const invalidate = useInvalidate();
   const [, spoolDrop] = useDrop(() => ({
     accept: ItemTypes.SPOOL,
-    drop: (item: ISpool) => {
-      setSpoolLocation(item.id, location).then(() => {
-        invalidate({
-          resource: "spool",
-          id: item.id,
-          invalidates: ["list", "detail"],
-        });
+    drop: async (item: ISpool) => {
+      if (item.location === location) return;
+      await setSpoolLocation(item.id, location);
+      await invalidate({
+        resource: "spool",
+        id: item.id,
+        invalidates: ["list", "detail"],
       });
     },
   }));
 
+  // Make sure all spools are in the spoolOrders array
+  const finalSpoolOrder = [...spoolOrder].filter((id) => spools.find((spool) => spool.id === id)); // Remove any spools that are not in the spools array
+  spools.forEach((spool) => {
+    if (!finalSpoolOrder.includes(spool.id)) finalSpoolOrder.push(spool.id);
+  });
+
+  // Reorder the spools based on the spoolOrder array
+  const reorderedSpools = finalSpoolOrder.map((id) => spools.find((spool) => spool.id === id)!);
+
   const style = {
     backgroundColor: token.colorBgContainer,
     borderRadius: token.borderRadiusLG,
@@ -32,7 +51,7 @@ export function SpoolList({ location, spools }: { location: string; spools: ISpo
 
   return (
     <div className="loc-spools" ref={spoolDrop} style={style}>
-      {spools.map((spool) => (
+      {reorderedSpools.map((spool) => (
         <SpoolCard key={spool.id} spool={spool} />
       ))}
     </div>