Merge branch 'Real-Dev-Squad:develop' into feature/repository-links-f…

…or-webpages
Real-Dev-Squad · Oct 8, 2024 · 5a2b04e · 5a2b04e
2 parents 3e13378 + 796d791
commit 5a2b04e
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 9 deletions.
diff --git a/__tests__/applications/applications.test.js b/__tests__/applications/applications.test.js
@@ -103,6 +103,23 @@ describe('Applications page', () => {
             'Access-Control-Allow-Headers': 'Content-Type, Authorization',
           },
         });
+      } else if (
+        request.url() ===
+        `${API_BASE_URL}/applications?size=6&status=pending&dev=true`
+      ) {
+        request.respond({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            applications: acceptedApplications,
+            totalCount: acceptedApplications.length,
+          }),
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+        });
       } else {
         request.continue();
       }
@@ -129,6 +146,12 @@ describe('Applications page', () => {
     expect(applicationCards.length).toBe(6);
   });
 
+  it('should render the index of pending applications under dev flag === true', async function () {
+    await page.goto(`${SITE_URL}/applications?dev=true&status=pending`);
+    const indexOfApplication = await page.$$('[data-testid="user-index"]');
+    expect(indexOfApplication).toBeTruthy();
+  });
+
   it('should render the initial UI elements under dev flag === true', async function () {
     await page.goto(`${SITE_URL}/applications?dev=true`);
     const title = await page.$('.header h1');

diff --git a/applications/script.js b/applications/script.js
@@ -8,6 +8,8 @@ import {
 } from './utils.js';
 let nextLink;
 let isDataLoading = false;
+let totalApplicationCount = 0;
+let currentApplicationIndex = 0;
 const loader = document.querySelector('.loader');
 const filterModal = document.querySelector('.filter-modal');
 const backDrop = document.querySelector('.backdrop');
@@ -38,6 +40,7 @@ const applicationDetailsActionsContainer = document.querySelector(
 );
 const urlParams = new URLSearchParams(window.location.search);
 const isDev = urlParams.get('dev') === 'true';
+let isApplicationPending = urlParams.get('status') === 'pending';
 const filterButton = isDev
   ? document.getElementById('filter-button-new')
   : document.getElementById('filter-button');
@@ -100,6 +103,7 @@ function changeFilter() {
   } else {
     totalCountElement.classList.add('hidden');
     status = 'all';
+    totalApplicationCount = 0;
   }
   applicationContainer.innerHTML = '';
 }
@@ -297,7 +301,7 @@ function removeQueryParamInUrl(queryParamKey) {
   window.history.replaceState(window.history.state, '', updatedUrl);
 }
 
-function createApplicationCard({ application, dev }) {
+function createApplicationCard({ application, dev, index }) {
   const applicationCard = createElement({
     type: 'div',
     attributes: { class: 'application-card' },
@@ -314,6 +318,29 @@ function createApplicationCard({ application, dev }) {
     innerText: application.biodata.firstName,
   });
 
+  if (dev && isApplicationPending) {
+    const usernameTextAndIndex = createElement({
+      type: 'div',
+      attributes: { class: 'user-text-index' },
+    });
+
+    const userIndex = createElement({
+      type: 'input',
+      attributes: {
+        type: 'number',
+        value: `${index}`,
+        readonly: '',
+        class: 'user-index',
+        'data-testid': 'user-index',
+      },
+    });
+    usernameTextAndIndex.appendChild(usernameText);
+    usernameTextAndIndex.appendChild(userIndex);
+    userInfoContainer.appendChild(usernameTextAndIndex);
+  } else {
+    userInfoContainer.appendChild(usernameText);
+  }
+
   const companyNameText = createElement({
     type: 'p',
     attributes: { class: 'company-name hide-overflow' },
@@ -326,7 +353,6 @@ function createApplicationCard({ application, dev }) {
     innerText: `Skills: ${application.professional.skills}`,
   });
 
-  userInfoContainer.appendChild(usernameText);
   userInfoContainer.appendChild(companyNameText);
   userInfoContainer.appendChild(skillsText);
 
@@ -382,7 +408,10 @@ async function renderApplicationCards(next, status, isInitialRender, dev) {
   changeLoaderVisibility({ hide: true });
   const applications = data.applications;
   const totalSelectedCount = data.totalCount;
-
+  if (isInitialRender) {
+    totalApplicationCount = data.totalCount;
+    currentApplicationIndex = totalApplicationCount;
+  }
   nextLink = data.next;
   if (isDev && status != 'all') {
     showAppliedFilter(status);
@@ -394,12 +423,19 @@ async function renderApplicationCards(next, status, isInitialRender, dev) {
   }
   if (!applications.length)
     return noApplicationFoundText.classList.remove('hidden');
-  applications.forEach((application) => {
+
+  if (isInitialRender || !next) {
+    applicationContainer.innerHTML = '';
+    currentApplicationIndex = totalSelectedCount;
+  }
+  applications.forEach((application, index) => {
     const applicationCard = createApplicationCard({
       application,
       dev,
+      index: currentApplicationIndex,
     });
     applicationContainer.appendChild(applicationCard);
+    currentApplicationIndex--;
   });
 }
 
@@ -448,7 +484,8 @@ async function renderApplicationById(id) {
   if (applicationId) {
     await renderApplicationById(applicationId);
   }
-
+  totalApplicationCount = 0;
+  currentApplicationIndex = 0;
   if (isDev) {
     await renderApplicationCards('', status, true, isDev);
   } else {
@@ -467,7 +504,7 @@ const intersectionObserver = new IntersectionObserver(async (entries) => {
   if (entries[0].isIntersecting && !isDataLoading) {
     const dev = urlParams.get('dev');
     if (dev) {
-      await renderApplicationCards(nextLink, status, true, dev);
+      await renderApplicationCards(nextLink, status, false, dev);
     } else {
       await renderApplicationCards(nextLink);
     }
@@ -514,7 +551,7 @@ if (isDev) {
     const dev = urlParams.get('dev');
 
     if (dev) {
-      renderApplicationCards(nextLink, status, false, dev);
+      renderApplicationCards(nextLink, status, true, dev);
     } else {
       renderApplicationCards(nextLink, status);
     }
@@ -539,7 +576,7 @@ function applyFilter(filter, isDev) {
     addQueryParamInUrl('status', filter);
     changeFilter();
     status = filter;
-    renderApplicationCards(nextLink, status, false, isDev);
+    renderApplicationCards('', status, false, isDev);
     filterDropdown.style.display = 'none';
   }
 }
@@ -550,7 +587,7 @@ filterRemove.addEventListener('click', () => {
   removeQueryParamInUrl('status');
   changeFilter();
   const dev = urlParams.get('dev');
-  renderApplicationCards(nextLink, status, false, dev);
+  renderApplicationCards(nextLink, status, true, dev);
 });
 
 backDrop.addEventListener('click', () => {

diff --git a/applications/style.css b/applications/style.css
@@ -17,6 +17,19 @@
   --color-red-variant1: #f43030;
 }
 
+.user-text-index {
+  display: flex;
+  justify-content: space-between;
+}
+
+.user-index {
+  width: 60px;
+  border: none;
+  font-style: normal;
+  font-size: 20px;
+  font-weight: 700;
+}
+
 body {
   font-family: 'Roboto', sans-serif;
   margin: 0;