Skip to content

Commit

Permalink
enhancement: added total count for selected status and removed the vi…
Browse files Browse the repository at this point in the history 
…ew button for application card (#853)

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

* added tests

* Update applications.test.js

* fix: made changes to the test name

* Update applications.test.js

* Update index.html

* Update utils.js

* Update script.js

* Update script.js

* Update style.css

* Update style.css

* Update style.css

* Update style.css

* Update script.js

* Update style.css

* Update script.js
  • Loading branch information
@rishirishhh
rishirishhh authored Sep 28, 2024
1 parent 2147127 commit 8667539
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 41 deletions.
63 changes: 44 additions & 19 deletions __tests__/applications/applications.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand All @@ -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');

Expand All @@ -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);
Expand Down Expand Up @@ -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');
Expand All @@ -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'),
Expand Down
1 change: 1 addition & 0 deletions applications/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
87 changes: 66 additions & 21 deletions applications/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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 = '';
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -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);
});
Expand Down Expand Up @@ -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 });
Expand All @@ -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);
}
}
});

Expand All @@ -450,7 +487,7 @@ if (isDev) {
filterOptions.forEach((option) => {
option.addEventListener('click', () => {
const filter = option.getAttribute('data-filter');
applyFilter(filter);
applyFilter(filter, isDev);
});
});
} else {
Expand All @@ -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);
Expand All @@ -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';
}
}
Expand All @@ -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', () => {
Expand Down
13 changes: 13 additions & 0 deletions applications/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 9 additions & 1 deletion applications/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 8667539

Please sign in to comment.