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/details/index.html b/taskRequests/details/index.html
@@ -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>
+        </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>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/taskRequests/details/script.js b/taskRequests/details/script.js
@@ -0,0 +1,240 @@
+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`);
+    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: 'p',
+            textContent: taskData?.createdBy || 'N/A',
+          }),
+        ],
+      }),
+      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',
+      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();