Skip to content

Commit

Permalink
feat: Add api integration for task requests
Browse files Browse the repository at this point in the history
  • Loading branch information
@TanishqSingla
TanishqSingla committed Jul 14, 2023
1 parent c880138 commit 3131595
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 55 deletions.
51 changes: 9 additions & 42 deletions taskRequests/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -14,6 +14,7 @@

<title>Task Requests | Real Dev Squad</title>
<link rel="stylesheet" href="./style.css" />
<script src="/helpers/loadENV.js"></script>
<script src="./script.js" defer></script>
</head>

Expand All @@ -28,52 +29,18 @@
<h1 class="container__title">Task Request</h1>
<div class="container__body">
<div class="container__body__loader hidden">Loading...</div>
<div class="container__filters">
<select defaultValue="" class="container__filters__status">
<div class="container__filters hidden">
<select
id="status"
defaultValue=""
class="container__filters__status"
>
<option value="">All</option>
<option value="WAITING">Waiting</option>
<option value="APPROVED">Approved</option>
</select>
<select defaultValue="newest" class="container__filters__status">
<option value="oldest">Oldest</option>
<option value="newest">Newest</option>
</select>
</div>
<div id="task-request-container" class="taskRequest">
<div class="taskRequest__card">
<div class="taskRequest__card__header">
<h3 class="taskRequest__card__header__title">
Long Sample title for testing on cards
</h3>
<div
class="taskRequest__card__header__status taskRequest__card__header__status--approved"
title="approved"
></div>
</div>
<div class="taskRequest__card__body">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic
asperiores minus tenetur ipsum iste delectus consequatur
incidunt ex ratione, sit accusantium fuga aspernatur, accusamus
sed, sequi optio porro adipisci temporibus.
</p>
</div>
<div class="taskRequest__card__footer">
<p>Requested By</p>
<div class="taskRequest__card__footer__requestor">
<div class="taskRequest__card__footer__requestor__avatar">
<img src="https://tanishqsingla.vercel.app/pfp.webp" alt="" />
</div>
<div class="taskRequest__card__footer__requestor__avatar">
<img src="https://tanishqsingla.vercel.app/pfp.webp" alt="" />
</div>
<div class="taskRequest__card__footer__requestor__avatar">
<span>+3</span>
</div>
</div>
</div>
</div>
</div>
<div id="task-request-container" class="taskRequest"></div>
</div>
</div>
</body>
Expand Down
48 changes: 39 additions & 9 deletions taskRequests/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const taskRequestStatus = {
const API_BASE_URL = window.API_BASE_URL;
const taskRequestContainer = document.getElementById('task-request-container');
const containerBody = document.querySelector('.container__body');
const filterContainer = document.querySelector('.container__filters');

const fetchedTaskRequests = [];

Expand All @@ -19,6 +20,11 @@ function createCustomElement(domObjectMap) {
if (key === 'tagName') {
continue;
}
if (key === 'eventListeners') {
value.forEach((obj) => {
el.addEventListener(obj.event, obj.func);
});
}
if (key === 'class') {
if (Array.isArray(value)) {
el.classList.add(...value);
Expand All @@ -37,11 +43,11 @@ function createCustomElement(domObjectMap) {
async function getTaskRequests() {
startLoading();
try {
const res = await fetch(`http://localhost:3000/taskRequests`);
const res = await fetch(`${API_BASE_URL}/taskRequests`);

if (res.ok) {
const data = await res.json();
fetchedTaskRequests = [...data.data];
fetchedTaskRequests.push(...data.data);
return;
}

Expand All @@ -58,6 +64,11 @@ async function getTaskRequests() {
return;
}

if (res.status === 404) {
showMessage('ERROR', 'Task Requests not found');
return;
}

showMessage('ERROR', 'Unexpected error occurred');
} catch (e) {
console.log(e);
Expand Down Expand Up @@ -87,22 +98,27 @@ function getAvatar(user) {
}
return createCustomElement({
tagName: 'span',
textContent: user.user.charAt(0),
textContent: user.user.first_name[0],
});
}
function getRemainingCount(requestors) {
if(requestors.length > 3) {
if (requestors.length > 3) {
return createCustomElement({
tagName: 'span',
textContent: `+${requestors.length - 3}`,
})
});
}
}

function createTaskRequestCard({ title, description, requestors, status }) {
function openTaskDetails(id) {
window.location.href = new URL(`/taskRequest/details?id=${id}`, API_BASE_URL);
}

function createTaskRequestCard({ id, task, description, requestors, status }) {
const card = createCustomElement({
tagName: 'div',
class: 'taskRequest__card',
eventListeners: [{ event: 'click', func: (e) => openTaskDetails(id, e) }],
child: [
createCustomElement({
tagName: 'div',
Expand All @@ -111,7 +127,7 @@ function createTaskRequestCard({ title, description, requestors, status }) {
createCustomElement({
tagName: 'h3',
class: 'taskRequest__card__header__title',
textContent: title,
textContent: task.title,
}),
createCustomElement({
tagName: 'div',
Expand Down Expand Up @@ -146,7 +162,7 @@ function createTaskRequestCard({ title, description, requestors, status }) {
class: 'taskRequest__card__footer__requestor',
child: [
...requestors.map((requestor, index) => {
if (index < 2) {
if (index < 3) {
return createCustomElement({
tagName: 'div',
class: 'taskRequest__card__footer__requestor__avatar',
Expand All @@ -155,7 +171,7 @@ function createTaskRequestCard({ title, description, requestors, status }) {
});
}
}),
getRemainingCount(requestors),
getRemainingCount(requestors) || '',
],
}),
],
Expand All @@ -164,3 +180,17 @@ function createTaskRequestCard({ title, description, requestors, status }) {
});
return card;
}

function renderTaskRequestCards(taskRequests) {
if (taskRequests.length > 0) {
filterContainer.classList.remove('hidden');
taskRequests.forEach((taskRequest) => {
taskRequestContainer.appendChild(createTaskRequestCard(taskRequest));
});
}
}

(async () => {
await getTaskRequests();
renderTaskRequestCards(fetchedTaskRequests);
})();
16 changes: 12 additions & 4 deletions taskRequests/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ body {
}

.hidden {
display: none;
display: none !important;
}

.header {
Expand Down Expand Up @@ -69,16 +69,24 @@ body {
color: #da1e28;
}
.taskRequest__card {
cursor: pointer;
padding: 1rem;
box-shadow:
0 1px 3px 1px rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
border-radius: 0.5rem;
min-width: 16rem;
display: flex;
flex-flow: column;
gap: 0.5rem;
}
.taskRequest__card:hover {
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3),
0px 4px 8px 3px rgba(0, 0, 0, 0.15);
transition: 300ms ease-in;
}
.taskRequest__card:active {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
transition: 100ms ease-in;
}
.taskRequest__card__header {
display: flex;
justify-content: space-between;
Expand Down

0 comments on commit 3131595

Please sign in to comment.