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

Jump to bottom

feat: Add task request details page #404

Merged
merged 8 commits into from
Aug 5, 2023
Merged

feat: Add task request details page #404

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
db44f8d
feat: Add task request details page
TanishqSingla Jul 15, 2023
24caf85
fix: task request title skeleton
TanishqSingla Jul 15, 2023
0ff42db
fix: console statements and variable names
TanishqSingla Jul 15, 2023
b8d4b35
feat: Add approve api call to button
TanishqSingla Jul 15, 2023
b7e5759
fix: Review comments
TanishqSingla Jul 15, 2023
8d33633
fix: use console.error instead of console.log for catch
TanishqSingla Jul 15, 2023
158638c
Merge branch 'feat/task-request' into feat/task-request-details
sahsisunny Jul 27, 2023
8388200
fix: review comments
TanishqSingla Jul 30, 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
71 changes: 71 additions & 0 deletions taskRequests/details/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/images/index.ico" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />

<title>Task Requests | Real Dev Squad</title>
<script src="/helpers/loadENV.js"></script>
<script src="/taskRequests/util.js"></script>
<script src="./script.js" defer></script>
</head>
<body>
<div class="header">
<div class="header__contents">
<img
src="/taskRequests/assets/RDSLogo.png"
alt="RDS logo"
height="48"
width="48"
/>
<a href="/" class="header__contents__navlink">Home</a>
</div>
</div>
<div class="container">
<div id="task-request-details" class="taskRequest">
<div class="taskRequest__skeleton">
<div class="taskRequest__skeleton__title skeleton"></div>
<div class="taskRequest__skeleton__subtitle skeleton"></div>
</div>
</div>

<div id="task-details" class="task">
<div class="task__skeleton">
<div class="task__skeleton__title skeleton"></div>
<div class="task__skeleton__details skeleton"></div>
<div class="task__skeleton__details skeleton"></div>
<div class="task__skeleton__description skeleton"></div>
<div class="task__skeleton__description skeleton"></div>
<div class="task__skeleton__description skeleton"></div>
<div class="task__skeleton__description skeleton"></div>
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
</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>
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</div>
</div>
</div>
</body>
</html>
241 changes: 241 additions & 0 deletions taskRequests/details/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
const API_BASE_URL = window.API_BASE_URL;

const taskRequestStatus = {
WAITING: 'WAITING',
APPROVED: 'APPROVED',
};

let taskRequest;

const taskRequestSkeleton = document.querySelector('.taskRequest__skeleton');
const taskSkeleton = document.querySelector('.task__skeleton');
const requestorSkeleton = document.querySelector(
'.requestors__container__list__skeleton',
);

const taskRequestContainer = document.getElementById('task-request-details');
const taskContainer = document.getElementById('task-details');
const requestorsContainer = document.getElementById('requestors-details');

const taskRequestId = new URLSearchParams(window.location.search).get('id');
history.pushState({}, '', window.location.href);

let taskId;

function renderTaskRequestDetails(taskRequest) {
taskRequestContainer.append(
createCustomElement({
tagName: 'h1',
textContent: `Task Request `,
class: 'taskRequest__title',
child: [
createCustomElement({
tagName: 'span',
class: 'taskRequest__title__subtitle',
textContent: `#${taskRequest.id}`,
}),
],
}),
createCustomElement({
tagName: 'p',
textContent: 'Status: ',
class: 'taskRequest__status',
child: [
createCustomElement({
tagName: 'span',
textContent: taskRequest.status,
class: [
'taskRequest__status__chip',
`taskRequest__status__chip--${taskRequest.status.toLowerCase()}`,
],
}),
],
}),
);
}

async function renderTaskDetails(taskId) {
try {
const res = await fetch(`${API_BASE_URL}/tasks/${taskId}/details`);
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
taskSkeleton.classList.add('hidden');
const data = await res.json();

const { taskData } = data ?? {};

taskContainer.append(
createCustomElement({
tagName: 'h2',
class: 'task__title',
textContent: taskData?.title || 'N/A',
}),
createCustomElement({
tagName: 'p',
class: 'task_type',
textContent: 'Type: ',
child: [
taskData?.type
? createCustomElement({
tagName: 'span',
class: [
'task__type__chip',
`task__type__chip--${taskData.type}`,
],
textContent: taskData?.type,
})
: '',
taskData?.isNoteworthy
? createCustomElement({
tagName: 'span',
class: ['task__type__chip', `task__type__chip--noteworthy`],
textContent: 'Note worthy',
})
: '',
],
}),
createCustomElement({
tagName: 'p',
class: 'task__createdBy',
textContent: `Created By: `,
child: [
createCustomElement({
tagName: 'a',
href: `https://members.realdevsquad.com/${taskData.createdBy}`,
textContent: taskData?.createdBy || 'N/A',
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
}),
],
}),
createCustomElement({
tagName: 'p',
class: 'task__purpose',
textContent: taskData?.purpose || 'N/A',
}),
);
} catch (e) {
console.error(e);
}
}

function getAvatar(user) {
if (user.user?.picture?.url) {
return createCustomElement({
tagName: 'img',
src: user.user.picture.url,
alt: user.user.first_name,
title: user.user.first_name,
});
}
return createCustomElement({
tagName: 'span',
title: user.user.first_name,
textContent: user.user.first_name[0],
});
}

async function approveTaskRequest(userId) {
try {
console.error(taskRequestId, userId);
const res = await fetch(`${API_BASE_URL}/taskRequests/approve`, {
credentials: 'include',
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
method: 'PATCH',
body: JSON.stringify({
taskRequestId: taskRequestId,
userId,
}),
headers: {
'Content-Type': 'application/json',
},
});

if (res.ok) {
taskRequest = await fetchTaskRequest();
requestorsContainer.innerHTML = '';
renderRequestors(taskRequest.requestors);
}
} catch (e) {
console.error(e);
}
}

function getActionButton(requestor) {
if (taskRequest.status === taskRequestStatus.APPROVED) {
if (taskRequest?.approvedTo === requestor.user.id) {
return createCustomElement({
tagName: 'p',
textContent: 'Approved',
class: ['requestors__container__list__approved'],
});
} else {
return '';
}
}
return createCustomElement({
tagName: 'button',
textContent: 'Approve',
class: 'requestors__conatainer__list__button',
eventListeners: [
{ event: 'click', func: () => approveTaskRequest(requestor.user.id) },
],
});
}

async function renderRequestors(requestors) {
requestorSkeleton.classList.remove('hidden');
const data = await Promise.all(
requestors.map((requestor) => {
return fetch(`${API_BASE_URL}/users/userId/${requestor}`).then((res) =>
res.json(),
);
}),
);

requestorSkeleton.classList.add('hidden');

data.forEach((requestor) => {
requestorsContainer.append(
createCustomElement({
tagName: 'li',
child: [
createCustomElement({
tagName: 'div',
class: 'requestors__container__list__userDetails',
child: [
createCustomElement({
tagName: 'div',
class: 'requestors__container__list__userDetails__avatar',
child: [getAvatar(requestor)],
}),
createCustomElement({
tagName: 'p',
textContent: requestor.user.first_name,
}),
],
}),
getActionButton(requestor),
],
}),
);
});
}

async function fetchTaskRequest() {
const res = await fetch(`${API_BASE_URL}/taskRequests/${taskRequestId}`);
const data = await res.json();
return data.data;
}

const renderTaskRequest = async () => {
taskRequestSkeleton.classList.remove('hidden');
taskContainer.classList.remove('hidden');
try {
taskRequest = await fetchTaskRequest();
taskRequestSkeleton.classList.add('hidden');

renderTaskRequestDetails(taskRequest);
renderTaskDetails(taskRequest.taskId);
renderRequestors(taskRequest.requestors);
} catch (e) {
console.error(e);
}
};

renderTaskRequest();
Loading
Loading