Add local unit modal in map popup

Author: shreeyash07

.changeset/six-hounds-film.md

@@ -0,0 +1,9 @@
+---
+"go-web-app": patch
+---
+
+- Local Units popup, view/edit mode improvements in [#1178](https://github.com/IFRCGo/go-web-app/issues/1178)
+  - Remove ellipsize heading option in local units map popup
+  - Local units title on popup are now clickable that opens up a modal to show details
+  - Added an Edit button to the View Mode for users with edit permissions
+  - Users will now see a **disabled grey button** when the content is already validated

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

@@ -5,8 +5,8 @@
 }
 
 .local-unit-validated-button {
-    background-color: var(--go-ui-color-gray-40);
     border: none;
+    background-color: var(--go-ui-color-gray-40);
 
     .icon {
         font-size: var(--go-ui-height-icon-multiplier);

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

@@ -110,7 +110,7 @@ interface Props {
     onSuccess?: () => void;
     onEditButtonClick?: () => void;
     localUnitId?: number;
-    actionsContainerRef?: RefObject<HTMLDivElement>;
+    actionsContainerRef: RefObject<HTMLDivElement>;
     headingDescriptionRef?: RefObject<HTMLDivElement>;
     headerDescriptionRef: RefObject<HTMLDivElement>;
 }
@@ -316,14 +316,21 @@ function LocalUnitsForm(props: Props) {
 
     return (
         <div className={styles.localUnitsForm}>
-            {!readOnly
-                && isDefined(actionsContainerRef)
-                && isDefined(actionsContainerRef.current)
-                && (
-                    <Portal container={actionsContainerRef.current}>
-                        {submitButton}
-                    </Portal>
-                )}
+            {readOnly && isDefined(actionsContainerRef.current) && (
+                <Portal container={actionsContainerRef.current}>
+                    <Button
+                        name={undefined}
+                        onClick={onEditButtonClick}
+                    >
+                        {strings.editButtonLabel}
+                    </Button>
+                </Portal>
+            )}
+            {!readOnly && isDefined(actionsContainerRef.current) && (
+                <Portal container={actionsContainerRef.current}>
+                    {submitButton}
+                </Portal>
+            )}
             {isDefined(headingDescriptionRef) && isDefined(headingDescriptionRef.current) && (
                 <Portal container={headingDescriptionRef.current}>
                     <div className={styles.lastUpdateLabel}>
@@ -389,14 +396,6 @@ function LocalUnitsForm(props: Props) {
                                             onActionSuccess={onSuccess}
                                             disabled={!pristine}
                                         />
-                                        {readOnly && (
-                                            <Button
-                                                name=""
-                                                onClick={onEditButtonClick}
-                                            >
-                                                {strings.editButtonLabel}
-                                            </Button>
-                                        )}
                                         <LocalUnitValidateButton
                                             countryId={Number(countryId)}
                                             localUnitId={localUnitId}

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

@@ -1,10 +1,10 @@
 import {
     useCallback,
     useRef,
-    useState,
 } from 'react';
 import { Modal } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import { isDefined } from '@togglecorp/fujs';
 
 import LocalUnitsForm from './LocalUnitsForm';
 
@@ -13,32 +13,38 @@ import styles from './styles.module.css';
 
 interface Props {
     localUnitId?: number;
-    viewMode?: boolean;
+    readOnly?: boolean;
+    setReadOnly?: React.Dispatch<React.SetStateAction<boolean>>;
     onClose: (requestDone?: boolean) => void;
 }
 
 function LocalUnitsFormModal(props: Props) {
     const {
         onClose,
         localUnitId,
-        viewMode = false,
+        readOnly,
+        setReadOnly,
     } = props;
 
     const strings = useTranslation(i18n);
     const actionsContainerRef = useRef<HTMLDivElement>(null);
     const headingDescriptionRef = useRef<HTMLDivElement>(null);
     const headerDescriptionRef = useRef<HTMLDivElement>(null);
 
-    const [readOnly, setReadOnly] = useState<boolean>(viewMode);
-
     const handleSuccess = useCallback(
-        () => { onClose(true); },
+        () => {
+            onClose(true);
+        },
         [onClose],
     );
 
     const handleEditButtonClick = useCallback(
-        () => { setReadOnly(false); },
-        [],
+        () => {
+            if (isDefined(setReadOnly)) {
+                setReadOnly(false);
+            }
+        },
+        [setReadOnly],
     );
 
     return (
@@ -49,9 +55,7 @@ function LocalUnitsFormModal(props: Props) {
             size="pageWidth"
             withHeaderBorder
             headingLevel={2}
-            actions={!readOnly && (
-                <div ref={actionsContainerRef} />
-            )}
+            actions={<div ref={actionsContainerRef} />}
             headingContainerClassName={styles.headingContainer}
             headingDescription={
                 <div ref={headingDescriptionRef} />

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

@@ -16,7 +16,10 @@ import {
     List,
     TextOutput,
 } from '@ifrc-go/ui';
-import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
 import {
     numericIdSelector,
     stringNameSelector,
@@ -65,6 +68,7 @@ import {
     VALIDATED,
 } from '../common';
 import type { FilterValue } from '../Filters';
+import LocalUnitsFormModal from '../LocalUnitsFormModal';
 import { TYPE_HEALTH_CARE } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
 
 import i18n from './i18n.json';
@@ -132,6 +136,12 @@ function LocalUnitsMap(props: Props) {
     } = props;
     const { countryResponse } = useOutletContext<CountryOutletContext>();
 
+    const [showLocalUnitModal, {
+        setTrue: setShowLocalUnitViewModalTrue,
+        setFalse: setShowLocalUnitViewModalFalse,
+    }] = useBooleanState(false);
+    const [readOnlyLocalUnitModal, setReadOnlyLocalUnitModal] = useState(true);
+
     const urlQuery = useMemo<GoApiUrlQuery<'/api/v2/public-local-units/'>>(
         () => ({
             limit: MAX_PAGE_LIMIT,
@@ -305,6 +315,22 @@ function LocalUnitsMap(props: Props) {
         [setClickedPointProperties],
     );
 
+    const handleLocalUnitHeadingClick = useCallback(
+        () => {
+            setReadOnlyLocalUnitModal(true);
+            setShowLocalUnitViewModalTrue();
+        },
+        [setShowLocalUnitViewModalTrue],
+    );
+
+    const handleLocalUnitsFormModalClose = useCallback(
+        () => {
+            setShowLocalUnitViewModalFalse();
+            setReadOnlyLocalUnitModal(true);
+        },
+        [setShowLocalUnitViewModalFalse],
+    );
+
     const emailRendererParams = useCallback(
         (_: string, email: string): LinkProps => ({
             className: styles.email,
@@ -417,7 +443,15 @@ function LocalUnitsMap(props: Props) {
                             popupClassName={styles.mapPopup}
                             coordinates={clickedPointProperties.lngLat}
                             onCloseButtonClick={handlePointClose}
-                            heading={localUnitName}
+                            heading={(
+                                <Button
+                                    name=""
+                                    variant="tertiary"
+                                    onClick={handleLocalUnitHeadingClick}
+                                >
+                                    {localUnitName}
+                                </Button>
+                            )}
                             contentViewType="vertical"
                             pending={localUnitDetailPending}
                             errored={isDefined(localUnitDetailError)}
@@ -543,6 +577,14 @@ function LocalUnitsMap(props: Props) {
                     iconElementClassName={styles.legendIcon}
                 />
             )}
+            {(showLocalUnitModal && (
+                <LocalUnitsFormModal
+                    onClose={handleLocalUnitsFormModalClose}
+                    localUnitId={clickedPointProperties?.localUnitId}
+                    readOnly={readOnlyLocalUnitModal}
+                    setReadOnly={setReadOnlyLocalUnitModal}
+                />
+            ))}
         </Container>
     );
 }

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

@@ -1,4 +1,7 @@
-import { useCallback } from 'react';
+import {
+    useCallback,
+    useState,
+} from 'react';
 import { TableActions } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -39,26 +42,37 @@ function LocalUnitsTableActions(props: Props) {
 
     const hasValidatePermission = !isGuestUser && (isSuperUser || isCountryAdmin(countryId));
 
-    const [showLocalUnitViewModal, {
-        setTrue: setShowLocalUnitViewModalTrue,
-        setFalse: setShowLocalUnitViewModalFalse,
-    }] = useBooleanState(false);
+    const [readOnlyLocalUnitModal, setReadOnlyLocalUnitModal] = useState(false);
 
-    const [showLocalUnitEditModal, {
-        setTrue: setShowLocalUnitEditModalTrue,
-        setFalse: setShowLocalUnitEditModalFalse,
+    const [showLocalUnitModal, {
+        setTrue: setShowLocalUnitModalTrue,
+        setFalse: setShowLocalUnitModalFalse,
     }] = useBooleanState(false);
 
     const handleLocalUnitsFormModalClose = useCallback(
         (shouldUpdate?: boolean) => {
-            setShowLocalUnitEditModalFalse();
-            setShowLocalUnitViewModalFalse();
+            setShowLocalUnitModalFalse();
 
             if (shouldUpdate) {
                 onActionSuccess();
             }
         },
-        [setShowLocalUnitViewModalFalse, setShowLocalUnitEditModalFalse, onActionSuccess],
+        [setShowLocalUnitModalFalse, onActionSuccess],
+    );
+
+    const handleViewLocalUnitClick = useCallback(
+        () => {
+            setReadOnlyLocalUnitModal(true);
+            setShowLocalUnitModalTrue();
+        },
+        [setShowLocalUnitModalTrue],
+    );
+    const handleEditLocalUnitClick = useCallback(
+        () => {
+            setReadOnlyLocalUnitModal(false);
+            setShowLocalUnitModalTrue();
+        },
+        [setShowLocalUnitModalTrue],
     );
 
     return (
@@ -70,15 +84,15 @@ function LocalUnitsTableActions(props: Props) {
                         <DropdownMenuItem
                             type="button"
                             name={localUnitId}
-                            onClick={setShowLocalUnitViewModalTrue}
+                            onClick={handleViewLocalUnitClick}
                             disabled={!hasValidatePermission}
                         >
                             {strings.localUnitsView}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                             type="button"
                             name={localUnitId}
-                            onClick={setShowLocalUnitEditModalTrue}
+                            onClick={handleEditLocalUnitClick}
                             disabled={!hasValidatePermission}
                         >
                             {strings.localUnitsEdit}
@@ -101,11 +115,12 @@ function LocalUnitsTableActions(props: Props) {
                     localUnitId={localUnitId}
                 />
             </TableActions>
-            {(showLocalUnitViewModal || showLocalUnitEditModal) && (
+            {showLocalUnitModal && (
                 <LocalUnitsFormModal
                     onClose={handleLocalUnitsFormModalClose}
                     localUnitId={localUnitId}
-                    viewMode={showLocalUnitViewModal}
+                    readOnly={readOnlyLocalUnitModal}
+                    setReadOnly={setReadOnlyLocalUnitModal}
                 />
             )}
         </>