Merge pull request #759 from bcgov/AppDetailsPage

App details page

Author: jaspalsingh-aot

cats-frontend/src/app/components/navigation/dto/SideNav.ts

@@ -74,6 +74,7 @@ const roleBasedSideBarList: Record<string, SideNav[]> = {
     createSideNav("Manage", true, null, "/", [
       createSideNav("People", false, icons.folios, "/people"),
       createSideNav("Organizations", false, icons.purchases, "/purchases"),
+      createSideNav("Application", false, icons.folios, "/application"),
     ]),
   ],
   public: [],

cats-frontend/src/app/components/navigation/navigationpills/INavigationPills.ts

@@ -1,8 +1,6 @@
 import { ReactNode } from 'react';
 
 export interface INavigationPills {
-  items: string[];
-  dropdownItems?: any;
   isDisable?: boolean;
   components?: any;
 }

cats-frontend/src/app/components/navigation/navigationpills/NavigationPills.tsx

@@ -1,84 +1,128 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import './NavigationPills.css';
 import { INavigationPills } from './INavigationPills';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import Actions from '../../action/Actions';
+import { Button } from '../../button/Button';
 
 const NavigationPills: React.FC<INavigationPills> = ({
-  items,
   components,
-  dropdownItems,
   isDisable,
 }) => {
-  const [activeIndex, setActiveIndex] = useState<number>(0);
+  const [activeTabKey, setactiveTabKey] = useState<string>(components[0].value);
 
   const location = useLocation();
 
   useEffect(() => {
     if (location?.search !== '') {
-      const componentIndex = components.findIndex(
-        (item: any) => item.key === location?.search.replace('?', ''),
+      const component = components.find(
+        (item: any) => item.value === location?.search.replace('?', ''),
       );
 
-      if (componentIndex > -1) {
-        handlePillClick(componentIndex);
+      if (component !== null) {
+        handlePillClick(component.value);
       }
     }
-  }, [location]);
+  }, [location, components]);
 
-  const handlePillClick = (index: number) => {
-    setActiveIndex(index);
+  const handlePillClick = (tabKey: string) => {
+    setactiveTabKey(tabKey);
+  };
+
+  const getCurrentElementIndex = useCallback(() => {
+    const currentComponentIndex = components.findIndex(
+      (tab: any) => tab.value === activeTabKey,
+    );
+
+    return currentComponentIndex;
+  }, [components, activeTabKey]);
+
+  const isActiveTabFirstPosition = () => {
+    return getCurrentElementIndex() === 0;
+  };
+
+  const isActiveTabLastPosition = () => {
+    return getCurrentElementIndex() + 1 === components.length;
+  };
+
+  const getNextElement = () => {
+    const currentComponentindex = getCurrentElementIndex();
+    return components[currentComponentindex + 1].value;
+  };
+
+  const getPreviousElement = () => {
+    const currentComponentindex = getCurrentElementIndex();
+    return components[currentComponentindex - 1].value;
   };
 
   return (
     <div className="pt-5">
-      <div className="d-flex d-xxl-flex d-xl-flex gap-2 d-none ">
-        {items.map((item, index) => (
-          <Link
-            key={index}
-            to="#"
-            className={`d-flex gap-2 custom-nav-pill ${isDisable ? 'disabled default' : index === activeIndex ? 'active' : 'enabled'}`}
-            onClick={isDisable ? () => { } : () => handlePillClick(index)}
+      <div className="d-flex d-xxl-flex d-xl-flex gap-2 d-none">
+        {components.map((item: any) => (
+          <Button
+            size="small"
+            disabled={isDisable && item !== activeTabKey}
+            variant={item.value === activeTabKey ? 'primary' : 'tertiary'}
+            onClick={() => handlePillClick(item.value)}
           >
-            {item}
-          </Link>
+            {item.label}
+          </Button>
         ))}
       </div>
-      <div className="d-flex d-xl-none d-lg-flex d-md-flex d-sm-flex d-xs-flex justify-content-between px-2 align-items-center w-100">
+      <div className="d-flex d-xl-none d-lg-flex d-md-flex d-sm-flex d-xs-flex justify-content-between align-items-center w-100">
         <div className="d-flex justify-content-between w-100 flex-column flex-sm-row">
+          <div>
+            <Actions
+              label="Select Page"
+              items={components}
+              onItemClick={
+                isDisable ? () => {} : (value) => handlePillClick(value)
+              }
+              customCssToggleBtn={'custom-nav-btn'}
+              customCssMenu={'custom-nav-action-menu'}
+              disable={isDisable}
+              toggleButtonVariant={'secondary'}
+              // toggleButtonSize={isMobileScreen ? 'medium' : 'small'}
+            />
+          </div>
           <div>
             <div className="d-flex align-items-center">
               <div className="m-0">
                 <span
-                  className={`custom-nav-carousel-left-icon ${activeIndex === 0 ? 'd-none' : ''}`}
+                  className={`custom-nav-carousel-left-icon ${isActiveTabFirstPosition() ? 'd-none' : ''}`}
                   aria-hidden="true"
                   onClick={
                     isDisable
-                      ? () => { }
+                      ? () => {}
                       : () =>
-                        activeIndex > 0 && handlePillClick(activeIndex - 1)
+                          !isActiveTabFirstPosition() &&
+                          handlePillClick(getPreviousElement())
                   }
                 ></span>
               </div>
               <div className="ps-3 pe-2 m-0 p-0 w-100 text-center">
-                {items.map((item, index) => (
-                  <div
-                    key={index}
-                    className={`custom-nav-pill ${index === activeIndex ? 'd-block active' : 'd-none'}`}
-                  >
-                    {item}
-                  </div>
-                ))}
+                {components.map(
+                  (tab: any) =>
+                    tab.value === activeTabKey && (
+                      <Button
+                        // size={isMobileScreen ? 'medium' : 'small'}
+                        className="custom-nav-pill"
+                      >
+                        {tab.label}
+                      </Button>
+                    ),
+                )}
               </div>
               <div className="m-0">
                 <span
-                  className={`custom-nav-carousel-right-icon m-0 ${activeIndex === items.length - 1 ? 'd-none' : ''}`}
+                  className={`custom-nav-carousel-right-icon m-0 ${isActiveTabLastPosition() ? 'd-none' : ''}`}
                   aria-hidden="true"
                   onClick={
                     isDisable
-                      ? () => { }
+                      ? () => {}
                       : () =>
-                        activeIndex < items.length - 1 &&
-                        handlePillClick(activeIndex + 1)
+                          !isActiveTabLastPosition() &&
+                          handlePillClick(getNextElement())
                   }
                 ></span>
               </div>
@@ -88,11 +132,12 @@ const NavigationPills: React.FC<INavigationPills> = ({
       </div>
       <div className="mt-4">
         {components &&
-          components?.map((tabComponent: any, index: number) =>
-            index === activeIndex ? (
+          activeTabKey !== '' &&
+          components?.map((tabComponent: { value: string, component: React.ReactNode }, index: number) => {
+            return tabComponent.value === activeTabKey ? (
               <div key={index}>{tabComponent.component}</div>
-            ) : null,
-          )}
+            ) : null;
+          })}
       </div>
     </div>
   );