Real-Dev-Squad · ivinayakg · Jul 22, 2023 · Jul 23, 2023 · Aug 21, 2023 · Aug 21, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
-coverage/
+coverage/
+.vscode
diff --git a/constants.js b/constants.js
@@ -3,6 +3,7 @@ const REPO_SYNC_API_URL =
   'https://staging-sync.staging-realdevsquad-com.workers.dev';
 const USER_MANAGEMENT_LINK = 'user-management-link';
 const EXTENSION_REQUESTS_LINK = 'extension-requests-link';
+const OVERDUE_TASKS_LINK = 'overdue-tasks-link';
 const SYNC_USERS_STATUS = 'sync-users-status';
 const SYNC_EXTERNAL_ACCOUNTS = 'sync-external-accounts';
 const SYNC_UNVERIFIED_USERS = 'sync-unverified-users';

diff --git a/extension-requests/script.js b/extension-requests/script.js
@@ -368,6 +368,7 @@ function fillUpdateForm() {
   )
     .toISOString()
     .replace('Z', '');
+
   modalUpdateForm.querySelector('.extensionOldEndsOn').value = new Date(
     oldEndsOn * 1000,
   )

diff --git a/index.html b/index.html
@@ -75,6 +75,13 @@
       >
         Extension Requests
       </a>
+      <a
+        id="overdue-tasks-link"
+        class="element-display-remove"
+        href="overdue-tasks"
+      >
+        Overdue Tasks
+      </a>
       <a href="/online-members/online-members.html" class="action-button">
         Online Members
       </a>

diff --git a/overdue-tasks/constants.js b/overdue-tasks/constants.js
@@ -0,0 +1,19 @@
+const taskInfoModelHeadings = [
+  { title: 'Title' },
+  { title: 'Overdue From', key: 'endsOn', time: true },
+  { title: 'Purpose' },
+  { title: 'Assignee' },
+  { title: 'Created By', key: 'createdBy' },
+  { title: 'Is Noteworthy', key: 'isNoteworthy' },
+];
+
+const extensionRequestCardHeadings = [
+  { title: 'Title' },
+  { title: 'Reason' },
+  { title: 'Old Ends On', key: 'oldEndsOn', time: true },
+  { title: 'New Ends On', key: 'newEndsOn', time: true },
+  { title: 'Status', bold: true },
+  { title: 'Assignee' },
+  { title: 'Created At', key: 'timestamp', time: true },
+  { title: 'Task', key: 'taskId' },
+];
diff --git a/overdue-tasks/index.html b/overdue-tasks/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Overdue Tasks</title>
+  </head>
+
+  <body>
+    <div state="" class="overdue-tasks-modal-parent">
+      <div class="overdue-tasks-prompt">
+        <h2>Prompt Heading</h2>
+        <button class="prompt_success">Continue</button>
+        <button class="prompt_failure">Cancel</button>
+      </div>
+      <form class="extension-requests-form">
+        <h3>Create Extension Request</h3>
+        <label for="title">Title</label>
+        <input
+          required
+          type="text"
+          id="title"
+          name="title"
+          class="extensionTitle"
+        />
+        <label for="reason">Reason</label>
+        <input
+          required
+          type="text"
+          id="reason"
+          name="reason"
+          class="extensionReason"
+        />
+        <label for="newEndsOn">New Ends On</label>
+        <input
+          required
+          type="datetime-local"
+          id="newEndsOn"
+          name="newEndsOn"
+          class="extensionNewEndsOn"
+        />
+        <label for="oldEndsOn">Old Ends On</label>
+        <input
+          required
+          type="datetime-local"
+          id="oldEndsOn"
+          class="extensionOldEndsOn"
+          name="oldEndsOn"
+          readonly
+        />
+        <label for="status">Status</label>
+        <input
+          required
+          type="text"
+          id="status"
+          class="extensionStatus"
+          name="status"
+          readonly
+        />
+        <label for="Task Id">Task Id</label>
+        <input
+          required
+          type="text"
+          id="Task Id"
+          class="extensionId"
+          readonly
+          name="taskId"
+        />
+        <label for="assignee">Assignee</label>
+        <input
+          required
+          type="text"
+          id="assignee"
+          class="extensionAssignee"
+          readonly
+          name="assignee"
+        />
+        <button type="submit">Submit</button>
+        <button id="close-modal" type="button">Cancel</button>
+      </form>
+    </div>
+    <header class="header">
+      <h1>Overdue Tasks</h1>
+    </header>
+    <div class="container">
+      <div class="overdue-tasks"></div>
+    </div>
+    <h2 id="error"></h2>
+    <script src="/constants.js"></script>
+    <script src="constants.js"></script>
+    <script src="/utils.js"></script>
+    <script src="local-utils.js"></script>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/overdue-tasks/local-utils.js b/overdue-tasks/local-utils.js
@@ -0,0 +1,115 @@
+async function getCurrentOverdueTasks(query = {}) {
+  const url = new URL(`${API_BASE_URL}/tasks?dev=true&status=overdue`);
+
+  const res = await fetch(url, {
+    credentials: 'include',
+    method: 'GET',
+    headers: {
+      'Content-type': 'application/json',
+    },
+  });
+  return await res.json();
+}
+
+async function getExtensionRequests(query = {}) {
+  const url = new URL(`${API_BASE_URL}/extension-requests`);
+
+  queryParams = ['assignee', 'status', 'taskId'];
+  queryParams.forEach(
+    (key) => query[key] && url.searchParams.set(key, query[key]),
+  );
+
+  const res = await fetch(url, {
+    credentials: 'include',
+    method: 'GET',
+    headers: {
+      'Content-type': 'application/json',
+    },
+  });
+  return await res.json();
+}
+
+async function createExtensionRequest(extensionObject) {
+  const url = `${API_BASE_URL}/extension-requests/`;
+  const res = await fetch(url, {
+    credentials: 'include',
+    method: 'POST',
+    body: JSON.stringify(extensionObject),
+    headers: {
+      'Content-type': 'application/json',
+    },
+  });
+  return await res.json();
+}
+
+async function getTaskDetails(taskId) {
+  if (!taskId) return;
+  const url = `${API_BASE_URL}/tasks/${taskId}/details`;
+  const res = await fetch(url, {
+    credentials: 'include',
+    method: 'GET',
+    headers: {
+      'Content-type': 'application/json',
+    },
+  });
+  return await res.json();
+}
+
+async function unassignTask(taskId) {
+  if (!taskId) return;
+  const url = `${API_BASE_URL}/tasks/${taskId}/`;
+  const res = await fetch(url, {
+    credentials: 'include',
+    method: 'PATCH',
+    headers: {
+      'Content-type': 'application/json',
+    },
+    body: JSON.stringify({ assignee: null, status: 'AVAILABLE', endsOn: 0 }),
+  });
+  return res.status === 204;
+}
+
+function getTimeFromTimestamp(timestamp) {
+  return new Date(timestamp * 1000).toLocaleString();
+}
+
+function createTable(headings, data, className = '') {
+  const table = createElement({
+    type: 'table',
+    attributes: {
+      class: className,
+    },
+  });
+  const tableBody = createElement({ type: 'tbody' });
+  headings.forEach(({ title, key, time, bold }) => {
+    let row = createElement({ type: 'tr' });
+    let rowHeading = createElement({ type: 'th', innerText: title });
+
+    let contentText = '';
+    if (time) contentText = getTimeFromTimestamp(data[key]);
+    else contentText = key ? data[key] : data[title.toLowerCase()];
+
+    let tableData = createElement({
+      type: 'td',
+      innerText: contentText,
+      attributes: {
+        class: bold ? 'bold' : '',
+      },
+    });
+    row.appendChild(rowHeading);
+    row.appendChild(tableData);
+    tableBody.appendChild(row);
+  });
+
+  table.appendChild(tableBody);
+  return table;
+}
+
+function formDataToObject(formData) {
+  if (!formData) return;
+  const result = {};
+  for (const [key, value] of formData.entries()) {
+    result[key] = value;
+  }
+  return result;
+}