From a53d1ebc7a2869774747be09e84854045de65303 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Mon, 18 Mar 2024 12:10:30 -0400 Subject: [PATCH 1/6] initial commit, new blocks/files --- blocks/gmo-collection-header/gmo-collection-header.css | 0 blocks/gmo-collection-header/gmo-collection-header.js | 0 blocks/gmo-collection-list/gmo-collection-list.css | 0 blocks/gmo-collection-list/gmo-collection-list.js | 0 4 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 blocks/gmo-collection-header/gmo-collection-header.css create mode 100644 blocks/gmo-collection-header/gmo-collection-header.js create mode 100644 blocks/gmo-collection-list/gmo-collection-list.css create mode 100644 blocks/gmo-collection-list/gmo-collection-list.js diff --git a/blocks/gmo-collection-header/gmo-collection-header.css b/blocks/gmo-collection-header/gmo-collection-header.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/gmo-collection-header/gmo-collection-header.js b/blocks/gmo-collection-header/gmo-collection-header.js new file mode 100644 index 00000000..e69de29b diff --git a/blocks/gmo-collection-list/gmo-collection-list.css b/blocks/gmo-collection-list/gmo-collection-list.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/gmo-collection-list/gmo-collection-list.js b/blocks/gmo-collection-list/gmo-collection-list.js new file mode 100644 index 00000000..e69de29b From 5563c290c8964c7387bff4c11715a758cd8e2dac Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Mon, 18 Mar 2024 16:11:00 -0400 Subject: [PATCH 2/6] rename files, start implementing --- .../gmo-campaign-header.css} | 0 .../gmo-campaign-header.js} | 0 .../gmo-campaign-list.css} | 0 blocks/gmo-campaign-list/gmo-campaign-list.js | 135 ++++++++++++++++++ .../gmo-collection-list.js | 0 5 files changed, 135 insertions(+) rename blocks/{gmo-collection-header/gmo-collection-header.css => gmo-campaign-header/gmo-campaign-header.css} (100%) rename blocks/{gmo-collection-header/gmo-collection-header.js => gmo-campaign-header/gmo-campaign-header.js} (100%) rename blocks/{gmo-collection-list/gmo-collection-list.css => gmo-campaign-list/gmo-campaign-list.css} (100%) create mode 100644 blocks/gmo-campaign-list/gmo-campaign-list.js delete mode 100644 blocks/gmo-collection-list/gmo-collection-list.js diff --git a/blocks/gmo-collection-header/gmo-collection-header.css b/blocks/gmo-campaign-header/gmo-campaign-header.css similarity index 100% rename from blocks/gmo-collection-header/gmo-collection-header.css rename to blocks/gmo-campaign-header/gmo-campaign-header.css diff --git a/blocks/gmo-collection-header/gmo-collection-header.js b/blocks/gmo-campaign-header/gmo-campaign-header.js similarity index 100% rename from blocks/gmo-collection-header/gmo-collection-header.js rename to blocks/gmo-campaign-header/gmo-campaign-header.js diff --git a/blocks/gmo-collection-list/gmo-collection-list.css b/blocks/gmo-campaign-list/gmo-campaign-list.css similarity index 100% rename from blocks/gmo-collection-list/gmo-collection-list.css rename to blocks/gmo-campaign-list/gmo-campaign-list.css diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.js b/blocks/gmo-campaign-list/gmo-campaign-list.js new file mode 100644 index 00000000..6b08a0d6 --- /dev/null +++ b/blocks/gmo-campaign-list/gmo-campaign-list.js @@ -0,0 +1,135 @@ +import { readBlockConfig } from '../../scripts/lib-franklin.js'; + +const testCollections = { + 'collection1': { + 'name': 'test campaign 1', + 'type': 'testType1', + 'status': 'testStatus1', + 'activeQuarter': 'testQuarter1', + 'launchYear': 'testYear1', + 'products': 'testProduct1', + 'entitlements': 'testEntitlement1', + 'audiences': 'testAudiences1', + 'languages': 'testLanguages1', + 'kpi': 'testKPI1', + 'categories': 'testCategories1', + 'ddom': 'testDdom1' + }, + 'collection2': { + 'name': 'campaign 2', + 'type': 'testType2', + 'status': 'testStatus2', + 'activeQuarter': 'testQuarter2', + 'launchYear': 'testYear2', + 'products': 'testProduct2', + 'entitlements': 'testEntitlement2', + 'audiences': 'testAudiences2', + 'languages': 'testLanguages2', + 'kpi': 'testKPI2', + 'categories': 'testCategories2', + 'ddom': 'testDdom2' + }, + 'collection3': { + 'name': 'my third campaign', + 'type': 'testType3', + 'status': 'testStatus3', + 'activeQuarter': 'testQuarter3', + 'launchYear': 'testYear3', + 'products': 'testProduct3', + 'entitlements': 'testEntitlement3', + 'audiences': 'testAudiences3', + 'languages': 'testLanguages3', + 'kpi': 'testKPI3', + 'categories': 'testCategories3', + 'ddom': 'testDdom3' + }, + 'collection4': { + 'name': 'your fourth campaign', + 'type': 'testType4', + 'status': 'testStatus4', + 'activeQuarter': 'testQuarter4', + 'launchYear': 'testYear4', + 'products': 'testProduct4', + 'entitlements': 'testEntitlement4', + 'audiences': 'testAudiences4', + 'languages': 'testLanguages4', + 'kpi': 'testKPI4', + 'categories': 'testCategories4', + 'ddom': 'testDdom4' + }, + 'collection5': { + 'name': 'five campaigns in', + 'type': 'testType5', + 'status': 'testStatus5', + 'activeQuarter': 'testQuarter5', + 'launchYear': 'testYear5', + 'products': 'testProduct5', + 'entitlements': 'testEntitlement5', + 'audiences': 'testAudiences5', + 'languages': 'testLanguages5', + 'kpi': 'testKPI5', + 'categories': 'testCategories5', + 'ddom': 'testDdom5' + } +} +const testConfig = [ + { + 'name': 'Campaign', + 'attribute': 'campaign', + 'sortable': 'true' + }, + { + 'name': '', + 'attribute': '', + 'sortable': 'false' + }, + { + 'name': '', + 'attribute': '', + 'sortable': 'true', + 'type': 'date' + }, + { + 'name': 'Products', + 'attribute': '' + }, + { + 'name': 'Language', + 'attribute': '', + 'type': 'string' + }, + { + 'name': 'Status', + 'attribute': 'status', + 'sortable': 'true' + } +] + + +export default async function decorate(block) { + //const config = readBlockConfig(block); // this will be for final implementation + const config = testConfig; + const listHeaders = buildListHeaders(config); + block.innerHTML = ` +
+
+ ${listHeaders} +
+
+
+
` + buildCollectionList(testCollections); +} + +function buildCollectionList(collections) { + +} + +function buildListHeaders(headerConfig) { + console.log(headerConfig); + const config = headerConfig; + let columnHeaders = []; + config.forEach((column) => { + console.log(column); + }) +} diff --git a/blocks/gmo-collection-list/gmo-collection-list.js b/blocks/gmo-collection-list/gmo-collection-list.js deleted file mode 100644 index e69de29b..00000000 From 4be06d48e8b1b8d1b7f2b6c9f9a021ef312cea50 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Thu, 21 Mar 2024 15:46:33 -0400 Subject: [PATCH 3/6] continuing to implement/adjust styling --- .../gmo-campaign-list/gmo-campaign-list.css | 152 +++++++++++++ blocks/gmo-campaign-list/gmo-campaign-list.js | 206 +++++++++++++++--- 2 files changed, 327 insertions(+), 31 deletions(-) diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.css b/blocks/gmo-campaign-list/gmo-campaign-list.css index e69de29b..30970147 100644 --- a/blocks/gmo-campaign-list/gmo-campaign-list.css +++ b/blocks/gmo-campaign-list/gmo-campaign-list.css @@ -0,0 +1,152 @@ +body { + background-color: rgb(247, 246, 246); +} +.gmo-campaign-list-wrapper { + background-color: #FFF; + padding-left: 12px; + padding-right: 12px; + padding-bottom: 10px; + border-radius: 10px; +} +.gmo-campaign-list { + font-size: 16px; +} +.list-header { + display: flex; + font-weight: bold; + margin-bottom: 20px; + margin-top: 25px; + padding-top: 5px; +} +.column-header-wrapper { + display: flex; +} +.column-label { + height: 32px; + line-height: 32px; + font-size: 14px; + text-align: center; + margin-right: 7px; +} +.column-sort-wrapper { + display: flex; + flex-direction: column; +} +.column-sort-wrapper .icon { + height: 14px; + width: 14px; +} +.column-sort-wrapper .icon-chevronUp { + margin-top: 2px; + margin-bottom: -4px; +} +.column-sort-wrapper .icon-chevronDown { + padding-bottom: 2px; +} +.list-items { + display: flex; + flex-direction: column; +} +.campaign-row { + display: flex; + font-size: 14px; + margin-bottom: 20px; +} +.campaign-info-wrapper { + display: flex; + font-size: 14px; +} +.campaign-icon { + width: 50px; + margin-right: 10px; +} +.campaign-name-label { + font-weight: bold; +} +.campaign-launch-date { + font-weight: bold; +} +.list-footer { + height: 32px; + line-height: 32px; + font-size: 14px; + display: flex; + justify-content: space-between; + margin-top: 20px; + margin-bottom: 5px; +} +.footer-total { + font-weight: bold; + width: 300px; +} +.footer-pagination { + display: flex; +} +.footer-pagination-button { + font-size: 12px; + font-weight: bold; + text-align: center; + width: 55px; + height: 25px; + line-height: 25px; + border-radius: 15px; + background-color: rgb(232, 232, 232); +} +.footer-pagination-button.prev { + margin-right: 25px; +} +.footer-pagination-pages { + line-height: 25px; + height: 25px; + font-size: 12px; + background-color: rgb(77, 77, 77); + color:#f6f6f6; + width: 23px; + text-align: center; + border-radius: 4px; +} +.footer-pagination-button.next { + margin-left: 25px; +} +.footer-perPage { + display: flex; + justify-content: flex-end; + width: 300px; +} +.footer-perPage-label { + font-size: 14px; + text-align: center; + margin-right: 8px; +} +.footer-perPage-dropdown { + width: 75px; +} +select { + border-radius: 4px; +} +.column-1 { + width: 22%; +} +.column-2 { + width: 19%; +} +.column-3 { + width: 14%; +} +.column-4 { + width: 14%; +} +.column-5 { + width: 14%; +} +.column-6 { + width: 22%; +} +.status { + background-color: rgb(148, 226, 148); + color: rgba(4, 150, 4, 0.945); + width: 100px; + text-align: center; + border: 2px solid rgb(5, 118, 5); + border-radius: 3px; +} \ No newline at end of file diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.js b/blocks/gmo-campaign-list/gmo-campaign-list.js index 6b08a0d6..8ae0e583 100644 --- a/blocks/gmo-campaign-list/gmo-campaign-list.js +++ b/blocks/gmo-campaign-list/gmo-campaign-list.js @@ -1,77 +1,84 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; +import { decorateIcons } from '../../scripts/lib-franklin.js'; -const testCollections = { - 'collection1': { +const icon = 'https://delivery-p108396-e1046543.adobeaemcloud.com/adobe/assets/deliver/urn:aaid:aem:acdaa42f-00ae-42f4-97e5-8309c42d9076/marketing-hub-102023-lockup-video.png' +const testCollections = [ + { 'name': 'test campaign 1', 'type': 'testType1', 'status': 'testStatus1', 'activeQuarter': 'testQuarter1', - 'launchYear': 'testYear1', + 'launch': 'testYear1', 'products': 'testProduct1', 'entitlements': 'testEntitlement1', 'audiences': 'testAudiences1', 'languages': 'testLanguages1', 'kpi': 'testKPI1', 'categories': 'testCategories1', - 'ddom': 'testDdom1' + 'ddom': 'testDdom1', + 'description': 'This is a test description that can be 2 lines long.' }, - 'collection2': { + { 'name': 'campaign 2', 'type': 'testType2', 'status': 'testStatus2', 'activeQuarter': 'testQuarter2', - 'launchYear': 'testYear2', + 'launch': 'testYear2', 'products': 'testProduct2', 'entitlements': 'testEntitlement2', 'audiences': 'testAudiences2', 'languages': 'testLanguages2', 'kpi': 'testKPI2', 'categories': 'testCategories2', - 'ddom': 'testDdom2' + 'ddom': 'testDdom2', + 'description': 'This is a test description that can be 2 lines long.' }, - 'collection3': { + { 'name': 'my third campaign', 'type': 'testType3', 'status': 'testStatus3', 'activeQuarter': 'testQuarter3', - 'launchYear': 'testYear3', + 'launch': 'testYear3', 'products': 'testProduct3', 'entitlements': 'testEntitlement3', 'audiences': 'testAudiences3', 'languages': 'testLanguages3', 'kpi': 'testKPI3', 'categories': 'testCategories3', - 'ddom': 'testDdom3' + 'ddom': 'testDdom3', + 'description': 'This is a test description that can be 2 lines long.' }, - 'collection4': { + { 'name': 'your fourth campaign', 'type': 'testType4', 'status': 'testStatus4', 'activeQuarter': 'testQuarter4', - 'launchYear': 'testYear4', + 'launch': 'testYear4', 'products': 'testProduct4', 'entitlements': 'testEntitlement4', 'audiences': 'testAudiences4', 'languages': 'testLanguages4', 'kpi': 'testKPI4', 'categories': 'testCategories4', - 'ddom': 'testDdom4' + 'ddom': 'testDdom4', + 'description': 'This is a test description that can be 2 lines long.' }, - 'collection5': { + { 'name': 'five campaigns in', 'type': 'testType5', 'status': 'testStatus5', 'activeQuarter': 'testQuarter5', - 'launchYear': 'testYear5', + 'launch': 'testYear5', 'products': 'testProduct5', 'entitlements': 'testEntitlement5', 'audiences': 'testAudiences5', 'languages': 'testLanguages5', 'kpi': 'testKPI5', 'categories': 'testCategories5', - 'ddom': 'testDdom5' + 'ddom': 'testDdom5', + 'description': 'This is a test description that can be 2 lines long.' } -} +] const testConfig = [ { 'name': 'Campaign', @@ -79,23 +86,23 @@ const testConfig = [ 'sortable': 'true' }, { - 'name': '', - 'attribute': '', + 'name': 'Overview', + 'attribute': 'description', 'sortable': 'false' }, { - 'name': '', - 'attribute': '', + 'name': 'Launch Date', + 'attribute': 'launchDate', 'sortable': 'true', 'type': 'date' }, { 'name': 'Products', - 'attribute': '' + 'attribute': 'products' }, { 'name': 'Language', - 'attribute': '', + 'attribute': 'language', 'type': 'string' }, { @@ -110,26 +117,163 @@ export default async function decorate(block) { //const config = readBlockConfig(block); // this will be for final implementation const config = testConfig; const listHeaders = buildListHeaders(config); + const listItems = buildCampaignList(testCollections); + const listFooter = buildListFooter(); + block.innerHTML = `
-
+
` + + /* +
${listHeaders}
-
` - buildCollectionList(testCollections); + */ + const listContainer = block.querySelector('.list-container'); + listContainer.appendChild(listHeaders); + listContainer.appendChild(listItems); + listContainer.appendChild(listFooter); + decorateIcons(block); } -function buildCollectionList(collections) { - +function buildCampaignList(campaigns) { + const listWrapper = document.createElement('div'); + listWrapper.classList.add('list-items'); + campaigns.forEach((campaign) => { + const campaignRow = document.createElement('div'); + campaignRow.classList.add('campaign-row'); + const campaignInfoWrapper = document.createElement('div'); + campaignInfoWrapper.classList.add('campaign-info-wrapper','column-1'); + const campaignIcon = document.createElement('div'); + campaignIcon.classList.add('campaign-icon'); + campaignIcon.innerHTML = `` + const campaignName = document.createElement('div'); + campaignName.classList.add('campaign-name-wrapper'); + campaignName.innerHTML = ` +
Campaign Name
+
${campaign.name}
+ ` + campaignInfoWrapper.appendChild(campaignIcon); + campaignInfoWrapper.appendChild(campaignName); + const campaignOverview = document.createElement('div'); + campaignOverview.textContent = campaign.description; + campaignOverview.classList.add('column-2'); + const campaignLaunch = document.createElement('div'); + campaignLaunch.textContent = campaign.launch; + campaignLaunch.classList.add('column-3', 'campaign-launch-date'); + const campaignProducts = document.createElement('div'); + campaignProducts.textContent = campaign.products; // this will need additional processing + campaignProducts.classList.add('column-4'); + const campaignLanguage = document.createElement('div'); + campaignLanguage.textContent = campaign.languages; + campaignLanguage.classList.add('column-5'); + const campaignStatusWrapper = document.createElement('div'); + campaignStatusWrapper.classList.add('status-wrapper', 'column-6'); + const campaignStatus = document.createElement('div'); + campaignStatus.textContent = campaign.status; // this will need additional processing + campaignStatus.classList.add('status'); + campaignStatusWrapper.appendChild(campaignStatus); + campaignRow.appendChild(campaignInfoWrapper); + campaignRow.appendChild(campaignOverview); + campaignRow.appendChild(campaignLaunch); + campaignRow.appendChild(campaignProducts); + campaignRow.appendChild(campaignLanguage); + campaignRow.appendChild(campaignStatusWrapper); + + listWrapper.appendChild(campaignRow); + }); + return listWrapper; } function buildListHeaders(headerConfig) { - console.log(headerConfig); + //console.log(headerConfig); const config = headerConfig; - let columnHeaders = []; + const listHeaders = document.createElement('div'); + listHeaders.classList.add('list-header'); + let columnCounter = 1; config.forEach((column) => { - console.log(column); + //console.log(column); + const columnWrapper = document.createElement('div'); + columnWrapper.classList.add('column-header-wrapper'); + columnWrapper.classList.add(`column-${columnCounter}`); + const columnEl = document.createElement('div'); + columnEl.classList.add('column-label'); + columnEl.dataset.sortable = column.sortable; + columnEl.dataset.attribute = column.attribute; + columnEl.dataset.name = column.name; + columnEl.textContent = column.name; + + columnCounter++; + columnWrapper.appendChild(columnEl); + //sorting + if (column.sortable) { + const columnSort = document.createElement('div'); + columnSort.classList.add('column-sort-wrapper'); + const columnSortAsc = document.createElement('span'); + // + columnSortAsc.classList.add('column-sort-asc', 'icon', 'icon-chevronUp'); + //columnSortAsc.textContent = "^"; + const columnSortDesc = document.createElement('span'); + columnSortDesc.classList.add('column-sort-desc', 'icon', 'icon-chevronDown'); + //columnSortDesc.textContent = "v"; + columnSort.appendChild(columnSortAsc); + columnSort.appendChild(columnSortDesc); + columnWrapper.appendChild(columnSort); + } + //end sorting + listHeaders.appendChild(columnWrapper); }) + return listHeaders; +} + +function buildListFooter() { + const footerWrapper = document.createElement('div'); + footerWrapper.classList.add('list-footer', 'footer-wrapper'); + const footerTotal = document.createElement('div'); + footerTotal.textContent = 'Page 1 of 2 -- 46 total results'; + footerTotal.classList.add('footer-total'); + // pagination + const footerPagination = document.createElement('div'); + footerPagination.classList.add('footer-pagination'); + const footerPrev = document.createElement('div'); + footerPrev.classList.add('footer-pagination-button', 'prev'); + footerPrev.textContent = 'Prev'; + const footerPages = document.createElement('div'); + footerPages.classList.add('footer-pagination-pages'); + footerPages.textContent = '1'; + const footerNext = document.createElement('div'); + footerNext.classList.add('footer-pagination-button', 'next'); + footerNext.textContent = 'Next'; + footerPagination.appendChild(footerPrev); + footerPagination.appendChild(footerPages); + footerPagination.appendChild(footerNext); + // end pagination + + // per-page controls + const footerPerPage = document.createElement('div'); + footerPerPage.classList.add('footer-perPage'); + const footerPerPageLabel = document.createElement('div'); + footerPerPageLabel.textContent = 'Per Page'; + footerPerPageLabel.classList.add('footer-perPage-label'); + const footerPerPageDropdown = document.createElement('div'); + footerPerPageDropdown.innerHTML = ` + + ` + footerPerPageDropdown.classList.add('footer-perPage-dropdown'); + footerPerPage.appendChild(footerPerPageLabel); + footerPerPage.appendChild(footerPerPageDropdown); + // end per-page controls + + footerWrapper.appendChild(footerTotal); + footerWrapper.appendChild(footerPagination); + footerWrapper.appendChild(footerPerPage); + return footerWrapper; } From 5aa0dd63f9e9f76c87beb917e3bd14a8e2644704 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Wed, 27 Mar 2024 11:58:49 -0400 Subject: [PATCH 4/6] numerous changes - finish building bones of list component - build bones of pagination/footer - add icons for products (will likely need more) - build javascript for pagination (cleanup needed) - build javascript for sorting list --- .../gmo-campaign-list/gmo-campaign-list.css | 100 +++++- blocks/gmo-campaign-list/gmo-campaign-list.js | 307 +++++++++++++++--- icons/AEM.svg | 1 + icons/Acrobat.svg | 4 + icons/Express.svg | 43 +++ icons/Illustrator.svg | 5 + icons/Lightroom.svg | 36 ++ icons/Photoshop.svg | 37 +++ 8 files changed, 473 insertions(+), 60 deletions(-) create mode 100644 icons/AEM.svg create mode 100644 icons/Acrobat.svg create mode 100644 icons/Express.svg create mode 100644 icons/Illustrator.svg create mode 100644 icons/Lightroom.svg create mode 100644 icons/Photoshop.svg diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.css b/blocks/gmo-campaign-list/gmo-campaign-list.css index 30970147..aa8f3af1 100644 --- a/blocks/gmo-campaign-list/gmo-campaign-list.css +++ b/blocks/gmo-campaign-list/gmo-campaign-list.css @@ -10,12 +10,19 @@ body { } .gmo-campaign-list { font-size: 16px; + padding-left: 10px; + padding-right: 10px; + margin-top: 25px; +} +.gmo-campaign-list .hidden { + visibility: hidden; + display: none; } .list-header { display: flex; font-weight: bold; margin-bottom: 20px; - margin-top: 25px; + padding-top: 5px; } .column-header-wrapper { @@ -57,15 +64,41 @@ body { font-size: 14px; } .campaign-icon { - width: 50px; - margin-right: 10px; + width: 80px; + height: 80px; + margin-right: 14px; } .campaign-name-label { font-weight: bold; } +.campaign-name { + color: #959595; +} +.campaign-description { + color: #505050; +} .campaign-launch-date { + color: black; + font-weight: bold; +} +.product-label { + color: black; font-weight: bold; } +.product-entry { + height: 22px; + display: flex; + align-items: center; + margin-bottom: 1px; +} +.product-entry .icon { + height: 20px; + margin-right: 2px; +} +.product-entry .product-label { + font-weight: bold; + line-height: 14px; +} .list-footer { height: 32px; line-height: 32px; @@ -90,7 +123,18 @@ body { height: 25px; line-height: 25px; border-radius: 15px; - background-color: rgb(232, 232, 232); + background-color: #F4F4F4; + color: #BCBCBC; +} +.footer-pagination-button.inactive { + background-color: #F4F4F4; + color: #BCBCBC; + border: 2px solid #F4F4F4; +} +.footer-pagination-button.active { + background-color: #FFFFFF; + border: 2px solid #747474; + color: #747474; } .footer-pagination-button.prev { margin-right: 25px; @@ -99,12 +143,20 @@ body { line-height: 25px; height: 25px; font-size: 12px; - background-color: rgb(77, 77, 77); - color:#f6f6f6; width: 23px; text-align: center; border-radius: 4px; } +.footer-pagination-pages:not(:last-child) { + margin-right: 4px; +} +.footer-pages-wrapper { + display: flex; +} +.footer-pagination-pages.currentpage { + background-color: rgb(77, 77, 77); + color:#f6f6f6; +} .footer-pagination-button.next { margin-left: 25px; } @@ -125,28 +177,44 @@ select { border-radius: 4px; } .column-1 { - width: 22%; + width: 21%; + margin-right: 1%; } .column-2 { - width: 19%; + width: 26%; + margin-right: 1%; } .column-3 { - width: 14%; + width: 12%; + margin-right: 1%; } .column-4 { - width: 14%; + width: 13%; + margin-right: 1%; } .column-5 { - width: 14%; + width: 13%; + margin-right: 1%; } .column-6 { - width: 22%; + width: 14%; } .status { - background-color: rgb(148, 226, 148); - color: rgba(4, 150, 4, 0.945); - width: 100px; + width: 80px; text-align: center; - border: 2px solid rgb(5, 118, 5); border-radius: 3px; + height: 24px; + line-height: 24px; +} +.status.green { + background-color: #E8FFF8; + color: #33AB84; +} +.status.red { + background-color: rgb(248, 181, 181); + color: rgba(150, 4, 4, 0.945); +} +.status.yellow { + background-color: rgb(248, 243, 181); + color: rgba(150, 138, 4, 0.945); } \ No newline at end of file diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.js b/blocks/gmo-campaign-list/gmo-campaign-list.js index 8ae0e583..252b892e 100644 --- a/blocks/gmo-campaign-list/gmo-campaign-list.js +++ b/blocks/gmo-campaign-list/gmo-campaign-list.js @@ -2,81 +2,96 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; const icon = 'https://delivery-p108396-e1046543.adobeaemcloud.com/adobe/assets/deliver/urn:aaid:aem:acdaa42f-00ae-42f4-97e5-8309c42d9076/marketing-hub-102023-lockup-video.png' -const testCollections = [ +const testCampaigns = [ { 'name': 'test campaign 1', 'type': 'testType1', - 'status': 'testStatus1', + 'status': 'On Track', 'activeQuarter': 'testQuarter1', - 'launch': 'testYear1', - 'products': 'testProduct1', + 'launch': '03/07/2024', + 'products': [ + 'Photoshop', + 'Lightroom', + 'Express' + ], 'entitlements': 'testEntitlement1', 'audiences': 'testAudiences1', - 'languages': 'testLanguages1', + 'languages': 'English (WW)', 'kpi': 'testKPI1', 'categories': 'testCategories1', 'ddom': 'testDdom1', - 'description': 'This is a test description that can be 2 lines long.' + 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' }, { 'name': 'campaign 2', 'type': 'testType2', - 'status': 'testStatus2', + 'status': 'On Track', 'activeQuarter': 'testQuarter2', - 'launch': 'testYear2', - 'products': 'testProduct2', + 'launch': '04/03/2024', + 'products': [ + 'Photoshop', + 'Acrobat' + ], 'entitlements': 'testEntitlement2', 'audiences': 'testAudiences2', - 'languages': 'testLanguages2', + 'languages': 'English (WW)', 'kpi': 'testKPI2', 'categories': 'testCategories2', 'ddom': 'testDdom2', - 'description': 'This is a test description that can be 2 lines long.' + 'description': 'Express mobile public beta is not a major at scale marketing moment (due to the limited nature of beta experience) with key audiences of Existing Express users, investors, and media.' }, { 'name': 'my third campaign', 'type': 'testType3', - 'status': 'testStatus3', + 'status': 'On Track', 'activeQuarter': 'testQuarter3', - 'launch': 'testYear3', - 'products': 'testProduct3', + 'launch': '10/08/2020', + 'products': [ + 'Express' + ], 'entitlements': 'testEntitlement3', 'audiences': 'testAudiences3', - 'languages': 'testLanguages3', + 'languages': 'English (WW)', 'kpi': 'testKPI3', 'categories': 'testCategories3', 'ddom': 'testDdom3', - 'description': 'This is a test description that can be 2 lines long.' + 'description': 'Drive content review and approval through the platform, increase visibility and efficiency across multiplie verticals.' }, { 'name': 'your fourth campaign', 'type': 'testType4', - 'status': 'testStatus4', + 'status': 'Delayed', 'activeQuarter': 'testQuarter4', - 'launch': 'testYear4', - 'products': 'testProduct4', + 'launch': '12/10/2023', + 'products': [ + 'Acrobat', + 'Express' + ], 'entitlements': 'testEntitlement4', 'audiences': 'testAudiences4', - 'languages': 'testLanguages4', + 'languages': 'English (WW)', 'kpi': 'testKPI4', 'categories': 'testCategories4', 'ddom': 'testDdom4', - 'description': 'This is a test description that can be 2 lines long.' + 'description': 'Drive new unique visitors early in their careers to engage with Acrobat (US/APAC/JP) and change perception through focus on BSV (Germany).' }, { 'name': 'five campaigns in', 'type': 'testType5', - 'status': 'testStatus5', + 'status': 'Canceled', 'activeQuarter': 'testQuarter5', - 'launch': 'testYear5', - 'products': 'testProduct5', + 'launch': '06/21/2023', + 'products': [ + 'AEM', + 'Illustrator' + ], 'entitlements': 'testEntitlement5', 'audiences': 'testAudiences5', - 'languages': 'testLanguages5', + 'languages': 'English (WW)', 'kpi': 'testKPI5', 'categories': 'testCategories5', 'ddom': 'testDdom5', - 'description': 'This is a test description that can be 2 lines long.' + 'description': 'Optimize media strategy to target Hybrid Hobbyists and drive home Lightroom\'s value props.' } ] const testConfig = [ @@ -92,7 +107,7 @@ const testConfig = [ }, { 'name': 'Launch Date', - 'attribute': 'launchDate', + 'attribute': 'launch', 'sortable': 'true', 'type': 'date' }, @@ -115,10 +130,13 @@ const testConfig = [ export default async function decorate(block) { //const config = readBlockConfig(block); // this will be for final implementation + const numPerPage = 2; + const campaignCount = testCampaigns.length; const config = testConfig; const listHeaders = buildListHeaders(config); - const listItems = buildCampaignList(testCollections); - const listFooter = buildListFooter(); + const listItems = buildCampaignList(testCampaigns, numPerPage); + const listFooter = buildListFooter(campaignCount, numPerPage); + //paginate(listItems); block.innerHTML = `
@@ -138,33 +156,36 @@ export default async function decorate(block) { decorateIcons(block); } -function buildCampaignList(campaigns) { +function buildCampaignList(campaigns, numPerPage) { const listWrapper = document.createElement('div'); listWrapper.classList.add('list-items'); - campaigns.forEach((campaign) => { + + campaigns.forEach((campaign, index) => { const campaignRow = document.createElement('div'); campaignRow.classList.add('campaign-row'); + if ((index + 1) > numPerPage) campaignRow.classList.add('hidden'); const campaignInfoWrapper = document.createElement('div'); campaignInfoWrapper.classList.add('campaign-info-wrapper','column-1'); const campaignIcon = document.createElement('div'); campaignIcon.classList.add('campaign-icon'); - campaignIcon.innerHTML = `` + campaignIcon.innerHTML = ``; const campaignName = document.createElement('div'); campaignName.classList.add('campaign-name-wrapper'); campaignName.innerHTML = `
Campaign Name
-
${campaign.name}
+
${campaign.name}
` campaignInfoWrapper.appendChild(campaignIcon); campaignInfoWrapper.appendChild(campaignName); const campaignOverview = document.createElement('div'); campaignOverview.textContent = campaign.description; - campaignOverview.classList.add('column-2'); + campaignOverview.classList.add('column-2', 'campaign-description'); + campaignOverview.dataset.property = 'description'; const campaignLaunch = document.createElement('div'); campaignLaunch.textContent = campaign.launch; campaignLaunch.classList.add('column-3', 'campaign-launch-date'); - const campaignProducts = document.createElement('div'); - campaignProducts.textContent = campaign.products; // this will need additional processing + campaignLaunch.dataset.property = 'launch'; + const campaignProducts = buildProducts(campaign.products); campaignProducts.classList.add('column-4'); const campaignLanguage = document.createElement('div'); campaignLanguage.textContent = campaign.languages; @@ -172,8 +193,10 @@ function buildCampaignList(campaigns) { const campaignStatusWrapper = document.createElement('div'); campaignStatusWrapper.classList.add('status-wrapper', 'column-6'); const campaignStatus = document.createElement('div'); - campaignStatus.textContent = campaign.status; // this will need additional processing + campaignStatus.textContent = campaign.status; + campaignStatus.classList.add(determineStatusColor(campaign.status)); // this will need additional processing campaignStatus.classList.add('status'); + campaignStatus.dataset.property = 'status'; campaignStatusWrapper.appendChild(campaignStatus); campaignRow.appendChild(campaignInfoWrapper); campaignRow.appendChild(campaignOverview); @@ -187,13 +210,34 @@ function buildCampaignList(campaigns) { return listWrapper; } +function buildProducts(products) { + const campaignProducts = document.createElement('div'); + if (products.length > 1) { + products.forEach((product) => { + console.log(product); + const productEl = document.createElement('div'); + productEl.classList.add('product-entry'); + productEl.innerHTML = ` + + ${product} + ` + campaignProducts.appendChild(productEl); + }) + } else { + + } + + //campaignProducts.textContent = products; // this will need additional processing + return campaignProducts; +} + function buildListHeaders(headerConfig) { //console.log(headerConfig); const config = headerConfig; const listHeaders = document.createElement('div'); listHeaders.classList.add('list-header'); let columnCounter = 1; - config.forEach((column) => { + config.forEach((column) => { //console.log(column); const columnWrapper = document.createElement('div'); columnWrapper.classList.add('column-header-wrapper'); @@ -214,9 +258,17 @@ function buildListHeaders(headerConfig) { const columnSortAsc = document.createElement('span'); // columnSortAsc.classList.add('column-sort-asc', 'icon', 'icon-chevronUp'); + //columnSortAsc.dataset.property = column.attribute; + columnSortAsc.addEventListener('click', () => { + sortColumn('asc', column.attribute); + }) //columnSortAsc.textContent = "^"; const columnSortDesc = document.createElement('span'); columnSortDesc.classList.add('column-sort-desc', 'icon', 'icon-chevronDown'); + //columnSortDesc.dataset.property = column.attribute; + columnSortDesc.addEventListener('click', () => { + sortColumn('desc', column.attribute); + }) //columnSortDesc.textContent = "v"; columnSort.appendChild(columnSortAsc); columnSort.appendChild(columnSortDesc); @@ -228,11 +280,14 @@ function buildListHeaders(headerConfig) { return listHeaders; } -function buildListFooter() { +function buildListFooter(rows, rowsPerPage) { + const pages = Math.ceil(rows / rowsPerPage); const footerWrapper = document.createElement('div'); footerWrapper.classList.add('list-footer', 'footer-wrapper'); + console.log('calculated num of pages: ' + pages); + footerWrapper.dataset.pages = pages; const footerTotal = document.createElement('div'); - footerTotal.textContent = 'Page 1 of 2 -- 46 total results'; + footerTotal.textContent = `Page 1 of ${pages} -- ${rows} total results`; footerTotal.classList.add('footer-total'); // pagination const footerPagination = document.createElement('div'); @@ -240,14 +295,35 @@ function buildListFooter() { const footerPrev = document.createElement('div'); footerPrev.classList.add('footer-pagination-button', 'prev'); footerPrev.textContent = 'Prev'; - const footerPages = document.createElement('div'); - footerPages.classList.add('footer-pagination-pages'); - footerPages.textContent = '1'; + footerPrev.addEventListener('click', (event) => { + prevPage(event.target); + }) + const footerPageBtnsWrapper = document.createElement('div'); + footerPageBtnsWrapper.classList.add('footer-pages-wrapper'); + const footerPageBtn = document.createElement('div'); + footerPageBtn.classList.add('footer-pagination-pages', 'currentpage'); + footerPageBtn.id = "current-page"; + footerPageBtn.textContent = '1'; + footerPageBtn.dataset.pagenumber = 1; + footerPageBtnsWrapper.appendChild(footerPageBtn); const footerNext = document.createElement('div'); footerNext.classList.add('footer-pagination-button', 'next'); + if (pages > 1) { + footerNext.classList.add('active'); + for (let i = 2; i <= pages; i++) { + const footerPageBtns = document.createElement('div'); + footerPageBtns.classList.add('footer-pagination-pages'); + footerPageBtns.textContent = i; + footerPageBtns.dataset.pagenumber = i; + footerPageBtnsWrapper.appendChild(footerPageBtns); + } + } + footerNext.addEventListener('click', (event) => { + nextPage(event.target); + }) footerNext.textContent = 'Next'; footerPagination.appendChild(footerPrev); - footerPagination.appendChild(footerPages); + footerPagination.appendChild(footerPageBtnsWrapper); footerPagination.appendChild(footerNext); // end pagination @@ -260,6 +336,9 @@ function buildListFooter() { const footerPerPageDropdown = document.createElement('div'); footerPerPageDropdown.innerHTML = ` @@ -344,11 +321,14 @@ function buildListFooter(rows, rowsPerPage) { - - ` - footerPerPageDropdown.classList.add('footer-perPage-dropdown'); + `; + footerPerPageDropdown.addEventListener('change', (event) => { + repaginate(event.target); + }); + footerPerPageDropdownWrapper.appendChild(footerPerPageDropdown); + footerPerPageDropdownWrapper.classList.add('footer-perPage-dropdown'); footerPerPage.appendChild(footerPerPageLabel); - footerPerPage.appendChild(footerPerPageDropdown); + footerPerPage.appendChild(footerPerPageDropdownWrapper); // end per-page controls footerWrapper.appendChild(footerTotal); @@ -357,20 +337,71 @@ function buildListFooter(rows, rowsPerPage) { return footerWrapper; } -function paginate(listItems) { - +function buildPageSelector(pageCount, footerPageSelectorWrapper, footerNext) { + const footerPageBtn = document.createElement('div'); + footerPageBtn.classList.add('footer-pagination-pages', 'currentpage'); + footerPageBtn.id = "current-page"; + footerPageBtn.textContent = '1'; + footerPageBtn.dataset.pagenumber = 1; + footerPageBtn.addEventListener('click', (event) => { + changePage(event.target.dataset.pagenumber); + }) + footerPageSelectorWrapper.appendChild(footerPageBtn); + if (pageCount > 1) { + footerNext.classList.add('active'); + for (let i = 2; i <= pageCount; i++) { + const footerPageBtns = document.createElement('div'); + footerPageBtns.classList.add('footer-pagination-pages'); + footerPageBtns.textContent = i; + footerPageBtns.dataset.pagenumber = i; + footerPageBtns.addEventListener('click', (event) => { + changePage(event.target.dataset.pagenumber); + }) + footerPageSelectorWrapper.appendChild(footerPageBtns); + } + } else { + footerNext.classList.remove('active'); + } } -function nextPage(nextBtn) { - if (!(nextBtn.classList.contains('active'))) { - return; +function repaginate(dropdown) { + const numPerPage = dropdown.value; + const listItems = document.querySelectorAll('.campaign-row'); + if (listItems.length > 1 ) { + listItems.forEach((row, index) => { + row.classList.remove('hidden'); + if ((index + 1) > numPerPage) row.classList.add('hidden'); + }) } + const totalResults = parseInt(document.querySelector('.list-items').dataset.totalresults); + const pageCount = Math.ceil(totalResults / numPerPage); + document.querySelector('.list-footer.footer-wrapper').dataset.pages = pageCount; + + const pagesText = `Page 1 of ${pageCount} -- ${totalResults} total results`; + document.querySelector('.footer-total').textContent = pagesText; + + const footerPageSelectorWrapper = document.querySelector('.footer-pages-wrapper'); + footerPageSelectorWrapper.replaceChildren(); + + const footerNext = document.querySelector('.footer-pagination-button.next'); + const footerPrev = document.querySelector('.footer-pagination-button.prev'); + footerPrev.classList.remove('active'); + buildPageSelector(pageCount, footerPageSelectorWrapper, footerNext); +} + +function changePage(targetPage) { + // if targetPage = currentPage, do nothing + const nextBtn = document.querySelector('.footer-pagination-button.next'); const prevBtn = document.querySelector('.footer-pagination-button.prev'); const currentPageBtn = document.querySelector('#current-page'); - const currentPageValue = parseInt(currentPageBtn.dataset.pagenumber); - const targetPage = (currentPageValue + 1); - const nextSelector = "[data-pagenumber='" + (targetPage) + "']"; - const nextPageBtn = document.querySelector(nextSelector); + const currentPage = parseInt(currentPageBtn.dataset.pagenumber); + + if (currentPage == targetPage) { + return; + } + + const newPageSelector = "[data-pagenumber='" + (targetPage) + "']"; + const newPageBtn = document.querySelector(newPageSelector); const itemsPerPage = document.querySelector('#per-page').value; const listItems = document.querySelectorAll('.campaign-row'); @@ -378,21 +409,43 @@ function nextPage(nextBtn) { const upperBound = (targetPage * itemsPerPage); listItems.forEach((row, index) => { - //if ((index + 1) <= (currentPageValue * itemsPerPage) || (index + 1) > (targetPage * itemsPerPage)) { if ((index + 1) <= (lowerBound) || (index + 1) > (upperBound)) { row.classList.add('hidden'); } else { row.classList.remove('hidden'); } }) - //increment page counter - prevBtn.classList.add('active'); - const totalPages = parseInt(document.querySelector('.list-footer.footer-wrapper').dataset.pages); - if (totalPages == targetPage) nextBtn.classList.remove('active'); + const totalPages = document.querySelector('.list-footer.footer-wrapper').dataset.pages; + const totalResults = document.querySelector('.list-items').dataset.totalresults; + const pagesText = `Page ${targetPage} of ${totalPages} -- ${totalResults} total results`; + document.querySelector('.footer-total').textContent = pagesText; + if (totalPages == targetPage) { + nextBtn.classList.remove('active') + } else { + nextBtn.classList.add('active'); + } + if (targetPage == "1") { + prevBtn.classList.remove('active') + } else { + prevBtn.classList.add('active'); + } currentPageBtn.id = ''; currentPageBtn.classList.remove('currentpage'); - nextPageBtn.id = 'current-page'; - nextPageBtn.classList.add('currentpage'); + newPageBtn.id = 'current-page'; + newPageBtn.classList.add('currentpage'); + // update next and prev according to which page we're on +} + +function nextPage(nextBtn) { + if (!(nextBtn.classList.contains('active'))) { + return; + } + const prevBtn = document.querySelector('.footer-pagination-button.prev'); + const currentPageBtn = document.querySelector('#current-page'); + const currentPageValue = parseInt(currentPageBtn.dataset.pagenumber); + const targetPage = (currentPageValue + 1); + changePage(targetPage); + prevBtn.classList.add('active'); } function prevPage(prevBtn) { @@ -403,36 +456,11 @@ function prevPage(prevBtn) { const currentPageBtn = document.querySelector('#current-page'); const currentPageValue = parseInt(currentPageBtn.dataset.pagenumber); const targetPage = (currentPageValue - 1); - const prevSelector = "[data-pagenumber='" + (targetPage) + "']"; - const prevPageBtn = document.querySelector(prevSelector); - const itemsPerPage = document.querySelector('#per-page').value; - const listItems = document.querySelectorAll('.campaign-row'); - - const lowerBound = ((targetPage * itemsPerPage) - itemsPerPage); - //console.log('test lower bound: ' + lowerBound); - const upperBound = (targetPage * itemsPerPage); - //console.log('test upper bound: ' + upperBound); - - listItems.forEach((row, index) => { - //if ((index + 1) <= (currentPageValue * itemsPerPage) || (index + 1) > (targetPage * itemsPerPage)) { - if ((index + 1) < (lowerBound) || (index + 1) > (upperBound)) { - row.classList.add('hidden'); - } else { - row.classList.remove('hidden'); - } - }) + changePage(targetPage) nextBtn.classList.add('active'); - //const totalPages = parseInt(document.querySelector('.list-footer.footer-wrapper').dataset.pages); - if (targetPage == 1) prevBtn.classList.remove('active'); - currentPageBtn.id = ''; - currentPageBtn.classList.remove('currentpage'); - prevPageBtn.id = 'current-page'; - prevPageBtn.classList.add('currentpage'); } function sortColumn(dir, property) { - // need to handle dates - console.log('clicked sort: ' + dir + ', ' + property); const container = document.querySelector('.list-items'); if (!container) { console.error("Could not locate list container."); @@ -440,22 +468,15 @@ function sortColumn(dir, property) { } const selector = '[data-property="' + property + '"]'; - console.log(selector) const divs = document.querySelectorAll(selector); - console.log(divs.length); - //document.querySelectorAll('[data-property="description"]') const sortArray = []; - // Retrieve text content of each div and store it in an array divs.forEach(div => { const textContent = div.textContent.trim(); - //const row = div.parentElement; // need to make this more general const row = div.closest('.campaign-row'); - console.log(row); sortArray.push({ textContent, row }); }); - // Sort the divs based on their text content if (property == 'launch') { if (dir == 'asc') { sortArray.sort((a,b) => { @@ -478,7 +499,6 @@ function sortColumn(dir, property) { } } - // Update the container with the sorted divs sortArray.forEach(({ row }, index) => { container.appendChild(row); }); From 8fc4d654f0fb676a399d3c1959031b13a9b8bf88 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Fri, 5 Apr 2024 16:24:14 -0400 Subject: [PATCH 6/6] Updates to css/js to better align to mockup --- .../gmo-campaign-list/gmo-campaign-list.css | 24 +- blocks/gmo-campaign-list/gmo-campaign-list.js | 79 +- icons/AEM.svg | 2 +- icons/Acrobat.svg | 23 +- icons/Creative-Cloud.svg | 749 ++++++ icons/Express.svg | 2373 ++++++++++++++++- icons/Illustrator.svg | 6 +- icons/Lightroom.svg | 37 +- icons/Photoshop.svg | 38 +- 9 files changed, 3172 insertions(+), 159 deletions(-) create mode 100644 icons/Creative-Cloud.svg diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.css b/blocks/gmo-campaign-list/gmo-campaign-list.css index aa8f3af1..b36a1804 100644 --- a/blocks/gmo-campaign-list/gmo-campaign-list.css +++ b/blocks/gmo-campaign-list/gmo-campaign-list.css @@ -58,6 +58,7 @@ body { display: flex; font-size: 14px; margin-bottom: 20px; + height: 80px; } .campaign-info-wrapper { display: flex; @@ -67,6 +68,11 @@ body { width: 80px; height: 80px; margin-right: 14px; + background: #e2e2e2; + border-radius: 18px; +} +.campaign-name-wrapper { + width: 220px; } .campaign-name-label { font-weight: bold; @@ -74,9 +80,14 @@ body { .campaign-name { color: #959595; } -.campaign-description { +.campaign-description-wrapper { color: #505050; } +.campaign-description { + line-height:20px; + overflow: hidden; + text-overflow: ellipsis; +} .campaign-launch-date { color: black; font-weight: bold; @@ -177,11 +188,11 @@ select { border-radius: 4px; } .column-1 { - width: 21%; + width: 28%; margin-right: 1%; } .column-2 { - width: 26%; + width: 40%; margin-right: 1%; } .column-3 { @@ -189,7 +200,7 @@ select { margin-right: 1%; } .column-4 { - width: 13%; + width: 16%; margin-right: 1%; } .column-5 { @@ -217,4 +228,9 @@ select { .status.yellow { background-color: rgb(248, 243, 181); color: rgba(150, 138, 4, 0.945); +} +.vertical-center { + display: flex; + flex-direction: column; + justify-content: center; } \ No newline at end of file diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.js b/blocks/gmo-campaign-list/gmo-campaign-list.js index 4395706a..593cf745 100644 --- a/blocks/gmo-campaign-list/gmo-campaign-list.js +++ b/blocks/gmo-campaign-list/gmo-campaign-list.js @@ -1,5 +1,6 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; +import { graphqlAllCampaigns } from '../../scripts/graphql.js'; const icon = 'https://delivery-p108396-e1046543.adobeaemcloud.com/adobe/assets/deliver/urn:aaid:aem:acdaa42f-00ae-42f4-97e5-8309c42d9076/marketing-hub-102023-lockup-video.png' const testCampaigns = [ @@ -96,7 +97,7 @@ const testCampaigns = [ ] const testConfig = [ { - 'name': 'Campaign', + 'name': 'Marketing Moments', 'attribute': 'campaign', 'sortable': 'true' }, @@ -115,11 +116,6 @@ const testConfig = [ 'name': 'Products', 'attribute': 'products' }, - { - 'name': 'Language', - 'attribute': 'language', - 'type': 'string' - }, { 'name': 'Status', 'attribute': 'status', @@ -130,11 +126,15 @@ const testConfig = [ export default async function decorate(block) { //const config = readBlockConfig(block); // this will be for final implementation - const numPerPage = 2; // retrieve dynamically - const campaignCount = testCampaigns.length; + const campaignResponse = await graphqlAllCampaigns(); + const campaigns = campaignResponse.data.campaignList.items; + console.log(campaignResponse.data.campaignList.items); + //console.log(testCampaigns); + const numPerPage = 4; + const campaignCount = campaigns.length; const config = testConfig; const listHeaders = buildListHeaders(config); - const listItems = buildCampaignList(testCampaigns, numPerPage); + const listItems = buildCampaignList(campaigns, numPerPage); const listFooter = buildListFooter(campaignCount, numPerPage); block.innerHTML = ` @@ -160,41 +160,47 @@ function buildCampaignList(campaigns, numPerPage) { campaignInfoWrapper.classList.add('campaign-info-wrapper','column-1'); const campaignIcon = document.createElement('div'); campaignIcon.classList.add('campaign-icon'); - campaignIcon.innerHTML = ``; + //campaignIcon.innerHTML = ``; const campaignName = document.createElement('div'); - campaignName.classList.add('campaign-name-wrapper'); + campaignName.classList.add('campaign-name-wrapper', 'vertical-center'); campaignName.innerHTML = ` -
Campaign Name
-
${campaign.name}
+
${checkBlankString(campaign.campaignName)}
+
${checkBlankString(campaign.programName)}
` campaignInfoWrapper.appendChild(campaignIcon); campaignInfoWrapper.appendChild(campaignName); + const campaignOverviewWrapper = document.createElement('div'); + campaignOverviewWrapper.classList.add('column-2', 'campaign-description-wrapper','vertical-center'); const campaignOverview = document.createElement('div'); - campaignOverview.textContent = campaign.description; - campaignOverview.classList.add('column-2', 'campaign-description'); + campaignOverview.textContent = checkBlankString(campaign.marketingGoal.plaintext); + campaignOverview.classList.add('campaign-description'); campaignOverview.dataset.property = 'description'; + campaignOverviewWrapper.appendChild(campaignOverview); const campaignLaunch = document.createElement('div'); - campaignLaunch.textContent = campaign.launch; - campaignLaunch.classList.add('column-3', 'campaign-launch-date'); + campaignLaunch.textContent = checkBlankString(campaign.launchDate); + campaignLaunch.classList.add('column-3', 'campaign-launch-date', 'vertical-center'); campaignLaunch.dataset.property = 'launch'; - const campaignProducts = buildProductsList(campaign.products); - campaignProducts.classList.add('column-4'); + const campaignProducts = buildProductsList(checkBlankString(campaign.productOffering)); + campaignProducts.classList.add('column-4', 'vertical-center'); + /* const campaignLanguage = document.createElement('div'); campaignLanguage.textContent = campaign.languages; campaignLanguage.classList.add('column-5'); + */ const campaignStatusWrapper = document.createElement('div'); - campaignStatusWrapper.classList.add('status-wrapper', 'column-6'); + campaignStatusWrapper.classList.add('status-wrapper', 'column-6','vertical-center'); const campaignStatus = document.createElement('div'); - campaignStatus.textContent = campaign.status; - campaignStatus.classList.add(determineStatusColor(campaign.status)); + const statusString = checkBlankString(campaign.status); + campaignStatus.textContent = statusString; + campaignStatus.classList.add(determineStatusColor(statusString)); campaignStatus.classList.add('status'); campaignStatus.dataset.property = 'status'; campaignStatusWrapper.appendChild(campaignStatus); campaignRow.appendChild(campaignInfoWrapper); - campaignRow.appendChild(campaignOverview); + campaignRow.appendChild(campaignOverviewWrapper); campaignRow.appendChild(campaignLaunch); campaignRow.appendChild(campaignProducts); - campaignRow.appendChild(campaignLanguage); + //campaignRow.appendChild(campaignLanguage); campaignRow.appendChild(campaignStatusWrapper); listWrapper.appendChild(campaignRow); @@ -204,24 +210,29 @@ function buildCampaignList(campaigns, numPerPage) { function buildProductsList(productList) { const campaignProducts = document.createElement('div'); - if (productList.length > 1) { + //structure of the data for this is different than expected. + //may need to break strings up on some delimiter + /*if (productList.length > 1) { productList.forEach((product) => { const productEl = buildProduct(product); campaignProducts.appendChild(productEl); }) - } else { + } else {*/ const productEl = buildProduct(productList); campaignProducts.appendChild(productEl); - } + //} return campaignProducts; } function buildProduct(product) { const productEl = document.createElement('div'); + let productIcon = product; + if (product == null) product = 'None'; + if (product == 'Not Available') productIcon = "gear"; productEl.classList.add('product-entry'); productEl.innerHTML = ` - + ${product} ` return productEl; @@ -313,7 +324,6 @@ function buildListFooter(rows, rowsPerPage) { const footerPerPageDropdown = document.createElement('select'); footerPerPageDropdown.id = 'per-page'; footerPerPageDropdown.innerHTML = ` - @@ -506,7 +516,7 @@ function sortColumn(dir, property) { function determineStatusColor(status) { switch(status) { - case 'On Track': + case 'Current': return 'green'; case 'Delayed': return 'yellow'; @@ -515,4 +525,13 @@ function determineStatusColor(status) { default: return 'red'; } +} + +// supply dummy data if none present +function checkBlankString(string) { + if (string == undefined || string == '' ) { + return 'Not Available'; + } else { + return string; + } } \ No newline at end of file diff --git a/icons/AEM.svg b/icons/AEM.svg index a608289e..8f15e819 100644 --- a/icons/AEM.svg +++ b/icons/AEM.svg @@ -1 +1 @@ - \ No newline at end of file +experience_platform_appicon_RGB_Artboard 1 \ No newline at end of file diff --git a/icons/Acrobat.svg b/icons/Acrobat.svg index 84cfe515..2d8d6ad2 100644 --- a/icons/Acrobat.svg +++ b/icons/Acrobat.svg @@ -1,4 +1,21 @@ - - - + + + + + + + + diff --git a/icons/Creative-Cloud.svg b/icons/Creative-Cloud.svg new file mode 100644 index 00000000..fcdaf3d7 --- /dev/null +++ b/icons/Creative-Cloud.svg @@ -0,0 +1,749 @@ + + + + + + + diff --git a/icons/Express.svg b/icons/Express.svg index dc736003..92f46e2d 100644 --- a/icons/Express.svg +++ b/icons/Express.svg @@ -1,43 +1,2330 @@ - - \ No newline at end of file + + + + + + + + + + +]> + diff --git a/icons/Illustrator.svg b/icons/Illustrator.svg index 6dd41a7c..a0bd25fd 100644 --- a/icons/Illustrator.svg +++ b/icons/Illustrator.svg @@ -1,5 +1 @@ - - - - - \ No newline at end of file +Asset 104 \ No newline at end of file diff --git a/icons/Lightroom.svg b/icons/Lightroom.svg index cc1fe74e..dd09ecc2 100644 --- a/icons/Lightroom.svg +++ b/icons/Lightroom.svg @@ -1,36 +1 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - - +Asset 126 \ No newline at end of file diff --git a/icons/Photoshop.svg b/icons/Photoshop.svg index b8a06aea..0d070fbc 100644 --- a/icons/Photoshop.svg +++ b/icons/Photoshop.svg @@ -1,37 +1 @@ - - - - - - - - - - - - - - - - - - - - +Asset 116 \ No newline at end of file