@inventreedb/ui 0.0.1 → 0.0.3

package/src/tables/part/PartTestTemplateTable.tsx

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

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

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