Merge pull request #780 from Real-Dev-Squad/develop

Dev to Main Sync

Author: ankushdharkar

applications/script.js

@@ -4,6 +4,7 @@ import {
   getIsSuperUser,
   showToast,
   updateApplication,
+  getApplicationById,
 } from './utils.js';
 let nextLink;
 let isDataLoading = false;
@@ -271,8 +272,33 @@ async function renderApplicationCards(next, status, isInitialRender) {
   });
 }
 
+async function renderApplicationById(id) {
+  noApplicationFoundText.classList.add('hidden');
+  changeLoaderVisibility({ hide: false });
+  isDataLoading = true;
+
+  try {
+    const application = await getApplicationById(id);
+
+    if (!application) {
+      return noApplicationFoundText.classList.remove('hidden');
+    }
+
+    const applicationCard = createApplicationCard({ application });
+    applicationContainer.appendChild(applicationCard);
+    applicationContainer.classList.add('center');
+  } catch (error) {
+    console.error('Error fetching application by user ID:', error);
+    noApplicationFoundText.classList.remove('hidden');
+  } finally {
+    isDataLoading = false;
+    changeLoaderVisibility({ hide: true });
+  }
+}
+
 (async function renderCardsInitial() {
   changeLoaderVisibility({ hide: false });
+
   const isSuperUser = await getIsSuperUser();
   if (!isSuperUser) {
     const unAuthorizedText = createElement({
@@ -284,8 +310,19 @@ async function renderApplicationCards(next, status, isInitialRender) {
     changeLoaderVisibility({ hide: true });
     return;
   }
-  await renderApplicationCards('', status, true);
-  addIntersectionObserver();
+
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const applicationId = urlParams.get('id');
+
+  if (applicationId) {
+    await renderApplicationById(applicationId);
+  } else {
+    await renderApplicationCards('', status, true);
+    addIntersectionObserver();
+  }
+
+  changeLoaderVisibility({ hide: true });
 })();
 
 const intersectionObserver = new IntersectionObserver(async (entries) => {

applications/style.css

@@ -48,7 +48,7 @@ body {
 .container {
   max-width: 1100px;
   margin: 0 auto;
-  padding: 2.5rem;
+  padding: 2rem;
   overflow-y: auto;
 }
 
@@ -144,13 +144,16 @@ body {
 
 .application-container {
   display: flex;
-  margin-top: 30px;
   flex-wrap: wrap;
   justify-content: space-between;
   padding-bottom: 10px;
   gap: 25px;
 }
 
+.application-container.center {
+  justify-content: center;
+}
+
 .application-card {
   border-radius: 15px;
   box-shadow: var(--elevation-1);

applications/utils.js

@@ -40,6 +40,28 @@ async function getApplications({ applicationStatus, size = 5, next = '' }) {
   }
 }
 
+async function getApplicationById(applicationId) {
+  try {
+    const res = await fetch(`${BASE_URL}/applications/${applicationId}`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        'Content-type': 'application/json',
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.json();
+      throw error;
+    }
+
+    const data = await res.json();
+    return data.application;
+  } catch (error) {
+    throw error;
+  }
+}
+
 async function getIsSuperUser() {
   try {
     const res = await fetch(`${BASE_URL}/users/self`, {
@@ -104,6 +126,7 @@ function showToast({ message, type }) {
 export {
   createElement,
   getApplications,
+  getApplicationById,
   updateApplication,
   getIsSuperUser,
   showToast,

requests/constants.js

@@ -6,8 +6,10 @@ const Status = {
 };
 
 const OOO_REQUEST_TYPE = 'OOO';
+const EXTENSION_REQUEST_TYPE = 'EXTENSION';
 const REQUEST_CONTAINER_ID = 'request_container';
 const OOO_TAB_ID = 'ooo_tab_link';
+const EXTENSION_TAB_ID = 'extension_tab_link';
 
 const DEFAULT_DATE_FORMAT = 'DD MMM YYYY';
 
@@ -19,8 +21,9 @@ const MessageStatus = {
 const ErrorMessages = {
   UNAUTHENTICATED:
     'You are unauthenticated to view this section, please login!',
-  UNAUTHORIZED: 'You are unauthrozed to view this section',
+  UNAUTHORIZED: 'You are unauthorized to view this section',
   OOO_NOT_FOUND: 'OOO Requests not found',
+  EXTENSION_NOT_FOUND: 'Extension Requests not found',
   SERVER_ERROR: 'Unexpected error occurred',
 };
 

requests/index.html

@@ -6,9 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="This web page is for the requests managment functionality in real dev squad's dashboard website. admin can view and take action on the requests raised by the team members."
+      content="This web page is for the requests management functionality in real dev squad's dashboard website. Admins can view and take action on the requests raised by the team members."
     />
-    <meta name="keywords" content="RDS, Request Managment" />
+    <meta name="keywords" content="RDS, Request Management" />
     <meta name="author" content="Real Dev Squad" />
     <link rel="icon" href="/images/index.ico" type="image/x-icon" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -17,7 +17,6 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700;800&display=swap"
       rel="stylesheet"
     />
-
     <title>Requests | Real Dev Squad</title>
     <link rel="stylesheet" href="/global.css" />
     <link rel="stylesheet" href="/requests/style.css" />

requests/script.js

@@ -8,6 +8,7 @@ const loader = document.querySelector('.container__body__loader');
 const startLoading = () => loader.classList.remove('hidden');
 const stopLoading = () => loader.classList.add('hidden');
 let oooTabLink = document.getElementById(OOO_TAB_ID);
+let extensionTabLink = document.getElementById(EXTENSION_TAB_ID);
 let currentReqType = OOO_REQUEST_TYPE;
 let selected__tab__class = 'selected__tab';
 let statusValue = null;
@@ -25,7 +26,7 @@ const intersectionObserver = new IntersectionObserver(async (entries) => {
     return;
   }
   if (entries[0].isIntersecting && !isDataLoading) {
-    await renderOooRequestCards({
+    await renderRequestCards({
       state: statusValue,
       sort: sortByValue,
       next: nextLink,
@@ -42,18 +43,35 @@ const removeIntersectionObserver = () => {
 
 oooTabLink.addEventListener('click', async function () {
   if (isDataLoading) return;
-  oooTabLink.classList.add(selected__tab__class);
   currentReqType = OOO_REQUEST_TYPE;
+  nextLink = '';
+  oooTabLink.classList.add(selected__tab__class);
+  extensionTabLink.classList.remove(selected__tab__class);
+  changeFilter();
+  updateUrlWithQuery(currentReqType);
+  await renderRequestCards({ state: statusValue, sort: sortByValue });
+});
+
+extensionTabLink.addEventListener('click', async function () {
+  if (isDataLoading) return;
+  currentReqType = EXTENSION_REQUEST_TYPE;
+  nextLink = '';
+  extensionTabLink.classList.add(selected__tab__class);
+  oooTabLink.classList.remove(selected__tab__class);
   changeFilter();
-  await renderOooRequestCards({ state: statusValue, sort: sortByValue });
+  updateUrlWithQuery(currentReqType);
+  await renderRequestCards({ state: statusValue, sort: sortByValue });
 });
 
+function updateUrlWithQuery(type) {
+  const url = new URL(window.location);
+  url.searchParams.set('type', type.toLowerCase());
+  window.history.pushState({ path: url.toString() }, '', url.toString());
+}
+
 async function getOooRequests(query = {}) {
   let finalUrl =
     API_BASE_URL + (nextLink || '/requests' + getOooQueryParamsString(query));
-  let windowUrl = `${window.location.origin}${window.location.pathname}`;
-
-  window.history.pushState({ path: windowUrl }, '', windowUrl);
 
   try {
     const res = await fetch(finalUrl, {
@@ -88,6 +106,44 @@ async function getOooRequests(query = {}) {
   }
 }
 
+async function getExtensionRequests(query = {}) {
+  let finalUrl =
+    API_BASE_URL +
+    (nextLink || '/requests' + getExtensionQueryParamsString(query));
+
+  try {
+    const res = await fetch(finalUrl, {
+      credentials: 'include',
+    });
+
+    const data = await res.json();
+    if (res.ok) {
+      return data;
+    } else {
+      switch (res.status) {
+        case 401:
+          showMessage('ERROR', ErrorMessages.UNAUTHENTICATED);
+          return;
+        case 403:
+          showMessage('ERROR', ErrorMessages.UNAUTHORIZED);
+          return;
+        case 404:
+          showMessage('ERROR', ErrorMessages.EXTENSION_NOT_FOUND);
+          return;
+        case 400:
+          showMessage('ERROR', data.message);
+          showToast(data.message, 'failure');
+          return;
+        default:
+          break;
+      }
+    }
+    showMessage('ERROR', ErrorMessages.SERVER_ERROR);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
 function showMessage(type, message) {
   const p = document.createElement('p');
   const classes = ['request__message'];
@@ -106,11 +162,7 @@ const changeFilter = () => {
   requestContainer.innerHTML = '';
 };
 
-function createOooRequestCard(
-  oooRequest,
-  superUserDetails,
-  requesterUserDetails,
-) {
+function createRequestCard(request, superUserDetails, requesterUserDetails) {
   let {
     id,
     state,
@@ -121,7 +173,7 @@ function createOooRequestCard(
     lastModifiedBy,
     reason,
     updatedAt,
-  } = oooRequest;
+  } = request;
   let showSuperuserDetailsClass = 'notHidden';
   let showActionButtonClass = 'notHidden';
   if (
@@ -161,17 +213,17 @@ function createOooRequestCard(
     child: [
       generateRequesterInfo(),
       generateRequestContent(),
-      addHotizontalBreakLine(),
+      addHorizontalBreakLine(),
       generateSuperuserInfo(),
       generateActionButtonsContainer(),
     ],
   });
   return card;
 
-  function addHotizontalBreakLine() {
+  function addHorizontalBreakLine() {
     return createElementFromMap({
       tagName: 'hr',
-      class: 'horizontal__line__saperator',
+      class: 'horizontal__line__separator',
     });
   }
 
@@ -378,28 +430,28 @@ function createOooRequestCard(
   }
 }
 
-async function renderOooRequestCards(queries = {}) {
+async function renderRequestCards(queries = {}) {
   if (isDataLoading) return;
-  let oooRequestResponse;
+  let requestResponse;
   try {
     isDataLoading = true;
     startLoading();
     if (userDetails.length === 0) {
       userDetails = await getInDiscordUserList();
     }
-    oooRequestResponse = await getOooRequests(queries);
-    for (const oooRequest of oooRequestResponse?.data || []) {
+    requestResponse =
+      currentReqType === OOO_REQUEST_TYPE
+        ? await getOooRequests(queries)
+        : await getExtensionRequests(queries);
+
+    for (const request of requestResponse?.data || []) {
       let superUserDetails;
-      let requesterUserDetails = await getUserDetails(oooRequest.requestedBy);
-      if (oooRequest.state !== 'PENDING') {
-        superUserDetails = await getUserDetails(oooRequest.lastModifiedBy);
+      let requesterUserDetails = await getUserDetails(request.requestedBy);
+      if (request.state !== 'PENDING') {
+        superUserDetails = await getUserDetails(request.lastModifiedBy);
       }
       requestContainer.appendChild(
-        createOooRequestCard(
-          oooRequest,
-          superUserDetails,
-          requesterUserDetails,
-        ),
+        createRequestCard(request, superUserDetails, requesterUserDetails),
       );
     }
   } catch (error) {
@@ -410,15 +462,15 @@ async function renderOooRequestCards(queries = {}) {
     isDataLoading = false;
     if (
       requestContainer.innerHTML === '' ||
-      oooRequestResponse === undefined ||
-      oooRequestResponse?.data?.length === 0
+      requestResponse === undefined ||
+      requestResponse?.data?.length === 0
     ) {
-      showMessage('INFO', 'No OOO requests found!');
+      showMessage('INFO', `No ${currentReqType.toLowerCase()} requests found!`);
     }
   }
 
   addIntersectionObserver();
-  nextLink = oooRequestResponse?.next;
+  nextLink = requestResponse?.next;
 }
 
 async function acceptRejectRequest(id, reqBody) {
@@ -497,7 +549,7 @@ async function performAcceptRejectAction(isAccepted, e) {
         updatedRequestDetails.requestedBy,
       );
 
-      const updatedCard = createOooRequestCard(
+      const updatedCard = createRequestCard(
         updatedRequestDetails,
         superUserDetails,
         requesterUserDetails,
@@ -535,4 +587,4 @@ function showToast(message, type) {
   }, 5000);
 }
 
-renderOooRequestCards({ state: statusValue, sort: sortByValue });
+renderRequestCards({ state: statusValue, sort: sortByValue });