@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/epi/EpiAddCasesToEventDialog/EpiAddCasesToEventDialog.tsx

@@ -0,0 +1,347 @@
+import {
+  Alert,
+  AlertTitle,
+  Box,
+} from '@mui/material';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  type ReactElement,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import {
+  FormProvider,
+  useForm,
+  useWatch,
+} from 'react-hook-form';
+import noop from 'lodash/noop';
+import { useShallow } from 'zustand/shallow';
+
+import {
+  withDialog,
+  type WithDialogRefMethods,
+  type WithDialogRenderProps,
+} from '../../../hoc/withDialog';
+import { EpiCasesAlreadyInCaseSetWarning } from '../EpiCasesAlreadyInCaseSetWarning';
+import type {
+  Case,
+  CaseSet,
+  TypedUuidSetFilter,
+  CaseSetMember,
+} from '../../../api';
+import { CaseApi } from '../../../api';
+import { useDataCollectionsMapQuery } from '../../../dataHooks/useDataCollectionsQuery';
+import { useEditMutation } from '../../../hooks/useEditMutation';
+import { QUERY_KEY } from '../../../models/query';
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { CaseUtil } from '../../../utils/CaseUtil';
+import { FormUtil } from '../../../utils/FormUtil';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import {
+  useCaseSetOptionsQuery,
+  useCaseSetsMapQuery,
+} from '../../../dataHooks/useCaseSetsQuery';
+import type { DialogAction } from '../../ui/Dialog';
+import { Autocomplete } from '../../form/fields/Autocomplete';
+import { Select } from '../../form/fields/Select';
+import { useArray } from '../../../hooks/useArray';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+import { DataUtil } from '../../../utils/DataUtil';
+
+import { EpiAddCasesToEventDialogSuccessNotificationMessage } from './EpiAddCasesToEventDialogSuccessNotificationMessage';
+
+
+export interface EpiAddCasesToEventDialogOpenProps {
+  rows: Case[];
+  currentCaseSet: CaseSet;
+}
+
+export interface EpiAddCasesToEventDialogProps extends WithDialogRenderProps<EpiAddCasesToEventDialogOpenProps> {
+  //
+}
+
+export type EpiAddCasesToEventDialogRefMethods = WithDialogRefMethods<EpiAddCasesToEventDialogProps, EpiAddCasesToEventDialogOpenProps>;
+
+type FormFields = {
+  caseSetId: string;
+  shouldApplySharingToCases: boolean;
+};
+
+export const EpiAddCasesToEventDialog = withDialog<EpiAddCasesToEventDialogProps, EpiAddCasesToEventDialogOpenProps>((
+  {
+    openProps,
+    onActionsChange,
+    onTitleChange,
+    onClose,
+  }: EpiAddCasesToEventDialogProps,
+): ReactElement => {
+  const { t } = useTranslation();
+
+  const dataCollectionsMapQuery = useDataCollectionsMapQuery();
+  const caseSetOptionsQuery = useCaseSetOptionsQuery();
+  const caseSetsMapQuery = useCaseSetsMapQuery();
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const fetchData = useStore(epiDashboardStore, (state) => state.fetchData);
+  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
+  const similarCaseIds = useStore(epiDashboardStore, useShallow((state) => state.findSimilarCasesResults?.flatMap(result => result.similarCaseIds) ?? []));
+  const formId = useId();
+  const similarCaseIdsInRows = useMemo(() => {
+    return openProps.rows.map(row => row.id).filter(id => similarCaseIds.includes(id));
+  }, [openProps.rows, similarCaseIds]);
+
+  const filteredCaseSetOptions = useMemo(() => (caseSetOptionsQuery.options ?? []).filter(option => {
+    const caseSet = caseSetsMapQuery.map.get(option.value);
+    if (similarCaseIdsInRows.length === 0 && caseSet?.id === openProps.currentCaseSet.id) {
+      return false;
+    }
+
+    if (caseSet.case_type_id !== completeCaseType.id) {
+      return false;
+    }
+
+    return true;
+  }).map(option => {
+    return {
+      ...option,
+      label: option.value === openProps.currentCaseSet.id ? t('{{eventName}} (currently shown event)', { eventName: option.label }) : option.label,
+    };
+  }), [caseSetOptionsQuery.options, caseSetsMapQuery.map, completeCaseType.id, openProps.currentCaseSet.id, similarCaseIdsInRows.length, t]);
+
+  const initialSetSetId = useMemo(() => {
+    if (filteredCaseSetOptions.length === 1) {
+      return filteredCaseSetOptions[0].value;
+    }
+    if (similarCaseIdsInRows.length > 0) {
+      return openProps.currentCaseSet.id;
+    }
+    return null;
+  }, [filteredCaseSetOptions, openProps.currentCaseSet.id, similarCaseIdsInRows.length]);
+
+  const formMethods = useForm<FormFields>({
+    values: {
+      caseSetId: initialSetSetId,
+      shouldApplySharingToCases: true,
+    },
+  });
+
+  const { control } = formMethods;
+  const { caseSetId, shouldApplySharingToCases } = useWatch({ control });
+
+  const caseSetMembersFilter = useMemo<TypedUuidSetFilter>(() => ({
+    invert: false,
+    key: 'case_set_id',
+    type: 'UUID_SET',
+    members: [caseSetId],
+  }), [caseSetId]);
+  const { isLoading: isCaseSetMembersLoading, error: caseSetMembersError, data: caseSetMembers } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SET_MEMBERS, caseSetMembersFilter),
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.caseSetMembersPostQuery(caseSetMembersFilter, { signal });
+      return response.data;
+    },
+    enabled: !!caseSetId,
+  });
+
+  const caseSetDataCollectionLinksFilter = useMemo<TypedUuidSetFilter>(() => ({
+    invert: false,
+    key: 'case_set_id',
+    type: 'UUID_SET',
+    members: [caseSetId],
+  }), [caseSetId]);
+  const { isLoading: isCaseSetDataCollectionLinksLoading, error: caseSetDataCollectionLinksError, data: caseSetDataCollectionLinks } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SET_DATA_COLLECTION_LINKS, caseSetDataCollectionLinksFilter),
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.caseSetDataCollectionLinksPostQuery(caseSetDataCollectionLinksFilter, { signal });
+      return response.data;
+    },
+    enabled: !!caseSetId,
+  });
+
+  const caseSetDataCollections = useMemo(() => {
+    return caseSetDataCollectionLinks?.map(link => dataCollectionsMapQuery.map.get(link.data_collection_id)).filter(x => !!x);
+  }, [caseSetDataCollectionLinks, dataCollectionsMapQuery.map]);
+
+  const caseIdsToAdd = useMemo(() => {
+    return openProps.rows.map(row => row.id).filter(caseId => !(caseSetMembers ?? []).map(x => x.case_id).includes(caseId));
+  }, [caseSetMembers, openProps.rows]);
+
+  const onSuccess = useCallback(async () => {
+    if (shouldApplySharingToCases) {
+      await CaseUtil.applyDataCollectionLinks({
+        caseSetId,
+        caseIds: openProps.rows ? openProps.rows.map(row => row.id) : undefined,
+        caseSetDataCollectionIds: caseSetDataCollectionLinks?.map(link => link.data_collection_id),
+        caseTypeId: completeCaseType.id,
+      });
+    }
+    await fetchData();
+    onClose();
+  }, [caseSetDataCollectionLinks, caseSetId, completeCaseType.id, fetchData, onClose, openProps.rows, shouldApplySharingToCases]);
+
+  const onError = useCallback(async () => {
+    await fetchData();
+    onClose();
+  }, [fetchData, onClose]);
+
+  const { mutate: mutateItems, isMutating: isMutatingItems } = useEditMutation<CaseSetMember[]>({
+    associationQueryKeys: QueryUtil.getQueryKeyDependencies([QUERY_KEY.CASE_SET_MEMBERS], true),
+    queryFn: async (items: CaseSetMember[]) => {
+      await CaseApi.instance.caseSetMembersPostSome(items);
+      return items;
+    },
+    onSuccess,
+    onError,
+    getProgressNotificationMessage: () => t('Adding case(s) to {{caseSetName}}', { caseSetName: caseSetsMapQuery.map.get(caseSetId).name }),
+    getSuccessNotificationMessage: () => (
+      <EpiAddCasesToEventDialogSuccessNotificationMessage
+        caseSet={caseSetsMapQuery.map.get(caseSetId)}
+        numAddedCases={caseIdsToAdd.length}
+      />
+    ),
+    getErrorNotificationMessage: () => t('Failed add case(s) to {{caseSetName}}', { caseSetName: caseSetsMapQuery.map.get(caseSetId).name }),
+  });
+
+  const onConfirmButtonClick = useCallback((() => {
+    mutateItems(caseIdsToAdd.map(caseId => ({
+      case_set_id: caseSetId,
+      case_id: caseId,
+    } satisfies CaseSetMember)));
+  }), [caseIdsToAdd, caseSetId, mutateItems]);
+
+  const onCancelButtonClick = useCallback((() => {
+    onClose();
+  }), [onClose]);
+
+  useEffect(() => {
+    const caseSet = caseSetId ? caseSetsMapQuery.map.get(caseSetId) : null;
+    if (caseSet) {
+      onTitleChange(t('Add {{numCases}} selected case(s) to {{eventName}}', { numCases: openProps.rows.length, eventName: DataUtil.getCaseSetName(caseSet) }));
+      return;
+    }
+    onTitleChange(t('Add {{numCases}} selected case(s) to an existing event', { numCases: openProps.rows.length }));
+  }, [caseSetId, caseSetsMapQuery.map, completeCaseType.name, onTitleChange, openProps.rows.length, t]);
+
+  useEffect(() => {
+    const actions: DialogAction[] = [];
+    actions.push(
+      {
+        ...TestIdUtil.createAttributes('EpiAddCasesToEventDialog-confirmButton'),
+        color: 'secondary',
+        autoFocus: true,
+        variant: 'contained',
+        onClick: onConfirmButtonClick,
+        disabled: (caseSetId && isCaseSetMembersLoading) || !caseSetId || isMutatingItems || caseIdsToAdd.length < 1,
+        loading: (caseSetId && isCaseSetMembersLoading) || isMutatingItems || isCaseSetDataCollectionLinksLoading,
+        label: t`Confirm`,
+        form: formId,
+        type: 'submit',
+      },
+    );
+    onActionsChange(actions);
+  }, [caseSetId, formId, isMutatingItems, isCaseSetMembersLoading, onActionsChange, onCancelButtonClick, onConfirmButtonClick, t, caseIdsToAdd.length, isCaseSetDataCollectionLinksLoading]);
+
+  const loadables = useArray([caseSetOptionsQuery, caseSetsMapQuery, dataCollectionsMapQuery]);
+
+  const booleanOptions = useMemo(() => FormUtil.createBooleanOptions(t), [t]);
+
+  return (
+    <ResponseHandler
+      isLoading={isMutatingItems}
+      loadables={loadables}
+    >
+      <FormProvider {...formMethods}>
+        <form
+          autoComplete={'off'}
+          onSubmit={noop}
+        >
+          <Box>
+            <Box marginY={1}>
+              <Autocomplete
+                label={t`Select event`}
+                name={'caseSetId'}
+                options={filteredCaseSetOptions}
+                warningMessage={filteredCaseSetOptions?.length === 0 ? t`No events of the same case type available` : undefined}
+              />
+            </Box>
+            <Box marginY={1}>
+              <Select
+                disabled={caseSetDataCollectionLinks?.length === 0}
+                label={t`Should the selected cases be given the same access rights as the selected event?`}
+                loading={caseSetDataCollectionLinks?.length && isCaseSetDataCollectionLinksLoading}
+                name={'shouldApplySharingToCases'}
+                options={booleanOptions}
+                warningMessage={caseSetDataCollectionLinks?.length === 0 ? t`No data collections to add` : undefined}
+              />
+            </Box>
+          </Box>
+          {caseSetId && (
+            <Box marginY={2}>
+              <ResponseHandler
+                inlineSpinner
+                shouldHideActionButtons
+                error={caseSetMembersError || caseSetDataCollectionLinksError}
+                isLoading={isCaseSetMembersLoading}
+              >
+                {caseSetDataCollections?.length > 0 && (
+                  <Box marginY={2}>
+                    <Alert severity={'info'}>
+                      <AlertTitle>
+                        {t('The selected event is shared in the following data collection(s):')}
+                      </AlertTitle>
+                      {caseSetDataCollections.map(dataCollection => (
+                        <Box key={dataCollection.id}>
+                          {dataCollection.name}
+                        </Box>
+                      ))}
+                    </Alert>
+                  </Box>
+                )}
+                {caseIdsToAdd.length > 0 && (
+                  <Box marginY={2}>
+                    <Alert severity={'info'}>
+                      <AlertTitle>
+                        {t('{{numCasesToAdd}} selected case(s) will be added to selected the event.', { numCasesToAdd: caseIdsToAdd.length })}
+                        {openProps.rows.length !== caseIdsToAdd.length && (
+                          <Box>
+                            {t('{{numCasesAlreadyInEvent}} selected case(s) are already part of the selected event.', { numCasesAlreadyInEvent: openProps.rows.length - caseIdsToAdd.length })}
+                          </Box>
+                        )}
+                      </AlertTitle>
+                    </Alert>
+                  </Box>
+                )}
+                {caseIdsToAdd.length === 0 && (
+                  <Box marginY={2}>
+                    <Alert severity={'error'}>
+                      <AlertTitle>
+                        {t('All selected case(s) are already part of the selected event.')}
+                      </AlertTitle>
+                    </Alert>
+                  </Box>
+                )}
+                {caseIdsToAdd.length > 0 && (
+                  <Box marginY={2}>
+                    <EpiCasesAlreadyInCaseSetWarning
+                      cases={openProps.rows.filter(row => caseIdsToAdd.includes(row.id))}
+                    />
+                  </Box>
+                )}
+              </ResponseHandler>
+            </Box>
+          )}
+        </form>
+      </FormProvider>
+    </ResponseHandler>
+  );
+}, {
+  testId: 'EpiAddCasesToEventDialog',
+  maxWidth: 'md',
+  fullWidth: true,
+  defaultTitle: '',
+});

package/src/components/epi/EpiAddCasesToEventDialog/EpiAddCasesToEventDialogSuccessNotificationMessage.tsx

@@ -0,0 +1,38 @@
+import { t } from 'i18next';
+import {
+  Box,
+  Link,
+} from '@mui/material';
+import { useCallback } from 'react';
+
+import type { CaseSet } from '../../../api';
+import { RouterManager } from '../../../classes/managers/RouterManager';
+import { CaseSetUtil } from '../../../utils/CaseSetUtil';
+
+export type EpiAddCasesToEventDialogSuccessNotificationMessageProps = {
+  readonly caseSet: CaseSet;
+  readonly numAddedCases: number;
+};
+
+export const EpiAddCasesToEventDialogSuccessNotificationMessage = ({ caseSet, numAddedCases }: EpiAddCasesToEventDialogSuccessNotificationMessageProps) => {
+
+  const onLinkClick = useCallback(async () => {
+    await RouterManager.instance.router.navigate({ pathname: CaseSetUtil.createCaseSetLink(caseSet) });
+  }, [caseSet]);
+
+  return (
+    <Box>
+      <Box>
+        {t('Successfully added {{numAddedCases}} case(s) to event: {{name}}', { numAddedCases, name: caseSet.name })}
+      </Box>
+      <Box marginY={2}>
+        <Link
+          href={'#'}
+          onClick={onLinkClick}
+        >
+          {t('View event: {{name}}', { name: caseSet.name })}
+        </Link>
+      </Box>
+    </Box>
+  );
+};

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

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

package/src/components/epi/EpiBulkEditCaseDialog/EpiBulkEditCaseDialog.tsx

@@ -0,0 +1,61 @@
+import {
+  useEffect,
+  type ReactElement,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  type WithDialogRenderProps,
+  type WithDialogRefMethods,
+  withDialog,
+} from '../../../hoc/withDialog';
+import type { Case } from '../../../api';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import type { DialogAction } from '../../ui/Dialog';
+
+export interface EpiBulkEditCaseDialogOpenProps {
+  rows: Case[];
+}
+
+export interface EpiBulkEditCaseDialogProps extends WithDialogRenderProps<EpiBulkEditCaseDialogOpenProps> {
+  //
+}
+
+export type EpiBulkEditCaseDialogRefMethods = WithDialogRefMethods<EpiBulkEditCaseDialogProps, EpiBulkEditCaseDialogOpenProps>;
+
+export const EpiBulkEditCaseDialog = withDialog<EpiBulkEditCaseDialogProps, EpiBulkEditCaseDialogOpenProps>((
+  {
+    openProps,
+    onActionsChange,
+    onTitleChange,
+    onClose,
+  }: EpiBulkEditCaseDialogProps,
+): ReactElement => {
+  const { t } = useTranslation();
+  console.log({ openProps });
+
+  useEffect(() => {
+    onTitleChange(t`Bulk edit selected cases`);
+  }, [t, onTitleChange]);
+
+  useEffect(() => {
+    const actions: DialogAction[] = [];
+    actions.push({
+      ...TestIdUtil.createAttributes('EpiCaseInfoDialog-closeButton'),
+      color: 'secondary',
+      variant: 'contained',
+      label: t`Close`,
+      onClick: onClose,
+    });
+    onActionsChange(actions);
+  }, [onActionsChange, onClose, t]);
+
+  return (
+    <div />
+  );
+}, {
+  testId: 'EpiBulkEditCaseDialog',
+  maxWidth: 'lg',
+  fullWidth: true,
+  defaultTitle: '',
+});

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

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

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

@@ -0,0 +1,137 @@
+import type { BoxProps } from '@mui/material';
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import type {
+  Case,
+  TypedUuidSetFilter,
+} from '../../../api';
+import { CaseApi } from '../../../api';
+import { useCaseSetCategoryMapQuery } from '../../../dataHooks/useCaseSetCategoriesQuery';
+import { useCaseSetStatusMapQuery } from '../../../dataHooks/useCaseSetStatusesQuery';
+import { QUERY_KEY } from '../../../models/query';
+import { CaseSetUtil } from '../../../utils/CaseSetUtil';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import { NavLink } from '../../ui/NavLink';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import { useArray } from '../../../hooks/useArray';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+
+export type EpiCaseCaseSetInfoProps = {
+  readonly epiCase: Case;
+} & BoxProps;
+
+export const EpiCaseCaseSetInfo = ({ epiCase, ...boxProps }: EpiCaseCaseSetInfoProps) => {
+  const caseSetCategoryMapQuery = useCaseSetCategoryMapQuery();
+  const caseSetStatusMapQuery = useCaseSetStatusMapQuery();
+
+  const { t } = useTranslation();
+  const caseSetMembersFilter: TypedUuidSetFilter = {
+    invert: false,
+    key: 'case_id',
+    type: 'UUID_SET',
+    members: [epiCase.id],
+  };
+  const { isLoading: isCaseSetMembersLoading, error: caseSetMembersError, data: caseSetMembers } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SET_MEMBERS, caseSetMembersFilter),
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.caseSetMembersPostQuery(caseSetMembersFilter, { signal });
+      return response.data;
+    },
+  });
+
+  const caseSetsFilter: TypedUuidSetFilter = {
+    invert: false,
+    key: 'id',
+    type: 'UUID_SET',
+    members: caseSetMembers?.map((caseSetMember) => caseSetMember.case_set_id) ?? [],
+  };
+  const { isLoading: isCaseSetsLoading, error: caseSetsError, data: caseSets } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SETS, caseSetsFilter),
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.caseSetsPostQuery(caseSetsFilter, { signal });
+      return response.data;
+    },
+    enabled: caseSetsFilter.members.length > 0,
+  });
+
+  const loadables = useArray([caseSetCategoryMapQuery, caseSetStatusMapQuery]);
+
+  return (
+    <Box {...boxProps}>
+      <Typography variant={'h6'}>
+        {t`Events`}
+      </Typography>
+      <ResponseHandler
+        inlineSpinner
+        shouldHideActionButtons
+        error={caseSetMembersError || caseSetsError}
+        isLoading={isCaseSetMembersLoading || isCaseSetsLoading}
+        loadables={loadables}
+      >
+        {caseSets?.length > 0 && (
+          <Table size={'small'}>
+            <TableHead>
+              <TableRow>
+                <TableCell
+                  sx={{
+                    width: 'calc(100% * 1/3)',
+                  }}
+                >
+                  {t`Name`}
+                </TableCell>
+                <TableCell
+                  sx={{
+                    width: 'calc(100% * 1/3)',
+                  }}
+                >
+                  {t`Category`}
+                </TableCell>
+                <TableCell
+                  sx={{
+                    width: 'calc(100% * 1/3)',
+                  }}
+                >
+                  {t`Status`}
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {caseSets?.map((caseSet) => (
+                <TableRow key={caseSet.id}>
+                  <TableCell>
+                    <NavLink
+                      activeAsText
+                      to={CaseSetUtil.createCaseSetLink(caseSet)}
+                    >
+                      {caseSet.name}
+                    </NavLink>
+                  </TableCell>
+                  <TableCell>
+                    {caseSetCategoryMapQuery.map.get(caseSet.case_set_category_id)?.name ?? t`Unknown`}
+                  </TableCell>
+                  <TableCell>
+                    {caseSetStatusMapQuery.map.get(caseSet.case_set_status_id)?.name ?? t`Unknown`}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+        {(!caseSets || caseSets?.length === 0) && (
+          <Box sx={{ fontStyle: 'italic' }}>
+            {t`None`}
+          </Box>
+        )}
+      </ResponseHandler>
+    </Box>
+  );
+};