@inventreedb/ui 0.0.1 → 0.0.3

package/src/pages/Index/Scan.tsx

@@ -1,258 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import {
-  ActionIcon,
-  Alert,
-  Divider,
-  Grid,
-  Group,
-  Paper,
-  Space,
-  Stack,
-  Text
-} from '@mantine/core';
-import { randomId, useListState, useLocalStorage } from '@mantine/hooks';
-import {
-  IconAlertCircle,
-  IconNumber,
-  IconQuestionMark
-} from '@tabler/icons-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import type { ModelType } from '@lib/enums/ModelType';
-import { apiUrl } from '@lib/functions/Api';
-import { hideNotification, showNotification } from '@mantine/notifications';
-import dayjs from 'dayjs';
-import { api } from '../../App';
-import { BarcodeInput } from '../../components/barcodes/BarcodeInput';
-import type { BarcodeScanItem } from '../../components/barcodes/BarcodeScanItem';
-import { StylishText } from '../../components/items/StylishText';
-import PageTitle from '../../components/nav/PageTitle';
-import { ModelInformationDict } from '../../components/render/ModelType';
-import {
-  notYetImplemented,
-  showApiErrorMessage
-} from '../../functions/notifications';
-import BarcodeScanTable from '../../tables/general/BarcodeScanTable';
-
-export default function Scan() {
-  const [history, historyHandlers] = useListState<BarcodeScanItem>([]);
-
-  const [historyStorage, setHistoryStorage] = useLocalStorage<
-    BarcodeScanItem[]
-  >({
-    key: 'scan-history',
-    defaultValue: []
-  });
-
-  const [selection, setSelection] = useState<string[]>([]);
-
-  // Fetch model instance based on scan item
-  const fetchInstance = useCallback(
-    (item: BarcodeScanItem) => {
-      if (!item.model || !item.pk) {
-        return;
-      }
-
-      // Prevent duplicates
-      if (history.find((i) => i.model == item.model && i.pk == item.pk)) {
-        hideNotification('duplicate-barcode');
-
-        showNotification({
-          id: 'duplicate-barcode',
-          title: t`Duplicate`,
-          message: t`Item already scanned`,
-          color: 'orange'
-        });
-        return;
-      }
-
-      const model_info = ModelInformationDict[item.model];
-
-      api
-        .get(apiUrl(model_info.api_endpoint, item.pk))
-        .then((response) => {
-          item.instance = response.data;
-          historyHandlers.append(item);
-        })
-        .catch((error) => {
-          showApiErrorMessage({
-            error: error,
-            title: t`API Error`,
-            message: t`Failed to fetch instance data`
-          });
-        });
-    },
-    [api, history]
-  );
-
-  // Barcode scanning callback function
-  const scanBarcode = useCallback(
-    (barcode: string) => {
-      api
-        .post(apiUrl(ApiEndpoints.barcode), { barcode: barcode })
-        .then((response) => {
-          const data = response?.data ?? {};
-
-          let match = false;
-
-          for (const model_type of Object.keys(ModelInformationDict)) {
-            if (data[model_type]?.pk) {
-              match = true;
-              fetchInstance({
-                id: randomId(),
-                barcode: barcode,
-                data: data,
-                timestamp: dayjs().toDate(),
-                source: 'scan',
-                model: model_type as ModelType,
-                pk: data[model_type]?.pk
-              });
-            }
-          }
-
-          // If no match is found, add an empty result
-          if (!match) {
-            historyHandlers.append({
-              id: randomId(),
-              barcode: barcode,
-              data: data,
-              timestamp: dayjs().toDate(),
-              source: 'scan'
-            });
-          }
-        })
-        .catch((error) => {
-          showApiErrorMessage({
-            error: error,
-            message: t`Failed to scan barcode`,
-            title: t`Scan Error`,
-            field: 'error'
-          });
-        });
-    },
-    [fetchInstance]
-  );
-
-  // save history data to session storage
-  useEffect(() => {
-    if (history.length === 0) return;
-    setHistoryStorage(history);
-  }, [history]);
-
-  // load data from session storage on mount
-  useEffect(() => {
-    historyHandlers.setState(historyStorage);
-  }, [historyStorage]);
-
-  // Items selected for action
-  const selectedItems: BarcodeScanItem[] = useMemo(() => {
-    return history.filter((item) => selection.includes(item.id));
-  }, [selection, history]);
-
-  // selected actions component
-  const SelectedActions = useMemo(() => {
-    const uniqueObjectTypes = new Set(selectedItems.map((item) => item.model));
-
-    if (uniqueObjectTypes.size === 0) {
-      return (
-        <Group gap={0}>
-          <IconQuestionMark color='orange' />
-          <Trans>Selected elements are not known</Trans>
-        </Group>
-      );
-    } else if (uniqueObjectTypes.size > 1) {
-      return (
-        <Group gap={0}>
-          <IconAlertCircle color='orange' />
-          <Trans>Multiple object types selected</Trans>
-        </Group>
-      );
-    }
-
-    return (
-      <>
-        <Text fz='sm' c='dimmed'>
-          <Trans>Actions ... </Trans>
-        </Text>
-        <Group>
-          <ActionIcon
-            onClick={notYetImplemented}
-            title={t`Count`}
-            variant='default'
-          >
-            <IconNumber />
-          </ActionIcon>
-        </Group>
-      </>
-    );
-  }, [selectedItems]);
-
-  return (
-    <>
-      <PageTitle title={t`Barcode Scanning`} />
-      <Group justify='space-between'>
-        <Group justify='left'>
-          <StylishText size='xl'>
-            <Trans>Barcode Scanning</Trans>
-          </StylishText>
-        </Group>
-      </Group>
-      <Space h={'md'} />
-      <Grid maw={'100%'}>
-        <Grid.Col span={4}>
-          <Paper p='sm' shadow='xs'>
-            <Stack gap='xs'>
-              <StylishText size='lg'>{t`Barcode Input`}</StylishText>
-              <Divider />
-              <BarcodeInput onScan={scanBarcode} />
-            </Stack>
-          </Paper>
-          <Paper p='sm' shadow='xs'>
-            <Stack gap='xs'>
-              <StylishText size='lg'>{t`Action`}</StylishText>
-              <Divider />
-              {selection.length === 0 ? (
-                <Alert title={t`No Items Selected`} color='blue'>
-                  <Trans>Scan and select items to perform actions</Trans>
-                </Alert>
-              ) : (
-                <>
-                  <Text>
-                    <Trans>{selection.length} items selected</Trans>
-                  </Text>
-                  {SelectedActions}
-                </>
-              )}
-            </Stack>
-          </Paper>
-        </Grid.Col>
-        <Grid.Col span={8}>
-          <Paper p='sm' shadow='xs'>
-            <Stack gap='xs'>
-              <Group justify='space-between'>
-                <StylishText size='lg'>{t`Scanned Items`}</StylishText>
-              </Group>
-              <Divider />
-              <BarcodeScanTable
-                records={history}
-                onItemsSelected={(ids: string[]) => {
-                  setSelection(ids);
-                }}
-                onItemsDeleted={(ids: string[]) => {
-                  const newHistory = history.filter(
-                    (item) => !ids.includes(item.id)
-                  );
-
-                  historyHandlers.setState(newHistory);
-                  setHistoryStorage(newHistory);
-                }}
-              />
-            </Stack>
-          </Paper>
-        </Grid.Col>
-      </Grid>
-    </>
-  );
-}

package/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx

@@ -1,162 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Badge, Group, Stack, Table } from '@mantine/core';
-import { IconEdit, IconKey, IconUser } from '@tabler/icons-react';
-import { useMemo } from 'react';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import type { ApiFormFieldSet } from '@lib/types/Forms';
-import { useNavigate } from 'react-router-dom';
-import { ActionButton } from '../../../../components/buttons/ActionButton';
-import { YesNoUndefinedButton } from '../../../../components/buttons/YesNoButton';
-import { ActionDropdown } from '../../../../components/items/ActionDropdown';
-import { StylishText } from '../../../../components/items/StylishText';
-import { useEditApiFormModal } from '../../../../hooks/UseForm';
-import { useUserState } from '../../../../states/UserState';
-
-export function AccountDetailPanel() {
-  const navigate = useNavigate();
-
-  const [user, fetchUserState] = useUserState((state) => [
-    state.user,
-    state.fetchUserState
-  ]);
-
-  const userFields: ApiFormFieldSet = useMemo(() => {
-    return {
-      first_name: {},
-      last_name: {}
-    };
-  }, []);
-
-  const editAccount = useEditApiFormModal({
-    title: t`Edit Account Information`,
-    url: ApiEndpoints.user_me,
-    onFormSuccess: fetchUserState,
-    fields: userFields,
-    successMessage: t`Account details updated`
-  });
-
-  const profileFields: ApiFormFieldSet = useMemo(() => {
-    return {
-      displayname: {},
-      position: {},
-      status: {},
-      location: {},
-      active: {},
-      contact: {},
-      type: {},
-      organisation: {},
-      primary_group: {}
-    };
-  }, []);
-
-  const editProfile = useEditApiFormModal({
-    title: t`Edit Profile Information`,
-    url: ApiEndpoints.user_profile,
-    onFormSuccess: fetchUserState,
-    fields: profileFields,
-    successMessage: t`Profile details updated`
-  });
-
-  const accountDetailFields = useMemo(
-    () => [
-      { label: t`Username`, value: user?.username },
-      { label: t`First Name`, value: user?.first_name },
-      { label: t`Last Name`, value: user?.last_name },
-      {
-        label: t`Staff Access`,
-        value: <YesNoUndefinedButton value={user?.is_staff} />
-      },
-      {
-        label: t`Superuser`,
-        value: <YesNoUndefinedButton value={user?.is_superuser} />
-      }
-    ],
-    [user]
-  );
-
-  const profileDetailFields = useMemo(
-    () => [
-      { label: t`Display Name`, value: user?.profile?.displayname },
-      { label: t`Position`, value: user?.profile?.position },
-      { label: t`Status`, value: user?.profile?.status },
-      { label: t`Location`, value: user?.profile?.location },
-      {
-        label: t`Active`,
-        value: <YesNoUndefinedButton value={user?.profile?.active} />
-      },
-      { label: t`Contact`, value: user?.profile?.contact },
-      { label: t`Type`, value: <Badge>{user?.profile?.type}</Badge> },
-      { label: t`Organisation`, value: user?.profile?.organisation },
-      { label: t`Primary Group`, value: user?.profile?.primary_group }
-    ],
-    [user]
-  );
-
-  return (
-    <>
-      {editAccount.modal}
-      {editProfile.modal}
-      <Stack gap='xs'>
-        <Group justify='space-between'>
-          <StylishText size='lg'>
-            <Trans>Account Details</Trans>
-          </StylishText>
-          <ActionDropdown
-            tooltip={t`Account Actions`}
-            icon={<IconUser />}
-            actions={[
-              {
-                name: t`Edit Account`,
-                icon: <IconEdit />,
-                tooltip: t`Edit Account Information`,
-                onClick: editAccount.open
-              },
-              {
-                name: t`Change Password`,
-                icon: <IconKey />,
-                tooltip: t`Change User Password`,
-                onClick: () => {
-                  navigate('/change-password');
-                }
-              }
-            ]}
-          />
-        </Group>
-        {renderDetailTable(accountDetailFields)}
-
-        <Group justify='space-between'>
-          <StylishText size='lg'>
-            <Trans>Profile Details</Trans>
-          </StylishText>
-          <ActionButton
-            text={t`Edit Profile`}
-            icon={<IconEdit />}
-            tooltip={t`Edit Profile Information`}
-            onClick={editProfile.open}
-            variant='light'
-          />
-        </Group>
-        {renderDetailTable(profileDetailFields)}
-      </Stack>
-    </>
-  );
-
-  function renderDetailTable(data: { label: string; value: any }[]) {
-    return (
-      <Table>
-        <Table.Tbody>
-          {data.map((item) => (
-            <Table.Tr key={item.label}>
-              <Table.Td>
-                <Trans>{item.label}</Trans>
-              </Table.Td>
-              <Table.Td>{item.value}</Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    );
-  }
-}

package/src/pages/Index/Settings/AccountSettings/QrRegistrationForm.tsx

@@ -1,38 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Divider, Text, TextInput } from '@mantine/core';
-import { QRCode } from '../../../../components/barcodes/QRCode';
-
-export function QrRegistrationForm({
-  url,
-  secret,
-  value,
-  error,
-  setValue
-}: Readonly<{
-  url: string;
-  secret: string;
-  value: string;
-  error?: string;
-  setValue: (value: string) => void;
-}>) {
-  return (
-    <>
-      <Divider />
-      <QRCode data={url} />
-      <Text>
-        <Trans>Secret</Trans>
-        <br />
-        {secret}
-      </Text>
-      <TextInput
-        required
-        label={t`One-Time Password`}
-        description={t`Enter the TOTP code to ensure it registered correctly`}
-        value={value}
-        onChange={(event) => setValue(event.currentTarget.value)}
-        error={error}
-      />
-    </>
-  );
-}