From ed0d92aa9874d85b8b244dcf483229d34cf729c7 Mon Sep 17 00:00:00 2001
From: Sanjeev Lakhwani <lakhwani.sanjeev691@gmail.com>
Date: Wed, 29 Nov 2023 15:24:18 -0500
Subject: [PATCH 1/3] Added show all and hide all functionality

---
 .../Overview/Drawer/ManageChartsDrawer.tsx    | 48 +++++++++++++++++--
 src/js/features/data/data.store.ts            | 31 +++++++++++-
 2 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
index 456f930c..eff27a70 100644
--- a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
+++ b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -1,24 +1,64 @@
 import React from 'react';
 
-import { Drawer, DrawerProps, Typography } from 'antd';
+import { Button, Drawer, DrawerProps, Flex, Space, Typography } from 'antd';
 const { Title } = Typography;
 
 import ChartTree from './ChartTree';
 
 import { ChartDataField } from '@/types/data';
-import { useAppSelector, useTranslationCustom, useTranslationDefault } from '@/hooks';
+import { useAppSelector, useAppDispatch, useTranslationCustom, useTranslationDefault } from '@/hooks';
+import { hideAllSectionCharts, setAllDisplayedCharts } from '@/features/data/data.store';
 
 const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: ManageChartsDrawerProps) => {
   const t = useTranslationCustom();
   const td = useTranslationDefault();
 
+  const dispatch = useAppDispatch();
+
   const sections = useAppSelector((state) => state.data.sections);
 
   return (
-    <Drawer title={td('Manage Charts')} placement="right" onClose={onManageDrawerClose} open={manageDrawerVisible}>
+    <Drawer
+      title={td('Manage Charts')}
+      placement="right"
+      onClose={onManageDrawerClose}
+      open={manageDrawerVisible}
+      extra={
+        <Button
+          size="small"
+          onClick={() => {
+            dispatch(setAllDisplayedCharts({}));
+          }}
+        >
+          Show All
+        </Button>
+      }
+    >
       {sections.map(({ sectionTitle, charts }: { sectionTitle: string; charts: ChartDataField[] }, i: number) => (
         <div key={i}>
-          <Title level={5}>{t(sectionTitle)}</Title>
+          <Flex justify="space-between" align="center" style={{ padding: "10px 0" }}>
+            <Title level={5} style={{ margin: '0' }}>
+              {t(sectionTitle)}
+            </Title>
+            <Space>
+            <Button
+              size="small"
+              onClick={() => {
+                dispatch(setAllDisplayedCharts({ section: sectionTitle }));
+              }}
+            >
+              Show All
+            </Button>
+              <Button
+                size="small"
+                onClick={() => {
+                  dispatch(hideAllSectionCharts({ section: sectionTitle }));
+                }}
+              >
+                Hide All
+              </Button>
+            </Space>
+          </Flex>
           <ChartTree charts={charts} section={sectionTitle} />
         </div>
       ))}
diff --git a/src/js/features/data/data.store.ts b/src/js/features/data/data.store.ts
index 34c697c8..45d3f966 100644
--- a/src/js/features/data/data.store.ts
+++ b/src/js/features/data/data.store.ts
@@ -47,6 +47,28 @@ const data = createSlice({
       const chartObj = state.sections.find((e) => e.sectionTitle === section)!.charts.find((c) => c.id === chart)!;
       chartObj.width = width;
     },
+    setAllDisplayedCharts: (state, { payload }: PayloadAction<{ section?: string }>) => {
+      if (payload.section) {
+        state.sections
+          .find((e) => e.sectionTitle === payload.section)!
+          .charts.forEach((_, ind, arr) => {
+            arr[ind].isDisplayed = true;
+          });
+      } else {
+        state.sections.forEach((section) => {
+          section.charts.forEach((val, ind, arr) => {
+            arr[ind].isDisplayed = true;
+          });
+        });
+      }
+    },
+    hideAllSectionCharts: (state, { payload }: PayloadAction<{ section: string }>) => {
+      state.sections
+        .find((e) => e.sectionTitle === payload.section)!
+        .charts.forEach((_, ind, arr) => {
+          arr[ind].isDisplayed = false;
+        });
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -64,6 +86,13 @@ const data = createSlice({
   },
 });
 
-export const { rearrange, disableChart, setDisplayedCharts, setChartWidth } = data.actions;
+export const {
+  rearrange,
+  disableChart,
+  setDisplayedCharts,
+  setChartWidth,
+  setAllDisplayedCharts,
+  hideAllSectionCharts,
+} = data.actions;
 export { makeGetDataRequestThunk };
 export default data.reducer;

From 5d1fe9e189dccc50b5bf2b646d5563e4002e2a81 Mon Sep 17 00:00:00 2001
From: Sanjeev Lakhwani <lakhwani.sanjeev691@gmail.com>
Date: Wed, 29 Nov 2023 15:33:20 -0500
Subject: [PATCH 2/3] ran prettier

---
 .../Overview/Drawer/ManageChartsDrawer.tsx     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
index eff27a70..0d7203f4 100644
--- a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
+++ b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -36,19 +36,19 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
     >
       {sections.map(({ sectionTitle, charts }: { sectionTitle: string; charts: ChartDataField[] }, i: number) => (
         <div key={i}>
-          <Flex justify="space-between" align="center" style={{ padding: "10px 0" }}>
+          <Flex justify="space-between" align="center" style={{ padding: '10px 0' }}>
             <Title level={5} style={{ margin: '0' }}>
               {t(sectionTitle)}
             </Title>
             <Space>
-            <Button
-              size="small"
-              onClick={() => {
-                dispatch(setAllDisplayedCharts({ section: sectionTitle }));
-              }}
-            >
-              Show All
-            </Button>
+              <Button
+                size="small"
+                onClick={() => {
+                  dispatch(setAllDisplayedCharts({ section: sectionTitle }));
+                }}
+              >
+                Show All
+              </Button>
               <Button
                 size="small"
                 onClick={() => {

From bffd70b341ff014a8ce5bb09baccb9b213450aa7 Mon Sep 17 00:00:00 2001
From: Sanjeev Lakhwani <lakhwani.sanjeev691@gmail.com>
Date: Wed, 29 Nov 2023 15:33:35 -0500
Subject: [PATCH 3/3] added prettier run command

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 53c70d1d..fc12bac5 100755
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "watch": "npx webpack --mode=development --watch",
     "gobuild": "./buildandrun.sh",
     "lint": "npx eslint src/js",
-    "lint-fix": "npx eslint --fix src/js"
+    "lint-fix": "npx eslint --fix src/js",
+    "prettier": "npx prettier --write src/js"
   },
   "keywords": [],
   "author": "",