From 6f6e098e692bbc22c8682a199981e87f210e1236 Mon Sep 17 00:00:00 2001 From: Divyank-29 Date: Fri, 4 Oct 2024 02:21:36 +0530 Subject: [PATCH 1/4] this commit create component that add approver name and date of approval when extension request is accepted --- extension-requests/script.js | 93 ++++++++++++++++++++++++++++++------ extension-requests/style.css | 28 +++++++---- 2 files changed, 99 insertions(+), 22 deletions(-) diff --git a/extension-requests/script.js b/extension-requests/script.js index c2b5f3a8..5922c523 100644 --- a/extension-requests/script.js +++ b/extension-requests/script.js @@ -462,6 +462,57 @@ const handleFormPropagation = async (event) => { event.preventDefault(); }; +const createApprovalElements = async (data, approvalText, approverContainer) => { + const approverDataPromise = getUser(data.approver); + const ApprovalDaysAgo = dateDiff( + Date.now(), + secondsToMilliSeconds(data.approvalTime), + (s) => s + ' ago', + ); + const approvalTextElement = createElement({ + type: 'span', + attributes: { class: 'assignee-approver-text' }, + innerText: `${approvalText} by`, + }); + approverContainer.appendChild(approvalTextElement); + + const approverImage = createElement({ + type: 'img', + attributes: { class: 'assignee-approver-image' }, + }); + approverContainer.appendChild(approverImage); + + const approverNameElement = createElement({ + type: 'span', + attributes: { class: 'assignee-approver-name' }, + }); + approverContainer.appendChild(approverNameElement); + + const daysElement = createElement({ + type: 'span', + attributes: { class: 'approval-day tooltip-container' }, + innerText: `${ApprovalDaysAgo}`, + }); + const toolTip = createElement({ + type: 'span', + attributes: { class: 'tooltip' }, + innerText: `${fullDateString(secondsToMilliSeconds(data.approvalTime))}`, + }); + + daysElement.appendChild(toolTip); + approverContainer.appendChild(daysElement); + + Promise.resolve(approverDataPromise) + .then((response) => { + const approverImageUrl = response?.picture?.url ?? DEFAULT_AVATAR; + const userFirstName = response?.first_name ?? data.approver; + + approverImage.src = approverImageUrl; + approverImage.alt = userFirstName; + approverNameElement.innerText = `${userFirstName},`; + }) +}; + async function createExtensionCard(data) { renderLogRecord[data.id] = []; //Create card element @@ -761,46 +812,60 @@ async function createExtensionCard(data) { cardAssigneeButtonContainer.appendChild(assigneeContainer); const assigneeText = createElement({ type: 'span', - attributes: { class: 'assignee-text' }, + attributes: { class: 'assignee-approver-text' }, innerText: 'Assigned to', }); assigneeContainer.appendChild(assigneeText); const assigneeImage = createElement({ type: 'img', - attributes: { class: 'assignee-image' }, + attributes: { class: 'assignee-approver-image' }, }); assigneeContainer.appendChild(assigneeImage); const assigneeNameElement = createElement({ type: 'span', - attributes: { class: 'assignee-name' }, + attributes: { class: 'assignee-approver-name' }, }); assigneeContainer.appendChild(assigneeNameElement); - const extensionCardButtons = createElement({ + const approverContainer = createElement({ type: 'div', - attributes: { class: 'extension-card-buttons' }, + attributes: { class: 'approver-container' }, }); - cardAssigneeButtonContainer.appendChild(extensionCardButtons); + cardAssigneeButtonContainer.appendChild(approverContainer); //Conditionally render the buttons bases on status if (data.status === Status.APPROVED) { + if (data.approver) { + createApprovalElements(data, 'Approved', approverContainer); + }else{ const approveButton = createElement({ type: 'button', attributes: { class: 'approve-button approved' }, innerText: Status.APPROVED, }); - extensionCardButtons.appendChild(approveButton); + approverContainer.appendChild(approveButton); + } } else if (data.status === Status.DENIED) { + if (data.approver) { + createApprovalElements(data, 'Denied', approverContainer); + } else { const denyButton = createElement({ type: 'button', attributes: { class: 'deny-button denied' }, innerText: Status.DENIED, }); - extensionCardButtons.appendChild(denyButton); + approverContainer.appendChild(denyButton); + } } else { + const actionCardButtons = createElement({ + type: 'div', + attributes: { class: 'action-card-buttons' }, + }); + cardAssigneeButtonContainer.appendChild(actionCardButtons); + const editButton = createElement({ type: 'button', attributes: { class: 'edit-button' }, }); - extensionCardButtons.appendChild(editButton); + actionCardButtons.appendChild(editButton); const editIcon = createElement({ type: 'img', attributes: { src: EDIT_ICON, alt: 'edit-icon' }, @@ -810,7 +875,7 @@ async function createExtensionCard(data) { type: 'div', attributes: { class: 'update-wrapper hidden' }, }); - extensionCardButtons.appendChild(updateWrapper); + actionCardButtons.appendChild(updateWrapper); const updateButton = createElement({ type: 'button', attributes: { class: 'update-button' }, @@ -837,7 +902,7 @@ async function createExtensionCard(data) { denyButton.appendChild(denyIcon); - extensionCardButtons.appendChild(denyButton); + actionCardButtons.appendChild(denyButton); const approveButton = createElement({ type: 'button', @@ -848,7 +913,7 @@ async function createExtensionCard(data) { attributes: { class: 'check-icon', src: CHECK_ICON, alt: 'check-icon' }, }); approveButton.appendChild(approveIcon); - extensionCardButtons.appendChild(approveButton); + actionCardButtons.appendChild(approveButton); //Event listeners editButton.addEventListener('click', (event) => { handleFormPropagation(event); @@ -1189,7 +1254,7 @@ async function createExtensionCard(data) { Promise.all([taskDataPromise, userDataPromise]).then((response) => { const [{ taskData }, userData] = response; - const userImage = userData?.picture?.url ?? DEFAULT_AVATAR; + const approverImage = userData?.picture?.url ?? DEFAULT_AVATAR; let userFirstName = userData?.first_name ?? data.assignee; const taskStatus = taskData?.status?.replaceAll('_', ' '); const userId = userData?.id; @@ -1198,7 +1263,7 @@ async function createExtensionCard(data) { userFirstName = userFirstName ?? ''; statusSiteLink.href = `${STATUS_BASE_URL}/tasks/${data.taskId}`; statusSiteLink.innerText = taskData.title; - assigneeImage.src = userImage; + assigneeImage.src = approverImage; assigneeImage.alt = userFirstName; assigneeNameElement.innerText = userFirstName; taskStatusValue.innerText = ` ${taskStatus}`; diff --git a/extension-requests/style.css b/extension-requests/style.css index 50d70d1b..72ea3b56 100644 --- a/extension-requests/style.css +++ b/extension-requests/style.css @@ -124,17 +124,17 @@ .assignee-container { display: flex; align-items: center; - gap: 1rem; + gap: 0.7rem; } -.assignee-image { +.assignee-approver-image { width: 1.875rem; height: 1.875rem; color: transparent; border-radius: 50%; } -.assignee-name { +.assignee-approver-name { font-size: 1.3rem; font-weight: 500; border-radius: 5px; @@ -269,17 +269,29 @@ display: flex; justify-content: space-between; } +.approval-day{ + font-size: 1.0rem; + font-weight: 500; + padding-top: 0.25rem; + right: 0.4rem; + white-space: wrap; +} -.assignee-text { +.assignee-approver-text { font-size: 1.1rem; font-weight: 500; color: var(--medium-gray); } -.extension-card-buttons { +.approver-container { + display: flex; + gap: 1rem; + align-items: center; +} +.action-card-buttons{ display: flex; gap: 0.5rem; - margin-right: 3.5rem; + margin-right:3.5rem; } .details-heading { @@ -820,7 +832,7 @@ body { margin: 1.5rem; } - .extension-card-buttons { + .approver-container { margin: 0; } @@ -855,7 +867,7 @@ body { margin: 1rem; } - .assignee-text { + .assignee-approver-text { display: none; } From ce09c1f87e20317ba47c61f91b640cde3a0a6afd Mon Sep 17 00:00:00 2001 From: Divyank-29 Date: Fri, 4 Oct 2024 15:32:32 +0530 Subject: [PATCH 2/4] change in css --- extension-requests/script.js | 12 ++++++------ extension-requests/style.css | 11 ++++++----- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/extension-requests/script.js b/extension-requests/script.js index 5922c523..4ab1e1c3 100644 --- a/extension-requests/script.js +++ b/extension-requests/script.js @@ -471,20 +471,20 @@ const createApprovalElements = async (data, approvalText, approverContainer) => ); const approvalTextElement = createElement({ type: 'span', - attributes: { class: 'assignee-approver-text' }, + attributes: { class: 'approver-text' }, innerText: `${approvalText} by`, }); approverContainer.appendChild(approvalTextElement); const approverImage = createElement({ type: 'img', - attributes: { class: 'assignee-approver-image' }, + attributes: { class: 'approver-image' }, }); approverContainer.appendChild(approverImage); const approverNameElement = createElement({ type: 'span', - attributes: { class: 'assignee-approver-name' }, + attributes: { class: 'approver-name' }, }); approverContainer.appendChild(approverNameElement); @@ -812,18 +812,18 @@ async function createExtensionCard(data) { cardAssigneeButtonContainer.appendChild(assigneeContainer); const assigneeText = createElement({ type: 'span', - attributes: { class: 'assignee-approver-text' }, + attributes: { class: 'assignee-text' }, innerText: 'Assigned to', }); assigneeContainer.appendChild(assigneeText); const assigneeImage = createElement({ type: 'img', - attributes: { class: 'assignee-approver-image' }, + attributes: { class: 'assignee-image' }, }); assigneeContainer.appendChild(assigneeImage); const assigneeNameElement = createElement({ type: 'span', - attributes: { class: 'assignee-approver-name' }, + attributes: { class: 'assignee-name' }, }); assigneeContainer.appendChild(assigneeNameElement); const approverContainer = createElement({ diff --git a/extension-requests/style.css b/extension-requests/style.css index 72ea3b56..a508dc43 100644 --- a/extension-requests/style.css +++ b/extension-requests/style.css @@ -127,14 +127,14 @@ gap: 0.7rem; } -.assignee-approver-image { +.approver-image, .assignee-image { width: 1.875rem; height: 1.875rem; color: transparent; border-radius: 50%; } -.assignee-approver-name { +.approver-name, .assignee-name { font-size: 1.3rem; font-weight: 500; border-radius: 5px; @@ -277,7 +277,7 @@ white-space: wrap; } -.assignee-approver-text { +.approver-text, .assignee-text { font-size: 1.1rem; font-weight: 500; color: var(--medium-gray); @@ -285,9 +285,10 @@ .approver-container { display: flex; - gap: 1rem; + gap: 0.7rem; align-items: center; } + .action-card-buttons{ display: flex; gap: 0.5rem; @@ -867,7 +868,7 @@ body { margin: 1rem; } - .assignee-approver-text { + .approver-text, .assignee-text { display: none; } From 2305fae658328d8c8d78ccb55d23036b2792d123 Mon Sep 17 00:00:00 2001 From: Divyank-29 Date: Fri, 4 Oct 2024 16:02:43 +0530 Subject: [PATCH 3/4] change in script --- extension-requests/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extension-requests/script.js b/extension-requests/script.js index 4ab1e1c3..f3507e23 100644 --- a/extension-requests/script.js +++ b/extension-requests/script.js @@ -1254,7 +1254,7 @@ async function createExtensionCard(data) { Promise.all([taskDataPromise, userDataPromise]).then((response) => { const [{ taskData }, userData] = response; - const approverImage = userData?.picture?.url ?? DEFAULT_AVATAR; + const userImage = userData?.picture?.url ?? DEFAULT_AVATAR; let userFirstName = userData?.first_name ?? data.assignee; const taskStatus = taskData?.status?.replaceAll('_', ' '); const userId = userData?.id; @@ -1263,7 +1263,7 @@ async function createExtensionCard(data) { userFirstName = userFirstName ?? ''; statusSiteLink.href = `${STATUS_BASE_URL}/tasks/${data.taskId}`; statusSiteLink.innerText = taskData.title; - assigneeImage.src = approverImage; + assigneeImage.src = userImage; assigneeImage.alt = userFirstName; assigneeNameElement.innerText = userFirstName; taskStatusValue.innerText = ` ${taskStatus}`; From 1ab8f8f552c90d96163d30138728a808a7dc7f36 Mon Sep 17 00:00:00 2001 From: Divyank-29 Date: Fri, 4 Oct 2024 16:21:18 +0530 Subject: [PATCH 4/4] change variable --- extension-requests/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/extension-requests/script.js b/extension-requests/script.js index f3507e23..8ec92a0d 100644 --- a/extension-requests/script.js +++ b/extension-requests/script.js @@ -505,11 +505,11 @@ const createApprovalElements = async (data, approvalText, approverContainer) => Promise.resolve(approverDataPromise) .then((response) => { const approverImageUrl = response?.picture?.url ?? DEFAULT_AVATAR; - const userFirstName = response?.first_name ?? data.approver; + const approverFirstName = response?.first_name ?? data.approver; approverImage.src = approverImageUrl; - approverImage.alt = userFirstName; - approverNameElement.innerText = `${userFirstName},`; + approverImage.alt = approverFirstName; + approverNameElement.innerText = `${approverFirstName},`; }) };