From bd29203b7163882ac14b14d397f0dbf844e1d504 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Fri, 30 Aug 2024 18:01:14 +0200
Subject: [PATCH] Add display for all units

---
 src/frontend/src/enums/ApiEndpoints.tsx       |  1 +
 .../Index/Settings/AdminCenter/Index.tsx      |  8 +-
 .../AdminCenter/UnitManagmentPanel.tsx        | 81 +++++++++++++++++++
 3 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagmentPanel.tsx

diff --git a/src/frontend/src/enums/ApiEndpoints.tsx b/src/frontend/src/enums/ApiEndpoints.tsx
index 6ce43aa910..6c7174e0d4 100644
--- a/src/frontend/src/enums/ApiEndpoints.tsx
+++ b/src/frontend/src/enums/ApiEndpoints.tsx
@@ -31,6 +31,7 @@ export enum ApiEndpoints {
   // Generic API endpoints
   currency_list = 'currency/exchange/',
   currency_refresh = 'currency/refresh/',
+  all_units = 'units/all',
   task_overview = 'background-task/',
   task_pending_list = 'background-task/pending/',
   task_scheduled_list = 'background-task/scheduled/',
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
index 7c0b51c8d7..0b980a1df9 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
@@ -52,6 +52,8 @@ const CurrencyManagmentPanel = Loadable(
   lazy(() => import('./CurrencyManagmentPanel'))
 );
 
+const UnitManagmentPanel = Loadable(lazy(() => import('./UnitManagmentPanel')));
+
 const PluginManagementPanel = Loadable(
   lazy(() => import('./PluginManagementPanel'))
 );
@@ -76,10 +78,6 @@ const CustomStateTable = Loadable(
   lazy(() => import('../../../../tables/settings/CustomStateTable'))
 );
 
-const CustomUnitsTable = Loadable(
-  lazy(() => import('../../../../tables/settings/CustomUnitsTable'))
-);
-
 const PartParameterTemplateTable = Loadable(
   lazy(() => import('../../../../tables/part/PartParameterTemplateTable'))
 );
@@ -149,7 +147,7 @@ export default function AdminCenter() {
         name: 'customunits',
         label: t`Custom Units`,
         icon: <IconScale />,
-        content: <CustomUnitsTable />
+        content: <UnitManagmentPanel />
       },
       {
         name: 'part-parameters',
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagmentPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagmentPanel.tsx
new file mode 100644
index 0000000000..04b5e98121
--- /dev/null
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagmentPanel.tsx
@@ -0,0 +1,81 @@
+import { t } from '@lingui/macro';
+import { Accordion, Stack } from '@mantine/core';
+import { useMemo } from 'react';
+
+import { StylishText } from '../../../../components/items/StylishText';
+import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
+import { useTable } from '../../../../hooks/UseTable';
+import { apiUrl } from '../../../../states/ApiState';
+import { BooleanColumn } from '../../../../tables/ColumnRenderers';
+import { InvenTreeTable } from '../../../../tables/InvenTreeTable';
+import CustomUnitsTable from '../../../../tables/settings/CustomUnitsTable';
+
+function AllUnitTable() {
+  const table = useTable('all-units');
+  const columns = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        title: t`Name`
+      },
+      BooleanColumn({ accessor: 'is_alias', title: t`Alias` }),
+      BooleanColumn({ accessor: 'isdimensionless', title: t`Dimensionless` }),
+      {
+        accessor: 'default_format',
+        title: t`default_format`
+      }
+    ];
+  }, []);
+
+  return (
+    <InvenTreeTable
+      url={apiUrl(ApiEndpoints.all_units)}
+      tableState={table}
+      columns={columns}
+      props={{
+        idAccessor: 'name',
+        enableSearch: false,
+        enablePagination: false,
+        enableColumnSwitching: false,
+        dataFormatter: (data: any) => {
+          let units = data.available_units ?? {};
+          return Object.entries(units).map(([key, values]) => {
+            console.log(values);
+            return {
+              name: values.name,
+              is_alias: values.is_alias,
+              compatible_units: values.compatible_units,
+              isdimensionless: values.isdimensionless,
+              default_format: values.default_format
+            };
+          });
+        }
+      }}
+    />
+  );
+}
+
+export default function UnitManagmentPanel() {
+  return (
+    <Stack gap="xs">
+      <Accordion defaultValue="custom">
+        <Accordion.Item value="custom" key="custom">
+          <Accordion.Control>
+            <StylishText size="lg">{t`Custom Units`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <CustomUnitsTable />
+          </Accordion.Panel>
+        </Accordion.Item>
+        <Accordion.Item value="all" key="all">
+          <Accordion.Control>
+            <StylishText size="lg">{t`All units`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <AllUnitTable />
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    </Stack>
+  );
+}