@inventreedb/ui 0.0.1 → 0.0.2

package/src/tables/general/AttachmentTable.tsx

@@ -1,404 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,174 +0,0 @@
-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
-        }}
-      />
-    </>
-  );
-}