Added TitleManager component to views to add html page titles

folio-org · Nov 3, 2023 · f8250ab · f8250ab
1 parent 065c2dd
commit f8250ab
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 20 deletions.
diff --git a/src/views/AllCalendarView.tsx b/src/views/AllCalendarView.tsx
@@ -6,6 +6,7 @@ import {
   Pane
 } from '@folio/stripes/components';
 import { IfPermission, useStripes } from '@folio/stripes/core';
+import { TitleManager } from '@folio/stripes/core/index.js';
 import React, { FunctionComponent, ReactNode, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import {
@@ -69,8 +70,18 @@ const AllCalendarView: FunctionComponent<Record<string, never>> = () => {
     };
   });
 
+  const calendarName = dataRepository
+    .getCalendars()
+    .filter((c) => c.id === currentRouteId)[0]?.name;
+
+  const pageTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' }) +
+  ' - ' + intl.formatMessage({
+    id: 'ui-calendar.allCalendarView.title'
+  }) + (calendarName ? ` - ${calendarName}` : '');
+
+
   return (
-    <>
+    <TitleManager page={pageTitle}>
       <Pane
         defaultWidth={currentRouteId === undefined ? 'fill' : '20%'}
         paneTitle={<FormattedMessage id="ui-calendar.allCalendarView.title" />}
@@ -214,7 +225,7 @@ const AllCalendarView: FunctionComponent<Record<string, never>> = () => {
         open={showPurgeModal}
         onClose={() => setShowPurgeModal(false)}
       />
-    </>
+    </TitleManager>
   );
 };
 

diff --git a/src/views/CalendarSettings.tsx b/src/views/CalendarSettings.tsx
@@ -1,7 +1,8 @@
 import { ErrorBoundary } from '@folio/stripes/components';
 import { Settings, SettingsProps } from '@folio/stripes/smart-components';
 import React, { FunctionComponent } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { TitleManager } from '@folio/stripes/core/index.js';
 import AllCalendarView from './AllCalendarView';
 import CurrentAssignmentView from './CurrentAssignmentView';
 import MonthlyCalendarPickerView from './MonthlyCalendarPickerView';
@@ -14,6 +15,9 @@ export type CalendarSettingsProps = Omit<
 export const CalendarSettings: FunctionComponent<CalendarSettingsProps> = (
   props: CalendarSettingsProps
 ) => {
+  const intl = useIntl();
+  const paneTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' });
+
   return (
     <ErrorBoundary>
       <Settings
@@ -22,7 +26,11 @@ export const CalendarSettings: FunctionComponent<CalendarSettingsProps> = (
         pages={[
           {
             route: 'all/',
-            label: <FormattedMessage id="ui-calendar.allCalendarView.title" />,
+            label: (
+              <TitleManager page={paneTitle}>
+                <FormattedMessage id="ui-calendar.allCalendarView.title" />
+              </TitleManager>
+            ),
             component: AllCalendarView,
             perm: 'ui-calendar.view'
           },

diff --git a/src/views/CreateEditCalendarLayer.tsx b/src/views/CreateEditCalendarLayer.tsx
@@ -7,6 +7,7 @@ import {
   PaneFooter,
   Paneset,
 } from '@folio/stripes/components';
+import { TitleManager } from '@folio/stripes/core/index.js';
 import React, { FunctionComponent, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import DataRepository from '../data/DataRepository';
@@ -109,18 +110,28 @@ export const CreateEditCalendarLayer: FunctionComponent<
     );
   }
 
+  const pageTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' }) +
+  ' - ' + intl.formatMessage({
+    id:
+      getOpType(props.initialValue, props.isEdit) === OpType.EDIT
+        ? 'ui-calendar.calendarForm.title.edit'
+        : 'ui-calendar.calendarForm.title.create',
+  });
+
   return (
-    <Layer
-      contentLabel={intl.formatMessage({
-        id:
-          getOpType(props.initialValue, props.isEdit) === OpType.EDIT
-            ? 'ui-calendar.calendarForm.title.edit'
-            : 'ui-calendar.calendarForm.title.create',
-      })}
-      isOpen
-    >
-      <Paneset isRoot>{pane}</Paneset>
-    </Layer>
+    <TitleManager page={pageTitle}>
+      <Layer
+        contentLabel={intl.formatMessage({
+          id:
+            getOpType(props.initialValue, props.isEdit) === OpType.EDIT
+              ? 'ui-calendar.calendarForm.title.edit'
+              : 'ui-calendar.calendarForm.title.create',
+        })}
+        isOpen
+      >
+        <Paneset isRoot>{pane}</Paneset>
+      </Layer>
+    </TitleManager>
   );
 };
 export default CreateEditCalendarLayer;
diff --git a/src/views/CurrentAssignmentView.tsx b/src/views/CurrentAssignmentView.tsx
@@ -1,5 +1,6 @@
 import { Button, LoadingPane, Pane, PaneMenu } from '@folio/stripes/components';
 import { IfPermission } from '@folio/stripes/core';
+import { TitleManager } from '@folio/stripes/core/index.js';
 import React, { FunctionComponent, ReactNode, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import {
@@ -34,7 +35,7 @@ export const CurrentAssignmentView: FunctionComponent<
   const history = useHistory();
   const currentRouteId = useRouteMatch<{ servicePointId: string }>(
     '/settings/calendar/active/:servicePointId'
-  )?.params?.servicePointId;
+  )?.params?.servicePointId || '';
 
   if (!dataRepository.isLoaded()) {
     return (
@@ -92,8 +93,14 @@ export const CurrentAssignmentView: FunctionComponent<
     };
   });
 
+  const calendarName = dataRepository.getCalendars().filter((c) => c.assignments.includes(currentRouteId))[0]?.name || '';
+
+  const pageTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' }) + ' - ' + intl.formatMessage({
+    id: 'ui-calendar.currentAssignmentView.title'
+  }) + (calendarName ? ` - ${calendarName}` : '');
+
   return (
-    <>
+    <TitleManager page={pageTitle}>
       <Pane
         paneTitle={
           <FormattedMessage id="ui-calendar.currentAssignmentView.title" />
@@ -226,7 +233,7 @@ export const CurrentAssignmentView: FunctionComponent<
           />
         </Route>
       </Switch>
-    </>
+    </TitleManager>
   );
 };
 

diff --git a/src/views/MonthlyCalendarPickerView.tsx b/src/views/MonthlyCalendarPickerView.tsx
@@ -7,6 +7,7 @@ import {
   NavListSection,
   Pane
 } from '@folio/stripes/components';
+import { TitleManager } from '@folio/stripes/core/index.js';
 import classNames from 'classnames';
 import React, {
   FunctionComponent,
@@ -166,8 +167,13 @@ const MonthlyCalendarPickerView: FunctionComponent<
     );
   });
 
+  const pageTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' }) +
+  ' - ' + intl.formatMessage({
+    id: 'ui-calendar.monthlyCalendarView.title'
+  }) + (currentRouteId ? ` - ${getServicePoint?.name}` : '');
+
   return (
-    <>
+    <TitleManager page={pageTitle}>
       <Pane
         defaultWidth={currentRouteId === undefined ? 'fill' : '20%'}
         paneTitle={
@@ -190,7 +196,7 @@ const MonthlyCalendarPickerView: FunctionComponent<
           requestEvents={requestEvents}
         />
       </Route>
-    </>
+    </TitleManager>
   );
 };
 

diff --git a/translations/ui-calendar/en.json b/translations/ui-calendar/en.json
@@ -1,5 +1,6 @@
 {
   "meta.title": "Calendar",
+  "meta.titleSettings": "Calendar settings",
 
   "midnight": "Midnight",