Skip to content

Commit 8181428

Browse files
Ajeyakrishna-kAjeyakrishna-k
authored
Changes in task request details page (#618)
* feat : adds pagination and integrates pagination api * feat : adds reject button and real time update for status * fix: failing tests * chore: remove unnecessary mock data * chore: minor css fixes
1 parent e23fc5c commit 8181428

File tree

6 files changed

+201
-75
lines changed

6 files changed

+201
-75
lines changed

‎__tests__/taskRequests/taskRequest.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('Task Requests', () => {
1212

1313
jest.setTimeout(60000);
1414

15-
beforeAll(async () => {
15+
beforeEach(async () => {
1616
browser = await puppeteer.launch({
1717
headless: 'new',
1818
ignoreHTTPSErrors: true,

‎__tests__/taskRequests/taskRequestDetails.test.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const {
44
defaultMockResponseHeaders,
55
} = require('../../mock-data/taskRequests');
66

7-
describe('Tests the User Management User Listing Screen', () => {
7+
describe('Task request details page', () => {
88
let browser;
99
let page;
1010
jest.setTimeout(60000);
@@ -32,18 +32,18 @@ describe('Tests the User Management User Listing Screen', () => {
3232
await page.goto(
3333
'http://localhost:8000/taskRequests/details/?id=dM5wwD9QsiTzi7eG7Oq5',
3434
);
35-
await page.waitForNetworkIdle();
36-
await page.click('.requestors__container__list__userDetails');
37-
await page.waitForSelector('#requestor_details_modal_content', {
38-
visible: true,
39-
});
4035
});
4136

4237
afterAll(async () => {
4338
await browser.close();
4439
});
4540

4641
it('Checks the Modal working as expected', async () => {
42+
await page.waitForNetworkIdle();
43+
await page.click('.info__more');
44+
await page.waitForSelector('#requestor_details_modal_content', {
45+
visible: true,
46+
});
4747
const modalHeading = await page.$eval(
4848
'[data-modal-header="requestor-details-header"]',
4949
(element) => element.textContent,
@@ -88,4 +88,11 @@ describe('Tests the User Management User Listing Screen', () => {
8888
'code change 3 days , testing - 2 days. total - 5 days',
8989
);
9090
});
91+
92+
it('Should contain Approve and Reject buttons', async function () {
93+
const approveButton = await page.$('.requestors__conatainer__list__button');
94+
const rejectButton = await page.$('.request-details__reject__button');
95+
expect(approveButton).toBeTruthy();
96+
expect(rejectButton).toBeTruthy();
97+
});
9198
});

‎mock-data/taskRequests/index.js‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,12 @@ const fetchedTaskRequests = [
2626
],
2727
requestors: [
2828
{
29-
userExists: true,
30-
user: {
31-
id: 'V4rqL1aDecNGoa1IxiCu',
32-
incompleteUserDetails: false,
33-
discordId: '12345',
34-
roles: {
35-
archived: false,
36-
},
37-
linkedin_id: 'uiram',
38-
last_name: 'Raghunathan',
39-
yoe: '5',
40-
github_display_name: 'Sriram',
41-
company_name: 'Juniper networks ',
42-
github_id: '19sriram',
43-
designation: 'Front end engineer',
44-
twitter_id: '19sriram',
45-
first_name: 'Sriram',
46-
username: '19sriram',
47-
},
29+
proposedStartDate: 1700304616479,
30+
proposedDeadline: 1700909416479,
31+
userId: 'eChYAP0kUwLo4wQ1gqMV',
32+
status: 'PENDING',
33+
username: 'ajeyak',
34+
first_name: 'Test first_name',
4835
},
4936
],
5037
},
@@ -57,13 +44,11 @@ const individualTaskReqDetail = {
5744
lastModifiedAt: 1698837978463,
5845
requestType: 'ASSIGNMENT',
5946
createdBy: 'randhir',
60-
requestors: ['SooJK37gzjIZfFNH0tlL'],
6147
lastModifiedBy: 'randhir',
6248
taskTitle: 'sample golang task s402',
6349
externalIssueUrl:
6450
'https://api.github.com/repos/Real-Dev-Squad/website-backend/issues/1310',
6551
taskId: '44SwDPe1r6AgoOtWq8EN',
66-
approvedTo: 'SooJK37gzjIZfFNH0tlL',
6752
users: [
6853
{
6954
proposedStartDate: 1698684354000,

‎taskRequests/details/index.html‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -52,28 +52,31 @@
5252
</div>
5353
</div>
5454

55-
<div class="requestors">
56-
<div class="requestors__container">
57-
<h4 class="requestors__container__title">Requestors</h4>
58-
<ul class="requestors__container__list" id="requestors-details"></ul>
59-
<ul
60-
class="
61-
requestors__container__list requestors__container__list__skeleton
62-
"
63-
>
64-
<li class="skeleton"></li>
65-
<li class="skeleton"></li>
66-
<li class="skeleton"></li>
67-
<li class="skeleton"></li>
68-
</ul>
69-
<!-- <div class="reject__container">
70-
<button
71-
id="reject-button"
72-
class="requestors__container__reject__button"
55+
<div class="request-details">
56+
<div class="requestors">
57+
<div class="requestors__container">
58+
<h4 class="requestors__container__title">Requestors</h4>
59+
<ul
60+
class="requestors__container__list"
61+
id="requestors-details"
62+
></ul>
63+
<ul
64+
class="
65+
requestors__container__list
66+
requestors__container__list__skeleton
67+
"
7368
>
74-
Reject
75-
</button>
76-
</div> -->
69+
<li class="skeleton"></li>
70+
<li class="skeleton"></li>
71+
<li class="skeleton"></li>
72+
<li class="skeleton"></li>
73+
</ul>
74+
</div>
75+
</div>
76+
<div class="reject__container">
77+
<button id="reject-button" class="request-details__reject__button">
78+
Reject
79+
</button>
7780
</div>
7881
</div>
7982
</div>

‎taskRequests/details/script.js‎

Lines changed: 74 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const API_BASE_URL = window.API_BASE_URL;
33
let taskRequest;
44

55
const taskRequestSkeleton = document.querySelector('.taskRequest__skeleton');
6+
const container = document.querySelector('.container');
67
const taskSkeleton = document.querySelector('.task__skeleton');
78
const requestorSkeleton = document.querySelector(
89
'.requestors__container__list__skeleton',
@@ -12,7 +13,7 @@ const taskRequestContainer = document.getElementById('task-request-details');
1213
const taskContainer = document.getElementById('task-details');
1314
const toast = document.getElementById('toast_task_details');
1415
const requestorsContainer = document.getElementById('requestors-details');
15-
16+
const rejectButton = document.getElementById('reject-button');
1617
const taskRequestId = new URLSearchParams(window.location.search).get('id');
1718
history.pushState({}, '', window.location.href);
1819
const errorMessage =
@@ -41,6 +42,7 @@ function renderTaskRequestDetails(taskRequest) {
4142
createCustomElement({
4243
tagName: 'span',
4344
textContent: taskRequest?.status,
45+
id: 'taskRequest__status_text',
4446
class: [
4547
'taskRequest__status__chip',
4648
`taskRequest__status__chip--${taskRequest?.status?.toLowerCase()}`,
@@ -66,6 +68,16 @@ function renderTaskRequestDetails(taskRequest) {
6668
);
6769
}
6870

71+
function updateStatus(status) {
72+
const statusText = document.getElementById('taskRequest__status_text');
73+
statusText.classList = [];
74+
statusText.classList.add('taskRequest__status__chip');
75+
statusText.classList.add(
76+
`taskRequest__status__chip--${status?.toLowerCase()}`,
77+
);
78+
statusText.textContent = status;
79+
}
80+
6981
async function renderTaskDetails(taskRequest) {
7082
const { taskId, taskTitle } = taskRequest;
7183
try {
@@ -147,9 +159,12 @@ function getAvatar(user) {
147159
});
148160
}
149161

150-
async function approveTaskRequest(userId) {
162+
async function updateTaskRequest(action, userId) {
163+
const removeSpinner = addSpinner(container);
164+
container.classList.add('container-disabled');
151165
try {
152-
const res = await fetch(`${API_BASE_URL}/taskRequests/approve`, {
166+
const queryParams = new URLSearchParams({ action: action });
167+
const res = await fetch(`${API_BASE_URL}/taskRequests?${queryParams}`, {
153168
credentials: 'include',
154169
method: 'PATCH',
155170
body: JSON.stringify({
@@ -162,22 +177,28 @@ async function approveTaskRequest(userId) {
162177
});
163178

164179
if (res.ok) {
165-
showToast('Task Approved Successfully', 'success');
180+
showToast('Task updated Successfully', 'success');
166181
taskRequest = await fetchTaskRequest();
167182
requestorsContainer.innerHTML = '';
168-
renderRequestors(taskRequest?.requestors);
183+
updateStatus(taskRequest.status);
184+
renderRequestors(taskRequest);
185+
renderRejectButton(taskRequest);
186+
return res;
169187
} else {
170188
showToast(errorMessage, 'failure');
171189
}
172190
} catch (e) {
173191
showToast(errorMessage, 'failure');
174192
console.error(e);
193+
} finally {
194+
removeSpinner();
195+
container.classList.remove('container-disabled');
175196
}
176197
}
177198

178199
function getActionButton(requestor) {
179200
if (taskRequest?.status === taskRequestStatus.APPROVED) {
180-
if (taskRequest?.approvedTo === requestor?.user?.id) {
201+
if (taskRequest.approvedTo === requestor?.user?.id) {
181202
return createCustomElement({
182203
tagName: 'p',
183204
textContent: 'Approved',
@@ -192,17 +213,22 @@ function getActionButton(requestor) {
192213
textContent: 'Approve',
193214
class: 'requestors__conatainer__list__button',
194215
eventListeners: [
195-
{ event: 'click', func: () => approveTaskRequest(requestor.user?.id) },
216+
{
217+
event: 'click',
218+
func: () =>
219+
updateTaskRequest(TaskRequestAction.APPROVE, requestor.user?.id),
220+
},
196221
],
197222
});
198223
}
199224

200-
async function renderRequestors(requestors) {
225+
async function renderRequestors(taskRequest) {
226+
const requestors = taskRequest?.users;
201227
requestorSkeleton.classList.remove('hidden');
202228
const data = await Promise.all(
203229
requestors.map((requestor) => {
204-
return fetch(`${API_BASE_URL}/users/userId/${requestor}`).then((res) =>
205-
res.json(),
230+
return fetch(`${API_BASE_URL}/users/userId/${requestor.userId}`).then(
231+
(res) => res.json(),
206232
);
207233
}),
208234
);
@@ -223,22 +249,35 @@ async function renderRequestors(requestors) {
223249
child: [getAvatar(requestor)],
224250
}),
225251
createCustomElement({
226-
tagName: 'p',
227-
textContent: requestor.user?.first_name,
252+
tagName: 'div',
253+
class: 'requestors__container__list__userDetails__info',
254+
child: [
255+
createCustomElement({
256+
tagName: 'p',
257+
class: 'info__name',
258+
textContent: requestor.user?.first_name,
259+
}),
260+
createCustomElement({
261+
tagName: 'a',
262+
textContent: 'details>',
263+
class: 'info__more',
264+
eventListeners: [
265+
{
266+
event: 'click',
267+
func: () => populateModalContent(index),
268+
},
269+
],
270+
}),
271+
],
228272
}),
229273
],
230274
}),
231-
getActionButton(requestor),
275+
taskRequest.status !== 'DENIED' ? getActionButton(requestor) : '',
232276
],
233277
});
234278
const avatarDiv = userDetailsDiv.querySelector(
235279
'.requestors__container__list__userDetails__avatar',
236280
);
237-
const firstNameParagraph = userDetailsDiv.querySelector('p');
238-
avatarDiv.addEventListener('click', () => populateModalContent(index));
239-
firstNameParagraph.addEventListener('click', () =>
240-
populateModalContent(index),
241-
);
242281
requestorsContainer.append(userDetailsDiv);
243282
});
244283
}
@@ -249,19 +288,34 @@ async function fetchTaskRequest() {
249288
});
250289

251290
const { data } = await res.json();
291+
const approvedTo = data.users
292+
.filter((user) => user.status === 'APPROVED')
293+
?.map((user) => user.userId)?.[0];
294+
data.approvedTo = approvedTo;
252295
return data;
253296
}
297+
const renderRejectButton = (taskRequest) => {
298+
if (taskRequest?.status !== 'PENDING') {
299+
rejectButton.disabled = true;
300+
}
254301

302+
rejectButton.addEventListener('click', async () => {
303+
const res = await updateTaskRequest(TaskRequestAction.REJECT);
304+
if (res?.ok) {
305+
rejectButton.disabled = true;
306+
}
307+
});
308+
};
255309
const renderTaskRequest = async () => {
256310
taskRequestSkeleton.classList.remove('hidden');
257311
taskContainer.classList.remove('hidden');
258312
try {
259313
taskRequest = await fetchTaskRequest();
260314
taskRequestSkeleton.classList.add('hidden');
261-
315+
renderRejectButton(taskRequest);
262316
renderTaskRequestDetails(taskRequest);
263317
renderTaskDetails(taskRequest);
264-
renderRequestors(taskRequest?.requestors);
318+
renderRequestors(taskRequest);
265319
} catch (e) {
266320
console.error(e);
267321
}

0 commit comments

Comments
 (0)