@inventreedb/ui 0.0.1

package/src/tables/general/AttachmentTable.tsx

@@ -0,0 +1,404 @@
+import { t } from '@lingui/core/macro';
+import { Badge, Group, Paper, Stack, Text } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { notifications } from '@mantine/notifications';
+import {
+  IconCircleCheck,
+  IconExclamationCircle,
+  IconExternalLink,
+  IconFileUpload,
+  IconUpload,
+  IconX
+} from '@tabler/icons-react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { ActionButton } from '../../components/buttons/ActionButton';
+import { AttachmentLink } from '../../components/items/AttachmentLink';
+import { ProgressBar } from '../../components/items/ProgressBar';
+import { useApi } from '../../contexts/ApiContext';
+import { formatFileSize } from '../../defaults/formatters';
+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';
+
+/**
+ * Define set of columns to display for the attachment table
+ */
+function attachmentTableColumns(): TableColumn[] {
+  return [
+    {
+      accessor: 'attachment',
+      sortable: false,
+      switchable: false,
+      noWrap: true,
+      render: (record: any) => {
+        if (record.attachment) {
+          return <AttachmentLink attachment={record.attachment} />;
+        } else if (record.link) {
+          return <AttachmentLink attachment={record.link} external />;
+        } else {
+          return '-';
+        }
+      },
+      noContext: true
+    },
+    {
+      accessor: 'comment',
+      sortable: false,
+
+      render: (record: any) => {
+        return record.comment;
+      }
+    },
+    {
+      accessor: 'upload_date',
+      sortable: true,
+
+      render: (record: any) => {
+        return (
+          <Group justify='space-between'>
+            <Text>{record.upload_date}</Text>
+            {record.user_detail && (
+              <Badge size='xs'>{record.user_detail.username}</Badge>
+            )}
+          </Group>
+        );
+      }
+    },
+    {
+      accessor: 'file_size',
+      sortable: true,
+      switchable: true,
+      render: (record: any) => {
+        if (!record.attachment) {
+          return '-';
+        } else {
+          return formatFileSize(record.file_size);
+        }
+      }
+    }
+  ];
+}
+
+function UploadProgress({
+  filename,
+  progress
+}: {
+  filename: string;
+  progress: number;
+}) {
+  return (
+    <Stack gap='xs'>
+      <Text size='sm'>{t`Uploading file ${filename}`}</Text>
+      <ProgressBar value={progress} progressLabel={false} />
+    </Stack>
+  );
+}
+
+/**
+ * Construct a table for displaying uploaded attachments
+ */
+export function AttachmentTable({
+  model_type,
+  model_id
+}: Readonly<{
+  model_type: ModelType;
+  model_id: number;
+}>): ReactNode {
+  const api = useApi();
+  const user = useUserState();
+  const table = useTable(`${model_type}-attachments`);
+
+  const tableColumns = useMemo(() => attachmentTableColumns(), []);
+
+  const url = apiUrl(ApiEndpoints.attachment_list);
+
+  const validPk = useMemo(() => model_id > 0, [model_id]);
+
+  const canDelete = useMemo(
+    () => user.hasDeletePermission(model_type),
+    [user, model_type]
+  );
+
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+
+  const allowDragAndDrop: boolean = useMemo(() => {
+    return user.hasAddPermission(model_type);
+  }, [user, model_type]);
+
+  // Callback to upload file attachment(s)
+  function uploadFiles(files: File[]) {
+    files.forEach((file) => {
+      const formData = new FormData();
+      formData.append('attachment', file);
+      formData.append('model_type', model_type);
+      formData.append('model_id', model_id.toString());
+
+      setIsUploading(true);
+
+      const name: string = file.name;
+      const id: string = `attachment-upload-${model_type}-${model_id}-${file.name}`;
+
+      notifications.show({
+        id: id,
+        title: t`Uploading File`,
+        message: <UploadProgress filename={name} progress={0} />,
+        color: 'blue',
+        loading: true,
+        autoClose: false
+      });
+
+      api
+        .post(url, formData, {
+          timeout: 30 * 1000,
+          onUploadProgress: (progressEvent) => {
+            const progress = 100 * (progressEvent?.progress ?? 0);
+            notifications.update({
+              id: id,
+              title: t`Uploading File`,
+              color: 'blue',
+              loading: true,
+              autoClose: false,
+              message: <UploadProgress filename={name} progress={progress} />
+            });
+          }
+        })
+        .then((response) => {
+          notifications.update({
+            id: id,
+            title: t`File Uploaded`,
+            message: t`File ${name} uploaded successfully`,
+            color: 'green',
+            autoClose: 3500,
+            icon: <IconCircleCheck />,
+            loading: false
+          });
+
+          table.refreshTable();
+
+          return response;
+        })
+        .catch((error) => {
+          console.error('Error uploading attachment:', file, '->', error);
+          notifications.update({
+            id: id,
+            title: t`Upload Error`,
+            message: t`File could not be uploaded`,
+            color: 'red',
+            autoClose: 5000,
+            icon: <IconExclamationCircle />,
+            loading: false
+          });
+          return error;
+        })
+        .finally(() => {
+          setIsUploading(false);
+        });
+    });
+  }
+
+  const [attachmentType, setAttachmentType] = useState<'attachment' | 'link'>(
+    'attachment'
+  );
+
+  const [selectedAttachment, setSelectedAttachment] = useState<
+    number | undefined
+  >(undefined);
+
+  const uploadFields: ApiFormFieldSet = useMemo(() => {
+    const fields: ApiFormFieldSet = {
+      model_type: {
+        value: model_type,
+        hidden: true
+      },
+      model_id: {
+        value: model_id,
+        hidden: true
+      },
+      attachment: {},
+      link: {},
+      comment: {}
+    };
+
+    if (attachmentType != 'link') {
+      delete fields['link'];
+    }
+
+    // Remove the 'attachment' field if we are editing an existing attachment, or uploading a link
+    if (attachmentType != 'attachment' || !!selectedAttachment) {
+      delete fields['attachment'];
+    }
+
+    return fields;
+  }, [model_type, model_id, attachmentType, selectedAttachment]);
+
+  const uploadAttachment = useCreateApiFormModal({
+    url: url,
+    title: t`Upload Attachment`,
+    fields: uploadFields,
+    onFormSuccess: () => {
+      table.refreshTable();
+    }
+  });
+
+  const editAttachment = useEditApiFormModal({
+    url: url,
+    pk: selectedAttachment,
+    title: t`Edit Attachment`,
+    fields: uploadFields,
+    onFormSuccess: (record: any) => {
+      if (record.pk) {
+        table.updateRecord(record);
+      } else {
+        table.refreshTable();
+      }
+    }
+  });
+
+  const deleteAttachment = useDeleteApiFormModal({
+    url: url,
+    pk: selectedAttachment,
+    title: t`Delete Attachment`,
+    onFormSuccess: () => {
+      table.refreshTable();
+    }
+  });
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'is_link',
+        label: t`Is Link`,
+        description: t`Show link attachments`
+      },
+      {
+        name: 'is_file',
+        label: t`Is File`,
+        description: t`Show file attachments`
+      }
+    ];
+  }, []);
+
+  const tableActions: ReactNode[] = useMemo(() => {
+    return [
+      <ActionButton
+        key='add-attachment'
+        tooltip={t`Add attachment`}
+        hidden={!user.hasAddPermission(model_type)}
+        icon={<IconFileUpload />}
+        onClick={() => {
+          setAttachmentType('attachment');
+          setSelectedAttachment(undefined);
+          uploadAttachment.open();
+        }}
+      />,
+      <ActionButton
+        key='add-external-link'
+        tooltip={t`Add external link`}
+        hidden={!user.hasAddPermission(model_type)}
+        icon={<IconExternalLink />}
+        onClick={() => {
+          setAttachmentType('link');
+          setSelectedAttachment(undefined);
+          uploadAttachment.open();
+        }}
+      />
+    ];
+  }, [user, model_type]);
+
+  // Construct row actions for the attachment table
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangePermission(model_type),
+          onClick: () => {
+            setSelectedAttachment(record.pk);
+            editAttachment.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !canDelete,
+          onClick: () => {
+            setSelectedAttachment(record.pk);
+            deleteAttachment.open();
+          }
+        })
+      ];
+    },
+    [user, model_type]
+  );
+
+  return (
+    <>
+      {uploadAttachment.modal}
+      {editAttachment.modal}
+      {deleteAttachment.modal}
+      <Stack gap='xs'>
+        {validPk && (
+          <InvenTreeTable
+            key='attachment-table'
+            url={url}
+            tableState={table}
+            columns={tableColumns}
+            props={{
+              noRecordsText: t`No attachments found`,
+              enableSelection: canDelete,
+              enableBulkDelete: canDelete,
+              tableActions: tableActions,
+              tableFilters: tableFilters,
+              rowActions: rowActions,
+              params: {
+                model_type: model_type,
+                model_id: model_id
+              }
+            }}
+          />
+        )}
+        {allowDragAndDrop && validPk && (
+          <Paper p='md' shadow='xs' radius='md'>
+            <Dropzone
+              onDrop={uploadFiles}
+              loading={isUploading}
+              key='attachment-dropzone'
+            >
+              <Group justify='center' gap='lg' mih={100}>
+                <Dropzone.Accept>
+                  <IconUpload
+                    style={{ color: 'var(--mantine-color-blue-6)' }}
+                    stroke={1.5}
+                  />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX
+                    style={{ color: 'var(--mantine-color-red-6)' }}
+                    stroke={1.5}
+                  />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconUpload
+                    style={{ color: 'var(--mantine-color-dimmed)' }}
+                    stroke={1.5}
+                  />
+                </Dropzone.Idle>
+                <Text size='sm'>{t`Drag attachment file here to upload`}</Text>
+              </Group>
+            </Dropzone>
+          </Paper>
+        )}
+      </Stack>
+    </>
+  );
+}

package/src/tables/general/BarcodeScanTable.tsx

@@ -0,0 +1,124 @@
+import { t } from '@lingui/core/macro';
+import { IconTrash } from '@tabler/icons-react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import type { BarcodeScanItem } from '../../components/barcodes/BarcodeScanItem';
+import { ActionButton } from '../../components/buttons/ActionButton';
+import { RenderInstance } from '../../components/render/Instance';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowViewAction } from '../RowActions';
+
+/**
+ * A table for showing barcode scan history data on the scan index page
+ */
+export default function BarcodeScanTable({
+  records,
+  onItemsSelected,
+  onItemsDeleted
+}: {
+  records: BarcodeScanItem[];
+  onItemsSelected: (items: string[]) => void;
+  onItemsDeleted: (items: string[]) => void;
+}) {
+  const navigate = useNavigate();
+  const user = useUserState();
+
+  const table = useTable('barcode-scan-results', 'id');
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'instance',
+        title: t`Item`,
+        sortable: false,
+        switchable: false,
+        render: (record) => {
+          if (record.instance) {
+            return (
+              <RenderInstance model={record.model} instance={record.instance} />
+            );
+          } else {
+            return '-';
+          }
+        }
+      },
+      {
+        accessor: 'model',
+        title: t`Model`,
+        sortable: false
+      },
+      {
+        accessor: 'barcode',
+        title: t`Barcode`,
+        sortable: false
+      },
+      {
+        accessor: 'timestamp',
+        title: t`Timestamp`,
+        sortable: false,
+        render: (record) => {
+          return record.timestamp?.toLocaleString();
+        }
+      }
+    ];
+  }, []);
+
+  const rowActions = useCallback((record: BarcodeScanItem) => {
+    const actions: RowAction[] = [];
+
+    if (record.model && record.pk && record.instance) {
+      actions.push(
+        RowViewAction({
+          title: t`View Item`,
+          modelId: record.instance?.pk,
+          modelType: record.model,
+          navigate: navigate,
+          hidden: !user.hasViewPermission(record.model)
+        })
+      );
+    }
+
+    return actions;
+  }, []);
+
+  const tableActions = useMemo(() => {
+    return [
+      <ActionButton
+        disabled={!table.hasSelectedRecords}
+        icon={<IconTrash />}
+        color='red'
+        tooltip={t`Delete selected records`}
+        onClick={() => {
+          onItemsDeleted(table.selectedIds);
+          table.clearSelectedRecords();
+        }}
+      />
+    ];
+  }, [table.hasSelectedRecords, table.selectedIds]);
+
+  useEffect(() => {
+    onItemsSelected(table.selectedIds);
+  }, [table.selectedIds]);
+
+  return (
+    <>
+      <InvenTreeTable
+        tableState={table}
+        tableData={records}
+        columns={tableColumns}
+        props={{
+          enableFilters: false,
+          enableSelection: true,
+          enablePagination: false,
+          enableSearch: false,
+          enableRefresh: false,
+          rowActions: rowActions,
+          tableActions: tableActions
+        }}
+      />
+    </>
+  );
+}

package/src/tables/general/ExtraLineItemTable.tsx

@@ -0,0 +1,174 @@
+import { t } from '@lingui/core/macro';
+import { useCallback, useMemo, useState } from 'react';
+
+import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { formatCurrency } from '../../defaults/formatters';
+import { extraLineItemFields } 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 { LinkColumn, NoteColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import {
+  type RowAction,
+  RowDeleteAction,
+  RowDuplicateAction,
+  RowEditAction
+} from '../RowActions';
+
+export default function ExtraLineItemTable({
+  endpoint,
+  orderId,
+  currency,
+  role
+}: Readonly<{
+  endpoint: ApiEndpoints;
+  orderId: number;
+  currency: string;
+  role: UserRoles;
+}>) {
+  const table = useTable('extra-line-item');
+  const user = useUserState();
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'reference',
+        switchable: false
+      },
+      {
+        accessor: 'description'
+      },
+      {
+        accessor: 'quantity',
+        switchable: false
+      },
+      {
+        accessor: 'price',
+        title: t`Unit Price`,
+        render: (record: any) =>
+          formatCurrency(record.price, {
+            currency: record.price_currency
+          })
+      },
+      {
+        accessor: 'total_price',
+        title: t`Total Price`,
+        render: (record: any) =>
+          formatCurrency(record.price, {
+            currency: record.price_currency,
+            multiplier: record.quantity
+          })
+      },
+      NoteColumn({
+        accessor: 'notes'
+      }),
+      LinkColumn({
+        accessor: 'link'
+      })
+    ];
+  }, []);
+
+  const [initialData, setInitialData] = useState<any>({});
+
+  const [selectedLine, setSelectedLine] = useState<number>(0);
+
+  const newLineItem = useCreateApiFormModal({
+    url: endpoint,
+    title: t`Add Line Item`,
+    fields: extraLineItemFields(),
+    initialData: {
+      ...initialData,
+      price_currency: currency
+    },
+    table: table
+  });
+
+  const editLineItem = useEditApiFormModal({
+    url: endpoint,
+    pk: selectedLine,
+    title: t`Edit Line Item`,
+    fields: extraLineItemFields(),
+    table: table
+  });
+
+  const deleteLineItem = useDeleteApiFormModal({
+    url: endpoint,
+    pk: selectedLine,
+    title: t`Delete Line Item`,
+    table: table
+  });
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(role),
+          onClick: () => {
+            setSelectedLine(record.pk);
+            editLineItem.open();
+          }
+        }),
+        RowDuplicateAction({
+          hidden: !user.hasAddRole(role),
+          onClick: () => {
+            setInitialData({ ...record });
+            newLineItem.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(role),
+          onClick: () => {
+            setSelectedLine(record.pk);
+            deleteLineItem.open();
+          }
+        })
+      ];
+    },
+    [user, role]
+  );
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-line-item'
+        tooltip={t`Add Extra Line Item`}
+        hidden={!user.hasAddRole(role)}
+        onClick={() => {
+          setInitialData({
+            order: orderId
+          });
+          newLineItem.open();
+        }}
+      />
+    ];
+  }, [user, role]);
+
+  return (
+    <>
+      {newLineItem.modal}
+      {editLineItem.modal}
+      {deleteLineItem.modal}
+      <InvenTreeTable
+        tableState={table}
+        url={apiUrl(endpoint)}
+        columns={tableColumns}
+        props={{
+          params: {
+            order: orderId
+          },
+          rowActions: rowActions,
+          tableActions: tableActions
+        }}
+      />
+    </>
+  );
+}