diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 2435fb6..9f6cdfb 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -29,6 +29,28 @@ body { } } +.export-asset-count-button{ + background-color: #FFFFFF; + font: normal normal normal 15px/18px Adobe Clean; + height: auto; + width: auto; + display: flex; + padding: 5px 10px 5px 10px; + align-items: center; + border: 1px solid #D3D3D3; + border-radius: 4px; + cursor: pointer; + &:hover { + background-color: #c5c8c9; + } + & > .icon { + width: 15px; + margin-left: 5px; + margin-right: 8px; + } + +} + .gmo-program-details-wrapper { margin-top: 50px; min-height: 400px; @@ -195,6 +217,11 @@ body { display: flex; flex-direction: row; justify-content: space-between; + position: relative; + & .export-asset-count-button{ + position:absolute; + right: 450px; + } } .tab.calendar { margin-top:10px; @@ -690,6 +717,7 @@ body { margin-bottom: 5px; &:not(:last-child) { margin-right: 5px; + cursor: pointer; } &.selected{ background-color: #0096FF; @@ -1072,4 +1100,5 @@ body { color: #0096FF; cursor: pointer; margin-left: 10px; -} \ No newline at end of file +} + diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index c472cfb..09a9f3b 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -58,6 +58,13 @@ export default async function decorate(block) { ), ); + // export asset count button + const exportAssetCountButton = div( + { class: 'export-asset-count-button'}, + 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( { class: 'tab-wrapper'}, @@ -115,6 +122,9 @@ export default async function decorate(block) { div({ class: 'tags-wrapper'}), ), ), + div( + exportAssetCountButton, + ), div( { class: 'infocards-wrapper'}, div( @@ -124,7 +134,7 @@ export default async function decorate(block) { div( { class: 'card audiences'}, div({ class: 'card-heading h3'}, 'Audiences'), - ) + ), ), ); @@ -374,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); @@ -542,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) { @@ -574,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)}`; @@ -598,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'; @@ -635,7 +693,7 @@ async function buildFieldScopes(scopeTypeId, scopes, block, associationMap) { } }); }); - } + } function buildKPIList(program) { let kpiList = document.createElement('ul'); diff --git a/icons/download-button.svg b/icons/download-button.svg new file mode 100644 index 0000000..ddabb18 --- /dev/null +++ b/icons/download-button.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file