Real-Dev-Squad · iamitprakash · Oct 29, 2024 · Oct 19, 2024 · Oct 19, 2024 · Oct 20, 2024
diff --git a/mock-data/taskRequests/index.js b/mock-data/taskRequests/index.js
@@ -260,7 +260,6 @@ const githubIssue = {
   performed_via_github_app: null,
   state_reason: 'completed',
 };
-
 const individualTaskDetail = {
   message: 'task returned successfully',
   taskData: {
@@ -306,7 +305,6 @@ const userInformationTaskCreation = {
     },
   },
 };
-
 const userInformation = {
   message: 'User returned successfully!',
   user: {
@@ -339,7 +337,41 @@ const userInformation = {
     created_at: 1698684157040,
   },
 };
-
+const superUserData = {
+  id: 'XAF7rSUvk4p0d098qWYS',
+  profileURL: 'https://my.realdevsquad.com/identity',
+  discordJoinedAt: '2020-02-01T08:33:38.278000+00:00',
+  roles: {
+    archived: false,
+    in_discord: true,
+    member: true,
+    super_user: true,
+    admin: true,
+  },
+  created_at: 1693166951852,
+  yoe: '8',
+  github_created_at: 1341655281000,
+  updated_at: 1693224375990,
+  company: 'Amazon',
+  twitter_id: 'ankushdharkar',
+  first_name: 'Ankush',
+  ' instagram_id': 'ankushdharkar',
+  website: 'NA',
+  incompleteUserDetails: false,
+  discordId: '154585730465660929',
+  linkedin_id: 'ankushdharkar',
+  last_name: 'Dharkar',
+  picture: {
+    publicId: 'profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe',
+    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692058952/profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe.jpg',
+  },
+  github_display_name: 'Ankush Dharkar',
+  company_name: 'Amazon',
+  github_id: 'ankushdharkar',
+  designation: 'SDE',
+  status: 'idle',
+  username: 'ankush',
+};
 const defaultMockResponseHeaders = {
   status: 200,
   contentType: 'application/json',
@@ -351,6 +383,7 @@ const defaultMockResponseHeaders = {
 };
 
 const urlMappings = {
+  'https://staging-api.realdevsquad.com/users/self': superUserData,
   'https://api.realdevsquad.com/taskRequests/dM5wwD9QsiTzi7eG7Oq5':
     individualTaskReqDetail,
   'https://api.realdevsquad.com/taskRequests/dM5wwD9QsiTzi7eG7Oq6':

diff --git a/task-requests/details/index.html b/task-requests/details/index.html
@@ -24,13 +24,13 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
-    <script src="/task-requests/details/script.js" defer></script>
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"
       integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
+    <script type="module" src="/task-requests/details/script.js" defer></script>
   </head>
   <body>
     <div class="header">
@@ -85,11 +85,6 @@ <h4 class="requestors__container__title">Requestors</h4>
             </ul>
           </div>
         </div>
-        <div class="reject__container">
-          <button id="reject-button" class="request-details__reject__button">
-            Reject
-          </button>
-        </div>
       </div>
     </div>
     <div id="toast_task_details" class="hidden">

diff --git a/task-requests/details/script.js b/task-requests/details/script.js
@@ -2,8 +2,9 @@ const API_BASE_URL =
   window.location.hostname === 'localhost'
     ? 'https://staging-api.realdevsquad.com'
     : window.API_BASE_URL;
-
+import { getIsSuperUser } from '../../applications/utils.js';
 let taskRequest;
+let isSuperUser;
 
 const taskRequestSkeleton = document.querySelector('.taskRequest__skeleton');
 const container = document.querySelector('.container');
@@ -13,15 +14,15 @@ const requestorSkeleton = document.querySelector(
 );
 
 const taskRequestContainer = document.getElementById('task-request-details');
+const requestDetailContainer =
+  document.getElementsByClassName('request-details');
 const taskContainer = document.getElementById('task-details');
 const toast = document.getElementById('toast_task_details');
-const rejectButton = document.getElementById('reject-button');
 const requestorsContainer = document.getElementById('requestors-details');
 const taskRequestId = new URLSearchParams(window.location.search).get('id');
 history.pushState({}, '', window.location.href);
 const errorMessage =
   'The requested operation could not be completed. Please try again later.';
-let taskId;
 
 function renderTaskRequestDetails(taskRequest) {
   taskRequestContainer.append(
@@ -200,29 +201,36 @@ async function updateTaskRequest(action, userId) {
   }
 }
 
-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 '';
+function renderActionButton(requestor, taskRequest) {
+  if (isSuperUser) {
+    if (taskRequest?.status === taskRequestStatus.APPROVED) {
+      return taskRequest.approvedTo === requestor?.user?.id
+        ? createCustomElement({
+            tagName: 'p',
+            textContent: 'Approved',
+            class: ['requestors__container__list__status'],
+          })
+        : '';
     }
+    return createCustomElement({
+      tagName: 'button',
+      textContent: 'Approve',
+      class: 'requestors__conatainer__list__button',
+      eventListeners: [
+        {
+          event: 'click',
+          func: () =>
+            updateTaskRequest(TaskRequestAction.APPROVE, requestor.user?.id),
+        },
+      ],
+    });
   }
   return createCustomElement({
-    tagName: 'button',
-    textContent: 'Approve',
-    class: 'requestors__conatainer__list__button',
-    eventListeners: [
-      {
-        event: 'click',
-        func: () =>
-          updateTaskRequest(TaskRequestAction.APPROVE, requestor.user?.id),
-      },
-    ],
+    tagName: 'p',
+    textContent:
+      taskRequest.status[0].toUpperCase() +
+      taskRequest.status.slice(1).toLowerCase(),
+    class: ['requestors__container__list__status'],
   });
 }
 
@@ -279,14 +287,17 @@ async function renderRequestors(taskRequest) {
         createCustomElement({
           tagName: 'div',
           child: [
-            taskRequest.status !== 'DENIED' ? getActionButton(requestor) : '',
+            taskRequest.status !== 'DENIED'
+              ? renderActionButton(requestor, taskRequest)
+              : createCustomElement({
+                  tagName: 'p',
+                  textContent: 'Denied',
+                  class: ['requestors__container__list__status'],
+                }),
           ],
         }),
       ],
     });
-    const avatarDiv = userDetailsDiv.querySelector(
-      '.requestors__container__list__userDetails__avatar',
-    );
     requestorsContainer.append(userDetailsDiv);
   });
 }
@@ -305,7 +316,7 @@ async function fetchTaskRequest() {
 }
 
 const renderGithubIssue = async () => {
-  converter = new showdown.Converter({
+  const converter = new showdown.Converter({
     tables: true,
     simplifiedAutoLink: true,
     tasklists: true,
@@ -344,7 +355,7 @@ const renderGithubIssue = async () => {
     }),
   );
   const body = DOMPurify.sanitize(res?.body ?? '');
-  html = converter.makeHtml(body);
+  const html = converter.makeHtml(body);
   taskContainer.appendChild(
     createCustomElement({
       tagName: 'div',
@@ -410,22 +421,39 @@ const renderGithubIssue = async () => {
   );
 };
 const renderRejectButton = (taskRequest) => {
-  if (taskRequest?.status !== 'PENDING') {
-    rejectButton.disabled = true;
-  }
+  if (!isSuperUser) return;
+  if (taskRequest?.status === 'PENDING') {
+    const rejectContainer = createCustomElement({
+      tagName: 'div',
+      class: 'reject__container',
+      child: [
+        createCustomElement({
+          tagName: 'button',
+          textContent: 'Reject',
+          id: 'reject-button',
+          class: 'request-details__reject__button',
+        }),
+      ],
+    });
 
-  rejectButton.addEventListener('click', async () => {
-    const res = await updateTaskRequest(TaskRequestAction.REJECT);
-    if (res?.ok) {
-      rejectButton.disabled = true;
-    }
-  });
+    requestDetailContainer[0].appendChild(rejectContainer);
+    const rejectButton = rejectContainer.querySelector('#reject-button');
+
+    rejectButton.addEventListener('click', async () => {
+      const res = await updateTaskRequest(TaskRequestAction.REJECT);
+      if (res?.ok) {
+        rejectButton.remove();
+      }
+    });
+  }
 };
+
 const renderTaskRequest = async () => {
   taskRequestSkeleton.classList.remove('hidden');
   taskContainer.classList.remove('hidden');
   try {
     taskRequest = await fetchTaskRequest();
+    isSuperUser = await getIsSuperUser();
     taskRequestSkeleton.classList.add('hidden');
     renderRejectButton(taskRequest);
     renderTaskRequestDetails(taskRequest);
@@ -568,7 +596,7 @@ function populateModalContent(index) {
   );
 
   if (userData?.markdownEnabled ?? false) {
-    converter = new showdown.Converter({
+    const converter = new showdown.Converter({
       tables: true,
       simplifiedAutoLink: true,
       tasklists: true,
@@ -577,7 +605,7 @@ function populateModalContent(index) {
       openLinksInNewWindow: true,
     });
     const sanitizedDescription = DOMPurify.sanitize(userData.description ?? '');
-    html = converter.makeHtml(sanitizedDescription);
+    const html = converter.makeHtml(sanitizedDescription);
     descriptionValue.innerHTML = html;
     descriptionValue.className = 'requestor_description_details';
   } else {

diff --git a/task-requests/details/style.css b/task-requests/details/style.css
@@ -248,7 +248,7 @@ body {
   background: #19805e;
   transition: 0.3s ease-in-out;
 }
-.requestors__container__list__approved {
+.requestors__container__list__status {
   background: transparent;
   border: none;
   color: #c3c3c3;