@inventreedb/ui 0.0.1

package/src/tables/part/RelatedPartTable.tsx

@@ -0,0 +1,182 @@
+import { t } from '@lingui/core/macro';
+import { Group, Text } from '@mantine/core';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { Thumbnail } from '../../components/images/Thumbnail';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { NoteColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+/**
+ * Construct a table listing related parts for a given part
+ */
+export function RelatedPartTable({
+  partId
+}: Readonly<{ partId: number }>): ReactNode {
+  const table = useTable('relatedparts');
+
+  const navigate = useNavigate();
+
+  const user = useUserState();
+
+  // Construct table columns for this table
+  const tableColumns: TableColumn[] = useMemo(() => {
+    function getPart(record: any) {
+      if (record.part_1 == partId) {
+        return record.part_2_detail;
+      } else {
+        return record.part_1_detail;
+      }
+    }
+
+    return [
+      {
+        accessor: 'part',
+        title: t`Part`,
+        switchable: false,
+        render: (record: any) => {
+          const part = getPart(record);
+          return (
+            <Group
+              wrap='nowrap'
+              justify='left'
+              onClick={() => {
+                navigate(`/part/${part.pk}/`);
+              }}
+            >
+              <Thumbnail src={part.thumbnail || part.image} />
+              <Text>{part.name}</Text>
+            </Group>
+          );
+        }
+      },
+      {
+        accessor: 'ipn',
+        title: t`IPN`,
+        switchable: true,
+        render: (record: any) => {
+          const part = getPart(record);
+          return part.IPN;
+        }
+      },
+      {
+        accessor: 'description',
+        title: t`Part Description`,
+        ellipsis: true,
+        render: (record: any) => {
+          return getPart(record).description;
+        }
+      },
+      NoteColumn({})
+    ];
+  }, [partId]);
+
+  const relatedPartFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      part_1: {
+        hidden: true
+      },
+      part_2: {},
+      note: {}
+    };
+  }, []);
+
+  const newRelatedPart = useCreateApiFormModal({
+    url: ApiEndpoints.related_part_list,
+    title: t`Add Related Part`,
+    fields: relatedPartFields,
+    initialData: {
+      part_1: partId
+    },
+    table: table
+  });
+
+  const [selectedRelatedPart, setSelectedRelatedPart] = useState<
+    number | undefined
+  >(undefined);
+
+  const deleteRelatedPart = useDeleteApiFormModal({
+    url: ApiEndpoints.related_part_list,
+    pk: selectedRelatedPart,
+    title: t`Delete Related Part`,
+    table: table
+  });
+
+  const editRelatedPart = useEditApiFormModal({
+    url: ApiEndpoints.related_part_list,
+    pk: selectedRelatedPart,
+    title: t`Edit Related Part`,
+    fields: {
+      note: {}
+    },
+    table: table
+  });
+
+  const tableActions: ReactNode[] = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-related-part'
+        tooltip={t`Add Related Part`}
+        hidden={!user.hasAddRole(UserRoles.part)}
+        onClick={() => newRelatedPart.open()}
+      />
+    ];
+  }, [user]);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.part),
+          onClick: () => {
+            setSelectedRelatedPart(record.pk);
+            editRelatedPart.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.part),
+          onClick: () => {
+            setSelectedRelatedPart(record.pk);
+            deleteRelatedPart.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  return (
+    <>
+      {newRelatedPart.modal}
+      {editRelatedPart.modal}
+      {deleteRelatedPart.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.related_part_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          params: {
+            part: partId,
+            category_detail: true
+          },
+          rowActions: rowActions,
+          tableActions: tableActions
+        }}
+      />
+    </>
+  );
+}

package/src/tables/part/SelectionListTable.tsx

@@ -0,0 +1,134 @@
+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 { selectionListFields } from '../../forms/selectionListFields';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { BooleanColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+/**
+ * Table for displaying list of selectionlist items
+ */
+export default function SelectionListTable() {
+  const table = useTable('selectionlist');
+
+  const user = useUserState();
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        sortable: true
+      },
+      {
+        accessor: 'description',
+        sortable: true
+      },
+      BooleanColumn({
+        accessor: 'active'
+      }),
+      BooleanColumn({
+        accessor: 'locked'
+      }),
+      {
+        accessor: 'source_plugin',
+        sortable: true
+      },
+      {
+        accessor: 'source_string',
+        sortable: true
+      },
+      {
+        accessor: 'entry_count'
+      }
+    ];
+  }, []);
+
+  const newSelectionList = useCreateApiFormModal({
+    url: ApiEndpoints.selectionlist_list,
+    title: t`Add Selection List`,
+    fields: selectionListFields(),
+    table: table
+  });
+
+  const [selectedSelectionList, setSelectedSelectionList] = useState<
+    number | undefined
+  >(undefined);
+
+  const editSelectionList = useEditApiFormModal({
+    url: ApiEndpoints.selectionlist_list,
+    pk: selectedSelectionList,
+    title: t`Edit Selection List`,
+    fields: selectionListFields(),
+    table: table
+  });
+
+  const deleteSelectionList = useDeleteApiFormModal({
+    url: ApiEndpoints.selectionlist_list,
+    pk: selectedSelectionList,
+    title: t`Delete Selection List`,
+    table: table
+  });
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.admin),
+          onClick: () => {
+            setSelectedSelectionList(record.pk);
+            editSelectionList.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.admin),
+          onClick: () => {
+            setSelectedSelectionList(record.pk);
+            deleteSelectionList.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-selection-list'
+        onClick={() => newSelectionList.open()}
+        tooltip={t`Add Selection List`}
+      />
+    ];
+  }, []);
+
+  return (
+    <>
+      {newSelectionList.modal}
+      {editSelectionList.modal}
+      {deleteSelectionList.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.selectionlist_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          rowActions: rowActions,
+          tableActions: tableActions,
+          enableDownload: true
+        }}
+      />
+    </>
+  );
+}

package/src/tables/plugin/PluginErrorTable.tsx

@@ -0,0 +1,58 @@
+import { t } from '@lingui/core/macro';
+import { Code } from '@mantine/core';
+import { useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { useTable } from '../../hooks/UseTable';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+
+export interface PluginRegistryErrorI {
+  id: number;
+  stage: string;
+  name: string;
+  message: string;
+}
+
+/**
+ * Table displaying list of plugin registry errors
+ */
+export default function PluginErrorTable() {
+  const table = useTable('registryErrors', 'id');
+
+  const registryErrorTableColumns: TableColumn<PluginRegistryErrorI>[] =
+    useMemo(
+      () => [
+        {
+          accessor: 'stage',
+          title: t`Stage`
+        },
+        {
+          accessor: 'name',
+          title: t`Name`
+        },
+        {
+          accessor: 'message',
+          title: t`Message`,
+          render: (row) => <Code>{row.message}</Code>
+        }
+      ],
+      []
+    );
+
+  return (
+    <InvenTreeTable
+      url={apiUrl(ApiEndpoints.plugin_registry_status)}
+      tableState={table}
+      columns={registryErrorTableColumns}
+      props={{
+        dataFormatter: (data: any) =>
+          data.registry_errors.map((e: any, i: number) => ({ id: i, ...e })),
+        enableDownload: false,
+        enableFilters: false,
+        enableSearch: false
+      }}
+    />
+  );
+}