@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/epi/EpiCompletCaseTypeLoader/EpiCompletCaseTypeLoader.tsx

@@ -0,0 +1,87 @@
+import { Box } from '@mui/material';
+import type { PropsWithChildren } from 'react';
+import {
+  useEffect,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { CompleteCaseType } from '../../../api';
+import { CaseApi } from '../../../api';
+import { useItemQuery } from '../../../hooks/useItemQuery';
+import { QUERY_KEY } from '../../../models/query';
+import { AxiosUtil } from '../../../utils/AxiosUtil';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import { EpiDataManager } from '../../../classes/managers/EpiDataManager';
+
+
+export type EpiCompletCaseTypeLoaderProps = PropsWithChildren<{
+  readonly caseTypeId: string;
+  readonly onCompleteCaseTypeLoaded?: (completeCaseType: CompleteCaseType) => void;
+}>;
+
+export const EpiCompletCaseTypeLoader = ({ caseTypeId, onCompleteCaseTypeLoaded, children }: EpiCompletCaseTypeLoaderProps) => {
+  const { t } = useTranslation();
+  const [isSideEffectLoading, setIsSideEffectLoading] = useState(true);
+  const [sideEffectError, setSideEffectError] = useState<Error>();
+
+  const { isLoading: isCompleteCaseTypeLoading, error: completeCaseTypeError, data: completeCaseType } = useItemQuery({
+    baseQueryKey: QUERY_KEY.COMPLETE_CASE_TYPES,
+    itemId: caseTypeId,
+    useQueryOptions: {
+      queryFn: async ({ signal }) => {
+        return (await CaseApi.instance.completeCaseTypesGetOne(caseTypeId, { signal })).data;
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (completeCaseType && onCompleteCaseTypeLoaded) {
+      onCompleteCaseTypeLoaded(completeCaseType);
+    }
+  }, [completeCaseType, onCompleteCaseTypeLoaded]);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    if (completeCaseType) {
+      const perform = async () => {
+        try {
+          await Promise.all([
+            EpiDataManager.instance.loadConcepts(abortController.signal),
+            EpiDataManager.instance.loadMissingRegions(completeCaseType, abortController.signal),
+            EpiDataManager.instance.loadTreeAlgorithms(completeCaseType, abortController.signal),
+            EpiDataManager.instance.loadOrganizations(abortController.signal),
+          ]);
+          setIsSideEffectLoading(false);
+        } catch (error) {
+          if (!AxiosUtil.isAxiosCanceledError(error)) {
+            setSideEffectError(error as Error);
+          }
+        }
+      };
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      perform();
+    }
+    return () => {
+      abortController.abort();
+    };
+  }, [completeCaseType]);
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        width: '100%',
+        position: 'relative',
+      }}
+    >
+      <ResponseHandler
+        error={completeCaseTypeError || sideEffectError}
+        isLoading={isCompleteCaseTypeLoading || isSideEffectLoading}
+        loadingMessage={t`Loading case type`}
+      >
+        {children}
+      </ResponseHandler>
+    </Box>
+  );
+};

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

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

package/src/components/epi/EpiContactDetailsDialog/EpiContactDetailsDialog.tsx

@@ -0,0 +1,151 @@
+import { useTranslation } from 'react-i18next';
+import {
+  Box,
+  Card,
+  CardContent,
+  Link,
+  Typography,
+} from '@mui/material';
+import type { ReactElement } from 'react';
+import {
+  useEffect,
+  useMemo,
+} from 'react';
+
+import { OrganizationApi } from '../../../api';
+import type {
+  WithDialogRenderProps,
+  WithDialogRefMethods,
+} from '../../../hoc/withDialog';
+import { withDialog } from '../../../hoc/withDialog';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import { useArray } from '../../../hooks/useArray';
+
+export interface EpiContactDetailsDialogOpenProps {
+  organizationId: string;
+  organizationName: string;
+}
+
+export interface EpiContactDetailsDialogProps extends WithDialogRenderProps<EpiContactDetailsDialogOpenProps> {
+  //
+}
+
+export type EpiContactDetailsDialogRefMethods = WithDialogRefMethods<EpiContactDetailsDialogProps, EpiContactDetailsDialogOpenProps>;
+
+export const EpiContactDetailsDialog = withDialog<EpiContactDetailsDialogProps, EpiContactDetailsDialogOpenProps>((
+  {
+    onTitleChange,
+    openProps,
+  }: EpiContactDetailsDialogProps,
+): ReactElement => {
+  const { t } = useTranslation();
+
+  const queryKey = useMemo(() => {
+    return ['contacts', openProps.organizationId];
+  }, [openProps.organizationId]);
+
+  const organizationContactsQuery = useQueryMemo({
+    queryKey,
+    queryFn: async ({ signal }) => {
+      const response = await OrganizationApi.instance.retrieveOrganizationContacts({
+        organization_id: openProps.organizationId,
+      }, { signal });
+      return response.data;
+    },
+  });
+
+  useEffect(() => {
+    onTitleChange(t('{{organizationName}} contact details', { organizationName: openProps.organizationName }));
+  }, [openProps.organizationName, onTitleChange, t]);
+
+  const loadables = useArray([organizationContactsQuery]);
+
+  return (
+    <Box>
+      <ResponseHandler loadables={loadables}>
+        {!organizationContactsQuery.data?.contacts?.length && (
+          <Box>
+            {t`No contact details found for this organization`}
+          </Box>
+        )}
+        {organizationContactsQuery?.data?.sites?.map(site => {
+          const siteContacts = organizationContactsQuery.data?.contacts?.filter(c => c.site_id === site.id);
+
+          return (
+            <Box
+              key={site.id}
+              marginBottom={2}
+            >
+              <Typography
+                variant={'h5'}
+              >
+                {site.name}
+              </Typography>
+              {siteContacts.length === 0 && (
+                <Typography
+                  component={'div'}
+                >
+                  {t`No contact details found for this site`}
+                </Typography>
+              )}
+              {siteContacts.length > 0 && (
+                <Box
+                  sx={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: 2,
+                  }}
+                >
+                  {siteContacts.map(contact => (
+                    <Card
+                      key={contact.id}
+                      square
+                      elevation={2}
+                    >
+                      <CardContent>
+                        <Typography
+                          component={'div'}
+                          variant={'h6'}
+                        >
+                          {contact.name}
+                        </Typography>
+                        <Box>
+                          {contact.email && (
+                            <Link href={`mailto:${contact.email}`}>
+                              {contact.email}
+                            </Link>
+                          )}
+                          {!contact.email && (
+                            <Typography
+                              component={'div'}
+                              variant={'body1'}
+                            >
+                              {t`Email address: unknown`}
+                            </Typography>
+                          )}
+                        </Box>
+                        <Typography
+                          component={'div'}
+                          variant={'body1'}
+                        >
+                          {contact.phone ? contact.phone : t`Phone number: unknown`}
+                        </Typography>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </Box>
+              )}
+
+            </Box>
+          );
+        })}
+      </ResponseHandler>
+    </Box>
+  );
+}, {
+  testId: 'EpiContactDetailsDialog',
+  maxWidth: 'md',
+  fullWidth: true,
+  defaultTitle: '',
+});

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

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

package/src/components/epi/EpiContextMenu/EpiContextMenu.tsx

@@ -0,0 +1,155 @@
+import type { PopoverPosition } from '@mui/material';
+import {
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import PlaylistAddCheckIcon from '@mui/icons-material/PlaylistAddCheck';
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+import PlaylistRemoveIcon from '@mui/icons-material/PlaylistRemove';
+import PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay';
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { CaseSelectionUtil } from '../../../utils/CaseSelectionUtil';
+
+export type EpiContextMenuConfigWithAnchor = {
+  anchorElement?: Element;
+  parseIdsFromAnchorElement?: (element: Element) => string[];
+  mouseEvent?: MouseEvent;
+};
+
+export type EpiContextMenuConfigWithPosition = {
+  position?: PopoverPosition;
+  caseIds?: string[];
+  mouseEvent?: MouseEvent;
+};
+
+type EpiContextMenuConfig = EpiContextMenuConfigWithAnchor & EpiContextMenuConfigWithPosition;
+
+export type EpiContextMenuProps = {
+  readonly onMenuClose: () => void;
+  readonly config: EpiContextMenuConfig;
+  readonly getExtraItems?: (onMenuClose?: () => void) => ReactElement;
+};
+
+export const EpiContextMenu = ({ config, onMenuClose, getExtraItems }: EpiContextMenuProps) => {
+  const { t } = useTranslation();
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const selectedIds = useStore(epiDashboardStore, (state) => state.selectedIds);
+  const setSelectedIds = useStore(epiDashboardStore, (state) => state.setSelectedIds);
+
+  const componentCaseIds = useMemo(() => {
+    if (config?.parseIdsFromAnchorElement) {
+      return config.parseIdsFromAnchorElement(config.anchorElement);
+    }
+    if (config?.caseIds) {
+      return config.caseIds;
+    }
+    return [];
+  }, [config]);
+
+  useEffect(() => {
+    const mouseEvent = config?.mouseEvent;
+    if (!mouseEvent || (!mouseEvent.metaKey && !mouseEvent.ctrlKey)) {
+      return;
+    }
+    if (CaseSelectionUtil.canAddToSelection(componentCaseIds, selectedIds)) {
+      setSelectedIds(CaseSelectionUtil.addComponentCaseIdsToSelection(componentCaseIds, selectedIds));
+      onMenuClose();
+      return;
+    }
+    if (CaseSelectionUtil.canRemoveFromSelection(componentCaseIds, selectedIds)) {
+      setSelectedIds(CaseSelectionUtil.removeComponentCaseIdsFromSelection(componentCaseIds, selectedIds));
+      onMenuClose();
+      return;
+    }
+  }, [componentCaseIds, config?.mouseEvent, selectedIds, setSelectedIds, onMenuClose]);
+
+
+  const onMenuSelectClick = useCallback(() => {
+    setSelectedIds(componentCaseIds);
+    onMenuClose();
+  }, [componentCaseIds, onMenuClose, setSelectedIds]);
+
+  const onAddToSelectionMenuItemClick = useCallback(() => {
+    setSelectedIds(CaseSelectionUtil.addComponentCaseIdsToSelection(componentCaseIds, selectedIds));
+    onMenuClose();
+  }, [componentCaseIds, onMenuClose, setSelectedIds, selectedIds]);
+
+  const onRemoveFromSelectionMenuItemClick = useCallback(() => {
+    setSelectedIds(CaseSelectionUtil.removeComponentCaseIdsFromSelection(componentCaseIds, selectedIds));
+    onMenuClose();
+  }, [componentCaseIds, onMenuClose, setSelectedIds, selectedIds]);
+
+  const onRefineSelectionMenuItemClick = useCallback(() => {
+    setSelectedIds(CaseSelectionUtil.refineSelectionWithComponentCaseIds(componentCaseIds, selectedIds));
+    onMenuClose();
+  }, [componentCaseIds, onMenuClose, setSelectedIds, selectedIds]);
+
+  const extraItems = getExtraItems ? getExtraItems(onMenuClose) : null;
+
+  return (
+    <Menu
+      anchorEl={config?.anchorElement}
+      anchorPosition={config?.position}
+      anchorReference={config?.anchorElement ? 'anchorEl' : 'anchorPosition'}
+      open={!!config}
+      onClose={onMenuClose}
+    >
+      {extraItems}
+      <MenuItem
+        onClick={onMenuSelectClick}
+      >
+        <ListItemIcon>
+          <PlaylistAddCheckIcon fontSize={'small'} />
+        </ListItemIcon>
+        <ListItemText>
+          {t`Select rows`}
+        </ListItemText>
+      </MenuItem>
+      <MenuItem
+        disabled={!CaseSelectionUtil.canAddToSelection(componentCaseIds, selectedIds)}
+        onClick={onAddToSelectionMenuItemClick}
+      >
+        <ListItemIcon>
+          <PlaylistAddIcon fontSize={'small'} />
+        </ListItemIcon>
+        <ListItemText>
+          {t`Add to selected rows`}
+        </ListItemText>
+      </MenuItem>
+      <MenuItem
+        disabled={!CaseSelectionUtil.canRemoveFromSelection(componentCaseIds, selectedIds)}
+        onClick={onRemoveFromSelectionMenuItemClick}
+      >
+        <ListItemIcon>
+          <PlaylistRemoveIcon fontSize={'small'} />
+        </ListItemIcon>
+        <ListItemText>
+          {t`Remove from selected rows`}
+        </ListItemText>
+      </MenuItem>
+      <MenuItem
+        disabled={!CaseSelectionUtil.canRefineSelection(componentCaseIds, selectedIds)}
+        onClick={onRefineSelectionMenuItemClick}
+      >
+        <ListItemIcon>
+          <PlaylistPlayIcon fontSize={'small'} />
+        </ListItemIcon>
+        <ListItemText>
+          {t`Refine selected rows (intersect)`}
+        </ListItemText>
+      </MenuItem>
+    </Menu>
+  );
+};

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

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