@gen-epix/ui 1.14.4 → 1.15.0

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

@@ -0,0 +1,127 @@
+import type { BoxProps } from '@mui/material';
+import {
+  Box,
+  Link,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import {
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+
+import type { EpiContactDetailsDialogRefMethods } from '../EpiContactDetailsDialog';
+import { EpiContactDetailsDialog } from '../EpiContactDetailsDialog';
+import type { Case } from '../../../api';
+import { ColType } from '../../../api';
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
+import { CaseUtil } from '../../../utils/CaseUtil';
+import { GenericErrorMessage } from '../../ui/GenericErrorMessage';
+
+export type EpiCaseContentProps = {
+  readonly epiCase: Case;
+} & BoxProps;
+
+export const EpiCaseContent = ({ epiCase, ...boxProps }: EpiCaseContentProps) => {
+  const { t } = useTranslation();
+  const epiContactDetailsDialogRef = useRef<EpiContactDetailsDialogRefMethods>(null);
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
+
+  const cols = useMemo(() => CaseTypeUtil.getCols(completeCaseType), [completeCaseType]);
+
+  const onOrganizationLinkClick = useCallback((organizationId: string, organizationName: string) => {
+    console.log('onOrganizationLinkClick', organizationId, organizationName);
+    epiContactDetailsDialogRef.current.open({
+      organizationId,
+      organizationName,
+    });
+  }, []);
+
+  return (
+    <Box {...boxProps}>
+      <Typography variant={'h6'}>
+        {t`Content`}
+      </Typography>
+      {!epiCase && (
+        <GenericErrorMessage
+          error={new Error('Case could not be found')}
+        />
+      )}
+      {epiCase && (
+        <Table size={'small'}>
+          <TableHead>
+            <TableRow>
+              <TableCell
+                sx={{
+                  width: 'calc(100% / 3)',
+                }}
+              >
+                {t`Column`}
+              </TableCell>
+              <TableCell
+                sx={{
+                  width: 'calc(100% / 3 * 2)',
+                }}
+              >
+                {t`Value`}
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {cols.map(col => {
+              const refCol = completeCaseType.ref_cols[col.ref_col_id];
+              const columnValue = CaseUtil.getRowValue(epiCase.content, col, completeCaseType);
+              return (
+                <TableRow key={col.id}>
+                  <TableCell
+                    sx={{
+                      width: 'calc(100% / 3)',
+                    }}
+                  >
+                    {col.label}
+                  </TableCell>
+                  <TableCell
+                    sx={{
+                      width: 'calc(100% / 3 * 2)',
+                    }}
+                  >
+                    {refCol.col_type === ColType.ORGANIZATION && !columnValue.isMissing && (
+                      <Link
+                        sx={{
+                          cursor: 'pointer',
+                        }}
+                        color={'primary'}
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick={() => {
+                          onOrganizationLinkClick(epiCase.content[col.id], columnValue.long);
+                        }}
+                      >
+                        {columnValue.long}
+                      </Link>
+                    )}
+                    {refCol.col_type !== ColType.ORGANIZATION && (
+                      <>
+                        {columnValue.long}
+                      </>
+                    )}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      )}
+      <EpiContactDetailsDialog ref={epiContactDetailsDialogRef} />
+    </Box>
+  );
+};

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

@@ -0,0 +1,111 @@
+import {
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { useStore } from 'zustand';
+import { t } from 'i18next';
+import { useShallow } from 'zustand/shallow';
+import { yupResolver } from '@hookform/resolvers/yup';
+import type { Resolver } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import {
+  Box,
+  Typography,
+  type BoxProps,
+} from '@mui/material';
+
+import type { Case } from '../../../api';
+import { CaseApi } from '../../../api';
+import { NotificationManager } from '../../../classes/managers/NotificationManager';
+import { useOrganizationsQuery } from '../../../dataHooks/useOrganizationsQuery';
+import { QUERY_KEY } from '../../../models/query';
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { CaseUtil } from '../../../utils/CaseUtil';
+import { FormUtil } from '../../../utils/FormUtil';
+import { ObjectUtil } from '../../../utils/ObjectUtil';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import { GenericForm } from '../../form/helpers/GenericForm';
+import { Spinner } from '../../ui/Spinner';
+
+export type EpiCaseFormProps = {
+  readonly epiCase: Case;
+  readonly formId: string;
+  readonly onFinish: () => void;
+  readonly onIsSavingChange: (isSaving: boolean) => void;
+} & BoxProps;
+
+export const EpiCaseForm = ({ epiCase, formId, onFinish, onIsSavingChange, ...boxProps }: EpiCaseFormProps) => {
+  const organizationsQuery = useOrganizationsQuery();
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
+  const schema = useMemo(() => CaseUtil.createYupSchema(completeCaseType), [completeCaseType]);
+  const formFieldDefinitions = useMemo(() => CaseUtil.createFormFieldDefinitions(completeCaseType, organizationsQuery), [completeCaseType, organizationsQuery]);
+  const mutateCachedCase = useStore(epiDashboardStore, useShallow((state) => state.mutateCachedCase));
+  const [isSaving, setIsSaving] = useState(false);
+
+  const onFormSubmit = useCallback((content: Case['content']) => {
+    setIsSaving(true);
+    onIsSavingChange(true);
+    const perform = async () => {
+      const queryKeys = QueryUtil.getQueryKeyDependencies([QUERY_KEY.CASES], true);
+      const notificationKey = NotificationManager.instance.showNotification({
+        message: t('Saving case data'),
+        severity: 'info',
+        isLoading: true,
+      });
+      try {
+        await QueryUtil.cancelQueries(queryKeys);
+        const item = {
+          ...epiCase,
+          content: ObjectUtil.mergeWithUndefined(epiCase.content, content),
+        };
+        await CaseApi.instance.casesPutOne(item.id, item);
+        mutateCachedCase(item.id, item);
+        NotificationManager.instance.fulfillNotification(notificationKey, t('Successfully saved case data.'), 'success');
+      } catch (_error) {
+        NotificationManager.instance.fulfillNotification(notificationKey, t('Could not save case data.'), 'error');
+      } finally {
+        await QueryUtil.invalidateQueryKeys(queryKeys);
+        setIsSaving(false);
+        onIsSavingChange(false);
+        onFinish();
+      }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    perform();
+  }, [epiCase, mutateCachedCase, onFinish, onIsSavingChange]);
+
+  const values = useMemo<Case['content']>(() => FormUtil.createFormValues(formFieldDefinitions, epiCase.content), [formFieldDefinitions, epiCase.content]);
+  const formMethods = useForm<Case['content']>({
+    resolver: yupResolver(schema) as unknown as Resolver<Case['content']>,
+    values,
+  });
+  const { handleSubmit } = formMethods;
+
+  return (
+    <Box {...boxProps}>
+      <Typography variant={'h6'}>
+        {t`Content`}
+      </Typography>
+      <Box>
+        {isSaving && (
+          <Spinner
+            inline
+            label={t`Saving case data`}
+          />
+        )}
+        {!isSaving && (
+          <GenericForm<Case['content']>
+            formFieldDefinitions={formFieldDefinitions}
+            formId={formId}
+            formMethods={formMethods}
+            schema={schema}
+            onSubmit={handleSubmit(onFormSubmit)}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,377 @@
+import SaveIcon from '@mui/icons-material/Save';
+import EditIcon from '@mui/icons-material/Edit';
+import ShareIcon from '@mui/icons-material/Share';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+
+import {
+  withDialog,
+  type WithDialogRefMethods,
+  type WithDialogRenderProps,
+} from '../../../hoc/withDialog';
+import type { CaseAbacContext } from '../../../context/caseAbac/CaseAbacContext';
+import { CaseAbacContextProvider } from '../../../context/caseAbac';
+import type {
+  Case,
+  TypedUuidSetFilter,
+} from '../../../api';
+import { CaseApi } from '../../../api';
+import { useCaseRightsQuery } from '../../../dataHooks/useCaseRightsQuery';
+import {
+  useDataCollectionsQuery,
+  useDataCollectionsMapQuery,
+  useDataCollectionOptionsQuery,
+} from '../../../dataHooks/useDataCollectionsQuery';
+import { useDeleteMutation } from '../../../hooks/useDeleteMutation';
+import { useItemQuery } from '../../../hooks/useItemQuery';
+import { QUERY_KEY } from '../../../models/query';
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import type { ConfirmationRefMethods } from '../../ui/Confirmation';
+import { Confirmation } from '../../ui/Confirmation';
+import type { DialogAction } from '../../ui/Dialog';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import { Spinner } from '../../ui/Spinner';
+import { useArray } from '../../../hooks/useArray';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+
+import { EpiCaseCaseSetInfo } from './EpiCaseCaseSetInfo';
+import { EpiCaseForm } from './EpiCaseForm';
+import { EpiReadOnlyCaseContent } from './EpiReadOnlyCaseContent';
+import { EpiCaseContent } from './EpiCaseContent';
+import { EpiCaseSharingInfo } from './EpiCaseSharingInfo';
+import { EpiCaseSharingForm } from './EpiCaseSharingForm';
+
+
+export interface EpiCaseInfoDialogOpenProps {
+  caseId: string;
+  caseTypeId: string;
+}
+
+export interface EpiCaseInfoDialogProps extends WithDialogRenderProps<EpiCaseInfoDialogOpenProps> {
+  //
+}
+
+export type EpiCaseInfoDialogRefMethods = WithDialogRefMethods<EpiCaseInfoDialogProps, EpiCaseInfoDialogOpenProps>;
+
+export const EpiCaseInfoDialog = withDialog<EpiCaseInfoDialogProps, EpiCaseInfoDialogOpenProps>((
+  {
+    openProps,
+    onActionsChange,
+    onTitleChange,
+    onClose,
+  }: EpiCaseInfoDialogProps,
+): ReactElement => {
+  const { t } = useTranslation();
+  const caseIds = useMemo(() => [openProps.caseId], [openProps.caseId]);
+  const caseRightsQuery = useCaseRightsQuery(caseIds, openProps.caseTypeId);
+  const dataCollectionsQuery = useDataCollectionsQuery();
+  const dataCollectionsMapQuery = useDataCollectionsMapQuery();
+  const dataCollectionOptionsQuery = useDataCollectionOptionsQuery();
+
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const fetchData = useStore(epiDashboardStore, useShallow((state) => state.fetchData));
+  const [isEditingCaseContent, setIsEditingCaseContent] = useState(false);
+  const [isEditingDataCollections, setIsEditingDataCollections] = useState(false);
+  const [isEpiCaseFormSaving, setIsEpiCaseFormSaving] = useState(false);
+  const [isEpiCaseDataCollectionFormSaving, setIsEpiCaseDataCollectionFormSaving] = useState(false);
+  const [isRefreshingData, setIsRefreshingData] = useState(false);
+  const deleteConfirmation = useRef<ConfirmationRefMethods>(null);
+  const valuesFormId = useId();
+  const dataCollectionsFormId = useId();
+  const loadables = useArray([caseRightsQuery, dataCollectionsQuery, dataCollectionsMapQuery, dataCollectionOptionsQuery]);
+
+  // eslint-disable-next-line @typescript-eslint/require-await
+  const onDeleteSuccess = useCallback(async () => {
+    onClose();
+  }, [onClose]);
+
+  // eslint-disable-next-line @typescript-eslint/require-await
+  const onDeleteError = useCallback(async () => {
+    onClose();
+  }, [onClose]);
+
+  const { mutate: deleteMutate, isMutating: isDeleteMutating } = useDeleteMutation<Case>({
+    resourceQueryKey: QueryUtil.getGenericKey(QUERY_KEY.CASES),
+    associationQueryKeys: QueryUtil.getQueryKeyDependencies([QUERY_KEY.CASES], true),
+    queryFn: async (item: Case) => {
+      return await CaseApi.instance.casesDeleteOne(item.id);
+    },
+    getProgressNotificationMessage: (data) => t('Deleting case: {{id}}...', { name: data.id }),
+    getSuccessNotificationMessage: (data) => t('Case: {{id}}, has been removed.', { name: data.id }),
+    getErrorNotificationMessage: (data) => t('Unable to remove case: {{id}}.', { name: data.id }),
+    onSuccess: onDeleteSuccess,
+    onError: onDeleteError,
+  });
+
+  const { isLoading: epiCaseIsLoading, error: epiCaseError, data: epiCase } = useItemQuery<Case>({
+    baseQueryKey: QUERY_KEY.CASES_LAZY,
+    itemId: openProps.caseId,
+    useQueryOptions: {
+      queryFn: async ({ signal }) => {
+        const response = await CaseApi.instance.casesGetOne(openProps.caseId, { signal });
+        return response.data;
+      },
+      enabled: !isDeleteMutating,
+    },
+  });
+
+  const caseDataCollectionLinksFilter = useMemo<TypedUuidSetFilter>(() => ({
+    invert: false,
+    key: 'case_id',
+    type: 'UUID_SET',
+    members: [epiCase?.id],
+  }), [epiCase?.id]);
+  const { isLoading: isCaseDataCollectionLinksLoading, error: caseDataCollectionLinksError, data: caseDataCollectionLinks } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_DATA_COLLECTION_LINKS, caseDataCollectionLinksFilter),
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.caseDataCollectionLinksPostQuery(caseDataCollectionLinksFilter, { signal });
+      return response.data;
+    },
+    enabled: !!epiCase,
+  });
+
+
+  const canEdit = useMemo(() => {
+    return !!caseRightsQuery.data && caseRightsQuery.data.some((right) => right.is_full_access || right.write_col_ids.length);
+  }, [caseRightsQuery.data]);
+
+  const canShare = useMemo(() => {
+    return !!caseRightsQuery.data && caseRightsQuery.data.some((right) => right.is_full_access || right.remove_data_collection_ids.length || right.add_data_collection_ids.length);
+  }, [caseRightsQuery.data]);
+
+  const canDelete = useCallback(() => {
+    return !!caseRightsQuery.data && caseRightsQuery.data.some((right) => right.is_full_access || right.can_delete);
+  }, [caseRightsQuery]);
+
+  const onEditButtonClick = useCallback(() => {
+    setIsEditingCaseContent(true);
+  }, []);
+
+  const onShareButtonClick = useCallback(() => {
+    setIsEditingDataCollections(true);
+  }, []);
+
+  const onGoBackButtonClick = useCallback(() => {
+    setIsEditingCaseContent(false);
+    setIsEditingDataCollections(false);
+  }, []);
+
+  const onFinish = useCallback(() => {
+    const perform = async () => {
+      setIsEpiCaseFormSaving(false);
+      setIsEpiCaseDataCollectionFormSaving(false);
+      setIsRefreshingData(true);
+      setIsEditingCaseContent(false);
+      setIsEditingDataCollections(false);
+      await fetchData();
+      setIsRefreshingData(false);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    perform();
+  }, [fetchData]);
+
+
+  const onEpiCaseFormIsSavingChange = useCallback((isSaving: boolean) => {
+    setIsEpiCaseFormSaving(isSaving);
+  }, []);
+
+  const onEpiCaseDataCollectionFormIsSavingChange = useCallback((isSaving: boolean) => {
+    setIsEpiCaseDataCollectionFormSaving(isSaving);
+  }, []);
+
+  const onDeleteEventButtonClick = useCallback(() => {
+    deleteConfirmation.current.open();
+  }, []);
+
+  const onDeleteConfirmationConfirm = useCallback(() => {
+    deleteMutate(epiCase);
+  }, [epiCase, deleteMutate]);
+
+  const isSaving = isEpiCaseFormSaving || isEpiCaseDataCollectionFormSaving;
+
+  useEffect(() => {
+    if (isEditingCaseContent) {
+      onTitleChange(t`Case information - Edit`);
+    } else if (isEditingDataCollections) {
+      onTitleChange(t`Case information - Share`);
+    } else {
+      onTitleChange(t`Case information`);
+    }
+  }, [isEditingDataCollections, isEditingCaseContent, onTitleChange, t]);
+
+  useEffect(() => {
+    const actions: DialogAction[] = [];
+
+    if (isEditingCaseContent || isEditingDataCollections) {
+      actions.push({
+        ...TestIdUtil.createAttributes('EpiCaseInfoDialog-goBackButton'),
+        color: 'primary',
+        variant: 'outlined',
+        label: t`Go back`,
+        onClick: onGoBackButtonClick,
+        startIcon: <ArrowLeftIcon />,
+        disabled: isSaving,
+      });
+    }
+
+    if (isEditingCaseContent) {
+      actions.push(
+        {
+          ...TestIdUtil.createAttributes('EpiCaseInfoDialog-saveButton'),
+          color: 'secondary',
+          variant: 'contained',
+          form: valuesFormId,
+          type: 'submit',
+          label: t`Save`,
+          startIcon: <SaveIcon />,
+          disabled: isSaving,
+        },
+      );
+    } else if (isEditingDataCollections) {
+      actions.push(
+        {
+          ...TestIdUtil.createAttributes('EpiCaseInfoDialog-saveButton'),
+          color: 'secondary',
+          variant: 'contained',
+          form: dataCollectionsFormId,
+          type: 'submit',
+          label: t`Save`,
+          startIcon: <SaveIcon />,
+          disabled: isSaving,
+        },
+      );
+    } else {
+      actions.push(
+        {
+          ...TestIdUtil.createAttributes('EpiCaseSetInfoDialog-deleteButton'),
+          color: 'primary',
+          variant: 'outlined',
+          onClick: onDeleteEventButtonClick,
+          label: t`Delete`,
+          startIcon: <DeleteIcon />,
+          disabled: !canDelete(),
+        },
+      );
+      actions.push(
+        {
+          ...TestIdUtil.createAttributes('EpiCaseInfoDialog-editDataCollectionsButton'),
+          color: 'primary',
+          variant: 'outlined',
+          onClick: onShareButtonClick,
+          label: t`Share`,
+          startIcon: <ShareIcon />,
+          disabled: !canShare,
+        },
+      );
+      actions.push(
+        {
+          ...TestIdUtil.createAttributes('EpiCaseInfoDialog-editCaseContentButton'),
+          color: 'primary',
+          variant: 'outlined',
+          onClick: onEditButtonClick,
+          label: t`Edit`,
+          startIcon: <EditIcon />,
+          disabled: !canEdit,
+        },
+      );
+    }
+    onActionsChange(actions);
+  }, [onActionsChange, onEditButtonClick, t, isEditingCaseContent, onGoBackButtonClick, onShareButtonClick, isEditingDataCollections, valuesFormId, dataCollectionsFormId, onClose, isSaving, canShare, onDeleteEventButtonClick, canDelete, canEdit]);
+
+  const caseAbacContextValue = useMemo<CaseAbacContext>(() => {
+    return {
+      userDataCollections: dataCollectionsQuery.data,
+      userDataCollectionsMap: dataCollectionsMapQuery.map,
+      userDataCollectionOptions: dataCollectionOptionsQuery.options,
+      itemDataCollectionLinks: [caseDataCollectionLinks],
+      rights: caseRightsQuery.data,
+      createdInDataCollection: epiCase ? dataCollectionsMapQuery.map.get(epiCase.created_in_data_collection_id) : undefined,
+    };
+  }, [dataCollectionsQuery.data, dataCollectionsMapQuery.map, dataCollectionOptionsQuery.options, caseDataCollectionLinks, caseRightsQuery.data, epiCase]);
+
+  if (isRefreshingData) {
+    return (
+      <Spinner
+        inline
+        label={t`Refreshing data`}
+      />
+    );
+  }
+
+  return (
+    <>
+      <ResponseHandler
+        inlineSpinner
+        shouldHideActionButtons
+        error={epiCaseError || caseDataCollectionLinksError}
+        isLoading={epiCaseIsLoading || isCaseDataCollectionLinksLoading}
+        loadables={loadables}
+      >
+        <CaseAbacContextProvider caseAbac={caseAbacContextValue}>
+          <EpiReadOnlyCaseContent
+            epiCase={epiCase}
+            marginBottom={2}
+          />
+          {!isEditingCaseContent && !isEditingDataCollections && (
+            <>
+              <EpiCaseSharingInfo
+                marginBottom={2}
+              />
+              <EpiCaseCaseSetInfo
+                epiCase={epiCase}
+                marginBottom={2}
+              />
+              <EpiCaseContent
+                epiCase={epiCase}
+                marginBottom={2}
+              />
+            </>
+          )}
+          {isEditingCaseContent && (
+            <EpiCaseForm
+              epiCase={epiCase}
+              formId={valuesFormId}
+              onFinish={onFinish}
+              onIsSavingChange={onEpiCaseFormIsSavingChange}
+            />
+          )}
+          {isEditingDataCollections && (
+            <EpiCaseSharingForm
+              epiCase={epiCase}
+              formId={dataCollectionsFormId}
+              onFinish={onFinish}
+              onIsSavingChange={onEpiCaseDataCollectionFormIsSavingChange}
+            />
+          )}
+        </CaseAbacContextProvider>
+      </ResponseHandler>
+      <Confirmation
+        ref={deleteConfirmation}
+        body={t`Are you sure you want to delete the case?`}
+        cancelLabel={t`Cancel`}
+        confirmLabel={t`Delete`}
+        title={t`Delete case?`}
+        onConfirm={onDeleteConfirmationConfirm}
+      />
+    </>
+  );
+}, {
+  testId: 'EpiCaseInfoDialog',
+  maxWidth: 'lg',
+  fullWidth: true,
+});