Real-Dev-Squad · TanishqSingla · Jul 13, 2023 · Jul 14, 2023 · Jul 15, 2023 · Jul 15, 2023
diff --git a/taskRequests/assets/RDSLogo.png b/taskRequests/assets/RDSLogo.png
diff --git a/taskRequests/constants.js b/taskRequests/constants.js
@@ -0,0 +1,12 @@
+const taskRequestStatus = {
+  WAITING: 'WAITING',
+  APPROVED: 'APPROVED',
+};
+
+const ErrorMessages = {
+  UNAUTHENTICATED:
+    'You are unauthenticated to view this section, please login!',
+  UNAUTHORIZED: 'You are unauthrozed to view this section',
+  NOT_FOUND: 'Task Requests not found',
+  SERVER_ERROR: 'Unexpected error occurred',
+};
diff --git a/taskRequests/index.html b/taskRequests/index.html
@@ -0,0 +1,48 @@
+<!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"
+    />
+
+    <title>Task Requests | Real Dev Squad</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script src="/helpers/loadENV.js"></script>
+    <script src="./constants.js"></script>
+    <script src="./script.js" defer></script>
+  </head>
+
+  <body>
+    <div class="header">
+      <div class="header__contents">
+        <img src="./assets/RDSLogo.png" alt="RDS logo" height="48" width="48" />
+        <a href="/index.html" class="header__contents__navlink">Home</a>
+      </div>
+    </div>
+    <div class="container">
+      <h1 class="container__title">Task Request</h1>
+      <div class="container__body">
+        <div class="container__body__loader hidden">Loading...</div>
+        <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>
+        </div>
+        <div id="task-request-container" class="taskRequest"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/taskRequests/script.js b/taskRequests/script.js
@@ -0,0 +1,188 @@
+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 = [];
+
+const loader = document.querySelector('.container__body__loader');
+const startLoading = () => loader.classList.remove('hidden');
+const stopLoading = () => loader.classList.add('hidden');
+
+function createCustomElement(domObjectMap) {
+  const el = document.createElement(domObjectMap.tagName);
+  for (const [key, value] of Object.entries(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);
+      } else {
+        el.classList.add(value);
+      }
+    } else if (key === 'child') {
+      el.append(...value);
+    } else {
+      el[key] = value;
+    }
+  }
+  return el;
+}
+
+async function getTaskRequests() {
+  startLoading();
+  try {
+    const res = await fetch(`${API_BASE_URL}/taskRequests`);
+
+    if (res.ok) {
+      const data = await res.json();
+      fetchedTaskRequests.push(...data.data);
+      return;
+    }
+
+    if (res.status === 401) {
+      showMessage('ERROR', ErrorMessages.UNAUTHENTICATED);
+      return;
+    }
+
+    if (res.status === 403) {
+      showMessage('ERROR', ErrorMessages.UNAUTHORIZED);
+      return;
+    }
+
+    if (res.status === 404) {
+      showMessage('ERROR', ErrorMessages.NOT_FOUND);
+      return;
+    }
+
+    showMessage('ERROR', ErrorMessages.SERVER_ERROR);
+  } catch (e) {
+    console.log(e);
+  } finally {
+    stopLoading();
+  }
+}
+
+function showMessage(type, message) {
+  const p = document.createElement('p');
+  const classes = ['taskRequest__message'];
+  if (type === 'ERROR') {
+    classes.push('taskRequest__message--error');
+  }
+  p.classList.add(...classes);
+  p.textContent = message;
+  containerBody.innerHTML = '';
+  containerBody.appendChild(p);
+}
+
+function getAvatar(user) {
+  if (user.user?.picture?.url) {
+    return createCustomElement({
+      tagName: 'img',
+      src: user.user?.picture?.url,
+    });
+  }
+  return createCustomElement({
+    tagName: 'span',
+    textContent: user.user.first_name[0],
+  });
+}
+function getRemainingCount(requestors) {
+  if (requestors.length > 3) {
+    return createCustomElement({
+      tagName: 'span',
+      textContent: `+${requestors.length - 3}`,
+    });
+  }
+}
+
+function openTaskDetails(id) {
+  window.location.href = new URL(`/taskRequest/details?id=${id}`, API_BASE_URL);
+}
+
+function createTaskRequestCard({ id, task, requestors, status }) {
+  const card = createCustomElement({
+    tagName: 'div',
+    class: 'taskRequest__card',
+    eventListeners: [{ event: 'click', func: (e) => openTaskDetails(id, e) }],
+    child: [
+      createCustomElement({
+        tagName: 'div',
+        class: 'taskRequest__card__header',
+        child: [
+          createCustomElement({
+            tagName: 'h3',
+            class: 'taskRequest__card__header__title',
+            textContent: task.title,
+          }),
+          createCustomElement({
+            tagName: 'div',
+            class: [
+              'taskRequest__card__header__status',
+              `taskRequest__card__header__status--${status.toLowerCase()}`,
+            ],
+            title: status.toLowerCase(),
+          }),
+        ],
+      }),
+      createCustomElement({
+        tagName: 'div',
+        class: 'taskRequest__card__body',
+        child: [
+          createCustomElement({
+            tagName: 'p',
+            textContent: task.purpose,
+          }),
+        ],
+      }),
+      createCustomElement({
+        tagName: 'div',
+        class: 'taskRequest__card__footer',
+        child: [
+          createCustomElement({
+            tagName: 'p',
+            textContent: 'Requested By',
+          }),
+          createCustomElement({
+            tagName: 'div',
+            class: 'taskRequest__card__footer__requestor',
+            child: [
+              ...requestors.map((requestor, index) => {
+                if (index < 3) {
+                  return createCustomElement({
+                    tagName: 'div',
+                    class: 'taskRequest__card__footer__requestor__avatar',
+                    title: requestor.user.first_name,
+                    child: [getAvatar(requestor)],
+                  });
+                }
+              }),
+              getRemainingCount(requestors) || '',
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+  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);
+})();