@gen-epix/ui 1.14.4 → 1.15.0

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

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

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

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

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

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

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

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

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