@gen-epix/ui 1.14.4 → 1.15.0

package/src/pages/OrganizationSitesAdminPage/OrganizationSitesAdminPage.tsx

@@ -0,0 +1,132 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  object,
+  string,
+} from 'yup';
+import { useParams } from 'react-router-dom';
+
+import type { Site } from '../../api';
+import {
+  OrganizationApi,
+  CommandName,
+  PermissionType,
+} 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 type { CrudPageSubPage } from '../CrudPage';
+import { CrudPage } from '../CrudPage';
+import { AuthorizationManager } from '../../classes/managers/AuthorizationManager';
+
+type FormFields = Omit<Site, 'id' | 'organization_id' | 'organization'>;
+
+export const OrganizationSitesAdminPage = () => {
+  const { organizationId } = useParams();
+  const { t } = useTranslation();
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    return (await OrganizationApi.instance.sitesGetAll({ signal })).data;
+  }, []);
+
+  const fetchAllSelect = useCallback((sites: Site[]) => {
+    return sites.filter((site) => site.organization_id === organizationId);
+  }, [organizationId]);
+
+  const updateOne = useCallback(async (variables: FormFields, item: Site) => {
+    return (await OrganizationApi.instance.sitesPutOne(item.id, {
+      id: item.id,
+      name: variables.name,
+      organization_id: organizationId,
+    })).data;
+  }, [organizationId]);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    return (await OrganizationApi.instance.sitesPostOne({
+      name: variables.name,
+      organization_id: organizationId,
+    })).data;
+  }, [organizationId]);
+
+  const deleteOne = useCallback(async (item: Site) => {
+    return await OrganizationApi.instance.sitesDeleteOne(item.id);
+  }, []);
+
+  const getName = useCallback((item: FormFields) => {
+    return item.name;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      name: string().extendedAlphaNumeric().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>,
+    ] as const;
+  }, [t]);
+
+  const tableColumns = useMemo((): TableColumn<Site>[] => {
+    return [
+      TableUtil.createTextColumn<Site>({ id: 'name', name: t`Name`, advancedSort: true }),
+    ];
+  }, [t]);
+
+  const getOptimisticUpdateIntermediateItem = useCallback((variables: FormFields, previousItem: Site): Site => {
+    return {
+      id: previousItem.id,
+      organization_id: previousItem.organization_id,
+      ...variables,
+    };
+  }, []);
+
+  const subPages = useMemo<CrudPageSubPage<Site>[]>(() => {
+    if (!AuthorizationManager.instance.doesUserHavePermission([
+      { command_name: CommandName.ContactCrudCommand, permission_type: PermissionType.READ },
+    ])) {
+      return [];
+    }
+
+    return [
+      {
+        label: t`Manage contacts`,
+        getPathName: (item: Site) => `/management/organizations/${item.organization_id}/sites/${item.id}/contacts`,
+      } satisfies CrudPageSubPage<Site>,
+    ];
+  }, [t]);
+
+  return (
+    <CrudPage<FormFields, Site>
+      createOne={createOne}
+      crudCommandType={CommandName.SiteCrudCommand}
+      createItemDialogTitle={t`Create new site`}
+      defaultSortByField={'name'}
+      defaultSortDirection={'asc'}
+      deleteOne={deleteOne}
+      subPages={subPages}
+      fetchAll={fetchAll}
+      fetchAllSelect={fetchAllSelect}
+      formFieldDefinitions={formFieldDefinitions}
+      getName={getName}
+      getOptimisticUpdateIntermediateItem={getOptimisticUpdateIntermediateItem}
+      resourceQueryKeyBase={QUERY_KEY.SITES}
+      schema={schema}
+      tableColumns={tableColumns}
+      testIdAttributes={TestIdUtil.createAttributes('OrganizationSitesAdminPage')}
+      title={t`Organization Sites`}
+      updateOne={updateOne}
+    />
+  );
+};

package/src/pages/OrganizationSitesAdminPage/index.ts

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

package/src/pages/OrganizationsAdminPage/OrganizationsAdminPage.tsx

@@ -0,0 +1,188 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  array,
+  object,
+  string,
+} from 'yup';
+import omit from 'lodash/omit';
+
+import type {
+  ApiPermission,
+  Organization,
+} from '../../api';
+import {
+  OrganizationApi,
+  CommandName,
+  PermissionType,
+} 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 type { CrudPageSubPage } from '../CrudPage';
+import { CrudPage } from '../CrudPage';
+import { AuthorizationManager } from '../../classes/managers/AuthorizationManager';
+import { useIdentifierIssuerOptionsQuery } from '../../dataHooks/useIdentifierIssuerQuery';
+import { useArray } from '../../hooks/useArray';
+import { useOrganizationIdentifierIssuerLinksQuery } from '../../dataHooks/useOrganizationIdentifierIssuerLinksQuery';
+
+type TableData = Organization & { identifierIssuerIds: string[] };
+
+type FormFields = Pick<TableData, 'name' | 'code' | 'identifierIssuerIds'>;
+
+export const OrganizationsAdminPage = () => {
+  const { t } = useTranslation();
+  const identifierIssuerOptionsQuery = useIdentifierIssuerOptionsQuery();
+  const organizationIdentifierIssuerLinksQuery = useOrganizationIdentifierIssuerLinksQuery();
+
+  const loadables = useArray([identifierIssuerOptionsQuery, organizationIdentifierIssuerLinksQuery]);
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    return (await OrganizationApi.instance.organizationsGetAll({ signal }))?.data;
+  }, []);
+
+  const updateOne = useCallback(async (variables: FormFields, item: Organization) => {
+    await OrganizationApi.instance.organizationsPutIdentifierIssuers(item.id, {
+      organization_identifier_issuer_links: variables.identifierIssuerIds.map(identifier_issuer_id => ({
+        identifier_issuer_id,
+        organization_id: item.id,
+      })),
+    });
+    return (await OrganizationApi.instance.organizationsPutOne(item.id, { id: item.id, ...variables })).data;
+  }, []);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    const resultItem = (await OrganizationApi.instance.organizationsPostOne(omit(variables, ['identifierIssuerIds']))).data;
+    await OrganizationApi.instance.organizationsPutIdentifierIssuers(resultItem.id, {
+      organization_identifier_issuer_links: variables.identifierIssuerIds.map(identifier_issuer_id => ({
+        identifier_issuer_id,
+        organization_id: resultItem.id,
+      })),
+    });
+    return resultItem;
+  }, []);
+
+  const deleteOne = useCallback(async (item: Organization) => {
+    return await OrganizationApi.instance.organizationsDeleteOne(item.id);
+  }, []);
+
+  const getName = useCallback((item: Organization) => {
+    return item.name;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      name: string().extendedAlphaNumeric().required().max(100),
+      code: string().extendedAlphaNumeric().required().max(100),
+      identifierIssuerIds: array().of(string().uuid4()).min(0).required(),
+    });
+  }, []);
+
+  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: 'code',
+        label: t`Code`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TRANSFER_LIST,
+        name: 'identifierIssuerIds',
+        label: t`Identifier issuers`,
+        options: identifierIssuerOptionsQuery.options,
+        loading: identifierIssuerOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const;
+  }, [identifierIssuerOptionsQuery.isLoading, identifierIssuerOptionsQuery.options, t]);
+
+  const tableColumns = useMemo((): TableColumn<TableData>[] => {
+    return [
+      TableUtil.createTextColumn<TableData>({ id: 'name', name: t`Name`, advancedSort: true }),
+      TableUtil.createTextColumn<TableData>({ id: 'code', name: t`Code` }),
+      {
+        type: 'number',
+        id: 'numIdentifierIssuers',
+        textAlign: 'right',
+        valueGetter: (item) => item.row.identifierIssuerIds.length,
+        displayValueGetter: (item) => `${item.row.identifierIssuerIds.length} / ${identifierIssuerOptionsQuery.options.length}`,
+        headerName: t`Identifier issuer count`,
+        widthFlex: 0.5,
+        isInitiallyVisible: true,
+      },
+    ];
+  }, [identifierIssuerOptionsQuery.options.length, t]);
+
+  const subPages = useMemo<CrudPageSubPage<Organization>[]>(() => {
+    if (!AuthorizationManager.instance.doesUserHavePermission([
+      { command_name: CommandName.SiteCrudCommand, permission_type: PermissionType.READ },
+    ])) {
+      return [];
+    }
+
+    return [
+      {
+        label: t`Manage sites`,
+        getPathName: (item: Organization) => `/management/organizations/${item.id}/sites`,
+      } satisfies CrudPageSubPage<Organization>,
+    ];
+  }, [t]);
+
+  const convertToTableData = useCallback((items: Organization[]) => {
+    if (!items || !organizationIdentifierIssuerLinksQuery.data) {
+      return [];
+    }
+    return items.map<TableData>((item) => {
+      const identifierIssuerIds = organizationIdentifierIssuerLinksQuery.data.filter(link => link.organization_id === item.id).map(link => link.identifier_issuer_id);
+      return {
+        ...item,
+        identifierIssuerIds,
+      } satisfies TableData;
+    });
+  }, [organizationIdentifierIssuerLinksQuery.data]);
+
+  const associationQueryKeys = useMemo(() => [
+    [QUERY_KEY.IDENTIFIER_ISSUER_LINKS],
+  ], []);
+
+  const extraPermissions = useMemo<ApiPermission[]>(() => [
+    { command_name: CommandName.OrganizationIdentifierIssuerLinkUpdateAssociationCommand, permission_type: PermissionType.EXECUTE },
+  ], []);
+
+  return (
+    <CrudPage<FormFields, Organization, TableData>
+      associationQueryKeys={associationQueryKeys}
+      convertToTableData={convertToTableData}
+      createOne={createOne}
+      loadables={loadables}
+      crudCommandType={CommandName.OrganizationCrudCommand}
+      createItemDialogTitle={t`Create new organization`}
+      extraCreateOnePermissions={extraPermissions}
+      extraDeleteOnePermissions={extraPermissions}
+      extraUpdateOnePermissions={extraPermissions}
+      defaultSortByField={'name'}
+      defaultSortDirection={'asc'}
+      deleteOne={deleteOne}
+      subPages={subPages}
+      fetchAll={fetchAll}
+      formFieldDefinitions={formFieldDefinitions}
+      getName={getName}
+      resourceQueryKeyBase={QUERY_KEY.ORGANIZATIONS}
+      schema={schema}
+      tableColumns={tableColumns}
+      testIdAttributes={TestIdUtil.createAttributes('OrganizationsAdminPage')}
+      title={t`Organizations`}
+      updateOne={updateOne}
+    />
+  );
+};

package/src/pages/OrganizationsAdminPage/index.ts

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

package/src/pages/OutagesAdminPage/OutagesAdminPage.tsx

@@ -0,0 +1,158 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  boolean,
+  object,
+  string,
+} from 'yup';
+import { isValid } from 'date-fns';
+
+import type {
+  Outage,
+  ApiPermission,
+} from '../../api';
+import {
+  SystemApi,
+  CommandName,
+  PermissionType,
+} 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';
+import { DATE_FORMAT } from '../../data/date';
+
+type FormFields = Pick<Outage, 'description' | 'active_from' | 'active_to' | 'visible_from' | 'visible_to' | 'is_active' | 'is_visible'>;
+
+export const OutagesAdminPage = () => {
+  const { t } = useTranslation();
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    return (await SystemApi.instance.outagesGetAll({ signal }))?.data;
+  }, []);
+
+  const deleteOne = useCallback(async (item: Outage) => {
+    return await SystemApi.instance.outagesDeleteOne(item.id);
+  }, []);
+
+  const updateOne = useCallback(async (variables: FormFields, item: Outage) => {
+    return (await SystemApi.instance.outagesPutOne(item.id, { id: item.id, ...variables })).data;
+  }, []);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    return (await SystemApi.instance.outagesPostOne(variables)).data;
+  }, []);
+
+  const getName = useCallback((item: Outage) => {
+    return item.description;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      description: string().freeFormText().required().max(100),
+      active_from: string().transform((_val: unknown, orig: Date) => isValid(orig) ? orig.toISOString() : undefined),
+      active_to: string().transform((_val: unknown, orig: Date) => isValid(orig) ? orig.toISOString() : undefined),
+      visible_from: string().transform((_val: unknown, orig: Date) => isValid(orig) ? orig.toISOString() : undefined),
+      visible_to: string().transform((_val: unknown, orig: Date) => isValid(orig) ? orig.toISOString() : undefined),
+      is_active: boolean(),
+      is_visible: boolean(),
+    });
+  }, []);
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    return [
+      {
+        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.DATE,
+        name: 'active_from',
+        label: t`Active from`,
+        dateFormat: DATE_FORMAT.DATE_TIME,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.DATE,
+        name: 'active_to',
+        label: t`Active to`,
+        dateFormat: DATE_FORMAT.DATE_TIME,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.DATE,
+        name: 'visible_from',
+        label: t`Visible from`,
+        dateFormat: DATE_FORMAT.DATE_TIME,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.DATE,
+        name: 'visible_to',
+        label: t`Visible to`,
+        dateFormat: DATE_FORMAT.DATE_TIME,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN,
+        name: 'is_active',
+        label: t`Is active`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN,
+        name: 'is_visible',
+        label: t`Is visible`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const;
+  }, [t]);
+
+  const tableColumns = useMemo((): TableColumn<Outage>[] => {
+    return [
+      TableUtil.createDateColumn<Outage>({ id: 'active_from', name: t`Active from`, dateFormat: DATE_FORMAT.DATE_TIME }),
+      TableUtil.createDateColumn<Outage>({ id: 'active_to', name: t`Active to`, dateFormat: DATE_FORMAT.DATE_TIME }),
+      TableUtil.createDateColumn<Outage>({ id: 'visible_from', name: t`Visible from`, dateFormat: DATE_FORMAT.DATE_TIME }),
+      TableUtil.createDateColumn<Outage>({ id: 'visible_to', name: t`Visible to`, dateFormat: DATE_FORMAT.DATE_TIME }),
+      TableUtil.createBooleanColumn<Outage>({ id: 'is_active', name: t`Is active` }),
+      TableUtil.createBooleanColumn<Outage>({ id: 'is_visible', name: t`Is visible` }),
+    ];
+  }, [t]);
+
+
+  const extraCreateOnePermissions = useMemo<ApiPermission[]>(() => [
+    { command_name: CommandName.OutageCrudCommand, permission_type: PermissionType.CREATE },
+  ], []);
+  const extraDeleteOnePermissions = useMemo<ApiPermission[]>(() => [
+    { command_name: CommandName.OutageCrudCommand, permission_type: PermissionType.DELETE },
+  ], []);
+  const extraUpdateOnePermissions = useMemo<ApiPermission[]>(() => [
+    { command_name: CommandName.OutageCrudCommand, permission_type: PermissionType.UPDATE },
+  ], []);
+
+  return (
+    <CrudPage<FormFields, Outage>
+      createOne={createOne}
+      crudCommandType={CommandName.OutageCrudCommand}
+      createItemDialogTitle={t`Create new outage`}
+      defaultSortByField={'active_from'}
+      defaultSortDirection={'asc'}
+      deleteOne={deleteOne}
+      extraCreateOnePermissions={extraCreateOnePermissions}
+      extraDeleteOnePermissions={extraDeleteOnePermissions}
+      extraUpdateOnePermissions={extraUpdateOnePermissions}
+      fetchAll={fetchAll}
+      formFieldDefinitions={formFieldDefinitions}
+      getName={getName}
+      resourceQueryKeyBase={QUERY_KEY.OUTAGES}
+      schema={schema}
+      tableColumns={tableColumns}
+      testIdAttributes={TestIdUtil.createAttributes('OutagesAdminPage')}
+      title={t`Outages`}
+      updateOne={updateOne}
+    />
+  );
+};

package/src/pages/OutagesAdminPage/index.ts

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

package/src/pages/PostLoginPage/PostLoginPage.tsx

@@ -0,0 +1,39 @@
+import type { Path } from 'react-router-dom';
+import { CircularProgress } from '@mui/material';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAuth } from 'react-oidc-context';
+
+import { RouterManager } from '../../classes/managers/RouterManager';
+import { PageContainer } from '../../components/ui/PageContainer';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+import type { AuthState } from '../../models/auth';
+
+export const PostLoginPage = () => {
+  const { t } = useTranslation();
+  const auth = useAuth();
+  const authState = auth.user.state as AuthState;
+
+  useEffect(() => {
+    let path: Partial<Path> = authState?.preLoginLocation;
+    if (!path?.pathname || path.pathname === '/post-login') {
+      path = {
+        pathname: '/',
+      };
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    RouterManager.instance.router.navigate(path);
+  }, [authState?.preLoginLocation]);
+
+  return (
+    <PageContainer
+      ignorePageEvent
+      singleAction
+      testIdAttributes={TestIdUtil.createAttributes('PostLoginPage')}
+      title={t`Logged in`}
+    >
+      <CircularProgress />
+    </PageContainer>
+  );
+};

package/src/pages/PostLoginPage/index.ts

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

package/src/pages/PostLogoutPage/PostLogoutPage.tsx

@@ -0,0 +1,44 @@
+import {
+  Box,
+  Button,
+  Typography,
+} from '@mui/material';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { RouterManager } from '../../classes/managers/RouterManager';
+import { PageContainer } from '../../components/ui/PageContainer';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+
+export const PostLogoutPage = () => {
+  const { t } = useTranslation();
+  const onButtonClick = useCallback(async () => {
+
+    await RouterManager.instance.router.navigate('/');
+  }, []);
+
+  return (
+    <PageContainer
+      singleAction
+      testIdAttributes={TestIdUtil.createAttributes('PostLogoutPage')}
+      title={t`Logged out`}
+    >
+      <Box
+        sx={{
+          textAlign: 'center',
+        }}
+      >
+        <Typography
+          marginBottom={2}
+        >
+          {t`You have been logged out. You may close this window or log in again.`}
+        </Typography>
+        <Button
+          onClick={onButtonClick}
+        >
+          {t`Log in again`}
+        </Button>
+      </Box>
+    </PageContainer>
+  );
+};

package/src/pages/PostLogoutPage/index.ts

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