Add edit button in local unit view modal

Author: shreeyash07

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

@@ -3,6 +3,7 @@ import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
 import { ConfirmButton } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
+import { _cs } from '@togglecorp/fujs';
 
 import usePermissions from '#hooks/domain/usePermissions';
 import useAlert from '#hooks/useAlert';
@@ -95,7 +96,9 @@ function LocalUnitValidateButton(props: Props) {
 
     return (
         <ConfirmButton
-            className={styles.localUnitValidateButton}
+            className={_cs(isValidated
+                ? styles.localUnitValidatedButton
+                : styles.localUnitValidateButton)}
             // NOTE sending an empty post request to validate the local unit
             name={null}
             spacing="compact"

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

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

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

@@ -72,6 +72,7 @@
         "otherMedicalHeal": "Other medical heal",
         "otherProfiles": "Other profiles",
         "commentsNS": "Comments by the NS",
-        "submitButtonLabel": "Submit"
+        "submitButtonLabel": "Submit",
+        "editButtonLabel": "Edit"
     }
 }

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

@@ -108,6 +108,7 @@ function FormColumnContainer(props: FormColumnContainerProps) {
 interface Props {
     readOnly?: boolean;
     onSuccess?: () => void;
+    onEditButtonClick?: () => void;
     localUnitId?: number;
     actionsContainerRef?: RefObject<HTMLDivElement>;
     headingDescriptionRef?: RefObject<HTMLDivElement>;
@@ -118,6 +119,7 @@ function LocalUnitsForm(props: Props) {
     const {
         readOnly = false,
         onSuccess,
+        onEditButtonClick,
         localUnitId,
         actionsContainerRef,
         headingDescriptionRef,
@@ -387,6 +389,14 @@ 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,6 +1,7 @@
 import {
     useCallback,
     useRef,
+    useState,
 } from 'react';
 import { Modal } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -12,27 +13,34 @@ import styles from './styles.module.css';
 
 interface Props {
     localUnitId?: number;
-    readOnly?: boolean;
+    viewMode?: boolean;
     onClose: (requestDone?: boolean) => void;
 }
 
 function LocalUnitsFormModal(props: Props) {
     const {
         onClose,
         localUnitId,
-        readOnly,
+        viewMode = false,
     } = 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],
     );
 
+    const handleEditButtonClick = useCallback(
+        () => { setReadOnly(false); },
+        [],
+    );
+
     return (
         <Modal
             className={styles.localUnitsFormModal}
@@ -58,6 +66,7 @@ function LocalUnitsFormModal(props: Props) {
                 localUnitId={localUnitId}
                 onSuccess={handleSuccess}
                 readOnly={readOnly}
+                onEditButtonClick={handleEditButtonClick}
                 actionsContainerRef={actionsContainerRef}
                 headingDescriptionRef={headingDescriptionRef}
                 headerDescriptionRef={headerDescriptionRef}

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

@@ -105,7 +105,7 @@ function LocalUnitsTableActions(props: Props) {
                 <LocalUnitsFormModal
                     onClose={handleLocalUnitsFormModalClose}
                     localUnitId={localUnitId}
-                    readOnly={showLocalUnitViewModal}
+                    viewMode={showLocalUnitViewModal}
                 />
             )}
         </>