From 0cd2c755ff0dd77189d2ee73b5f4b8a74579aea9 Mon Sep 17 00:00:00 2001 From: Samruddhi Date: Wed, 20 Nov 2024 14:10:45 -0800 Subject: [PATCH] created 'Export CSV Button' and fetch data --- .../gmo-program-details.js | 61 ++++++++++++++++--- 1 file changed, 54 insertions(+), 7 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 07032f1..09a9f3b 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -64,7 +64,6 @@ export default async function decorate(block) { img({ class: 'icon icon-download' , 'data-direction': 'left', src: '/icons/download-button.svg'}), span({ class: 'button-label'}, 'Export Asset Count'), ); - // tab wrapper const tabWrapper = div( @@ -385,6 +384,60 @@ async function addProgramStats(block) { }); + // Attach event listener to the button + const exportAssetCountButton = document.querySelector('.export-asset-count-button'); + exportAssetCountButton.addEventListener('click', () => { + createCSV(deliverableTypeToPlatformsMap); + }); + + function createCSV(deliverableTypeToPlatformsMap) { + // Define the CSV header + let header = `Program name: ${program.programName}\n\n`; + let csvContent = `data:text/csv;charset=utf-8,${header}Deliverable Type,Platforms (by Deliverable Type),Deliverable Types - Asset Counts,Platform - Asset Counts\n`; + let grandTotalAssetCount = 0; + + // Iterate over the deliverableTypeToPlatformsMap to extract data + deliverableTypeToPlatformsMap.forEach((platformsMap, deliverableType) => { + let totalAssetCount = 0; + + platformsMap.forEach(assetCount => { + totalAssetCount += assetCount; + }); + + // Add the deliverable type row + csvContent += `${deliverableType},All platforms,${totalAssetCount},\n`; + + // Add the platform rows + platformsMap.forEach((assetCount, platform) => { + csvContent += `,${platform},,${assetCount}\n`; + }); + + // Add to grand total + grandTotalAssetCount += totalAssetCount; + }); + + // add a blank row + csvContent += '\n'; + + // Add the grand total asset count row and bold the text + csvContent += `Total Asset Count,,${grandTotalAssetCount},\n`; + + // Encode the CSV content + const encodedUri = encodeURI(csvContent); + + // Create a link element to download the CSV file + const link = document.createElement("a"); + link.setAttribute("href", encodedUri); + link.setAttribute("download", "marketing-dashboard-hcv-count.csv"); + + // Append the link to the document body and trigger the download + document.body.appendChild(link); + link.click(); + + // Remove the link from the document + document.body.removeChild(link); + } + buildProductCard(program); buildFieldScopes('deliverable-type', uniqueDeliverableTypes, block, deliverableTypeToPlatformsMap); buildFieldScopes('platforms', uniquePlatforms, block, platformToDeliverableTypesMap); @@ -553,7 +606,6 @@ async function buildFieldScopes(scopeTypeId, scopes, block, associationMap) { t.classList.remove('selected'); // Remove the selected class }); const associatedItems = associationMap.get(scope); - console.log('Associated Items:', associatedItems); // Reset the associated buttons if (associatedItems) { @@ -585,17 +637,14 @@ async function buildFieldScopes(scopeTypeId, scopes, block, associationMap) { } else { // Hide all buttons const allTags = document.querySelectorAll('.scope-tag'); - console.log('All Tags:', allTags); allTags.forEach(t => t.style.display = 'none'); let associatedHeadingDiv = document.getElementById((scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); // Fetch all .scope-tag class from associatedHeadingDiv let alternativeTags = associatedHeadingDiv.querySelectorAll('.scope-tag'); - console.log('All Tags1:', alternativeTags); // Get the associated items const associatedItems = associationMap.get(scope); - console.log('Associated Items:', associatedItems); // Update the clicked button's text content to include the length tag.textContent = `${await lookupType(scope, scopeTypeId)}`; @@ -609,9 +658,7 @@ async function buildFieldScopes(scopeTypeId, scopes, block, associationMap) { associatedItems.forEach(async (count, key) => { totalAssociatedAssetCount = totalAssociatedAssetCount + count; const associatedTag = Array.from(alternativeTags).find(t => t.id.includes(key)); - console.log('Associated Tag:', associatedTag); let alternateTextContent = await lookupType(associatedTag.id, (scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); - console.log('Alternate Text Content:', alternateTextContent); if (associatedTag) { associatedTag.textContent = `${await lookupType(scope, scopeTypeId)}: ${alternateTextContent} (${count})`; associatedTag.style.display = 'inline-block';