Create Frontend for View Person

bcgov · Jan 28, 2025 · 8779545 · 8779545
1 parent 9210486
commit 8779545
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 105 deletions.
diff --git a/cats-frontend/src/App.css b/cats-frontend/src/App.css
@@ -57,7 +57,6 @@
 .container {
   display: flex;
   width: 100%;
-  height: 100vh; /* Make sure the container takes full viewport height */
   max-width: none; /* Remove any max-width constraints */
   padding: 0;    /* Remove padding */
   margin: 0;     /* Remove margin */

diff --git a/cats-frontend/src/app/components/navigation-bar/INavigationBar.ts b/cats-frontend/src/app/components/navigation-bar/INavigationBar.ts
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+export interface NavigationBarProps {
+    isVisible: boolean;
+    backButtonText: any;
+    backButtonProps?: any;
+    onClickBackButton?: () => void;
+    navigationBarText?:any;
+    customContainerCss?: string;
+    customNavigationBarTxtCss?: string;
+    customChildernCss?: string;
+    childern?: any;
+  }
diff --git a/cats-frontend/src/app/components/navigation-bar/NavigationBar.css b/cats-frontend/src/app/components/navigation-bar/NavigationBar.css
@@ -0,0 +1,36 @@
+.custom-navigation-bar-header {
+    padding: var(--layout-margin-large) var(--layout-margin-xxlarge)
+      0 var(--layout-margin-xxlarge);
+    gap: var(--layout-margin-xxlarge);
+}
+.custom-navigation-bar-sticky-header {
+    position: -webkit-sticky; /* For Safari */
+    position: sticky;
+    z-index: 999 !important;
+    top: 65px;
+    left: 128px;
+    padding: var(--layout-margin-large) var(--layout-margin-xxlarge)
+      var(--layout-margin-large) var(--layout-margin-xxlarge);
+    gap: var(--layout-margin-xxlarge);
+    background: var(--surface-background-white, #ffffff);
+    border-bottom: 1px solid var(--surface-border-light, #d8d8d8);
+}
+
+@media (max-width: 768px) {
+    .custom-navigation-bar-sticky-header {
+      align-items: flex-start !important;
+    }
+}
+
+.custom-navigation-bar-sticky-header-lbl {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 21.01px;
+    text-align: left;
+    color: var(--typography-color-primary, #2d2d2d);
+}
+
+.custom-navigation-bar-sticky-header-lbl > div > span {
+    font-weight: 400;
+    padding-left: 8px;
+}
diff --git a/cats-frontend/src/app/components/navigation-bar/NavigationBar.tsx b/cats-frontend/src/app/components/navigation-bar/NavigationBar.tsx
@@ -0,0 +1,36 @@
+import { Button } from "../button/Button";
+import { AngleLeft } from "../common/icon";
+import { NavigationBarProps } from "./INavigationBar";
+import './NavigationBar.css';
+
+const NavigationBar: React.FC<NavigationBarProps> = ({
+    isVisible,
+    backButtonText,
+    backButtonProps,
+    navigationBarText,
+    customContainerCss,
+    customNavigationBarTxtCss,
+    customChildernCss,
+    childern,
+    onClickBackButton,
+  }) =>{
+    return (
+        <div className={`d-flex justify-content-between align-items-center ${isVisible ? 'custom-navigation-bar-sticky-header' : 'custom-navigation-bar-header'} w-100 ${customContainerCss ?? ''}`}>
+            <div className="d-flex gap-4 flex-wrap align-items-center">
+                <Button onClick={onClickBackButton} {...backButtonProps}>
+                    <AngleLeft />
+                    {backButtonText}
+                </Button>
+                <div className={`d-flex flex-wrap align-items-center pe-3 custom-navigation-bar-sticky-header-lbl ${customNavigationBarTxtCss ?? ''}`}>
+                { navigationBarText }
+                </div>
+            </div>
+
+            <div className={`d-flex gap-2 justify-align-center pe-2 position-relative ${customChildernCss ?? ''}`}>
+                {childern}
+            </div>
+      </div>
+    );
+}
+
+export default NavigationBar;
diff --git a/cats-frontend/src/app/features/people/person/Person.css b/cats-frontend/src/app/features/people/person/Person.css
@@ -4,12 +4,14 @@
     line-height: 65.38px;
     color: var(--typography-color-primary, #2D2D2D);
 }
+
 .custom-people-lbl {
     font-size: 12px;
     font-weight: 700;
     line-height: 18px;
     color: var(--typography-color-secondary, #474543);
 }
+
 .custom-people-edit-lbl {
     font-size: 12px;
     font-weight: 400;
@@ -31,6 +33,7 @@ a.custom-people-edit-lbl {
     line-height: 27.01px;
     color: var(--typography-color-primary, #2D2D2D);
 }
+
 .custom-people-edit-txt {
     font-size: 16px;
     font-weight: 400;
@@ -45,44 +48,4 @@ a.custom-people-edit-lbl {
 .custom-note-tbl-header {
     text-align: center;
     vertical-align: middle; 
-}
-
-
-/* Header */
-
-.custom-person-header {
-    padding: var(--layout-margin-large) var(--layout-margin-xxlarge)
-      0 var(--layout-margin-xxlarge);
-    gap: var(--layout-margin-xxlarge);
-}
-.custom-person-sticky-header {
-    position: -webkit-sticky; /* For Safari */
-    position: sticky;
-    z-index: 999 !important;
-    top: 65px;
-    left: 128px;
-    padding: var(--layout-margin-large) var(--layout-margin-xxlarge)
-      var(--layout-margin-large) var(--layout-margin-xxlarge);
-    gap: var(--layout-margin-xxlarge);
-    background: var(--surface-background-white, #ffffff);
-    border-bottom: 1px solid var(--surface-border-light, #d8d8d8);
-}
-
-@media (max-width: 768px) {
-    .custom-person-sticky-header {
-      align-items: flex-start !important;
-    }
-}
-
-.custom-person-sticky-header-lbl {
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 21.01px;
-    text-align: left;
-    color: var(--typography-color-primary, #2d2d2d);
-}
-
-.custom-person-sticky-header-lbl > div > span {
-    font-weight: 400;
-    padding-left: 8px;
 }
diff --git a/cats-frontend/src/app/features/people/person/Person.tsx b/cats-frontend/src/app/features/people/person/Person.tsx
@@ -18,6 +18,7 @@ import CustomLabel from "../../../components/simple/CustomLabel";
 import { CancelButton, SaveButton } from "../../../components/simple/CustomButtons";
 import { ActionItems } from "../../../components/action/ActionsConfig";
 import { UserAction } from "../../../helpers/requests/UserAction";
+import NavigationBar from "../../../components/navigation-bar/NavigationBar";
 
 const personFormData = {
     end_date: false,
@@ -154,7 +155,6 @@ const Person = () => {
         });
     };
 
-    useEffect(() => { console.log(formData)}, [formData])
     const handleDeleteNotes = (particIsDelete: boolean = false) => {
         if (particIsDelete) 
         {
@@ -204,71 +204,67 @@ const Person = () => {
       }
     };
 
-    return (
-      <>
-      <div className={`d-flex justify-content-between align-items-center ${isVisible ? 'custom-person-sticky-header' : 'custom-person-header'} w-100`}>
-        <div className="d-flex gap-4 flex-wrap align-items-center">
-          <Button variant="secondary" onClick={onClickBackButton}>
-            <AngleLeft />
-            Back to {fromScreen}
-          </Button>
-          <div className="d-flex flex-wrap align-items-center pe-3 custom-person-sticky-header-lbl">
-          {
-            Object.keys(formData).length > 0 
-            ?
-            isVisible && <div className="d-flex align-items-center">Viewing: <span>{formData?.first_name + ' ' + formData?.last_name}</span></div>
-            :
-            <span>Create New Person</span>
-          }
-          </div>
+    const navigationBarChildern = <>
+        { viewMode === UserMode.Default &&
+          userType === UserType.STAFF &&
+           (
+            <Actions
+              label="Actions"
+              items={ActionItems}
+              onItemClick={handleItemClick}
+            />
+          )
+        }
+        <div className="gap-3 align-items-center d-none d-md-flex d-lg-flex d-xl-flex">
+          {viewMode === UserMode.EditMode && 
+            userType === UserType.STAFF && 
+          (
+            <>
+              <CustomLabel labelType="c-b" label={`${'Edit Mode'}`}/>
+              <SaveButton clickHandler={() => handleItemClick(UserAction.SAVE)}/>
+              <CancelButton variant="secondary" clickHandler={() => handleItemClick(UserAction.CANCEL)} />
+            </>
+          )}
         </div>
+        {viewMode === UserMode.EditMode && (
+          <div className="d-flex d-md-none d-lg-none d-xl-none">
+            <Actions
+              label="Actions"
+              items={[
+                {
+                  label: UserAction.SAVE,
+                  value: UserAction.SAVE,
+                },
+                {
+                  label: UserAction.CANCEL,
+                  value: UserAction.CANCEL,
+                },
+              ]}
+              onItemClick={handleItemClick}
+            />
+          </div>
+        )} 
+    </>
 
-        <div className="d-flex gap-2 justify-align-center pe-2 position-relative">
-           {/* For Action Dropdown*/}
-           { viewMode === UserMode.Default &&
-                userType === UserType.STAFF &&
-                 (
-                  <Actions
-                    label="Actions"
-                    items={ActionItems}
-                    onItemClick={handleItemClick}
-                  />
-                )}
-
-              {/* For Edit */}
-              <div className="gap-3 align-items-center d-none d-md-flex d-lg-flex d-xl-flex">
-                {viewMode === UserMode.EditMode && 
-                  userType === UserType.STAFF && 
-                (
-                  <>
-                    <CustomLabel labelType="c-b" label={`${'Edit Mode'}`}/>
-                    <SaveButton clickHandler={() => handleItemClick(UserAction.SAVE)}
-                      // isDisabled={savedChanges?.length > 0 ? false : true}
-                    />
-                    <CancelButton variant="secondary" clickHandler={() => handleItemClick(UserAction.CANCEL)} />
-                  </>
-                )}
-              </div>
-              {viewMode === UserMode.EditMode && (
-                <div className="d-flex d-md-none d-lg-none d-xl-none">
-                  <Actions
-                    label="Actions"
-                    items={[
-                      {
-                        label: UserAction.SAVE,
-                        value: UserAction.SAVE,
-                      },
-                      {
-                        label: UserAction.CANCEL,
-                        value: UserAction.CANCEL,
-                      },
-                    ]}
-                    onItemClick={handleItemClick}
-                  />
-                </div>
-              )}
-        </div>
-      </div>
+    const navigationBarText = <>
+       {  Object.keys(formData).length > 0 
+          ?
+          isVisible && <div className="d-flex align-items-center">Viewing: <span>{formData?.first_name + ' ' + formData?.last_name}</span></div>
+          :
+          <span>Create New Person</span>
+       }
+    </>
+
+    return (
+      <>
+        <NavigationBar 
+          isVisible={isVisible} 
+          onClickBackButton = {onClickBackButton}
+          backButtonProps={ { variant:"secondary"} } 
+          backButtonText={`Back to ${fromScreen}`}
+          navigationBarText={navigationBarText}
+          childern={navigationBarChildern}
+        />
         <PageContainer role="Person">
             <div className="custom-person-name">
               {