Merge pull request #715 from JakobGue/spool_count

Add Spoolcount in Locations Page

client/public/locales/en/common.json

@@ -396,4 +396,4 @@
         "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

@@ -9,6 +9,7 @@ import { ISpool } from "../../spools/model";
 import { DragItem, ItemTypes, SpoolDragItem } from "../dnd";
 import { EMPTYLOC } from "../functions";
 import { SpoolList } from "./spoolList";
+import { useGetSetting } from "../../../utils/querySettings";
 
 const { useToken } = theme;
 
@@ -139,6 +140,9 @@ export function Location({
   const titleStyle = {
     color: canEditTitle ? undefined : token.colorTextTertiary,
   };
+  const spoolCountStyle = {
+    color: token.colorTextQuaternary,
+  };
 
   return (
     <div
@@ -171,6 +175,7 @@ export function Location({
             style={titleStyle}
           >
             {displayTitle}
+            {<span style={spoolCountStyle}> ({spools.length})</span>}
           </span>
         )}
         {showDelete && <Button icon={<DeleteOutlined />} size="small" type="text" onClick={onDelete} />}

client/src/pages/settings/generalSettings.tsx

@@ -31,7 +31,7 @@ export function GeneralSettings() {
   }, [setCurrency.isSuccess, messageApi, t]);
 
   // Handle form submit
-  const onFinish = (values: { currency: string; base_url: string, round_prices: boolean }) => {
+  const onFinish = (values: { currency: string; base_url: string; round_prices: boolean }) => {
     // Check if the currency has changed
     if (settings.data?.currency.value !== JSON.stringify(values.currency)) {
       setCurrency.mutate(values.currency);
@@ -47,67 +47,70 @@ export function GeneralSettings() {
     }
   };
 
-  return (<>
-    <Form
-      form={form}
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
-      initialValues={{
-        currency: settings.data?.currency.value,
-        round_prices: settings.data?.round_prices.value,
-      }}
-      onFinish={onFinish}
-      style={{
-        maxWidth: "600px",
-        margin: "0 auto",
-      }}
-    >
-      <Form.Item
-        label={t("settings.general.currency.label")}
-        name="currency"
-        rules={[
-          {
-            required: true,
-          },
-          {
-            pattern: /^[A-Z]{3}$/,
-          },
-        ]}
+  return (
+    <>
+      <Form
+        form={form}
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        initialValues={{
+          currency: settings.data?.currency.value,
+          round_prices: settings.data?.round_prices.value,
+          base_url: settings.data?.base_url.value,
+        }}
+        onFinish={onFinish}
+        style={{
+          maxWidth: "600px",
+          margin: "0 auto",
+        }}
       >
-        <Input />
-      </Form.Item>
+        <Form.Item
+          label={t("settings.general.currency.label")}
+          name="currency"
+          rules={[
+            {
+              required: true,
+            },
+            {
+              pattern: /^[A-Z]{3}$/,
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
 
-      <Form.Item
-        label={t("settings.general.base_url.label")}
-        tooltip={t("settings.general.base_url.tooltip")}
-        name="base_url"
-        rules={[
-          {
-            required: false,
-          },
-          {
-            pattern: /^https?:\/\/.+(?<!\/)$/,
-          },
-        ]}
-      >
-        <Input placeholder="https://example.com:8000" />
-      </Form.Item>
+        <Form.Item
+          label={t("settings.general.base_url.label")}
+          tooltip={t("settings.general.base_url.tooltip")}
+          name="base_url"
+          rules={[
+            {
+              required: false,
+            },
+            {
+              pattern: /^https?:\/\/.+(?<!\/)$/,
+            },
+          ]}
+        >
+          <Input placeholder="https://example.com:8000" />
+        </Form.Item>
 
-      <Form.Item
-        label={t("settings.general.round_prices.label")}
-        tooltip={t("settings.general.round_prices.tooltip")}
-        name="round_prices"
-        valuePropName="checked"
-      >
-        <Checkbox />
-      </Form.Item>
+        <Form.Item
+          label={t("settings.general.round_prices.label")}
+          tooltip={t("settings.general.round_prices.tooltip")}
+          name="round_prices"
+          valuePropName="checked"
+        >
+          <Checkbox />
+        </Form.Item>
 
-      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-        <Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isLoading}>
-          {t("buttons.save")}
-        </Button>
-      </Form.Item>
-    </Form>
-    {contextHolder}
-  </>);
+        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+          <Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isLoading}>
+            {t("buttons.save")}
+          </Button>
+        </Form.Item>
+      </Form>
+      {contextHolder}
+    </>
+  );
 }