From 99db3decc5abaf2697d72d2edbed3cb31bc0bbeb Mon Sep 17 00:00:00 2001
From: meetul <meetulrathore98@gmail.com>
Date: Thu, 15 Feb 2024 15:20:54 +0530
Subject: [PATCH] add filters and design adjustments

---
 public/locales/en.json                        |   3 +
 src/GraphQl/Queries/Queries.ts                |  10 ++
 .../ActionItemsContainer.tsx                  | 145 +++++++++---------
 .../ActionItemUpdateModal.tsx                 |   6 +-
 .../OrganizationActionItems.module.css        |  74 +--------
 .../OrganizationActionItems.tsx               | 133 ++++++++++------
 6 files changed, 181 insertions(+), 190 deletions(-)

diff --git a/public/locales/en.json b/public/locales/en.json
index 0d9149dfeb..8986e1e367 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -301,6 +301,9 @@
     "dueDate": "Due Date",
     "completionDate": "Completion Date",
     "isCompleted": "Completed",
+    "active": "Active",
+    "completed": "Completed",
+    "clearFilters": "Clear Filters",
     "status": "Status",
     "latest": "Latest",
     "earliest": "Earliest",
diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
index 8a25f2d3f8..9435dc6a18 100644
--- a/src/GraphQl/Queries/Queries.ts
+++ b/src/GraphQl/Queries/Queries.ts
@@ -107,11 +107,21 @@ export const ACTION_ITEM_CATEGORY_LIST = gql`
 export const ACTION_ITEM_LIST = gql`
   query ActionItemsByOrganization(
     $organizationId: ID!
+    $actionItemCategoryId: ID
+    $eventId: ID
+    $isActive: Boolean
+    $isCompleted: Boolean
     $orderBy: ActionItemsOrderByInput
   ) {
     actionItemsByOrganization(
       organizationId: $organizationId
       orderBy: $orderBy
+      where: {
+        actionItemCategory_id: $actionItemCategoryId
+        event_id: $eventId
+        is_active: $isActive
+        is_completed: $isCompleted
+      }
     ) {
       _id
       assignee {
diff --git a/src/components/ActionItemsContainer/ActionItemsContainer.tsx b/src/components/ActionItemsContainer/ActionItemsContainer.tsx
index a6f14f5dcc..1ac3cf8fdb 100644
--- a/src/components/ActionItemsContainer/ActionItemsContainer.tsx
+++ b/src/components/ActionItemsContainer/ActionItemsContainer.tsx
@@ -22,7 +22,7 @@ function actionItemsContainer({
   membersData,
   actionItemsRefetch,
 }: {
-  actionItemsData: InterfaceActionItemList | undefined;
+  actionItemsData: InterfaceActionItemInfo[] | undefined;
   membersData: any;
   actionItemsRefetch: any;
 }): JSX.Element {
@@ -172,81 +172,82 @@ function actionItemsContainer({
         </div>
 
         <div className="mx-4 bg-light-subtle border border-light-subtle border-top-0 rounded-bottom-4 shadow-sm">
-          {actionItemsData?.actionItemsByOrganization.map(
-            (actionItem, index) => (
-              <div key={index}>
-                <Row className={`${index === 0 ? 'pt-3' : ''} mb-3 mx-2`}>
-                  <Col
-                    sm={4}
-                    xs={7}
-                    md={3}
-                    lg={3}
-                    className="align-self-center fw-semibold text-body-secondary"
+          {actionItemsData?.map((actionItem, index) => (
+            <div key={index}>
+              <Row className={`${index === 0 ? 'pt-3' : ''} mb-3 mx-2`}>
+                <Col
+                  sm={4}
+                  xs={7}
+                  md={3}
+                  lg={3}
+                  className="align-self-center fw-semibold text-body-secondary"
+                >
+                  {`${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`}
+                </Col>
+                <Col
+                  sm={5}
+                  md={6}
+                  lg={4}
+                  className="d-none d-sm-block align-self-center fw-semibold text-body-secondary"
+                >
+                  {actionItem.actionItemCategory.name}
+                </Col>
+                <Col
+                  className="d-none d-lg-block align-self-center fw-semibold text-body-secondary"
+                  md={4}
+                  lg={3}
+                >
+                  <div
+                    className={`lh-base w-50 badge rounded-pill ${
+                      actionItem.isCompleted
+                        ? 'text-bg-success text-white'
+                        : 'text-bg-warning'
+                    }`}
                   >
-                    {`${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`}
-                  </Col>
-                  <Col
-                    sm={5}
-                    md={6}
-                    lg={4}
-                    className="d-none d-sm-block align-self-center fw-semibold text-body-secondary"
+                    {actionItem.isCompleted ? 'Completed' : 'Active'}
+                  </div>
+                </Col>
+                <Col xs={5} sm={3} lg={2} className="p-0">
+                  <Button
+                    className="btn btn-sm me-2"
+                    variant="outline-secondary"
+                    onClick={() => showPreviewModal(actionItem)}
                   >
-                    {actionItem.actionItemCategory.name}
-                  </Col>
-                  <Col
-                    className="d-none d-lg-block align-self-center fw-semibold text-body-secondary"
-                    md={4}
-                    lg={3}
+                    Details
+                  </Button>
+                  <Button
+                    size="sm"
+                    data-testid="editActionItemModalBtn"
+                    onClick={() => handleEditClick(actionItem)}
+                    className="me-2 d-none d-xl-inline"
+                    variant="success"
                   >
-                    <div
-                      className={`lh-base w-50 badge rounded-pill ${
-                        actionItem.isCompleted
-                          ? 'text-bg-success text-white'
-                          : 'text-bg-warning'
-                      }`}
-                    >
-                      {actionItem.isCompleted ? 'Completed' : 'Active'}
-                    </div>
-                  </Col>
-                  <Col xs={5} sm={3} lg={2} className="p-0">
-                    <Button
-                      className="btn btn-sm me-2"
-                      variant="outline-secondary"
-                      onClick={() => showPreviewModal(actionItem)}
-                    >
-                      Details
-                    </Button>
-                    <Button
-                      size="sm"
-                      data-testid="editActionItemModalBtn"
-                      onClick={() => handleEditClick(actionItem)}
-                      className="me-2 d-none d-xl-inline"
-                      variant="success"
-                    >
-                      {' '}
-                      <i className="fas fa-edit"></i>
-                    </Button>
-                    <Button
-                      size="sm"
-                      data-testid="deleteActionItemModalBtn"
-                      variant="danger"
-                      onClick={() => {
-                        setActionItemId(actionItem._id);
-                        toggleDeleteModal();
-                      }}
-                    >
-                      {' '}
-                      <i className="fa fa-trash"></i>
-                    </Button>
-                  </Col>
-                </Row>
+                    {' '}
+                    <i className="fas fa-edit"></i>
+                  </Button>
+                  <Button
+                    size="sm"
+                    data-testid="deleteActionItemModalBtn"
+                    variant="danger"
+                    onClick={() => {
+                      setActionItemId(actionItem._id);
+                      toggleDeleteModal();
+                    }}
+                  >
+                    {' '}
+                    <i className="fa fa-trash"></i>
+                  </Button>
+                </Col>
+              </Row>
+
+              {index !== actionItemsData.length - 1 && <hr className="mx-3" />}
+            </div>
+          ))}
 
-                {index !==
-                  actionItemsData.actionItemsByOrganization.length - 1 && (
-                  <hr className="mx-3" />
-                )}
-              </div>
-            )
+          {actionItemsData?.length === 0 && (
+            <div className="lh-lg text-center fw-semibold text-body-tertiary">
+              No Action Items
+            </div>
           )}
         </div>
       </div>
diff --git a/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx b/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx
index bd95ac2ede..0d712f8df1 100644
--- a/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx
+++ b/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx
@@ -57,7 +57,7 @@ const ActionItemUpdateModal: React.FC<InterfaceActionItemCreateModalProps> = ({
         </Modal.Header>
         <Modal.Body>
           <Form onSubmitCapture={updateActionItemHandler}>
-            <Form.Group className="mb-3">
+            <Form.Group className="mb-2">
               <Form.Label>Assignee</Form.Label>
               <Form.Select
                 defaultValue=""
@@ -96,6 +96,7 @@ const ActionItemUpdateModal: React.FC<InterfaceActionItemCreateModalProps> = ({
                   preCompletionNotes: e.target.value,
                 });
               }}
+              className="mb-2"
             />
 
             <label htmlFor="actionItemPostCompletionNotes">
@@ -113,9 +114,10 @@ const ActionItemUpdateModal: React.FC<InterfaceActionItemCreateModalProps> = ({
                   postCompletionNotes: e.target.value,
                 });
               }}
+              className="mb-2"
             />
 
-            <div className={styles.datediv}>
+            <div className={`${styles.datediv} mt-3 mb-2`}>
               <div>
                 <DatePicker
                   label={t('dueDate')}
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
index 1fed29fb51..b08b09134e 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
@@ -4,32 +4,20 @@
 
 .btnsContainer {
   display: flex;
+  justify-content: space-between;
 }
 
 .btnsContainer .btnsBlock {
   display: flex;
+  gap: 10px;
 }
 
 .btnsContainer .btnsBlock button {
-  margin-left: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.btnsContainer .input {
-  flex: 1;
-  position: relative;
-}
-
-.btnsContainer input {
-  outline: 1px solid var(--bs-gray-400);
-}
-
-.btnsContainer .input button {
-  width: 52px;
-}
-
 .container {
   min-height: 100vh;
 }
@@ -37,9 +25,8 @@
 .datediv {
   display: flex;
   flex-direction: row;
-  margin-top: 30px;
-  margin-bottom: 20px;
 }
+
 .datebox {
   width: 90%;
   border-radius: 7px;
@@ -55,7 +42,7 @@
 }
 
 .dropdown {
-  display: inline;
+  display: block;
 }
 
 .dropdownToggle {
@@ -157,48 +144,10 @@ hr {
   color: #707070;
 }
 
-@media (max-width: 1020px) {
-  .btnsContainer {
-    flex-direction: column;
-    margin: 1.5rem 0;
-  }
-
-  .btnsContainer .btnsBlock {
-    margin: 1.5rem 0 0 0;
-    justify-content: space-between;
-  }
-
-  .btnsContainer .btnsBlock button {
-    margin: 0;
-  }
-
-  .btnsContainer .btnsBlock div button {
-    margin-right: 1.5rem;
-  }
-}
-
 @media (max-width: 767px) {
-  .btnsContainer .btnsBlock {
-    flex-direction: column;
-    margin: 1.5rem 0 0 0;
-    justify-content: space-between;
-  }
-
-  .dropdownToggle {
-    margin-bottom: 1rem;
-  }
-
-  .dropdownContainer {
-    margin-bottom: 0;
-    justify-content: space-between;
-  }
-}
-
-/* For mobile devices  */
-
-@media (max-width: 520px) {
   .btnsContainer {
     margin-bottom: 0;
+    flex-direction: column-reverse;
   }
 
   .btnsContainer .btnsBlock {
@@ -207,21 +156,12 @@ hr {
     margin-right: 0;
   }
 
-  .btnsContainer .btnsBlock div {
-    flex: 1;
-  }
-
-  .btnsContainer .btnsBlock div[title='Sort organizations'] {
-    margin-right: 0.5rem;
-  }
-
   .btnsContainer .btnsBlock button {
     margin-bottom: 1rem;
-    margin-right: 0;
     width: 100%;
   }
 
-  .dropdownToggle {
-    margin-bottom: 0;
+  .dropdown {
+    width: 100%;
   }
 }
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
index b65e6f2fc0..189ccc61fa 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
@@ -35,9 +35,10 @@ function organizationActionItems(): JSX.Element {
   const [actionItemCreateModalIsOpen, setActionItemCreateModalIsOpen] =
     useState(false);
   const [dueDate, setDueDate] = useState<Date | null>(new Date());
-  const [orderBy, setOrderBy] = useState<'createdAt_ASC' | 'createdAt_DESC'>(
-    'createdAt_DESC'
-  );
+  const [orderBy, setOrderBy] = useState<'Latest' | 'Earliest'>('Latest');
+  const [actionItemStatus, setActionItemStatus] = useState('');
+  const [actionItemCategoryId, setActionItemCategoryId] = useState('');
+  const [actionItemCategoryName, setActionItemCategoryName] = useState('');
 
   const [formState, setFormState] = useState({
     actionItemCategoryId: '',
@@ -81,7 +82,10 @@ function organizationActionItems(): JSX.Element {
   } = useQuery(ACTION_ITEM_LIST, {
     variables: {
       organizationId: currentUrl,
-      orderBy,
+      actionItemCategoryId,
+      orderBy: orderBy === 'Latest' ? 'createdAt_DESC' : 'createdAt_ASC',
+      isActive: actionItemStatus === 'Active' ? true : false,
+      isCompleted: actionItemStatus === 'Completed' ? true : false,
     },
     notifyOnNetworkStatusChange: true,
   });
@@ -129,12 +133,27 @@ function organizationActionItems(): JSX.Element {
 
   const handleSorting = (sort: string): void => {
     if (sort === 'Latest') {
-      setOrderBy('createdAt_DESC');
+      setOrderBy('Latest');
+    } else {
+      setOrderBy('Earliest');
+    }
+  };
+
+  const handleStatusFilter = (status: string): void => {
+    if (status === 'Active') {
+      setActionItemStatus('Active');
     } else {
-      setOrderBy('createdAt_ASC');
+      setActionItemStatus('Completed');
     }
   };
 
+  const handleClearFilters = (): void => {
+    setActionItemCategoryId('');
+    setActionItemCategoryName('');
+    setActionItemStatus('');
+    setOrderBy('Latest');
+  };
+
   if (actionItemCategoriesLoading || membersLoading || actionItemsLoading) {
     return <Loader size="xl" />;
   }
@@ -173,32 +192,21 @@ function organizationActionItems(): JSX.Element {
     <>
       <OrganizationScreen screenName="Action Items" title={t('title')}>
         <div className={`${styles.container} bg-white rounded-4 my-3`}>
-          <div className={`${styles.btnsContainer} mt-4 mx-4`}>
-            <div className={styles.input}>
-              <Form.Control
-                type="name"
-                id="searchOrgname"
-                className="bg-white"
-                placeholder={t('searchByName')}
-                data-testid="searchByName"
-                autoComplete="off"
-                required
-                // onKeyUp={handleSearchByEnter}
-              />
-              <Button
-                tabIndex={-1}
-                className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
-                // onClick={handleSearchByBtnClick}
-                data-testid="searchBtn"
-              >
-                <Search />
-              </Button>
-            </div>
-            <div className={styles.btnsBlock}>
-              <div className={`${styles.dropdownContainer} d-flex flex-wrap`}>
+          <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 organizations"
+                  title="Sort Action Items"
                   data-testid="sort"
                   className={styles.dropdownToggle}
                 >
@@ -209,10 +217,10 @@ function organizationActionItems(): JSX.Element {
                     //     : 'success'
                     // }
                     variant="outline-success"
-                    data-testid="sortOrgs"
+                    data-testid="sortActionItems"
                   >
                     <SortIcon className={'me-1'} />
-                    Sort
+                    {orderBy === 'Latest' ? 'Latest' : 'Earliest'}
                   </Dropdown.Toggle>
                   <Dropdown.Menu>
                     <Dropdown.Item
@@ -237,30 +245,25 @@ function organizationActionItems(): JSX.Element {
                   className={styles.dropdownToggle}
                 >
                   <Dropdown.Toggle
-                    // variant={
-                    //   sortingState.option === ''
-                    //     ? 'outline-success'
-                    //     : 'success'
-                    // }
                     variant="outline-success"
                     data-testid="sortOrgs"
-                    className="me-0"
+                    className={
+                      actionItemCategoryId === '' ? '' : 'bg-success text-white'
+                    }
                   >
-                    Action Item Category
+                    {actionItemCategoryName === ''
+                      ? 'Action Item Category'
+                      : actionItemCategoryName}
                   </Dropdown.Toggle>
                   <Dropdown.Menu>
                     {actionItemCategoriesData?.actionItemCategoriesByOrganization.map(
-                      (category: any, index: any) => (
+                      (category, index) => (
                         <Dropdown.Item
                           key={index}
-                          // onClick={
-                          //   /* istanbul ignore next */
-                          //   () => setOrgSetting(setting)
-                          // }
-                          // className={
-                          //   orgSetting === setting ? 'text-secondary' : ''
-                          // }
-                          className="my-1"
+                          onClick={() => {
+                            setActionItemCategoryId(category._id);
+                            setActionItemCategoryName(category.name);
+                          }}
                         >
                           {category.name}
                         </Dropdown.Item>
@@ -268,7 +271,39 @@ function organizationActionItems(): JSX.Element {
                     )}
                   </Dropdown.Menu>
                 </Dropdown>
+
+                <Dropdown
+                  aria-expanded="false"
+                  title="Action Item Status"
+                  data-testid="actionItemStatus"
+                  className={styles.dropdownToggle}
+                >
+                  <Dropdown.Toggle
+                    variant="outline-success"
+                    data-testid="actionItemStatus"
+                    className={
+                      actionItemStatus === '' ? '' : 'bg-success text-white'
+                    }
+                  >
+                    {actionItemStatus === '' ? 'Status' : actionItemStatus}
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu>
+                    <Dropdown.Item
+                      onClick={(): void => handleStatusFilter('Active')}
+                      data-testid="activeActionItems"
+                    >
+                      {t('active')}
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      onClick={(): void => handleStatusFilter('Completed')}
+                      data-testid="completedActionItems"
+                    >
+                      {t('completed')}
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                </Dropdown>
               </div>
+
               <Button
                 variant="success"
                 onClick={showCreateModal}
@@ -283,7 +318,7 @@ function organizationActionItems(): JSX.Element {
           <hr />
 
           <ActionItemsContainer
-            actionItemsData={actionItemsData}
+            actionItemsData={actionItemsData?.actionItemsByOrganization}
             membersData={membersData.organizations[0].members}
             actionItemsRefetch={actionItemsRefetch}
           />