Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes in task request details page #618

Merged
merged 7 commits into from
Nov 30, 2023
Merged

Changes in task request details page #618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
61315b2
feat : adds pagination and integrates pagination api
Ajeyakrishna-k Nov 20, 2023
7ce618d
feat : adds reject button and real time update for status
Ajeyakrishna-k Nov 20, 2023
7d20244
fix: failing tests
Ajeyakrishna-k Nov 20, 2023
3716403
Merge branch 'fix/task-requests-issues' into feat/task-requests-details
Ajeyakrishna-k Nov 20, 2023
0a1ad55
chore: remove unnecessary mock data
Ajeyakrishna-k Nov 20, 2023
9b13b61
chore: minor css fixes
Ajeyakrishna-k Nov 27, 2023
cc0a77e
Merge branch 'develop' into feat/task-requests-details
Ajeyakrishna-k Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion __tests__/taskRequests/taskRequest.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('Task Requests', () => {

jest.setTimeout(60000);

beforeAll(async () => {
beforeEach(async () => {
vinit717 marked this conversation as resolved.
Show resolved Hide resolved
browser = await puppeteer.launch({
headless: 'new',
ignoreHTTPSErrors: true,
Expand Down
19 changes: 13 additions & 6 deletions __tests__/taskRequests/taskRequestDetails.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const {
defaultMockResponseHeaders,
} = require('../../mock-data/taskRequests');

describe('Tests the User Management User Listing Screen', () => {
describe('Task request details page', () => {
let browser;
let page;
jest.setTimeout(60000);
Expand Down Expand Up @@ -32,18 +32,18 @@ describe('Tests the User Management User Listing Screen', () => {
await page.goto(
'http://localhost:8000/taskRequests/details/?id=dM5wwD9QsiTzi7eG7Oq5',
);
await page.waitForNetworkIdle();
await page.click('.requestors__container__list__userDetails');
await page.waitForSelector('#requestor_details_modal_content', {
visible: true,
});
});

afterAll(async () => {
await browser.close();
});

it('Checks the Modal working as expected', async () => {
await page.waitForNetworkIdle();
await page.click('.info__more');
await page.waitForSelector('#requestor_details_modal_content', {
visible: true,
});
const modalHeading = await page.$eval(
'[data-modal-header="requestor-details-header"]',
(element) => element.textContent,
Expand Down Expand Up @@ -88,4 +88,11 @@ describe('Tests the User Management User Listing Screen', () => {
'code change 3 days , testing - 2 days. total - 5 days',
);
});

it('Should contain Approve and Reject buttons', async function () {
const approveButton = await page.$('.requestors__conatainer__list__button');
const rejectButton = await page.$('.request-details__reject__button');
expect(approveButton).toBeTruthy();
expect(rejectButton).toBeTruthy();
});
});
27 changes: 6 additions & 21 deletions mock-data/taskRequests/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,12 @@ const fetchedTaskRequests = [
],
requestors: [
{
userExists: true,
user: {
id: 'V4rqL1aDecNGoa1IxiCu',
incompleteUserDetails: false,
discordId: '12345',
roles: {
archived: false,
},
linkedin_id: 'uiram',
last_name: 'Raghunathan',
yoe: '5',
github_display_name: 'Sriram',
company_name: 'Juniper networks ',
github_id: '19sriram',
designation: 'Front end engineer',
twitter_id: '19sriram',
first_name: 'Sriram',
username: '19sriram',
},
proposedStartDate: 1700304616479,
proposedDeadline: 1700909416479,
userId: 'eChYAP0kUwLo4wQ1gqMV',
status: 'PENDING',
username: 'ajeyak',
first_name: 'Test first_name',
},
],
},
Expand All @@ -57,13 +44,11 @@ const individualTaskReqDetail = {
lastModifiedAt: 1698837978463,
requestType: 'ASSIGNMENT',
createdBy: 'randhir',
requestors: ['SooJK37gzjIZfFNH0tlL'],
lastModifiedBy: 'randhir',
taskTitle: 'sample golang task s402',
externalIssueUrl:
'https://api.github.com/repos/Real-Dev-Squad/website-backend/issues/1310',
taskId: '44SwDPe1r6AgoOtWq8EN',
approvedTo: 'SooJK37gzjIZfFNH0tlL',
users: [
{
proposedStartDate: 1698684354000,
Expand Down
45 changes: 24 additions & 21 deletions taskRequests/details/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,28 +52,31 @@
</div>
</div>

<div class="requestors">
<div class="requestors__container">
<h4 class="requestors__container__title">Requestors</h4>
<ul class="requestors__container__list" id="requestors-details"></ul>
<ul
class="
requestors__container__list requestors__container__list__skeleton
"
>
<li class="skeleton"></li>
<li class="skeleton"></li>
<li class="skeleton"></li>
<li class="skeleton"></li>
</ul>
<!-- <div class="reject__container">
<button
id="reject-button"
class="requestors__container__reject__button"
<div class="request-details">
<div class="requestors">
<div class="requestors__container">
<h4 class="requestors__container__title">Requestors</h4>
<ul
class="requestors__container__list"
id="requestors-details"
></ul>
<ul
class="
requestors__container__list
requestors__container__list__skeleton
"
>
Reject
</button>
</div> -->
<li class="skeleton"></li>
<li class="skeleton"></li>
<li class="skeleton"></li>
<li class="skeleton"></li>
</ul>
</div>
</div>
<div class="reject__container">
<button id="reject-button" class="request-details__reject__button">
Reject
</button>
</div>
</div>
</div>
Expand Down
94 changes: 74 additions & 20 deletions taskRequests/details/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const API_BASE_URL = window.API_BASE_URL;
let taskRequest;

const taskRequestSkeleton = document.querySelector('.taskRequest__skeleton');
const container = document.querySelector('.container');
const taskSkeleton = document.querySelector('.task__skeleton');
const requestorSkeleton = document.querySelector(
'.requestors__container__list__skeleton',
Expand All @@ -12,7 +13,7 @@ const taskRequestContainer = document.getElementById('task-request-details');
const taskContainer = document.getElementById('task-details');
const toast = document.getElementById('toast_task_details');
const requestorsContainer = document.getElementById('requestors-details');

const rejectButton = document.getElementById('reject-button');
const taskRequestId = new URLSearchParams(window.location.search).get('id');
history.pushState({}, '', window.location.href);
const errorMessage =
Expand Down Expand Up @@ -41,6 +42,7 @@ function renderTaskRequestDetails(taskRequest) {
createCustomElement({
tagName: 'span',
textContent: taskRequest?.status,
id: 'taskRequest__status_text',
class: [
'taskRequest__status__chip',
`taskRequest__status__chip--${taskRequest?.status?.toLowerCase()}`,
Expand All @@ -66,6 +68,16 @@ function renderTaskRequestDetails(taskRequest) {
);
}

function updateStatus(status) {
const statusText = document.getElementById('taskRequest__status_text');
statusText.classList = [];
statusText.classList.add('taskRequest__status__chip');
statusText.classList.add(
`taskRequest__status__chip--${status?.toLowerCase()}`,
);
ajoykumardas12 marked this conversation as resolved.
Show resolved Hide resolved
statusText.textContent = status;
}

async function renderTaskDetails(taskRequest) {
const { taskId, taskTitle } = taskRequest;
try {
Expand Down Expand Up @@ -147,9 +159,12 @@ function getAvatar(user) {
});
}

async function approveTaskRequest(userId) {
async function updateTaskRequest(action, userId) {
const removeSpinner = addSpinner(container);
vinit717 marked this conversation as resolved.
Show resolved Hide resolved
container.classList.add('container-disabled');
try {
const res = await fetch(`${API_BASE_URL}/taskRequests/approve`, {
const queryParams = new URLSearchParams({ action: action });
const res = await fetch(`${API_BASE_URL}/taskRequests?${queryParams}`, {
credentials: 'include',
method: 'PATCH',
body: JSON.stringify({
Expand All @@ -162,22 +177,28 @@ async function approveTaskRequest(userId) {
});

if (res.ok) {
showToast('Task Approved Successfully', 'success');
showToast('Task updated Successfully', 'success');
taskRequest = await fetchTaskRequest();
requestorsContainer.innerHTML = '';
renderRequestors(taskRequest?.requestors);
updateStatus(taskRequest.status);
renderRequestors(taskRequest);
renderRejectButton(taskRequest);
return res;
} else {
showToast(errorMessage, 'failure');
}
} catch (e) {
showToast(errorMessage, 'failure');
console.error(e);
} finally {
removeSpinner();
container.classList.remove('container-disabled');
}
}

function getActionButton(requestor) {
if (taskRequest?.status === taskRequestStatus.APPROVED) {
if (taskRequest?.approvedTo === requestor?.user?.id) {
if (taskRequest.approvedTo === requestor?.user?.id) {
return createCustomElement({
tagName: 'p',
textContent: 'Approved',
Expand All @@ -192,17 +213,22 @@ function getActionButton(requestor) {
textContent: 'Approve',
class: 'requestors__conatainer__list__button',
eventListeners: [
{ event: 'click', func: () => approveTaskRequest(requestor.user?.id) },
{
event: 'click',
func: () =>
updateTaskRequest(TaskRequestAction.APPROVE, requestor.user?.id),
},
],
});
}

async function renderRequestors(requestors) {
async function renderRequestors(taskRequest) {
const requestors = taskRequest?.users;
requestorSkeleton.classList.remove('hidden');
const data = await Promise.all(
requestors.map((requestor) => {
return fetch(`${API_BASE_URL}/users/userId/${requestor}`).then((res) =>
res.json(),
return fetch(`${API_BASE_URL}/users/userId/${requestor.userId}`).then(
(res) => res.json(),
);
}),
);
Expand All @@ -223,22 +249,35 @@ async function renderRequestors(requestors) {
child: [getAvatar(requestor)],
}),
createCustomElement({
tagName: 'p',
textContent: requestor.user?.first_name,
tagName: 'div',
class: 'requestors__container__list__userDetails__info',
child: [
createCustomElement({
tagName: 'p',
class: 'info__name',
textContent: requestor.user?.first_name,
}),
createCustomElement({
tagName: 'a',
textContent: 'details>',
class: 'info__more',
eventListeners: [
{
event: 'click',
func: () => populateModalContent(index),
},
],
}),
],
}),
],
}),
getActionButton(requestor),
taskRequest.status !== 'DENIED' ? getActionButton(requestor) : '',
],
});
const avatarDiv = userDetailsDiv.querySelector(
'.requestors__container__list__userDetails__avatar',
);
const firstNameParagraph = userDetailsDiv.querySelector('p');
avatarDiv.addEventListener('click', () => populateModalContent(index));
firstNameParagraph.addEventListener('click', () =>
populateModalContent(index),
);
requestorsContainer.append(userDetailsDiv);
});
}
Expand All @@ -249,19 +288,34 @@ async function fetchTaskRequest() {
});

const { data } = await res.json();
const approvedTo = data.users
.filter((user) => user.status === 'APPROVED')
?.map((user) => user.userId)?.[0];
data.approvedTo = approvedTo;
return data;
}
const renderRejectButton = (taskRequest) => {
if (taskRequest?.status !== 'PENDING') {
rejectButton.disabled = true;
}

rejectButton.addEventListener('click', async () => {
const res = await updateTaskRequest(TaskRequestAction.REJECT);
if (res?.ok) {
rejectButton.disabled = true;
}
});
};
const renderTaskRequest = async () => {
taskRequestSkeleton.classList.remove('hidden');
taskContainer.classList.remove('hidden');
try {
taskRequest = await fetchTaskRequest();
taskRequestSkeleton.classList.add('hidden');

renderRejectButton(taskRequest);
renderTaskRequestDetails(taskRequest);
renderTaskDetails(taskRequest);
renderRequestors(taskRequest?.requestors);
renderRequestors(taskRequest);
} catch (e) {
console.error(e);
}
Expand Down
Loading
Loading