Add presentation mode in local unit map

Author: shreeyash07

.changeset/old-mirrors-double.md

@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Add presentation mode in local units map

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json

@@ -5,6 +5,7 @@
         "failedMessage": "Failed to add local unit",
         "updateMessage": "Local unit updated successfully!",
         "updateFailedMessage": "Failed to update local unit",
+        "healthCareDetails": "Health care details",
         "subtype": "Sub-type",
         "subtypeDescription": "(e.g. hospital)",
         "englishLabel": "English",

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx

@@ -648,7 +648,7 @@ function LocalUnitsForm(props: Props) {
                 </Container>
                 {value.type === TYPE_HEALTH_CARE && (
                     <Container
-                        heading="Health care details"
+                        heading={strings.healthCareDetails}
                         withHeaderBorder
                         contentViewType="vertical"
                         childrenContainerClassName={styles.healthCareDetailsContent}
@@ -982,22 +982,22 @@ function LocalUnitsForm(props: Props) {
                                 error={healthFormError?.other_profiles}
                             />
                         </LocalUnitInputSection>
+                        <LocalUnitInputSection
+                            title={strings.commentsNS}
+                            numPreferredColumns={1}
+                        >
+                            <TextArea
+                                name="feedback"
+                                value={value.health?.feedback}
+                                onChange={onHealthFieldChange}
+                                readOnly={readOnly}
+                                error={getErrorString(
+                                    healthFormError?.feedback,
+                                )}
+                            />
+                        </LocalUnitInputSection>
                     </Container>
                 )}
-                <Container
-                    heading={strings.commentsNS}
-                    withHeaderBorder
-                >
-                    <TextArea
-                        name="feedback"
-                        value={value.health?.feedback}
-                        onChange={onHealthFieldChange}
-                        readOnly={readOnly}
-                        error={getErrorString(
-                            healthFormError?.feedback,
-                        )}
-                    />
-                </Container>
             </Container>
             {!readOnly
                 && isDefined(submitButtonContainerRef)

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/schema.ts

@@ -73,6 +73,7 @@ const schema: LocalUnitsFormSchema = {
                 required: true,
             },
             date_of_data: { required: true },
+            source_loc: {},
             source_en: {},
             address_en: {
                 validations: [lengthSmallerThanCondition(200)],
@@ -153,11 +154,12 @@ const schema: LocalUnitsFormSchema = {
                                 },
                                 hospital_type: {},
                                 specialized_medical_beyond_primary_level: { required: true },
+                                primary_health_care_center: {},
                                 other_services: {
                                     validations: [lengthSmallerThanCondition(200)],
                                 },
                                 blood_services: { required: true },
-                                professional_training_facilities: { forceValue: [] },
+                                professional_training_facilities: { defaultValue: [] },
                                 general_medical_services: { required: true },
                                 speciality: {
                                     validations: [lengthSmallerThanCondition(200)],

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/i18n.json

@@ -10,6 +10,7 @@
         "localUnitLocalUnitType": "Local Unit Type",
         "localUnitHealthFacilityType": "Health Facility Type",
         "localUnitLegendHealthCareTitle": "Health Care Local Units",
+        "presentationModeButton":"Presentation Mode",
         "localUnitDetailEmail": "Email"
     }
 }

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx

@@ -1,10 +1,12 @@
 import react, { useMemo } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
+    ArtboardLineIcon,
     LocationIcon,
     MailIcon,
 } from '@ifrc-go/icons';
 import {
+    Button,
     Container,
     LegendItem,
     List,
@@ -99,7 +101,16 @@ function emailKeySelector(email: string) {
     return email;
 }
 
-function LocalUnitsMap() {
+interface Props {
+    onPresentationModeButtonClick?: () => void;
+    presentationMode?: boolean;
+}
+
+function LocalUnitsMap(props: Props) {
+    const {
+        onPresentationModeButtonClick,
+        presentationMode = false,
+    } = props;
     const { countryResponse } = useOutletContext<CountryOutletContext>();
 
     const {
@@ -347,7 +358,7 @@ function LocalUnitsMap() {
             className={styles.localUnitsMap}
             contentViewType="vertical"
             withGridViewInFilter
-            filters={(
+            filters={!presentationMode && (
                 <Filters
                     value={rawFilter}
                     setFieldValue={setFilterField}
@@ -468,6 +479,17 @@ function LocalUnitsMap() {
                         </MapPopup>
                     )}
                 </BaseMap>
+                {onPresentationModeButtonClick && !presentationMode && (
+                    <Button
+                        className={styles.presentationModeButton}
+                        name={undefined}
+                        icons={<ArtboardLineIcon />}
+                        onClick={onPresentationModeButtonClick}
+                        variant="secondary"
+                    >
+                        {strings.presentationModeButton}
+                    </Button>
+                )}
                 {hasContactDetails && (
                     <Container
                         className={styles.contactDetail}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/styles.module.css

@@ -2,6 +2,12 @@
     .map-container-with-contact-details {
         position: relative;
 
+        .presentation-mode-button {
+            position: absolute;
+            top: var(--go-ui-spacing-md);
+            left: var(--go-ui-spacing-md);
+        }
+
         .map-container {
             height: 45rem;
         }

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx

@@ -98,13 +98,15 @@ function LocalUnitsTableActions(props: Props) {
                             type="button"
                             name={localUnitId}
                             onClick={setShowLocalUnitViewModalTrue}
+                            disabled={!hasValidatePermission}
                         >
                             {strings.localUnitsView}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                             type="button"
                             name={localUnitId}
                             onClick={setShowLocalUnitEditModalTrue}
+                            disabled={!hasValidatePermission}
                         >
                             {strings.localUnitsEdit}
                         </DropdownMenuItem>

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/i18n.json

@@ -6,6 +6,7 @@
         "localUnitDetailType": "Type",
         "localUnitsMapView": "Map view",
         "localUnitsListView": "List view",
-        "addLocalUnitLabel": "Add a Local Unit"
+        "addLocalUnitLabel": "Add a Local Unit",
+        "closePresentationLabel": "Close"
     }
 }

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/index.tsx

@@ -1,11 +1,15 @@
 import {
     useCallback,
+    useEffect,
+    useRef,
     useState,
 } from 'react';
 import { useOutletContext } from 'react-router-dom';
+import { CloseLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Container,
+    IconButton,
     Tab,
     TabList,
     TabPanel,
@@ -15,7 +19,11 @@ import {
     useBooleanState,
     useTranslation,
 } from '@ifrc-go/ui/hooks';
-import { _cs } from '@togglecorp/fujs';
+import {
+    _cs,
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import useAuth from '#hooks/domain/useAuth';
 import usePermissions from '#hooks/domain/usePermissions';
@@ -41,15 +49,36 @@ function NationalSocietyLocalUnits(props: Props) {
     const { isAuthenticated } = useAuth();
     const { countryResponse } = useOutletContext<CountryOutletContext>();
     const { isSuperUser, isCountryAdmin } = usePermissions();
+    const containerRef = useRef<HTMLDivElement>(null);
 
     // NOTE: key is used to refresh the page when local unit data is updated
     const [localUnitUpdateKey, setLocalUnitUpdateKey] = useState(0);
+    const [
+        presentationMode,
+        setFullScreenMode,
+    ] = useState(false);
 
     const [showAddEditModal, {
         setTrue: setShowAddEditModalTrue,
         setFalse: setShowAddEditModalFalse,
     }] = useBooleanState(false);
 
+    const handleFullScreenChange = useCallback(() => {
+        setFullScreenMode(isDefined(document.fullscreenElement));
+    }, [setFullScreenMode]);
+
+    const handleFullScreenToggleClick = useCallback(() => {
+        if (isNotDefined(containerRef.current)) {
+            return;
+        }
+        const { current: viewerContainer } = containerRef;
+        if (!presentationMode && isDefined(viewerContainer?.requestFullscreen)) {
+            viewerContainer?.requestFullscreen();
+        } else if (presentationMode && isDefined(document.exitFullscreen)) {
+            document.exitFullscreen();
+        }
+    }, [presentationMode]);
+
     const handleLocalUnitFormModalClose = useCallback(
         () => {
             setShowAddEditModalFalse();
@@ -62,6 +91,14 @@ function NationalSocietyLocalUnits(props: Props) {
 
     const hasAddLocalUnitPermission = isCountryAdmin(countryResponse?.id) || isSuperUser;
 
+    useEffect(() => {
+        document.addEventListener('fullscreenchange', handleFullScreenChange);
+
+        return (() => {
+            document.removeEventListener('fullscreenchange', handleFullScreenChange);
+        });
+    }, [handleFullScreenChange]);
+
     return (
         <Tabs
             onChange={setActiveTab}
@@ -91,9 +128,27 @@ function NationalSocietyLocalUnits(props: Props) {
                 )}
             >
                 <TabPanel name="map">
-                    <LocalUnitsMap
-                        key={localUnitUpdateKey}
-                    />
+                    <Container
+                        className={_cs(presentationMode && styles.presentationMode)}
+                        containerRef={containerRef}
+                        actions={presentationMode && (
+                            <IconButton
+                                name={undefined}
+                                onClick={handleFullScreenToggleClick}
+                                title={strings.closePresentationLabel}
+                                variant="secondary"
+                                ariaLabel={strings.closePresentationLabel}
+                            >
+                                <CloseLineIcon />
+                            </IconButton>
+                        )}
+                    >
+                        <LocalUnitsMap
+                            key={localUnitUpdateKey}
+                            onPresentationModeButtonClick={handleFullScreenToggleClick}
+                            presentationMode={presentationMode}
+                        />
+                    </Container>
                 </TabPanel>
                 <TabPanel name="table">
                     <LocalUnitsTable