@inventreedb/ui 0.0.1 → 0.0.2

package/src/pages/core/UserDetail.tsx

@@ -1,193 +0,0 @@
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import { ModelType } from '@lib/enums/ModelType';
-import { t } from '@lingui/core/macro';
-import { Badge, Grid, Skeleton, Stack } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
-import { type ReactNode, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-import {
-  type DetailsField,
-  DetailsTable
-} from '../../components/details/Details';
-import { ItemDetailsGrid } from '../../components/details/ItemDetails';
-import {} from '../../components/items/ActionDropdown';
-import InstanceDetail from '../../components/nav/InstanceDetail';
-import { PageDetail } from '../../components/nav/PageDetail';
-import type { PanelType } from '../../components/panels/Panel';
-import { PanelGroup } from '../../components/panels/PanelGroup';
-import {} from '../../hooks/UseForm';
-import { useInstance } from '../../hooks/UseInstance';
-import { useGlobalSettingsState } from '../../states/SettingsState';
-import { useUserState } from '../../states/UserState';
-
-/**
- * Detail page for a single user
- */
-export default function UserDetail() {
-  const { id } = useParams();
-
-  const user = useUserState();
-  const settings = useGlobalSettingsState();
-
-  const { instance, instanceQuery, requestStatus } = useInstance({
-    endpoint: ApiEndpoints.user_list,
-    pk: id
-  });
-
-  const detailsPanel = useMemo(() => {
-    if (instanceQuery.isFetching) {
-      return <Skeleton />;
-    }
-
-    const tl: DetailsField[] = [
-      {
-        type: 'text',
-        name: 'email',
-        label: t`Email`,
-        copy: true
-      },
-      {
-        type: 'text',
-        name: 'username',
-        label: t`Username`,
-        icon: 'info',
-        copy: true
-      },
-      {
-        type: 'text',
-        name: 'first_name',
-        label: t`First Name`,
-        icon: 'info',
-        copy: true
-      },
-      {
-        type: 'text',
-        name: 'last_name',
-        label: t`Last Name`,
-        icon: 'info',
-        copy: true
-      }
-    ];
-
-    const tr: DetailsField[] = [
-      {
-        type: 'text',
-        name: 'displayname',
-        label: t`Display Name`,
-        icon: 'user',
-        copy: true
-      },
-      {
-        type: 'text',
-        name: 'position',
-        label: t`Position`,
-        icon: 'info'
-      },
-      {
-        type: 'boolean',
-        name: 'active',
-        label: t`Active`,
-        icon: 'info'
-      },
-      {
-        type: 'text',
-        name: 'contact',
-        label: t`Contact`,
-        icon: 'email',
-        copy: true
-      },
-      {
-        type: 'text',
-        name: 'organisation',
-        label: t`Organisation`,
-        icon: 'info',
-        copy: true
-      },
-      {
-        type: 'text',
-        name: 'status',
-        label: t`Status`,
-        icon: 'note'
-      },
-      {
-        type: 'text',
-        name: 'location',
-        label: t`Location`,
-        icon: 'location',
-        copy: true
-      }
-    ];
-
-    return (
-      <ItemDetailsGrid>
-        <Grid grow>
-          <Grid.Col span={{ base: 12, sm: 8 }}>
-            <DetailsTable fields={tl} item={instance} />
-          </Grid.Col>
-        </Grid>
-        {settings.isSet('DISPLAY_PROFILE_INFO') && (
-          <DetailsTable fields={tr} item={instance} />
-        )}
-      </ItemDetailsGrid>
-    );
-  }, [instance, instanceQuery]);
-
-  const userPanels: PanelType[] = useMemo(() => {
-    return [
-      {
-        name: 'detail',
-        label: t`User Details`,
-        icon: <IconInfoCircle />,
-        content: detailsPanel
-      }
-    ];
-  }, [instance, id, user]);
-
-  const userBadges: ReactNode[] = useMemo(() => {
-    return instanceQuery.isLoading
-      ? []
-      : [
-          instance.is_staff && (
-            <Badge key='is_staff' color='blue'>{t`Staff`}</Badge>
-          ),
-          instance.is_superuser && (
-            <Badge key='is_superuser' color='red'>{t`Superuser`}</Badge>
-          ),
-          !instance.is_staff && !instance.is_superuser && (
-            <Badge key='is_normal' color='yellow'>{t`Basic user`}</Badge>
-          ),
-          instance.is_active ? (
-            <Badge key='is_active' color='green'>{t`Active`}</Badge>
-          ) : (
-            <Badge key='is_inactive' color='red'>{t`Inactive`}</Badge>
-          )
-        ];
-  }, [instance, instanceQuery]);
-
-  return (
-    <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
-      <Stack gap='xs'>
-        <PageDetail
-          title={`${t`User`}: ${instance.username}`}
-          imageUrl={instance?.image}
-          badges={userBadges}
-          breadcrumbs={[
-            { name: t`System Overview`, url: '/core/' },
-
-            { name: t`Users`, url: '/core/index/users/' }
-          ]}
-          lastCrumb={[
-            { name: instance.username, url: `/core/user/${instance.pk}/` }
-          ]}
-        />
-        <PanelGroup
-          pageKey='user'
-          panels={userPanels}
-          model={ModelType.user}
-          id={instance.pk}
-          instance={instance}
-        />
-      </Stack>
-    </InstanceDetail>
-  );
-}

package/src/pages/part/CategoryDetail.tsx

@@ -1,369 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Group, LoadingOverlay, Skeleton, Stack, Text } from '@mantine/core';
-import {
-  IconCategory,
-  IconInfoCircle,
-  IconListDetails,
-  IconPackages,
-  IconSitemap
-} from '@tabler/icons-react';
-import { useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import { ModelType } from '@lib/enums/ModelType';
-import { UserRoles } from '@lib/enums/Roles';
-import AdminButton from '../../components/buttons/AdminButton';
-import StarredToggleButton from '../../components/buttons/StarredToggleButton';
-import {
-  type DetailsField,
-  DetailsTable
-} from '../../components/details/Details';
-import { ItemDetailsGrid } from '../../components/details/ItemDetails';
-import {
-  DeleteItemAction,
-  EditItemAction,
-  OptionsActionDropdown
-} from '../../components/items/ActionDropdown';
-import { ApiIcon } from '../../components/items/ApiIcon';
-import InstanceDetail from '../../components/nav/InstanceDetail';
-import NavigationTree from '../../components/nav/NavigationTree';
-import { PageDetail } from '../../components/nav/PageDetail';
-import type { PanelType } from '../../components/panels/Panel';
-import { PanelGroup } from '../../components/panels/PanelGroup';
-import { partCategoryFields } from '../../forms/PartForms';
-import { getDetailUrl } from '../../functions/urls';
-import {
-  useDeleteApiFormModal,
-  useEditApiFormModal
-} from '../../hooks/UseForm';
-import { useInstance } from '../../hooks/UseInstance';
-import { useUserState } from '../../states/UserState';
-import ParametricPartTable from '../../tables/part/ParametricPartTable';
-import { PartCategoryTable } from '../../tables/part/PartCategoryTable';
-import { PartListTable } from '../../tables/part/PartTable';
-import { StockItemTable } from '../../tables/stock/StockItemTable';
-
-/**
- * Detail view for a single PartCategory instance.
- *
- * Note: If no category ID is supplied, this acts as the top-level part category page
- */
-export default function CategoryDetail() {
-  const { id: _id } = useParams();
-  const id = useMemo(
-    () => (!Number.isNaN(Number.parseInt(_id || '')) ? _id : undefined),
-    [_id]
-  );
-
-  const navigate = useNavigate();
-  const user = useUserState();
-
-  const [treeOpen, setTreeOpen] = useState(false);
-
-  const {
-    instance: category,
-    refreshInstance,
-    instanceQuery,
-    requestStatus
-  } = useInstance({
-    endpoint: ApiEndpoints.category_list,
-    hasPrimaryKey: true,
-    pk: id,
-    params: {
-      path_detail: true
-    }
-  });
-
-  const detailsPanel = useMemo(() => {
-    if (id && instanceQuery.isFetching) {
-      return <Skeleton />;
-    }
-
-    const left: DetailsField[] = [
-      {
-        type: 'text',
-        name: 'name',
-        label: t`Name`,
-        copy: true,
-        value_formatter: () => (
-          <Group gap='xs'>
-            {category.icon && <ApiIcon name={category.icon} />}
-            {category.name}
-          </Group>
-        )
-      },
-      {
-        type: 'text',
-        name: 'pathstring',
-        label: t`Path`,
-        icon: 'sitemap',
-        copy: true,
-        hidden: !id
-      },
-      {
-        type: 'text',
-        name: 'description',
-        label: t`Description`,
-        copy: true
-      },
-      {
-        type: 'link',
-        name: 'parent',
-        model_field: 'name',
-        icon: 'location',
-        label: t`Parent Category`,
-        model: ModelType.partcategory,
-        hidden: !category?.parent
-      },
-      {
-        type: 'boolean',
-        name: 'starred',
-        icon: 'notification',
-        label: t`Subscribed`
-      }
-    ];
-
-    const right: DetailsField[] = [
-      {
-        type: 'text',
-        name: 'part_count',
-        label: t`Parts`,
-        icon: 'part',
-        value_formatter: () => category?.part_count || '0'
-      },
-      {
-        type: 'text',
-        name: 'subcategories',
-        label: t`Subcategories`,
-        icon: 'sitemap',
-        hidden: !category?.subcategories
-      },
-      {
-        type: 'boolean',
-        name: 'structural',
-        label: t`Structural`,
-        icon: 'sitemap'
-      },
-      {
-        type: 'link',
-        name: 'parent_default_location',
-        label: t`Parent default location`,
-        model: ModelType.stocklocation,
-        hidden: !category.parent_default_location || category.default_location
-      },
-      {
-        type: 'link',
-        name: 'default_location',
-        label: t`Default location`,
-        model: ModelType.stocklocation,
-        hidden: !category.default_location
-      }
-    ];
-
-    return (
-      <ItemDetailsGrid>
-        {id && category?.pk ? (
-          <DetailsTable item={category} fields={left} />
-        ) : (
-          <Text>{t`Top level part category`}</Text>
-        )}
-        {id && category?.pk && <DetailsTable item={category} fields={right} />}
-      </ItemDetailsGrid>
-    );
-  }, [category, instanceQuery]);
-
-  const editCategory = useEditApiFormModal({
-    url: ApiEndpoints.category_list,
-    pk: id,
-    title: t`Edit Part Category`,
-    fields: partCategoryFields({}),
-    onFormSuccess: refreshInstance
-  });
-
-  const deleteOptions = useMemo(() => {
-    return [
-      {
-        value: 0,
-        display_name: t`Move items to parent category`
-      },
-      {
-        value: 1,
-        display_name: t`Delete items`
-      }
-    ];
-  }, []);
-
-  const deleteCategory = useDeleteApiFormModal({
-    url: ApiEndpoints.category_list,
-    pk: id,
-    title: t`Delete Part Category`,
-    fields: {
-      delete_parts: {
-        label: t`Parts Action`,
-        description: t`Action for parts in this category`,
-        choices: deleteOptions,
-        field_type: 'choice'
-      },
-      delete_child_categories: {
-        label: t`Child Categories Action`,
-        description: t`Action for child categories in this category`,
-        choices: deleteOptions,
-        field_type: 'choice'
-      }
-    },
-    onFormSuccess: () => {
-      if (category.parent) {
-        navigate(getDetailUrl(ModelType.partcategory, category.parent));
-      } else {
-        navigate('/part/');
-      }
-    }
-  });
-
-  const categoryActions = useMemo(() => {
-    return [
-      <AdminButton
-        key='admin'
-        model={ModelType.partcategory}
-        id={category.pk}
-      />,
-      <StarredToggleButton
-        key='starred_change'
-        instance={category}
-        model={ModelType.partcategory}
-        successFunction={() => {
-          refreshInstance();
-        }}
-      />,
-      <OptionsActionDropdown
-        key='category-actions'
-        tooltip={t`Category Actions`}
-        actions={[
-          EditItemAction({
-            hidden: !id || !user.hasChangeRole(UserRoles.part_category),
-            tooltip: t`Edit Part Category`,
-            onClick: () => editCategory.open()
-          }),
-          DeleteItemAction({
-            hidden: !id || !user.hasDeleteRole(UserRoles.part_category),
-            tooltip: t`Delete Part Category`,
-            onClick: () => deleteCategory.open()
-          })
-        ]}
-      />
-    ];
-  }, [id, user, category.pk, category.starred]);
-
-  const panels: PanelType[] = useMemo(
-    () => [
-      {
-        name: 'details',
-        label: t`Category Details`,
-        icon: <IconInfoCircle />,
-        content: detailsPanel
-      },
-      {
-        name: 'subcategories',
-        label: t`Subcategories`,
-        icon: <IconSitemap />,
-        content: <PartCategoryTable parentId={id} />
-      },
-      {
-        name: 'parts',
-        label: t`Parts`,
-        icon: <IconCategory />,
-        content: (
-          <PartListTable
-            props={{
-              params: {
-                category: id
-              }
-            }}
-          />
-        )
-      },
-      {
-        name: 'stockitem',
-        label: t`Stock Items`,
-        icon: <IconPackages />,
-        hidden: !id,
-        content: (
-          <StockItemTable
-            params={{
-              category: id
-            }}
-            allowAdd={false}
-            tableName='category-stockitems'
-          />
-        )
-      },
-      {
-        name: 'parameters',
-        label: t`Part Parameters`,
-        icon: <IconListDetails />,
-        content: <ParametricPartTable categoryId={id} />
-      }
-    ],
-    [category, id]
-  );
-
-  const breadcrumbs = useMemo(
-    () => [
-      { name: t`Parts`, url: '/part' },
-      ...(category.path ?? []).map((c: any) => ({
-        name: c.name,
-        url: getDetailUrl(ModelType.partcategory, c.pk),
-        icon: c.icon ? <ApiIcon name={c.icon} /> : undefined
-      }))
-    ],
-    [category]
-  );
-
-  return (
-    <>
-      {editCategory.modal}
-      {deleteCategory.modal}
-      <InstanceDetail
-        status={requestStatus}
-        loading={id ? instanceQuery.isFetching : false}
-        requiredRole={UserRoles.part_category}
-      >
-        <Stack gap='xs'>
-          <LoadingOverlay visible={instanceQuery.isFetching} />
-          <NavigationTree
-            modelType={ModelType.partcategory}
-            title={t`Part Categories`}
-            endpoint={ApiEndpoints.category_tree}
-            opened={treeOpen}
-            onClose={() => {
-              setTreeOpen(false);
-            }}
-            selectedId={category?.pk}
-          />
-          <PageDetail
-            title={t`Part Category`}
-            subtitle={category?.name}
-            icon={category?.icon && <ApiIcon name={category?.icon} />}
-            breadcrumbs={breadcrumbs}
-            breadcrumbAction={() => {
-              setTreeOpen(true);
-            }}
-            actions={categoryActions}
-            editAction={editCategory.open}
-            editEnabled={
-              !!category?.pk && user.hasChangePermission(ModelType.partcategory)
-            }
-          />
-          <PanelGroup
-            pageKey='partcategory'
-            panels={panels}
-            model={ModelType.partcategory}
-            instance={category}
-            id={category.pk ?? null}
-          />
-        </Stack>
-      </InstanceDetail>
-    </>
-  );
-}

package/src/pages/part/PartAllocationPanel.tsx

@@ -1,40 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Accordion } from '@mantine/core';
-
-import { UserRoles } from '@lib/enums/Roles';
-import { StylishText } from '../../components/items/StylishText';
-import { useUserState } from '../../states/UserState';
-import PartBuildAllocationsTable from '../../tables/part/PartBuildAllocationsTable';
-import PartSalesAllocationsTable from '../../tables/part/PartSalesAllocationsTable';
-
-export default function PartAllocationPanel({ part }: Readonly<{ part: any }>) {
-  const user = useUserState();
-
-  return (
-    <Accordion
-      multiple={true}
-      defaultValue={['buildallocations', 'salesallocations']}
-    >
-      {part.component && user.hasViewRole(UserRoles.build) && (
-        <Accordion.Item value='buildallocations' key='buildallocations'>
-          <Accordion.Control>
-            <StylishText size='lg'>{t`Build Order Allocations`}</StylishText>
-          </Accordion.Control>
-          <Accordion.Panel>
-            <PartBuildAllocationsTable partId={part.pk} />
-          </Accordion.Panel>
-        </Accordion.Item>
-      )}
-      {part.salable && user.hasViewRole(UserRoles.sales_order) && (
-        <Accordion.Item value='salesallocations' key='salesallocations'>
-          <Accordion.Control>
-            <StylishText size='lg'>{t`Sales Order Allocations`}</StylishText>
-          </Accordion.Control>
-          <Accordion.Panel>
-            <PartSalesAllocationsTable partId={part.pk} />
-          </Accordion.Panel>
-        </Accordion.Item>
-      )}
-    </Accordion>
-  );
-}