Revert "Revert "feat : add search bar and filter for extension reques…

…ts page"" This reverts commit be52e65.
Real-Dev-Squad · Jul 31, 2023 · 6859607 · 6859607
1 parent be52e65
commit 6859607
Show file tree

Hide file tree

Showing 7 changed files with 364 additions and 18 deletions.
diff --git a/extension-requests/constants.js b/extension-requests/constants.js
@@ -17,3 +17,8 @@ const extensionRequestCardHeadings = [
   { title: 'Created At', key: 'timestamp', time: true },
   { title: 'Task', key: 'taskId' },
 ];
+const FILTER_MODAL = 'filter-modal';
+const FILTER_BUTTON = 'filter-button';
+const APPLY_FILTER_BUTTON = 'apply-filter-button';
+const CLEAR_BUTTON = 'clear-button';
+const USER_SEARCH_ELEMENT = 'assignee-search';
diff --git a/extension-requests/index.html b/extension-requests/index.html
@@ -3,7 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="/extension-requests/style.css" />
+    <script src="/constants.js"></script>
+    <script src="/extension-requests/constants.js"></script>
+    <script src="/utils.js" defer></script>
+    <script src="/extension-requests/local-utils.js" defer></script>
+    <script type="module" src="/extension-requests/script.js" defer></script>
     <title>Extension Requests</title>
   </head>
 
@@ -97,14 +102,38 @@ <h3>Update Extension Request Status</h3>
     <header class="header">
       <h1>Extension Requests</h1>
     </header>
+
+    <div class="search-filter">
+      <div id="search">
+        <input id="assignee-search" type="text" placeholder="Search Assignee" />
+      </div>
+      <button id="filter-button" class="filter-button">
+        <span class="filter-text">Filters</span>
+
+        <img
+          class="funnel-icon"
+          src="../users/images/funnel.svg"
+          alt="funnel icon"
+        />
+      </button>
+      <div class="filter-modal hidden">
+        <div class="filter-head">
+          <h3>Filters</h3>
+          <button id="clear-button" class="clear-btn">Clear</button>
+        </div>
+        <div class="filters-container">
+          <h2>Status</h2>
+          <form class="modal-form" id="status-filter"></form>
+        </div>
+        <button id="apply-filter-button" class="apply-filter-button">
+          Apply Filter
+        </button>
+      </div>
+    </div>
+
     <div class="container">
       <div class="extension-requests"></div>
     </div>
     <h2 id="error"></h2>
-    <script src="/constants.js"></script>
-    <script src="constants.js"></script>
-    <script src="/utils.js"></script>
-    <script src="local-utils.js"></script>
-    <script src="script.js"></script>
   </body>
 </html>
diff --git a/extension-requests/local-utils.js b/extension-requests/local-utils.js
@@ -1,10 +1,21 @@
+const Status = {
+  APPROVED: 'APPROVED',
+  PENDING: 'PENDING',
+  DENIED: 'DENIED',
+};
 async function getExtensionRequests(query = {}) {
   const url = new URL(`${API_BASE_URL}/extension-requests`);
 
   queryParams = ['assignee', 'status', 'taskId'];
-  queryParams.forEach(
-    (key) => query[key] && url.searchParams.set(key, query[key]),
-  );
+  queryParams.forEach((key) => {
+    if (query[key]) {
+      if (Array.isArray(query[key])) {
+        query[key].forEach((value) => url.searchParams.append(key, value));
+      } else {
+        url.searchParams.append(key, query[key]);
+      }
+    }
+  });
 
   const res = await fetch(url, {
     credentials: 'include',

diff --git a/extension-requests/script.js b/extension-requests/script.js
@@ -14,29 +14,149 @@ const modalStatusForm = document.querySelector(
 );
 const modalUpdateForm = document.querySelector('.extension-requests-form');
 
+const filterModal = document.getElementsByClassName(FILTER_MODAL)[0];
+const filterButton = document.getElementById(FILTER_BUTTON);
+const applyFilterButton = document.getElementById(APPLY_FILTER_BUTTON);
+const clearButton = document.getElementById(CLEAR_BUTTON);
+const userSearchElement = document.getElementById(USER_SEARCH_ELEMENT);
+let allCardsList;
+let isFiltered = false;
+
 const state = {
   currentExtensionRequest: null,
 };
 
 const render = async () => {
+  toggleStatusCheckbox(Status.PENDING);
+  await populateExtensionRequests({ status: Status.PENDING });
+};
+
+async function populateExtensionRequests(query = {}) {
   try {
     addLoader(container);
-    const extensionRequests = await getExtensionRequests();
-
+    extensionRequestsContainer.innerHTML = '';
+    const extensionRequests = await getExtensionRequests(query);
     const allExtensionRequests = extensionRequests.allExtensionRequests;
+
+    allCardsList = [];
     allExtensionRequests.forEach((data) => {
-      extensionRequestsContainer.appendChild(
-        createExtensionRequestCard(data, extensionRequestCardHeadings),
+      const extensionRequestCard = createExtensionRequestCard(
+        data,
+        extensionRequestCardHeadings,
       );
+      data['htmlElement'] = extensionRequestCard;
+      allCardsList.push(data);
+      extensionRequestsContainer.appendChild(extensionRequestCard);
     });
   } catch (error) {
-    errorHeading.textContent = 'Something went wrong';
+    errorHeading.textContent = 'Something went wrong, Please reload';
     errorHeading.classList.add('error-visible');
-    reload();
+    // reload();
   } finally {
     removeLoader('loader');
   }
+}
+function addCheckbox(labelText, value, groupName) {
+  const group = document.getElementById(groupName);
+  const label = document.createElement('label');
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.name = groupName;
+  checkbox.value = value;
+  label.innerHTML = checkbox.outerHTML + '&nbsp;' + labelText;
+  label.classList.add('checkbox-label');
+  label.appendChild(document.createElement('br'));
+  group.appendChild(label);
+}
+
+function populateStatus() {
+  const statusList = [
+    { name: 'Approved', id: 'APPROVED' },
+    { name: 'Pending', id: 'PENDING' },
+    { name: 'Denied', id: 'DENIED' },
+  ];
+  for (let i = 0; i < statusList.length; i++) {
+    const { name, id } = statusList[i];
+    addCheckbox(name, id, 'status-filter');
+  }
+}
+function toggleStatusCheckbox(statusValue) {
+  const element = document.querySelector(
+    `#status-filter input[value=${statusValue}]`,
+  );
+  element.checked = !element.checked;
+}
+
+function clearCheckboxes(groupName) {
+  const checkboxes = document.querySelectorAll(`input[name="${groupName}"]`);
+  checkboxes.forEach((cb) => {
+    cb.checked = false;
+  });
+}
+
+function getCheckedValues(groupName) {
+  const checkboxes = document.querySelectorAll(
+    `input[name="${groupName}"]:checked`,
+  );
+  return Array.from(checkboxes).map((cb) => cb.value);
+}
+
+applyFilterButton.addEventListener('click', async () => {
+  filterModal.classList.toggle('hidden');
+  const checkedValuesStatus = getCheckedValues('status-filter');
+
+  await populateExtensionRequests({ status: checkedValuesStatus });
+});
+
+clearButton.addEventListener('click', async function () {
+  clearCheckboxes('status-filter');
+  filterModal.classList.toggle('hidden');
+
+  await populateExtensionRequests();
+});
+filterModal.addEventListener('click', (event) => {
+  event.stopPropagation();
+});
+
+window.onclick = function () {
+  filterModal.classList.add('hidden');
 };
+
+const renderFilteredCards = (predicate) => {
+  extensionRequestsContainer.innerHTML = '';
+  let isEmpty = true;
+  for (const card of allCardsList) {
+    if (predicate(card)) {
+      isEmpty = false;
+      extensionRequestsContainer.append(card.htmlElement);
+    }
+  }
+
+  if (isEmpty) {
+    errorHeading.textContent = 'No Extension Requests found!';
+    errorHeading.classList.add('error-visible');
+  } else {
+    errorHeading.innerHTML = '';
+    errorHeading.classList.remove('error-visible');
+  }
+  // extensionRequestsContainer.
+};
+userSearchElement.addEventListener(
+  'input',
+  debounce((event) => {
+    if (!event.target.value && isFiltered) {
+      isFiltered = false;
+      renderFilteredCards((c) => true);
+      return;
+    } else if (!event.target.value) {
+      return;
+    }
+
+    renderFilteredCards((card) => card.assignee.includes(event.target.value));
+    isFiltered = true;
+  }, 500),
+);
+
 const showTaskDetails = async (taskId, approved) => {
   if (!taskId) return;
   try {
@@ -114,7 +234,6 @@ function createExtensionRequestCard(data, dataHeadings) {
   main.appendChild(wrapperDiv);
   return main;
 }
-render();
 
 //PATCH requests functions
 async function onStatusFormSubmit(e) {
@@ -207,3 +326,10 @@ function fillUpdateForm() {
   modalUpdateForm.querySelector('.extensionAssignee').value = assignee;
   modalUpdateForm.querySelector('.extensionReason').value = reason;
 }
+filterButton.addEventListener('click', (event) => {
+  event.stopPropagation();
+  filterModal.classList.toggle('hidden');
+});
+
+populateStatus();
+render();