From 0cb483f6f242b80a4e0a57c850b9474ef382c989 Mon Sep 17 00:00:00 2001
From: meetul <meetulrathore98@gmail.com>
Date: Sat, 17 Feb 2024 11:52:39 +0530
Subject: [PATCH] add filters section

---
 .../ActionItemsContainer.tsx                  |   2 +-
 .../OrganizationActionItems.module.css        |  37 +++--
 .../OrganizationActionItems.test.tsx          | 122 +++++++++++++-
 .../OrganizationActionItems.tsx               | 155 +++++++++++-------
 4 files changed, 245 insertions(+), 71 deletions(-)

diff --git a/src/components/ActionItemsContainer/ActionItemsContainer.tsx b/src/components/ActionItemsContainer/ActionItemsContainer.tsx
index a57ad3570f..89f44af711 100644
--- a/src/components/ActionItemsContainer/ActionItemsContainer.tsx
+++ b/src/components/ActionItemsContainer/ActionItemsContainer.tsx
@@ -192,7 +192,7 @@ function actionItemsContainer({
                   {actionItem.actionItemCategory.name}
                 </Col>
                 <Col
-                  className="d-none d-lg-block align-self-center fw-semibold text-body-secondary"
+                  className="p-0 d-none d-lg-block align-self-center fw-semibold text-body-secondary"
                   md={4}
                   lg={3}
                 >
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
index b08b09134e..0e5f844f84 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
@@ -4,7 +4,7 @@
 
 .btnsContainer {
   display: flex;
-  justify-content: space-between;
+  gap: 10px;
 }
 
 .btnsContainer .btnsBlock {
@@ -12,7 +12,7 @@
   gap: 10px;
 }
 
-.btnsContainer .btnsBlock button {
+.btnsContainer button {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,6 +22,12 @@
   min-height: 100vh;
 }
 
+.createActionItemButton {
+  position: absolute;
+  top: 1.3rem;
+  right: 2rem;
+}
+
 .datediv {
   display: flex;
   flex-direction: row;
@@ -47,6 +53,7 @@
 
 .dropdownToggle {
   margin-bottom: 0;
+  display: flex;
 }
 
 .dropdownModalToggle {
@@ -115,6 +122,10 @@ hr {
   flex-direction: column;
 }
 
+.organizationActionItemsContainer h2 {
+  margin: 0.6rem 0;
+}
+
 .preview {
   display: flex;
   flex-direction: row;
@@ -123,6 +134,10 @@ hr {
   color: rgb(80, 80, 80);
 }
 
+.removeFilterIcon {
+  cursor: pointer;
+}
+
 .searchForm {
   display: inline;
 }
@@ -147,21 +162,21 @@ hr {
 @media (max-width: 767px) {
   .btnsContainer {
     margin-bottom: 0;
-    flex-direction: column-reverse;
+    display: flex;
+    flex-direction: column;
   }
 
-  .btnsContainer .btnsBlock {
-    display: block;
-    margin-top: 1rem;
-    margin-right: 0;
+  .btnsContainer .btnsBlock .dropdownToggle {
+    flex-grow: 1;
   }
 
-  .btnsContainer .btnsBlock button {
-    margin-bottom: 1rem;
+  .btnsContainer button {
     width: 100%;
   }
 
-  .dropdown {
-    width: 100%;
+  .createActionItemButton {
+    position: absolute;
+    top: 1rem;
+    right: 2rem;
   }
 }
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
index 7f17daf1bd..d7b829991a 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
@@ -216,6 +216,126 @@ describe('Testing Action Item Categories Component', () => {
     });
   });
 
+  test('applies and then clears filters one by one', async () => {
+    window.location.assign('/organizationActionItems/id=123');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrganizationActionItems />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sortActionItems')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('sortActionItems'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('earliest')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('earliest'));
+
+    // all the action items ordered by earliest first
+    await waitFor(() => {
+      expect(screen.getByTestId('sortActionItems')).toHaveTextContent(
+        translations.earliest
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('selectActionItemStatus'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('activeActionItems')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('activeActionItems'));
+
+    // all the action items that are active
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
+        translations.active
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('selectActionItemStatus'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('completedActionItems')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('completedActionItems'));
+
+    // all the action items that are completed
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
+        translations.completed
+      );
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('selectActionItemCategory')
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('selectActionItemCategory'));
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('actionItemCategory')[0]
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('actionItemCategory')[0]);
+
+    // action items belonging to this action item category
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
+        'ActionItemCategory 1'
+      );
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('clearActionItemCategoryFilter')
+      ).toBeInTheDocument();
+    });
+    // remove the action item category filter
+    userEvent.click(screen.getByTestId('clearActionItemCategoryFilter'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('clearActionItemCategoryFilter')
+      ).not.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('clearActionItemStatusFilter')
+      ).toBeInTheDocument();
+    });
+    // remove the action item status filter
+    userEvent.click(screen.getByTestId('clearActionItemStatusFilter'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
+        translations.status
+      );
+      expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
+        translations.actionItemCategory
+      );
+    });
+  });
+
   test('applies and then clears all the filters', async () => {
     window.location.assign('/organizationActionItems/id=123');
     render(
@@ -297,7 +417,7 @@ describe('Testing Action Item Categories Component', () => {
     });
     userEvent.click(screen.getAllByTestId('actionItemCategory')[0]);
 
-    // action items belonging to this category
+    // action items belonging to this action item category
     await waitFor(() => {
       expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
         'ActionItemCategory 1'
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
index bd13c7ff24..7d59a4b780 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
@@ -195,21 +195,21 @@ function organizationActionItems(): JSX.Element {
     );
 
   return (
-    <>
+    <div className={styles.organizationActionItemsContainer}>
       <OrganizationScreen screenName="Action Items" title={t('title')}>
+        <Button
+          variant="success"
+          onClick={showCreateModal}
+          data-testid="createActionItemBtn"
+          className={styles.createActionItemButton}
+        >
+          <i className={'fa fa-plus me-2'} />
+          {t('createActionItem')}
+        </Button>
         <div className={`${styles.container} bg-white rounded-4 my-3`}>
           <div className={`mt-4 mx-4`}>
             <div className={styles.btnsContainer}>
               <div className={styles.btnsBlock}>
-                <Button
-                  variant="success"
-                  onClick={handleClearFilters}
-                  data-testid="clearFilters"
-                >
-                  <i className="fa fa-broom me-2"></i>
-                  {t('clearFilters')}
-                </Button>
-
                 <Dropdown
                   aria-expanded="false"
                   title="Sort Action Items"
@@ -220,7 +220,9 @@ function organizationActionItems(): JSX.Element {
                     variant="outline-success"
                     data-testid="sortActionItems"
                   >
-                    <SortIcon className={'me-1'} />
+                    <div className="d-none d-md-inline">
+                      <SortIcon className={'me-1'} />
+                    </div>
                     {orderBy === 'Latest' ? t('latest') : t('earliest')}
                   </Dropdown.Toggle>
                   <Dropdown.Menu>
@@ -239,39 +241,6 @@ function organizationActionItems(): JSX.Element {
                   </Dropdown.Menu>
                 </Dropdown>
 
-                <Dropdown
-                  aria-expanded="false"
-                  title="Action Item Categories"
-                  data-testid="actionItemCategories"
-                  className={styles.dropdownToggle}
-                >
-                  <Dropdown.Toggle
-                    variant="outline-success"
-                    data-testid="selectActionItemCategory"
-                    className={
-                      actionItemCategoryId === '' ? '' : 'bg-success text-white'
-                    }
-                  >
-                    {actionItemCategoryName === ''
-                      ? t('actionItemCategory')
-                      : actionItemCategoryName}
-                  </Dropdown.Toggle>
-                  <Dropdown.Menu>
-                    {actionItemCategories?.map((category, index) => (
-                      <Dropdown.Item
-                        key={index}
-                        data-testid="actionItemCategory"
-                        onClick={() => {
-                          setActionItemCategoryId(category._id);
-                          setActionItemCategoryName(category.name);
-                        }}
-                      >
-                        {category.name}
-                      </Dropdown.Item>
-                    ))}
-                  </Dropdown.Menu>
-                </Dropdown>
-
                 <Dropdown
                   aria-expanded="false"
                   title="Action Item Status"
@@ -279,17 +248,15 @@ function organizationActionItems(): JSX.Element {
                   className={styles.dropdownToggle}
                 >
                   <Dropdown.Toggle
-                    variant="outline-success"
-                    data-testid="selectActionItemStatus"
-                    className={
-                      actionItemStatus === '' ? '' : 'bg-success text-white'
+                    variant={
+                      actionItemStatus === '' ? 'outline-success' : 'success'
                     }
+                    data-testid="selectActionItemStatus"
                   >
-                    {actionItemStatus === ''
-                      ? t('status')
-                      : t(
-                          actionItemStatus === 'Active' ? 'active' : 'completed'
-                        )}
+                    <div className="d-lg-none">
+                      {actionItemStatus === '' ? t('status') : actionItemStatus}
+                    </div>
+                    <div className="d-none d-lg-inline">{t('status')}</div>
                   </Dropdown.Toggle>
                   <Dropdown.Menu>
                     <Dropdown.Item
@@ -308,13 +275,85 @@ function organizationActionItems(): JSX.Element {
                 </Dropdown>
               </div>
 
+              <Dropdown
+                aria-expanded="false"
+                title="Action Item Categories"
+                data-testid="actionItemCategories"
+                className={styles.dropdownToggle}
+              >
+                <Dropdown.Toggle
+                  variant={
+                    actionItemCategoryName === ''
+                      ? 'outline-success'
+                      : 'success'
+                  }
+                  data-testid="selectActionItemCategory"
+                >
+                  <div className="d-lg-none">
+                    {actionItemCategoryName === ''
+                      ? t('actionItemCategory')
+                      : actionItemCategoryName}
+                  </div>
+                  <div className="d-none d-lg-inline">
+                    {t('actionItemCategory')}
+                  </div>
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  {actionItemCategories?.map((category, index) => (
+                    <Dropdown.Item
+                      key={index}
+                      data-testid="actionItemCategory"
+                      onClick={() => {
+                        setActionItemCategoryId(category._id);
+                        setActionItemCategoryName(category.name);
+                      }}
+                    >
+                      {category.name}
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
+
+              <div className="d-none d-lg-inline flex-grow-1 d-flex align-items-center border bg-light-subtle rounded-3">
+                {!actionItemCategoryName && !actionItemStatus && (
+                  <div className="lh-lg mt-2 text-center fw-semibold text-body-tertiary">
+                    No Filters
+                  </div>
+                )}
+
+                {actionItemCategoryName !== '' && (
+                  <div className="badge text-bg-secondary bg-dark-subtle lh-lg mt-2 ms-2 text-secondary-emphasis">
+                    {actionItemCategoryName}
+                    <i
+                      className={`${styles.removeFilterIcon} fa fa-times ms-2 text-body-tertiary pe-auto`}
+                      onClick={() => {
+                        setActionItemCategoryName('');
+                        setActionItemCategoryId('');
+                      }}
+                      data-testid="clearActionItemCategoryFilter"
+                    />
+                  </div>
+                )}
+
+                {actionItemStatus !== '' && (
+                  <div className="badge text-bg-secondary bg-dark-subtle lh-lg mt-2 ms-2 text-secondary-emphasis">
+                    {actionItemStatus}
+                    <i
+                      className={`${styles.removeFilterIcon} fa fa-times ms-2 text-body-tertiary pe-auto`}
+                      onClick={() => setActionItemStatus('')}
+                      data-testid="clearActionItemStatusFilter"
+                    />
+                  </div>
+                )}
+              </div>
+
               <Button
                 variant="success"
-                onClick={showCreateModal}
-                data-testid="createActionItemBtn"
+                onClick={handleClearFilters}
+                data-testid="clearFilters"
               >
-                <i className={'fa fa-plus me-2'} />
-                {t('createActionItem')}
+                <i className="fa fa-broom me-2"></i>
+                {t('clearFilters')}
               </Button>
             </div>
           </div>
@@ -342,7 +381,7 @@ function organizationActionItems(): JSX.Element {
         dueDate={dueDate}
         setDueDate={setDueDate}
       />
-    </>
+    </div>
   );
 }