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 && } size="small" type="text" onClick={onDelete} />}
+
{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}
+
+ }
+ size="large"
+ style={{
+ margin: "1em",
+ }}
+ onClick={() => setLocationsSetting.mutate([...settingsLocations, "New Location"])}
+ />
+
+
);
};
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;