@gen-epix/ui 1.15.1 → 1.15.2

package/src/components/epi/EpiCaseInfoDialog/EpiCaseSharingForm.tsx

@@ -1,140 +0,0 @@
-import {
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  array,
-  object,
-  string,
-} from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
-import type { Resolver } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
-import difference from 'lodash/difference';
-import {
-  Box,
-  Typography,
-  type BoxProps,
-} from '@mui/material';
-
-import { useCaseAbacContext } from '../../../context/caseAbac';
-import type { Case } from '../../../api';
-import { CaseApi } from '../../../api';
-import { NotificationManager } from '../../../classes/managers/NotificationManager';
-import type { FormFieldDefinition } from '../../../models/form';
-import { FORM_FIELD_DEFINITION_TYPE } from '../../../models/form';
-import { QUERY_KEY } from '../../../models/query';
-import { FormUtil } from '../../../utils/FormUtil';
-import { QueryUtil } from '../../../utils/QueryUtil';
-import { GenericForm } from '../../form/helpers/GenericForm';
-import { Spinner } from '../../ui/Spinner';
-
-export type EpiCaseSharingFormProps = {
-  readonly epiCase: Case;
-  readonly formId: string;
-  readonly onFinish: () => void;
-  readonly onIsSavingChange: (isSaving: boolean) => void;
-} & BoxProps;
-
-type FormFields = {
-  dataCollectionIds?: string[];
-};
-
-export const EpiCaseSharingForm = ({ formId, epiCase, onFinish, onIsSavingChange, ...boxProps }: EpiCaseSharingFormProps) => {
-  const { t } = useTranslation();
-  const [isSaving, setIsSaving] = useState(false);
-  const caseAbacContext = useCaseAbacContext();
-
-  const schema = useMemo(() => object<FormFields>().shape({
-    dataCollectionIds: array().of(string().uuid4()).required(),
-  }), []);
-
-  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => [
-    {
-      definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
-      name: 'dataCollectionIds',
-      label: t`Data collections`,
-      options: caseAbacContext?.itemDataCollectionOptions?.[0] ?? [],
-      multiple: true,
-    } as const satisfies FormFieldDefinition<FormFields>,
-  ] as const, [t, caseAbacContext?.itemDataCollectionOptions]);
-
-  const item = useMemo<FormFields>(() => {
-    return {
-      dataCollectionIds: caseAbacContext?.rights?.[0]?.shared_in_data_collection_ids ?? [],
-    };
-  }, [caseAbacContext?.rights]);
-
-  const values = useMemo<FormFields>(() => FormUtil.createFormValues(formFieldDefinitions, item), [formFieldDefinitions, item]);
-
-  const formMethods = useForm<FormFields>({
-    resolver: yupResolver(schema) as Resolver<FormFields>,
-    values,
-  });
-  const { handleSubmit } = formMethods;
-
-  const onFormSubmit = useCallback(({ dataCollectionIds }: FormFields) => {
-    const perform = async () => {
-      setIsSaving(true);
-      onIsSavingChange(true);
-      const queryKeys = QueryUtil.getQueryKeyDependencies([QUERY_KEY.CASE_DATA_COLLECTION_LINKS], true);
-      const notificationKey = NotificationManager.instance.showNotification({
-        message: t('Saving case data collections'),
-        isLoading: true,
-        severity: 'info',
-      });
-      try {
-        await QueryUtil.cancelQueries(queryKeys);
-        const rights = caseAbacContext?.rights?.[0];
-        const dataCollectionIdsToAdd = difference(dataCollectionIds, rights.shared_in_data_collection_ids);
-        const dataCollectionIdsToRemove = difference(rights.shared_in_data_collection_ids, dataCollectionIds);
-
-        if (dataCollectionIdsToAdd.length > 0) {
-          await CaseApi.instance.caseDataCollectionLinksPostSome(dataCollectionIdsToAdd.map(data_collection_id => ({
-            case_id: epiCase.id,
-            data_collection_id,
-          })));
-        }
-        if (dataCollectionIdsToRemove.length > 0) {
-          await CaseApi.instance.caseDataCollectionLinksDeleteSome(caseAbacContext.itemDataCollectionLinks[0]?.filter(x => dataCollectionIdsToRemove.includes(x.data_collection_id)).map(x => x.id).join(','));
-        }
-        NotificationManager.instance.fulfillNotification(notificationKey, t('Successfully saved case data collections.'), 'success');
-      } catch (_error) {
-        NotificationManager.instance.fulfillNotification(notificationKey, t('Could not save case data collections.'), 'error');
-      } finally {
-        await QueryUtil.invalidateQueryKeys(queryKeys);
-        setIsSaving(false);
-        onIsSavingChange(false);
-        onFinish();
-      }
-    };
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    perform();
-  }, [caseAbacContext.itemDataCollectionLinks, caseAbacContext?.rights, epiCase.id, onFinish, onIsSavingChange, t]);
-
-  if (isSaving) {
-    return (
-      <Spinner
-        inline
-        label={t`Saving case data collections`}
-      />
-    );
-  }
-
-  return (
-    <Box {...boxProps}>
-      <Typography variant={'h6'}>
-        {t`Data collections`}
-      </Typography>
-      <GenericForm<FormFields>
-        formFieldDefinitions={formFieldDefinitions}
-        formId={formId}
-        formMethods={formMethods}
-        schema={schema}
-        onSubmit={handleSubmit(onFormSubmit)}
-      />
-    </Box>
-  );
-};

package/src/components/epi/EpiCaseInfoDialog/EpiCaseSharingInfo.tsx

@@ -1,23 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import {
-  Box,
-  Typography,
-  type BoxProps,
-} from '@mui/material';
-
-import { EpiDataCollectionAccessInfo } from '../EpiDataCollectionAccessInfo';
-
-export type EpiCaseSharingInfoProps = BoxProps;
-
-export const EpiCaseSharingInfo = ({ ...boxProps }: EpiCaseSharingInfoProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Box {...boxProps}>
-      <Typography variant={'h6'}>
-        {t`Shared in`}
-      </Typography>
-      <EpiDataCollectionAccessInfo />
-    </Box>
-  );
-};

package/src/components/epi/EpiCaseInfoDialog/EpiReadOnlyCaseContent.tsx

@@ -1,89 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { format } from 'date-fns';
-
-import type { Case } from '../../../api';
-import { useDataCollectionsMapQuery } from '../../../dataHooks/useDataCollectionsQuery';
-import { GenericErrorMessage } from '../../ui/GenericErrorMessage';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import { DATE_FORMAT } from '../../../data/date';
-import { useArray } from '../../../hooks/useArray';
-
-export type EpiReadOnlyCaseContentProps = {
-  readonly epiCase: Case;
-} & BoxProps;
-
-export const EpiReadOnlyCaseContent = ({ epiCase, ...boxProps }: EpiReadOnlyCaseContentProps) => {
-  const { t } = useTranslation();
-  const dataCollectionsMapQuery = useDataCollectionsMapQuery();
-
-  const loadables = useArray([dataCollectionsMapQuery]);
-
-  return (
-    <Box {...boxProps}>
-      <Typography variant={'h6'}>
-        {t`Read-only content`}
-      </Typography>
-      {!epiCase && (
-        <GenericErrorMessage
-          error={new Error('Case could not be found')}
-        />
-      )}
-      <ResponseHandler
-        inlineSpinner
-        shouldHideActionButtons
-        loadables={loadables}
-      >
-        {epiCase && (
-          <Table size={'small'}>
-            <TableHead>
-              <TableRow>
-                <TableCell
-                  sx={{
-                    width: 'calc(100% * 1/3)',
-                  }}
-                >
-                  {t`Column`}
-                </TableCell>
-                <TableCell
-                  sx={{
-                    width: 'calc(100% * 2/3)',
-                  }}
-                >
-                  {t`Value`}
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              <TableRow>
-                <TableCell>
-                  {t`Case id`}
-                </TableCell>
-                <TableCell>
-                  {epiCase.id}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>
-                  {t`Case date`}
-                </TableCell>
-                <TableCell>
-                  {format(epiCase.case_date, DATE_FORMAT.DATE)}
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        )}
-      </ResponseHandler>
-    </Box>
-  );
-};

package/src/components/epi/EpiCaseInfoDialog/index.ts

@@ -1 +0,0 @@
-export * from './EpiCaseInfoDialog';

package/src/components/epi/EpiCaseSetInfoDialog/EpiCaseSetContent.tsx

@@ -1,108 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { format } from 'date-fns';
-
-import type { CaseSet } from '../../../api';
-import { useCaseSetCategoryMapQuery } from '../../../dataHooks/useCaseSetCategoriesQuery';
-import { useCaseSetStatusMapQuery } from '../../../dataHooks/useCaseSetStatusesQuery';
-import { useCaseTypeMapQuery } from '../../../dataHooks/useCaseTypesQuery';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import { DATE_FORMAT } from '../../../data/date';
-import { useArray } from '../../../hooks/useArray';
-
-export type EpiCaseSetContentProps = {
-  readonly caseSet: CaseSet;
-} & BoxProps;
-
-export const EpiCaseSetContent = ({ caseSet, ...boxProps }: EpiCaseSetContentProps) => {
-  const caseSetCategoryMapQuery = useCaseSetCategoryMapQuery();
-  const caseSetStatusMapQuery = useCaseSetStatusMapQuery();
-  const caseTypeMapQuery = useCaseTypeMapQuery();
-  const { t } = useTranslation();
-
-  const loadables = useArray([caseSetCategoryMapQuery, caseSetStatusMapQuery, caseTypeMapQuery]);
-  return (
-    <Box {...boxProps}>
-      <Typography variant={'h6'}>
-        {t`Content`}
-      </Typography>
-      <ResponseHandler
-        inlineSpinner
-        shouldHideActionButtons
-        loadables={loadables}
-      >
-        <Table size={'small'}>
-          <TableHead>
-            <TableRow>
-              <TableCell
-                sx={{
-                  width: 'calc(100% * 1/3)',
-                }}
-              >
-                {t`Column`}
-              </TableCell>
-              <TableCell
-                sx={{
-                  width: 'calc(100% * 2/3)',
-                }}
-              >
-                {t`Value`}
-              </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                {t`Name`}
-              </TableCell>
-              <TableCell>
-                {caseSet.name}
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                {t`Status`}
-              </TableCell>
-              <TableCell>
-                {caseSetStatusMapQuery.map.get(caseSet.case_set_status_id)?.name}
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                {t`Category`}
-              </TableCell>
-              <TableCell>
-                {caseSetCategoryMapQuery.map.get(caseSet.case_set_category_id)?.name}
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                {t`Type`}
-              </TableCell>
-              <TableCell>
-                {caseTypeMapQuery.map.get(caseSet.case_type_id)?.name}
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                {t`Created at`}
-              </TableCell>
-              <TableCell>
-                {caseSet.created_at ? format(caseSet.created_at, DATE_FORMAT.DATE_TIME) : t`Unknown`}
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </ResponseHandler>
-    </Box>
-  );
-};

package/src/components/epi/EpiCaseSetInfoDialog/EpiCaseSetDescription.tsx

@@ -1,34 +0,0 @@
-import {
-  Box,
-  Typography,
-  type BoxProps,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-import type { CaseSet } from '../../../api';
-import { RichTextEditorContent } from '../../form/fields/RichTextEditor';
-
-export type EpiCaseSetDescriptionProps = {
-  readonly caseSet: CaseSet;
-} & BoxProps;
-export const EpiCaseSetDescription = ({ caseSet, ...boxProps }: EpiCaseSetDescriptionProps) => {
-  const { t } = useTranslation();
-  return (
-    <Box {...boxProps}>
-      <Typography variant={'h6'}>
-        {t`Description`}
-      </Typography>
-      <Box>
-        {caseSet?.description && (
-          <RichTextEditorContent source={caseSet?.description || ''} />
-        )}
-        {!caseSet?.description && (
-          <Box sx={{ fontStyle: 'italic' }}>
-            {t`None`}
-          </Box>
-        )}
-      </Box>
-    </Box>
-  );
-
-};

package/src/components/epi/EpiCaseSetInfoDialog/EpiCaseSetForm.tsx

@@ -1,151 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-} from 'react';
-import { t } from 'i18next';
-import { yupResolver } from '@hookform/resolvers/yup';
-import type { Resolver } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
-import {
-  object,
-  string,
-} from 'yup';
-
-import { EpiCreateEventDialogSuccessNotificationMessage } from '../EpiCreateEventDialog/EpiCreateEventDialogSuccessNotificationMessage';
-import type { CaseSet } from '../../../api';
-import { CaseApi } from '../../../api';
-import { useCaseSetCategoryOptionsQuery } from '../../../dataHooks/useCaseSetCategoriesQuery';
-import { useCaseSetStatusOptionsQuery } from '../../../dataHooks/useCaseSetStatusesQuery';
-import { useCaseTypeOptionsQuery } from '../../../dataHooks/useCaseTypesQuery';
-import { useEditMutation } from '../../../hooks/useEditMutation';
-import type { FormFieldDefinition } from '../../../models/form';
-import { FORM_FIELD_DEFINITION_TYPE } from '../../../models/form';
-import { QUERY_KEY } from '../../../models/query';
-import { FormUtil } from '../../../utils/FormUtil';
-import { QueryUtil } from '../../../utils/QueryUtil';
-import { GenericForm } from '../../form/helpers/GenericForm';
-import { Spinner } from '../../ui/Spinner';
-
-export type EpiCaseSetFormProps = {
-  readonly caseSet: CaseSet;
-  readonly formId: string;
-  readonly onFinish: () => void;
-  readonly onIsSavingChange: (isSaving: boolean) => void;
-};
-
-type FormFields = Pick<CaseSet, 'name' | 'description' | 'case_type_id' | 'case_set_category_id' | 'case_set_status_id'>;
-
-export const EpiCaseSetForm = ({ caseSet, formId, onFinish, onIsSavingChange }: EpiCaseSetFormProps) => {
-  const caseTypeOptionsQuery = useCaseTypeOptionsQuery();
-  const caseSetCategoryOptionsQuery = useCaseSetCategoryOptionsQuery();
-  const caseSetStatusOptionsQuery = useCaseSetStatusOptionsQuery();
-
-  const schema = useMemo(() => object<FormFields>().shape({
-    name: string().extendedAlphaNumeric().required().max(100),
-    description: string().freeFormText(),
-    case_type_id: string().uuid4().required(),
-    case_set_category_id: string().uuid4().required(),
-    case_set_status_id: string().uuid4().required(),
-  }), []);
-
-
-  const onSuccess = useCallback(async () => {
-    // FIXME: this should be fixed in useEditMutation
-    await QueryUtil.invalidateQueryKeys([QueryUtil.getGenericKey(QUERY_KEY.CASE_SETS, caseSet.id)]);
-    onFinish();
-  }, [caseSet.id, onFinish]);
-
-  // eslint-disable-next-line @typescript-eslint/require-await
-  const onError = useCallback(async () => {
-    onFinish();
-  }, [onFinish]);
-
-  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
-    return [
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
-        name: 'case_type_id',
-        label: t`Case type`,
-        options: caseTypeOptionsQuery.options,
-        loading: caseTypeOptionsQuery.isLoading,
-        disabled: !!caseSet,
-      } as const satisfies FormFieldDefinition<FormFields>,
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
-        name: 'name',
-        label: t`Event name`,
-      } as const satisfies FormFieldDefinition<FormFields>,
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.RICH_TEXT,
-        name: 'description',
-        label: t`Description`,
-      } as const satisfies FormFieldDefinition<FormFields>,
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
-        name: 'case_set_category_id',
-        label: t`Category`,
-        options: caseSetCategoryOptionsQuery.options,
-        loading: caseSetCategoryOptionsQuery.isLoading,
-      } as const satisfies FormFieldDefinition<FormFields>,
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
-        name: 'case_set_status_id',
-        label: t`Status`,
-        options: caseSetStatusOptionsQuery.options,
-        loading: caseSetStatusOptionsQuery.isLoading,
-      } as const satisfies FormFieldDefinition<FormFields>,
-    ] as const;
-  }, [caseSet, caseSetCategoryOptionsQuery.isLoading, caseSetCategoryOptionsQuery.options, caseSetStatusOptionsQuery.isLoading, caseSetStatusOptionsQuery.options, caseTypeOptionsQuery.isLoading, caseTypeOptionsQuery.options]);
-
-  const { mutate: mutateEdit, isMutating: isEditing, setPreviousItem } = useEditMutation<CaseSet, FormFields>({
-    resourceQueryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SETS),
-    onSuccess,
-    onError,
-    queryFn: async (formData: FormFields, item: CaseSet): Promise<CaseSet> => {
-      const result = await CaseApi.instance.caseSetsPutOne(item.id, { ...item, ...formData });
-      return result.data;
-    },
-    getProgressNotificationMessage: (data) => t('Saving event: {{name}}', { name: data.name }),
-    getErrorNotificationMessage: (data) => t('Failed to edit event: {{name}}', { name: data.name }),
-    // eslint-disable-next-line react/no-unstable-nested-components
-    getSuccessNotificationMessage: (item) => <EpiCreateEventDialogSuccessNotificationMessage caseSet={item} />,
-    getIntermediateItem: (variables: FormFields, previousItem: CaseSet) => ({ ...previousItem, ...variables }),
-  });
-
-  useEffect(() => {
-    onIsSavingChange(isEditing);
-  }, [isEditing, onIsSavingChange]);
-
-  const onFormSubmit = useCallback((formData: FormFields) => {
-    setPreviousItem(caseSet);
-    mutateEdit(formData);
-  }, [caseSet, mutateEdit, setPreviousItem]);
-
-  const values = useMemo(() => FormUtil.createFormValues<FormFields, CaseSet>(formFieldDefinitions, caseSet), [formFieldDefinitions, caseSet]);
-
-  const formMethods = useForm<FormFields>({
-    resolver: yupResolver(schema) as unknown as Resolver<FormFields>,
-    values,
-  });
-  const { handleSubmit } = formMethods;
-
-  if (isEditing) {
-    return (
-      <Spinner
-        inline
-        label={t`Saving event data`}
-      />
-    );
-  }
-
-  return (
-    <GenericForm<FormFields>
-      formFieldDefinitions={formFieldDefinitions}
-      formId={formId}
-      formMethods={formMethods}
-      schema={schema}
-      onSubmit={handleSubmit(onFormSubmit)}
-    />
-  );
-};