@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/importer/ImporterColumnSelector.tsx

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

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

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