From 980284be1d6dd865077291c33aea9c77583e3bf6 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sun, 13 Aug 2023 10:14:48 +0200
Subject: [PATCH] Client: Improved show page titles

---
 client/src/pages/filaments/show.tsx | 10 +++++++++-
 client/src/pages/spools/show.tsx    | 15 +++++++++++----
 client/src/pages/vendors/show.tsx   |  6 +++++-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/filaments/show.tsx b/client/src/pages/filaments/show.tsx
index dd6e719..0175057 100644
--- a/client/src/pages/filaments/show.tsx
+++ b/client/src/pages/filaments/show.tsx
@@ -21,13 +21,21 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
 
   const record = data?.data;
 
+  const formatTitle = (item: IFilament) => {
+    let vendorPrefix = "";
+    if (item.vendor) {
+      vendorPrefix = `${item.vendor.name} - `;
+    }
+    return `[Filament #${item.id}] ${vendorPrefix}${item.name}`;
+  };
+
   const formatVendor = (item: IVendor) => {
     const URL = `/vendor/show/${item.id}`;
     return <a href={URL}>{item.name}</a>;
   };
 
   return (
-    <Show isLoading={isLoading}>
+    <Show isLoading={isLoading} title={record ? formatTitle(record) : ""}>
       <Title level={5}>{t("filament.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>{t("filament.fields.vendor")}</Title>
diff --git a/client/src/pages/spools/show.tsx b/client/src/pages/spools/show.tsx
index 39fea7a..0846e78 100644
--- a/client/src/pages/spools/show.tsx
+++ b/client/src/pages/spools/show.tsx
@@ -34,17 +34,24 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
     if (item.material) {
       material = ` - ${item.material}`;
     }
-    const label = `${vendorPrefix}${name}${material}`;
+    return `${vendorPrefix}${name}${material}`;
+  };
+
+  const filamentURL = (item: IFilament) => {
     const URL = `/filament/show/${item.id}`;
-    return <a href={URL}>{label}</a>;
+    return <a href={URL}>{formatFilament(item)}</a>;
+  };
+
+  const formatTitle = (item: ISpool) => {
+    return `[Spool #${item.id}] ${formatFilament(item.filament)}`;
   };
 
   return (
-    <Show isLoading={isLoading}>
+    <Show isLoading={isLoading} title={record ? formatTitle(record) : ""}>
       <Title level={5}>{t("spool.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>{t("spool.fields.filament")}</Title>
-      <TextField value={record ? formatFilament(record?.filament) : ""} />
+      <TextField value={record ? filamentURL(record?.filament) : ""} />
       <Title level={5}>{t("spool.fields.registered")}</Title>
       <DateField
         value={dayjs.utc(record?.registered).local()}
diff --git a/client/src/pages/vendors/show.tsx b/client/src/pages/vendors/show.tsx
index 91fe291..ef20832 100644
--- a/client/src/pages/vendors/show.tsx
+++ b/client/src/pages/vendors/show.tsx
@@ -19,8 +19,12 @@ export const VendorShow: React.FC<IResourceComponentsProps> = () => {
 
   const record = data?.data;
 
+  const formatTitle = (item: IVendor) => {
+    return `[Vendor #${item.id}] ${item.name}`;
+  };
+
   return (
-    <Show isLoading={isLoading}>
+    <Show isLoading={isLoading} title={record ? formatTitle(record) : ""}>
       <Title level={5}>{t("vendor.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>{t("vendor.fields.registered")}</Title>