@gen-epix/ui 1.15.0 → 1.15.2

package/src/pages/EventsDetailPage/EventsDetailPage.tsx

@@ -1,67 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
-import {
-  useEffect,
-  useMemo,
-} from 'react';
-
-import { CaseApi } from '../../api';
-import { EpiDashboard } from '../../components/epi/EpiDashboard';
-import { PageContainer } from '../../components/ui/PageContainer';
-import { ResponseHandler } from '../../components/ui/ResponseHandler';
-import { useCaseTypeMapQuery } from '../../dataHooks/useCaseTypesQuery';
-import { useArray } from '../../hooks/useArray';
-import { useItemQuery } from '../../hooks/useItemQuery';
-import { useUpdateBreadcrumb } from '../../hooks/useUpdateBreadcrumb';
-import { QUERY_KEY } from '../../models/query';
-import { TestIdUtil } from '../../utils/TestIdUtil';
-
-export const EventsDetailPage = () => {
-  const { t } = useTranslation();
-  const { caseSetId, slug } = useParams();
-
-  const caseTypeMapQuery = useCaseTypeMapQuery();
-  const updateBreadcrumb = useUpdateBreadcrumb('Event');
-
-  const caseSetQuery = useItemQuery({
-    baseQueryKey: QUERY_KEY.CASE_SETS,
-    itemId: caseSetId,
-    useQueryOptions: {
-      queryFn: async ({ signal }) => (await CaseApi.instance.caseSetsGetOne(caseSetId, { signal })).data,
-    },
-  });
-
-  const title = useMemo(() => {
-    if (!caseSetQuery.data) {
-      return t`Event`;
-    }
-    const caseTypeName = caseTypeMapQuery.isLoading || !caseTypeMapQuery.map.has(caseSetQuery.data.case_type_id) ? '⌛' : caseTypeMapQuery.map.get(caseSetQuery.data.case_type_id).name;
-
-    return `${caseSetQuery.data.name} (${caseTypeName})`;
-  }, [caseSetQuery.data, caseTypeMapQuery.isLoading, caseTypeMapQuery.map, t]);
-
-  useEffect(() => {
-    updateBreadcrumb(title);
-  }, [title, updateBreadcrumb]);
-
-  const loadables = useArray([caseTypeMapQuery, caseSetQuery]);
-
-  return (
-    <PageContainer
-      fullHeight
-      fullWidth
-      showBreadcrumbs
-      testIdAttributes={TestIdUtil.createAttributes('EventsDetailPage', { 'case-set-id': caseSetId, slug })}
-      title={title}
-    >
-      <ResponseHandler
-        loadables={loadables}
-      >
-        <EpiDashboard
-          caseSet={caseSetQuery.data}
-          caseTypeId={caseSetQuery.data?.case_type_id}
-        />
-      </ResponseHandler>
-    </PageContainer>
-  );
-};

package/src/pages/EventsDetailPage/index.ts

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

package/src/pages/EventsPage/EventsPage.tsx

@@ -1,262 +0,0 @@
-import {
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Box,
-  Button,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-  useTheme,
-} from '@mui/material';
-import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
-
-import CollectionIcon from '../../assets/icons/CollectionIcon.svg?react';
-import type {
-  CaseSet,
-  CaseStats,
-} from '../../api';
-import { CaseApi } from '../../api';
-import { ConfigManager } from '../../classes/managers/ConfigManager';
-import { RouterManager } from '../../classes/managers/RouterManager';
-import type { EpiCaseSetInfoDialogRefMethods } from '../../components/epi/EpiCaseSetInfoDialog';
-import { EpiCaseSetInfoDialog } from '../../components/epi/EpiCaseSetInfoDialog';
-import type { EpiCreateEventDialogRefMethods } from '../../components/epi/EpiCreateEventDialog';
-import { EpiCreateEventDialog } from '../../components/epi/EpiCreateEventDialog';
-import { PageContainer } from '../../components/ui/PageContainer';
-import { ResponseHandler } from '../../components/ui/ResponseHandler';
-import {
-  TableMenu,
-  TableCaption,
-  TableSidebarMenu,
-  Table,
-} from '../../components/ui/Table';
-import { useCaseSetCategoryOptionsQuery } from '../../dataHooks/useCaseSetCategoriesQuery';
-import { useCaseSetStatsMapQuery } from '../../dataHooks/useCaseSetStatsQuery';
-import { useCaseSetStatusOptionsQuery } from '../../dataHooks/useCaseSetStatusesQuery';
-import { useCaseTypeOptionsQuery } from '../../dataHooks/useCaseTypesQuery';
-import { useInitializeTableStore } from '../../hooks/useInitializeTableStore';
-import { useArray } from '../../hooks/useArray';
-import { QUERY_KEY } from '../../models/query';
-import type {
-  TableRowParams,
-  TableColumn,
-} from '../../models/table';
-import {
-  createTableStore,
-  TableStoreContextProvider,
-} from '../../stores/tableStore';
-import { CaseSetUtil } from '../../utils/CaseSetUtil';
-import { QueryUtil } from '../../utils/QueryUtil';
-import { TableUtil } from '../../utils/TableUtil';
-import { TestIdUtil } from '../../utils/TestIdUtil';
-import { DATE_FORMAT } from '../../data/date';
-import { useQueryMemo } from '../../hooks/useQueryMemo';
-
-type Row = CaseSet & CaseStats;
-
-export const EventsPage = () => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const caseTypeOptionsQuery = useCaseTypeOptionsQuery();
-  const caseSetCategoryOptionsQuery = useCaseSetCategoryOptionsQuery();
-  const caseSetStatusOptionsQuery = useCaseSetStatusOptionsQuery();
-  const epiCaseSetInfoDialogRef = useRef<EpiCaseSetInfoDialogRefMethods>(null);
-  const epiCreateEventDialogRef = useRef<EpiCreateEventDialogRefMethods>(null);
-
-  const { isLoading: isCaseSetsLoading, error: caseSetsError, data: caseSets } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SETS),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.caseSetsGetAll({ signal });
-      return response.data;
-    },
-  });
-  const caseSetStatsMapQuery = useCaseSetStatsMapQuery(caseSets ? caseSets.map(cs => cs.id) : null);
-  const loadables = useArray([caseTypeOptionsQuery, caseSetCategoryOptionsQuery, caseSetStatusOptionsQuery, caseSetStatsMapQuery]);
-
-  const navigateToEvent = useCallback(async (row: CaseSet) => {
-    await RouterManager.instance.router.navigate(CaseSetUtil.createCaseSetLink(row));
-  }, []);
-
-  const showEventInformation = useCallback((row: CaseSet) => {
-    epiCaseSetInfoDialogRef.current?.open({
-      caseSetId: row.id,
-      caseTypeId: row.case_type_id,
-    });
-  }, []);
-
-  const onRowClick = useCallback(async (tableRowParams: TableRowParams<Row>) => {
-    await navigateToEvent(tableRowParams.row);
-  }, [navigateToEvent]);
-
-  const onIndexCellClick = useCallback((row: CaseSet) => {
-    showEventInformation(row);
-  }, [showEventInformation]);
-
-  const onCreateItemButtonClick = useCallback(() => {
-    epiCreateEventDialogRef.current?.open({});
-  }, []);
-
-  const data = useMemo<Row[]>(() => {
-    if (!caseSets || !caseSetStatsMapQuery.map) {
-      return [];
-    }
-    return caseSets.map(caseSet => {
-      return {
-        ...caseSetStatsMapQuery.map?.get(caseSet.id),
-        ...caseSet,
-      } satisfies Row;
-    });
-  }, [caseSetStatsMapQuery.map, caseSets]);
-
-  const columns = useMemo<TableColumn<Row>[]>(() => {
-    return [
-      TableUtil.createReadableIndexColumn({
-        getAriaLabel: (params: TableRowParams<Row>) => t('Open event information for {{name}}', { name: params.row.name }),
-      }),
-      TableUtil.createOptionsColumn({ id: 'case_type_id', name: t`Case type`, options: caseTypeOptionsQuery.options, flex: 1.5, shouldFilterOptions: true }),
-      TableUtil.createTextColumn({ id: 'name', name: t`Name`, flex: 1.5 }),
-      TableUtil.createOptionsColumn({ id: 'case_set_category_id', name: t`Category`, options: caseSetCategoryOptionsQuery.options, flex: 0.4 }),
-      TableUtil.createOptionsColumn({ id: 'case_set_status_id', name: t`Status`, options: caseSetStatusOptionsQuery.options, flex: 0.4 }),
-      TableUtil.createDateColumn({ id: 'first_case_date', name: t`First case date`, dateFormat: DATE_FORMAT.DATE }),
-      TableUtil.createDateColumn({ id: 'last_case_date', name: t`Last case date`, dateFormat: DATE_FORMAT.DATE }),
-      TableUtil.createDateColumn({ id: 'created_at', name: t`Created on` }),
-      TableUtil.createNumberColumn({ id: 'n_cases', name: t`Cases`, flex: 0.35 }),
-      TableUtil.createNumberColumn({ id: 'n_own_cases', name: t`Own cases`, flex: 0.35 }),
-      TableUtil.createActionsColumn({
-        t,
-        getActions: (params) => {
-          return [
-            (
-              <MenuItem
-                key={'actions1'}
-                // eslint-disable-next-line react/jsx-no-bind
-                onClick={async () => onRowClick(params)}
-              >
-                <ListItemIcon>
-                  <ArrowCircleRightIcon />
-                </ListItemIcon>
-                <ListItemText>
-                  {t`Go to event`}
-                </ListItemText>
-              </MenuItem>
-            ),
-            (
-              <MenuItem
-                key={'actions2'}
-                // eslint-disable-next-line react/jsx-no-bind
-                onClick={() => showEventInformation(params.row)}
-              >
-                <ListItemIcon>
-                  <CollectionIcon />
-                </ListItemIcon>
-                <ListItemText>
-                  {t`Show event information`}
-                </ListItemText>
-              </MenuItem>
-            ),
-          ];
-        },
-      }),
-    ];
-  }, [caseSetCategoryOptionsQuery.options, caseSetStatusOptionsQuery.options, caseTypeOptionsQuery.options, onRowClick, showEventInformation, t]);
-
-  const tableStore = useMemo(() => createTableStore<Row>({
-    navigatorFunction: RouterManager.instance.router.navigate,
-    defaultSortByField: 'created_at',
-    defaultSortDirection: 'desc',
-    idSelectorCallback: (row) => row.id,
-    storageNamePostFix: 'caseSets',
-    storageVersion: 3,
-  }), []);
-
-  useInitializeTableStore({ store: tableStore, columns, rows: data, createFiltersFromColumns: true });
-
-  const contentActions = useMemo(() => {
-    const isLoading = loadables.some(loadable => loadable.isLoading);
-    return (
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: theme.spacing(1),
-        }}
-      >
-        <TableMenu />
-        <Button
-          color={'secondary'}
-          disabled={isLoading}
-          loading={isLoading}
-          size={'small'}
-          variant={'contained'}
-          onClick={onCreateItemButtonClick}
-        >
-          {t`Create event`}
-        </Button>
-      </Box>
-    );
-  }, [loadables, onCreateItemButtonClick, t, theme]);
-
-  const getRowName = useCallback((row: Row) => {
-    return row.name;
-  }, []);
-
-  return (
-    <TableStoreContextProvider store={tableStore}>
-      <PageContainer
-        fullWidth
-        showBreadcrumbs
-        contentActions={contentActions}
-        contentHeader={(
-          <TableCaption
-            caption={t`Events`}
-            component={'h2'}
-            variant={'h2'}
-          />
-        )}
-        testIdAttributes={TestIdUtil.createAttributes('EventsPage')}
-        title={t`Events`}
-      >
-        <Box
-          sx={{
-            position: 'relative',
-            height: '100%',
-          }}
-        >
-          <ResponseHandler
-            error={caseSetsError}
-            isLoading={isCaseSetsLoading}
-            loadables={loadables}
-          >
-
-            <TableSidebarMenu />
-            <Box
-              sx={{
-                width: '100%',
-                height: '100%',
-                paddingLeft: theme.spacing(ConfigManager.instance.config.layout.SIDEBAR_MENU_WIDTH + 1),
-              }}
-            >
-              <Table
-                getRowName={getRowName}
-                onReadableIndexClick={onIndexCellClick}
-                onRowClick={onRowClick}
-              />
-            </Box>
-
-          </ResponseHandler>
-          <EpiCaseSetInfoDialog
-            ref={epiCaseSetInfoDialogRef}
-            showNavigationButton
-          />
-          <EpiCreateEventDialog
-            ref={epiCreateEventDialogRef}
-          />
-        </Box>
-      </PageContainer>
-    </TableStoreContextProvider>
-  );
-};

package/src/pages/EventsPage/index.ts

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

package/src/pages/HomePage/HomePage.tsx

@@ -1,47 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Box } from '@mui/material';
-
-import { ConfigManager } from '../../classes/managers/ConfigManager';
-import { PageContainer } from '../../components/ui/PageContainer';
-import { TestIdUtil } from '../../utils/TestIdUtil';
-import { HomePageTrends } from '../../components/ui/HomePageTrends';
-
-
-const HomeContent = () => {
-  const { HomePageIntroduction } = ConfigManager.instance.config;
-
-  return (
-    <Box
-      sx={{
-        display: 'grid',
-        gap: 2,
-        gridTemplateRows: 'auto max-content',
-        height: '100%',
-      }}
-    >
-      <Box
-        sx={{
-          display: 'grid',
-          gap: 2,
-          gridTemplateColumns: '1fr 1fr',
-        }}
-      >
-        <HomePageIntroduction />
-      </Box>
-      <HomePageTrends />
-    </Box>
-  );
-};
-
-export const HomePage = () => {
-  const { t } = useTranslation();
-
-  return (
-    <PageContainer
-      testIdAttributes={TestIdUtil.createAttributes('HomePage')}
-      title={t`Home`}
-    >
-      <HomeContent />
-    </PageContainer>
-  );
-};

package/src/pages/HomePage/index.ts

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

package/src/pages/IdentifierIssuersAdminPage/IdentifierIssuersAdminPage.tsx

@@ -1,106 +0,0 @@
-import {
-  useCallback,
-  useMemo,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  object,
-  string,
-} from 'yup';
-
-import type { IdentifierIssuer } from '../../api';
-import {
-  CommandName,
-  OrganizationApi,
-} from '../../api';
-import type { FormFieldDefinition } from '../../models/form';
-import { FORM_FIELD_DEFINITION_TYPE } from '../../models/form';
-import { QUERY_KEY } from '../../models/query';
-import type { TableColumn } from '../../models/table';
-import { TableUtil } from '../../utils/TableUtil';
-import { TestIdUtil } from '../../utils/TestIdUtil';
-import { CrudPage } from '../CrudPage';
-
-type FormFields = Pick<IdentifierIssuer, 'code' | 'description' | 'name'>;
-
-export const IdentifierIssuersAdminPage = () => {
-  const { t } = useTranslation();
-
-
-  const fetchAll = useCallback(async (signal: AbortSignal) => {
-    return (await OrganizationApi.instance.identifierIssuersGetAll({ signal }))?.data;
-  }, []);
-
-  const deleteOne = useCallback(async (item: IdentifierIssuer) => {
-    return await OrganizationApi.instance.identifierIssuersDeleteOne(item.id);
-  }, []);
-
-  const updateOne = useCallback(async (variables: FormFields, item: IdentifierIssuer) => {
-    return (await OrganizationApi.instance.identifierIssuersPutOne(item.id, { id: item.id, ...variables })).data;
-  }, []);
-
-  const createOne = useCallback(async (variables: FormFields) => {
-    return (await OrganizationApi.instance.identifierIssuersPostOne(variables)).data;
-  }, []);
-
-  const getName = useCallback((item: IdentifierIssuer) => {
-    return item.name;
-  }, []);
-
-  const schema = useMemo(() => {
-    return object<FormFields>().shape({
-      name: string().extendedAlphaNumeric().required().max(100),
-      code: string().code().required().max(100),
-      description: string().freeFormText().required().max(100),
-    });
-  }, []);
-
-  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
-    return [
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
-        name: 'name',
-        label: t`Name`,
-      } as const satisfies FormFieldDefinition<FormFields>,
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
-        name: 'description',
-        label: t`Description`,
-        multiline: true,
-        rows: 5,
-      } as const satisfies FormFieldDefinition<FormFields>,
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
-        name: 'code',
-        label: t`Code`,
-      } as const satisfies FormFieldDefinition<FormFields>,
-    ] as const;
-  }, [t]);
-
-  const tableColumns = useMemo((): TableColumn<IdentifierIssuer>[] => {
-    return [
-      TableUtil.createTextColumn<IdentifierIssuer>({ id: 'code', name: t`Code` }),
-      TableUtil.createTextColumn<IdentifierIssuer>({ id: 'name', name: t`Name` }),
-    ];
-  }, [t]);
-
-  return (
-    <CrudPage<FormFields, IdentifierIssuer>
-      createOne={createOne}
-      crudCommandType={CommandName.IdentifierIssuerCrudCommand}
-      createItemDialogTitle={t`Create new identifier issuer`}
-      defaultSortByField={'code'}
-      defaultSortDirection={'asc'}
-      deleteOne={deleteOne}
-      fetchAll={fetchAll}
-      formFieldDefinitions={formFieldDefinitions}
-      getName={getName}
-      resourceQueryKeyBase={QUERY_KEY.IDENTIFIER_ISSUERS}
-      schema={schema}
-      tableColumns={tableColumns}
-      testIdAttributes={TestIdUtil.createAttributes('IdentifierIssuersAdminPage')}
-      title={t`Identifier Issuers`}
-      updateOne={updateOne}
-    />
-  );
-};

package/src/pages/IdentifierIssuersAdminPage/index.ts

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