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({
+    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>

client/src/pages/locations/functions.ts

@@ -19,21 +19,6 @@ export async function setSpoolLocation(spool_id: number, location: string | null
   return response.json();
 }
 
-export function useLocations(): string[] {
-  const query = useGetSetting("locations");
-
-  return useMemo(() => {
-    if (!query.data) return [];
-
-    try {
-      return JSON.parse(query.data.value) as string[];
-    } catch {
-      console.warn("Failed to parse locations", query.data.value);
-      return [];
-    }
-  }, [query.data]);
-}
-
 export async function renameSpoolLocation(location: string, newName: string): Promise<string> {
   const response = await fetch(getAPIURL() + "/location/" + location, {
     method: "PATCH",
@@ -49,3 +34,33 @@ export async function renameSpoolLocation(location: string, newName: string): Pr
   }
   return await response.text();
 }
+
+export function useLocations(): string[] {
+  const query = useGetSetting("locations");
+
+  return useMemo(() => {
+    if (!query.data) return [];
+
+    try {
+      return JSON.parse(query.data.value) as string[];
+    } catch {
+      console.warn("Failed to parse locations", query.data.value);
+      return [];
+    }
+  }, [query.data]);
+}
+
+export function useLocationsSpoolOrders(): Record<string, number[]> {
+  const query = useGetSetting("locations_spoolorders");
+
+  return useMemo(() => {
+    if (!query.data) return {};
+
+    try {
+      return JSON.parse(query.data.value) as Record<string, number[]>;
+    } catch {
+      console.warn("Failed to parse locations spool orders", query.data.value);
+      return {};
+    }
+  }, [query.data]);
+}

spoolman/settings.py

@@ -70,3 +70,4 @@ register_setting("extra_fields_spool", SettingType.ARRAY, json.dumps([]))
 register_setting("base_url", SettingType.STRING, json.dumps(""))
 
 register_setting("locations", SettingType.ARRAY, json.dumps([]))
+register_setting("locations_spoolorders", SettingType.OBJECT, json.dumps({}))