Skip to content

Commit

Permalink
Merge branch 'feat/profileDiffsNewUI' of https://github.com/Real-Dev-…
Browse files Browse the repository at this point in the history 
…Squad/website-dashboard into feat/profileDiffsNewUI
  • Loading branch information
@lakshayman
lakshayman committed Sep 28, 2024
2 parents 65199ab + 8d541ce commit 9184a6f
Show file tree
Hide file tree
Showing 4 changed files with 237 additions and 19 deletions.
18 changes: 18 additions & 0 deletions __tests__/applications/applications.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,24 @@ 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');
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);
});
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
25 changes: 25 additions & 0 deletions applications/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<script src="/helpers/loadENV.js"></script>
<title>Applications</title>
</head>

<body>
<header class="header">
<h1>RDS Join Applications</h1>
Expand All @@ -24,6 +25,30 @@ <h1>RDS Join Applications</h1>
alt="funnel icon"
/>
</button>
<div class="filter-container hidden">
<div class="filter-menu">
<button id="filter-button-new" class="filter-button hidden">
<img
class="funnel-icon"
src="/task-requests/assets/funnel.svg"
alt="funnel icon"
/>
Filters
</button>
<div class="filter-dropdown">
<div data-filter="" class="filter-dropdown-header">
Status <button class="close-dropdown-btn">&#x2715;</button>
</div>
<div data-filter="rejected">Rejected</div>
<div data-filter="accepted">Accepted</div>
<div data-filter="pending">Pending</div>
</div>
</div>
<div class="filter-label hidden">
<span class="filter-text"></span>
<span class="filter-remove">&#x2715;</span>
</div>
</div>
<p class="no_applications_found hidden">No applications Found!</p>
<div
class="filter-modal hidden"
Expand Down
117 changes: 98 additions & 19 deletions applications/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
let nextLink;
let isDataLoading = false;
const loader = document.querySelector('.loader');
const filterButton = document.getElementById('filter-button');
const filterModal = document.querySelector('.filter-modal');
const backDrop = document.querySelector('.backdrop');
const backDropBlur = document.querySelector('.backdrop-blur');
Expand All @@ -36,8 +35,25 @@ const lastElementContainer = document.getElementById('page_bottom_element');
const applicationDetailsActionsContainer = document.querySelector(
'.application-details-actions',
);

const urlParams = new URLSearchParams(window.location.search);
const isDev = urlParams.get('dev') === 'true';
const filterButton = isDev
? document.getElementById('filter-button-new')
: document.getElementById('filter-button');
if (isDev)
document
.getElementsByClassName('filter-container')[0]
.classList.remove('hidden');

const filterDropdown = document.querySelector('.filter-dropdown');
const filterOptions = document.querySelectorAll(
'.filter-dropdown div:not(.close-dropdown-btn)',
);
const filterLabel = document.querySelector('.filter-label');
const filterText = document.querySelector('.filter-label .filter-text');
const filterRemove = document.querySelector('.filter-remove');
const closeDropdownBtn = document.querySelector('.close-dropdown-btn');

let applicationId = urlParams.get('id');

let currentApplicationId;
Expand Down Expand Up @@ -76,8 +92,12 @@ function updateUserApplication({ isAccepted }) {

function changeFilter() {
nextLink = '';
filterModal.classList.add('hidden');
backDrop.style.display = 'none';
if (!isDev) {
filterModal.classList.add('hidden');
backDrop.style.display = 'none';
} else {
status = 'all';
}
applicationContainer.innerHTML = '';
}

Expand Down Expand Up @@ -343,6 +363,9 @@ async function renderApplicationCards(next, status, isInitialRender) {
changeLoaderVisibility({ hide: true });
const applications = data.applications;
nextLink = data.next;
if (isDev && status != 'all') {
showAppliedFilter(status);
}
if (isInitialRender) filterButton.classList.remove('hidden');
if (!applications.length)
return noApplicationFoundText.classList.remove('hidden');
Expand Down Expand Up @@ -392,7 +415,7 @@ async function renderApplicationById(id) {
const urlParams = new URLSearchParams(window.location.search);
status = urlParams.get('status') || 'all';

if (status !== 'all') {
if (!isDev && status !== 'all') {
document.querySelector(`input[name="status"]#${status}`).checked = true;
}

Expand All @@ -418,9 +441,69 @@ const addIntersectionObserver = () => {
intersectionObserver.observe(lastElementContainer);
};

filterButton.addEventListener('click', () => {
filterModal.classList.toggle('hidden');
backDrop.style.display = 'flex';
if (isDev) {
filterButton.addEventListener('click', () => {
filterDropdown.style.display =
filterDropdown.style.display === 'block' ? 'none' : 'block';
});

filterOptions.forEach((option) => {
option.addEventListener('click', () => {
const filter = option.getAttribute('data-filter');
applyFilter(filter);
});
});
} else {
filterButton.addEventListener('click', () => {
filterModal.classList.toggle('hidden');
backDrop.style.display = 'flex';
});

backDrop.addEventListener('click', () => {
filterModal.classList.add('hidden');
backDrop.style.display = 'none';
});

applyFilterButton.addEventListener('click', () => {
const selectedFilterOption = document.querySelector(
'input[name="status"]:checked',
);

const selectedStatus = selectedFilterOption.value;
addQueryParamInUrl('status', selectedStatus);
changeFilter();
status = selectedStatus;
renderApplicationCards(nextLink, status);
});

clearButton.addEventListener('click', clearFilter);
}

function showAppliedFilter(filterApplied) {
filterLabel.classList.remove('hidden');
filterText.textContent =
'Status :' + filterApplied[0].toUpperCase() + filterApplied.substring(1);
}

function applyFilter(filter) {
if (filter.length > 0) {
if (!filterLabel.classList.contains('hidden')) {
filterLabel.classList.add('hidden');
}
addQueryParamInUrl('status', filter);
changeFilter();
status = filter;
renderApplicationCards(nextLink, status);
filterDropdown.style.display = 'none';
}
}

filterRemove.addEventListener('click', () => {
filterLabel.classList.add('hidden');
filterText.textContent = '';
removeQueryParamInUrl('status');
changeFilter();
renderApplicationCards(nextLink, status);
});

backDrop.addEventListener('click', () => {
Expand All @@ -431,19 +514,15 @@ backDrop.addEventListener('click', () => {
backDropBlur.addEventListener('click', closeApplicationDetails);
applicationCloseButton.addEventListener('click', closeApplicationDetails);

applyFilterButton.addEventListener('click', () => {
const selectedFilterOption = document.querySelector(
'input[name="status"]:checked',
);

const selectedStatus = selectedFilterOption.value;
addQueryParamInUrl('status', selectedStatus);
changeFilter();
status = selectedStatus;
renderApplicationCards(nextLink, status);
document.addEventListener('click', (e) => {
if (!filterButton.contains(e.target) && !filterDropdown.contains(e.target)) {
filterDropdown.style.display = 'none';
}
});

clearButton.addEventListener('click', clearFilter);
closeDropdownBtn.addEventListener('click', () => {
filterDropdown.style.display = 'none';
});

applicationAcceptButton.addEventListener('click', () =>
updateUserApplication({ isAccepted: true }),
Expand Down
96 changes: 96 additions & 0 deletions applications/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,96 @@ body {
overflow-y: auto;
}

.filter-container {
display: flex;
align-items: end;
gap: 10px;
margin: 20px;
}

.funnel-icon {
width: 1.2rem;
height: 1.5rem;
margin-left: 0.5rem;
}

.filter-menu .filter-button:hover {
background-color: var(--color-primary-hover);
}

.filter-menu .filter-button {
margin-left: auto;
background-color: var(--color-primary);
color: var(--white);
border: none;
border-radius: 0.4rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 9rem;
height: 2.5rem;
padding: 0.7rem;
}

.filter-dropdown {
width: 300px;
padding: 0;
margin: 0;
display: none;
position: absolute;
border: 1px solid var(--light-gray-color);
border-radius: 0.2rem;
background-color: var(--white);
}

.filter-dropdown div {
padding: 0.5rem 1rem 0.5rem 2rem;
color: var(--color-gray);
border: 1px solid var(--light-gray-color);
}

.filter-dropdown div:first-child {
font-weight: bold;
}

.filter-dropdown div:not(:first-child) {
padding-left: 4rem;
font-weight: normal;
}
.filter-dropdown div:not(:first-child):hover {
background-color: var(--light-gray-color);
cursor: pointer;
}

.filter-dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
}

/* Filter label */
.filter-label {
display: flex;
font-size: 14px;
font-weight: 600;
align-items: center;
color: var(--color-primary);
background-color: var(--white);
border: 1px solid var(--color-primary);
padding: 5px 10px;
border-radius: 50px;
}

.filter-text {
margin-right: 5px;
}

.filter-remove {
cursor: pointer;
font-size: 14px;
}

.filter-button:hover {
background-color: var(--color-primary-hover);
}
Expand Down Expand Up @@ -134,6 +218,18 @@ body {
justify-content: center;
}

.close-dropdown-btn {
font-weight: bold;
color: var(--color-gray);
text-align: center;
font-size: 12px;
background-color: var(--white);
border: none;
outline: none;
box-shadow: none;
cursor: pointer;
}

.modal-form {
text-align: initial;
padding: 0.5rem;
Expand Down

0 comments on commit 9184a6f

Please sign in to comment.