Added link rendering capbility

Real-Dev-Squad · Dec 7, 2023 · 9175cce · 9175cce
1 parent 216325a
commit 9175cce
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 24 deletions.
diff --git a/taskRequests/details/index.html b/taskRequests/details/index.html
@@ -79,11 +79,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/taskRequests/details/script.js b/taskRequests/details/script.js
@@ -13,7 +13,6 @@ const taskRequestContainer = document.getElementById('task-request-details');
 const taskContainer = document.getElementById('task-details');
 const toast = document.getElementById('toast_task_details');
 const requestorsContainer = document.getElementById('requestors-details');
-const rejectButton = document.getElementById('reject-button');
 const taskRequestId = new URLSearchParams(window.location.search).get('id');
 history.pushState({}, '', window.location.href);
 const errorMessage =
@@ -185,7 +184,6 @@ async function updateTaskRequest(action, userId) {
       requestorsContainer.innerHTML = '';
       updateStatus(taskRequest.status);
       renderRequestors(taskRequest);
-      renderRejectButton(taskRequest);
       return res;
     } else {
       showToast(errorMessage, 'failure');
@@ -275,7 +273,31 @@ async function renderRequestors(taskRequest) {
             }),
           ],
         }),
-        taskRequest.status !== 'DENIED' ? getActionButton(requestor) : '',
+        createCustomElement({
+          tagName: 'div',
+          child: [
+            taskRequest.status !== 'DENIED' ? getActionButton(requestor) : '',
+            createCustomElement({
+              tagName: 'button',
+              textContent: 'Reject',
+              class: 'request-details__reject__button',
+              disabled: taskRequest?.status !== 'PENDING',
+              eventListeners: [
+                {
+                  event: 'click',
+                  func: async () => {
+                    const res = await updateTaskRequest(
+                      TaskRequestAction.REJECT,
+                    );
+                    if (res?.ok) {
+                      rejectButton.disabled = true;
+                    }
+                  },
+                },
+              ],
+            }),
+          ],
+        }),
       ],
     });
     const avatarDiv = userDetailsDiv.querySelector(
@@ -297,20 +319,16 @@ async function fetchTaskRequest() {
   data.approvedTo = approvedTo;
   return data;
 }
-const renderRejectButton = (taskRequest) => {
-  if (taskRequest?.status !== 'PENDING') {
-    rejectButton.disabled = true;
-  }
 
-  rejectButton.addEventListener('click', async () => {
-    const res = await updateTaskRequest(TaskRequestAction.REJECT);
-    if (res?.ok) {
-      rejectButton.disabled = true;
-    }
-  });
-};
 const renderGithubIssue = async () => {
-  converter = new showdown.Converter();
+  converter = new showdown.Converter({
+    tables: true,
+    simplifiedAutoLink: true,
+    tasklists: true,
+    simplifiedAutoLink: true,
+    ghCodeBlocks: true,
+    openLinksInNewWindow: true,
+  });
   let res = await fetch(taskRequest?.externalIssueUrl);
   res = await res.json();
   taskSkeleton.classList.add('hidden');
@@ -390,7 +408,7 @@ const renderTaskRequest = async () => {
   try {
     taskRequest = await fetchTaskRequest();
     taskRequestSkeleton.classList.add('hidden');
-    renderRejectButton(taskRequest);
+    // renderRejectButton(taskRequest);
     renderTaskRequestDetails(taskRequest);
 
     if (taskRequest?.requestType === 'CREATION') {

diff --git a/taskRequests/details/style.css b/taskRequests/details/style.css
@@ -241,7 +241,6 @@ body {
   color: #19805e;
   border-radius: 0.25rem;
   cursor: pointer;
-  margin-left: 1rem;
 }
 .requestors__conatainer__list__button:hover {
   color: var(--color-white);
@@ -264,8 +263,6 @@ body {
 }
 .request-details__reject__button {
   padding: 0.375rem 0.5rem;
-  width: 80%;
-  max-width: 10rem;
   background: var(--color-white);
   border: solid 1px var(--color-red-variant1);
   font-weight: 700;
@@ -274,6 +271,7 @@ body {
   color: var(--color-red-variant1);
   border-radius: 0.25rem;
   cursor: pointer;
+  margin-left: 1rem;
 }
 .request-details__reject__button:hover {
   color: var(--color-white);
@@ -399,6 +397,9 @@ body {
   .request-details {
     grid-column: auto;
   }
+  .container {
+    display: block;
+  }
 }
 
 .requestor_details_modal_content {
@@ -455,6 +456,42 @@ p:hover {
   border: 1px solid #78716c;
   border-radius: 0.5rem;
 }
+#task-details p a {
+  word-wrap: break-word;
+}
+#task-details table {
+  background: #fff;
+  border: solid 1px #ddd;
+  margin-bottom: 1.25rem;
+  table-layout: auto;
+  border-spacing: 2px;
+}
+#task-details table thead {
+  background: #f5f5f5;
+}
+#task-details table thead tr th,
+#task-details table thead tr td {
+  color: #222;
+  font-size: 0.875rem;
+  font-weight: bold;
+  padding: 0.5rem 0.625rem 0.625rem;
+}
+#task-details table thead tr th,
+#task-details table tfoot tr th,
+#task-details table tfoot tr td,
+#task-details table tbody tr th,
+#task-details table tbody tr td,
+#task-details table tr td {
+  display: table-cell;
+  line-height: 1.125rem;
+}
+#task-details table tr th,
+table tr td {
+  color: #222;
+  font-size: 0.875rem;
+  padding: 0.5625rem 0.625rem;
+  text-align: left;
+}
 .card__link {
   color: #2563eb;
   text-decoration: none;