diff --git a/src/frontend/src/pages/purchasing/PurchasingIndex.tsx b/src/frontend/src/pages/purchasing/PurchasingIndex.tsx index f946dd22a9..e399c9b9cc 100644 --- a/src/frontend/src/pages/purchasing/PurchasingIndex.tsx +++ b/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({ + key: 'supplier-view', + defaultValue: 'table' + }); + + const [manufacturerView, setManufacturerView] = useLocalStorage({ + 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: , - content: ( - - ) - }, + selection: supplierView, + onChange: setSupplierView, + options: [ + { + value: 'table', + label: t`Table View`, + icon: , + content: ( + + ) + }, + { + value: 'parametric', + label: t`Parametric View`, + icon: , + content: ( + + ) + } + ] + }), { name: 'supplier-parts', label: t`Supplier Parts`, icon: , content: }, - { + SegmentedControlPanel({ name: 'manufacturer', label: t`Manufacturers`, icon: , - content: ( - - ) - }, + selection: manufacturerView, + onChange: setManufacturerView, + options: [ + { + value: 'table', + label: t`Table View`, + icon: , + content: ( + + ) + }, + { + value: 'parametric', + label: t`Parametric View`, + icon: , + content: ( + + ) + } + ] + }), { name: 'manufacturer-parts', label: t`Manufacturer Parts`, @@ -98,7 +144,7 @@ export default function PurchasingIndex() { content: } ]; - }, [user, purchaseOrderView]); + }, [user, manufacturerView, purchaseOrderView, supplierView]); if (!user.isLoggedIn() || !user.hasViewRole(UserRoles.purchase_order)) { return ; diff --git a/src/frontend/src/pages/sales/SalesIndex.tsx b/src/frontend/src/pages/sales/SalesIndex.tsx index 4b4fae9059..bc6aa94177 100644 --- a/src/frontend/src/pages/sales/SalesIndex.tsx +++ b/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({ + key: 'customer-view', + defaultValue: 'table' + }); + const [salesOrderView, setSalesOrderView] = useLocalStorage({ - key: 'salesOrderView', + key: 'sales-order-view', defaultValue: 'table' }); const [returnOrderView, setReturnOrderView] = useLocalStorage({ - key: 'returnOrderView', + key: 'return-order-view', defaultValue: 'table' }); @@ -107,16 +114,36 @@ export default function SalesIndex() { } ] }), - { + SegmentedControlPanel({ name: 'customers', label: t`Customers`, icon: , - content: ( - - ) - } + selection: customersView, + onChange: setCustomersView, + options: [ + { + value: 'table', + label: t`Table View`, + icon: , + content: ( + + ) + }, + { + value: 'parametric', + label: t`Parametric View`, + icon: , + content: ( + + ) + } + ] + }) ]; - }, [user, salesOrderView, returnOrderView]); + }, [user, customersView, salesOrderView, returnOrderView]); if (!user.isLoggedIn() || !user.hasViewRole(UserRoles.sales_order)) { return ; diff --git a/src/frontend/src/tables/company/ParametericCompanyTable.tsx b/src/frontend/src/tables/company/ParametericCompanyTable.tsx new file mode 100644 index 0000000000..a309b44790 --- /dev/null +++ b/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 ; + } + }, + DescriptionColumn({}) + ]; + }, []); + + return ( + + ); +} diff --git a/src/frontend/src/tables/general/ParametricDataTable.tsx b/src/frontend/src/tables/general/ParametricDataTable.tsx index 048e242e7e..64db50e5a3 100644 --- a/src/frontend/src/tables/general/ParametricDataTable.tsx +++ b/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);