From caeda1da757d5430e19efce837917e1c4764357d Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 1 Mar 2024 05:16:23 +0000
Subject: [PATCH] Refactoring

- Move Details out of "tables" directory
---
 .../details}/Details.tsx                      | 108 ++----------------
 .../src/components/details/ItemDetails.tsx    |   2 +-
 .../src/components/details/PartIcons.tsx      |  90 +++++++++++++++
 src/frontend/src/pages/build/BuildDetail.tsx  |   2 +-
 .../src/pages/company/CompanyDetail.tsx       |   2 +-
 .../src/pages/part/CategoryDetail.tsx         |   2 +-
 src/frontend/src/pages/part/PartDetail.tsx    |   3 +-
 .../pages/purchasing/PurchaseOrderDetail.tsx  |   2 +-
 .../src/pages/sales/ReturnOrderDetail.tsx     |   2 +-
 .../src/pages/sales/SalesOrderDetail.tsx      |   2 +-
 .../src/pages/stock/LocationDetail.tsx        |   2 +-
 src/frontend/src/pages/stock/StockDetail.tsx  |   2 +-
 12 files changed, 112 insertions(+), 107 deletions(-)
 rename src/frontend/src/{tables => components/details}/Details.tsx (74%)
 create mode 100644 src/frontend/src/components/details/PartIcons.tsx

diff --git a/src/frontend/src/tables/Details.tsx b/src/frontend/src/components/details/Details.tsx
similarity index 74%
rename from src/frontend/src/tables/Details.tsx
rename to src/frontend/src/components/details/Details.tsx
index 20057ba180..02de921a19 100644
--- a/src/frontend/src/tables/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -14,17 +14,17 @@ import {
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { Suspense, useMemo } from 'react';
 
-import { api } from '../App';
-import { ProgressBar } from '../components/items/ProgressBar';
-import { YesNoButton } from '../components/items/YesNoButton';
-import { getModelInfo } from '../components/render/ModelType';
-import { StatusRenderer } from '../components/render/StatusRenderer';
-import { ApiEndpoints } from '../enums/ApiEndpoints';
-import { ModelType } from '../enums/ModelType';
-import { InvenTreeIcon } from '../functions/icons';
-import { getDetailUrl } from '../functions/urls';
-import { apiUrl } from '../states/ApiState';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { api } from '../../App';
+import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { ModelType } from '../../enums/ModelType';
+import { InvenTreeIcon } from '../../functions/icons';
+import { getDetailUrl } from '../../functions/urls';
+import { apiUrl } from '../../states/ApiState';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { ProgressBar } from '../items/ProgressBar';
+import { YesNoButton } from '../items/YesNoButton';
+import { getModelInfo } from '../render/ModelType';
+import { StatusRenderer } from '../render/StatusRenderer';
 
 export type PartIconsType = {
   assembly: boolean;
@@ -101,92 +101,6 @@ type FieldProps = {
   unit?: string | null;
 };
 
-/**
- * Fetches and wraps an InvenTreeIcon in a flex div
- * @param icon name of icon
- *
- */
-function PartIcon(icon: string) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-      <InvenTreeIcon icon={icon} />
-    </div>
-  );
-}
-
-/**
- * Generates a table cell with Part icons.
- * Only used for Part Model Details
- */
-export function PartIcons({ part }: { part: any }) {
-  return (
-    <td colSpan={2}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        {!part.active && (
-          <Tooltip label={t`Part is not active`}>
-            <Badge color="red" variant="filled">
-              <div
-                style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
-              >
-                <InvenTreeIcon icon="inactive" iconProps={{ size: 19 }} />{' '}
-                <Trans>Inactive</Trans>
-              </div>
-            </Badge>
-          </Tooltip>
-        )}
-        {part.template && (
-          <Tooltip
-            label={t`Part is a template part (variants can be made from this part)`}
-            children={PartIcon('template')}
-          />
-        )}
-        {part.assembly && (
-          <Tooltip
-            label={t`Part can be assembled from other parts`}
-            children={PartIcon('assembly')}
-          />
-        )}
-        {part.component && (
-          <Tooltip
-            label={t`Part can be used in assemblies`}
-            children={PartIcon('component')}
-          />
-        )}
-        {part.trackable && (
-          <Tooltip
-            label={t`Part stock is tracked by serial number`}
-            children={PartIcon('trackable')}
-          />
-        )}
-        {part.purchaseable && (
-          <Tooltip
-            label={t`Part can be purchased from external suppliers`}
-            children={PartIcon('purchaseable')}
-          />
-        )}
-        {part.saleable && (
-          <Tooltip
-            label={t`Part can be sold to customers`}
-            children={PartIcon('saleable')}
-          />
-        )}
-        {part.virtual && (
-          <Tooltip label={t`Part is virtual (not a physical part)`}>
-            <Badge color="yellow" variant="filled">
-              <div
-                style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
-              >
-                <InvenTreeIcon icon="virtual" iconProps={{ size: 18 }} />{' '}
-                <Trans>Virtual</Trans>
-              </div>
-            </Badge>
-          </Tooltip>
-        )}
-      </div>
-    </td>
-  );
-}
-
 /**
  * Fetches user or group info from backend and formats into a badge.
  * Badge shows username, full name, or group name depending on server settings.
diff --git a/src/frontend/src/components/details/ItemDetails.tsx b/src/frontend/src/components/details/ItemDetails.tsx
index 8252afc3a2..543c23964e 100644
--- a/src/frontend/src/components/details/ItemDetails.tsx
+++ b/src/frontend/src/components/details/ItemDetails.tsx
@@ -2,7 +2,7 @@ import { Grid, Group, Paper, SimpleGrid } from '@mantine/core';
 import React from 'react';
 
 import { UserRoles } from '../../enums/Roles';
-import { DetailsField, DetailsTable } from '../../tables/Details';
+import { DetailsField, DetailsTable } from './Details';
 import { DetailImageButtonProps, DetailsImage } from './DetailsImage';
 
 /**
diff --git a/src/frontend/src/components/details/PartIcons.tsx b/src/frontend/src/components/details/PartIcons.tsx
new file mode 100644
index 0000000000..ccaf7bef73
--- /dev/null
+++ b/src/frontend/src/components/details/PartIcons.tsx
@@ -0,0 +1,90 @@
+import { Trans, t } from '@lingui/macro';
+import { Badge, Tooltip } from '@mantine/core';
+
+import { InvenTreeIcon } from '../../functions/icons';
+
+/**
+ * Fetches and wraps an InvenTreeIcon in a flex div
+ * @param icon name of icon
+ *
+ */
+function PartIcon(icon: string) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+      <InvenTreeIcon icon={icon} />
+    </div>
+  );
+}
+
+/**
+ * Generates a table cell with Part icons.
+ * Only used for Part Model Details
+ */
+export function PartIcons({ part }: { part: any }) {
+  return (
+    <td colSpan={2}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        {!part.active && (
+          <Tooltip label={t`Part is not active`}>
+            <Badge color="red" variant="filled">
+              <div
+                style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
+              >
+                <InvenTreeIcon icon="inactive" iconProps={{ size: 19 }} />{' '}
+                <Trans>Inactive</Trans>
+              </div>
+            </Badge>
+          </Tooltip>
+        )}
+        {part.template && (
+          <Tooltip
+            label={t`Part is a template part (variants can be made from this part)`}
+            children={PartIcon('template')}
+          />
+        )}
+        {part.assembly && (
+          <Tooltip
+            label={t`Part can be assembled from other parts`}
+            children={PartIcon('assembly')}
+          />
+        )}
+        {part.component && (
+          <Tooltip
+            label={t`Part can be used in assemblies`}
+            children={PartIcon('component')}
+          />
+        )}
+        {part.trackable && (
+          <Tooltip
+            label={t`Part stock is tracked by serial number`}
+            children={PartIcon('trackable')}
+          />
+        )}
+        {part.purchaseable && (
+          <Tooltip
+            label={t`Part can be purchased from external suppliers`}
+            children={PartIcon('purchaseable')}
+          />
+        )}
+        {part.saleable && (
+          <Tooltip
+            label={t`Part can be sold to customers`}
+            children={PartIcon('saleable')}
+          />
+        )}
+        {part.virtual && (
+          <Tooltip label={t`Part is virtual (not a physical part)`}>
+            <Badge color="yellow" variant="filled">
+              <div
+                style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
+              >
+                <InvenTreeIcon icon="virtual" iconProps={{ size: 18 }} />{' '}
+                <Trans>Virtual</Trans>
+              </div>
+            </Badge>
+          </Tooltip>
+        )}
+      </div>
+    </td>
+  );
+}
diff --git a/src/frontend/src/pages/build/BuildDetail.tsx b/src/frontend/src/pages/build/BuildDetail.tsx
index 163c3a6616..5b9d9a1994 100644
--- a/src/frontend/src/pages/build/BuildDetail.tsx
+++ b/src/frontend/src/pages/build/BuildDetail.tsx
@@ -24,6 +24,7 @@ import {
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
@@ -47,7 +48,6 @@ import { useEditApiFormModal } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
 import BuildLineTable from '../../tables/build/BuildLineTable';
 import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
 import { AttachmentTable } from '../../tables/general/AttachmentTable';
diff --git a/src/frontend/src/pages/company/CompanyDetail.tsx b/src/frontend/src/pages/company/CompanyDetail.tsx
index d4f9e81c28..dbbc2957e6 100644
--- a/src/frontend/src/pages/company/CompanyDetail.tsx
+++ b/src/frontend/src/pages/company/CompanyDetail.tsx
@@ -18,6 +18,7 @@ import {
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
@@ -37,7 +38,6 @@ import { useEditApiFormModal } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
 import { AddressTable } from '../../tables/company/AddressTable';
 import { ContactTable } from '../../tables/company/ContactTable';
 import { AttachmentTable } from '../../tables/general/AttachmentTable';
diff --git a/src/frontend/src/pages/part/CategoryDetail.tsx b/src/frontend/src/pages/part/CategoryDetail.tsx
index 263015d030..a7921e1011 100644
--- a/src/frontend/src/pages/part/CategoryDetail.tsx
+++ b/src/frontend/src/pages/part/CategoryDetail.tsx
@@ -9,6 +9,7 @@ import {
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import { PageDetail } from '../../components/nav/PageDetail';
 import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
@@ -16,7 +17,6 @@ import { PartCategoryTree } from '../../components/nav/PartCategoryTree';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { useInstance } from '../../hooks/UseInstance';
-import { DetailsField, DetailsTable } from '../../tables/Details';
 import ParametricPartTable from '../../tables/part/ParametricPartTable';
 import { PartCategoryTable } from '../../tables/part/PartCategoryTable';
 import { PartListTable } from '../../tables/part/PartTable';
diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index b99594f488..dd36532e3f 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -35,8 +35,10 @@ import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { api } from '../../App';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
+import { PartIcons } from '../../components/details/PartIcons';
 import {
   ActionDropdown,
   BarcodeActionDropdown,
@@ -60,7 +62,6 @@ import { useEditApiFormModal } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable, PartIcons } from '../../tables/Details';
 import { BomTable } from '../../tables/bom/BomTable';
 import { UsedInTable } from '../../tables/bom/UsedInTable';
 import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
diff --git a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
index 4ae7bc82a8..1030eb4d8c 100644
--- a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
+++ b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
@@ -11,6 +11,7 @@ import {
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
@@ -33,7 +34,6 @@ import { useEditApiFormModal } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
 import { AttachmentTable } from '../../tables/general/AttachmentTable';
 import { PurchaseOrderLineItemTable } from '../../tables/purchasing/PurchaseOrderLineItemTable';
 import { StockItemTable } from '../../tables/stock/StockItemTable';
diff --git a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
index 57044765aa..c8b405ecfa 100644
--- a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
@@ -9,6 +9,7 @@ import {
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import { PageDetail } from '../../components/nav/PageDetail';
@@ -19,7 +20,6 @@ import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
 import { AttachmentTable } from '../../tables/general/AttachmentTable';
 
 /**
diff --git a/src/frontend/src/pages/sales/SalesOrderDetail.tsx b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
index 6f5916e2f0..84db04670e 100644
--- a/src/frontend/src/pages/sales/SalesOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
@@ -12,6 +12,7 @@ import {
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import { PageDetail } from '../../components/nav/PageDetail';
@@ -22,7 +23,6 @@ import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
 import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
 import { AttachmentTable } from '../../tables/general/AttachmentTable';
 
diff --git a/src/frontend/src/pages/stock/LocationDetail.tsx b/src/frontend/src/pages/stock/LocationDetail.tsx
index 875664e894..3214ed8183 100644
--- a/src/frontend/src/pages/stock/LocationDetail.tsx
+++ b/src/frontend/src/pages/stock/LocationDetail.tsx
@@ -4,6 +4,7 @@ import { IconInfoCircle, IconPackages, IconSitemap } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import { PageDetail } from '../../components/nav/PageDetail';
 import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
@@ -11,7 +12,6 @@ import { StockLocationTree } from '../../components/nav/StockLocationTree';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { useInstance } from '../../hooks/UseInstance';
-import { DetailsField, DetailsTable } from '../../tables/Details';
 import { StockItemTable } from '../../tables/stock/StockItemTable';
 import { StockLocationTable } from '../../tables/stock/StockLocationTable';
 
diff --git a/src/frontend/src/pages/stock/StockDetail.tsx b/src/frontend/src/pages/stock/StockDetail.tsx
index fe000711ed..9889451b7c 100644
--- a/src/frontend/src/pages/stock/StockDetail.tsx
+++ b/src/frontend/src/pages/stock/StockDetail.tsx
@@ -27,6 +27,7 @@ import {
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import {
   ItemDetails,
@@ -52,7 +53,6 @@ import { useEditStockItem } from '../../forms/StockForms';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
 import { AttachmentTable } from '../../tables/general/AttachmentTable';
 import { StockItemTable } from '../../tables/stock/StockItemTable';
 import StockItemTestResultTable from '../../tables/stock/StockItemTestResultTable';