RealDevSquad · ankushdharkar · Apr 27, 2023 · Jan 14, 2023 · Jan 14, 2023 · Jan 16, 2023
diff --git a/constants.js b/constants.js
@@ -1,2 +1,3 @@
 const API_BASE_URL = 'https://api.realdevsquad.com';
 const USER_MANAGEMENT_LINK = 'user-management-link';
+const EXTENSION_REQUESTS_LINK = 'extension-requests-link';
diff --git a/extension-requests/constants.js b/extension-requests/constants.js
@@ -0,0 +1,19 @@
+const taskInfoModelHeadings = [
+  { title: 'Title' },
+  { title: 'Ends On', 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/extension-requests/index.html b/extension-requests/index.html
@@ -0,0 +1,110 @@
+<!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>Extension Requests</title>
+  </head>
+
+  <body>
+    <div class="extension-requests-modal-parent">
+      <div class="extension-requests-info"></div>
+      <form class="extension-requests-form">
+        <h3>Update 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"
+          readonly
+        />
+        <label for="status">Status</label>
+        <input
+          required
+          type="text"
+          id="status"
+          class="extensionStatus"
+          readonly
+        />
+        <label for="Task Id">Task Id</label>
+        <input required type="text" id="Task Id" class="extensionId" readonly />
+        <label for="assignee">Assignee</label>
+        <input
+          required
+          type="text"
+          id="assignee"
+          class="extensionAssignee"
+          readonly
+        />
+        <button type="submit">Submit</button>
+        <button id="close-modal" type="button">Cancel</button>
+      </form>
+      <form class="extension-requests-status-form">
+        <h3>Update Extension Request Status</h3>
+        <label for="status">Status</label>
+        <select name="status" id="status">
+          <option value="APPROVED">APPROVED</option>
+          <option value="DENIED">DENIED</option>
+        </select>
+        <label for="title">Title</label>
+        <input
+          required
+          type="text"
+          id="title"
+          class="extensionTitle"
+          readonly
+        />
+        <label for="Task Id">Task Id</label>
+        <input required type="text" id="Task Id" class="extensionId" readonly />
+        <label for="assignee">Assignee</label>
+        <input
+          required
+          type="text"
+          id="assignee"
+          class="extensionAssignee"
+          readonly
+        />
+        <button type="submit">Submit</button>
+        <button id="close-modal" type="button">Cancel</button>
+      </form>
+    </div>
+    <header class="header">
+      <h1>Extension Requests</h1>
+    </header>
+    <div class="container">
+      <div class="extension-requests"></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/extension-requests/local-utils.js b/extension-requests/local-utils.js
@@ -0,0 +1,101 @@
+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 updateExtensionRequest({ id, body }) {
+  const url = `${API_BASE_URL}/extension-requests/${id}`;
+  const res = await fetch(url, {
+    credentials: 'include',
+    method: 'PATCH',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-type': 'application/json',
+    },
+  });
+  return await res.json();
+}
+
+async function updateExtensionRequestStatus({ id, body }) {
+  const url = `${API_BASE_URL}/extension-requests/${id}/status`;
+  const res = await fetch(url, {
+    credentials: 'include',
+    method: 'PATCH',
+    body: JSON.stringify(body),
+    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();
+}
+
+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;
+}