enhancement: added total count for selected status and removed the view button for application card

__tests__/applications/applications.test.js

@@ -86,6 +86,23 @@ describe('Applications page', () => {
             'Access-Control-Allow-Headers': 'Content-Type, Authorization',
           },
         });
+      } else if (
+        request.url() ===
+        `${API_BASE_URL}/applications?size=6&status=accepted&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();
       }
@@ -112,6 +129,21 @@ describe('Applications page', () => {
     expect(applicationCards.length).toBe(6);
   });
 
+  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');
+    const filterButton = await page.$('.filter-button');
+    const applicationCards = await page.$$('.application-card');
+    expect(title).toBeTruthy();
+    expect(filterButton).toBeTruthy();
+    expect(applicationCards).toBeTruthy();
+    expect(applicationCards.length).toBe(6);
+    for (const card of applicationCards) {
+      const viewDetailsButton = await card.$('.view-details-button');
+      expect(viewDetailsButton).toBeFalsy();
+    }
+  });
+
   it('should load and render the accepted application requests when accept is selected from filter, and after clearing the filter it should again show all the applications', async function () {
     await page.click('.filter-button');
 
@@ -135,25 +167,18 @@ describe('Applications page', () => {
     ).toBe(true, 'status query param is not removed from url');
   });
 
-  it('should load and render accepted application and check the applied filter label,render all applications when the applied filter is removed', async function () {
-    await page.goto(`${SITE_URL}/applications/?dev=true`);
-    await page.waitForNetworkIdle();
-    await page.click('#filter-button-new');
-    await page.click('.filter-dropdown div[data-filter="accepted"]');
-    applicationCards = await page.$$('.application-card');
-    expect(applicationCards.length).toBe(4);
-    const filterLabelElement = page.$('.filter-label .filter-text');
-    expect(filterLabelElement).toBeTruthy();
-    await page.click('.filter-remove');
+  it('should load and render the accepted application requests when accept filter is selected from filter under dev flag === true along with the total count of the accepted applications', async function () {
+    await page.goto(`${SITE_URL}/applications?dev=true`);
+    await page.click('.filter-button');
+
+    await page.$eval('input[name="status"][value="accepted"]', (radio) =>
+      radio.click(),
+    );
+    await page.click('.apply-filter-button');
     await page.waitForNetworkIdle();
-    applicationCards = await page.$$('.application-card');
-    const urlAfterClearingStatusFilter = new URL(page.url());
-    expect(
-      urlAfterClearingStatusFilter.searchParams.get('status') === null,
-    ).toBe(true, 'status query param is not removed from url');
-    expect(applicationCards.length).toBe(6);
+    const totalCountElement = await page.$$('total_count');
+    expect(totalCountElement).toBeTruthy(); // Assert that the element exists
   });
-
   it('should load more applications on going to the bottom of the page', async function () {
     let applicationCards = await page.$$('.application-card');
     expect(applicationCards.length).toBe(6);
@@ -185,7 +210,7 @@ describe('Applications page', () => {
     expect(urlAfterOpeningModal.searchParams.get('id') !== null).toBe(true);
   });
 
-  it('under feature flag should open application details modal for application, when user click on view details on any card', async function () {
+  it('under feature flag should open application details modal for application, when user click on card', async function () {
     await page.goto(`${SITE_URL}/applications/?dev=true`);
     await page.waitForNetworkIdle();
     const applicationDetailsModal = await page.$('.application-details');
@@ -194,7 +219,7 @@ describe('Applications page', () => {
         el.classList.contains('hidden'),
       ),
     ).toBe(true);
-    await page.click('.view-details-button');
+    await page.click('.application-details');
     expect(
       await applicationDetailsModal.evaluate((el) =>
         el.classList.contains('hidden'),

applications/index.html

@@ -49,6 +49,7 @@ <h1>RDS Join Applications</h1>
           <span class="filter-remove">&#x2715;</span>
         </div>
       </div>
+      <h2 class="total_count hidden"></h2>
       <p class="no_applications_found hidden">No applications Found!</p>
       <div
         class="filter-modal hidden"

applications/script.js

@@ -11,6 +11,7 @@ let isDataLoading = false;
 const loader = document.querySelector('.loader');
 const filterModal = document.querySelector('.filter-modal');
 const backDrop = document.querySelector('.backdrop');
+const totalCountElement = document.querySelector('.total_count');
 const backDropBlur = document.querySelector('.backdrop-blur');
 const applicationDetailsModal = document.querySelector('.application-details');
 const mainContainer = document.querySelector('.container');
@@ -95,7 +96,9 @@ function changeFilter() {
   if (!isDev) {
     filterModal.classList.add('hidden');
     backDrop.style.display = 'none';
+    totalCountElement.classList.add('hidden');
   } else {
+    totalCountElement.classList.add('hidden');
     status = 'all';
   }
   applicationContainer.innerHTML = '';
@@ -294,7 +297,7 @@ function removeQueryParamInUrl(queryParamKey) {
   window.history.replaceState(window.history.state, '', updatedUrl);
 }
 
-function createApplicationCard({ application }) {
+function createApplicationCard({ application, dev }) {
   const applicationCard = createElement({
     type: 'div',
     attributes: { class: 'application-card' },
@@ -333,45 +336,68 @@ function createApplicationCard({ application }) {
     innerText: application.intro.introduction.slice(0, 200),
   });
 
-  const viewDetailsButton = createElement({
-    type: 'button',
-    attributes: { class: 'view-details-button' },
-    innerText: 'View Details',
-  });
-
-  viewDetailsButton.addEventListener('click', () => {
-    addQueryParamInUrl('id', application.id);
-    openApplicationDetails(application);
-  });
-
   applicationCard.appendChild(userInfoContainer);
   applicationCard.appendChild(introductionText);
-  applicationCard.appendChild(viewDetailsButton);
+
+  if (dev) {
+    applicationCard.style.cursor = 'pointer';
+    applicationCard.addEventListener('click', () => {
+      addQueryParamInUrl('id', application.id);
+      openApplicationDetails(application);
+    });
+  } else {
+    const viewDetailsButton = createElement({
+      type: 'button',
+      attributes: { class: 'view-details-button' },
+      innerText: 'View Details',
+    });
+
+    viewDetailsButton.addEventListener('click', () => {
+      addQueryParamInUrl('id', application.id);
+      openApplicationDetails(application);
+    });
+    applicationCard.appendChild(viewDetailsButton);
+  }
 
   return applicationCard;
 }
 
-async function renderApplicationCards(next, status, isInitialRender) {
+function updateTotalCount(total, status) {
+  if (total > 0) {
+    totalCountElement.textContent = `Total ${status} applications: ${total}`;
+    totalCountElement.classList.remove('hidden');
+  }
+}
+
+async function renderApplicationCards(next, status, isInitialRender, dev) {
   noApplicationFoundText.classList.add('hidden');
   changeLoaderVisibility({ hide: false });
   isDataLoading = true;
   const data = await getApplications({
     applicationStatus: status,
     next,
+    dev,
   });
   isDataLoading = false;
   changeLoaderVisibility({ hide: true });
   const applications = data.applications;
+  const totalSelectedCount = data.totalCount;
+
   nextLink = data.next;
   if (isDev && status != 'all') {
     showAppliedFilter(status);
   }
   if (isInitialRender) filterButton.classList.remove('hidden');
+
+  if (dev) {
+    updateTotalCount(totalSelectedCount, status);
+  }
   if (!applications.length)
     return noApplicationFoundText.classList.remove('hidden');
   applications.forEach((application) => {
     const applicationCard = createApplicationCard({
       application,
+      dev,
     });
     applicationContainer.appendChild(applicationCard);
   });
@@ -422,7 +448,13 @@ async function renderApplicationById(id) {
   if (applicationId) {
     await renderApplicationById(applicationId);
   }
-  await renderApplicationCards('', status, true, applicationId);
+
+  if (isDev) {
+    await renderApplicationCards('', status, true, isDev);
+  } else {
+    await renderApplicationCards('', status, true, applicationId);
+  }
+
   addIntersectionObserver();
 
   changeLoaderVisibility({ hide: true });
@@ -433,7 +465,12 @@ const intersectionObserver = new IntersectionObserver(async (entries) => {
     return;
   }
   if (entries[0].isIntersecting && !isDataLoading) {
-    await renderApplicationCards(nextLink);
+    const dev = urlParams.get('dev');
+    if (dev) {
+      await renderApplicationCards(nextLink, status, true, dev);
+    } else {
+      await renderApplicationCards(nextLink);
+    }
   }
 });
 
@@ -450,7 +487,7 @@ if (isDev) {
   filterOptions.forEach((option) => {
     option.addEventListener('click', () => {
       const filter = option.getAttribute('data-filter');
-      applyFilter(filter);
+      applyFilter(filter, isDev);
     });
   });
 } else {
@@ -473,7 +510,14 @@ if (isDev) {
     addQueryParamInUrl('status', selectedStatus);
     changeFilter();
     status = selectedStatus;
-    renderApplicationCards(nextLink, status);
+    const urlParams = new URLSearchParams(window.location.search);
+    const dev = urlParams.get('dev');
+
+    if (dev) {
+      renderApplicationCards(nextLink, status, false, dev);
+    } else {
+      renderApplicationCards(nextLink, status);
+    }
   });
 
   clearButton.addEventListener('click', clearFilter);
@@ -487,15 +531,15 @@ function showAppliedFilter(filterApplied) {
   }
 }
 
-function applyFilter(filter) {
+function applyFilter(filter, isDev) {
   if (filter.length > 0) {
     if (!filterLabel.classList.contains('hidden')) {
       filterLabel.classList.add('hidden');
     }
     addQueryParamInUrl('status', filter);
     changeFilter();
     status = filter;
-    renderApplicationCards(nextLink, status);
+    renderApplicationCards(nextLink, status, false, isDev);
     filterDropdown.style.display = 'none';
   }
 }
@@ -505,7 +549,8 @@ filterRemove.addEventListener('click', () => {
   filterText.textContent = '';
   removeQueryParamInUrl('status');
   changeFilter();
-  renderApplicationCards(nextLink, status);
+  const dev = urlParams.get('dev');
+  renderApplicationCards(nextLink, status, false, dev);
 });
 
 backDrop.addEventListener('click', () => {

applications/style.css

@@ -210,6 +210,19 @@ body {
   color: var(--white);
 }
 
+.total_count {
+  padding: 24px;
+  width: 58%;
+  max-width: 800px;
+  box-sizing: border-box;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.total_count.hidden {
+  display: none;
+}
+
 .filters-container {
   display: flex;
   flex-direction: column;

applications/utils.js

@@ -13,14 +13,22 @@ function createElement({ type, attributes = {}, innerText }) {
   return element;
 }
 
-async function getApplications({ applicationStatus, size = 6, next = '' }) {
+async function getApplications({
+  applicationStatus,
+  size = 6,
+  next = '',
+  dev = false,
+}) {
   let url;
 
   if (next) url = `${BASE_URL}${next}`;
   else if (applicationStatus === 'all') {
     url = `${BASE_URL}/applications?size=${size}`;
   } else {
     url = `${BASE_URL}/applications?size=${size}&status=${applicationStatus}`;
+    if (dev) {
+      url += '&dev=true';
+    }
   }
 
   try {