Final locations updates

client/public/locales/en/common.json

@@ -359,6 +359,9 @@
         "help": {
             "list": "Help | Spoolman"
         },
+        "locations": {
+            "list": "Locations | Spoolman"
+        },
         "filament": {
             "list": "Filaments | Spoolman",
             "show": "#{{id}} Show Filament | Spoolman",
@@ -382,7 +385,9 @@
         }
     },
     "locations": {
+        "locations": "Locations",
         "new_location": "New Location",
-        "no_location": "No Location"
+        "no_location": "No Location",
+        "no_locations_help": "This page lets you organize your spools in locations, add some spools to get started!"
     }
 }

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

@@ -1,4 +1,4 @@
-import { Button, Input } from "antd";
+import { Button, Input, theme } from "antd";
 import type { Identifier, XYCoord } from "dnd-core";
 import { useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
@@ -10,6 +10,8 @@ import { DragItem, ItemTypes, SpoolDragItem } from "../dnd";
 import { EMPTYLOC } from "../functions";
 import { SpoolList } from "./spoolList";
 
+const { useToken } = theme;
+
 export function Location({
   index,
   title,
@@ -31,6 +33,7 @@ export function Location({
   locationSpoolOrder: number[];
   setLocationSpoolOrder: (spoolOrder: number[]) => void;
 }) {
+  const { token } = useToken();
   const t = useTranslate();
   const [editTitle, setEditTitle] = useState(false);
   const [newTitle, setNewTitle] = useState(title);
@@ -133,6 +136,10 @@ export function Location({
 
   const canEditTitle = title != EMPTYLOC;
 
+  const titleStyle = {
+    color: canEditTitle ? undefined : token.colorTextTertiary,
+  };
+
   return (
     <div
       className={"loc-container " + (title != EMPTYLOC ? "grabable" : "")}
@@ -161,6 +168,7 @@ export function Location({
               setNewTitle(title);
               setEditTitle(true);
             }}
+            style={titleStyle}
           >
             {displayTitle}
           </span>

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

@@ -176,19 +176,24 @@ export function LocationContainer() {
   };
 
   return (
-    <div className="loc-metacontainer">
+    <div>
-      {containers}
+      {!isLoading && spoolData.data.length == 0 && (
-      <div className="newLocContainer">
+        <div className="no-locations">{t("locations.no_locations_help")}</div>
-        <Button
+      )}
-          type="dashed"
+      <div className="loc-metacontainer">
-          shape="circle"
+        {containers}
-          icon={<PlusOutlined />}
+        <div className="newLocContainer">
-          size="large"
+          <Button
-          style={{
+            type="dashed"
-            margin: "1em",
+            shape="circle"
-          }}
+            icon={<PlusOutlined />}
-          onClick={addNewLocation}
+            size="large"
-        />
+            style={{
+              margin: "1em",
+            }}
+            onClick={addNewLocation}
+          />
+        </div>
       </div>
     </div>
   );

client/src/pages/locations/index.tsx

@@ -1,4 +1,4 @@
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
@@ -11,10 +11,14 @@ import "./locations.css";
 dayjs.extend(utc);
 
 export const Locations: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
   return (
-    <DndProvider backend={HTML5Backend}>
+    <div>
-      <LocationContainer />
+      <h1>{t("locations.locations")}</h1>
-    </DndProvider>
+      <DndProvider backend={HTML5Backend}>
+        <LocationContainer />
+      </DndProvider>
+    </div>
   );
 };