@inventreedb/ui 0.0.1

package/src/tables/settings/BarcodeScanHistoryTable.tsx

@@ -0,0 +1,281 @@
+import { t } from '@lingui/core/macro';
+import {
+  Alert,
+  Badge,
+  Divider,
+  Drawer,
+  Group,
+  type MantineStyleProp,
+  Stack,
+  Table,
+  Text
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { CopyButton } from '../../components/buttons/CopyButton';
+import { PassFailButton } from '../../components/buttons/YesNoButton';
+import { StylishText } from '../../components/items/StylishText';
+import { RenderUser } from '../../components/render/User';
+import { shortenString } from '../../functions/tables';
+import { useDeleteApiFormModal } from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { UserFilter } from '../Filter';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { RowDeleteAction } from '../RowActions';
+
+/*
+ * Render detail information for a particular barcode scan result.
+ */
+function BarcodeScanDetail({ scan }: Readonly<{ scan: any }>) {
+  const dataStyle: MantineStyleProp = {
+    textWrap: 'wrap',
+    lineBreak: 'auto',
+    wordBreak: 'break-word'
+  };
+
+  const hasResponseData = useMemo(() => {
+    return scan.response && Object.keys(scan.response).length > 0;
+  }, [scan.response]);
+
+  const hasContextData = useMemo(() => {
+    return scan.context && Object.keys(scan.context).length > 0;
+  }, [scan.context]);
+
+  return (
+    <Stack gap='xs'>
+      <Divider />
+      <Table>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td colSpan={2}>
+              <StylishText size='sm'>{t`Barcode Information`}</StylishText>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Th>{t`Barcode`}</Table.Th>
+            <Table.Td>
+              <Text size='sm' style={dataStyle}>
+                {scan.data}
+              </Text>
+            </Table.Td>
+            <Table.Td>
+              <CopyButton value={scan.data} size='xs' />
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Th>{t`Timestamp`}</Table.Th>
+            <Table.Td>{scan.timestamp}</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Th>{t`User`}</Table.Th>
+            <Table.Td>
+              <RenderUser instance={scan.user_detail} />
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Th>{t`Endpoint`}</Table.Th>
+            <Table.Td>{scan.endpoint}</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Th>{t`Result`}</Table.Th>
+            <Table.Td>
+              <PassFailButton value={scan.result} />
+            </Table.Td>
+          </Table.Tr>
+          {hasContextData && (
+            <Table.Tr>
+              <Table.Td colSpan={2}>
+                <StylishText size='sm'>{t`Context`}</StylishText>
+              </Table.Td>
+            </Table.Tr>
+          )}
+          {hasContextData &&
+            Object.keys(scan.context).map((key) => (
+              <Table.Tr key={key}>
+                <Table.Th>{key}</Table.Th>
+                <Table.Td>
+                  <Text size='sm' style={dataStyle}>
+                    {scan.context[key]}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <CopyButton value={scan.context[key]} size='xs' />
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          {hasResponseData && (
+            <Table.Tr>
+              <Table.Td colSpan={2}>
+                <StylishText size='sm'>{t`Response`}</StylishText>
+              </Table.Td>
+            </Table.Tr>
+          )}
+          {hasResponseData &&
+            Object.keys(scan.response).map((key) => (
+              <Table.Tr key={key}>
+                <Table.Th>{key}</Table.Th>
+                <Table.Td>
+                  <Text size='sm' style={dataStyle}>
+                    {scan.response[key]}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <CopyButton value={scan.response[key]} size='xs' />
+                </Table.Td>
+              </Table.Tr>
+            ))}
+        </Table.Tbody>
+      </Table>
+    </Stack>
+  );
+}
+
+/*
+ * Display the barcode scan history table
+ */
+export default function BarcodeScanHistoryTable() {
+  const user = useUserState();
+  const table = useTable('barcode-history');
+
+  const globalSettings = useGlobalSettingsState();
+
+  const [opened, { open, close }] = useDisclosure(false);
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'timestamp',
+        sortable: true,
+        switchable: false,
+        render: (record: any) => {
+          return (
+            <Group justify='space-between' wrap='nowrap'>
+              <Text>{record.timestamp}</Text>
+              {record.user_detail && (
+                <Badge size='xs'>{record.user_detail.username}</Badge>
+              )}
+            </Group>
+          );
+        }
+      },
+      {
+        accessor: 'data',
+        sortable: false,
+        switchable: true,
+        render: (record: any) => {
+          return (
+            <Text
+              size='xs'
+              style={{
+                textWrap: 'wrap',
+                lineBreak: 'auto',
+                wordBreak: 'break-word'
+              }}
+            >
+              {shortenString({ str: record.data, len: 100 })}
+            </Text>
+          );
+        }
+      },
+      {
+        accessor: 'endpoint',
+        sortable: true
+      },
+      {
+        accessor: 'result',
+        sortable: true,
+        render: (record: any) => {
+          return <PassFailButton value={record.result} />;
+        }
+      }
+    ];
+  }, []);
+
+  const filters: TableFilter[] = useMemo(() => {
+    return [
+      UserFilter({}),
+      {
+        name: 'result',
+        label: t`Result`,
+        description: t`Filter by result`
+      }
+    ];
+  }, []);
+
+  const canDelete: boolean = useMemo(() => {
+    return user.isStaff() && user.hasDeleteRole(UserRoles.admin);
+  }, [user]);
+
+  const [selectedResult, setSelectedResult] = useState<any>({});
+
+  const deleteResult = useDeleteApiFormModal({
+    url: ApiEndpoints.barcode_history,
+    pk: selectedResult.pk,
+    title: t`Delete Barcode Scan Record`,
+    table: table
+  });
+
+  const rowActions = useCallback(
+    (record: any) => {
+      return [
+        RowDeleteAction({
+          hidden: !canDelete,
+          onClick: () => {
+            setSelectedResult(record);
+            deleteResult.open();
+          }
+        })
+      ];
+    },
+    [canDelete, user]
+  );
+
+  return (
+    <>
+      {deleteResult.modal}
+      <Drawer
+        opened={opened}
+        size='xl'
+        position='right'
+        title={<StylishText>{t`Barcode Scan Details`}</StylishText>}
+        onClose={close}
+      >
+        <BarcodeScanDetail scan={selectedResult} />
+      </Drawer>
+      <Stack gap='xs'>
+        {!globalSettings.isSet('BARCODE_STORE_RESULTS') && (
+          <Alert
+            color='red'
+            icon={<IconExclamationCircle />}
+            title={t`Logging Disabled`}
+          >
+            <Text>{t`Barcode logging is not enabled`}</Text>
+          </Alert>
+        )}
+        <InvenTreeTable
+          url={apiUrl(ApiEndpoints.barcode_history)}
+          tableState={table}
+          columns={tableColumns}
+          props={{
+            tableFilters: filters,
+            enableBulkDelete: canDelete,
+            rowActions: rowActions,
+            onRowClick: (row) => {
+              setSelectedResult(row);
+              open();
+            }
+          }}
+        />
+      </Stack>
+    </>
+  );
+}

package/src/tables/settings/CustomStateTable.tsx

@@ -0,0 +1,226 @@
+import { t } from '@lingui/core/macro';
+import { Badge } from '@mantine/core';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import type {
+  StatusCodeInterface,
+  StatusCodeListInterface
+} from '../../components/render/StatusRenderer';
+import { statusColorMap } from '../../defaults/backendMappings';
+import { useCustomStateFields } from '../../forms/CommonForms';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useGlobalStatusState } from '../../states/StatusState';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+import {
+  type RowAction,
+  RowDeleteAction,
+  RowDuplicateAction,
+  RowEditAction
+} from '../RowActions';
+
+/**
+ * Table for displaying list of custom states
+ */
+export default function CustomStateTable() {
+  const table = useTable('customstates');
+
+  const statusCodes = useGlobalStatusState();
+
+  // Find the associated logical state key
+  const getLogicalState = useCallback(
+    (group: string, key: number) => {
+      const valuesList = Object.values(statusCodes.status ?? {}).find(
+        (value: StatusCodeListInterface) => value.status_class === group
+      );
+
+      const value = Object.values(valuesList?.values ?? {}).find(
+        (value: StatusCodeInterface) => value.key === key
+      );
+
+      return value?.label ?? value?.name ?? '';
+    },
+    [statusCodes]
+  );
+
+  const user = useUserState();
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'reference_status',
+        label: t`Status Group`,
+        field_type: 'choice',
+        choices: Object.values(statusCodes.status ?? {}).map(
+          (value: StatusCodeListInterface) => ({
+            label: value.status_class,
+            value: value.status_class
+          })
+        )
+      }
+    ];
+  }, [statusCodes]);
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'reference_status',
+        title: t`Status`,
+        sortable: true
+      },
+      {
+        accessor: 'logical_key',
+        title: t`Logical State`,
+        sortable: true,
+        render: (record: any) => {
+          const stateText = getLogicalState(
+            record.reference_status,
+            record.logical_key
+          );
+          return stateText ? stateText : record.logical_key;
+        }
+      },
+      {
+        accessor: 'name',
+        title: t`Identifier`,
+        sortable: true
+      },
+      {
+        accessor: 'label',
+        title: t`Display Name`,
+        sortable: true
+      },
+      {
+        accessor: 'key',
+        sortable: true
+      },
+      {
+        accessor: 'color',
+        render: (record: any) => {
+          return (
+            <Badge
+              color={statusColorMap[record.color] || statusColorMap['default']}
+              variant='filled'
+              size='xs'
+            >
+              {record.color}
+            </Badge>
+          );
+        }
+      }
+    ];
+  }, [getLogicalState]);
+
+  const newCustomStateFields = useCustomStateFields();
+  const duplicateCustomStateFields = useCustomStateFields();
+  const editCustomStateFields = useCustomStateFields();
+
+  const [initialStateData, setInitialStateData] = useState<any>({});
+
+  const newCustomState = useCreateApiFormModal({
+    url: ApiEndpoints.custom_state_list,
+    title: t`Add State`,
+    fields: newCustomStateFields,
+    table: table
+  });
+
+  const duplicateCustomState = useCreateApiFormModal({
+    url: ApiEndpoints.custom_state_list,
+    title: t`Add State`,
+    fields: duplicateCustomStateFields,
+    initialData: initialStateData,
+    table: table
+  });
+
+  const [selectedCustomState, setSelectedCustomState] = useState<
+    number | undefined
+  >(undefined);
+
+  const editCustomState = useEditApiFormModal({
+    url: ApiEndpoints.custom_state_list,
+    pk: selectedCustomState,
+    title: t`Edit State`,
+    fields: editCustomStateFields,
+    table: table
+  });
+
+  const deleteCustomState = useDeleteApiFormModal({
+    url: ApiEndpoints.custom_state_list,
+    pk: selectedCustomState,
+    title: t`Delete State`,
+    table: table
+  });
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.admin),
+          onClick: () => {
+            setSelectedCustomState(record.pk);
+            editCustomState.open();
+          }
+        }),
+        RowDuplicateAction({
+          hidden: !user.hasAddRole(UserRoles.admin),
+          onClick: () => {
+            setInitialStateData(record);
+            duplicateCustomState.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.admin),
+          onClick: () => {
+            setSelectedCustomState(record.pk);
+            deleteCustomState.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key={'add'}
+        onClick={() => {
+          setInitialStateData({});
+          newCustomState.open();
+        }}
+        tooltip={t`Add State`}
+      />
+    ];
+  }, []);
+
+  return (
+    <>
+      {newCustomState.modal}
+      {editCustomState.modal}
+      {duplicateCustomState.modal}
+      {deleteCustomState.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.custom_state_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          rowActions: rowActions,
+          tableActions: tableActions,
+          tableFilters: tableFilters,
+          enableDownload: true
+        }}
+      />
+    </>
+  );
+}

package/src/tables/settings/CustomUnitsTable.tsx

@@ -0,0 +1,125 @@
+import { t } from '@lingui/core/macro';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { customUnitsFields } from '../../forms/CommonForms';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+/**
+ * Table for displaying list of custom physical units
+ */
+export default function CustomUnitsTable() {
+  const table = useTable('custom-units');
+
+  const user = useUserState();
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        switchable: false,
+        sortable: true
+      },
+      {
+        accessor: 'definition',
+        switchable: false,
+        sortable: false
+      },
+      {
+        accessor: 'symbol',
+        switchable: false,
+        sortable: true
+      }
+    ];
+  }, []);
+
+  const newUnit = useCreateApiFormModal({
+    url: ApiEndpoints.custom_unit_list,
+    title: t`Add Custom Unit`,
+    fields: customUnitsFields(),
+    table: table
+  });
+
+  const [selectedUnit, setSelectedUnit] = useState<number>(-1);
+
+  const editUnit = useEditApiFormModal({
+    url: ApiEndpoints.custom_unit_list,
+    pk: selectedUnit,
+    title: t`Edit Custom Unit`,
+    fields: customUnitsFields(),
+    onFormSuccess: (record: any) => table.updateRecord(record)
+  });
+
+  const deleteUnit = useDeleteApiFormModal({
+    url: ApiEndpoints.custom_unit_list,
+    pk: selectedUnit,
+    title: t`Delete Custom Unit`,
+    table: table
+  });
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.admin),
+          onClick: () => {
+            setSelectedUnit(record.pk);
+            editUnit.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.admin),
+          onClick: () => {
+            setSelectedUnit(record.pk);
+            deleteUnit.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const tableActions = useMemo(() => {
+    const actions = [];
+
+    actions.push(
+      <AddItemButton
+        tooltip={t`Add custom unit`}
+        onClick={() => newUnit.open()}
+        hidden={!user.isStaff() || !user.hasChangeRole(UserRoles.admin)}
+      />
+    );
+
+    return actions;
+  }, [user]);
+
+  return (
+    <>
+      {newUnit.modal}
+      {editUnit.modal}
+      {deleteUnit.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.custom_unit_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          rowActions: rowActions,
+          tableActions: tableActions,
+          enableDownload: true
+        }}
+      />
+    </>
+  );
+}