shows index on application cards

Real-Dev-Squad · Sep 23, 2024 · e7328b3 · e7328b3
1 parent 7533e96
commit e7328b3
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 20 deletions.
diff --git a/applications/script.js b/applications/script.js
@@ -6,6 +6,8 @@ import {
   updateApplication,
   getApplicationById,
 } from './utils.js';
+let totalApplicationsRendered = 0;
+let totalApplicationsLength = 0;
 let nextLink;
 let isDataLoading = false;
 const loader = document.querySelector('.loader');
@@ -79,6 +81,7 @@ function changeFilter() {
   filterModal.classList.add('hidden');
   backDrop.style.display = 'none';
   applicationContainer.innerHTML = '';
+  totalApplicationsRendered = 0;
 }
 
 function closeApplicationDetails() {
@@ -246,7 +249,7 @@ function clearFilter() {
   );
   selectedFilterOption.checked = false;
   status = 'all';
-  renderApplicationCards(nextLink, status);
+  renderApplicationCards(nextLink, status, true);
 }
 
 function changeLoaderVisibility({ hide }) {
@@ -274,7 +277,7 @@ function removeQueryParamInUrl(queryParamKey) {
   window.history.replaceState(window.history.state, '', updatedUrl);
 }
 
-function createApplicationCard({ application }) {
+function createApplicationCard({ application, index }) {
   const applicationCard = createElement({
     type: 'div',
     attributes: { class: 'application-card' },
@@ -285,12 +288,49 @@ function createApplicationCard({ application }) {
     attributes: { class: 'user-info' },
   });
 
+  const usernameTextAndIndex = createElement({
+    type: 'div',
+    attributes: { class: 'user-text-index' },
+  });
+
   const usernameText = createElement({
     type: 'p',
     attributes: { class: 'username' },
     innerText: application.biodata.firstName,
   });
 
+  const userIndexAndButton = createElement({
+    type: 'div',
+    attributes: { class: 'user-index-edit' },
+  });
+
+  usernameTextAndIndex.appendChild(usernameText);
+  usernameTextAndIndex.appendChild(userIndexAndButton);
+
+  const userIndex = createElement({
+    type: 'input',
+    attributes: {
+      type: 'number',
+      value: `${index}`,
+      readonly: '',
+      class: 'user-index',
+    },
+  });
+
+  const editButton = createElement({
+    type: 'button',
+    attributes: { class: 'edit-button' },
+  });
+
+  const editIcon = createElement({
+    type: 'img',
+    attributes: { src: '/images/edit-icon.svg', alt: 'edit-icon' },
+  });
+  editButton.appendChild(editIcon);
+
+  userIndexAndButton.appendChild(userIndex);
+  userIndexAndButton.appendChild(editButton);
+
   const companyNameText = createElement({
     type: 'p',
     attributes: { class: 'company-name hide-overflow' },
@@ -303,7 +343,7 @@ function createApplicationCard({ application }) {
     innerText: `Skills: ${application.professional.skills}`,
   });
 
-  userInfoContainer.appendChild(usernameText);
+  userInfoContainer.appendChild(usernameTextAndIndex);
   userInfoContainer.appendChild(companyNameText);
   userInfoContainer.appendChild(skillsText);
 
@@ -343,15 +383,24 @@ async function renderApplicationCards(next, status, isInitialRender) {
   changeLoaderVisibility({ hide: true });
   const applications = data.applications;
   nextLink = data.next;
-  if (isInitialRender) filterButton.classList.remove('hidden');
-  if (!applications.length)
+  if (isInitialRender) {
+    filterButton.classList.remove('hidden');
+    totalApplicationsLength = data.totalCount;
+    totalApplicationsRendered = 0;
+  }
+  if (!applications.length) {
     return noApplicationFoundText.classList.remove('hidden');
-  applications.forEach((application) => {
+  }
+  applications.forEach((application, index) => {
+    const reverseIndex =
+      totalApplicationsLength - (totalApplicationsRendered + index);
     const applicationCard = createApplicationCard({
       application,
+      index: reverseIndex,
     });
     applicationContainer.appendChild(applicationCard);
   });
+  totalApplicationsRendered += applications.length;
 }
 
 async function renderApplicationById(id) {
@@ -410,7 +459,7 @@ const intersectionObserver = new IntersectionObserver(async (entries) => {
     return;
   }
   if (entries[0].isIntersecting && !isDataLoading) {
-    await renderApplicationCards(nextLink);
+    await renderApplicationCards(nextLink, status);
   }
 });
 
@@ -440,7 +489,7 @@ applyFilterButton.addEventListener('click', () => {
   addQueryParamInUrl('status', selectedStatus);
   changeFilter();
   status = selectedStatus;
-  renderApplicationCards(nextLink, status);
+  renderApplicationCards(nextLink, status, true);
 });
 
 clearButton.addEventListener('click', clearFilter);

diff --git a/applications/style.css b/applications/style.css
@@ -193,6 +193,41 @@ body {
   padding-bottom: 8px;
 }
 
+.user-text-index {
+  display: flex;
+  justify-content: space-between;
+}
+
+.user-index {
+  width: 60px;
+  border: none;
+  font-style: normal;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.user-index-edit {
+  display: flex;
+}
+
+.edit-button {
+  background: none;
+  border: none;
+  height: 2rem;
+  width: 2rem;
+  padding: auto;
+  border-radius: 6px;
+  border: 1px solid var(--black-color);
+  transition: 200ms ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.edit-button:hover {
+  background-color: var(--light-gray-color);
+}
+
 .application-card .user-info .company-name {
   color: var(--color-gray);
   font-size: 14px;

diff --git a/applications/utils.js b/applications/utils.js
@@ -15,24 +15,44 @@ function createElement({ type, attributes = {}, innerText }) {
 
 async function getApplications({ applicationStatus, size = 6, next = '' }) {
   let url;
-
-  if (next) url = `${BASE_URL}${next}`;
-  else if (applicationStatus === 'all') {
+  let totalCountUrl;
+  if (next) {
+    url = `${BASE_URL}${next}`;
+    totalCountUrl = `${BASE_URL}/applications${
+      applicationStatus !== 'all' ? `?status=${applicationStatus}` : ''
+    }`;
+  } else if (applicationStatus === 'all') {
     url = `${BASE_URL}/applications?size=${size}`;
+    totalCountUrl = `${BASE_URL}/applications`;
   } else {
     url = `${BASE_URL}/applications?size=${size}&status=${applicationStatus}`;
+    totalCountUrl = `${BASE_URL}/applications?status=${applicationStatus}`;
   }
 
   try {
-    const res = await fetch(url, {
-      method: 'GET',
-      credentials: 'include',
-      headers: {
-        'Content-type': 'application/json',
-      },
-    });
-    const data = res.json();
-    return data;
+    const [applicationRes, totalCountRes] = await Promise.all([
+      fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-type': 'application/json',
+        },
+      }),
+      fetch(totalCountUrl, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-type': 'application/json',
+        },
+      }),
+    ]);
+
+    const applicationsData = await applicationRes.json();
+    const totalCountApplications = await totalCountRes.json();
+    return {
+      ...applicationsData,
+      totalCount: totalCountApplications.applications.length,
+    };
   } catch (error) {
     console.error(error);
     const errorMessage = error?.message || 'Something went wrong!';