@inventreedb/ui 0.0.1

package/src/components/importer/ImporterColumnSelector.tsx

@@ -0,0 +1,244 @@
+import { t } from '@lingui/core/macro';
+import {
+  Alert,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Space,
+  Stack,
+  Table,
+  Text
+} from '@mantine/core';
+import { IconCheck } from '@tabler/icons-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import type { ApiFormFieldType } from '@lib/types/Forms';
+import { useApi } from '../../contexts/ApiContext';
+import type { ImportSessionState } from '../../hooks/UseImportSession';
+import { StandaloneField } from '../forms/StandaloneField';
+
+function ImporterColumn({
+  column,
+  options
+}: Readonly<{ column: any; options: any[] }>) {
+  const api = useApi();
+
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  const [selectedColumn, setSelectedColumn] = useState<string>(
+    column.column ?? ''
+  );
+
+  useEffect(() => {
+    setSelectedColumn(column.column ?? '');
+  }, [column.column]);
+
+  const onChange = useCallback(
+    (value: any) => {
+      api
+        .patch(
+          apiUrl(ApiEndpoints.import_session_column_mapping_list, column.pk),
+          {
+            column: value || ''
+          }
+        )
+        .then((response) => {
+          setSelectedColumn(response.data?.column ?? value);
+          setErrorMessage('');
+        })
+        .catch((error) => {
+          const data = error.response.data;
+          setErrorMessage(
+            data.column ?? data.non_field_errors ?? t`An error occurred`
+          );
+        });
+    },
+    [column]
+  );
+
+  return (
+    <Select
+      error={errorMessage}
+      clearable
+      searchable
+      placeholder={t`Select column, or leave blank to ignore this field.`}
+      label={undefined}
+      data={options}
+      value={selectedColumn}
+      onChange={onChange}
+    />
+  );
+}
+
+function ImporterDefaultField({
+  fieldName,
+  session
+}: {
+  fieldName: string;
+  session: ImportSessionState;
+}) {
+  const api = useApi();
+
+  const onChange = useCallback(
+    (value: any) => {
+      // Update the default value for the field
+      const defaults = {
+        ...session.fieldDefaults,
+        [fieldName]: value
+      };
+
+      api
+        .patch(apiUrl(ApiEndpoints.import_session_list, session.sessionId), {
+          field_defaults: defaults
+        })
+        .then((response: any) => {
+          session.setSessionData(response.data);
+        })
+        .catch(() => {
+          // TODO: Error message?
+        });
+    },
+    [fieldName, session, session.fieldDefaults]
+  );
+
+  const fieldDef: ApiFormFieldType = useMemo(() => {
+    let def: any = session.availableFields[fieldName];
+
+    if (def) {
+      def = {
+        ...def,
+        value: session.fieldDefaults[fieldName],
+        field_type: def.type,
+        description: def.help_text,
+        onValueChange: onChange
+      };
+    }
+
+    return def;
+  }, [fieldName, session.availableFields, session.fieldDefaults]);
+
+  return (
+    fieldDef && <StandaloneField fieldDefinition={fieldDef} hideLabels={true} />
+  );
+}
+
+function ImporterColumnTableRow({
+  session,
+  column,
+  options
+}: Readonly<{
+  session: ImportSessionState;
+  column: any;
+  options: any;
+}>) {
+  return (
+    <Table.Tr key={column.label ?? column.field}>
+      <Table.Td>
+        <Group gap='xs'>
+          <Text fw={column.required ? 700 : undefined}>
+            {column.label ?? column.field}
+          </Text>
+          {column.required && (
+            <Text c='red' fw={700}>
+              *
+            </Text>
+          )}
+        </Group>
+      </Table.Td>
+      <Table.Td>
+        <Text size='sm'>{column.description}</Text>
+      </Table.Td>
+      <Table.Td>
+        <ImporterColumn column={column} options={options} />
+      </Table.Td>
+      <Table.Td>
+        <ImporterDefaultField fieldName={column.field} session={session} />
+      </Table.Td>
+    </Table.Tr>
+  );
+}
+
+export default function ImporterColumnSelector({
+  session
+}: Readonly<{
+  session: ImportSessionState;
+}>) {
+  const api = useApi();
+
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  const acceptMapping = useCallback(() => {
+    const url = apiUrl(
+      ApiEndpoints.import_session_accept_fields,
+      session.sessionId
+    );
+
+    api
+      .post(url)
+      .then(() => {
+        session.refreshSession();
+      })
+      .catch((error) => {
+        setErrorMessage(error.response?.data?.error ?? t`An error occurred`);
+      });
+  }, [session.sessionId]);
+
+  const columnOptions: any[] = useMemo(() => {
+    return [
+      { value: '', label: t`Ignore this field` },
+      ...session.availableColumns.map((column: any) => {
+        return {
+          value: column,
+          label: column
+        };
+      })
+    ];
+  }, [session.availableColumns]);
+
+  return (
+    <Stack gap='xs'>
+      <Paper shadow='xs' p='xs'>
+        <Group grow justify='apart'>
+          <Text size='lg'>{t`Mapping data columns to database fields`}</Text>
+          <Space />
+          <Button color='green' variant='filled' onClick={acceptMapping}>
+            <Group>
+              <IconCheck />
+              {t`Accept Column Mapping`}
+            </Group>
+          </Button>
+        </Group>
+      </Paper>
+      {errorMessage && (
+        <Alert color='red' title={t`Error`}>
+          <Text>{errorMessage}</Text>
+        </Alert>
+      )}
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>{t`Database Field`}</Table.Th>
+            <Table.Th>{t`Field Description`}</Table.Th>
+            <Table.Th>{t`Imported Column`}</Table.Th>
+            <Table.Th>{t`Default Value`}</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {session.columnMappings.map((column: any) => {
+            return (
+              <ImporterColumnTableRow
+                key={`import-${column.field}}`}
+                session={session}
+                column={column}
+                options={columnOptions}
+              />
+            );
+          })}
+        </Table.Tbody>
+      </Table>
+    </Stack>
+  );
+}

package/src/components/importer/ImporterDrawer.tsx

@@ -0,0 +1,173 @@
+import { t } from '@lingui/core/macro';
+import {
+  Alert,
+  Button,
+  Divider,
+  Drawer,
+  Group,
+  Loader,
+  LoadingOverlay,
+  Paper,
+  Space,
+  Stack,
+  Stepper,
+  Text
+} from '@mantine/core';
+import { IconCheck } from '@tabler/icons-react';
+import { type ReactNode, useMemo } from 'react';
+
+import { ModelType } from '@lib/enums/ModelType';
+import { useImportSession } from '../../hooks/UseImportSession';
+import useStatusCodes from '../../hooks/UseStatusCodes';
+import { StylishText } from '../items/StylishText';
+import ImporterDataSelector from './ImportDataSelector';
+import ImporterColumnSelector from './ImporterColumnSelector';
+import ImporterImportProgress from './ImporterImportProgress';
+
+/*
+ * Stepper component showing the current step of the data import process.
+ */
+function ImportDrawerStepper({
+  currentStep
+}: Readonly<{ currentStep: number }>) {
+  /* TODO: Enhance this with:
+   * - Custom icons
+   * - Loading indicators for "background" states
+   */
+
+  return (
+    <Stepper
+      active={currentStep}
+      onStepClick={undefined}
+      allowNextStepsSelect={false}
+      iconSize={20}
+      size='xs'
+    >
+      <Stepper.Step label={t`Upload File`} />
+      <Stepper.Step label={t`Map Columns`} />
+      <Stepper.Step label={t`Import Data`} />
+      <Stepper.Step label={t`Process Data`} />
+      <Stepper.Step label={t`Complete Import`} />
+    </Stepper>
+  );
+}
+
+export default function ImporterDrawer({
+  sessionId,
+  opened,
+  onClose
+}: Readonly<{
+  sessionId: number;
+  opened: boolean;
+  onClose: () => void;
+}>) {
+  const session = useImportSession({ sessionId: sessionId });
+
+  const importSessionStatus = useStatusCodes({
+    modelType: ModelType.importsession
+  });
+
+  // Map from import steps to stepper steps
+  const currentStep = useMemo(() => {
+    switch (session.status) {
+      case importSessionStatus.INITIAL:
+        return 0;
+      case importSessionStatus.MAPPING:
+        return 1;
+      case importSessionStatus.IMPORTING:
+        return 2;
+      case importSessionStatus.PROCESSING:
+        return 3;
+      case importSessionStatus.COMPLETE:
+        return 4;
+      default:
+        return 0;
+    }
+  }, [session.status]);
+
+  const widget = useMemo(() => {
+    if (session.sessionQuery.isLoading || session.sessionQuery.isFetching) {
+      return <Loader />;
+    }
+
+    switch (session.status) {
+      case importSessionStatus.INITIAL:
+        return <Text>Initial : TODO</Text>;
+      case importSessionStatus.MAPPING:
+        return <ImporterColumnSelector session={session} />;
+      case importSessionStatus.IMPORTING:
+        return <ImporterImportProgress session={session} />;
+      case importSessionStatus.PROCESSING:
+        return <ImporterDataSelector session={session} />;
+      case importSessionStatus.COMPLETE:
+        return (
+          <Stack gap='xs'>
+            <Alert
+              color='green'
+              title={t`Import Complete`}
+              icon={<IconCheck />}
+            >
+              {t`Data has been imported successfully`}
+            </Alert>
+            <Button color='blue' onClick={onClose}>{t`Close`}</Button>
+          </Stack>
+        );
+      default:
+        return (
+          <Stack gap='xs'>
+            <Alert color='red' title={t`Unknown Status`} icon={<IconCheck />}>
+              {t`Import session has unknown status`}: {session.status}
+            </Alert>
+            <Button color='red' onClick={onClose}>{t`Close`}</Button>
+          </Stack>
+        );
+    }
+  }, [session.status, session.sessionQuery]);
+
+  const title: ReactNode = useMemo(() => {
+    return (
+      <Stack gap='xs' style={{ width: '100%' }}>
+        <Group
+          gap='xs'
+          wrap='nowrap'
+          justify='space-apart'
+          grow
+          preventGrowOverflow={false}
+        >
+          <StylishText size='lg'>
+            {session.sessionData?.statusText ?? t`Importing Data`}
+          </StylishText>
+          <ImportDrawerStepper currentStep={currentStep} />
+          <Space />
+        </Group>
+        <Divider />
+      </Stack>
+    );
+  }, [session.sessionData]);
+
+  return (
+    <Drawer
+      position='bottom'
+      size='80%'
+      title={title}
+      opened={opened}
+      onClose={onClose}
+      withCloseButton={true}
+      closeOnEscape={false}
+      closeOnClickOutside={false}
+      styles={{
+        header: {
+          width: '100%'
+        },
+        title: {
+          width: '100%'
+        }
+      }}
+    >
+      <Stack gap='xs'>
+        <LoadingOverlay visible={session.sessionQuery.isFetching} />
+        <Paper p='md'>{session.sessionQuery.isFetching || widget}</Paper>
+      </Stack>
+    </Drawer>
+  );
+}

package/src/components/importer/ImporterImportProgress.tsx

@@ -0,0 +1,45 @@
+import { t } from '@lingui/core/macro';
+import { Center, Container, Loader, Stack, Text } from '@mantine/core';
+import { useInterval } from '@mantine/hooks';
+import { useEffect } from 'react';
+
+import { ModelType } from '@lib/enums/ModelType';
+import type { ImportSessionState } from '../../hooks/UseImportSession';
+import useStatusCodes from '../../hooks/UseStatusCodes';
+import { StylishText } from '../items/StylishText';
+
+export default function ImporterImportProgress({
+  session
+}: Readonly<{
+  session: ImportSessionState;
+}>) {
+  const importSessionStatus = useStatusCodes({
+    modelType: ModelType.importsession
+  });
+
+  // Periodically refresh the import session data
+  const interval = useInterval(() => {
+    if (session.status == importSessionStatus.IMPORTING) {
+      session.refreshSession();
+    }
+  }, 1000);
+
+  useEffect(() => {
+    interval.start();
+    return interval.stop;
+  }, []);
+
+  return (
+    <Center>
+      <Container>
+        <Stack gap='xs'>
+          <StylishText size='lg'>{t`Importing Records`}</StylishText>
+          <Loader />
+          <Text size='lg'>
+            {t`Imported Rows`}: {session.sessionData.row_count}
+          </Text>
+        </Stack>
+      </Container>
+    </Center>
+  );
+}