@inventreedb/ui 0.0.1

package/src/tables/part/PartTestTemplateTable.tsx

@@ -0,0 +1,290 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { Alert, Badge, Stack, Text } from '@mantine/core';
+import { IconLock } from '@tabler/icons-react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { getDetailUrl } from '../../functions/urls';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import {
+  type RowAction,
+  RowDeleteAction,
+  RowEditAction,
+  RowViewAction
+} from '../RowActions';
+import { TableHoverCard } from '../TableHoverCard';
+
+export default function PartTestTemplateTable({
+  partId,
+  partLocked
+}: Readonly<{
+  partId: number;
+  partLocked?: boolean;
+}>) {
+  const table = useTable('part-test-template');
+  const user = useUserState();
+  const navigate = useNavigate();
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'test_name',
+        switchable: false,
+        sortable: true,
+        render: (record: any) => {
+          const extra: ReactNode[] = [];
+
+          if (record.part != partId) {
+            extra.push(
+              <Text size='sm'>{t`Test is defined for a parent template part`}</Text>
+            );
+          }
+
+          return (
+            <TableHoverCard
+              value={
+                <Text
+                  fw={record.required && 700}
+                  c={record.enabled ? undefined : 'red'}
+                >
+                  {record.test_name}
+                </Text>
+              }
+              title={t`Template Details`}
+              extra={extra}
+            />
+          );
+        }
+      },
+      {
+        accessor: 'results',
+        switchable: true,
+        sortable: true,
+        title: t`Results`,
+        render: (record: any) => {
+          return record.results || <Badge color='blue'>{t`No Results`}</Badge>;
+        }
+      },
+      DescriptionColumn({
+        switchable: false
+      }),
+      BooleanColumn({
+        accessor: 'enabled'
+      }),
+      {
+        accessor: 'choices',
+        sortable: false,
+        switchable: true
+      },
+      BooleanColumn({
+        accessor: 'required'
+      }),
+      BooleanColumn({
+        accessor: 'requires_value'
+      }),
+      BooleanColumn({
+        accessor: 'requires_attachment'
+      })
+    ];
+  }, [partId]);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'required',
+        label: t`Required`,
+        description: t`Show required tests`
+      },
+      {
+        name: 'enabled',
+        label: t`Enabled`,
+        description: t`Show enabled tests`
+      },
+      {
+        name: 'requires_value',
+        label: t`Requires Value`,
+        description: t`Show tests that require a value`
+      },
+      {
+        name: 'requires_attachment',
+        label: t`Requires Attachment`,
+        description: t`Show tests that require an attachment`
+      },
+      {
+        name: 'include_inherited',
+        label: t`Include Inherited`,
+        description: t`Show tests from inherited templates`
+      },
+      {
+        name: 'has_results',
+        label: t`Has Results`,
+        description: t`Show tests which have recorded results`
+      }
+    ];
+  }, []);
+
+  const partTestTemplateFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      part: {
+        hidden: !user.isStaff()
+      },
+      test_name: {},
+      description: {},
+      required: {},
+      requires_value: {},
+      requires_attachment: {},
+      choices: {},
+      enabled: {}
+    };
+  }, [user]);
+
+  const newTestTemplate = useCreateApiFormModal({
+    url: ApiEndpoints.part_test_template_list,
+    title: t`Add Test Template`,
+    fields: useMemo(
+      () => ({ ...partTestTemplateFields }),
+      [partTestTemplateFields]
+    ),
+    initialData: {
+      part: partId
+    },
+    table: table
+  });
+
+  const [selectedTest, setSelectedTest] = useState<number>(-1);
+
+  const editTestTemplate = useEditApiFormModal({
+    url: ApiEndpoints.part_test_template_list,
+    pk: selectedTest,
+    title: t`Edit Test Template`,
+    table: table,
+    fields: useMemo(
+      () => ({ ...partTestTemplateFields }),
+      [partTestTemplateFields]
+    )
+  });
+
+  const deleteTestTemplate = useDeleteApiFormModal({
+    url: ApiEndpoints.part_test_template_list,
+    pk: selectedTest,
+    title: t`Delete Test Template`,
+    preFormContent: (
+      <Alert color='red' title={t`This action cannot be reversed`}>
+        <Text>
+          <Trans>
+            Any tests results associated with this template will be deleted
+          </Trans>
+        </Text>
+      </Alert>
+    ),
+    table: table
+  });
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      const can_edit = user.hasChangeRole(UserRoles.part);
+      const can_delete = user.hasDeleteRole(UserRoles.part);
+
+      if (record.part != partId) {
+        // This test is defined for a parent part
+        return [
+          RowViewAction({
+            title: t`View Parent Part`,
+            modelType: ModelType.part,
+            modelId: record.part,
+            navigate: navigate
+          })
+        ];
+      }
+
+      return [
+        RowEditAction({
+          hidden: partLocked || !can_edit,
+          onClick: () => {
+            setSelectedTest(record.pk);
+            editTestTemplate.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: partLocked || !can_delete,
+          onClick: () => {
+            setSelectedTest(record.pk);
+            deleteTestTemplate.open();
+          }
+        })
+      ];
+    },
+    [user, partId, partLocked]
+  );
+
+  const tableActions = useMemo(() => {
+    const can_add = user.hasAddRole(UserRoles.part);
+
+    return [
+      <AddItemButton
+        key='add-test-template'
+        tooltip={t`Add Test Template`}
+        onClick={() => newTestTemplate.open()}
+        hidden={partLocked || !can_add}
+      />
+    ];
+  }, [user, partLocked]);
+
+  return (
+    <>
+      {newTestTemplate.modal}
+      {editTestTemplate.modal}
+      {deleteTestTemplate.modal}
+      <Stack gap='xs'>
+        {partLocked && (
+          <Alert
+            title={t`Part is Locked`}
+            color='orange'
+            icon={<IconLock />}
+            p='xs'
+          >
+            <Text>{t`Part templates cannot be edited, as the part is locked`}</Text>
+          </Alert>
+        )}
+        <InvenTreeTable
+          url={apiUrl(ApiEndpoints.part_test_template_list)}
+          tableState={table}
+          columns={tableColumns}
+          props={{
+            params: {
+              part: partId,
+              part_detail: true
+            },
+            tableFilters: tableFilters,
+            tableActions: tableActions,
+            enableDownload: true,
+            rowActions: rowActions,
+            onRowClick: (row) => {
+              if (row.part && row.part != partId) {
+                // This test is defined for a different part
+                navigate(getDetailUrl(ModelType.part, row.part));
+              }
+            }
+          }}
+        />
+      </Stack>
+    </>
+  );
+}

package/src/tables/part/PartThumbTable.tsx

@@ -0,0 +1,230 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  AspectRatio,
+  Button,
+  Divider,
+  Group,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput
+} from '@mantine/core';
+import { useDebouncedValue, useHover } from '@mantine/hooks';
+import { modals } from '@mantine/modals';
+import { useQuery } from '@tanstack/react-query';
+import type React from 'react';
+import { Suspense, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { IconX } from '@tabler/icons-react';
+import { api } from '../../App';
+import { Thumbnail } from '../../components/images/Thumbnail';
+
+/**
+ * Input props to table
+ */
+export type ThumbTableProps = {
+  pk: string;
+  setImage: (image: string) => void;
+};
+
+/**
+ * Data per image returned from API
+ */
+type ImageElement = {
+  image: string;
+  count: number;
+};
+
+/**
+ * Input props for each thumbnail in the table
+ */
+type ThumbProps = {
+  selected: string | null;
+  element: ImageElement;
+  selectImage: React.Dispatch<React.SetStateAction<string | null>>;
+};
+
+/**
+ * Renders a single image thumbnail
+ */
+function PartThumbComponent({
+  selected,
+  element,
+  selectImage
+}: Readonly<ThumbProps>) {
+  const { hovered, ref } = useHover();
+
+  const hoverColor = 'rgba(127,127,127,0.2)';
+  const selectedColor = 'rgba(127,127,127,0.29)';
+
+  let color = '';
+
+  if (selected === element?.image) {
+    color = selectedColor;
+  } else if (hovered) {
+    color = hoverColor;
+  }
+
+  const src: string | undefined = element?.image
+    ? `/media/${element?.image}`
+    : undefined;
+
+  return (
+    <Paper
+      withBorder
+      style={{ backgroundColor: color }}
+      p='sm'
+      ref={ref}
+      onClick={() => selectImage(element.image)}
+    >
+      <Stack justify='space-between'>
+        <AspectRatio ratio={1}>
+          <Thumbnail size={120} src={src} align='center' />
+        </AspectRatio>
+        <Text size='xs'>
+          {element.image.split('/')[1]} ({element.count})
+        </Text>
+      </Stack>
+    </Paper>
+  );
+}
+
+/**
+ * Changes a part's image to the supplied URL and updates the DOM accordingly
+ */
+async function setNewImage(
+  image: string | null,
+  pk: string,
+  setImage: (image: string) => void
+) {
+  // No need to do anything if no image is selected
+  if (image === null) {
+    return;
+  }
+
+  const response = await api.patch(apiUrl(ApiEndpoints.part_list, pk), {
+    existing_image: image
+  });
+
+  // Update image component and close modal if update was successful
+  if (response.data.image.includes(image)) {
+    setImage(response.data.image);
+    modals.closeAll();
+  }
+}
+
+/**
+ * Renders a "table" of thumbnails
+ */
+export function PartThumbTable({ pk, setImage }: Readonly<ThumbTableProps>) {
+  const limit = 24;
+
+  const [thumbImage, setThumbImage] = useState<string | null>(null);
+  const [filterInput, setFilterInput] = useState<string>('');
+
+  const [page, setPage] = useState<number>(1);
+  const [totalPages, setTotalPages] = useState<number>(1);
+
+  // Keep search filters from updating while user is typing
+  const [searchText] = useDebouncedValue(filterInput, 500);
+
+  // Fetch thumbnails from API
+  const thumbQuery = useQuery({
+    queryKey: [ApiEndpoints.part_thumbs_list, page, searchText],
+    queryFn: async () => {
+      const offset = Math.max(0, page - 1) * limit;
+
+      return api
+        .get(apiUrl(ApiEndpoints.part_thumbs_list), {
+          params: {
+            offset: offset,
+            limit: limit,
+            search: searchText
+          }
+        })
+        .then((response) => {
+          const records = response?.data?.count ?? 1;
+          setTotalPages(Math.ceil(records / limit));
+          return response.data?.results ?? response.data;
+        })
+        .catch((error) => {
+          setTotalPages(1);
+          setPage(1);
+          return [];
+        });
+    }
+  });
+
+  return (
+    <>
+      <Suspense>
+        <Divider />
+        <Paper p='sm'>
+          <SimpleGrid
+            cols={{ base: 2, '450px': 3, '600px': 4, '900px': 6 }}
+            type='container'
+            spacing='xs'
+          >
+            {!thumbQuery.isFetching
+              ? thumbQuery?.data.map((data: ImageElement, index: number) => (
+                  <PartThumbComponent
+                    element={data}
+                    key={index}
+                    selected={thumbImage}
+                    selectImage={setThumbImage}
+                  />
+                ))
+              : [...Array(limit)].map((elem, idx) => (
+                  <Skeleton
+                    height={150}
+                    width={150}
+                    radius='sm'
+                    key={idx}
+                    style={{ padding: '5px' }}
+                  />
+                ))}
+          </SimpleGrid>
+        </Paper>
+      </Suspense>
+
+      <Divider />
+      <Paper p='sm'>
+        <Group justify='space-between' gap='xs'>
+          <Group justify='left' gap='xs'>
+            <TextInput
+              placeholder={t`Search...`}
+              value={filterInput}
+              onChange={(event) => {
+                setFilterInput(event.currentTarget.value);
+              }}
+              rightSection={
+                <IconX
+                  size='1rem'
+                  color='red'
+                  onClick={() => setFilterInput('')}
+                />
+              }
+            />
+            <Pagination
+              total={totalPages}
+              value={page}
+              onChange={(value) => setPage(value)}
+            />
+          </Group>
+          <Button
+            disabled={!thumbImage}
+            onClick={() => setNewImage(thumbImage, pk, setImage)}
+          >
+            <Trans>Select</Trans>
+          </Button>
+        </Group>
+      </Paper>
+    </>
+  );
+}

package/src/tables/part/PartVariantTable.tsx

@@ -0,0 +1,52 @@
+import { t } from '@lingui/core/macro';
+import { useMemo } from 'react';
+
+import type { TableFilter } from '@lib/types/Filters';
+import { PartListTable } from './PartTable';
+
+/**
+ * Display variant parts for the specified parent part
+ */
+export function PartVariantTable({ part }: Readonly<{ part: any }>) {
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'active',
+        label: t`Active`,
+        description: t`Show active variants`
+      },
+      {
+        name: 'template',
+        label: t`Template`,
+        description: t`Show template variants`
+      },
+      {
+        name: 'virtual',
+        label: t`Virtual`,
+        description: t`Show virtual variants`
+      },
+      {
+        name: 'trackable',
+        label: t`Trackable`,
+        description: t`Show trackable variants`
+      }
+    ];
+  }, []);
+
+  return (
+    <PartListTable
+      props={{
+        enableDownload: false,
+        tableFilters: tableFilters,
+        params: {
+          ancestor: part.pk
+        }
+      }}
+      defaultPartData={{
+        ...part,
+        variant_of: part.pk,
+        is_template: false
+      }}
+    />
+  );
+}