@inventreedb/ui 0.0.1

package/src/tables/settings/UserTable.tsx

@@ -0,0 +1,329 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  Alert,
+  List,
+  LoadingOverlay,
+  Spoiler,
+  Stack,
+  Text,
+  Title
+} from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { EditApiForm } from '../../components/forms/ApiForm';
+import {
+  DetailDrawer,
+  DetailDrawerLink
+} from '../../components/nav/DetailDrawer';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal
+} from '../../hooks/UseForm';
+import { useInstance } from '../../hooks/UseInstance';
+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';
+import type { GroupDetailI } from './GroupTable';
+
+export interface UserDetailI {
+  pk: number;
+  username: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  groups: GroupDetailI[];
+  is_active: boolean;
+  is_staff: boolean;
+  is_superuser: boolean;
+}
+
+export function UserDrawer({
+  id,
+  refreshTable
+}: Readonly<{
+  id: string;
+  refreshTable: () => void;
+}>) {
+  const {
+    instance: userDetail,
+    refreshInstance,
+    instanceQuery: { isFetching, error }
+  } = useInstance<UserDetailI>({
+    endpoint: ApiEndpoints.user_list,
+    pk: id,
+    throwError: true
+  });
+
+  const currentUserPk = useUserState((s) => s.user?.pk);
+  const isCurrentUser = useMemo(
+    () => currentUserPk === Number.parseInt(id, 10),
+    [currentUserPk, id]
+  );
+
+  if (isFetching) {
+    return <LoadingOverlay visible={true} />;
+  }
+
+  if (error) {
+    return (
+      <Text>
+        {(error as any)?.response?.status === 404 ? (
+          <Trans>User with id {id} not found</Trans>
+        ) : (
+          <Trans>An error occurred while fetching user details</Trans>
+        )}
+      </Text>
+    );
+  }
+
+  return (
+    <Stack>
+      <EditApiForm
+        props={{
+          url: ApiEndpoints.user_list,
+          pk: id,
+          fields: {
+            username: {},
+            first_name: {},
+            last_name: {},
+            email: {},
+            is_active: {
+              label: t`Is Active`,
+              description: t`Designates whether this user should be treated as active. Unselect this instead of deleting accounts.`,
+              disabled: isCurrentUser
+            },
+            is_staff: {
+              label: t`Is Staff`,
+              description: t`Designates whether the user can log into the django admin site.`,
+              disabled: isCurrentUser
+            },
+            is_superuser: {
+              label: t`Is Superuser`,
+              description: t`Designates that this user has all permissions without explicitly assigning them.`,
+              disabled: isCurrentUser
+            }
+          },
+          postFormContent: isCurrentUser ? (
+            <Alert
+              title={<Trans>Info</Trans>}
+              color='blue'
+              icon={<IconInfoCircle />}
+            >
+              <Trans>
+                You cannot edit the rights for the currently logged-in user.
+              </Trans>
+            </Alert>
+          ) : undefined,
+          onFormSuccess: () => {
+            refreshTable();
+            refreshInstance();
+          }
+        }}
+        id={`user-detail-drawer-${id}`}
+      />
+
+      <Stack>
+        <Title order={5}>
+          <Trans>Groups</Trans>
+        </Title>
+        <Spoiler maxHeight={125} showLabel='Show More' hideLabel='Show Less'>
+          <Text ml={'md'}>
+            {userDetail?.groups && userDetail?.groups?.length > 0 ? (
+              <List>
+                {userDetail?.groups?.map((group: any) => (
+                  <List.Item key={group.pk}>
+                    <DetailDrawerLink
+                      to={`../group-${group.pk}`}
+                      text={group.name}
+                    />
+                  </List.Item>
+                ))}
+              </List>
+            ) : (
+              <Trans>No groups</Trans>
+            )}
+          </Text>
+        </Spoiler>
+      </Stack>
+    </Stack>
+  );
+}
+
+/**
+ * Table for displaying list of users
+ */
+export function UserTable() {
+  const table = useTable('users');
+  const navigate = useNavigate();
+  const user = useUserState();
+
+  const openDetailDrawer = useCallback(
+    (pk: number) => {
+      if (user.hasChangePermission(ModelType.user)) {
+        navigate(`user-${pk}/`);
+      }
+    },
+    [user]
+  );
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'username',
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'first_name',
+        sortable: true
+      },
+      {
+        accessor: 'last_name',
+        sortable: true
+      },
+      {
+        accessor: 'email',
+        sortable: true
+      },
+      {
+        accessor: 'groups',
+        title: t`Groups`,
+        sortable: true,
+        switchable: true,
+        render: (record: any) => {
+          return record.groups.length;
+        }
+      },
+      BooleanColumn({
+        accessor: 'is_staff'
+      }),
+      BooleanColumn({
+        accessor: 'is_superuser'
+      }),
+      BooleanColumn({
+        accessor: 'is_active'
+      })
+    ];
+  }, []);
+
+  // Row Actions
+  const [selectedUser, setSelectedUser] = useState<number>(-1);
+
+  const rowActions = useCallback(
+    (record: UserDetailI): RowAction[] => {
+      return [
+        RowEditAction({
+          onClick: () => openDetailDrawer(record.pk),
+          hidden: !user.hasChangePermission(ModelType.user)
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeletePermission(ModelType.user),
+          onClick: () => {
+            setSelectedUser(record.pk);
+            deleteUser.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const deleteUser = useDeleteApiFormModal({
+    url: ApiEndpoints.user_list,
+    pk: selectedUser,
+    title: t`Delete user`,
+    successMessage: t`User deleted`,
+    table: table,
+    preFormWarning: t`Are you sure you want to delete this user?`
+  });
+
+  // Table Actions - Add New User
+  const newUser = useCreateApiFormModal({
+    url: ApiEndpoints.user_list,
+    title: t`Add User`,
+    fields: {
+      username: {},
+      email: {},
+      first_name: {},
+      last_name: {}
+    },
+    table: table,
+    successMessage: t`Added user`
+  });
+
+  const tableActions = useMemo(() => {
+    const actions = [];
+
+    actions.push(
+      <AddItemButton
+        key='add-user'
+        onClick={newUser.open}
+        tooltip={t`Add user`}
+        hidden={!user.hasAddPermission(ModelType.user)}
+      />
+    );
+
+    return actions;
+  }, [user]);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'is_active',
+        label: t`Active`,
+        description: t`Show active users`
+      },
+      {
+        name: 'is_staff',
+        label: t`Staff`,
+        description: t`Show staff users`
+      },
+      {
+        name: 'is_superuser',
+        label: t`Superuser`,
+        description: t`Show superusers`
+      }
+    ];
+  }, []);
+
+  return (
+    <>
+      {newUser.modal}
+      {deleteUser.modal}
+      <DetailDrawer
+        title={t`Edit user`}
+        renderContent={(id) => {
+          if (!id || !id.startsWith('user-')) return false;
+          return (
+            <UserDrawer
+              id={id.replace('user-', '')}
+              refreshTable={table.refreshTable}
+            />
+          );
+        }}
+      />
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.user_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          rowActions: rowActions,
+          tableActions: tableActions,
+          tableFilters: tableFilters,
+          onRowClick: (record) => openDetailDrawer(record.pk)
+        }}
+      />
+    </>
+  );
+}

package/src/tables/stock/InstalledItemsTable.tsx

@@ -0,0 +1,146 @@
+import { t } from '@lingui/core/macro';
+import { Skeleton } from '@mantine/core';
+import { IconUnlink } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+
+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 { AddItemButton } from '../../components/buttons/AddItemButton';
+import {
+  useStockItemInstallFields,
+  useStockItemUninstallFields
+} from '../../forms/StockForms';
+import { useCreateApiFormModal } from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { PartColumn, StatusColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+
+export default function InstalledItemsTable({
+  stockItem
+}: Readonly<{
+  stockItem: any;
+}>) {
+  const table = useTable('stock_item_install');
+  const user = useUserState();
+
+  const installItemFields = useStockItemInstallFields({
+    stockItem: stockItem
+  });
+
+  const installItem = useCreateApiFormModal({
+    url: apiUrl(ApiEndpoints.stock_install),
+    pk: stockItem.pk,
+    title: t`Install Item`,
+    table: table,
+    successMessage: t`Item installed`,
+    fields: installItemFields
+  });
+
+  const [selectedRecord, setSelectedRecord] = useState<any>({});
+
+  const uninstallItemFields = useStockItemUninstallFields();
+
+  const uninstallItem = useCreateApiFormModal({
+    url: apiUrl(ApiEndpoints.stock_uninstall),
+    pk: selectedRecord.pk,
+    title: t`Uninstall Item`,
+    table: table,
+    successMessage: t`Item uninstalled`,
+    fields: uninstallItemFields,
+    initialData: {
+      location: stockItem.location ?? stockItem.part_detail?.default_location
+    }
+  });
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'part',
+        switchable: false,
+        render: (record: any) => PartColumn({ part: record?.part_detail })
+      },
+      {
+        accessor: 'quantity',
+        switchable: false,
+        render: (record: any) => {
+          let text = record.quantity;
+
+          if (record.serial && record.quantity == 1) {
+            text = `# ${record.serial}`;
+          }
+
+          return text;
+        }
+      },
+      {
+        accessor: 'batch',
+        switchable: false
+      },
+      StatusColumn({ model: ModelType.stockitem })
+    ];
+  }, []);
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='install'
+        tooltip={t`Install Item`}
+        onClick={() => {
+          installItem.open();
+        }}
+        hidden={
+          !user.hasChangeRole(UserRoles.stock) ||
+          stockItem.is_building ||
+          stockItem.part_detail?.assembly != true
+        }
+      />
+    ];
+  }, [stockItem, user]);
+
+  const rowActions = useCallback(
+    (record: any) => {
+      return [
+        {
+          title: t`Uninstall`,
+          tooltip: t`Uninstall stock item`,
+          onClick: () => {
+            setSelectedRecord(record);
+            uninstallItem.open();
+          },
+          icon: <IconUnlink />,
+          hidden: !user.hasChangeRole(UserRoles.stock)
+        }
+      ];
+    },
+    [user]
+  );
+
+  return (
+    <>
+      {installItem.modal}
+      {uninstallItem.modal}
+      {stockItem.pk ? (
+        <InvenTreeTable
+          url={apiUrl(ApiEndpoints.stock_item_list)}
+          tableState={table}
+          columns={tableColumns}
+          props={{
+            tableActions: tableActions,
+            rowActions: rowActions,
+            modelType: ModelType.stockitem,
+            params: {
+              belongs_to: stockItem.pk,
+              part_detail: true
+            }
+          }}
+        />
+      ) : (
+        <Skeleton />
+      )}
+    </>
+  );
+}

package/src/tables/stock/LocationTypesTable.tsx

@@ -0,0 +1,132 @@
+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 type { ApiFormFieldSet } from '@lib/types/Forms';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { ApiIcon } from '../../components/items/ApiIcon';
+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';
+
+export default function LocationTypesTable() {
+  const table = useTable('location-types');
+  const user = useUserState();
+
+  const formFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      name: {},
+      description: {},
+      icon: {
+        field_type: 'icon'
+      }
+    };
+  }, []);
+
+  const [selectedLocationType, setSelectedLocationType] = useState<number>(0);
+
+  const newLocationType = useCreateApiFormModal({
+    url: ApiEndpoints.stock_location_type_list,
+    title: t`Add Location Type`,
+    fields: useMemo(() => ({ ...formFields }), [formFields]),
+    onFormSuccess: table.refreshTable
+  });
+
+  const editLocationType = useEditApiFormModal({
+    url: ApiEndpoints.stock_location_type_list,
+    pk: selectedLocationType,
+    title: t`Edit Location Type`,
+    fields: useMemo(() => ({ ...formFields }), [formFields]),
+    onFormSuccess: (record: any) => table.updateRecord(record)
+  });
+
+  const deleteLocationType = useDeleteApiFormModal({
+    url: ApiEndpoints.stock_location_type_list,
+    pk: selectedLocationType,
+    title: t`Delete Location Type`,
+    onFormSuccess: table.refreshTable
+  });
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'icon',
+        title: t`Icon`,
+        sortable: true,
+        render: (value: any) => <ApiIcon name={value.icon} />
+      },
+      {
+        accessor: 'name',
+        title: t`Name`,
+        sortable: true
+      },
+      {
+        accessor: 'description',
+        title: t`Description`
+      },
+      {
+        accessor: 'location_count',
+        sortable: true
+      }
+    ];
+  }, []);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.stock_location),
+          onClick: () => {
+            setSelectedLocationType(record.pk);
+            editLocationType.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.stock_location),
+          onClick: () => {
+            setSelectedLocationType(record.pk);
+            deleteLocationType.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-location-type'
+        tooltip={t`Add Location Type`}
+        onClick={() => newLocationType.open()}
+        hidden={!user.hasAddRole(UserRoles.stock_location)}
+      />
+    ];
+  }, [user]);
+
+  return (
+    <>
+      {newLocationType.modal}
+      {editLocationType.modal}
+      {deleteLocationType.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.stock_location_type_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          rowActions: rowActions,
+          tableActions: tableActions
+        }}
+      />
+    </>
+  );
+}