Feat: UI for listing extension requests in /requests page (#774)

* tabs are switching on request page

* added extension-request in request page

* added extension-request in request page

* feat: Added the whole extension page UI

* refactor: Abstract fetch logic into reusable function

- Created fetchData function to handle fetch requests with different query parameters and controllers.
- Updated getOooRequests and getExtensionRequests to use fetchData.

* refactor: Abstract fetch logic into reusable function

- Created fetchData function to handle fetch requests with different query parameters and controllers.
- Updated getOooRequests and getExtensionRequests to use fetchData.

* refactor: createExtensionCard function to optimize element creation

- Use DocumentFragment to accumulate and append elements efficiently
- Simplify element creation with template literals
- Extract repetitive tasks and event listeners into separate functions
- Maintain coding standards and improve readability

Resolves PR comment regarding optimizing document.createElement calls in createExtensionCard function.

* refactor: code refactored to show superusers the extension request

* Merge branch 'feat/extension-request-page' of github.com:Real-Dev-Squad/website-dashboard into feat/extension-request-page
bbbjbLines starting with '#' will be ignored, and an empty message aborts
e commit.

:wq
Merge branch 'feat/extension-request-page' of github.com:Real-Dev-Squad/website-dashboard into feat/extension-request-page

This merge is necessary to integrate the latest changes from the remote branch into the local branch.

* fix: delete the mock-date, will raise the test PR separately

* feat: add UI for listing extension requests with status update controls

- Implemented a separate tab for listing extension requests on the /requests page.
- Added functionality for super users to approve or reject extension requests directly from the UI.
- Updated script.js to handle API calls for both OOO and extension requests.
- Ensured correct query parameters are reflected in the URL when switching between tabs.
- Improved error handling and message display for extension requests.

* fix(css): center the loading text on the requests page

- Updated .container__body__loader class to center the loading text both horizontally and vertically using Flexbox.

---------

Co-authored-by: devanshdixit <[email protected]>
Co-authored-by: Amit Prakash <[email protected]>

Author: 3 people

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 });

requests/style.css

@@ -88,6 +88,10 @@ p {
   text-align: center;
   font-size: 1.5rem;
   margin: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 8rem;
 }
 .container__body {
   margin-top: 2.5rem;
@@ -333,7 +337,6 @@ nav a:hover {
 }
 
 .disabled__tab {
-  pointer-events: none;
   color: var(--color-gray);
 }
 
@@ -547,3 +550,7 @@ nav a:hover {
 .virtual {
   width: 100%;
 }
+
+#search_filter_container {
+  display: none;
+}

requests/util.js

@@ -44,6 +44,18 @@ function getOooQueryParamsString(query) {
   return `?${queryParam}`;
 }
 
+function getExtensionQueryParamsString(query) {
+  let queryParam = 'dev=true&type=EXTENSION&size=12';
+  if (
+    query.state !== undefined &&
+    query.state !== null &&
+    query.state !== 'ALL'
+  ) {
+    queryParam += `&state=${query.state}`;
+  }
+  return `?${queryParam}`;
+}
+
 function convertDateToReadableStringDate(date, format) {
   if (format === undefined || format === null) {
     format = DEFAULT_DATE_FORMAT;
@@ -104,9 +116,9 @@ async function getInDiscordUserList() {
 }
 
 const addSpinner = (container) => {
-  const spinner = createElement({
-    type: 'div',
-    attributes: { class: 'spinner' },
+  const spinner = createElementFromMap({
+    tagName: 'div',
+    class: 'spinner',
   });
 
   container.append(spinner);