Add parametric tables for company views

src/frontend/src/pages/purchasing/PurchasingIndex.tsx

@@ -5,6 +5,7 @@ import {
   IconBuildingStore,
   IconBuildingWarehouse,
   IconCalendar,
+  IconListDetails,
   IconPackageExport,
   IconShoppingCart,
   IconTable
@@ -21,6 +22,7 @@ import { PanelGroup } from '../../components/panels/PanelGroup';
 import SegmentedControlPanel from '../../components/panels/SegmentedControlPanel';
 import { useUserState } from '../../states/UserState';
 import { CompanyTable } from '../../tables/company/CompanyTable';
+import ParametricCompanyTable from '../../tables/company/ParametericCompanyTable';
 import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
 import { PurchaseOrderTable } from '../../tables/purchasing/PurchaseOrderTable';
 import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
@@ -33,6 +35,16 @@ export default function PurchasingIndex() {
     defaultValue: 'table'
   });
 
+  const [supplierView, setSupplierView] = useLocalStorage<string>({
+    key: 'supplier-view',
+    defaultValue: 'table'
+  });
+
+  const [manufacturerView, setManufacturerView] = useLocalStorage<string>({
+    key: 'manufacturer-view',
+    defaultValue: 'table'
+  });
+
   const panels = useMemo(() => {
     return [
       SegmentedControlPanel({
@@ -63,34 +75,68 @@ export default function PurchasingIndex() {
           }
         ]
       }),
-      {
+      SegmentedControlPanel({
         name: 'suppliers',
         label: t`Suppliers`,
         icon: <IconBuildingStore />,
-        content: (
+        selection: supplierView,
-          <CompanyTable
+        onChange: setSupplierView,
-            path='purchasing/supplier'
+        options: [
-            params={{ is_supplier: true }}
+          {
-          />
+            value: 'table',
-        )
+            label: t`Table View`,
-      },
+            icon: <IconTable />,
+            content: (
+              <CompanyTable
+                path='purchasing/supplier'
+                params={{ is_supplier: true }}
+              />
+            )
+          },
+          {
+            value: 'parametric',
+            label: t`Parametric View`,
+            icon: <IconListDetails />,
+            content: (
+              <ParametricCompanyTable queryParams={{ is_supplier: true }} />
+            )
+          }
+        ]
+      }),
       {
         name: 'supplier-parts',
         label: t`Supplier Parts`,
         icon: <IconPackageExport />,
         content: <SupplierPartTable />
       },
-      {
+      SegmentedControlPanel({
         name: 'manufacturer',
         label: t`Manufacturers`,
         icon: <IconBuildingFactory2 />,
-        content: (
+        selection: manufacturerView,
-          <CompanyTable
+        onChange: setManufacturerView,
-            path='purchasing/manufacturer'
+        options: [
-            params={{ is_manufacturer: true }}
+          {
-          />
+            value: 'table',
-        )
+            label: t`Table View`,
-      },
+            icon: <IconTable />,
+            content: (
+              <CompanyTable
+                path='purchasing/manufacturer'
+                params={{ is_manufacturer: true }}
+              />
+            )
+          },
+          {
+            value: 'parametric',
+            label: t`Parametric View`,
+            icon: <IconListDetails />,
+            content: (
+              <ParametricCompanyTable queryParams={{ is_manufacturer: true }} />
+            )
+          }
+        ]
+      }),
       {
         name: 'manufacturer-parts',
         label: t`Manufacturer Parts`,
@@ -98,7 +144,7 @@ export default function PurchasingIndex() {
         content: <ManufacturerPartTable />
       }
     ];
-  }, [user, purchaseOrderView]);
+  }, [user, manufacturerView, purchaseOrderView, supplierView]);
 
   if (!user.isLoggedIn() || !user.hasViewRole(UserRoles.purchase_order)) {
     return <PermissionDenied />;

src/frontend/src/pages/sales/SalesIndex.tsx

@@ -4,6 +4,7 @@ import {
   IconBuildingStore,
   IconCalendar,
   IconCubeSend,
+  IconListDetails,
   IconTable,
   IconTruckDelivery,
   IconTruckReturn
@@ -20,6 +21,7 @@ import { PanelGroup } from '../../components/panels/PanelGroup';
 import SegmentedControlPanel from '../../components/panels/SegmentedControlPanel';
 import { useUserState } from '../../states/UserState';
 import { CompanyTable } from '../../tables/company/CompanyTable';
+import ParametricCompanyTable from '../../tables/company/ParametericCompanyTable';
 import { ReturnOrderTable } from '../../tables/sales/ReturnOrderTable';
 import SalesOrderShipmentTable from '../../tables/sales/SalesOrderShipmentTable';
 import { SalesOrderTable } from '../../tables/sales/SalesOrderTable';
@@ -27,13 +29,18 @@ import { SalesOrderTable } from '../../tables/sales/SalesOrderTable';
 export default function SalesIndex() {
   const user = useUserState();
 
+  const [customersView, setCustomersView] = useLocalStorage<string>({
+    key: 'customer-view',
+    defaultValue: 'table'
+  });
+
   const [salesOrderView, setSalesOrderView] = useLocalStorage<string>({
-    key: 'salesOrderView',
+    key: 'sales-order-view',
     defaultValue: 'table'
   });
 
   const [returnOrderView, setReturnOrderView] = useLocalStorage<string>({
-    key: 'returnOrderView',
+    key: 'return-order-view',
     defaultValue: 'table'
   });
 
@@ -107,16 +114,36 @@ export default function SalesIndex() {
           }
         ]
       }),
-      {
+      SegmentedControlPanel({
         name: 'customers',
         label: t`Customers`,
         icon: <IconBuildingStore />,
-        content: (
+        selection: customersView,
-          <CompanyTable path='sales/customer' params={{ is_customer: true }} />
+        onChange: setCustomersView,
-        )
+        options: [
-      }
+          {
+            value: 'table',
+            label: t`Table View`,
+            icon: <IconTable />,
+            content: (
+              <CompanyTable
+                path='sales/customer'
+                params={{ is_customer: true }}
+              />
+            )
+          },
+          {
+            value: 'parametric',
+            label: t`Parametric View`,
+            icon: <IconListDetails />,
+            content: (
+              <ParametricCompanyTable queryParams={{ is_customer: true }} />
+            )
+          }
+        ]
+      })
     ];
-  }, [user, salesOrderView, returnOrderView]);
+  }, [user, customersView, salesOrderView, returnOrderView]);
 
   if (!user.isLoggedIn() || !user.hasViewRole(UserRoles.sales_order)) {
     return <PermissionDenied />;

src/frontend/src/tables/company/ParametericCompanyTable.tsx

@@ -0,0 +1,39 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import type { TableColumn } from '@lib/types/Tables';
+import { t } from '@lingui/core/macro';
+import { useMemo } from 'react';
+import { CompanyColumn, DescriptionColumn } from '../ColumnRenderers';
+import ParametricDataTable from '../general/ParametricDataTable';
+
+export default function ParametricCompanyTable({
+  queryParams
+}: {
+  queryParams?: any;
+}) {
+  const customColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        title: t`Company`,
+        sortable: true,
+        switchable: false,
+        render: (record: any) => {
+          return <CompanyColumn company={record} />;
+        }
+      },
+      DescriptionColumn({})
+    ];
+  }, []);
+
+  return (
+    <ParametricDataTable
+      modelType={ModelType.company}
+      endpoint={ApiEndpoints.company_list}
+      customColumns={customColumns}
+      queryParams={{
+        ...queryParams
+      }}
+    />
+  );
+}

src/frontend/src/tables/general/ParametricDataTable.tsx

@@ -124,7 +124,8 @@ export default function ParametricDataTable({
         .get(apiUrl(ApiEndpoints.parameter_template_list), {
           params: {
             active: true,
-            for_model: modelType
+            for_model: modelType,
+            exists_for_model: modelType
           }
         })
         .then((response) => response.data);