From bcb5ea9793f04dfeb59da2416aed9fd4bc6fccb0 Mon Sep 17 00:00:00 2001
From: Joy <joygupta501@gmail.com>
Date: Tue, 7 Nov 2023 10:09:33 +0530
Subject: [PATCH] Feat : Removed scrollbar from tasks

---
 users/details/script.js | 20 +++++++++++++++-----
 users/details/style.css | 14 +++++++++-----
 users/details/utils.js  | 21 +++++++++++++++------
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/users/details/script.js b/users/details/script.js
index 80adbba1..1a7fdf8a 100644
--- a/users/details/script.js
+++ b/users/details/script.js
@@ -11,6 +11,7 @@ let userStatusData = {};
 let currentPageIndex = 1;
 let taskPerPage = 3;
 let prsPerPage = 3;
+let isTaskAccordionOpen = false;
 let totalPrsPages = 0;
 let totalPages = Math.ceil(userAllTasks.length / taskPerPage);
 const username = new URLSearchParams(window.location.search).get('username');
@@ -191,6 +192,16 @@ function toggleAccordionTabsVisibility() {
     .querySelectorAll('.visible-content');
   accordionTabs.forEach((tab) => {
     tab.addEventListener('click', () => {
+      if (tab.innerText === 'Tasks' && isDev) {
+        isTaskAccordionOpen = !isTaskAccordionOpen;
+        if (isTaskAccordionOpen) {
+          tab.classList.add('sticky-header');
+          document.addEventListener('scroll', onScrollHandler);
+        } else {
+          tab.classList.remove('sticky-header');
+          document.removeEventListener('scroll', onScrollHandler);
+        }
+      }
       const hiddenContent = tab.nextElementSibling;
       const arrowIcon = tab.querySelector('img');
       if (hiddenContent) {
@@ -242,7 +253,6 @@ function generateTasksTabDetails() {
     type: 'div',
     classList: isDev ? ['user-tasks', 'user-tasks-dev'] : ['user-tasks'],
   });
-  tasks.addEventListener('scroll', () => onScrollHandler(tasks));
   div.append(tasks);
   if (!isDev) {
     const pagination = createElement({
@@ -298,7 +308,6 @@ async function getUserTasks() {
       isTaskFetching = false;
     }
   } catch (err) {
-    console.log({ err });
     const div = createElement({
       type: 'div',
       classList: ['hidden-content', 'hide'],
@@ -318,9 +327,11 @@ function getTasksToFetch(userTasks, currentIndex) {
     (_, index) => index >= startIndex && index < endIndex,
   );
 }
-function onScrollHandler(container) {
-  if (container.scrollTop + container.clientHeight >= container.scrollHeight)
+function onScrollHandler() {
+  const accordionTasks = document.getElementsByClassName('accordion-tasks');
+  if (isTaskAccordionOpen && isBottomBorderInView(accordionTasks[0])) {
     getUserTasks();
+  }
 }
 
 function generateUserTaskList(userTasks) {
@@ -1135,7 +1146,6 @@ function lockAccordiansForNonSuperUser() {
 }
 
 async function accessingUserData() {
-  console.log('control is here');
   const isSuperUser = await checkUserIsSuperUser();
   if (isSuperUser) {
     getUserTasks();
diff --git a/users/details/style.css b/users/details/style.css
index 5e0e3cab..91baa0ec 100644
--- a/users/details/style.css
+++ b/users/details/style.css
@@ -234,10 +234,6 @@ li {
   flex-direction: column;
   gap: 2rem;
 }
-.user-tasks-dev {
-  height: 400px;
-  overflow-y: scroll;
-}
 
 .task-details {
   margin-top: 1rem;
@@ -499,7 +495,11 @@ footer p a {
   position: absolute;
   color: black;
 }
-
+.sticky-header {
+  position: sticky;
+  top: 0;
+  background-color: white;
+}
 .task {
   border: 2px solid var(--border-color);
   padding: 1rem;
@@ -514,8 +514,12 @@ footer p a {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
+  gap: 17px;
 }
 
+#task-loader {
+  text-align: center;
+}
 .task-title {
   max-width: 27rem;
 }
diff --git a/users/details/utils.js b/users/details/utils.js
index e090db6b..5586b4a1 100644
--- a/users/details/utils.js
+++ b/users/details/utils.js
@@ -119,6 +119,15 @@ const handleProgressColor = (percentCompleted, startedOn, endsOn) => {
 
   return 'yellow';
 };
+/**
+ * Verify if element's border bottom is in the view or not
+ * @param {HTML element} element - UI Element
+ * @returns {boolean}
+ */
+function isBottomBorderInView(element) {
+  const rect = element.getBoundingClientRect();
+  return rect.bottom <= window.innerHeight;
+}
 
 /**
  * Calculates the percentage of days remaining between two dates.
@@ -151,7 +160,7 @@ const generateCardUIInDev = (task) => {
   <div class="task ${isTaskRed ? 'task-red' : ''}">
     <div class="row">
       <div class="task-title">
-        <a>${task?.title}</a>
+        <a data-test-tile = ${task?.title} >${task?.title}</a>
       </div>
       <div class="progress-content">
         <progress class=${progressBarClassname} id="file" value="${
@@ -165,27 +174,27 @@ const generateCardUIInDev = (task) => {
         <p class="div-heading">Estimated Completion</p>
         <p class="div-detail">${deadlineDays || 'N/A'}</p>
       </div>
-      <div class="detail-block">
+      <div class="detail-block status">
         <p class="div-heading">Status</p>
         <p class="div-detail">${task.status || 'N/A'}</p>
       </div>
     </div>
     <div class="row">
-      <div class="detail-block eta">
+      <div class="detail-block startedOn">
         <p class="div-heading">Started On</p>
         <p class="div-detail">${startedOnDays || 'N/A'}</p>
       </div>
-      <div class="detail-block">
+      <div class="detail-block priority">
         <p class="div-heading">Priority</p>
         <p class="div-detail">${task?.priority || 'N/A'}</p>
       </div>
     </div>
     <div class="row">
-      <div class="detail-block eta">
+      <div class="detail-block createdBy">
         <p class="div-heading">Created By</p>
         <p class="div-detail">${task?.createdBy || 'N/A'}</p>
       </div>
-      <div class="detail-block">
+      <div class="detail-block type">
         <p class="div-heading">Type</p>
         <p class="div-detail">${task?.type || 'N/A'}</p>
       </div>