diff --git a/client/src/pages/locations/index.tsx b/client/src/pages/locations/index.tsx index 12149ef..818c540 100644 --- a/client/src/pages/locations/index.tsx +++ b/client/src/pages/locations/index.tsx @@ -6,7 +6,7 @@ import React, { useEffect, useMemo } from "react"; import { DndProvider, useDrag, useDrop } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; -import { EditOutlined, EyeOutlined } from "@ant-design/icons"; +import { DeleteOutlined, EditOutlined, EyeOutlined, PlusOutlined } from "@ant-design/icons"; import { Link } from "react-router-dom"; import SpoolIcon from "../../components/spoolIcon"; import { useGetSetting, useSetSetting } from "../../utils/querySettings"; @@ -82,7 +82,17 @@ function SpoolCard({ spool }: { spool: ISpool }) { ); } -function LocationContainer({ title, spools }: { title: string; spools: ISpool[] }) { +function LocationContainer({ + title, + spools, + showDelete, + onDelete, +}: { + title: string; + spools: ISpool[]; + showDelete?: boolean; + onDelete?: () => void; +}) { const { token } = useToken(); const invalidate = useInvalidate(); @@ -106,7 +116,10 @@ function LocationContainer({ title, spools }: { title: string; spools: ISpool[] return (
-

{title}

+

+ {title} + {showDelete &&

{spools.map((spool) => ( @@ -168,31 +181,41 @@ export const Locations: React.FC = () => { // Create list of locations that's sorted const locationsList = useMemo(() => { - // Start with the locations from the spools - let allLocs = [...Object.keys(spoolLocations), ...settingsLocations]; + // Start with the locations setting + let allLocs = settingsLocations; + console.log("settingsLocations", settingsLocations); - // Remove duplicates - allLocs = [...new Set(allLocs)]; - - allLocs.sort((a, b) => { - // Sort alphabetically - return a.localeCompare(b); - }); + // Add any missing locations from the spools + for (const loc of Object.keys(spoolLocations)) { + if (!allLocs.includes(loc)) { + allLocs.push(loc); + } + } return allLocs; }, [spoolLocations, settingsLocations]); // Create containers const containers = locationsList.map((loc) => { - return ; + const spools = spoolLocations[loc] ?? []; + return ( + { + setLocationsSetting.mutate(locationsList.filter((l) => l !== loc)); + }} + /> + ); }); // Update locations settings so it always includes all spool locations useEffect(() => { // Check if they're not the same - if (JSON.stringify(locationsList.sort()) !== JSON.stringify(settingsLocations.sort())) { + if (JSON.stringify(locationsList) !== JSON.stringify(settingsLocations)) { console.log("Updating locations settings", locationsList, settingsLocations); - // Update settings setLocationsSetting.mutate(locationsList); } }, [spoolLocations]); @@ -207,7 +230,21 @@ export const Locations: React.FC = () => { return ( -
{containers}
+
+ {containers} +
+
+
); }; diff --git a/client/src/pages/locations/locations.css b/client/src/pages/locations/locations.css index 76b1cf2..391d09b 100644 --- a/client/src/pages/locations/locations.css +++ b/client/src/pages/locations/locations.css @@ -8,6 +8,13 @@ width: 24em; } +.loc-container h3 { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} + .loc-container .loc-spools { padding: 0.2em; display: flex;