From 423a3788a8ff5c004d90cb099cedcd620b95d3f4 Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Fri, 3 May 2024 12:21:51 -0700 Subject: [PATCH 01/95] Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard --- scripts/metadata.js | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/metadata.js b/scripts/metadata.js index f9368c5a..ccc53b8b 100644 --- a/scripts/metadata.js +++ b/scripts/metadata.js @@ -12,6 +12,7 @@ import { fetchCached } from './fetch-util.js'; import { getBaseConfigPath, getMetadataConfigs } from './site-config.js'; const SEARCH_FIELD_TO_POLARIS_API_MAP = { + uuid: 'assetId', 'dc-format': 'repositoryMetadata.dc:format', 'repo-name': 'repositoryMetadata.repo:name', 'repo-createDate': 'repositoryMetadata.repo:createDate', From f7c918ac04d3e860ee150d735d5e482b4c864ad0 Mon Sep 17 00:00:00 2001 From: Christopher Heintzman Date: Wed, 8 May 2024 17:03:05 -0400 Subject: [PATCH 02/95] Removed Prefix from Displayed UUID Value on Assets (#76) --- scripts/metadata-html-builder.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/scripts/metadata-html-builder.js b/scripts/metadata-html-builder.js index 8ae18086..92da6528 100644 --- a/scripts/metadata-html-builder.js +++ b/scripts/metadata-html-builder.js @@ -139,6 +139,12 @@ export async function fetchMetadataAndCreateHTML(metadataViewConfig, assetData, if (assetData === undefined || assetJSON === undefined) { assetJSON = await getAssetMetadata(getAssetIdFromURL()); } + // Remove "urn:aaid:aem:" prefix from displayed 'assetId' value + if (assetJSON.assetId) { + // A deep copy of the assetJSON object is created to avoid modifying the original object + assetJSON = JSON.parse(JSON.stringify(assetJSON)); + assetJSON.assetId = assetJSON.assetId.replace('urn:aaid:aem:', ''); + } const metadataContainer = document.createElement('div'); metadataContainer.classList.add('metadata-container'); From 61f761195d0d96550ce39419ab25c6a20cdea7ce Mon Sep 17 00:00:00 2001 From: Christopher Heintzman Date: Thu, 9 May 2024 14:34:50 -0400 Subject: [PATCH 03/95] Modified formatAssetMetadata() to allow custom dc-format Labels (#79) --- scripts/metadata.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/scripts/metadata.js b/scripts/metadata.js index ccc53b8b..dd0d036a 100644 --- a/scripts/metadata.js +++ b/scripts/metadata.js @@ -387,11 +387,6 @@ export function formatAssetMetadata(propertyName, metadataValue) { return DATA_TYPES.tags(metadataValue, propertyName); } - // file types - if (['dc-format'].includes(propertyName)) { - return PREDEFINED_METADATA_FIELDS.format.format(metadataValue); - } - // dates if (isDate(propertyName, metadataValue)) { return formatDate(metadataValue); From 777b5cbed5b653adff26b38ef0ea1ed1c991c572 Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Fri, 17 May 2024 10:38:22 -0700 Subject: [PATCH 04/95] Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard --- contenthub/hydration/hydration-utils.js | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/contenthub/hydration/hydration-utils.js b/contenthub/hydration/hydration-utils.js index 61471d8c..d2c3912f 100644 --- a/contenthub/hydration/hydration-utils.js +++ b/contenthub/hydration/hydration-utils.js @@ -29,10 +29,6 @@ export function formIsComplete(metadataSchema, formValues) { if(incomplete) return false; - if(formValues['gmo:campaignName']){ - if(!formValues['gmo:programName']) return false; - } - if(formValues['gmo:licensedContent'] !== 'no'){ if(!formValues['gmo:usageTerms']) return false; if(formValues['gmo:licensedContent'] === 'yes-expires' && !formValues['gmo:licenseExpiryDate']) return false; @@ -116,7 +112,8 @@ export function getMetadataSchema(facetOptions){ label: 'Product', placeholder: 'Select one or more', required: true, - element: 'tags', + element: 'dropdown', + multipleSelection: true, dropdownOptions: [ { name: 'N/A', id: 'na' }, { name: 'Acrobat Export PDF', id: 'acrobat-export-pdf' }, @@ -217,13 +214,7 @@ export function getMetadataSchema(facetOptions){ return value.toLowerCase().split(' ').every((val) => name.includes(val)); } ) - }, - required: true, - requires: [{ - property: 'gmo:campaignName', - expectedValue: '', - operator: '!==' - }] + } }, { mapToProperty: 'gmo:deliverableType', @@ -360,7 +351,8 @@ export function getMetadataSchema(facetOptions){ mapToProperty: 'gmo:ddomStage', label: 'DDOM Stage', placeholder: 'Select one or more', - element: 'tags', + element: 'dropdown', + multipleSelection: true, dropdownOptions: [ { id: 'discover', @@ -388,7 +380,8 @@ export function getMetadataSchema(facetOptions){ mapToProperty: 'gmo:p0TargetMarketGeo', label: 'Target Market', placeholder: 'Select one or more', - element: 'tags', + element: 'dropdown', + multipleSelection: true, dropdownOptions: [ { id: 'apac', From e1748ca349d43d2b1919cbf83153f3f63b203428 Mon Sep 17 00:00:00 2001 From: Christopher Heintzman Date: Thu, 23 May 2024 13:23:25 -0400 Subject: [PATCH 05/95] Added getBaseConfigPath to Collections Back Button (#89) --- blocks/adp-collection-header/adp-collection-header.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blocks/adp-collection-header/adp-collection-header.js b/blocks/adp-collection-header/adp-collection-header.js index 7bea4d74..0d496732 100644 --- a/blocks/adp-collection-header/adp-collection-header.js +++ b/blocks/adp-collection-header/adp-collection-header.js @@ -2,6 +2,7 @@ import { getCollection, getCollectionIdFromURL, deleteCollection } from '../../s import createConfirmDialog from '../../scripts/confirm-dialog.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import { createLinkHref, navigateTo } from '../../scripts/shared.js'; +import { getBaseConfigPath } from '../../scripts/site-config.js'; import { selectAllAssets, deselectAllAssets, @@ -13,7 +14,7 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) { collectionInfoHeader.innerHTML = `
- +
From 9c80f01ab1f85c7be83d0ee9b199c2657a4bec9e Mon Sep 17 00:00:00 2001 From: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Date: Mon, 3 Jun 2024 14:43:13 -0400 Subject: [PATCH 06/95] Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta --- blocks/adp-header/adp-header.js | 32 +- .../gmo-program-details.css | 487 +++++++++++++++ .../gmo-program-details.js | 557 ++++++++++++++++++ .../gmo-program-header/gmo-program-header.css | 199 +++++++ .../gmo-program-header/gmo-program-header.js | 376 ++++++++++++ blocks/gmo-program-list/gmo-program-list.css | 277 +++++++++ blocks/gmo-program-list/gmo-program-list.js | 481 +++++++++++++++ icons/collapse.svg | 6 + icons/trophy.svg | 7 + scripts/assets.js | 108 ++++ scripts/graphql.js | 248 ++++++++ scripts/scripts.js | 2 +- scripts/security.js | 33 +- scripts/shared-program.js | 55 ++ scripts/site-config.js | 31 +- 15 files changed, 2873 insertions(+), 26 deletions(-) create mode 100644 blocks/gmo-program-details/gmo-program-details.css create mode 100644 blocks/gmo-program-details/gmo-program-details.js create mode 100644 blocks/gmo-program-header/gmo-program-header.css create mode 100644 blocks/gmo-program-header/gmo-program-header.js create mode 100644 blocks/gmo-program-list/gmo-program-list.css create mode 100644 blocks/gmo-program-list/gmo-program-list.js create mode 100644 icons/collapse.svg create mode 100644 icons/trophy.svg create mode 100644 scripts/assets.js create mode 100644 scripts/graphql.js create mode 100644 scripts/shared-program.js diff --git a/blocks/adp-header/adp-header.js b/blocks/adp-header/adp-header.js index e25e6719..b3eafe7c 100644 --- a/blocks/adp-header/adp-header.js +++ b/blocks/adp-header/adp-header.js @@ -325,22 +325,24 @@ async function initQuickLinks() { const quickLinks = document.querySelector('.adp-header .nav-bottom .quick-links'); // decorate quick links quickLinksConfig.forEach((item) => { - const itemEl = document.createElement('div'); - itemEl.className = 'item'; - const itemLinkEl = document.createElement('a'); - if (item.page.startsWith('/') && isUrlPathNonRoot()) { - itemLinkEl.href = createLinkHref(getBaseConfigPath() + item.page); - } else { - itemLinkEl.href = createLinkHref(item.page); - } - itemLinkEl.dataset.page = item.page; - if (item.page.startsWith('http')) { - itemLinkEl.target = '_blank'; - itemLinkEl.rel = 'noopener'; + if (item.hide!=='true'){ + const itemEl = document.createElement('div'); + itemEl.className = 'item'; + const itemLinkEl = document.createElement('a'); + if (item.page.startsWith('/') && isUrlPathNonRoot()) { + itemLinkEl.href = createLinkHref(getBaseConfigPath() + item.page); + } else { + itemLinkEl.href = createLinkHref(item.page); + } + itemLinkEl.dataset.page = item.page; + if (item.page.startsWith('http')) { + itemLinkEl.target = '_blank'; + itemLinkEl.rel = 'noopener'; + } + itemLinkEl.textContent = item.title; + itemEl.append(itemLinkEl); + quickLinks.append(itemEl); } - itemLinkEl.textContent = item.title; - itemEl.append(itemLinkEl); - quickLinks.append(itemEl); }); if (await checkAddAssetsAccess()) { diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css new file mode 100644 index 00000000..c653aafd --- /dev/null +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -0,0 +1,487 @@ +body { + background-color: rgb(247, 246, 246); +} +.back-button { + margin-top: 20px; + background-color: #FFFFFF; + width: 65px; + height: 32px; + display: flex; + padding-left: 10px; + padding-right: 10px; + align-items: center; + border: 1px solid #D3D3D3; + border-radius: 4px; + cursor: pointer; + & > .icon { + width: 20px; + height: 30px; + } + & > .back-label { + margin-left: 15px; + font: normal normal normal 14px/17px Adobe Clean; + font-weight: bold; + } +} +.gmo-program-details.block { + & .h1 { + font: normal normal bold 18px/27px Adobe Clean; + } + & .h2 { + font: normal normal bold 16px/20px Adobe Clean; + } + & .h3 { + font: normal normal bold 14px/21px Adobe Clean; + } + & .subtitle { + font: normal normal normal 14px/21px Adobe Clean; + } + & > .main-body-wrapper { + display: flex; + flex-direction: column; + background: #FFFFFF; + border-radius: 6px; + box-shadow: 0px 3px 6px #0000000D; + margin-top: 20px; + min-height: 800px; + padding: 20px; + } +} + +.details-header-wrapper { + display: flex; + & > .header-title { + margin-left: 20px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + & .icon-calendar { + width: 17px; + } + } + & > .campaign-img { + background-color: #e1e1e1; + } + & .header-row1 { + display: flex; + align-items: center; + flex-wrap: wrap; + text-align: center; + line-height: 22px; + } + & .header-row2 { + display: flex; + align-items: center; + } + & .header-row3 { + display: flex; + align-items: center; + } + & .campaign-status { + border-radius: 4px; + color: black; + filter: saturate(0.5); + font: normal normal normal 12px/15px Adobe Clean; + height: 24px; + line-height: 24px; + width: 72px; + margin-left: 10px; + text-align: center; + } + & .campaign-date { + font: normal normal normal 14px/21px Adobe Clean; + margin-left: 10px; + } +} + +.campaign-img { + width: 80px; + height: 80px; + margin-right: 14px; + background: #e2e2e2; + border-radius: 18px; +} + +.campaign-img img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 18px; +} + +.tab-wrapper { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-content: center; + width: 160px; + height: 50px; + font: normal normal normal 14px/17px Adobe Clean; + border-bottom: 2px solid #EAEAEA; + & > .tabBtn { + color: #747474; + height: 100%; + line-height: 50px; + &.active { + color: #323232; + border-bottom: 2px solid #323232; + } + } +} +.tab.two-column { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.overview-wrapper { + display: flex; + flex-direction: column; + width: 800px; + & .overview-heading { + margin-top: 20px; + margin-bottom: 20px; + } + & .product-overview-wrapper { + margin-bottom: 20px; + } + & .description, .overview { + margin-top: 10px; + font: normal normal normal 14px/21px Adobe Clean; + letter-spacing: 0px; + color: black; + &.hide-overflow { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + } + } + & .button.no-bg { + font: normal normal normal 14px/17px Adobe Clean; + margin-top: 10px; + color: #505050; + cursor: pointer; + } +} +.kpis-wrapper { + margin-top: 30px; + & ul { + columns: 2; + -webkit-columns: 2; + -moz-columns: 2; + font: normal normal normal 14px/21px Adobe Clean; + } + & div { + font-size: 14px; + margin-top: 15px; + } +} +.use-cases-wrapper { + margin-bottom: 30px; +} + +.use-cases-wrapper, .channel-scope-wrapper { + display: flex; + flex-direction: column; + margin-top: 30px; + + & .tags-wrapper { + display: flex; + flex-wrap: wrap; /* Ensure tags wrap properly */ + margin-top: 10px; + } + + & .use-case-tag, .scope-tag { + font: normal normal normal 14px/17px Adobe Clean; + color: #505050; + border: 1px solid #D3D3D3; + border-radius: 4px; + padding: 0 10px; /* Ensure no padding at the bottom */ + line-height: 32px; + height: 32px; /* Ensure consistent height */ + display: flex; + align-items: center; /* Vertically center the text */ + margin-bottom: 5px; /* Add margin at the bottom */ + &:not(:last-child) { + margin-right: 5px; + } + } +} + +.main-message-wrapper { + display: flex; + flex-direction: column; + margin-top: 20px; +} +.links-wrapper { + margin-top: 30px; + & .links { + display: flex; + justify-content: space-between; + margin-top: 10px; + } + & .campaign-link { + font: normal normal normal 14px/21px Adobe Clean; + letter-spacing: 0px; + color: #0D66D0; + } +} +.infocards-wrapper { + margin-right: 40px; + & .card { + width: 360px; + border: 1px solid #D3D3D3; + border-radius: 4px; + background-color: #FFFFFF; + padding: 0px 15px 10px 15px; + &:not(:last-child) { + margin-bottom: 30px; + } + } +} +.card { + & .card-heading { + margin-top: 10px; + margin-bottom: 10px; + } + &.scope { + font: normal normal normal 14px/21px Adobe Clean; + & > ul { + padding-left: 15px; + } + } + &.audiences > div { + font-size: 14px; + } +} +.milestone, .card-content { + font: normal normal normal 14px/21px Adobe Clean; + & .icon { + height: 18px; + margin-right: 5px; + } + display: flex; + align-items: center; + &:not(:last-child) { + margin-bottom: 5px; + } +} +.deliverables { + & > .page-heading { + display: flex; + margin-top: 20px; + margin-bottom: 25px; + & > .total-assets { + display: flex; + flex-direction: column; + justify-content: space-between; + & > span { + font: normal normal normal 14px/21px Adobe Clean; + } + } + } + .links-wrapper { + display: flex; + flex-direction: column; + max-width: 90%; + margin-right: 100px; + margin-top: unset; + & .links { + display: flex; + justify-content: space-between; + margin-top: 10px; + } + & .campaign-link { + font: normal normal normal 14px/21px Adobe Clean; + letter-spacing: 0px; + color: #0D66D0; + &:not(:last-child) { + margin-right: 30px; + } + } + } +} +.table-wrapper { + font: normal normal bold 14px/21px Adobe Clean; + & > .table-header { + background: #f7f6f6 0% 0% no-repeat padding-box; + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + height: 64px; + color: #505050; + display: flex; + align-items: center; + position: sticky; + position: -webkit-sticky; + top: 0; + } +} +.table-content { + height: 45vh; + overflow-y: auto; + &::-webkit-scrollbar { + display: none; + } +} +.inactive { + display: none !important; + visibility: hidden; +} +.row { + height: 56px; + &:not(:last-child) { + border-bottom: 2px solid #F4F4F4; + } + &.datarow { + display: flex; + align-items: center; + height: 88px; + font-weight: 200; + & .property { + line-height: 88px; + } + &:first-child, &:nth-child(2) { + border-top: 2px solid #F4F4F4; + } + & .deliverable-name, .platforms, .deliverable-type, .review-link, .kpi { + overflow: hidden; + text-overflow: ellipsis; + line-height: 16px; + } + & .date-wrapper { + display: flex; + flex-direction: column; + justify-content:center; + & > .completion-date, .revised-date { + line-height: 21px; + } + & > .revised-date { + color: #959595; + font: italic normal normal 11px/21px Adobe Clean; + } + } + } + &.collapsible.header { + height: unset; + display: flex; + flex-direction: column; + line-height: 56px; + & > .heading-wrapper { + display: flex; + margin-left: 15px; + align-items: center; + &.subheading { + margin-left: 25px; + } + & > .icon-next, & > .icon-collapse { + height: 10px; + width: 10px; + } + & > .headertext { + margin-left: 10px; + } + } + } + + & .property { + line-height: 56px; + } + & .justify-center { + display: flex; + flex-direction: column; + justify-content: center; + } +} +.subheader { + &:nth-child(2) { + border-top: 2px solid #F4F4F4; + } + & > .row:nth-child(2) { + border-top: 2px solid #F4F4F4; + } +} + +.status-wrapper { + height: 56px; + display: flex; + flex-direction: column; + justify-content: center; + & > .status-heading { + display: flex; + justify-content: space-between; + height: 12px; + font: normal normal normal 12px/15px Adobe Clean; + + } + & > .status-bar-wrapper { + position: relative; + & > .status-bar-underlay { + background-color: #D3D3D3; + width: 100%; + margin-top: 15px; + height: 6px; + margin-bottom: 5px; + left: 0; + top: 0; + position: absolute; + border-radius: 3px; + } + & > .status-bar { + margin-top: 15px; + height: 6px; + background-color: #2680EB; + margin-bottom: 5px; + z-index: 1; + position: relative; + border-radius: 3px; + } + } + +} +.header-row3:hover .date-tooltip { + visibility: visible; + opacity: 1; +} +.date-tooltip { + background-color: #D3D3D3; + border-radius: 2px; + visibility: hidden; + z-index: 1; + position: absolute; + text-align: center; + width: 100px; + padding: 2px 0; + font: normal normal normal 12px/17px Adobe Clean; + margin-left: 100px; +} +.column1 { + margin-left: 45px; +} +.column1 { + width: 200px; +} +.column3 { + width: 140px; +} +.column4, & .column5, & .column6 { + width: 110px; +} +.column2 { + width: 130px; +} +.column7 { + width: 170px; +} +.column8 { + width: 120px; +} +.column9 { + width: 150px; +} +.table-column { + &:not(:last-child) { + margin-right: 85px; + } +} diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js new file mode 100644 index 00000000..5347cb4a --- /dev/null +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -0,0 +1,557 @@ +import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; +import { getQueryVariable } from '../../scripts/shared.js'; +import { executeQuery } from '../../scripts/graphql.js'; +import { resolveMappings, filterArray, getProductMapping, checkBlankString } from '../../scripts/shared-program.js'; +import { getBaseConfigPath } from '../../scripts/site-config.js'; +import { searchAsset } from '../../scripts/assets.js'; + +let blockConfig; +const programName = getQueryVariable('programName'); +const programRefNumber = getQueryVariable('programReferenceNumber'); +const deliverableMappings = resolveMappings("getDeliverableTypeMapping"); +const platformMappings = resolveMappings("getPlatformsMapping"); + +export default async function decorate(block) { + + const encodedSemi = encodeURIComponent(';'); + const encodedProgram = encodeURIComponent(programName); + const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programReferenceNumber=${encodeURIComponent(programRefNumber)}`; + const programData = await executeQuery(programQueryString); + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}`; + const deliverables = await executeQuery(deliverableQueryString); + + const p0TargetMarketArea = programData.data.programList.items[0].p0TargetMarketArea; + const p1TargetMarketArea = programData.data.programList.items[0].p1TargetMarketArea; + + // Extract unique deliverable types + const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); + // Extract unique platforms (flattened from arrays within each item) + const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); + + const program = programData.data.programList.items[0]; + const kpis = buildKPIList(program).outerHTML; + + const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; + + const audiences = buildAudienceList(program).outerHTML; + const date = formatDate(program.launchDate); + const artifactLinks = buildArtifactLinks(program).outerHTML; + blockConfig = readBlockConfig(block); + block.innerHTML = ` +
+ + Back +
+
+
+
+
+
+
+ ${program.programName} +
+ ${program.campaignName ? '
' + program.campaignName + '
': ""} +
+ + Launch date + ${date} +
+
+
+
+
Overview
+
Deliverables
+
Calendar
+
+
+
+ At a Glance +
+ Marketing Goal +
${checkBlankString(program.marketingGoal.plaintext)}
+
Read more
+
+
+ Product Value +
${checkBlankString(program.productValue.plaintext)}
+
Read more
+
+
+ KPIs to Measure Success + ${kpis} +
+
+ Target Market Area + ${targetMarketAreas} +
+
+ Hero Use Cases +
+
Text to Image
+
Use Case 2
+
+
+
+ Main Message + + A major genAI release of the Photoshop beta app that delivers new and enhanced generative AI capabilities. + +
+ +
+ Deliverable Type +
+
+
+ +
+ Platforms +
+
+
+ ${artifactLinks} +
+
+
+
Products
+
+
+
Audiences
+ ${audiences} +
+
+
+
+
+ ${artifactLinks} +
+
Total Assets
+ +
+
+
+
+
Deliverable Name
+
Deliverable Type
+
Platforms
+
Review Link
+
Final Asset
+
Status Update
+
Completion Date
+
Project Owner
+
+
+
+
+
+
+ `; + buildProductCard(program); + try { + const imageObject = await searchAsset(program.programName, program.campaignName); + if (imageObject){ + insertImageIntoCampaignImg(block,imageObject); + document.getElementById('totalassets').textContent = imageObject.assetCount; + } + else + { + document.getElementById('totalassets').textContent = 0; + } + } catch (error) { + console.error("Failed to load campaign image:", error); + } + + block.querySelector('.tab-wrapper').addEventListener('click', (event) => { + switchTab(event.target); + }) + block.querySelector('.back-button').addEventListener('click', () => { + const host = location.origin + getBaseConfigPath(); + const listPage = blockConfig.listpage; + document.location.href = host + `/${listPage}`; + }) + block.querySelectorAll('.read-more').forEach((button) => { + button.addEventListener('click', (event) => { + const readMore = event.target; + const parent = readMore.parentElement; + parent.querySelector('.paragraph').classList.toggle('hide-overflow'); + }); + }); + decorateIcons(block); + buildFieldScopes('deliverable-type',uniqueDeliverableTypes, block); + buildFieldScopes('platforms',uniquePlatforms, block); + const table = await buildTable(await deliverables).then(async (rows) => { + return rows; + }) + const tableRoot = block.querySelector('.table-content'); + tableRoot.appendChild(table); + buildStatus(program.status); +} + +/** + * Extracts unique values from a specified property within an array of objects. + * + * @param {Array} items - The array of objects to extract values from. + * @param {string} property - The property name to extract values from each object. + * @returns {Array} - An array of unique values extracted from the specified property. + * + * This function flattens arrays of values if the property contains arrays within each object, + * filters out null and undefined values, and returns a unique set of these values. + */ +function getUniqueItems(items, property) { + return [...new Set(items.flatMap(item => item[property]) + .filter(value => value !== null && value !== undefined) + )]; +} + +function insertImageIntoCampaignImg(block,imageObject) { + const campaignImgDiv = block.querySelector('.campaign-img'); + const imgElement = document.createElement('img'); + imgElement.src = imageObject.imageUrl; + imgElement.alt = imageObject.imageAltText; + campaignImgDiv.appendChild(imgElement); +} + +function switchTab(tab) { + if (tab.classList.contains('active') || tab.classList.contains('tab-wrapper')) { + return; + } + document.querySelector('.tabBtn.active').classList.toggle('active'); + document.querySelector(`.tab:not(.inactive)`).classList.toggle('inactive'); + const targetTab = tab.dataset.target; + const tabElement = document.getElementById(targetTab); + tabElement.classList.toggle('inactive'); + tab.classList.toggle('active'); +} + + +async function buildFieldScopes(scopeTypeId, scopes, block) { + if (scopes.length == 0) { + block.querySelector(`#${scopeTypeId}.channel-scope-wrapper`).classList.add('inactive'); + return; + } + const scopesParent = block.querySelector(`#${scopeTypeId}.channel-scope-wrapper .tags-wrapper`); + scopes.forEach(async (scope) => { + if (scope == null || scope == undefined || scope == '') return; + const tag = document.createElement('div'); + tag.classList.add('scope-tag'); + tag.textContent = await lookupType(scope, scopeTypeId); + scopesParent.appendChild(tag); + }); +} + +function buildKPIList(program) { + let kpiList = document.createElement('ul'); + program.primaryKpi?.forEach((kpi) => { + const kpiLi = createLI(kpi); + kpiList.appendChild(kpiLi); + }) + program.additionalKpi?.forEach((kpi) => { + const kpiLi = createLI(kpi); + kpiList.appendChild(kpiLi); + }) + if (kpiList.children.length == 0) { + kpiList.remove(); + kpiList = document.createElement('div'); + kpiList.textContent = "Not Available"; + } + return kpiList; +} + +function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { + let ulList = document.createElement('ul'); + p0TargetMarketArea?.forEach((item) => { + const itemLi = createLI(item); + ulList.appendChild(itemLi); + }); + + p1TargetMarketArea?.forEach((item) => { + const itemLi = createLI(item); + ulList.appendChild(itemLi); + }) + if (ulList.children.length == 0) { + ulList.remove(); + ulList = document.createElement('div'); + ulList.textContent = "Not Available"; + } + return ulList; +} + +function createLI(li) { + const liItem = document.createElement('li'); + const liText = parseString(li); + liItem.textContent = liText; + return liItem; +} + +async function buildProductCard(program) { + const productMapping = await getProductMapping(program.productOffering); + const productList = document.createElement('div'); + productList.classList.add('product', 'card-content'); + productList.innerHTML = ` + + ${checkBlankString(productMapping.label)} + ` + document.querySelector('.card.products').appendChild(productList); +} + +function buildAudienceList(program) { + const audienceList = document.createElement('div'); + program.primaryAudience?.forEach((audience) => { + const audienceDiv = createAudience(audience); + audienceList.appendChild(audienceDiv); + }) + program.additionalAudiences?.forEach((audience) => { + const audienceDiv = createAudience(audience); + audienceList.appendChild(audienceDiv); + }) + if (audienceList.children.length == 0) audienceList.textContent = "Not Available"; + return audienceList; +} + +function buildArtifactLinks(program) { + const artifactLinks = document.createElement('div'); + artifactLinks.classList.add('links-wrapper'); + artifactLinks.innerHTML = ` + Links to Important Artifacts +
+ ${program.creativeArchitectureLink ? 'Creative Architecture ': ""} + ${program.e2eJourney ? 'E2E Journeys ': ""} + ${program.gtmSLink ? 'GTM-S ': ""} + ${program.gtmPLink ? 'GTM-P ': ""} + ${program.marketingBrief ? 'Marketing Brief ': ""} + ${program.marketingDoc ? 'Marketing Doc ': ""} + ${program.pager ? '2-Pager ': ""} + ${program.adr ? 'ADR ': ""} +
+ `; + // see how many 'links' were made. if none, hide the section + const numLinks = artifactLinks.querySelectorAll('.campaign-link')?.length; + if (numLinks == 0) artifactLinks.classList.add('inactive'); + return artifactLinks; +} + +async function buildStatus(status) { + const statusDiv = document.createElement('div'); + statusDiv.classList.add('campaign-status'); + const statusArray = await resolveMappings("getStatusList"); + const statusMatch = filterArray(statusArray, 'value', status); + const statusText = statusMatch ? statusMatch[0].text : status; + const statusHex = statusMatch[0]["color-code"]; + statusDiv.textContent = statusText; + statusDiv.style.backgroundColor = "#" + statusHex; + document.querySelector('.header-row1').appendChild(statusDiv); +} + +function createAudience(audience) { + const text = parseString(audience); + const audienceDiv = document.createElement('div'); + audienceDiv.classList.add('audience', 'card-content'); + audienceDiv.innerHTML = ` + + ${text} + `; + return audienceDiv; +} + +function parseString(text) { + let parsed = text.replace(/-/g, ' ').split(' '); + parsed[0] = parsed[0].charAt(0).toUpperCase() + parsed[0].slice(1); + parsed = parsed.join(' '); + return parsed; +} + +function formatDate(dateString) { + const parts = dateString.split('-'); + const yyyy = parts[0]; + const mm = parts[1]; + const dd = parts[2]; + + // Formatting the date into mm/dd/yyyy format + const formattedDate = mm + '/' + dd + '/' + yyyy; + + return formattedDate; +} + +async function buildTable(jsonResponse) { + const deliverableList = jsonResponse.data.deliverableList.items; + const programKpi = jsonResponse.data.programList?.items.primaryKpi; + const rows = document.createElement('div'); + const uniqueCategories = getUniqueItems(deliverableList, 'deliverableType'); + let emptyCategory = false; + uniqueCategories.forEach(async (category) => { + // build header row + let headerRow; + const matchingCampaigns = deliverableList.filter(deliverable => deliverable.deliverableType === category); + const matchCount = matchingCampaigns.length; + if (category == null || category == undefined || category === '') { + emptyCategory = true; + headerRow = rows; + } else { + headerRow = await buildHeaderRow(category, 'header', false, matchCount); + attachListener(headerRow); + rows.appendChild(headerRow); + } + matchingCampaigns.forEach(async (campaign) => { + const tableRow = await buildTableRow(campaign, programKpi, !emptyCategory); + headerRow.appendChild(tableRow); + }) + // sort grouped rows by date + if (!emptyCategory) { + dateSort(headerRow); + } + emptyCategory = false; + }); + //sort the rows + sortRows(rows); + return rows; +} + +function dateSort(parent) { + const childNodes = Array.from(parent.getElementsByClassName('datarow')); + childNodes.sort((a, b) => { + const dateA = new Date(a.querySelector('.completion-date').innerHTML); + const dateB = new Date(b.querySelector('.completion-date').innerHTML); + // Check if dates are valid + if (isNaN(dateA.getTime()) || isNaN(dateB.getTime())) { + return 0; // Move on if date is invalid + } + return dateA - dateB; + }) + childNodes.forEach((node) => { + parent.appendChild(node); + }) +} + +async function lookupType(rawText, mappingType) { + const mappings = (mappingType === 'deliverable-type') ? await deliverableMappings : await platformMappings; + const typeMatch = mappings.filter(item => item.value === rawText); + const typeText = typeMatch.length > 0 ? typeMatch[0].text : rawText; + return typeText; +} + +/** + * @param {string} category - String value of the category property + * @param {string} headerType - Type of header. Either 'category' or 'subcategory' + * @param {boolean} isInactive - Determines whether or not the header will be hidden initially + * @param {number} matchCount - Number of matching items, will display beside the label + */ +async function buildHeaderRow(category, headerType, isInactive, matchCount) { + //look up friendly name for deliverable type + const typeLabel = await lookupType(category, 'deliverable-type'); + const headerRow = document.createElement('div'); + headerRow.classList.add('row', 'collapsible', 'header'); + let divopen; + if (headerType === 'subcategory') { + headerRow.classList.add('subheader'); + divopen = '
'; + } else { + divopen = '
'; + } + if (isInactive) headerRow.classList.add('inactive'); + headerRow.innerHTML = ` + ${divopen} + + +
${typeLabel} (${matchCount})
+
`; + return headerRow; +} + +async function buildTableRow(deliverableJson, kpi, createHidden) { + //look up friendly name for deliverable type + const typeLabel = await lookupType(deliverableJson.deliverableType, 'deliverable-type'); + const dataRow = document.createElement('div'); + dataRow.classList.add('row', 'datarow'); + if (createHidden) dataRow.classList.add('inactive'); + const status = (deliverableJson.deliverableStatusUpdate == null) ? "Not Available" : deliverableJson.deliverableStatusUpdate + "%"; + const statusPct = (deliverableJson.deliverableStatusUpdate == null) ? "0%" : deliverableJson.deliverableStatusUpdate + "%"; + dataRow.innerHTML = ` +
${deliverableJson.deliverableName}
+
${typeLabel}
+
+
+ Review Link +
+
+
+
+
+
+
Progress
+
${status}
+
+
+
+
+
+
+
+
+
${checkBlankString(deliverableJson.taskCompletionDate)}
+ ${deliverableJson.previousTaskCompletionDate ? '
Revised from ' + deliverableJson.previousTaskCompletionDate + '
': ""} +
+
${checkBlankString(deliverableJson.driver)}
+ `; + if (!(deliverableJson.linkedFolderLink == null)) { + const finalAssetLink = document.createElement('a'); + finalAssetLink.href = deliverableJson.linkedFolderLink; + finalAssetLink.classList.add('campaign-link'); + finalAssetLink.target = '_blank'; + finalAssetLink.textContent = "Final Asset"; + dataRow.querySelector('.column5').appendChild(finalAssetLink); + } + createPlatformString(deliverableJson.platforms, dataRow); + return dataRow; +} + +async function createPlatformString(platforms, htmlElem) { + let platformString = ''; + if (platforms && platforms.length > 0) { + for (const rawPlatform of platforms) { + const platform = await lookupType(rawPlatform, 'platform'); + platformString += platform + ', '; + } + platformString = platformString.slice(0, -2); + } else { + platformString = 'Not Available' + } + htmlElem.querySelector('.column3.platforms').textContent = platformString; +} + +function sortRows(rows) { + const rowParent = rows; + const nodes = Array.from(rowParent.childNodes); + // Sort child nodes by class name + nodes.sort((a, b) => { + var classA = a.classList ? a.classList.contains('datarow') : false; + var classB = b.classList ? b.classList.contains('datarow') : false; + + if (classA && !classB) { + return 1; + } else if (!classA && classB) { + return -1; + } else { + return 0; + } + }); + + // Rearrange child nodes + nodes.forEach((node) => { + rowParent.appendChild(node); + }); + return rowParent; +} + +function attachListener(htmlElement) { + htmlElement.querySelector('.heading-wrapper').addEventListener('click', (event) => { + const arrow = event.target; + const headerRow = arrow.closest('.row.collapsible'); + const rowChildren = headerRow.children; + headerRow.querySelector('.icon-next').classList.toggle('inactive'); + headerRow.querySelector('.icon-collapse').classList.toggle('inactive'); + Array.from(rowChildren).forEach((child) => { + //if child has 'row' class, then toggle 'visible' class + if (child.classList.contains('row')) child.classList.toggle('inactive'); + }) + }) +} diff --git a/blocks/gmo-program-header/gmo-program-header.css b/blocks/gmo-program-header/gmo-program-header.css new file mode 100644 index 00000000..ac30d581 --- /dev/null +++ b/blocks/gmo-program-header/gmo-program-header.css @@ -0,0 +1,199 @@ +.gmo-campaign-header.block { + display: flex; + flex-direction: column; + margin-top: 20px; +} +.inputs-wrapper { + display: flex; + height: 50px; +} +.search-wrapper { + background-color: #FFF; + margin-top: 18px; + margin-right: 10px; + border: 1px solid #D3d3d3; + border-radius: 4px; + display: flex; + align-items: center; + position: relative; /* Added to be the anchor for absolute positioning for autocomplete feature*/ + & > .icon { + background-color: #FFF; + height: 14px; + border-radius: 4px; + & > svg { + padding-bottom: 10px; + } + } +} +.campaign-search { + width: 400px; + height: 26px; + border: none; + &:focus { + outline: none; + } +} +.filter-wrapper { + height: 100%; + width: 176px; + display: flex; + flex-direction: column; + & label { + font: normal normal normal 12px/15px Adobe Clean; + display: block; + height: 18px; + color: #747474; + } + & .label { + font: normal normal normal 12px/15px Adobe Clean; + display: block; + height: 18px; + color: #747474; + } + &:not(:last-child) { + margin-right: 10px; + } +} +.filters { + font: normal normal normal 14px/17px Adobe Clean; + color: #505050; + letter-spacing: 0px; + width: 176px; + height: 32px; + &.categories { + width: 200px; + } + &.status { + width: 200px; + } +} + +.filter-dropdown { + position: relative; + display: inline-block; + font: normal normal normal 14px/17px Adobe Clean; + letter-spacing: 0px; + height: 32px; + background-color: #FFF; + width: 100%; + border: 1px solid #D3D3D3; + border-radius: 4px; + & > .dropdown-button { + height: 32px; + line-height: 32px; + padding-left: 10px; + display: flex; + justify-content: space-between; + & > .dropdown-label { + overflow: hidden; + } + & > .icon { + padding-top: 4px; + height: 16px; + } + } + & > .dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + + max-height: 200px; + overflow-y: auto; + border: 1px solid #ccc; + z-index: 1; + width: 174px; + } + &.active .dropdown-content { + display: block; + } +} + +.dropoption.selected { + background-color:#959595; +} +.icon.inactive { + display: none; + visibility: hidden; +} +.dropdown-content a { + display: block; + padding: 10px; + text-decoration: none; + color: #333; + &:hover { + background-color: #ddd; + } +} +.selections-wrapper { + margin-top: 10px; + min-height: 22px; + display: flex; + justify-content: space-between; + & > .selected-filters-list { + display: flex; + max-width: 90%; + flex-wrap: wrap; + & > .selected-filter { + background: #FFFFFF; + border: 1px solid #959595; + border-radius: 4px; + text-align: left; + font: normal normal normal 12px/15px Adobe Clean; + letter-spacing: 0px; + color: #747474; + height: 20px; + line-height: 20px; + padding: 0 7px 0 7px; + margin-right: 5px; + & > .label { + margin-right: 4px; + } + & > .icon-close { + height: 8px; + width: 6px; + } + } + } + & > .reset-filters { + font: normal normal normal 14px/17px Adobe Clean; + &.inactive { + display: none; + visibility: hidden; + } + } +} + +/* Add the following for autocomplete styling */ + +.autocomplete-items { + position: absolute; + top: 100%; + left: 0; + right: 0; + border: 1px solid #cccccc; + border-top: none; + z-index: 10; + background: #ffffff; + overflow-y: auto; + max-height: 200px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); +} + +.autocomplete-items div { + padding: 10px 15px; + cursor: pointer; + border-bottom: 1px solid #f0f0f0; + font-size: 14px; /* Adjust the font-size as needed */ + color: #333; /* Adjust the text color as needed */ + line-height: 1.4; /* Adjust line-height for better readability if necessary */ +} + +.autocomplete-items div:hover { + background-color: #e9e9e9; +} + +.autocomplete-items div:last-child { + border-bottom: none; +} diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js new file mode 100644 index 00000000..98e15246 --- /dev/null +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -0,0 +1,376 @@ +import { decorateIcons } from '../../scripts/lib-franklin.js'; +import { graphqlQueryNameList, graphqlCampaignByName } from '../../scripts/graphql.js'; +import { statusMapping, productList } from '../../scripts/shared-program.js'; + +// Declared at the top of the file, making it accessible to all functions within this file. +let allProducts = []; + +export default async function decorate(block) { + block.innerHTML = ` +
+
+ + + +
+
+
+
Business Line
+
+
+
All Business Lines
+ + +
+
+
+
+
+
+
Status
+
+
+
All Statuses
+ + +
+
+
+
+
+ +
+
Products
+
+
+
All Products
+ + +
+
+
+
+
+ +
+
Geo
+
+
+
All Geo
+ + +
+
+
+
+
+ +
+ +
+
+
+
Reset filters
+
+ + `; + + // autocomplete feature + const autocompleteList = document.getElementById('autocomplete-list'); + // Get the input element by its ID + const searchInput = document.getElementById('campaign-search'); + searchInput.addEventListener('input', async function() { + const value = this.value; + if (value) + { + const graphqlData = await graphqlCampaignByName(value); + //Get unique values + const searchItems = Array.from(new Set(graphqlData.data.programList.items.map(item => item.campaignName))); + autocomplete(value, searchItems); + } + else + { + //The value has been cleard so trigger the gmo-campaign-list block from the gmo-campaign-header + sendGmoCampaignListBlockEvent(); + } + }); + + function autocomplete(value, items) { + clearAutocomplete(); + if (!value) return; + const filteredItems = items.filter(item => item.toLowerCase().includes(value.toLowerCase())); + filteredItems.forEach(item => { + const entry = document.createElement('div'); + entry.innerHTML = item; + entry.addEventListener('click', function() { + searchInput.value = this.innerText; + clearAutocomplete(); + }); + autocompleteList.appendChild(entry); + }); + } + + function clearAutocomplete() { + while (autocompleteList.firstChild) { + autocompleteList.removeChild(autocompleteList.firstChild); + } + } + + // Listen for click events on the autocomplete list + autocompleteList.addEventListener('click', function(event) { + //Trigger the gmo-campaign-list block from the gmo-campaign-header + sendGmoCampaignListBlockEvent(); + }); + + // Listen for change events on the autocomplete list + autocompleteList.addEventListener('change', function(event) { + //Trigger the gmo-campaign-list block from the gmo-campaign-header + sendGmoCampaignListBlockEvent(); + }); + + await initializeDropdowns(); + attachEventListeners(); + decorateIcons(block); +} + +async function initializeDropdowns() { + // Business Line List + + const businessLineResponse = await graphqlQueryNameList('getBusinessLine'); + const businessLines = businessLineResponse.data.jsonByPath.item.json.options; + populateDropdown(businessLines, 'dropdownBusinessOptions', 'businessLine'); + + // Status List + const statusResponse = await statusMapping; + const statuses = statusResponse.data.jsonByPath.item.json.options; + populateDropdown(statuses, 'dropdownStatusOptions', 'status'); + + // Product List + const productResponse = await productList; + allProducts = productResponse.data.jsonByPath.item.json.options; + populateDropdown(allProducts, 'dropdownProductOptions', 'productOffering'); + + // Geo List + const geoResponse = await graphqlQueryNameList('getGeoList'); + const geos = geoResponse.data.jsonByPath.item.json.options; + populateDropdown(geos, 'dropdownGeoOptions', 'p0TargetGeo'); +} + +// Function to attach event listeners +function attachEventListeners() { + // First remove existing listeners to prevent duplicates + removeEventListeners(); + + document.querySelectorAll('.dropdown-button').forEach(button => { + button.addEventListener('click', dropdownButtonClickHandler); + }); + + document.querySelectorAll('.dropoption').forEach(option => { + option.addEventListener('click', dropOptionClickHandler); + }); + + const resetFiltersBtn = document.querySelector('.reset-filters'); + if (resetFiltersBtn) { + resetFiltersBtn.addEventListener('click', resetFiltersClickHandler); + } + + // Add event listener for clicks outside of dropdowns + document.addEventListener('click', handleClickOutside); +} + +function populateDropdown(options, dropdownId, type) { + let dropdownContent = document.getElementById(dropdownId); + dropdownContent.innerHTML = ''; + options.forEach((option, index) => { + let anchor = document.createElement('a'); + anchor.href = "#"; + anchor.id = `option${index + 1}`; + anchor.dataset.value = option.value; + anchor.dataset.type = type; + anchor.className = "dropoption"; + anchor.textContent = option.text; + dropdownContent.appendChild(anchor); + }); +} + +// Function to filter products based on selected business line +function filterProductsByBusinessLine(businessLine) { + const filteredProducts = allProducts.filter(product => + product['business-line'].includes(businessLine) + ); + populateDropdown(filteredProducts, 'dropdownProductOptions', 'productOffering'); +} + +// Function to remove productOffering filters +function removeSelectedProductOfferingFilters() { + // Select all div elements with class 'selected-filter' and data-type 'productOffering' + const filters = document.querySelectorAll('.selected-filter[data-type="productOffering"]'); + // Loop through the NodeList and remove each element + filters.forEach(filter => { + filter.parentNode.removeChild(filter); + }); +} + + +// Function to close all dropdowns +function closeAllDropdowns() { + document.querySelectorAll('.filter-dropdown.active').forEach(dropdown => { + dropdown.classList.remove('active'); + dropdown.querySelector('.icon-chevronDown').classList.remove('inactive'); + dropdown.querySelector('.icon-chevronUp').classList.add('inactive'); + }); +} + +// Function to handle clicks outside of dropdowns +function handleClickOutside(event) { + const isClickInsideDropdown = event.target.closest('.filter-dropdown'); + if (!isClickInsideDropdown) { + closeAllDropdowns(); + } +} + +function toggleDropdown(element) { + const dropdown = element.closest('.filter-dropdown'); + const iconChevronDown = dropdown.querySelector('.icon-chevronDown'); + const iconChevronUp = dropdown.querySelector('.icon-chevronUp'); + + iconChevronDown.classList.toggle('inactive'); + iconChevronUp.classList.toggle('inactive'); + dropdown.classList.toggle('active'); +} + +function toggleOption(optionValue, optionType) { + const currentlySelected = document.querySelector(`.dropoption.selected[data-type='${optionType}']`); + if (currentlySelected && currentlySelected.dataset.value !== optionValue) { + currentlySelected.classList.remove('selected'); // Remove the 'selected' class from the previously selected option + handleSelectedFilter(currentlySelected); // Update the UI to reflect this change + } + + const dropdownOption = document.querySelector(`[data-value='${optionValue}'][data-type='${optionType}']`); + const isSelected = dropdownOption.classList.contains('selected'); + if (!isSelected) { + dropdownOption.classList.add('selected'); + if (optionType === 'businessLine') { + // Filter products based on the selected business line + filterProductsByBusinessLine(optionValue); + // Reset product offering filters + removeSelectedProductOfferingFilters(); + attachEventListeners(); + } + } else { + dropdownOption.classList.remove('selected'); + if (optionType === 'businessLine') { + //Reset Products Dropdown + resetProductsDropDown(); + } + } + + handleSelectedFilter(dropdownOption); // Update the UI for the new selection + checkResetBtn(); // Check if the reset button should be active +} + +function handleSelectedFilter(option) { + const filterTagRoot = document.querySelector('.selected-filters-list'); + const filterValue = option.dataset.value; + const filterType = option.dataset.type; + if (option.classList.contains('selected')) { + const filterName = option.textContent; + const filterTag = document.createElement('div'); + filterTag.classList.add('selected-filter'); + const filterLabel = document.createElement('span'); + filterLabel.textContent = filterName; + filterLabel.classList.add('label'); + const closeOrig = document.querySelector('.icon.icon-close.inactive'); + const closeIcon = closeOrig.cloneNode(true); + closeIcon.classList.toggle('inactive'); + closeIcon.addEventListener('click', (event) => { + const filterTag = event.target.closest('.selected-filter'); + const optionValue = filterTag.dataset.value; + const optionType = filterTag.dataset.type; + toggleOption(optionValue, optionType); + }) + filterTag.appendChild(filterLabel); + filterTag.appendChild(closeIcon); + filterTag.dataset.type = filterType; + filterTag.dataset.value = filterValue; + filterTagRoot.appendChild(filterTag); + } else { + filterTagRoot.removeChild(document.querySelector(`.selected-filter[data-value='${filterValue}'][data-type='${filterType}']`)); + } + + //Trigger the gmo-campaign-list block from the gmo-campaign-header + sendGmoCampaignListBlockEvent(); +} + +function resetAllFilters() { + //Clear the campaignName search field + const searchInput = document.getElementById('campaign-search'); + searchInput.value = ''; + + const selectedFilters = document.querySelectorAll('.dropoption.selected'); + selectedFilters.forEach((element) => { + element.classList.toggle('selected'); + }) + const filterTagRoot = document.querySelector('.selected-filters-list'); + filterTagRoot.replaceChildren(); + checkResetBtn(); + + //Reset Products Dropdown + resetProductsDropDown(); + + //Trigger the gmo-campaign-list block from the gmo-campaign-header + sendGmoCampaignListBlockEvent(); +} + +function resetProductsDropDown(){ + // Populate all products into Products dropdown + populateDropdown(allProducts, 'dropdownProductOptions', 'productOffering'); + // Reset product offering filters + removeSelectedProductOfferingFilters(); + attachEventListeners(); +} + +function checkResetBtn() { + const selectedOptions = document.querySelectorAll('.dropoption.selected'); + const resetFiltersBtn = document.querySelector('.reset-filters'); + if (selectedOptions.length > 0) { + if (resetFiltersBtn.classList.contains('inactive')) resetFiltersBtn.classList.remove('inactive'); + } else { + resetFiltersBtn.classList.add('inactive'); + } +} + +// Define handlers as named functions to easily add and remove them +function dropdownButtonClickHandler(event) { + toggleDropdown(event.target); +} + +function dropOptionClickHandler(event) { + toggleOption(event.target.dataset.value, event.target.dataset.type); + toggleDropdown(event.target); // Closes the dropdown list +} + +// Function to remove event listeners +function removeEventListeners() { + document.querySelectorAll('.dropdown-button').forEach(button => { + button.removeEventListener('click', dropdownButtonClickHandler); + }); + + document.querySelectorAll('.dropoption').forEach(option => { + option.removeEventListener('click', dropOptionClickHandler); + }); + + const resetFiltersBtn = document.querySelector('.reset-filters'); + if (resetFiltersBtn) { + resetFiltersBtn.removeEventListener('click', resetFiltersClickHandler); + } +} + +function resetFiltersClickHandler() { + resetAllFilters(); +} + +function sendGmoCampaignListBlockEvent() { + const blockEvent = new CustomEvent('gmoCampaignListBlock'); + document.dispatchEvent(blockEvent); +} diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css new file mode 100644 index 00000000..479d9922 --- /dev/null +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -0,0 +1,277 @@ +body { + background-color: rgb(247, 246, 246); +} +.refresh-notification { + text-align: right; + font-size: 14px; +} +.list-container { + background-color: #FFF; + padding-left: 12px; + padding-right: 12px; + padding-bottom: 10px; + border-radius: 10px; +} +.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; + + 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; + justify-content: center; +} +.column-sort-wrapper .icon { + height: 14px; + width: 14px; +} +.list-items { + display: flex; + flex-direction: column; +} +.campaign-row { + display: flex; + font-size: 14px; + margin-bottom: 20px; + height: 80px; +} +.campaign-info-wrapper { + display: flex; + font-size: 14px; +} +.campaign-icon { + width: 80px; + height: 80px; + margin-right: 14px; + background: #e2e2e2; + border-radius: 18px; +} + +.campaign-icon img { + width: 100%; /* Ensure the image fills the entire width of its container */ + height: 100%; /* Ensure the image fills the entire height of its container */ + object-fit: cover; /* This will cover the area without distorting the aspect ratio */ + border-radius: 18px; /* Match the border-radius of the container */ +} + +.campaign-name-wrapper { + width: 220px; +} +.campaign-name-label { + font-weight: bold; +} +.campaign-name { + color: #959595; +} +.campaign-description-wrapper { + color: #505050; +} +.campaign-description { + line-height:20px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + overflow: hidden; + text-overflow: ellipsis; +} +.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; + 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: #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; +} +.footer-pagination-pages { + line-height: 25px; + height: 25px; + font-size: 12px; + 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; +} +.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: 28%; + margin-right: 1%; +} +.column-2 { + width: 40%; + margin-right: 1%; +} +.column-3 { + width: 12%; + margin-right: 1%; +} +.column-4 { + width: 16%; + margin-right: 1%; +} +.column-5 { + width: 13%; + margin-right: 1%; +} +.column-6 { + width: 14%; +} +.status { + width: 80px; + text-align: center; + border-radius: 3px; + height: 24px; + line-height: 24px; + filter: saturate(0.5); + color: black; +} +.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); +} +.vertical-center { + display: flex; + flex-direction: column; + justify-content: center; +} + +/* Tooltip styles */ +.campaign-name-label, .campaign-name { + position: relative; + display: inline-block; +} + +.campaign-name-label:hover .tooltip { + visibility: visible; + opacity: 1; +} + +.campaign-name:hover .tooltip { + visibility: visible; + opacity: 1; +} + +.tooltip { + background-color: #D3D3D3; + border-radius: 2px; + visibility: hidden; + z-index: 1; + position: absolute; + text-align: center; + width: 100px; + padding: 2px 0; + font: normal normal normal 12px/17px Adobe Clean; + margin-left: 20px; +} + diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js new file mode 100644 index 00000000..d1b94f1a --- /dev/null +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -0,0 +1,481 @@ +import { readBlockConfig } from '../../scripts/lib-franklin.js'; +import { decorateIcons } from '../../scripts/lib-franklin.js'; +import { graphqlAllCampaignsFilter, graphqlCampaignCount, generateFilterJSON } from '../../scripts/graphql.js'; +import { getProductMapping, checkBlankString, statusMapping } from '../../scripts/shared-program.js' +import { getBaseConfigPath } from '../../scripts/site-config.js'; +import { searchAsset } from '../../scripts/assets.js'; + +const headerConfig = [ + { + 'name': 'Marketing Moments', + 'attribute': 'campaign', + 'sortable': true + }, + { + 'name': 'Overview', + 'attribute': 'description', + 'sortable': false + }, + { + 'name': 'Launch Date', + 'attribute': 'launch', + 'sortable': true, + 'type': 'date' + }, + { + 'name': 'Products', + 'attribute': 'products' + }, + { + 'name': 'Status', + 'attribute': 'status', + 'sortable': false + } +] + +//Global variables used by helper functions +let currentPageInfo = {}; +let cursorArray = []; +let currentPage = 1; +let currentNumberPerPage = 4; +let currentGraphqlFilter = {}; +//Get Campaign Count for pagination +let campaignCount = await graphqlCampaignCount(); +let blockConfig; + +//Custom event gmoCampaignListBlock to allow the gmo-campaign-header to trigger the gmo-program-list to update +document.addEventListener('gmoCampaignListBlock', async function() { + //Build graphq filter that is passed to the graphql persisted queries + const graphQLFilterArray = getFilterValues(); + const searchInputValue = document.getElementById('campaign-search').value; + if (searchInputValue!=='') + { + graphQLFilterArray.push({type:'campaignName', value:searchInputValue, operator:'='}) + } + + currentGraphqlFilter= generateFilterJSON(graphQLFilterArray); + const block = document.querySelector('.gmo-program-list.block'); + //Get Campaign Count for pagination + campaignCount = await graphqlCampaignCount(currentGraphqlFilter); + //Trigger loading the gmo-campaign-block + //Reset page variables + currentPageInfo = {}; + cursorArray = []; + currentPage = 1; + currentNumberPerPage = 4; + + decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); + +}); + + +export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) { + if (blockConfig == undefined) blockConfig = readBlockConfig(block); + const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter); + const campaigns = campaignPaginatedResponse.data.programPaginated.edges; + currentPageInfo = campaignPaginatedResponse.data.programPaginated.pageInfo; + //Current cursor used in previous page logic + currentPageInfo.currentCursor = cursor; + //Next Page + if (currentPageInfo.hasNextPage){ + currentPageInfo.nextCursor = campaigns[campaigns.length - 1].cursor; + } + + if (!previousPage && !nextPage) + { + cursorArray = campaigns.map(item => item.cursor); + } + else if (nextPage){ + + campaigns.forEach(item => { + cursorArray.push(item.cursor); + }); + } + currentPageInfo.itemCount = campaigns.length; + + const listHeaders = buildListHeaders(headerConfig); + const listItems = await buildCampaignList(campaigns, numPerPage); + const listFooter = buildListFooter(campaignCount, numPerPage); + + block.innerHTML = ` +
+
+
`; + const listContainer = block.querySelector('.list-container'); + listContainer.appendChild(listHeaders); + listContainer.appendChild(listItems); + listContainer.appendChild(listFooter); + //Show Hide Previous and Next Page buttons + const footerNext = document.querySelector('.footer-pagination-button.next'); + const footerPrev = document.querySelector('.footer-pagination-button.prev'); + if (currentPageInfo.hasPreviousPage){ + footerPrev.classList.add('active'); + } else { + footerPrev.classList.remove('active'); + } + + if (currentPageInfo.hasNextPage){ + footerNext.classList.add('active'); + } else { + footerNext.classList.remove('active'); + } + decorateIcons(block); + + //Debug Global Variables + //debug_console(); +} + +function debug_console(){ + console.log('currentPageInfo',currentPageInfo); + console.log('cursorArray',cursorArray); + console.log('currentPage',currentPage); + console.log('campaignCount',campaignCount); + +} + +function getFilterValues(){ + // Select all elements with the class 'selected-filter' + const filters = document.querySelectorAll('.selected-filter'); + // Create an array to hold the data-type and data-value attributes + const filterAttributes = []; + // Loop through each filter element and extract both 'data-type' and 'data-value' attributes + filters.forEach(filter => { + const dataType = filter.getAttribute('data-type'); + const dataValue = filter.getAttribute('data-value'); + filterAttributes.push({ type: dataType, value: dataValue, operator : "=" }); + }); + + return filterAttributes; +} + +async function buildCampaignList(campaigns, numPerPage) { + const listWrapper = document.createElement('div'); + listWrapper.classList.add('list-items'); + listWrapper.dataset.totalresults = campaigns.length; + const host = location.origin + getBaseConfigPath(); + const detailsPage = blockConfig.detailspage; + + for (const campaign of campaigns) { + const index = campaigns.indexOf(campaign); + 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 campaignIconLink = document.createElement('a'); + let campaignDetailsLink = host + `/${detailsPage}?programName=${campaign.node.programName}&`; + campaignDetailsLink += `programReferenceNumber=${campaign.node.programReferenceNumber ? campaign.node.programReferenceNumber : ""}` + campaignIconLink.href = campaignDetailsLink; + + const campaignIcon = document.createElement('div'); + campaignIcon.classList.add('campaign-icon'); + campaignIcon.dataset.programname = campaign.node.programName; + campaignIcon.dataset.campaignname = campaign.node.campaignName; + //Add Icon Image + const iconImage = document.createElement('img'); + try { + const imageObject = await searchAsset(campaign.node.programName, campaign.node.campaignName); + iconImage.src = imageObject.imageUrl; + iconImage.alt = imageObject.imageAltText; + } catch (error) { + } + // Append the image to the campaignIcon div + campaignIcon.appendChild(iconImage); + campaignIconLink.appendChild(campaignIcon); + const campaignName = document.createElement('div'); + campaignName.classList.add('campaign-name-wrapper', 'vertical-center'); + + campaignName.innerHTML = ` +
+ ${checkBlankString(campaign.node.programName)} + Program Name +
+
+ ${checkBlankString(campaign.node.campaignName)} + Marketing Moment +
+ `; + + campaignInfoWrapper.appendChild(campaignIconLink); + 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 = checkBlankString(campaign.node.marketingGoal.plaintext); + campaignOverview.classList.add('campaign-description'); + campaignOverview.dataset.property = 'description'; + campaignOverviewWrapper.appendChild(campaignOverview); + + const campaignLaunch = document.createElement('div'); + campaignLaunch.textContent = checkBlankString(campaign.node.launchDate); + campaignLaunch.classList.add('column-3', 'campaign-launch-date', 'vertical-center'); + campaignLaunch.dataset.property = 'launch'; + + const campaignProducts = await buildProduct(checkBlankString(campaign.node.productOffering)); + campaignProducts.classList.add('column-4', 'vertical-center'); + + var campaignStatusWrapper = document.createElement('div'); + campaignStatusWrapper.classList.add('status-wrapper', 'column-6', 'vertical-center'); + campaignStatusWrapper = buildStatus(campaignStatusWrapper, campaign); + campaignRow.appendChild(campaignInfoWrapper); + campaignRow.appendChild(campaignOverviewWrapper); + campaignRow.appendChild(campaignLaunch); + campaignRow.appendChild(campaignProducts); + campaignRow.appendChild(campaignStatusWrapper); + + listWrapper.appendChild(campaignRow); + } + return listWrapper; +} + +function buildStatus(statusWrapper, campaign) { + const campaignStatus = document.createElement('div'); + const statusStr = checkBlankString(campaign.node.status); + const statusArray = statusMapping.data.jsonByPath.item.json.options; + const statusMatch = statusArray.filter(item => item.value === statusStr); + const statusText = statusMatch.length > 0 ? statusMatch[0].text : statusStr; + campaignStatus.textContent = statusText; + campaignStatus.style.backgroundColor = "#" + statusMatch[0]["color-code"]; + campaignStatus.classList.add('status'); + campaignStatus.dataset.property = 'status'; + statusWrapper.appendChild(campaignStatus); + return statusWrapper; +} + +async function buildProduct(product) { + const productParent = document.createElement('div'); + const productMapping = await getProductMapping(product); + const productEl = document.createElement('div'); + productEl.classList.add('product-entry'); + productEl.innerHTML = ` + + ${productMapping.label} + `; + productParent.appendChild(productEl); + return productParent; +} + +function buildListHeaders(headerConfig) { + const config = headerConfig; + const listHeaders = document.createElement('div'); + listHeaders.classList.add('list-header'); + let columnCounter = 1; + config.forEach((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('img'); + columnSortAsc.classList.add('column-sort-asc', 'icon'); + columnSortAsc.src = '/icons/chevronUp.svg'; + columnSortAsc.title = 'Sort (Ascending)' + columnSortAsc.addEventListener('click', () => { + sortColumn('asc', column.attribute); + }) + const columnSortDesc = document.createElement('img'); + columnSortDesc.classList.add('column-sort-desc', 'icon'); + columnSortDesc.src = '/icons/chevronDown.svg'; + columnSortDesc.title = 'Sort (Descending)'; + columnSortDesc.addEventListener('click', () => { + sortColumn('desc', column.attribute); + }) + columnSort.appendChild(columnSortAsc); + columnSort.appendChild(columnSortDesc); + columnWrapper.appendChild(columnSort); + } + //end sorting + listHeaders.appendChild(columnWrapper); + }) + return listHeaders; +} + +function buildListFooter(rows, rowsPerPage) { + const pages = Math.ceil(rows / rowsPerPage); + const footerWrapper = document.createElement('div'); + footerWrapper.classList.add('list-footer', 'footer-wrapper'); + footerWrapper.dataset.pages = pages; + const footerTotal = document.createElement('div'); + + footerTotal.textContent = `Page ${currentPage} of ${pages} -- ${rows} 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'; + footerPrev.addEventListener('click', (event) => { + prevPage(event.target); + }) + + const footerPageBtnsWrapper = document.createElement('div'); + footerPageBtnsWrapper.classList.add('footer-pages-wrapper'); + const footerNext = document.createElement('div'); + footerNext.classList.add('footer-pagination-button', 'next'); + //Show current page + buildCurrentPageDivElement(currentPage, footerPageBtnsWrapper); + + footerNext.addEventListener('click', (event) => { + nextPage(event.target); + }) + footerNext.textContent = 'Next'; + footerPagination.appendChild(footerPrev); + footerPagination.appendChild(footerPageBtnsWrapper); + 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 footerPerPageDropdownWrapper = document.createElement('div'); + const footerPerPageDropdown = document.createElement('select'); + footerPerPageDropdown.id = 'per-page'; + footerPerPageDropdown.innerHTML = ` + + + + + + + + `; + + // Selecting the item based on the value of currentNumberPerPage + var options = footerPerPageDropdown.querySelectorAll('option'); + options.forEach(option => { + if (option.value === currentNumberPerPage.toString()) { + option.selected = true; + } + }); + + footerPerPageDropdown.addEventListener('change', (event) => { + repaginate(event.target); + }); + footerPerPageDropdownWrapper.appendChild(footerPerPageDropdown); + footerPerPageDropdownWrapper.classList.add('footer-perPage-dropdown'); + footerPerPage.appendChild(footerPerPageLabel); + footerPerPage.appendChild(footerPerPageDropdownWrapper); + // end per-page controls + + footerWrapper.appendChild(footerTotal); + footerWrapper.appendChild(footerPagination); + footerWrapper.appendChild(footerPerPage); + return footerWrapper; +} + +//Show current page +function buildCurrentPageDivElement(pageNumber,footerPageBtnsWrapper) +{ + const footerPageBtn = document.createElement('div'); + footerPageBtn.classList.add('footer-pagination-pages', 'currentpage'); + footerPageBtn.id = "current-page"; + footerPageBtn.textContent = pageNumber; + footerPageBtn.dataset.pagenumber = pageNumber; + footerPageBtnsWrapper.appendChild(footerPageBtn); +} + +function repaginate(dropdown) { + currentNumberPerPage = dropdown.value; + //Reset current page to 1 + currentPage = 1; + const block = document.querySelector('.gmo-program-list.block'); + //Reset cursor to '' + decorate(block, currentNumberPerPage, '', false, false); +} + +function nextPage(nextBtn) { + if (currentPageInfo.hasNextPage) { + //Calculate Next Page + currentPage++; + const block = document.querySelector('.gmo-program-list.block'); + decorate( block, currentNumberPerPage, currentPageInfo.nextCursor, false, true,currentGraphqlFilter); + if (!(nextBtn.classList.contains('active'))) { + return; + } + const prevBtn = document.querySelector('.footer-pagination-button.prev'); + prevBtn.classList.add('active'); + } +} + +function prevPage(prevBtn) { + if (currentPageInfo.hasPreviousPage) { + currentPage--; + const block = document.querySelector('.gmo-program-list.block'); + const currentCursor = currentPageInfo.currentCursor; + //Calculate cursor for previous page + const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage; + decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter); + if (!(prevBtn.classList.contains('active'))) { + return; + } + const nextBtn = document.querySelector('.footer-pagination-button.next'); + const currentPageBtn = document.querySelector('#current-page'); + const currentPageValue = parseInt(currentPageBtn.dataset.pagenumber); + const targetPage = (currentPageValue - 1); + nextBtn.classList.add('active'); + } +} + +function sortColumn(dir, property) { + const container = document.querySelector('.list-items'); + if (!container) { + console.error("Could not locate list container."); + return; + } + + const selector = '[data-property="' + property + '"]'; + const divs = document.querySelectorAll(selector); + const sortArray = []; + + divs.forEach(div => { + const textContent = div.textContent.trim(); + const row = div.closest('.campaign-row'); + sortArray.push({ textContent, row }); + }); + + if (property == 'launch') { + if (dir == 'asc') { + sortArray.sort((a,b) => { + a = a.textContent.split('/').reverse().join(''); + b = b.textContent.split('/').reverse().join(''); + return a.localeCompare(b); + }); + } else { + sortArray.sort((a,b) => { + a = a.textContent.split('/').reverse().join(''); + b = b.textContent.split('/').reverse().join(''); + return b.localeCompare(a); + }); + } + } else { + if (dir == 'asc') { + sortArray.sort((a, b) => a.textContent.localeCompare(b.textContent)); + } else { + sortArray.sort((a, b) => b.textContent.localeCompare(a.textContent)); + } + } + + sortArray.forEach(({ row }, index) => { + container.appendChild(row); + }); +} diff --git a/icons/collapse.svg b/icons/collapse.svg new file mode 100644 index 00000000..38a34b62 --- /dev/null +++ b/icons/collapse.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/icons/trophy.svg b/icons/trophy.svg new file mode 100644 index 00000000..52e271ce --- /dev/null +++ b/icons/trophy.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/scripts/assets.js b/scripts/assets.js new file mode 100644 index 00000000..37ec6233 --- /dev/null +++ b/scripts/assets.js @@ -0,0 +1,108 @@ +import { getBearerToken } from './security.js'; + +import { + getAssetHandlerApiKey, + getDeliveryEnvironment, + getBackendApiKey, + getSearchIndex, + initDeliveryEnvironment, + getOptimizedDeliveryUrl +} from './polaris.js'; + +import { getAdminConfig } from './site-config.js'; + +import { createSearchEndpoint, logError } from './scripts.js'; + +async function getRequestHeadersSearchAssets() { + const token = await getBearerToken(); + return { + 'Content-Type': 'application/json', + 'x-api-key': getBackendApiKey(), + Authorization: token, + 'x-adobe-accept-experimental': '1', + 'x-adp-request': 'search', + }; +} + +const getFilters = () => { + const currentDate = new Date(); + const currentEpoch = Math.floor(currentDate.getTime() / 1000); + // Algolia does not support filters based on mixed types; for example boolean & numeric field types + // is_pur-expirationDate is a boolean type; but aloglia's engine treats boolean false as 0 + // so we can use that to our advantage for numberic filters + return `is_pur-expirationDate = 0 OR pur-expirationDate > ${currentEpoch}`; +}; + + +/** + * Search Asset for programName and campaignName parameters. + * + * @param {string} - Program Name. + * @param {string} - Campaign Name. + * @returns {Image } Resolves with image object. + * @throws {Error} If an HTTP error or network error occurs. + */ + +export async function searchAsset(programName, campaignName, imageWidth = 80) { + const adminConfig = await getAdminConfig(); + const deliveryURL = await initDeliveryEnvironment(); + + const indexName = await getSearchIndex(); + + // Initialize the facetFilters array + const facetFilters = []; + if (programName) { // Check if programName is not null + facetFilters.push('gmo-programName :'+programName); + } + if (campaignName) { // Check if campaignName is not null + facetFilters.push('gmo-campaignName :'+ campaignName); + } + const data = { + requests: [ + { + indexName: indexName, + params: { + facetFilters: facetFilters, + filters: getFilters(), + highlightPostTag: '__/ais-highlight__', + highlightPreTag: '__ais-highlight__', + hitsPerPage: 1, + page: 0, + query: '', + tagFilters: '' + } + } + ] + }; + + const options = { + method: 'POST', + headers: await getRequestHeadersSearchAssets(), + body: JSON.stringify(data), + }; + + try { + const response = await fetch(createSearchEndpoint(), options); + // Handle response codes + if (response.status === 200) { + // Asset retrieved successfully + const responseBody = await response.json(); + const assetData = responseBody.results[0].hits[0]; + if (assetData) + { + const totalAssets = responseBody.results[0].nbHits; + const thumbnailURL = await getOptimizedDeliveryUrl(assetData.assetId, assetData['repo-name'], imageWidth); + return {imageUrl : thumbnailURL, imageAltText: assetData['repo-name'], assetCount: totalAssets}; + } + else + { + return null; + } + } + // Handle other response codes + throw new Error(`Failed to search asset: ${response.status} ${response.statusText}`); + } catch (error) { + logError('searchAsset', error); + throw error; + } +} diff --git a/scripts/graphql.js b/scripts/graphql.js new file mode 100644 index 00000000..504685ba --- /dev/null +++ b/scripts/graphql.js @@ -0,0 +1,248 @@ +import { getBearerToken } from './security.js'; +import { getAdminConfig } from './site-config.js'; +import { logError } from './scripts.js'; + +const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; +const projectId = 'gmo'; + +export async function graphqlQueryNameList(queryNameList) { + const queryName = queryNameList; + //persisted query URLs have to be encoded together with the first semicolon + const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}`; + const jwtToken = await getBearerToken(); + + // Return the fetch promise chain so that it can be awaited outside + return fetch(graphqlEndpoint, { + method: 'GET', + headers: { + Authorization: jwtToken, + }, + }).then(response => { + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return response.json(); + }).then(data => { + return data; // Make sure to return the data so that the promise resolves with it + }).catch(error => { + console.error('Error fetching data: ', error); + throw error; // Rethrow or handle error as appropriate + }); +} + +export async function graphqlCampaignCount(filter = {}) { + const queryName = 'getCampaignNameFilter'; + const encodedSemiColon = encodeURIComponent(';'); + const encodedFilter = encodeURIComponent(JSON.stringify(filter)); + const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}filter=${encodedFilter}`; + const jwtToken = await getBearerToken(); + + try { + const options = { + method: 'GET', + headers: { + Authorization: jwtToken, + }, + }; + const response = await fetch(`${graphqlEndpoint}`, options); + // Handle response codes + if (response.status === 200) { + const responseBody = await response.json(); + return responseBody.data.programList.items.length; + } if (response.status === 404) { + // Handle 404 error + const errorResponse = await response.json(); + throw new Error(`Failed to get graphqlCampaignCount (404): ${errorResponse.detail}`); + } else { + // Handle other response codes + throw new Error(`Failed to retrieve graphqlCampaignCount: ${response.status} ${response.statusText}`); + } + } catch (error) { + // Handle network or other errors + logError('graphqlCampaignCount', error); + throw error; + } + +} + +export async function graphqlAllCampaignsFilter(first,cursor,filter) { + const queryName = 'getAllCampaigns'; + const encodedFirst = encodeURIComponent(first); + const encodedSemiColon = encodeURIComponent(';'); + const encodedCursor = encodeURIComponent(cursor); + const encodedFilter = encodeURIComponent(JSON.stringify(filter)); + const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}first=${encodedFirst}${encodedSemiColon}cursor=${encodedCursor}${encodedSemiColon}filter=${encodedFilter}`; + const jwtToken = await getBearerToken(); + + try { + const options = { + method: 'GET', + headers: { + Authorization: jwtToken, + }, + }; + const response = await fetch(`${graphqlEndpoint}`, options); + // Handle response codes + if (response.status === 200) { + const responseBody = await response.json(); + return responseBody; + } if (response.status === 404) { + // Handle 404 error + const errorResponse = await response.json(); + throw new Error(`Failed to get graphqlAllCampaignsFilter (404): ${errorResponse.detail}`); + } else { + // Handle other response codes + throw new Error(`Failed to retrieve graphqlAllCampaignsFilter: ${response.status} ${response.statusText}`); + } + } catch (error) { + // Handle network or other errors + logError('graphqlAllCampaignsFilter', error); + throw error; + } + +} + +export async function graphqlCampaignByName(campaignName) { + const queryName = 'getCampaignNames'; + const encodedCampaignName = encodeURIComponent(campaignName); + const encodedSemiColon = encodeURIComponent(';'); + //persisted query URLs have to be encoded together with the first semicolon + const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}campaignName=${encodedCampaignName}`; + const jwtToken = await getBearerToken(); + + // Return the fetch promise chain so that it can be awaited outside + return fetch(graphqlEndpoint, { + method: 'GET', + headers: { + Authorization: jwtToken, + }, + }).then(response => { + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return response.json(); + }).then(data => { + return data; // Make sure to return the data so that the promise resolves with it + }).catch(error => { + console.error('Error fetching data: ', error); + throw error; // Rethrow or handle error as appropriate + }); +} + +export async function graphqlFilterOnMarketingInitiative(marketingInitiative) { + + const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; + const projectId = 'gmo'; + const queryName = 'filter-on-marketing-initiative'; + const encodedMarketingInitiative = encodeURIComponent(marketingInitiative); + const encodedSemiColon = encodeURIComponent(';'); + //persisted query URLs have to be encoded together with the first semicolon + const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}marketingInitiative=${encodedMarketingInitiative}`; + const jwtToken = await getBearerToken(); + + // Return the fetch promise chain so that it can be awaited outside + return fetch(graphqlEndpoint, { + method: 'GET', + headers: { + Authorization: jwtToken, + }, + }).then(response => { + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return response.json(); + }).then(data => { + return data; // Make sure to return the data so that the promise resolves with it + }).catch(error => { + console.error('Error fetching data: ', error); + throw error; // Rethrow or handle error as appropriate + }); +} + +async function getGraphqlEndpoint() { + const result = await getAdminConfig(); + return result.aemGraphqlEndpoint; +} + + + +/** + * Generates GraphQL Filter String from an array filterParams + * @param {Array of parameter objects} filterParams - + * Expected parameter format + * [ + * {type:"campignName", value:"Photo" ,operator : "CONTAINS"}, + * {type:"status", value:"Current" ,operator : "="} + * ] + * operator : "CONTAINS" generates + * "_expressions": [ + * { + * "value": "", + * "_operator": "CONTAINS", + * "_ignoreCase": true + * } + * ] + * operator : "=" generates + * "_expressions": [ + * { + * "value": "", + * } + * ] + * @returns {string} GraphQL Filter JSON Object. + */ + +export function generateFilterJSON(filterParams) { + + // Initialize an empty object to hold the final structure + const result = {}; + + // Iterate over each item in the filterParams array + filterParams.forEach(param => { + // Initialize the object for each parameter name if it doesn't already exist + if (!result[param.type]) { + result[param.type] = { _expressions: [] }; + } + + // Create the expression object based on the operator + const expression = { value: param.value }; + if (param.operator === "CONTAINS") { + expression._operator = "CONTAINS"; + expression._ignoreCase = true; + } + + // Add the expression object to the _expressions array for the corresponding parameter name + result[param.type]._expressions.push(expression); + }); + + // Convert the result object to JSON + const jsonResult = JSON.stringify(result,null,4); + // Logging the JSON to see the output + console.debug('Graphql filter',jsonResult); + console.debug('result', result); + return result; +} + +// general function for executing graphql queries +export async function executeQuery(queryString) { + const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; + const projectId = 'gmo'; + const queryEndpoint = `${baseApiUrl}/${projectId}/${queryString}`; + const jwtToken = await getBearerToken(); + + return fetch(queryEndpoint, { + method: 'GET', + headers: { + Authorization: jwtToken, + }, + }).then(response => { + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return response.json(); + }).then(data => { + return data; // Make sure to return the data so that the promise resolves with it + }).catch(error => { + console.error('Error fetching data: ', error); + throw error; // Rethrow or handle error as appropriate + }); +}; \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index f90040cf..de80ce00 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -127,7 +127,7 @@ async function loadScript(url, attrs) { }); } -function createSearchEndpoint() { +export function createSearchEndpoint() { return `${getDeliveryEnvironment()}/adobe/assets/search`; } diff --git a/scripts/security.js b/scripts/security.js index 659a7c98..edbe7458 100644 --- a/scripts/security.js +++ b/scripts/security.js @@ -1,6 +1,6 @@ import { fetchCached } from './fetch-util.js'; import { isUnifiedShellRuntimeAvailable, shell, user } from '../contenthub/unified-shell.js'; -import { getAdminConfig } from './site-config.js'; +import { getAdminConfig, getBrandingConfig, isContentHub, getQuickLinkConfig, getBaseConfigPath } from './site-config.js'; import { getSecurityGroupMemberships } from './security-imslib.js'; /** @@ -104,8 +104,22 @@ export async function checkUserAccess() { const imsLibSecurityModule = await import('./security-imslib.js'); if (isPublicPage()) { return true; - } - return await imsLibSecurityModule.isUserInSecurityGroup(imsUserGroup, await getBearerToken()); + } + const isIMSUser = await imsLibSecurityModule.isUserInSecurityGroup(imsUserGroup, await getBearerToken()); + if (isIMSUser) { + //Check if current page is present in the array of pages returned by function getQuickLinkConfig() + //Split the URL into parts + const currentUrlParts=window.location.pathname.replace(getBaseConfigPath((window.location.pathname)),'').split('/'); + //Current url beginning with / + const currentURL = '/'+currentUrlParts[1]; + const presentInQuickLinks = (await getQuickLinkConfig()).some((grp) => grp.page === (currentURL)); + + return presentInQuickLinks; + } + else + { //Not IMSUser + return isIMSUser; + } } } @@ -113,4 +127,15 @@ export async function checkAddAssetsAccess() { const adminConfig = await getAdminConfig(); const securityGroupMemberships = await getSecurityGroupMemberships(await getBearerToken()); return securityGroupMemberships.some((grp) => grp.groupName === adminConfig.imsAuthorGroup); -} \ No newline at end of file +} + +/** + * Checks Group Access for the group that is stored in the admin-config.xslx for + * for the property name in parameter adminConfigGroupPropertyName + * @returns {boolean} for access to the group + */ +export async function checkPageGroupAccess(adminConfigGroupPropertyName) { + const adminConfig = await getAdminConfig(); + const securityGroupMemberships = await getSecurityGroupMemberships(await getBearerToken()); + return securityGroupMemberships.some((grp) => grp.groupName === adminConfig[adminConfigGroupPropertyName]); +} diff --git a/scripts/shared-program.js b/scripts/shared-program.js new file mode 100644 index 00000000..f6a2e610 --- /dev/null +++ b/scripts/shared-program.js @@ -0,0 +1,55 @@ +import { graphqlQueryNameList } from "./graphql.js"; +import { getProductIconMapping, getBaseConfigPath } from './site-config.js'; + +let iconMapping; +export let statusMapping = await graphqlQueryNameList('getStatusList'); +export let productList = await graphqlQueryNameList('getProductList'); + +/* +* Executes graphql query for 'friendly' labels and returns array of the results +*/ +export async function resolveMappings(mappingType) { + const response = await graphqlQueryNameList(mappingType); + const mappingArray = response.data.jsonByPath.item.json.options; + return mappingArray; +} + +/** + * Filter provided array based on provided key/value pair + */ +export function filterArray(array, key, value) { + const arrayMatch = array.filter(match => match[key] === value); + return arrayMatch.length > 0 ? arrayMatch : null; +} + +export async function getProductMapping(product) { + let iconMatch; + const configPath = getBaseConfigPath(); + const defaultIcon = configPath + '/logo/products/default-app-icon.svg'; + if (iconMapping == undefined) iconMapping = await getProductIconMapping(); + if (iconMapping) { + iconMatch = filterArray(iconMapping, 'Product-offering', product); + } + const icon = iconMatch ? configPath + iconMatch[0]['Icon-path'] : defaultIcon; + + if (productList == undefined) productList = await graphqlQueryNameList('getProductList'); + const productsArray = productList.data.jsonByPath.item.json.options; + const productsMatch = filterArray(productsArray, 'value', product); + const productsText = productsMatch ? productsMatch[0].text : product; + + return { + label: productsText, + icon: icon + } +} + +/* +* Check for undefined/blank property and supply 'Not Available' if no data +*/ +export function checkBlankString(string) { + if (string == undefined || string == '' ) { + return 'Not Available'; + } else { + return string; + } +} diff --git a/scripts/site-config.js b/scripts/site-config.js index c906db24..6c9694ff 100644 --- a/scripts/site-config.js +++ b/scripts/site-config.js @@ -1,5 +1,6 @@ import { fetchCached } from './fetch-util.js'; import { toCamelCase } from './lib-franklin.js'; +import { checkPageGroupAccess } from './security.js'; const QA_BASE_PATH = 'qa'; const DRAFTS_BASE_PATH = 'drafts'; @@ -285,14 +286,18 @@ async function mapUserSettingsForId(configId, result) { export async function getQuickLinkConfig() { const result = []; const response = await getConfig('site-config.json'); - response.quicklinks?.data.forEach((row) => { + + for (const row of response.quicklinks?.data || []) { if (row.Title && row.Page) { - result.push({ - title: row.Title, - page: row.Page, - }); + if (!row.Group || (await checkPageGroupAccess(row.Group))) { + result.push({ + title: row.Title, + page: row.Page, + hide: row.Hide, + }); + } } - }); + } return result; } @@ -361,3 +366,17 @@ export async function getLicenseAgreementText() { }); return licenseAgreement; } + +/** + * @returns {Array} + */ +export async function getProductIconMapping() { + let iconArray; + try { + const response = await getConfig('site-config.json'); + iconArray = response['product-icons'].data; + } catch { + console.log("Unable to retrieve site-config.json"); + } + return iconArray; +} \ No newline at end of file From 112dc3a1ef7f51d2b36ba0fca0b80346ca69fbd0 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Mon, 3 Jun 2024 19:51:46 -0500 Subject: [PATCH 07/95] ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta --- blocks/gmo-program-list/gmo-program-list.js | 19 +++++-------------- scripts/graphql.js | 6 ++---- scripts/shared-program.js | 6 +++--- 3 files changed, 10 insertions(+), 21 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index d1b94f1a..71806d5f 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -33,11 +33,13 @@ const headerConfig = [ } ] +const DEFAULT_ITEMS_PER_PAGE = 8; //Global variables used by helper functions let currentPageInfo = {}; let cursorArray = []; let currentPage = 1; -let currentNumberPerPage = 4; +let currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; + let currentGraphqlFilter = {}; //Get Campaign Count for pagination let campaignCount = await graphqlCampaignCount(); @@ -62,7 +64,7 @@ document.addEventListener('gmoCampaignListBlock', async function() { currentPageInfo = {}; cursorArray = []; currentPage = 1; - currentNumberPerPage = 4; + currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); @@ -120,16 +122,6 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, footerNext.classList.remove('active'); } decorateIcons(block); - - //Debug Global Variables - //debug_console(); -} - -function debug_console(){ - console.log('currentPageInfo',currentPageInfo); - console.log('cursorArray',cursorArray); - console.log('currentPage',currentPage); - console.log('campaignCount',campaignCount); } @@ -193,7 +185,7 @@ async function buildCampaignList(campaigns, numPerPage) { Program Name
- ${checkBlankString(campaign.node.campaignName)} + ${checkBlankString(campaign.node.campaignName,'Marketing Moment Not Available')} Marketing Moment
`; @@ -351,7 +343,6 @@ function buildListFooter(rows, rowsPerPage) { const footerPerPageDropdown = document.createElement('select'); footerPerPageDropdown.id = 'per-page'; footerPerPageDropdown.innerHTML = ` - diff --git a/scripts/graphql.js b/scripts/graphql.js index 504685ba..72f6ceaa 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -216,9 +216,7 @@ export function generateFilterJSON(filterParams) { // Convert the result object to JSON const jsonResult = JSON.stringify(result,null,4); - // Logging the JSON to see the output - console.debug('Graphql filter',jsonResult); - console.debug('result', result); + return result; } @@ -245,4 +243,4 @@ export async function executeQuery(queryString) { console.error('Error fetching data: ', error); throw error; // Rethrow or handle error as appropriate }); -}; \ No newline at end of file +}; diff --git a/scripts/shared-program.js b/scripts/shared-program.js index f6a2e610..39e8db93 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -46,9 +46,9 @@ export async function getProductMapping(product) { /* * Check for undefined/blank property and supply 'Not Available' if no data */ -export function checkBlankString(string) { - if (string == undefined || string == '' ) { - return 'Not Available'; +export function checkBlankString(string, notAvailableText = 'Not Available') { + if (string == undefined || string == '') { + return notAvailableText; } else { return string; } From 62f579f6dd71c7deb11e9b19c98a48669db3707d Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Tue, 4 Jun 2024 16:52:52 -0400 Subject: [PATCH 08/95] Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching --- .../gmo-program-header/gmo-program-header.css | 2 +- .../gmo-program-header/gmo-program-header.js | 43 ++++++++-------- blocks/gmo-program-list/gmo-program-list.css | 17 +++++-- blocks/gmo-program-list/gmo-program-list.js | 50 ++++++++++++------- scripts/graphql.js | 30 ----------- 5 files changed, 64 insertions(+), 78 deletions(-) diff --git a/blocks/gmo-program-header/gmo-program-header.css b/blocks/gmo-program-header/gmo-program-header.css index ac30d581..e00c20fb 100644 --- a/blocks/gmo-program-header/gmo-program-header.css +++ b/blocks/gmo-program-header/gmo-program-header.css @@ -1,4 +1,4 @@ -.gmo-campaign-header.block { +.gmo-program-header.block { display: flex; flex-direction: column; margin-top: 20px; diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index 98e15246..d7a9e46d 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -2,9 +2,6 @@ import { decorateIcons } from '../../scripts/lib-franklin.js'; import { graphqlQueryNameList, graphqlCampaignByName } from '../../scripts/graphql.js'; import { statusMapping, productList } from '../../scripts/shared-program.js'; -// Declared at the top of the file, making it accessible to all functions within this file. -let allProducts = []; - export default async function decorate(block) { block.innerHTML = `
@@ -128,32 +125,29 @@ export default async function decorate(block) { sendGmoCampaignListBlockEvent(); }); - await initializeDropdowns(); - attachEventListeners(); + initializeDropdowns(); decorateIcons(block); + document.addEventListener('click', handleClickOutside); } async function initializeDropdowns() { // Business Line List + graphqlQueryNameList('getBusinessLine').then((response) => { + populateDropdown(response, 'dropdownBusinessOptions', 'businessLine'); + }); - const businessLineResponse = await graphqlQueryNameList('getBusinessLine'); - const businessLines = businessLineResponse.data.jsonByPath.item.json.options; - populateDropdown(businessLines, 'dropdownBusinessOptions', 'businessLine'); + // Geo List + graphqlQueryNameList('getGeoList').then((response) => { + populateDropdown(response, 'dropdownGeoOptions', 'p0TargetGeo'); + }); // Status List const statusResponse = await statusMapping; - const statuses = statusResponse.data.jsonByPath.item.json.options; - populateDropdown(statuses, 'dropdownStatusOptions', 'status'); + populateDropdown(statusResponse, 'dropdownStatusOptions', 'status'); // Product List const productResponse = await productList; - allProducts = productResponse.data.jsonByPath.item.json.options; - populateDropdown(allProducts, 'dropdownProductOptions', 'productOffering'); - - // Geo List - const geoResponse = await graphqlQueryNameList('getGeoList'); - const geos = geoResponse.data.jsonByPath.item.json.options; - populateDropdown(geos, 'dropdownGeoOptions', 'p0TargetGeo'); + populateDropdown(productResponse, 'dropdownProductOptions', 'productOffering'); } // Function to attach event listeners @@ -173,12 +167,10 @@ function attachEventListeners() { if (resetFiltersBtn) { resetFiltersBtn.addEventListener('click', resetFiltersClickHandler); } - - // Add event listener for clicks outside of dropdowns - document.addEventListener('click', handleClickOutside); } -function populateDropdown(options, dropdownId, type) { +function populateDropdown(response, dropdownId, type) { + const options = response.data?.jsonByPath ? response.data.jsonByPath.item.json.options : response; let dropdownContent = document.getElementById(dropdownId); dropdownContent.innerHTML = ''; options.forEach((option, index) => { @@ -189,13 +181,18 @@ function populateDropdown(options, dropdownId, type) { anchor.dataset.type = type; anchor.className = "dropoption"; anchor.textContent = option.text; + anchor.addEventListener('click', dropOptionClickHandler); dropdownContent.appendChild(anchor); }); + // add event listener to button + const button = dropdownContent.parentElement.querySelector(".dropdown-button"); + button.addEventListener('click', dropdownButtonClickHandler); } // Function to filter products based on selected business line function filterProductsByBusinessLine(businessLine) { - const filteredProducts = allProducts.filter(product => + const products = productList.data.jsonByPath.item.json.options; + const filteredProducts = products.filter(product => product['business-line'].includes(businessLine) ); populateDropdown(filteredProducts, 'dropdownProductOptions', 'productOffering'); @@ -324,7 +321,7 @@ function resetAllFilters() { function resetProductsDropDown(){ // Populate all products into Products dropdown - populateDropdown(allProducts, 'dropdownProductOptions', 'productOffering'); + populateDropdown(productList, 'dropdownProductOptions', 'productOffering'); // Reset product offering filters removeSelectedProductOfferingFilters(); attachEventListeners(); diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css index 479d9922..1942d063 100644 --- a/blocks/gmo-program-list/gmo-program-list.css +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -26,9 +26,20 @@ body { display: flex; font-weight: bold; margin-bottom: 20px; - + position: sticky; padding-top: 5px; } +.list-items { + display: flex; + flex-direction: column; + overflow-y: scroll; + height: 65vh; + -ms-overflow-style: none; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } +} .column-header-wrapper { display: flex; } @@ -48,10 +59,6 @@ body { height: 14px; width: 14px; } -.list-items { - display: flex; - flex-direction: column; -} .campaign-row { display: flex; font-size: 14px; diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 71806d5f..b86c0396 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -150,6 +150,10 @@ async function buildCampaignList(campaigns, numPerPage) { for (const campaign of campaigns) { const index = campaigns.indexOf(campaign); const campaignRow = document.createElement('div'); + const programName = campaign.node.programName; + const campaignName = campaign.node.campaignName; + const programRef = campaign.node.programReferenceNumber; + campaignRow.classList.add('campaign-row'); if ((index + 1) > numPerPage) campaignRow.classList.add('hidden'); @@ -163,35 +167,27 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignIcon = document.createElement('div'); campaignIcon.classList.add('campaign-icon'); - campaignIcon.dataset.programname = campaign.node.programName; - campaignIcon.dataset.campaignname = campaign.node.campaignName; - //Add Icon Image - const iconImage = document.createElement('img'); - try { - const imageObject = await searchAsset(campaign.node.programName, campaign.node.campaignName); - iconImage.src = imageObject.imageUrl; - iconImage.alt = imageObject.imageAltText; - } catch (error) { - } - // Append the image to the campaignIcon div - campaignIcon.appendChild(iconImage); + campaignIcon.dataset.programname = programName; + campaignIcon.dataset.campaignname = campaignName; + campaignIcon.dataset.reference = programRef; + addThumbnail(campaignIcon, programName, campaignName); campaignIconLink.appendChild(campaignIcon); - const campaignName = document.createElement('div'); - campaignName.classList.add('campaign-name-wrapper', 'vertical-center'); + const campaignNameWrapper = document.createElement('div'); + campaignNameWrapper.classList.add('campaign-name-wrapper', 'vertical-center'); - campaignName.innerHTML = ` + campaignNameWrapper.innerHTML = `
- ${checkBlankString(campaign.node.programName)} + ${checkBlankString(programName)} Program Name
- ${checkBlankString(campaign.node.campaignName,'Marketing Moment Not Available')} + ${checkBlankString(campaignName,'Marketing Moment Not Available')} Marketing Moment
`; campaignInfoWrapper.appendChild(campaignIconLink); - campaignInfoWrapper.appendChild(campaignName); + campaignInfoWrapper.appendChild(campaignNameWrapper); const campaignOverviewWrapper = document.createElement('div'); campaignOverviewWrapper.classList.add('column-2', 'campaign-description-wrapper', 'vertical-center'); @@ -203,7 +199,7 @@ async function buildCampaignList(campaigns, numPerPage) { campaignOverviewWrapper.appendChild(campaignOverview); const campaignLaunch = document.createElement('div'); - campaignLaunch.textContent = checkBlankString(campaign.node.launchDate); + campaignLaunch.textContent = dateFormat(campaign.node.launchDate); campaignLaunch.classList.add('column-3', 'campaign-launch-date', 'vertical-center'); campaignLaunch.dataset.property = 'launch'; @@ -238,6 +234,17 @@ function buildStatus(statusWrapper, campaign) { return statusWrapper; } +async function addThumbnail(parentElement, programName, campaignName) { + searchAsset(programName, campaignName).then((response) => { + if (response && (Object.hasOwn(response, 'imageUrl') && Object.hasOwn(response, 'imageAltText'))) { + const iconImage = document.createElement('img'); + iconImage.src = response?.imageUrl; + iconImage.alt = response?.imageAltText; + parentElement.appendChild(iconImage); + } + }) +} + async function buildProduct(product) { const productParent = document.createElement('div'); const productMapping = await getProductMapping(product); @@ -470,3 +477,8 @@ function sortColumn(dir, property) { container.appendChild(row); }); } + +function dateFormat(dateString) { + const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available'; + return formattedDate; +} \ No newline at end of file diff --git a/scripts/graphql.js b/scripts/graphql.js index 72f6ceaa..9ed80bce 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -129,36 +129,6 @@ export async function graphqlCampaignByName(campaignName) { }); } -export async function graphqlFilterOnMarketingInitiative(marketingInitiative) { - - const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; - const projectId = 'gmo'; - const queryName = 'filter-on-marketing-initiative'; - const encodedMarketingInitiative = encodeURIComponent(marketingInitiative); - const encodedSemiColon = encodeURIComponent(';'); - //persisted query URLs have to be encoded together with the first semicolon - const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}marketingInitiative=${encodedMarketingInitiative}`; - const jwtToken = await getBearerToken(); - - // Return the fetch promise chain so that it can be awaited outside - return fetch(graphqlEndpoint, { - method: 'GET', - headers: { - Authorization: jwtToken, - }, - }).then(response => { - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - return response.json(); - }).then(data => { - return data; // Make sure to return the data so that the promise resolves with it - }).catch(error => { - console.error('Error fetching data: ', error); - throw error; // Rethrow or handle error as appropriate - }); -} - async function getGraphqlEndpoint() { const result = await getAdminConfig(); return result.aemGraphqlEndpoint; From 476410161909dc6d1f332aca2f8e61741a40e230 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 5 Jun 2024 13:30:37 -0400 Subject: [PATCH 09/95] add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log --- .../gmo-program-details.js | 6 +++--- blocks/gmo-program-list/gmo-program-list.js | 21 +++++++++++++------ 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 5347cb4a..55522099 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -7,7 +7,7 @@ import { searchAsset } from '../../scripts/assets.js'; let blockConfig; const programName = getQueryVariable('programName'); -const programRefNumber = getQueryVariable('programReferenceNumber'); +const programID = getQueryVariable('programID'); const deliverableMappings = resolveMappings("getDeliverableTypeMapping"); const platformMappings = resolveMappings("getPlatformsMapping"); @@ -15,9 +15,9 @@ export default async function decorate(block) { const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); - const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programReferenceNumber=${encodeURIComponent(programRefNumber)}`; + const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const programData = await executeQuery(programQueryString); - const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}`; + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const deliverables = await executeQuery(deliverableQueryString); const p0TargetMarketArea = programData.data.programList.items[0].p0TargetMarketArea; diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index b86c0396..76265c26 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -152,7 +152,7 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignRow = document.createElement('div'); const programName = campaign.node.programName; const campaignName = campaign.node.campaignName; - const programRef = campaign.node.programReferenceNumber; + const programID = campaign.node.programID ? campaign.node.programID : ""; campaignRow.classList.add('campaign-row'); if ((index + 1) > numPerPage) campaignRow.classList.add('hidden'); @@ -161,15 +161,15 @@ async function buildCampaignList(campaigns, numPerPage) { campaignInfoWrapper.classList.add('campaign-info-wrapper', 'column-1'); const campaignIconLink = document.createElement('a'); - let campaignDetailsLink = host + `/${detailsPage}?programName=${campaign.node.programName}&`; - campaignDetailsLink += `programReferenceNumber=${campaign.node.programReferenceNumber ? campaign.node.programReferenceNumber : ""}` + let campaignDetailsLink = host + `/${detailsPage}?programName=${programName}&`; + campaignDetailsLink += `programID=${programID}` campaignIconLink.href = campaignDetailsLink; const campaignIcon = document.createElement('div'); campaignIcon.classList.add('campaign-icon'); campaignIcon.dataset.programname = programName; campaignIcon.dataset.campaignname = campaignName; - campaignIcon.dataset.reference = programRef; + campaignIcon.dataset.programid = programID; addThumbnail(campaignIcon, programName, campaignName); campaignIconLink.appendChild(campaignIcon); const campaignNameWrapper = document.createElement('div'); @@ -225,9 +225,18 @@ function buildStatus(statusWrapper, campaign) { const statusStr = checkBlankString(campaign.node.status); const statusArray = statusMapping.data.jsonByPath.item.json.options; const statusMatch = statusArray.filter(item => item.value === statusStr); - const statusText = statusMatch.length > 0 ? statusMatch[0].text : statusStr; + + let statusText, statusColor; + if (statusMatch.length > 0) { + statusText = statusMatch[0].text; + statusColor = statusMatch[0]["color-code"]; + } else { + statusText = statusStr; + statusColor = "BABABA"; + } + campaignStatus.textContent = statusText; - campaignStatus.style.backgroundColor = "#" + statusMatch[0]["color-code"]; + campaignStatus.style.backgroundColor = "#" + statusColor; campaignStatus.classList.add('status'); campaignStatus.dataset.property = 'status'; statusWrapper.appendChild(campaignStatus); From fcc7312307938f8a7f8abc059d49279af3b6279f Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 5 Jun 2024 17:45:32 -0400 Subject: [PATCH 10/95] Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages --- blocks/gmo-program-details/gmo-program-details.js | 13 ++++++++----- blocks/gmo-program-list/gmo-program-list.js | 7 +------ scripts/graphql.js | 4 ++-- scripts/shared-program.js | 5 +++++ 4 files changed, 16 insertions(+), 13 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 55522099..ff05b20f 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -1,7 +1,7 @@ import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; import { getQueryVariable } from '../../scripts/shared.js'; import { executeQuery } from '../../scripts/graphql.js'; -import { resolveMappings, filterArray, getProductMapping, checkBlankString } from '../../scripts/shared-program.js'; +import { resolveMappings, filterArray, getProductMapping, checkBlankString, dateFormat } from '../../scripts/shared-program.js'; import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; @@ -376,7 +376,10 @@ async function buildTable(jsonResponse) { const deliverableList = jsonResponse.data.deliverableList.items; const programKpi = jsonResponse.data.programList?.items.primaryKpi; const rows = document.createElement('div'); - const uniqueCategories = getUniqueItems(deliverableList, 'deliverableType'); + // we want the 'null' deliverableType to be part of this set for filtering + const uniqueCatSet = new Set(); + deliverableList.forEach(object => { uniqueCatSet.add(object['deliverableType']) }) + const uniqueCategories = Array.from(uniqueCatSet); let emptyCategory = false; uniqueCategories.forEach(async (category) => { // build header row @@ -466,8 +469,8 @@ async function buildTableRow(deliverableJson, kpi, createHidden) { const status = (deliverableJson.deliverableStatusUpdate == null) ? "Not Available" : deliverableJson.deliverableStatusUpdate + "%"; const statusPct = (deliverableJson.deliverableStatusUpdate == null) ? "0%" : deliverableJson.deliverableStatusUpdate + "%"; dataRow.innerHTML = ` -
${deliverableJson.deliverableName}
-
${typeLabel}
+
${checkBlankString(deliverableJson.deliverableName)}
+
${checkBlankString(typeLabel)}
Review Link @@ -487,7 +490,7 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
-
${checkBlankString(deliverableJson.taskCompletionDate)}
+
${dateFormat(deliverableJson.taskCompletionDate)}
${deliverableJson.previousTaskCompletionDate ? '
Revised from ' + deliverableJson.previousTaskCompletionDate + '
': ""}
${checkBlankString(deliverableJson.driver)}
diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 76265c26..4ec0a174 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -1,7 +1,7 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import { graphqlAllCampaignsFilter, graphqlCampaignCount, generateFilterJSON } from '../../scripts/graphql.js'; -import { getProductMapping, checkBlankString, statusMapping } from '../../scripts/shared-program.js' +import { getProductMapping, checkBlankString, statusMapping, dateFormat } from '../../scripts/shared-program.js' import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; @@ -485,9 +485,4 @@ function sortColumn(dir, property) { sortArray.forEach(({ row }, index) => { container.appendChild(row); }); -} - -function dateFormat(dateString) { - const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available'; - return formattedDate; } \ No newline at end of file diff --git a/scripts/graphql.js b/scripts/graphql.js index 9ed80bce..0d59b62f 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -31,7 +31,7 @@ export async function graphqlQueryNameList(queryNameList) { } export async function graphqlCampaignCount(filter = {}) { - const queryName = 'getCampaignNameFilter'; + const queryName = 'getTotalPrograms'; const encodedSemiColon = encodeURIComponent(';'); const encodedFilter = encodeURIComponent(JSON.stringify(filter)); const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}filter=${encodedFilter}`; @@ -103,7 +103,7 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { } export async function graphqlCampaignByName(campaignName) { - const queryName = 'getCampaignNames'; + const queryName = 'getCampaignNamesFilter'; const encodedCampaignName = encodeURIComponent(campaignName); const encodedSemiColon = encodeURIComponent(';'); //persisted query URLs have to be encoded together with the first semicolon diff --git a/scripts/shared-program.js b/scripts/shared-program.js index 39e8db93..e71afcf0 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -53,3 +53,8 @@ export function checkBlankString(string, notAvailableText = 'Not Available') { return string; } } + +export function dateFormat(dateString) { + const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available'; + return formattedDate; +} \ No newline at end of file From 92329625130b49fde73c6b031e3e8931e8fedf5a Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 5 Jun 2024 18:30:28 -0400 Subject: [PATCH 11/95] fix typo in graphql query name (#111) --- scripts/graphql.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/graphql.js b/scripts/graphql.js index 0d59b62f..fd20c366 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -103,7 +103,7 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { } export async function graphqlCampaignByName(campaignName) { - const queryName = 'getCampaignNamesFilter'; + const queryName = 'getCampaignNameFilter'; const encodedCampaignName = encodeURIComponent(campaignName); const encodedSemiColon = encodeURIComponent(';'); //persisted query URLs have to be encoded together with the first semicolon From 887a1e77afd349bc830bcf67cfac725e16a48b25 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Wed, 5 Jun 2024 17:46:14 -0500 Subject: [PATCH 12/95] ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. --- blocks/gmo-program-list/gmo-program-list.js | 105 ++++++++++---------- 1 file changed, 55 insertions(+), 50 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 4ec0a174..8a3c6f18 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -36,11 +36,10 @@ const headerConfig = [ const DEFAULT_ITEMS_PER_PAGE = 8; //Global variables used by helper functions let currentPageInfo = {}; -let cursorArray = []; let currentPage = 1; let currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; - let currentGraphqlFilter = {}; +let totalPages = 0; //Get Campaign Count for pagination let campaignCount = await graphqlCampaignCount(); let blockConfig; @@ -62,7 +61,6 @@ document.addEventListener('gmoCampaignListBlock', async function() { //Trigger loading the gmo-campaign-block //Reset page variables currentPageInfo = {}; - cursorArray = []; currentPage = 1; currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; @@ -75,26 +73,23 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, if (blockConfig == undefined) blockConfig = readBlockConfig(block); const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter); const campaigns = campaignPaginatedResponse.data.programPaginated.edges; + + //Set previous cursor to currentCursor + currentPageInfo.previousCursor = currentPageInfo.currentCursor; + currentPageInfo = campaignPaginatedResponse.data.programPaginated.pageInfo; //Current cursor used in previous page logic currentPageInfo.currentCursor = cursor; //Next Page if (currentPageInfo.hasNextPage){ - currentPageInfo.nextCursor = campaigns[campaigns.length - 1].cursor; - } - - if (!previousPage && !nextPage) - { - cursorArray = campaigns.map(item => item.cursor); + currentPageInfo.nextCursor = currentPageInfo.endCursor === undefined ? campaigns[campaigns.length - 1].cursor : currentPageInfo.endCursor; } - else if (nextPage){ - campaigns.forEach(item => { - cursorArray.push(item.cursor); - }); - } currentPageInfo.itemCount = campaigns.length; + // Calculate total number of pages + totalPages = Math.ceil(campaignCount / currentNumberPerPage); + const listHeaders = buildListHeaders(headerConfig); const listItems = await buildCampaignList(campaigns, numPerPage); const listFooter = buildListFooter(campaignCount, numPerPage); @@ -107,20 +102,21 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, listContainer.appendChild(listHeaders); listContainer.appendChild(listItems); listContainer.appendChild(listFooter); - //Show Hide Previous and Next Page buttons + // Show Hide Previous and Next Page buttons const footerNext = document.querySelector('.footer-pagination-button.next'); const footerPrev = document.querySelector('.footer-pagination-button.prev'); - if (currentPageInfo.hasPreviousPage){ - footerPrev.classList.add('active'); + if (currentPage > 1) { + footerPrev.classList.add('active'); } else { - footerPrev.classList.remove('active'); + footerPrev.classList.remove('active'); } - if (currentPageInfo.hasNextPage){ - footerNext.classList.add('active'); + if (currentPage < totalPages) { + footerNext.classList.add('active'); } else { - footerNext.classList.remove('active'); + footerNext.classList.remove('active'); } + decorateIcons(block); } @@ -315,6 +311,7 @@ function buildListHeaders(headerConfig) { function buildListFooter(rows, rowsPerPage) { const pages = Math.ceil(rows / rowsPerPage); + totalPages = pages; const footerWrapper = document.createElement('div'); footerWrapper.classList.add('list-footer', 'footer-wrapper'); footerWrapper.dataset.pages = pages; @@ -329,9 +326,13 @@ function buildListFooter(rows, rowsPerPage) { const footerPrev = document.createElement('div'); footerPrev.classList.add('footer-pagination-button', 'prev'); footerPrev.textContent = 'Prev'; + footerPrev.addEventListener('click', (event) => { + // Disable the button + footerPrev.classList.remove('active'); + footerPrev.classList.add('disabled'); prevPage(event.target); - }) + }); const footerPageBtnsWrapper = document.createElement('div'); footerPageBtnsWrapper.classList.add('footer-pages-wrapper'); @@ -340,9 +341,13 @@ function buildListFooter(rows, rowsPerPage) { //Show current page buildCurrentPageDivElement(currentPage, footerPageBtnsWrapper); - footerNext.addEventListener('click', (event) => { + footerNext.addEventListener('click', (event) => { + // Disable the button + footerNext.classList.remove('active'); + footerNext.classList.add('disabled'); nextPage(event.target); - }) + }); + footerNext.textContent = 'Next'; footerPagination.appendChild(footerPrev); footerPagination.appendChild(footerPageBtnsWrapper); @@ -411,35 +416,34 @@ function repaginate(dropdown) { } function nextPage(nextBtn) { - if (currentPageInfo.hasNextPage) { - //Calculate Next Page - currentPage++; - const block = document.querySelector('.gmo-program-list.block'); - decorate( block, currentNumberPerPage, currentPageInfo.nextCursor, false, true,currentGraphqlFilter); - if (!(nextBtn.classList.contains('active'))) { - return; - } - const prevBtn = document.querySelector('.footer-pagination-button.prev'); - prevBtn.classList.add('active'); + if (currentPage < totalPages) { + currentPage++; + const block = document.querySelector('.gmo-program-list.block'); + decorate(block, currentNumberPerPage, currentPageInfo.nextCursor, false, true, currentGraphqlFilter); + + const prevBtn = document.querySelector('.footer-pagination-button.prev'); + prevBtn.classList.add('active'); + + if (currentPage === totalPages) { + nextBtn.classList.remove('active'); + } else { + nextBtn.classList.add('active'); + } } } function prevPage(prevBtn) { - if (currentPageInfo.hasPreviousPage) { - currentPage--; - const block = document.querySelector('.gmo-program-list.block'); - const currentCursor = currentPageInfo.currentCursor; - //Calculate cursor for previous page - const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage; - decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter); - if (!(prevBtn.classList.contains('active'))) { - return; - } - const nextBtn = document.querySelector('.footer-pagination-button.next'); - const currentPageBtn = document.querySelector('#current-page'); - const currentPageValue = parseInt(currentPageBtn.dataset.pagenumber); - const targetPage = (currentPageValue - 1); - nextBtn.classList.add('active'); + if (currentPage > 1) { + currentPage--; + const block = document.querySelector('.gmo-program-list.block'); + decorate(block, currentNumberPerPage, currentPage.previousCursor, true, false, currentGraphqlFilter); + const nextBtn = document.querySelector('.footer-pagination-button.next'); + nextBtn.classList.add('active'); + if (currentPage === 1) { + prevBtn.classList.remove('active'); + } else { + prevBtn.classList.add('active'); + } } } @@ -485,4 +489,5 @@ function sortColumn(dir, property) { sortArray.forEach(({ row }, index) => { container.appendChild(row); }); -} \ No newline at end of file +} + From b272d9ca6399dcf3a59704dee6a068bb9c23b753 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 6 Jun 2024 10:19:25 -0500 Subject: [PATCH 13/95] Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) --- blocks/gmo-program-list/gmo-program-list.js | 23 ++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 8a3c6f18..4899cfe8 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -36,6 +36,7 @@ const headerConfig = [ const DEFAULT_ITEMS_PER_PAGE = 8; //Global variables used by helper functions let currentPageInfo = {}; +let cursorArray = []; let currentPage = 1; let currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; let currentGraphqlFilter = {}; @@ -61,6 +62,7 @@ document.addEventListener('gmoCampaignListBlock', async function() { //Trigger loading the gmo-campaign-block //Reset page variables currentPageInfo = {}; + cursorArray = []; currentPage = 1; currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; @@ -73,10 +75,6 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, if (blockConfig == undefined) blockConfig = readBlockConfig(block); const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter); const campaigns = campaignPaginatedResponse.data.programPaginated.edges; - - //Set previous cursor to currentCursor - currentPageInfo.previousCursor = currentPageInfo.currentCursor; - currentPageInfo = campaignPaginatedResponse.data.programPaginated.pageInfo; //Current cursor used in previous page logic currentPageInfo.currentCursor = cursor; @@ -85,6 +83,17 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, currentPageInfo.nextCursor = currentPageInfo.endCursor === undefined ? campaigns[campaigns.length - 1].cursor : currentPageInfo.endCursor; } + if (!previousPage && !nextPage) + { + cursorArray = campaigns.map(item => item.cursor); + } + else if (nextPage){ + + campaigns.forEach(item => { + cursorArray.push(item.cursor); + }); + } + currentPageInfo.itemCount = campaigns.length; // Calculate total number of pages @@ -436,7 +445,11 @@ function prevPage(prevBtn) { if (currentPage > 1) { currentPage--; const block = document.querySelector('.gmo-program-list.block'); - decorate(block, currentNumberPerPage, currentPage.previousCursor, true, false, currentGraphqlFilter); + + const currentCursor = currentPageInfo.currentCursor; + //Calculate cursor for previous page + const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage; + decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter); const nextBtn = document.querySelector('.footer-pagination-button.next'); nextBtn.classList.add('active'); if (currentPage === 1) { From d12919814aea5e911db2640bc8d56a60dac7bbf1 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Fri, 7 Jun 2024 12:24:48 -0400 Subject: [PATCH 14/95] Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made --- .../gmo-program-details.css | 7 +++++-- .../gmo-program-details/gmo-program-details.js | 18 ++++++++++++++++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index c653aafd..e39c5510 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -1,3 +1,6 @@ +:root { + border-bottom: none; +} body { background-color: rgb(247, 246, 246); } @@ -43,7 +46,6 @@ body { border-radius: 6px; box-shadow: 0px 3px 6px #0000000D; margin-top: 20px; - min-height: 800px; padding: 20px; } } @@ -319,7 +321,8 @@ body { } } .table-content { - height: 45vh; + max-height: 45vh; + min-height: 7vh; overflow-y: auto; &::-webkit-scrollbar { display: none; diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index ff05b20f..262d20e6 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -375,13 +375,14 @@ function formatDate(dateString) { async function buildTable(jsonResponse) { const deliverableList = jsonResponse.data.deliverableList.items; const programKpi = jsonResponse.data.programList?.items.primaryKpi; - const rows = document.createElement('div'); + let rows = document.createElement('div'); // we want the 'null' deliverableType to be part of this set for filtering const uniqueCatSet = new Set(); deliverableList.forEach(object => { uniqueCatSet.add(object['deliverableType']) }) const uniqueCategories = Array.from(uniqueCatSet); + const sortedCategories = sortDeliverableTypes(uniqueCategories); let emptyCategory = false; - uniqueCategories.forEach(async (category) => { + sortedCategories.forEach(async (category) => { // build header row let headerRow; const matchingCampaigns = deliverableList.filter(deliverable => deliverable.deliverableType === category); @@ -425,6 +426,19 @@ function dateSort(parent) { }) } +function sortDeliverableTypes(arr) { + return arr.sort((a, b) => { + // If a is null and b is not null, a should come after b + if (a === null && b !== null) return 1; + // If b is null and a is not null, b should come after a + if (a !== null && b === null) return -1; + // If both a and b are null, they are equal in terms of sorting + if (a === null && b === null) return 0; + // If neither a nor b are null, sort them alphabetically + return a.localeCompare(b); + }); +} + async function lookupType(rawText, mappingType) { const mappings = (mappingType === 'deliverable-type') ? await deliverableMappings : await platformMappings; const typeMatch = mappings.filter(item => item.value === rawText); From ba077db29db46db7b7c97208a78a693778c2b774 Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Tue, 11 Jun 2024 08:58:33 -0700 Subject: [PATCH 15/95] DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) --- blocks/gmo-landing-page/gmo-landing-page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/gmo-landing-page/gmo-landing-page.js b/blocks/gmo-landing-page/gmo-landing-page.js index b6da5a47..d2060aec 100644 --- a/blocks/gmo-landing-page/gmo-landing-page.js +++ b/blocks/gmo-landing-page/gmo-landing-page.js @@ -44,7 +44,7 @@ export default async function decorate(block) { const host = location.origin; const signInMsg = getSignInMsg(block); const config = readBlockConfig(block); - const redirect = host + config?.mainpage; + const redirect = config?.redirect ?? (host + config?.mainpage); block.innerHTML=`
From ae27a9c7b46c30d9e3d5c5ee0eb8a2ca8dd11a10 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Tue, 11 Jun 2024 16:26:06 -0500 Subject: [PATCH 16/95] Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) --- scripts/polaris.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/scripts/polaris.js b/scripts/polaris.js index 1b081b40..d94f6a20 100644 --- a/scripts/polaris.js +++ b/scripts/polaris.js @@ -101,13 +101,10 @@ export async function authorizeURL(url) { const response = await fetch(url, options); + if (!response.ok) { - // Handle specific HTTP errors - if (response.status === 404) { - throw new Error('Not Found (404)'); - } else { - throw new Error(`HTTP error! Status: ${response.status}`); - } + // Return the full URL to the asset icon if the response is not OK, as the asset was not found + return new URL('/icons/asset.svg', window.location.origin).href; } const imageBlob = await response.blob(); From 525d50a2a72fb678652a3e86778230f2a54db024 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 12 Jun 2024 11:38:58 -0400 Subject: [PATCH 17/95] Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import --- .../gmo-program-details.js | 9 ++--- .../gmo-program-header/gmo-program-header.js | 11 +++--- blocks/gmo-program-list/gmo-program-list.js | 3 +- scripts/graphql.js | 27 +------------- scripts/shared-program.js | 37 +++++++++++-------- scripts/site-config.js | 15 ++++++++ 6 files changed, 47 insertions(+), 55 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 262d20e6..679fc029 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -1,15 +1,15 @@ import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; import { getQueryVariable } from '../../scripts/shared.js'; import { executeQuery } from '../../scripts/graphql.js'; -import { resolveMappings, filterArray, getProductMapping, checkBlankString, dateFormat } from '../../scripts/shared-program.js'; +import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray } from '../../scripts/shared-program.js'; import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; let blockConfig; const programName = getQueryVariable('programName'); const programID = getQueryVariable('programID'); -const deliverableMappings = resolveMappings("getDeliverableTypeMapping"); -const platformMappings = resolveMappings("getPlatformsMapping"); +const deliverableMappings = getMappingArray('deliverableType'); +const platformMappings = getMappingArray('platforms'); export default async function decorate(block) { @@ -333,8 +333,7 @@ function buildArtifactLinks(program) { async function buildStatus(status) { const statusDiv = document.createElement('div'); statusDiv.classList.add('campaign-status'); - const statusArray = await resolveMappings("getStatusList"); - const statusMatch = filterArray(statusArray, 'value', status); + const statusMatch = filterArray(statusMapping, 'value', status); const statusText = statusMatch ? statusMatch[0].text : status; const statusHex = statusMatch[0]["color-code"]; statusDiv.textContent = statusText; diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index d7a9e46d..ab99e4f3 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -1,6 +1,6 @@ import { decorateIcons } from '../../scripts/lib-franklin.js'; -import { graphqlQueryNameList, graphqlCampaignByName } from '../../scripts/graphql.js'; -import { statusMapping, productList } from '../../scripts/shared-program.js'; +import { graphqlCampaignByName } from '../../scripts/graphql.js'; +import { statusMapping, productList, getMappingArray } from '../../scripts/shared-program.js'; export default async function decorate(block) { block.innerHTML = ` @@ -132,12 +132,12 @@ export default async function decorate(block) { async function initializeDropdowns() { // Business Line List - graphqlQueryNameList('getBusinessLine').then((response) => { + getMappingArray('businessLine').then((response) => { populateDropdown(response, 'dropdownBusinessOptions', 'businessLine'); }); // Geo List - graphqlQueryNameList('getGeoList').then((response) => { + getMappingArray('geoList').then((response) => { populateDropdown(response, 'dropdownGeoOptions', 'p0TargetGeo'); }); @@ -191,8 +191,7 @@ function populateDropdown(response, dropdownId, type) { // Function to filter products based on selected business line function filterProductsByBusinessLine(businessLine) { - const products = productList.data.jsonByPath.item.json.options; - const filteredProducts = products.filter(product => + const filteredProducts = productList.filter(product => product['business-line'].includes(businessLine) ); populateDropdown(filteredProducts, 'dropdownProductOptions', 'productOffering'); diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 4899cfe8..04a15a3a 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -228,8 +228,7 @@ async function buildCampaignList(campaigns, numPerPage) { function buildStatus(statusWrapper, campaign) { const campaignStatus = document.createElement('div'); const statusStr = checkBlankString(campaign.node.status); - const statusArray = statusMapping.data.jsonByPath.item.json.options; - const statusMatch = statusArray.filter(item => item.value === statusStr); + const statusMatch = statusMapping.filter(item => item.value === statusStr); let statusText, statusColor; if (statusMatch.length > 0) { diff --git a/scripts/graphql.js b/scripts/graphql.js index fd20c366..c4d733f4 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -5,31 +5,6 @@ import { logError } from './scripts.js'; const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; const projectId = 'gmo'; -export async function graphqlQueryNameList(queryNameList) { - const queryName = queryNameList; - //persisted query URLs have to be encoded together with the first semicolon - const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}`; - const jwtToken = await getBearerToken(); - - // Return the fetch promise chain so that it can be awaited outside - return fetch(graphqlEndpoint, { - method: 'GET', - headers: { - Authorization: jwtToken, - }, - }).then(response => { - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - return response.json(); - }).then(data => { - return data; // Make sure to return the data so that the promise resolves with it - }).catch(error => { - console.error('Error fetching data: ', error); - throw error; // Rethrow or handle error as appropriate - }); -} - export async function graphqlCampaignCount(filter = {}) { const queryName = 'getTotalPrograms'; const encodedSemiColon = encodeURIComponent(';'); @@ -213,4 +188,4 @@ export async function executeQuery(queryString) { console.error('Error fetching data: ', error); throw error; // Rethrow or handle error as appropriate }); -}; +}; \ No newline at end of file diff --git a/scripts/shared-program.js b/scripts/shared-program.js index e71afcf0..c76dda30 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -1,18 +1,10 @@ -import { graphqlQueryNameList } from "./graphql.js"; -import { getProductIconMapping, getBaseConfigPath } from './site-config.js'; +import { executeQuery } from "./graphql.js"; +import { getProductIconMapping, getBaseConfigPath, getQueryPaths } from './site-config.js'; let iconMapping; -export let statusMapping = await graphqlQueryNameList('getStatusList'); -export let productList = await graphqlQueryNameList('getProductList'); - -/* -* Executes graphql query for 'friendly' labels and returns array of the results -*/ -export async function resolveMappings(mappingType) { - const response = await graphqlQueryNameList(mappingType); - const mappingArray = response.data.jsonByPath.item.json.options; - return mappingArray; -} +const cfMapping = getQueryPaths(); +export let statusMapping = await getMappingArray('status'); +export let productList = await getMappingArray('products'); /** * Filter provided array based on provided key/value pair @@ -32,9 +24,8 @@ export async function getProductMapping(product) { } const icon = iconMatch ? configPath + iconMatch[0]['Icon-path'] : defaultIcon; - if (productList == undefined) productList = await graphqlQueryNameList('getProductList'); - const productsArray = productList.data.jsonByPath.item.json.options; - const productsMatch = filterArray(productsArray, 'value', product); + if (productList == undefined) productList = await getMappingArray('products'); + const productsMatch = filterArray(productList, 'value', product); const productsText = productsMatch ? productsMatch[0].text : product; return { @@ -57,4 +48,18 @@ export function checkBlankString(string, notAvailableText = 'Not Available') { export function dateFormat(dateString) { const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available'; return formattedDate; +} + +function getCFPath(cfArray, type) { + const cfMatch = cfArray.filter(item => item['type'] === type); + const cfPath = cfMatch.length > 0 ? cfMatch[0].path : null; + return cfPath; +} + +export async function getMappingArray(type) { + const mappingCf = getCFPath(await cfMapping, type); + const mappings = executeQuery(`getMappings${encodeURIComponent(';')}path=${encodeURIComponent(mappingCf)}`).then((response) => { + return response.data.jsonByPath.item.json.options; + }) + return mappings; } \ No newline at end of file diff --git a/scripts/site-config.js b/scripts/site-config.js index 6c9694ff..e4c86b94 100644 --- a/scripts/site-config.js +++ b/scripts/site-config.js @@ -379,4 +379,19 @@ export async function getProductIconMapping() { console.log("Unable to retrieve site-config.json"); } return iconArray; +} + +/** + * @returns {Array} with mapping-type and the path to its content fragment. + */ +export async function getQueryPaths() { + let mapping = []; + const response = await getConfig('site-config.json'); + for (const entry of response['query-fragments'].data || []) { + mapping.push({ + type: entry['mapping-Type'], + path: entry['path'] + }); + } + return mapping; } \ No newline at end of file From 69d6ec3401a2bd751f1b2e8a766bd6761f0c1d74 Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Wed, 12 Jun 2024 10:27:06 -0700 Subject: [PATCH 18/95] Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard --- scripts/security.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/scripts/security.js b/scripts/security.js index edbe7458..c74c8023 100644 --- a/scripts/security.js +++ b/scripts/security.js @@ -71,15 +71,22 @@ export async function getUserProfile() { async function getCCCollabProfile() { const bearerToken = await getBearerToken(); const url = await getCcCollabUrl(); - return await fetchCached( - `https://${url}`, - { - method: 'GET', - headers: { - Authorization: bearerToken, + + //If this fails, we want to return something. fetchCached will halt. + try{ + return await fetchCached( + `https://${url}`, + { + method: 'GET', + headers: { + Authorization: bearerToken, + }, }, - }, - ); + ); + } catch (error) { + // fetchCached will log the error if it fails + return null; + } } export async function getAvatarUrl() { From 1ea6d9bb6083ecd6ba12571cd03ca565d322223d Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 12 Jun 2024 14:09:38 -0400 Subject: [PATCH 19/95] add checks for null 'review link' and 'final asset' (#122) --- blocks/gmo-program-details/gmo-program-details.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 679fc029..cf717066 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -486,9 +486,10 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
${checkBlankString(typeLabel)}
- Review Link + ${deliverableJson.reviewLink ? 'Review Link ': "Not Available"}
+ ${deliverableJson.linkedFolderLink ? 'Final Asset ': "Not Available"}
@@ -508,14 +509,6 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
${checkBlankString(deliverableJson.driver)}
`; - if (!(deliverableJson.linkedFolderLink == null)) { - const finalAssetLink = document.createElement('a'); - finalAssetLink.href = deliverableJson.linkedFolderLink; - finalAssetLink.classList.add('campaign-link'); - finalAssetLink.target = '_blank'; - finalAssetLink.textContent = "Final Asset"; - dataRow.querySelector('.column5').appendChild(finalAssetLink); - } createPlatformString(deliverableJson.platforms, dataRow); return dataRow; } From 6c551774f67785fdb267765fdfc70a079f461e31 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 12 Jun 2024 16:53:26 -0400 Subject: [PATCH 20/95] Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name --- .../gmo-program-details.css | 3 + .../gmo-program-details.js | 108 +++++++++++++----- 2 files changed, 81 insertions(+), 30 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index e39c5510..fb2c1b9f 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -47,6 +47,9 @@ body { box-shadow: 0px 3px 6px #0000000D; margin-top: 20px; padding: 20px; + & > .no-data-msg { + margin-top: 20px; + } } } diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index cf717066..ededa381 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -1,63 +1,64 @@ import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; -import { getQueryVariable } from '../../scripts/shared.js'; import { executeQuery } from '../../scripts/graphql.js'; import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray } from '../../scripts/shared-program.js'; import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; let blockConfig; -const programName = getQueryVariable('programName'); -const programID = getQueryVariable('programID'); +const queryVars = extractQueryVars(); +const programName = queryVars.programName; +const programID = queryVars.programID; const deliverableMappings = getMappingArray('deliverableType'); const platformMappings = getMappingArray('platforms'); export default async function decorate(block) { - const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const programData = await executeQuery(programQueryString); + const program = programData.data.programList.items[0]; + blockConfig = readBlockConfig(block); + const header = buildHeader(program, queryVars).outerHTML; + if (!program) { + block.innerHTML = ` +
+ + Back +
+
+ ${header} +
No data available.
+
+ ` + decorateIcons(block); + enableBackBtn(block, blockConfig); + return; + } + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const deliverables = await executeQuery(deliverableQueryString); - const p0TargetMarketArea = programData.data.programList.items[0].p0TargetMarketArea; - const p1TargetMarketArea = programData.data.programList.items[0].p1TargetMarketArea; + const p0TargetMarketArea = program.p0TargetMarketArea; + const p1TargetMarketArea = program.p1TargetMarketArea; // Extract unique deliverable types const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); // Extract unique platforms (flattened from arrays within each item) const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); - - const program = programData.data.programList.items[0]; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; - const date = formatDate(program.launchDate); const artifactLinks = buildArtifactLinks(program).outerHTML; - blockConfig = readBlockConfig(block); + block.innerHTML = `
Back
-
-
-
-
-
- ${program.programName} -
- ${program.campaignName ? '
' + program.campaignName + '
': ""} -
- - Launch date - ${date} -
-
-
+ ${header}
Overview
Deliverables
@@ -164,11 +165,7 @@ export default async function decorate(block) { block.querySelector('.tab-wrapper').addEventListener('click', (event) => { switchTab(event.target); }) - block.querySelector('.back-button').addEventListener('click', () => { - const host = location.origin + getBaseConfigPath(); - const listPage = blockConfig.listpage; - document.location.href = host + `/${listPage}`; - }) + enableBackBtn(block, blockConfig); block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { const readMore = event.target; @@ -187,6 +184,35 @@ export default async function decorate(block) { buildStatus(program.status); } +function enableBackBtn(block, blockConfig) { + block.querySelector('.back-button').addEventListener('click', () => { + const host = location.origin + getBaseConfigPath(); + const listPage = blockConfig.listpage; + document.location.href = host + `/${listPage}`; + }) +} + +function buildHeader(program, queryVars) { + const headerWrapper = document.createElement('div'); + headerWrapper.classList.add('details-header-wrapper'); + const date = program && program.launchDate ? `
` + + `Launch date${formatDate(program.launchDate)}
` : ""; + const programName = program ? program.programName : queryVars.programName; + const campaignName = program && program.campaignName ? '
' + program.campaignName + '
': ""; + headerWrapper.innerHTML = ` +
+
+
+
+ ${programName} +
+ ${campaignName} + ${date} +
+ ` + return headerWrapper; +} + /** * Extracts unique values from a specified property within an array of objects. * @@ -564,3 +590,25 @@ function attachListener(htmlElement) { }) }) } + +function extractQueryVars() { + const urlStr = window.location.href; + const pnRegex = /.*programName=(.*?)&programID=(.*)/; + const match = urlStr.match(pnRegex); + if (match && match[1] && match[2]) { + const pName = decodeURIComponent(match[1]); + let pID = decodeURIComponent(match[2]) + if (pID.endsWith('#')) { + pID = pID.slice(0, -1); + } + return { + programName: pName, + programID: pID + } + } else { + return { + programName: 'Program Name Not Available', + programID: 'Program ID Not Available' + } + } +} \ No newline at end of file From af3e26bef2d69d57fb8ea977216c2e110003f632 Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Wed, 12 Jun 2024 14:35:59 -0700 Subject: [PATCH 21/95] Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard --- contenthub/hydration/hydration-utils.js | 140 +++++++++++++++--------- 1 file changed, 86 insertions(+), 54 deletions(-) diff --git a/contenthub/hydration/hydration-utils.js b/contenthub/hydration/hydration-utils.js index d2c3912f..f0b128da 100644 --- a/contenthub/hydration/hydration-utils.js +++ b/contenthub/hydration/hydration-utils.js @@ -115,60 +115,92 @@ export function getMetadataSchema(facetOptions){ element: 'dropdown', multipleSelection: true, dropdownOptions: [ - { name: 'N/A', id: 'na' }, - { name: 'Acrobat Export PDF', id: 'acrobat-export-pdf' }, - { name: 'Acrobat PDF Pack', id: 'acrobat-pdf-pack' }, - { name: 'Acrobat Pro', id: 'acrobat-pro' }, - { name: 'Acrobat Reader', id: 'acrobat-reader' }, - { name: 'Acrobat Sign Mobile', id: 'acrobat-sign-mobile' }, - { name: 'Acrobat Sign', id: 'acrobat-sign' }, - { name: 'Acrobat standard', id: 'acrobat-standard' }, - { name: 'Adobe Color', id: 'adobe-color' }, - { name: 'Adobe Express', id: 'adobe-express' }, - { name: 'Adobe Fonts', id: 'adobe-fonts' }, - { name: 'Adobe Scan', id: 'adobe-scan' }, - { name: 'Aero', id: 'aero' }, - { name: 'After Effects', id: 'after-effects' }, - { name: 'Animate', id: 'animate' }, - { name: 'Audition', id: 'audition' }, - { name: 'Behance', id: 'behance' }, - { name: 'Bridge', id: 'bridge' }, - { name: 'Capture', id: 'capture' }, - { name: 'Character Animator', id: 'character-animator' }, - { name: 'Cloud Service', id: 'cloud-service' }, - { name: 'Content Server', id: 'content-server' }, - { name: 'Creative Cloud All Apps', id: 'creative-cloud-all-apps' }, - { name: 'Digital Editions', id: 'digital-editions' }, - { name: 'Dreamweaver', id: 'dreamweaver' }, - { name: 'Fill Sign', id: 'fill-sign' }, - { name: 'Firefly', id: 'firefly' }, - { name: 'Frame.io', id: 'frame-io' }, - { name: 'Fresco', id: 'fresco' }, - { name: 'Http Dynamic Streaming', id: 'http-dynamic-streaming' }, - { name: 'Illustrator', id: 'illustrator' }, - { name: 'InCopy', id: 'incopy' }, - { name: 'InDesign Server', id: 'indesign-server' }, - { name: 'InDesign', id: 'indesign' }, - { name: 'Lightroom Classic', id: 'lightroom-classic' }, - { name: 'Lightroom', id: 'lightroom' }, - { name: 'Media Encoder', id: 'media-encoder' }, - { name: 'Media Server 5 Extended', id: 'media-server-5-extended' }, - { name: 'Media Server 5 on Amazon Web Services', id: 'media-server-5-on-amazon-web-services' }, - { name: 'Media Server 5 Professional', id: 'media-server-5-professional' }, - { name: 'Media Server 5 Standard', id: 'media-server-5-standard' }, - { name: 'Mixamo', id: 'mixamo' }, - { name: 'Photoshop Express', id: 'photoshop-express' }, - { name: 'Photoshop', id: 'photoshop' }, - { name: 'Portfolio', id: 'portfolio' }, - { name: 'Premiere Elements', id: 'premiere-elements' }, - { name: 'Premiere Pro', id: 'premiere-pro' }, - { name: 'Premiere Rush', id: 'premiere-rush' }, - { name: 'Stock', id: 'stock' }, - { name: 'Substance 3D Designer', id: 'substance-3d-designer' }, - { name: 'Substance 3D Modeler', id: 'substance-3d-modeler' }, - { name: 'Substance 3D Painter', id: 'substance-3d-painter' }, - { name: 'Substance 3D Sampler', id: 'substance-3d-sampler' }, - { name: 'Substance 3D Stager', id: 'substance-3d-stager' }, + { name: 'N/A', id: 'N/A' }, + { name: 'Acrobat', id: 'Acrobat' }, + { name: 'Acrobat Export PDF', id: 'Acrobat Export PDF' }, + { name: 'Acrobat PDF Pack', id: 'Acrobat PDF Pack' }, + { name: 'Acrobat Pro', id: 'Acrobat Pro' }, + { name: 'Acrobat Reader', id: 'Acrobat Reader' }, + { name: 'Acrobat Sign', id: 'Acrobat Sign' }, + { name: 'Acrobat Sign (Mobile)', id: 'Acrobat Sign (Mobile)' }, + { name: 'Acrobat Standard', id: 'Acrobat Standard' }, + { name: 'Adobe Color', id: 'Adobe Color' }, + { name: 'Adobe Express', id: 'Adobe Express' }, + { name: 'Adobe Fonts', id: 'Adobe Fonts' }, + { name: 'Adobe Fresco', id: 'Adobe Fresco' }, + { name: 'Adobe Scan', id: 'Adobe Scan' }, + { name: 'Adobe Stock', id: 'Adobe Stock' }, + { name: 'Advertising', id: 'Advertising' }, + { name: 'AEC', id: 'AEC' }, + { name: 'AEM Assets', id: 'AEM Assets' }, + { name: 'AEM Forms', id: 'AEM Forms' }, + { name: 'AEM Other (retired)', id: 'AEM Other (retired)' }, + { name: 'AEM Sites', id: 'AEM Sites' }, + { name: 'AEP', id: 'AEP' }, + { name: 'Aero', id: 'Aero' }, + { name: 'After Effects', id: 'After Effects' }, + { name: 'Analytics', id: 'Analytics' }, + { name: 'Animate', id: 'Animate' }, + { name: 'Audience Manager', id: 'Audience Manager' }, + { name: 'Audition', id: 'Audition' }, + { name: 'Behance', id: 'Behance' }, + { name: 'Bizible', id: 'Bizible' }, + { name: 'Bridge', id: 'Bridge' }, + { name: 'Campaign', id: 'Campaign' }, + { name: 'Capture', id: 'Capture' }, + { name: 'Character Animator', id: 'Character Animator' }, + { name: 'Cloud Service', id: 'Cloud Service' }, + { name: 'Commerce', id: 'Commerce' }, + { name: 'Connect', id: 'Connect' }, + { name: 'Content Server', id: 'Content Server' }, + { name: 'Creative', id: 'Creative' }, + { name: 'Creative Cloud All Apps', id: 'Creative Cloud All Apps' }, + { name: 'Digital Editions', id: 'Digital Editions' }, + { name: 'Dreamweaver', id: 'Dreamweaver' }, + { name: 'DX General', id: 'DX General' }, + { name: 'DX Video', id: 'DX Video' }, + { name: 'Fill & Sign', id: 'Fill & Sign' }, + { name: 'Firefly', id: 'Firefly' }, + { name: 'Frame.io', id: 'Frame.io' }, + { name: 'HTTP Dynamic Streaming', id: 'HTTP Dynamic Streaming' }, + { name: 'Illustrator', id: 'Illustrator' }, + { name: 'InCopy', id: 'InCopy' }, + { name: 'InDesign', id: 'InDesign' }, + { name: 'InDesign Server', id: 'InDesign Server' }, + { name: 'Journey Analytics', id: 'Journey Analytics' }, + { name: 'Journey Optimizer', id: 'Journey Optimizer' }, + { name: 'Lightroom', id: 'Lightroom' }, + { name: 'Lightroom Classic', id: 'Lightroom Classic' }, + { name: 'Magento OpenSource', id: 'Magento OpenSource' }, + { name: 'Marketo', id: 'Marketo' }, + { name: 'Media Encoder', id: 'Media Encoder' }, + { name: 'Media Server 5 Extended', id: 'Media Server 5 Extended' }, + { name: 'Media Server 5 on Amazon Web Services', id: 'Media Server 5 on Amazon Web Services' }, + { name: 'Media Server 5 Professional', id: 'Media Server 5 Professional' }, + { name: 'Media Server 5 Standard', id: 'Media Server 5 Standard' }, + { name: 'Mixamo', id: 'Mixamo' }, + { name: 'Multi-product', id: 'Multi-product' }, + { name: 'Photoshop', id: 'Photoshop' }, + { name: 'Photoshop Express', id: 'Photoshop Express' }, + { name: 'Portfolio', id: 'Portfolio' }, + { name: 'PPBU', id: 'PPBU' }, + { name: 'PPBU (Primetime)', id: 'PPBU (Primetime)' }, + { name: 'Premiere Elements', id: 'Premiere Elements' }, + { name: 'Premiere Pro', id: 'Premiere Pro' }, + { name: 'Premier Support', id: 'Premier Support' }, + { name: 'RT CDP', id: 'RT CDP' }, + { name: 'Sensei (retired)', id: 'Sensei (retired)' }, + { name: 'Services - Digital Performance (retired)', id: 'Services - Digital Performance (retired)' }, + { name: 'Services - Other Consulting Services (retired)', id: 'Services - Other Consulting Services (retired)' }, + { name: 'Sign', id: 'Sign' }, + { name: 'Stock', id: 'Stock' }, + { name: 'Substance 3D Designer', id: 'Substance 3D Designer' }, + { name: 'Substance 3D Modeler', id: 'Substance 3D Modeler' }, + { name: 'Substance 3D Painter', id: 'Substance 3D Painter' }, + { name: 'Substance 3D Sampler', id: 'Substance 3D Sampler' }, + { name: 'Substance 3D Stager', id: 'Substance 3D Stager' }, + { name: 'Target', id: 'Target' }, + { name: 'Workfront', id: 'Workfront' }, ], }, { From 780be9745b491e4397371c0a908249b111631978 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 13 Jun 2024 16:13:56 -0500 Subject: [PATCH 22/95] Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) --- blocks/gmo-program-header/gmo-program-header.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index ab99e4f3..295e046b 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -126,6 +126,8 @@ export default async function decorate(block) { }); initializeDropdowns(); + // Attach event listeners for the dropdowns and reset filters + attachEventListeners(); decorateIcons(block); document.addEventListener('click', handleClickOutside); } From f33f4aa2dfc7b3fb3eb9c28d65574424bdee0b20 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Fri, 14 Jun 2024 16:08:21 -0500 Subject: [PATCH 23/95] Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes --- .../gmo-program-details.css | 47 +++++++++++++++++-- 1 file changed, 42 insertions(+), 5 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index fb2c1b9f..20a3b139 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -1,9 +1,11 @@ :root { border-bottom: none; } + body { background-color: rgb(247, 246, 246); } + .back-button { margin-top: 20px; background-color: #FFFFFF; @@ -26,6 +28,7 @@ body { font-weight: bold; } } + .gmo-program-details.block { & .h1 { font: normal normal bold 18px/27px Adobe Clean; @@ -133,11 +136,13 @@ body { } } } + .tab.two-column { display: flex; flex-direction: row; justify-content: space-between; } + .overview-wrapper { display: flex; flex-direction: column; @@ -168,6 +173,7 @@ body { cursor: pointer; } } + .kpis-wrapper { margin-top: 30px; & ul { @@ -181,6 +187,7 @@ body { margin-top: 15px; } } + .use-cases-wrapper { margin-bottom: 30px; } @@ -218,6 +225,7 @@ body { flex-direction: column; margin-top: 20px; } + .links-wrapper { margin-top: 30px; & .links { @@ -231,6 +239,7 @@ body { color: #0D66D0; } } + .infocards-wrapper { margin-right: 40px; & .card { @@ -244,6 +253,7 @@ body { } } } + .card { & .card-heading { margin-top: 10px; @@ -259,6 +269,7 @@ body { font-size: 14px; } } + .milestone, .card-content { font: normal normal normal 14px/21px Adobe Clean; & .icon { @@ -271,6 +282,7 @@ body { margin-bottom: 5px; } } + .deliverables { & > .page-heading { display: flex; @@ -306,6 +318,7 @@ body { } } } + .table-wrapper { font: normal normal bold 14px/21px Adobe Clean; & > .table-header { @@ -323,6 +336,7 @@ body { top: 0; } } + .table-content { max-height: 45vh; min-height: 7vh; @@ -331,10 +345,12 @@ body { display: none; } } + .inactive { display: none !important; visibility: hidden; } + .row { height: 56px; &:not(:last-child) { @@ -343,10 +359,11 @@ body { &.datarow { display: flex; align-items: center; - height: 88px; + height: auto; /* Set to auto to accommodate varying heights */ font-weight: 200; & .property { - line-height: 88px; + line-height: normal; /* Adjust line-height to normal */ + padding: 10px 0; /* Add padding for better spacing */ } &:first-child, &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -359,7 +376,7 @@ body { & .date-wrapper { display: flex; flex-direction: column; - justify-content:center; + justify-content: center; & > .completion-date, .revised-date { line-height: 21px; } @@ -400,6 +417,7 @@ body { justify-content: center; } } + .subheader { &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -444,12 +462,13 @@ body { border-radius: 3px; } } - } + .header-row3:hover .date-tooltip { visibility: visible; opacity: 1; } + .date-tooltip { background-color: #D3D3D3; border-radius: 2px; @@ -462,32 +481,50 @@ body { font: normal normal normal 12px/17px Adobe Clean; margin-left: 100px; } + .column1 { margin-left: 45px; } + .column1 { width: 200px; } + .column3 { width: 140px; } -.column4, & .column5, & .column6 { + +.column4, .column5, .column6 { width: 110px; } + .column2 { width: 130px; } + .column7 { width: 170px; } + .column8 { width: 120px; } + .column9 { width: 150px; + word-wrap: break-word; + white-space: normal; + line-height: 1.2; } + .table-column { &:not(:last-child) { margin-right: 85px; } } + +@media (max-width: 1255px) { + .column9 { + width: 100px; + } +} From 61f4dd6ae1455a52e27001c42d6a398a50a60d81 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Tue, 18 Jun 2024 15:59:53 -0500 Subject: [PATCH 24/95] ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" --- .../gmo-program-details.css | 56 +++++++++++++++++++ .../gmo-program-details.js | 31 ++++++++-- blocks/gmo-program-list/gmo-program-list.css | 17 ++++-- blocks/gmo-program-list/gmo-program-list.js | 16 ++++++ 4 files changed, 108 insertions(+), 12 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 20a3b139..d38b1af2 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -102,6 +102,20 @@ body { } } +.details-header-wrapper .header-row3 { + display: flex; + align-items: center; +} + +.details-header-wrapper .header-row3 .icon-calendar { + margin-right: 10px; +} + +.details-header-wrapper .header-row3 .driver-text { + font: normal normal normal 14px/21px Adobe Clean; + margin-left: 55px; +} + .campaign-img { width: 80px; height: 80px; @@ -319,6 +333,47 @@ body { } } +.total-assets-tooltip { + position: relative; + display: inline-block; + cursor: pointer; +} + +.total-assets-tooltip .tooltiptext { + visibility: hidden; + white-space: nowrap; /* Ensure text appears on one line */ + background-color: #D3D3D3; /* Match the background color */ + color: black; /* Match the text color */ + text-align: left; /* Left-align the text */ + border-radius: 4px; + padding: 5px 10px; /* Adjust padding as needed */ + position: absolute; + z-index: 1; + top: 50%; /* Center vertically */ + left: 100%; /* Position to the right of the element */ + transform: translateY(-50%); /* Center vertically */ + margin-left: 10px; /* Adjust margin to match the screenshot */ + opacity: 0; + transition: opacity 0.3s; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */ +} + +.total-assets-tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 50%; /* Center the arrow vertically */ + left: -5px; /* Adjust to position the arrow */ + transform: translateY(-50%); /* Center vertically */ + border-width: 5px; + border-style: solid; + border-color: transparent #D3D3D3 transparent transparent; /* Arrow color matches tooltip background */ +} + +.total-assets-tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} + .table-wrapper { font: normal normal bold 14px/21px Adobe Clean; & > .table-header { @@ -528,3 +583,4 @@ body { width: 100px; } } + diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index ededa381..a950bbb3 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -125,21 +125,22 @@ export default async function decorate(block) {
${artifactLinks} -
-
Total Assets
+
+
Total Approved Assets
+ To view the assets, go to the "All Asset" search page and use Program and Campaign name facet to filter the assets
-
Deliverable Name
+
Deliverable Task Name
Deliverable Type
Platforms
Review Link
Final Asset
Status Update
Completion Date
-
Project Owner
+
Task Owner
@@ -192,6 +193,13 @@ function enableBackBtn(block, blockConfig) { }) } +function buildDriverField(driverName) { + const driverSpan = document.createElement('span'); + driverSpan.classList.add('driver-text'); + driverSpan.innerHTML = `Project Owner: ${driverName}`; + return driverSpan; +} + function buildHeader(program, queryVars) { const headerWrapper = document.createElement('div'); headerWrapper.classList.add('details-header-wrapper'); @@ -199,6 +207,14 @@ function buildHeader(program, queryVars) { `Launch date${formatDate(program.launchDate)}
` : ""; const programName = program ? program.programName : queryVars.programName; const campaignName = program && program.campaignName ? '
' + program.campaignName + '
': ""; + + const driver = program && program.driver ? program.driver : "Not Available"; + let driverField = ''; + + if (program){ + driverField=buildDriverField(driver).outerHTML; + } + headerWrapper.innerHTML = `
@@ -207,7 +223,10 @@ function buildHeader(program, queryVars) { ${programName}
${campaignName} - ${date} +
+ ${date} + ${driverField} +
` return headerWrapper; @@ -611,4 +630,4 @@ function extractQueryVars() { programID: 'Program ID Not Available' } } -} \ No newline at end of file +} diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css index a417c0c9..f2351932 100644 --- a/blocks/gmo-program-list/gmo-program-list.css +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -204,28 +204,33 @@ select { border-radius: 4px; } .column-1 { - width: 28%; + width: 18%; margin-right: 1%; } .column-2 { - width: 40%; + width: 25%; margin-right: 1%; } .column-3 { - width: 12%; + width: 15%; margin-right: 1%; } .column-4 { - width: 16%; + width: 14%; margin-right: 1%; } .column-5 { - width: 13%; + width: 10%; margin-right: 1%; } .column-6 { - width: 14%; + width: 10%; + margin-right: 1%; } +.column-7 { + width: 5%; +} + .status { width: 80px; text-align: center; diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 04a15a3a..83563dc9 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -30,6 +30,11 @@ const headerConfig = [ 'name': 'Status', 'attribute': 'status', 'sortable': false + }, + { + 'name': 'Geo', + 'attribute': 'geo', + 'sortable': false } ] @@ -214,17 +219,28 @@ async function buildCampaignList(campaigns, numPerPage) { var campaignStatusWrapper = document.createElement('div'); campaignStatusWrapper.classList.add('status-wrapper', 'column-6', 'vertical-center'); campaignStatusWrapper = buildStatus(campaignStatusWrapper, campaign); + + const campaignGeo = document.createElement('div'); + campaignGeo.textContent = formatGeos(campaign.node.p0TargetGeo); + campaignGeo.classList.add('column-7', 'vertical-center'); + campaignGeo.dataset.property = 'geo'; + campaignRow.appendChild(campaignInfoWrapper); campaignRow.appendChild(campaignOverviewWrapper); campaignRow.appendChild(campaignLaunch); campaignRow.appendChild(campaignProducts); campaignRow.appendChild(campaignStatusWrapper); + campaignRow.appendChild(campaignGeo); listWrapper.appendChild(campaignRow); } return listWrapper; } +function formatGeos(geoArray) { + return geoArray.map(geo => geo.toUpperCase()).join(', '); +} + function buildStatus(statusWrapper, campaign) { const campaignStatus = document.createElement('div'); const statusStr = checkBlankString(campaign.node.status); From 0a413be9b76d9b025c23012696d05bea712f1a29 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Tue, 25 Jun 2024 10:07:34 -0500 Subject: [PATCH 25/95] ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet --- blocks/gmo-program-details/gmo-program-details.css | 2 +- blocks/gmo-program-details/gmo-program-details.js | 8 ++++---- blocks/gmo-program-list/gmo-program-list.css | 1 + blocks/gmo-program-list/gmo-program-list.js | 13 ++++++++++++- scripts/assets.js | 8 ++++++-- 5 files changed, 24 insertions(+), 8 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index d38b1af2..733ef284 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -423,7 +423,7 @@ body { &:first-child, &:nth-child(2) { border-top: 2px solid #F4F4F4; } - & .deliverable-name, .platforms, .deliverable-type, .review-link, .kpi { + & .deliverable-name, .platforms, .deliverable-type, .qa-files, .kpi { overflow: hidden; text-overflow: ellipsis; line-height: 16px; diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 061c0a69..e493bcd7 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -136,7 +136,7 @@ export default async function decorate(block) {
Deliverable Task Name
Deliverable Type
Platforms
-
Review Link
+
QA Files
Final Asset
Status Update
Completion Date
@@ -530,8 +530,8 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
${checkBlankString(deliverableJson.deliverableName)}
${checkBlankString(typeLabel)}
-
- ${deliverableJson.reviewLink ? 'Review Link ': "Not Available"} +
+ ${deliverableJson.reviewLink ? 'QA Files ': "Not Available"}
${deliverableJson.linkedFolderLink ? 'Final Asset ': "Not Available"} @@ -630,4 +630,4 @@ function extractQueryVars() { programID: 'Program ID Not Available' } } -} \ No newline at end of file +} diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css index f2351932..5e71b736 100644 --- a/blocks/gmo-program-list/gmo-program-list.css +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -262,6 +262,7 @@ select { .campaign-name-label, .campaign-name { position: relative; display: inline-block; + cursor: pointer; } .campaign-name-label:hover .tooltip { diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 83563dc9..0635f963 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -185,6 +185,7 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignNameWrapper = document.createElement('div'); campaignNameWrapper.classList.add('campaign-name-wrapper', 'vertical-center'); + campaignNameWrapper.innerHTML = `
${checkBlankString(programName)} @@ -195,7 +196,17 @@ async function buildCampaignList(campaigns, numPerPage) { Marketing Moment
`; - + + // Add click event to the campaign name label and text + const campaignNameLabel = campaignNameWrapper.querySelector('.campaign-name-label'); + const campaignNameText = campaignNameWrapper.querySelector('.campaign-name'); + campaignNameLabel.addEventListener('click', () => { + window.location.href = campaignDetailsLink; + }); + campaignNameText.addEventListener('click', () => { + window.location.href = campaignDetailsLink; + }); + campaignInfoWrapper.appendChild(campaignIconLink); campaignInfoWrapper.appendChild(campaignNameWrapper); diff --git a/scripts/assets.js b/scripts/assets.js index 37ec6233..ea159d72 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -9,7 +9,7 @@ import { getOptimizedDeliveryUrl } from './polaris.js'; -import { getAdminConfig } from './site-config.js'; +import { getAdminConfig, getBaseConfigPath, getBrandingConfig } from './site-config.js'; import { createSearchEndpoint, logError } from './scripts.js'; @@ -96,7 +96,11 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { } else { - return null; + //Display Underdevelopment Icon + const configPath = getBaseConfigPath(); + const brandingConfig = await getBrandingConfig(); + const underdevelopmentIconPath = `${configPath}/${brandingConfig.underdevelopmentIcon}`.replace(/\/\//g, '/'); + return {imageUrl : underdevelopmentIconPath, imageAltText: 'Under Development', assetCount: 0}; } } // Handle other response codes From f2806bb6d9c922d4e2aea1d4ede4ca64ca4e887b Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Fri, 28 Jun 2024 11:44:04 -0500 Subject: [PATCH 26/95] Sorted the options in the dropdown lists alphabetically on the options text field (#131) --- blocks/gmo-program-header/gmo-program-header.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index 295e046b..00f8cc61 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -173,6 +173,17 @@ function attachEventListeners() { function populateDropdown(response, dropdownId, type) { const options = response.data?.jsonByPath ? response.data.jsonByPath.item.json.options : response; + //Sort the options alphabetically + options.sort((a, b) => { + if (a.text < b.text) { + return -1; + } + if (a.text > b.text) { + return 1; + } + return 0; + }); + let dropdownContent = document.getElementById(dropdownId); dropdownContent.innerHTML = ''; options.forEach((option, index) => { From 5b61d34090216052848a0f84a99cbf2da3da642d Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Fri, 28 Jun 2024 11:50:12 -0500 Subject: [PATCH 27/95] ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. --- .../gmo-program-details.js | 132 +++++++++++------- 1 file changed, 82 insertions(+), 50 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index e493bcd7..8feafeb6 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -14,12 +14,47 @@ const platformMappings = getMappingArray('platforms'); export default async function decorate(block) { const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); + + blockConfig = readBlockConfig(block); + const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; + + // Immediately render a placeholder header + block.innerHTML = ` +
+ + Back +
+
+
Loading program details...
+
+ `; + + // Wait for program data to render the actual header const programData = await executeQuery(programQueryString); const program = programData.data.programList.items[0]; - blockConfig = readBlockConfig(block); const header = buildHeader(program, queryVars).outerHTML; - if (!program) { + + // Update the header with the actual data + block.querySelector('.placeholder-header').outerHTML = header; + + let imageObject = null; + let totalassets = 0; + if (program) { + try { + imageObject = await searchAsset(program.programName, program.campaignName); + if (imageObject) { + insertImageIntoCampaignImg(block, imageObject); + totalassets = imageObject.assetCount; + } + } catch (error) { + console.error("Failed to load campaign image:", error); + } + decorateIcons(block); + } + else + { block.innerHTML = `
@@ -35,30 +70,15 @@ export default async function decorate(block) { return; } - const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; - const deliverables = await executeQuery(deliverableQueryString); - const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; - - // Extract unique deliverable types - const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); - // Extract unique platforms (flattened from arrays within each item) - const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); const kpis = buildKPIList(program).outerHTML; - const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; - const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; - - block.innerHTML = ` -
- - Back -
-
- ${header} + + // Inject the additional HTML content + block.querySelector('.main-body-wrapper').innerHTML += `
Overview
Deliverables
@@ -127,7 +147,7 @@ export default async function decorate(block) { ${artifactLinks}
Total Approved Assets
- + ${totalassets} To view the assets, go to the "All Asset" search page and use Program and Campaign name facet to filter the assets
@@ -146,26 +166,43 @@ export default async function decorate(block) {
-
`; + + // Wait for deliverables data + const deliverables = await executeQuery(deliverableQueryString); + + const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); + const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); + buildProductCard(program); - try { - const imageObject = await searchAsset(program.programName, program.campaignName); - if (imageObject){ - insertImageIntoCampaignImg(block,imageObject); - document.getElementById('totalassets').textContent = imageObject.assetCount; - } - else - { - document.getElementById('totalassets').textContent = 0; - } - } catch (error) { - console.error("Failed to load campaign image:", error); - } + buildFieldScopes('deliverable-type', uniqueDeliverableTypes, block); + buildFieldScopes('platforms', uniquePlatforms, block); + + const table = await buildTable(await deliverables).then(async (rows) => { + return rows; + }); - block.querySelector('.tab-wrapper').addEventListener('click', (event) => { + // Batch Dom Updates + const tableRoot = block.querySelector('.table-content'); + const fragment = document.createDocumentFragment(); + fragment.appendChild(table); + tableRoot.appendChild(fragment); + + buildStatus(program.status); + + // Optimize Event Listeners: Added debouncing to event listeners to prevent performance issues. + const debounce = (func, delay) => { + let timeout; + return (...args) => { + clearTimeout(timeout); + timeout = setTimeout(() => func(...args), delay); + }; + }; + + block.querySelector('.tab-wrapper').addEventListener('click', debounce((event) => { switchTab(event.target); - }) + }, 300)); + enableBackBtn(block, blockConfig); block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { @@ -175,14 +212,7 @@ export default async function decorate(block) { }); }); decorateIcons(block); - buildFieldScopes('deliverable-type',uniqueDeliverableTypes, block); - buildFieldScopes('platforms',uniquePlatforms, block); - const table = await buildTable(await deliverables).then(async (rows) => { - return rows; - }) - const tableRoot = block.querySelector('.table-content'); - tableRoot.appendChild(table); - buildStatus(program.status); + } function enableBackBtn(block, blockConfig) { @@ -248,9 +278,11 @@ function getUniqueItems(items, property) { )]; } -function insertImageIntoCampaignImg(block,imageObject) { +function insertImageIntoCampaignImg(block, imageObject) { const campaignImgDiv = block.querySelector('.campaign-img'); const imgElement = document.createElement('img'); + //Lazy load images + imgElement.loading = 'lazy'; imgElement.src = imageObject.imageUrl; imgElement.alt = imageObject.imageAltText; campaignImgDiv.appendChild(imgElement); @@ -259,7 +291,7 @@ function insertImageIntoCampaignImg(block,imageObject) { function switchTab(tab) { if (tab.classList.contains('active') || tab.classList.contains('tab-wrapper')) { return; - } + } document.querySelector('.tabBtn.active').classList.toggle('active'); document.querySelector(`.tab:not(.inactive)`).classList.toggle('inactive'); const targetTab = tab.dataset.target; @@ -412,7 +444,7 @@ function formatDate(dateString) { // Formatting the date into mm/dd/yyyy format const formattedDate = mm + '/' + dd + '/' + yyyy; - + return formattedDate; } @@ -502,7 +534,7 @@ async function buildHeaderRow(category, headerType, isInactive, matchCount) { const headerRow = document.createElement('div'); headerRow.classList.add('row', 'collapsible', 'header'); let divopen; - if (headerType === 'subcategory') { + if (headerType === 'subcategory') { headerRow.classList.add('subheader'); divopen = '
'; } else { @@ -579,7 +611,7 @@ function sortRows(rows) { nodes.sort((a, b) => { var classA = a.classList ? a.classList.contains('datarow') : false; var classB = b.classList ? b.classList.contains('datarow') : false; - + if (classA && !classB) { return 1; } else if (!classA && classB) { From 309fbd974b0b98a4f05ddc0f24f695b7580cfd50 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Mon, 8 Jul 2024 14:49:37 -0500 Subject: [PATCH 28/95] assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon --- .../gmo-program-details.js | 15 +++++++++++-- scripts/assets.js | 21 ++++++++++++++----- 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 8feafeb6..09f34aca 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -54,7 +54,7 @@ export default async function decorate(block) { decorateIcons(block); } else - { + { //programName and campaignName is null block.innerHTML = `
@@ -64,7 +64,18 @@ export default async function decorate(block) { ${header}
No data available.
- ` + `; + try { + //programName and campaignName is null display under development icon + imageObject = await searchAsset(null, null); + if (imageObject) { + insertImageIntoCampaignImg(block, imageObject); + totalassets = imageObject.assetCount; + } + } catch (error) { + console.error("Failed to load campaign image:", error); + } + decorateIcons(block); enableBackBtn(block, blockConfig); return; diff --git a/scripts/assets.js b/scripts/assets.js index ea159d72..7d213422 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -33,6 +33,12 @@ const getFilters = () => { return `is_pur-expirationDate = 0 OR pur-expirationDate > ${currentEpoch}`; }; +async function getUnderdevelopmentIcon() { + const configPath = getBaseConfigPath(); + const brandingConfig = await getBrandingConfig(); + const underdevelopmentIconPath = `${configPath}/${brandingConfig.underdevelopmentIcon}`.replace(/\/\//g, '/'); + return { imageUrl: underdevelopmentIconPath, imageAltText: 'Under Development', assetCount: 0 }; +} /** * Search Asset for programName and campaignName parameters. @@ -49,6 +55,13 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); + + if (programName==null && campaignName==null) + { + // Display Underdevelopment Icon + return await getUnderdevelopmentIcon(); + } + // Initialize the facetFilters array const facetFilters = []; if (programName) { // Check if programName is not null @@ -96,11 +109,8 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { } else { - //Display Underdevelopment Icon - const configPath = getBaseConfigPath(); - const brandingConfig = await getBrandingConfig(); - const underdevelopmentIconPath = `${configPath}/${brandingConfig.underdevelopmentIcon}`.replace(/\/\//g, '/'); - return {imageUrl : underdevelopmentIconPath, imageAltText: 'Under Development', assetCount: 0}; + // Display Underdevelopment Icon + return await getUnderdevelopmentIcon(); } } // Handle other response codes @@ -110,3 +120,4 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { throw error; } } + From 18ddd12c8fef2fbcb9c56b54735e907f421f17ad Mon Sep 17 00:00:00 2001 From: Tyrone Tse Date: Thu, 11 Jul 2024 10:19:18 -0500 Subject: [PATCH 29/95] gmo-program-details.js PR Code review change to --- blocks/gmo-program-details/gmo-program-details.js | 2 +- scripts/assets.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 09f34aca..89e776c1 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -39,7 +39,7 @@ export default async function decorate(block) { // Update the header with the actual data block.querySelector('.placeholder-header').outerHTML = header; - let imageObject = null; + let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; let totalassets = 0; if (program) { try { diff --git a/scripts/assets.js b/scripts/assets.js index 7d213422..c4b5fb58 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -56,7 +56,7 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); - if (programName==null && campaignName==null) + if (!programName && !campaignName) { // Display Underdevelopment Icon return await getUnderdevelopmentIcon(); From 4f775473589652d1777019f5be16f5d79a06c3fb Mon Sep 17 00:00:00 2001 From: Tyrone Tse Date: Thu, 11 Jul 2024 10:20:06 -0500 Subject: [PATCH 30/95] Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. --- blocks/gmo-program-details/gmo-program-details.js | 2 +- scripts/assets.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 89e776c1..09f34aca 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -39,7 +39,7 @@ export default async function decorate(block) { // Update the header with the actual data block.querySelector('.placeholder-header').outerHTML = header; - let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; + let imageObject = null; let totalassets = 0; if (program) { try { diff --git a/scripts/assets.js b/scripts/assets.js index c4b5fb58..7d213422 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -56,7 +56,7 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); - if (!programName && !campaignName) + if (programName==null && campaignName==null) { // Display Underdevelopment Icon return await getUnderdevelopmentIcon(); From ffa3451a35396d24a2a9d67ed79de52b6f4a5ea1 Mon Sep 17 00:00:00 2001 From: Tyrone Tse Date: Thu, 11 Jul 2024 10:25:26 -0500 Subject: [PATCH 31/95] gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) --- blocks/gmo-program-details/gmo-program-details.js | 2 +- scripts/assets.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 09f34aca..89e776c1 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -39,7 +39,7 @@ export default async function decorate(block) { // Update the header with the actual data block.querySelector('.placeholder-header').outerHTML = header; - let imageObject = null; + let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; let totalassets = 0; if (program) { try { diff --git a/scripts/assets.js b/scripts/assets.js index 7d213422..e4902c59 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -56,7 +56,7 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); - if (programName==null && campaignName==null) + if (!progamName && !campaginName) { // Display Underdevelopment Icon return await getUnderdevelopmentIcon(); From e16de1cb15c61eea56ce3e7b43b55d9d7bb5cf86 Mon Sep 17 00:00:00 2001 From: Tyrone Tse Date: Thu, 11 Jul 2024 12:11:40 -0500 Subject: [PATCH 32/95] Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) --- scripts/assets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/assets.js b/scripts/assets.js index e4902c59..c4b5fb58 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -56,7 +56,7 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); - if (!progamName && !campaginName) + if (!programName && !campaignName) { // Display Underdevelopment Icon return await getUnderdevelopmentIcon(); From 5151195b90ff5edfc55055c3747f1b04a18ace06 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 11 Jul 2024 16:31:53 -0500 Subject: [PATCH 33/95] feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. --- blocks/gmo-program-list/gmo-program-list.js | 67 +++++++++++++++------ 1 file changed, 48 insertions(+), 19 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 0635f963..e26f3d61 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -50,8 +50,19 @@ let totalPages = 0; let campaignCount = await graphqlCampaignCount(); let blockConfig; -//Custom event gmoCampaignListBlock to allow the gmo-campaign-header to trigger the gmo-program-list to update -document.addEventListener('gmoCampaignListBlock', async function() { +// Debounce function to reduce the number of calls +function debounce(func, delay) { + let debounceTimer; + return function() { + const context = this; + const args = arguments; + clearTimeout(debounceTimer); + debounceTimer = setTimeout(() => func.apply(context, args), delay); + }; +} + +//Custom event gmoCampaignListBlock with debounce to allow the gmo-campaign-header to trigger the gmo-program-list to update +document.addEventListener('gmoCampaignListBlock', debounce(async function() { //Build graphq filter that is passed to the graphql persisted queries const graphQLFilterArray = getFilterValues(); const searchInputValue = document.getElementById('campaign-search').value; @@ -64,16 +75,15 @@ document.addEventListener('gmoCampaignListBlock', async function() { const block = document.querySelector('.gmo-program-list.block'); //Get Campaign Count for pagination campaignCount = await graphqlCampaignCount(currentGraphqlFilter); - //Trigger loading the gmo-campaign-block + //Reset page variables currentPageInfo = {}; cursorArray = []; currentPage = 1; currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; - + //Trigger loading the gmo-campaign-block decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); - -}); +}, 300)); export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) { @@ -117,8 +127,32 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, listContainer.appendChild(listItems); listContainer.appendChild(listFooter); // Show Hide Previous and Next Page buttons - const footerNext = document.querySelector('.footer-pagination-button.next'); + togglePaginationButtons(); + + decorateIcons(block); + + // Lazy loading for images + document.addEventListener('DOMContentLoaded', function() { + if ('IntersectionObserver' in window) { + const lazyImages = document.querySelectorAll('.lazy'); + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + img.classList.remove('lazy'); + observer.unobserve(img); + } + }); + }); + lazyImages.forEach(img => observer.observe(img)); + } + }); +} + +function togglePaginationButtons() { const footerPrev = document.querySelector('.footer-pagination-button.prev'); + const footerNext = document.querySelector('.footer-pagination-button.next'); if (currentPage > 1) { footerPrev.classList.add('active'); } else { @@ -130,9 +164,6 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, } else { footerNext.classList.remove('active'); } - - decorateIcons(block); - } function getFilterValues(){ @@ -275,14 +306,13 @@ function buildStatus(statusWrapper, campaign) { } async function addThumbnail(parentElement, programName, campaignName) { - searchAsset(programName, campaignName).then((response) => { - if (response && (Object.hasOwn(response, 'imageUrl') && Object.hasOwn(response, 'imageAltText'))) { - const iconImage = document.createElement('img'); - iconImage.src = response?.imageUrl; - iconImage.alt = response?.imageAltText; - parentElement.appendChild(iconImage); - } - }) + const response = await searchAsset(programName, campaignName); + if (response?.imageUrl && response?.imageAltText) { + const iconImage = document.createElement('img'); + iconImage.src = response.imageUrl; + iconImage.alt = response.imageAltText; + parentElement.appendChild(iconImage); + } } async function buildProduct(product) { @@ -529,4 +559,3 @@ function sortColumn(dir, property) { container.appendChild(row); }); } - From a40ff9e95bdea6590be68c22c0a2e7ac812208d7 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Fri, 12 Jul 2024 08:42:42 -0500 Subject: [PATCH 34/95] ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. --- blocks/gmo-program-list/gmo-program-list.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index e26f3d61..9b331872 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -50,19 +50,7 @@ let totalPages = 0; let campaignCount = await graphqlCampaignCount(); let blockConfig; -// Debounce function to reduce the number of calls -function debounce(func, delay) { - let debounceTimer; - return function() { - const context = this; - const args = arguments; - clearTimeout(debounceTimer); - debounceTimer = setTimeout(() => func.apply(context, args), delay); - }; -} - -//Custom event gmoCampaignListBlock with debounce to allow the gmo-campaign-header to trigger the gmo-program-list to update -document.addEventListener('gmoCampaignListBlock', debounce(async function() { +document.addEventListener('gmoCampaignListBlock', async function() { //Build graphq filter that is passed to the graphql persisted queries const graphQLFilterArray = getFilterValues(); const searchInputValue = document.getElementById('campaign-search').value; @@ -83,8 +71,7 @@ document.addEventListener('gmoCampaignListBlock', debounce(async function() { currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; //Trigger loading the gmo-campaign-block decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); -}, 300)); - +}); export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) { if (blockConfig == undefined) blockConfig = readBlockConfig(block); From bd7b9a9f8f53819cd4592d98a11bcc7bbd13308c Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Mon, 15 Jul 2024 09:15:31 -0500 Subject: [PATCH 35/95] ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. --- blocks/gmo-program-details/gmo-program-details.css | 7 +++++++ blocks/gmo-program-details/gmo-program-details.js | 6 +++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 733ef284..86239780 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -584,3 +584,10 @@ body { } } +.hide-overflow { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 89e776c1..2531bf5a 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -215,13 +215,17 @@ export default async function decorate(block) { }, 300)); enableBackBtn(block, blockConfig); + block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { const readMore = event.target; const parent = readMore.parentElement; - parent.querySelector('.paragraph').classList.toggle('hide-overflow'); + const paragraph = parent.querySelector('.paragraph'); + paragraph.classList.toggle('hide-overflow'); + readMore.textContent = paragraph.classList.contains('hide-overflow') ? 'Read more' : 'Read less'; }); }); + decorateIcons(block); } From a668e8a0d43ec838bdc40fa0cf9c665687b8ce4e Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Tue, 16 Jul 2024 11:48:56 -0700 Subject: [PATCH 36/95] Modified FAQ Nav (#139) Co-authored-by: Mathieu Lessard --- blocks/adp-header/adp-header.css | 10 ++++++++++ blocks/adp-header/adp-header.js | 6 +++--- scripts/scripts.js | 3 +++ styles/styles.css | 4 ++++ 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/blocks/adp-header/adp-header.css b/blocks/adp-header/adp-header.css index bfd8516f..52585a73 100644 --- a/blocks/adp-header/adp-header.css +++ b/blocks/adp-header/adp-header.css @@ -514,6 +514,10 @@ header nav .nav-bottom { width: 100%; } +header.hide-navigation-tabs nav .nav-bottom { + display: none; +} + header nav { display: grid; grid-template-areas: @@ -526,6 +530,12 @@ header nav { box-shadow: 0 0 4px rgba(233 233 233 / 100%); } +header.hide-navigation-tabs nav { + grid-template-areas: + "nav-top"; + grid-template-rows: calc(var(--nav-height) - var(--header-banner-height)); +} + .contenthub header nav { background: var(--contenthub-header-background); border-bottom: unset; diff --git a/blocks/adp-header/adp-header.js b/blocks/adp-header/adp-header.js index b3eafe7c..16c4da45 100644 --- a/blocks/adp-header/adp-header.js +++ b/blocks/adp-header/adp-header.js @@ -106,14 +106,14 @@ function toggleMenu(nav, navSections, forceExpanded = null) { */ export default async function decorate(block) { block.textContent = ''; - + const logoUrl = document.querySelector('head meta[name="logo-link"]')?.getAttribute('content'); // decorate nav DOM const nav = document.createElement('nav'); nav.id = 'nav'; nav.innerHTML = `
- +
@@ -224,7 +224,7 @@ export default async function decorate(block) { } if (await getUserProfile() !== null) { - document.querySelector('.adp-logo').href = getBaseConfigPath() + '/assets'; + document.querySelector('.adp-logo').href = logoUrl ?? (getBaseConfigPath() + '/assets'); loadSearchField(nav); if (!window.unifiedShellRuntime) { await createUserInfo(nav); diff --git a/scripts/scripts.js b/scripts/scripts.js index de80ce00..7100baf9 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -268,6 +268,9 @@ async function loadLazy(doc) { } if (!(document.querySelector('head meta[name="hide-header"]')?.getAttribute('content') === 'true')) { loadHeader(doc.querySelector('header'), 'adp-header'); + if(document.querySelector('head meta[name="hide-navigation-tabs"]')?.getAttribute('content') === 'true'){ + doc.querySelector('header').classList.add('hide-navigation-tabs'); + } } else { document.querySelector('header').classList.add('hidden'); } diff --git a/styles/styles.css b/styles/styles.css index 655685fd..c0ff6f91 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -171,6 +171,10 @@ header.hidden { display: none; } +header.hide-navigation-tabs{ + height: 30px; +} + h1, h2, h3, From 7640ed5ddf0459511775a16d0f908b99f4bda8c0 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 18 Jul 2024 11:34:09 -0500 Subject: [PATCH 37/95] Updated function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) (#142) Added new parameter deliverableType, moved parameter imageWidth to be the last parameter. --- scripts/assets.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/scripts/assets.js b/scripts/assets.js index ee4f1f2c..189af6a4 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -41,15 +41,17 @@ async function getUnderdevelopmentIcon() { } /** - * Search Asset for programName and campaignName parameters. + * Search Asset for programName, campaignName, deliverableType parameters. * * @param {string} - Program Name. * @param {string} - Campaign Name. + * @param {string} - Deliverable Type + * @param {integer} - Image Width * @returns {Image } Resolves with image object. * @throws {Error} If an HTTP error or network error occurs. */ -export async function searchAsset(programName, campaignName, imageWidth = 80) { +export async function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) { const adminConfig = await getAdminConfig(); const deliveryURL = await initDeliveryEnvironment(); @@ -69,6 +71,10 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { if (campaignName) { // Check if campaignName is not null facetFilters.push('gmo-campaignName :'+ campaignName); } + + if (deliverableType) { // Check if deliverableType is not null + facetFilters.push('gmo-deliverableType :'+ deliverableType); + } const data = { requests: [ { From bbc1f10af05e38278d25e964674296714a57e413 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Mon, 29 Jul 2024 13:26:17 -0500 Subject: [PATCH 38/95] Updated Launch Date label to Proposed Launch Date in Program List (#145) Updated Launch Date tool tip to and Proposed Launch Date in Program Details page --- blocks/gmo-program-details/gmo-program-details.css | 2 +- blocks/gmo-program-details/gmo-program-details.js | 2 +- blocks/gmo-program-list/gmo-program-list.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 86239780..801d8c9d 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -531,7 +531,7 @@ body { z-index: 1; position: absolute; text-align: center; - width: 100px; + width: 120px; padding: 2px 0; font: normal normal normal 12px/17px Adobe Clean; margin-left: 100px; diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 2531bf5a..738f03b0 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -249,7 +249,7 @@ function buildHeader(program, queryVars) { const headerWrapper = document.createElement('div'); headerWrapper.classList.add('details-header-wrapper'); const date = program && program.launchDate ? `
` + - `Launch date${formatDate(program.launchDate)}
` : ""; + `Proposed Launch Date${formatDate(program.launchDate)}` : ""; const programName = program ? program.programName : queryVars.programName; const campaignName = program && program.campaignName ? '
' + program.campaignName + '
': ""; diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 9b331872..927093f4 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -17,7 +17,7 @@ const headerConfig = [ 'sortable': false }, { - 'name': 'Launch Date', + 'name': 'Proposed Launch Date', 'attribute': 'launch', 'sortable': true, 'type': 'date' From 07bdaed6ef55aa0f07f294e905637784e8559c17 Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Wed, 31 Jul 2024 15:01:02 -0700 Subject: [PATCH 39/95] Added redirect block which supports regex (#148) Co-authored-by: Mathieu Lessard --- blocks/gmo-redirect/gmo-redirect.css | 0 blocks/gmo-redirect/gmo-redirect.js | 36 ++++++++++++++++++++++++++++ fstab.yaml | 2 +- 3 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 blocks/gmo-redirect/gmo-redirect.css create mode 100644 blocks/gmo-redirect/gmo-redirect.js diff --git a/blocks/gmo-redirect/gmo-redirect.css b/blocks/gmo-redirect/gmo-redirect.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/gmo-redirect/gmo-redirect.js b/blocks/gmo-redirect/gmo-redirect.js new file mode 100644 index 00000000..7f3bd32e --- /dev/null +++ b/blocks/gmo-redirect/gmo-redirect.js @@ -0,0 +1,36 @@ +import { + readBlockConfig +} from '../../scripts/lib-franklin.js'; +/** + * + * @param {HTMLElement} block + */ + +export default async function decorate(block) { + // Takes a config name as a string to be used as a regex and redirects to the value's location. + // Groups can be named using (?...) and referenced in the redirect using {name} + // Example: + // regex1 | /share/(?[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}) + // redirect1 | https://experience.adobe.com/?repoId=delivery-p108396-e1046543.adobeaemcloud.com#/@wfadoberm/assets/contenthub/shares/{shareid} + const config = readBlockConfig(block); + const path = window.location.pathname + window.location.hash; + + for(let reg in config){ + if(reg.startsWith('regex')){ + const regex = new RegExp(config[reg]); + let redirect = config[reg.replace('regex', 'redirect')]; + const match = path.match(regex); + if(match){ + for(let key in match.groups){ + redirect = redirect.replace(`{${key}}`, match.groups[key]); + } + console.log('redirecting to', redirect); + window.location.href = redirect; + return; + } + } + } + block.innerHTML = ''; +} + + diff --git a/fstab.yaml b/fstab.yaml index 3ec528bf..df07e08f 100644 --- a/fstab.yaml +++ b/fstab.yaml @@ -6,5 +6,5 @@ folders: /share/: /share/default /qa/share/: /qa/share/default /collection/: /collection/default - /qa/collection/: /collection/default + /qa/collection/: /qa/collection/default From 1a68aeb63c0d19623659fcb1871860544d21ec06 Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Thu, 1 Aug 2024 08:26:44 -0700 Subject: [PATCH 40/95] Replaced console.log with console.info (#149) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info --------- Co-authored-by: Mathieu Lessard --- blocks/gmo-redirect/gmo-redirect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/gmo-redirect/gmo-redirect.js b/blocks/gmo-redirect/gmo-redirect.js index 7f3bd32e..61228bad 100644 --- a/blocks/gmo-redirect/gmo-redirect.js +++ b/blocks/gmo-redirect/gmo-redirect.js @@ -24,7 +24,7 @@ export default async function decorate(block) { for(let key in match.groups){ redirect = redirect.replace(`{${key}}`, match.groups[key]); } - console.log('redirecting to', redirect); + console.info('redirecting to', redirect); window.location.href = redirect; return; } From 6865a5b6c835bff772d6653abcbfef688fba3c22 Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Wed, 7 Aug 2024 11:49:52 -0700 Subject: [PATCH 41/95] Added alert letting people know their content as moved (#154) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info * Added alert for redirect --------- Co-authored-by: Mathieu Lessard --- blocks/gmo-redirect/gmo-redirect.js | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/gmo-redirect/gmo-redirect.js b/blocks/gmo-redirect/gmo-redirect.js index 61228bad..2825d62f 100644 --- a/blocks/gmo-redirect/gmo-redirect.js +++ b/blocks/gmo-redirect/gmo-redirect.js @@ -24,6 +24,7 @@ export default async function decorate(block) { for(let key in match.groups){ redirect = redirect.replace(`{${key}}`, match.groups[key]); } + alert('You are being redirected to the latest version of the Marketing Hub. Please update your URL, if saved/bookmarked.') console.info('redirecting to', redirect); window.location.href = redirect; return; From e471c076ce939599682fb45a11c63c1a80dc67c7 Mon Sep 17 00:00:00 2001 From: Mathieu Lessard Date: Thu, 8 Aug 2024 08:07:06 -0700 Subject: [PATCH 42/95] Squashed commit of the following: commit 0659922c04ac5a76e29b135dc534b56ffd1d554d Author: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu Aug 1 12:16:47 2024 -0500 Branch rc to main => Update the 'Launch Date' label to "Proposed Launch Date" (#147) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) * feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. * ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. * Modified FAQ Nav (#139) Co-authored-by: Mathieu Lessard * Updated function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) (#142) Added new parameter deliverableType, moved parameter imageWidth to be the last parameter. * Updated Launch Date label to Proposed Launch Date in Program List (#145) Updated Launch Date tool tip to and Proposed Launch Date in Program Details page * Added redirect block which supports regex (#148) Co-authored-by: Mathieu Lessard * Replaced console.log with console.info (#149) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info --------- Co-authored-by: Mathieu Lessard --------- Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: Shivani gupta Co-authored-by: shivanigupta commit c6113b9347cc431a8a6054f955bf3a1895b93773 Author: mathieu-lessard Date: Tue Jul 16 11:59:05 2024 -0700 MH3.FY24.0716 Release (#140) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) * feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. * ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. * Modified FAQ Nav (#139) Co-authored-by: Mathieu Lessard --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: Shivani gupta Co-authored-by: shivanigupta commit 5ac808b833988e6c029eb1eed9a3a7e394fdbb94 Author: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu Jul 11 12:27:11 2024 -0500 Release candidate into main for Thursday (11 Jul) Release (Fix typo in variable name) (#136) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) --------- Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: Shivani gupta Co-authored-by: shivanigupta --- blocks/gmo-redirect/gmo-redirect.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/blocks/gmo-redirect/gmo-redirect.js b/blocks/gmo-redirect/gmo-redirect.js index 2825d62f..3c1c2a87 100644 --- a/blocks/gmo-redirect/gmo-redirect.js +++ b/blocks/gmo-redirect/gmo-redirect.js @@ -32,6 +32,4 @@ export default async function decorate(block) { } } block.innerHTML = ''; -} - - +} \ No newline at end of file From 1b1c7958eb1bae3ed7e48b5a4d08e56f5e9d0888 Mon Sep 17 00:00:00 2001 From: Mathieu Lessard Date: Thu, 8 Aug 2024 08:09:24 -0700 Subject: [PATCH 43/95] Resolved conflicts --- blocks/gmo-redirect/gmo-redirect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/gmo-redirect/gmo-redirect.js b/blocks/gmo-redirect/gmo-redirect.js index 8259a84d..3c1c2a87 100644 --- a/blocks/gmo-redirect/gmo-redirect.js +++ b/blocks/gmo-redirect/gmo-redirect.js @@ -32,4 +32,4 @@ export default async function decorate(block) { } } block.innerHTML = ''; -} +} \ No newline at end of file From 35229d50dab4eab9a332127f22740a688beeaeb8 Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Fri, 16 Aug 2024 11:52:14 -0700 Subject: [PATCH 44/95] DXI-27831: header fix for marketing dashboard filters (#159) --- blocks/gmo-program-header/gmo-program-header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/gmo-program-header/gmo-program-header.css b/blocks/gmo-program-header/gmo-program-header.css index e00c20fb..1559e603 100644 --- a/blocks/gmo-program-header/gmo-program-header.css +++ b/blocks/gmo-program-header/gmo-program-header.css @@ -1,7 +1,7 @@ .gmo-program-header.block { display: flex; flex-direction: column; - margin-top: 20px; + margin-top: 45px; } .inputs-wrapper { display: flex; From 6c5020c9ceca027f3da7cfd32290d3768fae878b Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 4 Sep 2024 16:15:23 -0400 Subject: [PATCH 45/95] Calendar view feature branch into RC (#160) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ASSETS-88928 : Update Deliverables Page Fields for Phase 2 to branch assets-72024 (#143) * feat: Add default values for Release Tier and Categories in program details - Updated the `buildHeader` function in `gmo-program-details.js` to display "Unavailable" for `releaseTier` if it does not exist. - Updated the `buildHeader` function to display "Unavailable" for `categories` if it does not exist or is empty. - Ensured the changes display the correct SVG icons and handle the presence and absence of the values correctly. - Added new SVG icons folderOpenOutline and launch * Updated Unavailable to Not Available * Program details calendar view (#144) * initial commit, calendar table - todo: add a function to populate async since this loads hidden initially * Continue iterating on static html * styling grouped content * refactor html 'month' columns were not extending to the edges of container. Experimented and found working fix. * continue iterating group/item placement * make width of groups dynamic based on properties * Make widths and placement programmatic * functional javascript - add ability to expand/collapse groups - add ability to scroll year left/right (todo: dropdown) - major cleanup of console log * add in year-changing controls * add current month indicator * remove todo, restore normal default tab * update indicator to reflect actual date * start refactoring dropdown, fix indicator * allow switching between year/quarter view * final bugfixes for quarter-switching * finish task filtering - tasks that start in view and end out of view show correctly - resolve bug with start positioning - todo: remove logging * year view functionality restored with refactor * finish quarter view * add function to resize groups if members overflow * change start date to end date for tasks * slight cleanup * resolve issue w/ merge * Added code to display the thumbnail for the programName and campaignName Fixed split error in function getUniqueYears(items) * Added thumbnail for programName and campaignName without using await * Refactored code to use function async function addThumbnailToItem(itemEl, programName, campaignName) * slightly refactor group-building logic * cleanup * Removed debug console.log code Removed commented out code Get thumbnail for searchAsset(programName, campaignName,deliverableType) * Calendar view update (#150) * fix 'today' button and current day indicator * fix buttons * width adjustments for 'quarter' view * handle missing start/end dates * light cleanup * merge 72024 in, perform cleanup * ASSETS-72026 : Use taskStatus CF for mapping to get the task status label (#151) * Added taskStatus colored dots from /content/dam/gmo-cf/en/wf-picklist-data-source/taskStatus JSON object * feat: Add tooltip to task status dot with dynamic status text and color - Implemented tooltip functionality for task status dots in the calendar view. - Added a helper function `getTaskStatusMapping` to retrieve task status details from `taskStatusMappings`. - Updated the HTML generation for task status dots to include a tooltip displaying the corresponding status text. * ASSETS-72027 : [Issue] Fix Number Alignment on Calendar Page View (#152) * Added CSS adjustments for group-heading alignment and implemented title attribute for tooltips in program-calendar.js - Updated .group-header and .left-block CSS classes to prevent text wrapping and ensure proper alignment of group heading and count elements. - Applied text-overflow: ellipsis to .group-heading to handle long text and prevent it from breaking the layout. - Added a title attribute to the group-heading div in program-calendar.js to display the full text as a tooltip when truncated. * Implemented absolute positioning for .group-count and adjusted .group-heading for improved text visibility - Changed .group-count to use absolute positioning within .group-header to optimize layout and provide more space for .group-heading text. - Adjusted .group-heading max-width to 100% to allow it to occupy the full available width within its container before applying text overflow. - Applied top: 50% and transform: translateY(-50%) to .group-count for vertical centering. - Fine-tuned padding, margins, and alignment to ensure elements are properly aligned and the layout remains consistent across different screen sizes. * MH3.FY24.0808 Release (#155) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) * feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. * ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. * Modified FAQ Nav (#139) Co-authored-by: Mathieu Lessard * Updated function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) (#142) Added new parameter deliverableType, moved parameter imageWidth to be the last parameter. * Updated Launch Date label to Proposed Launch Date in Program List (#145) Updated Launch Date tool tip to and Proposed Launch Date in Program Details page * Added redirect block which supports regex (#148) Co-authored-by: Mathieu Lessard * Replaced console.log with console.info (#149) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info --------- Co-authored-by: Mathieu Lessard * Added alert letting people know their content as moved (#154) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info * Added alert for redirect --------- Co-authored-by: Mathieu Lessard * Squashed commit of the following: commit 0659922c04ac5a76e29b135dc534b56ffd1d554d Author: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu Aug 1 12:16:47 2024 -0500 Branch rc to main => Update the 'Launch Date' label to "Proposed Launch Date" (#147) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config … * Assets 98992 (#153) * add requested changes - update start/end date properties - change tooltip on 'end date' pill - update filter to show current view - disable increment/decrement if no add'l years to show * add enhanced date checking * fix typo, condense code * remove intentional wrong property * fix bug when calendar is refreshed * disable increment/decrement instead of hide * CSS : Renamed classes icon-categories to icon-productGroup, categories to productGroup. (#156) JS : Renamed classes icon-categories to icon-productGroup, categories to productGroup. Renamed GraphQL field program.categories to program.productGroup * display msg when no deliverables in calendar (#157) * [Issue] Year View Navigator on Calendar Displays Extreme Years (#158) * Prevent year navigation beyond available data range in calendar - Added logic in `changePeriod` function to restrict year navigation within the bounds of available calendar data. - Defined `maxYear` and `minYear` based on the calendar data's start and end dates. - Ensured that users cannot select a year beyond the maximum or below the minimum year available in the calendar data. * Changed to 'auto' to disable smooth scrolling for better user experience * Restored smooth scrolling, and added code to simply not scroll to the next year or previous year if newYear > maxYear || newYear < minYear is true * use current year in initial block, update msg (#161) - main js for details block now programmatically retrieves current year - updated missing data msg for calendar view * Releasing changes in Prod (#162) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) * feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. * ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. * Modified FAQ Nav (#139) Co-authored-by: Mathieu Lessard * Updated function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) (#142) Added new parameter deliverableType, moved parameter imageWidth to be the last parameter. * Updated Launch Date label to Proposed Launch Date in Program List (#145) Updated Launch Date tool tip to and Proposed Launch Date in Program Details page * Added redirect block which supports regex (#148) Co-authored-by: Mathieu Lessard * Replaced console.log with console.info (#149) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info --------- Co-authored-by: Mathieu Lessard * Added alert letting people know their content as moved (#154) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info * Added alert for redirect --------- Co-authored-by: Mathieu Lessard * Squashed commit of the following: commit 0659922c04ac5a76e29b135dc534b56ffd1d554d Author: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu Aug 1 12:16:47 2024 -0500 Branch rc to main => Update the 'Launch Date' label to "Proposed Launch Date" (#147) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the conf… * feat: Open QA Files links in a new tab in program calendar view (#163) - Updated the QA Files links in the program calendar (`program-calendar.js`) to include `target="_blank"`, ensuring that these links open in a new browser tab. - This change improves user experience by allowing them to view QA Files without navigating away from the current page. * Hide overflow in calendar task thumbnails (#164) Setting a max-height skews the aspect ratio and sometimes shows the gray default background. With overflow: hidden you can still get an idea of what the thumbnail is without having it look distorted. * Assets 72092 (#166) * move calendar functions to main details block * fix small issues - add null check to release tier property - refactor logic when checking for bad view starts to account for non-US time zones * remove commented code * Marketing Dashboard and Program Detail Optimization by adding the Content Fragment Path (#165) * Added performance logging code for queries getAllCampaigns for Program List executeQuery for Program Details * gmo-program-details.js : Added the path parameter to program-details page, which now is passed to the graphql query getProgramDetails which now has the path parameter query ($programName: String, $programID:String, $path:ID) * Fix programName extraction and conditionally add 'path' parameter to query string - Corrected the `extractQueryVars` function to properly handle and return the correct value for `programName`, ensuring that the `+` character is not mistakenly replaced with a space. - Updated the construction of `programQueryString` to include the `path` parameter only if `encodedPath` is not an empty string. - These changes improve the accuracy of parameter handling and optimize the query string construction process. * Updated logging to use console.debug * feat(calendar): implement caching mechanism for thumbnails to optimize performance - Replaced array-based caching with an object-based caching system using a combination of `programName`, `campaignName`, and `deliverableType` as the cache key. - Updated the `addThumbnailToItem` function to utilize the new caching mechanism, reducing redundant API calls. - Converted the outer loop from `forEach` to `for...of` to ensure proper handling of asynchronous operations and to support the sequential execution of `await` calls. * Removed commented out code * Update cache key generation to conditionally include campaignName - Modified the cache key generation logic to only include campaignName if it is not null or an empty string. * fix bug by updating variable name. delete comment (#167) * change remaining valid date checks (#168) --------- Co-authored-by: Shivani gupta Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: shivanigupta --- .../gmo-program-details.css | 497 +++++++++++- .../gmo-program-details.js | 721 +++++++++++++++++- blocks/gmo-program-list/gmo-program-list.js | 6 +- icons/folderOpenOutline.svg | 11 + icons/launch.svg | 13 + scripts/graphql.js | 14 + 6 files changed, 1227 insertions(+), 35 deletions(-) create mode 100644 icons/folderOpenOutline.svg create mode 100644 icons/launch.svg diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 801d8c9d..36a77d6f 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -102,6 +102,37 @@ body { } } +.header-row3 .icon-release-tier { + width: 16px; + height: 16px; + background-image: url('/icons/launch.svg'); + background-size: contain; + background-repeat: no-repeat; + margin-right: 8px; + margin-left: 16px; +} + +.header-row3 .icon-productGroup { + width: 16px; + height: 16px; + background-image: url('/icons/folderOpenOutline.svg'); + background-size: contain; + background-repeat: no-repeat; + margin-right: 8px; + margin-left: 16px; +} + +.header-row3 .release-tier { + font: normal normal normal 14px/21px Adobe Clean; + margin-left: 8px; +} + +.header-row3 .productGroup { + font: normal normal normal 14px/21px Adobe Clean; + margin-left: 8px; +} + + .details-header-wrapper .header-row3 { display: flex; align-items: center; @@ -136,7 +167,7 @@ body { justify-content: space-between; flex-wrap: wrap; align-content: center; - width: 160px; + width: 240px; height: 50px; font: normal normal normal 14px/17px Adobe Clean; border-bottom: 2px solid #EAEAEA; @@ -156,7 +187,425 @@ body { flex-direction: row; justify-content: space-between; } +.tab.calendar { + margin-top:10px; + & > .no-data-msg { + height: 100px; + margin-top: 15px; + display: flex; + align-items: center; + } + & > .control-wrapper { + height: 32px; + padding-top: 1px; + padding-bottom: 1px; + margin-bottom: 15px; + display: flex; + flex-direction: row; + justify-content: space-between; + & .inc-dec-wrapper { + font: normal normal normal 14px/17px Adobe Clean; + display: flex; + flex-direction: row; + width: 140px; + + & .year-switch { + cursor: pointer; + display: flex; + flex-direction: row; + width: 64px; + box-shadow: 0px 1px 4px #00000026; + border-radius: 4px; + & .year-toggle { + display: flex; + justify-content: center; + align-content: center; + height: 32px; + width: 32px; + flex-wrap: wrap; + } + & img { + height: 15px; + &.left { + transform: rotate(180deg); + } + } + &.disabled { + background-color: #c6c6c6; + cursor: default; + } + } + & .current-year { + line-height: 32px; + margin-left: 20px; + &.single { + margin-left: unset; + } + } + } + & .right-controls { + width: 240px; + display: flex; + & .today-button { + width: 66px; + height: 32px; + font: normal normal normal 14px/32px Adobe Clean; + border-radius: 4px; + box-shadow: 0px 1px 4px #00000026; + display: flex; + justify-content: center; + margin-right: 5px; + cursor: pointer; + } + } + & .filter-dropdown-wrapper { + position: relative; + display: inline-block; + font: normal normal normal 14px/17px Adobe Clean; + letter-spacing: 0px; + height: 32px; + background-color: #FFF; + width: 70%; + border: 1px solid #D3D3D3; + border-radius: 4px; + cursor: pointer; + & > .filter-dropdown-button { + height: 32px; + line-height: 32px; + padding-left: 10px; + display: flex; + justify-content: space-between; + & > .label { + overflow: hidden; + } + & > .icon { + padding-top: 4px; + height: 16px; + } + } + & > .filter-dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + + max-height: 200px; + overflow-y: auto; + border: 1px solid #ccc; + z-index: 2; + width: 100%; + } + &.active .filter-dropdown-content { + display: block; + } + & .filter-option, & .filter-label { + display: block; + overflow-x: hidden; + + text-decoration: none; + color: #333; + } + & .filter-option { + padding: 10px 0px 10px 30px; + &:hover { + background-color: #ddd; + } + } + & .filter-label { + padding: 10px 0px 10px 10px; + font-weight: bold; + } + } + } + & > .calendar-wrapper { + overflow-y: auto; + overflow-x: hidden; + background-color: white; + font: normal normal bold 14px/21px Adobe Clean; + display: flex; + flex-direction: column; + border-bottom: 3px solid #F4F4F4; + position: relative; + min-height: 500px; + & .header-wrapper { + height: 24px; + & .quarter-header { + display: flex; + flex-direction: row; + height: 24px; + } + & .quarter { + width: 25%; + display: flex; + justify-content: center; + background-color: #F4F4F4; + + &:not(:first-child) { + border-left: 3px solid white; + } + } + } + &.quarter-view, &.multiyear { + overflow-x: unset; + } + & .calendar-background { + height: 100%; + display: flex; + flex-direction: row; + position: absolute; + top: 0; + bottom: 0; + &.quarter-view { + width: 200%; + } + } + & .month-wrapper, & .quarterview-wrapper { + height: 100%; + width: 100%; + display: flex; + flex-direction: row; + & .month { + width: 8.3%; + display: flex; + justify-content: flex-start; + flex-direction: column; + align-items: center; + border-left: 3px solid #F4F4F4; + height:100%; + &:last-child { + border-right: 3px solid #F4F4F4; + } + & .label { + padding: 3px; + margin-top: 1px; + } + &.current .label { + background-color: #96d7ff; + color: #2680EB; + border-radius: 15px; + padding-right: 15px; + padding-left: 15px; + z-index: 1; + + } + & .calendar-indicator { + width: 1px; + height: 100%; + margin-top: -13%; + background: linear-gradient( + to bottom, #2680EB 50%, transparent 50% + ); + background-size: 1px 5px; + } + } + } + & .calendar-content-wrapper { + position: relative; + padding-top: 65px; + padding-left: 5px; + width: 100%; + top: 0; + left: 0; + right: 0; + padding-bottom: 20px; + } + & .calendar-group { + width: 550px; + background-color: lightcyan; + border-radius: 7px; + &:not(:last-child) { + margin-bottom: 20px; + } + & .group-header { + position:relative; + height: 40px; + width: 100%; + color: white; + display: flex; + flex-direction: row; + flex-wrap: nowrap; /* Prevent wrapping */ + align-content: center; + justify-content: space-between; + border-radius: 7px 7px 0px 0px; + &.content-hidden { + border-radius: 7px; + } + & .left-block { + display: flex; + flex-direction: row; + align-items: center; /* Vertically center the items */ + flex-wrap: nowrap; /* Prevent wrapping within left-block */ + align-content: center; + border-radius: 7px 7px 0px 0px; + } + & .group-arrow { + transform: rotate(180deg); + filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(113%) contrast(100%); + margin-right: 15px; + margin-top: 5px; + } + } + & .group-heading { + line-height: 24px; + height: 24px; + margin-left: 5px; + white-space: nowrap; /* Prevents the text from wrapping to a new line */ + overflow: hidden; /* Hides the overflow text */ + text-overflow: ellipsis; /* Adds an ellipsis (...) to indicate truncated text */ + max-width: 100%; /* Adjusts the width to leave space for the group count */ + display: inline-block; /* Ensures the element respects the max-width */ + vertical-align: middle; /* Aligns it properly with other inline elements */ + } + & .group-count { + position: absolute; + top: 50%; /* Align it vertically */ + right: 10px; /* Align it horizontally to the right */ + transform: translateY(-50%); /* Center the element vertically */ + display: inline-flex; + align-items: center; /* Vertically center the content */ + justify-content: center; /* Center the content horizontally */ + min-width: 24px; /* Set minimum width instead of fixed width */ + margin-left: 8px; + margin-right: 5px; /* Add margin if necessary to prevent overlapping */ + height: 24px; + border-radius: 10px; + line-height: 24px; + background-color: black; + background: rgba(0,0,0,0.2); + } + & .group-controls { + margin-left: 15px; + } + & .group-collapse { + transform: rotate(90deg); + } + & .group-content { + display: flex; + flex-direction: column; + + padding-left: 5px; + padding-right: 5px; + & .item { + display: flex; + flex-direction: row; + justify-content: flex-start; + background-color: white; + margin-bottom: 10px; + border-radius: 4px; + height: 64px; + min-width: 190px; + font-size: 12px; + &:first-child { + margin-top: 10px; + } + & .content-row { + height: 32px; + line-height: 32px; + &.bottom { + display: flex; + line-height: unset; + align-items: center; + & div:not(last-child) { + margin-right: 4px; + } + } + } + & .start-date, & .link { + border-radius: 5px; + border: 1px solid #a9a9a9; + height: 12px; + padding: 4px; + } + & .color-tab { + border-radius: 4px 0px 0px 4px; + background-color: blue; + width: 3px; + height: 100%; + } + & > .item-content { + display: flex; + flex-direction: column; + width: 96%; + line-height: 12px; + margin-left: 2px; + } + & .name { + max-width: 62%; + overflow-x: hidden; + text-overflow: ellipsis; + text-wrap: nowrap; + } + } + & .info { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + & .thumbnail { + height: 32px; + width: 32px; + background-color: lightgray; + border-radius: 4px; + margin-right: 5px; + overflow: hidden; + } + & .link { + margin-right: 10px; + display: flex; + & > img { + margin-top: 1px; + margin-left: 5px; + transform: rotate(180deg); + } + } + & .item-status { + height: 5px; + width: 5px; + background-color: green; + border-radius: 50%; + position: relative; + margin-top: 13px; + margin-left: 10px; + } + } + &.color1 { + background-color: #33AB840D; + border: 1px solid #12805C; + & .group-header { + background-color: #33AB84; + } + } + &.color2 { + background-color: #37c8f029; + border: 1px solid #2680EB; + & .group-header { + background-color: #378EF0; + } + } + &.color3 { + background-color: #cf3edc2d; + border: 1px solid #A228AD; + & .group-header { + background-color: #CF3EDC; + } + } + &.color4 { + background-color: #9c64e126; + border: 1px solid #7A42BF; + & .group-header { + background-color: #9D64E1; + } + } + &#group5 { + background-color: #168a4a; + border: 1px solid #24a25d; + & .group-header { + background-color: #137941; + } + } + } + } +} .overview-wrapper { display: flex; flex-direction: column; @@ -177,6 +626,7 @@ body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; + line-clamp: 3; overflow: hidden; } } @@ -213,7 +663,7 @@ body { & .tags-wrapper { display: flex; - flex-wrap: wrap; /* Ensure tags wrap properly */ + flex-wrap: wrap; margin-top: 10px; } @@ -222,12 +672,12 @@ body { color: #505050; border: 1px solid #D3D3D3; border-radius: 4px; - padding: 0 10px; /* Ensure no padding at the bottom */ + padding: 0 10px; line-height: 32px; - height: 32px; /* Ensure consistent height */ + height: 32px; display: flex; - align-items: center; /* Vertically center the text */ - margin-bottom: 5px; /* Add margin at the bottom */ + align-items: center; + margin-bottom: 5px; &:not(:last-child) { margin-right: 5px; } @@ -341,32 +791,32 @@ body { .total-assets-tooltip .tooltiptext { visibility: hidden; - white-space: nowrap; /* Ensure text appears on one line */ - background-color: #D3D3D3; /* Match the background color */ - color: black; /* Match the text color */ - text-align: left; /* Left-align the text */ + white-space: nowrap; + background-color: #D3D3D3; + color: black; + text-align: left; border-radius: 4px; - padding: 5px 10px; /* Adjust padding as needed */ + padding: 5px 10px; position: absolute; z-index: 1; - top: 50%; /* Center vertically */ - left: 100%; /* Position to the right of the element */ - transform: translateY(-50%); /* Center vertically */ - margin-left: 10px; /* Adjust margin to match the screenshot */ + top: 50%; + left: 100%; + transform: translateY(-50%); + margin-left: 10px; opacity: 0; transition: opacity 0.3s; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */ + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); } .total-assets-tooltip .tooltiptext::after { content: ""; position: absolute; - top: 50%; /* Center the arrow vertically */ - left: -5px; /* Adjust to position the arrow */ - transform: translateY(-50%); /* Center vertically */ + top: 50%; + left: -5px; + transform: translateY(-50%); border-width: 5px; border-style: solid; - border-color: transparent #D3D3D3 transparent transparent; /* Arrow color matches tooltip background */ + border-color: transparent #D3D3D3 transparent transparent; } .total-assets-tooltip:hover .tooltiptext { @@ -414,11 +864,11 @@ body { &.datarow { display: flex; align-items: center; - height: auto; /* Set to auto to accommodate varying heights */ + height: auto; font-weight: 200; & .property { - line-height: normal; /* Adjust line-height to normal */ - padding: 10px 0; /* Add padding for better spacing */ + line-height: normal; + padding: 10px 0; } &:first-child, &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -588,6 +1038,7 @@ body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; + line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 738f03b0..36c5f29a 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -10,14 +10,24 @@ const programName = queryVars.programName; const programID = queryVars.programID; const deliverableMappings = getMappingArray('deliverableType'); const platformMappings = getMappingArray('platforms'); +const taskStatusMappings = getMappingArray('taskStatus'); +const startDateProp = 'taskPlannedStartDate'; +const endDateProp = 'taskPlannedEndDate'; +let viewStart, viewEnd, calendarDeliverables; + +// Thumbnail cache array object to store the image objects using cacheKey = `${programName}-${campaignName}-${deliverableType}`; +const thumbnailCache = {}; export default async function decorate(block) { const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); + const encodedPath = queryVars.path ? `${encodeURIComponent(queryVars.path)}` : ''; blockConfig = readBlockConfig(block); + // Including path in the query if present + const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}` + + (encodedPath ? `${encodedSemi}path=${encodedPath}` : ''); - const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; // Immediately render a placeholder header @@ -88,12 +98,14 @@ export default async function decorate(block) { const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; + const currentYear = new Date().getFullYear(); + // Inject the additional HTML content block.querySelector('.main-body-wrapper').innerHTML += `
Overview
Deliverables
-
Calendar
+
Calendar
@@ -177,6 +189,32 @@ export default async function decorate(block) {
+
+
+
+
+
+ +
+
+ +
+
+
${currentYear}
+
+
+
Today
+
+
+
Selected View: Year
+ + +
+
+
+
+
+ `; // Wait for deliverables data @@ -227,7 +265,7 @@ export default async function decorate(block) { }); decorateIcons(block); - + buildCalendar(await deliverables, block, "year", await deliverableMappings); } function enableBackBtn(block, blockConfig) { @@ -260,6 +298,18 @@ function buildHeader(program, queryVars) { driverField=buildDriverField(driver).outerHTML; } + const releaseTier = ` +
+ + Release Tier: ${program.releaseTier ? program.releaseTier : "Not Available"} +
`; + + const productGroup = ` +
+ + ${program.productGroup && program.productGroup.length > 0 ? program.productGroup.join(', ') : "Not Available"} +
`; + headerWrapper.innerHTML = `
@@ -271,6 +321,8 @@ function buildHeader(program, queryVars) {
${date} ${driverField} + ${releaseTier} + ${productGroup}
` @@ -659,22 +711,673 @@ function attachListener(htmlElement) { function extractQueryVars() { const urlStr = window.location.href; - const pnRegex = /.*programName=(.*?)&programID=(.*)/; + const pnRegex = /[?&]programName=([^&]+)&programID=([^&]+)(&path=([^&]+))?/; const match = urlStr.match(pnRegex); if (match && match[1] && match[2]) { - const pName = decodeURIComponent(match[1]); - let pID = decodeURIComponent(match[2]) + const pName = decodeURIComponent(match[1]); // Removed the replace method + let pID = decodeURIComponent(match[2]); + let pPath = match[4] ? decodeURIComponent(match[4]) : null; if (pID.endsWith('#')) { pID = pID.slice(0, -1); } return { programName: pName, - programID: pID - } + programID: pID, + path: pPath + }; } else { return { programName: 'Program Name Not Available', - programID: 'Program ID Not Available' + programID: 'Program ID Not Available', + path: null + }; + } +} + +// program calendar view +async function buildCalendar(dataObj, block, type, mappingArray, period) { + if (!calendarDeliverables) calendarDeliverables = dataObj.data.deliverableList.items; + if (!deliverableMappings) deliverableMappings = await mappingArray; + if (!taskStatusMappings) taskStatusMappings = await taskStatusMappings; + + const programLaunch = document.querySelector('span.campaign-date').textContent; + const programLaunchDate = new Date(programLaunch); + + // multiple of 3 for width of column when viewing in quarter mode. can change this + // by adjusting the multiple below, and also the % width of the calendar background + // when drawing a 'quarter' calendar. + + const columnWidth = (type === "year") ? 8.315 : (8.315 * 3); + const currentDate = new Date(); + const currentYear = currentDate.getFullYear(); + + // if there are no deliverables, display msg to user and end construction. + if (calendarDeliverables.length === 0) { + const calendarTab = document.querySelector('.calendar.tab'); + calendarTab.innerHTML = ` +
Required Data is Unavailable for this view.
+ `; + return; + } + + // get start of the view + viewStart = getTimeBounds(calendarDeliverables, "start", startDateProp); + viewStart = (!(isValidDate(viewStart)) || viewStart <= 0) ? programLaunchDate : viewStart; + const viewStartYear = viewStart.getUTCFullYear(); + + const displayYear = period ? period.year : viewStartYear; + const displayQuarter = period ? period.quarter : 1; + + const yearIndicator = block.querySelector('.inc-dec-wrapper .current-year'); + yearIndicator.dataset.year = displayYear; + yearIndicator.textContent = displayYear; + + // get end of the view + viewEnd = getTimeBounds(calendarDeliverables, "end", endDateProp); + if (!(isValidDate(viewEnd)) || viewEnd <= 0) { + viewEnd = new Date(viewStart); + viewEnd.setMonth(viewStart.getMonth() + 1); + } + const viewEndYear = viewEnd.getUTCFullYear(); + + // get array of all years to be included + let years = calendarYears(viewStartYear, viewEndYear); + + // disable increment/decrement if only one year in view + if (years.length === 1) { + document.querySelector('.inc-dec-wrapper > .year-switch').classList.add('disabled'); + } + + // build the calendar background here as we already know the period and style + let calendarEl; + if (type === "year") { + calendarEl = buildYearCal(years); + } else { + // if the last item ends in December we need another year to catch the Q1 n+1 finish + if (viewEnd.getUTCMonth = 11) { + years.push(viewEndYear + 1); + } + calendarEl = buildQuarterCal(years); + } + // get unique deliverable types + const uniqueGroups = getUniqueItems(calendarDeliverables, "deliverableType"); + + // set up the content wrapper + const contentWrapper = document.createElement('div'); + contentWrapper.classList.add('calendar-content-wrapper'); + if (type === "quarter") { + contentWrapper.classList.add('quarter-view'); + contentWrapper.dataset.view = "quarter"; + } else { + contentWrapper.dataset.view = "year"; + } + + var groupIndex = 1; + for (const group of uniqueGroups) { + const groupType = await lookupType(group, 'deliverable-type'); + // find all members of this group + const matchedItems = calendarDeliverables.filter(item => item.deliverableType === group); + + // find the earliest date- this is how we set the position for the group against the calendar + let earliestStartDate = getTimeBounds(matchedItems, "start", startDateProp); + earliestStartDate = (!(isValidDate(earliestStartDate)) || earliestStartDate <= 0) ? new Date(viewStart) : earliestStartDate; + let latestEndDate = getTimeBounds(matchedItems, "end", endDateProp); + latestEndDate = (!(isValidDate(latestEndDate)) || latestEndDate <= 0) ? new Date(viewEnd) : latestEndDate; + const startMonth = (earliestStartDate.getUTCMonth()); // getMonth returns 0-11 but this is desirable + const startDay = (earliestStartDate.getUTCDate() - 1); // if at start of month, we don't want to add any more margin + const endMonth = (latestEndDate.getUTCMonth()); + const endDay = (latestEndDate.getUTCDate() - 1); + + const groupStartYear = earliestStartDate.getUTCFullYear(); + const groupEndYear = latestEndDate.getUTCFullYear(); + + // accounting for different years in view + const startYearOffset = ((groupStartYear - viewStartYear) * 12); + const endYearOffset = ((groupEndYear - viewStartYear) * 12); + const totalDaysInMonth = new Date(Date.UTC(groupStartYear, startMonth, 0)).getUTCDate(); + const totalDaysInEndMonth = new Date(Date.UTC(groupEndYear, endMonth, 0)).getUTCDate(); + + const percentOfStartMonth = (startDay / totalDaysInMonth); + const percentOfEndMonth = (endDay / totalDaysInEndMonth); + const dayMargin = (percentOfStartMonth * columnWidth); + const endDayMargin = (percentOfEndMonth * columnWidth); + let startPosition = (((startYearOffset + startMonth) * columnWidth) + dayMargin).toFixed(2); + let endPosition = (((endYearOffset + endMonth) * columnWidth) + endDayMargin).toFixed(2); + + if (type === "quarter") { + startPosition = parseFloat(startPosition) + parseFloat(columnWidth); + endPosition = parseFloat(endPosition) + parseFloat(columnWidth); + } + + if (endMonth > 9) endPosition = endPosition - 0.35; + const widthOfGroup = (endPosition - startPosition); // width of group = start position + (day duration) + // calculate the duration of the group as that helps set the width of its members + const groupDuration = Math.floor((latestEndDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24)); + + const itemWrapper = document.createElement('div'); + itemWrapper.classList.add('group-content'); + + for (const item of matchedItems) { + const itemStartDate = (item[startDateProp]) ? new Date(item[startDateProp]) : viewStart; + const itemEndDate = (item[endDateProp]) ? new Date(item[endDateProp]) : viewEnd; + + const itemEndDateStr = itemEndDate ? itemEndDate.toLocaleDateString().split(',')[0] : null; + const itemDuration = Math.floor((itemEndDate.getTime() - itemStartDate.getTime()) / (1000 * 60 * 60 * 24)); + const itemDurationPct = ((itemDuration / groupDuration) * 100).toFixed(2); + + let daysDifference = Math.floor((itemStartDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24)); + const startPctDiff = ((daysDifference / groupDuration) * 100).toFixed(2); + let itemEl = document.createElement('div'); + itemEl.classList.add('item'); + itemEl.style.marginLeft = startPctDiff + '%'; + + // Find the corresponding color code from the taskStatusMappings array + const itemStatusMapping = await getTaskStatusMapping(item.taskStatus); + const { text: statusText = 'Unknown Status', 'color-code': colorCode = 'green' } = itemStatusMapping; + + // Create a placeholder for the thumbnail + itemEl.innerHTML = ` +
+
+
+
+
+
${item.deliverableName}
+
+
+
+
+
+ ${itemEndDateStr ? '
End Date: ' + itemEndDateStr + '
' : ''} +
+ QA Files +
+
+
+ `; + itemEl.style.width = itemDurationPct + '%'; + + // Call the new function to fetch and add the thumbnail, ensuring sequential execution + await addThumbnailToItem(itemEl, item.programName, item.campaignName,item.deliverableType); + itemWrapper.appendChild(itemEl); + + }; + + //await lookupType(category, 'deliverable-type'); + const groupEl = document.createElement('div'); + groupEl.classList.add('calendar-group', `color${groupIndex}`); + groupEl.style.marginLeft = startPosition + '%'; + groupEl.style.width = widthOfGroup + '%'; + groupEl.innerHTML = ` +
+
+ + +
${groupType}
+
${matchedItems.length}
+
+
+
+
+ `; + groupEl.appendChild(itemWrapper); + groupEl.querySelectorAll('.group-controls').forEach((arrow) => { + arrow.addEventListener('click', showHideGroup); + }); + + contentWrapper.appendChild(groupEl); + groupIndex +=1; + + }; + + calendarEl.appendChild(contentWrapper); + block.querySelector('.calendar.tab').appendChild(calendarEl); + + // populate "filter" dropdown + const filterDropdown = document.createElement('div'); + filterDropdown.classList.add('filter-dropdown-content'); + const uniqueYears = getUniqueYears(calendarDeliverables); + const yearOptionLabel = document.createElement('div'); + yearOptionLabel.classList.add('filter-label'); + yearOptionLabel.textContent = 'Year'; + const quarterOptionLabel = document.createElement('div'); + quarterOptionLabel.classList.add('filter-label'); + quarterOptionLabel.textContent = 'Quarter'; + filterDropdown.appendChild(yearOptionLabel); + + // when choosing 'Quarter' the top left controls change to control the quarter in focus + // its kind of a zoomed in view. + uniqueYears.forEach((year) => { + const yearOption = document.createElement('div'); + yearOption.classList.add('filter-option'); + yearOption.dataset.year = year; + yearOption.textContent = year; + yearOption.addEventListener('click', (event) => filterDropdownSelection(event, viewStartYear, years.length)); + filterDropdown.appendChild(yearOption); + }); + filterDropdown.appendChild(quarterOptionLabel); + const quarters = [ 1, 2, 3, 4 ]; + quarters.forEach((quarter) => { + const quarterOption = document.createElement('div'); + quarterOption.classList.add('filter-option'); + quarterOption.dataset.period = quarter; + quarterOption.textContent = quarter; + //quarterOption.addEventListener('click', filterDropdownSelection); + quarterOption.addEventListener('click', (event) => filterDropdownSelection(event, viewStartYear, years.length)); + filterDropdown.appendChild(quarterOption); + }) + + const filterDropdownWrapper = block.querySelector('.filter-dropdown-wrapper'); + filterDropdownWrapper.appendChild(filterDropdown); + filterDropdownWrapper.querySelector('.filter-dropdown-button').addEventListener('click', (event) => toggleDropdown(event.target)); + + // scroll to the right + const calendarWrapper = document.querySelector('.calendar-wrapper') + const scrollPct = calculateScroll(type, viewStartYear, displayYear, displayQuarter, years.length); + document.addEventListener('DOMContentLoaded', scrollOnInit(calendarWrapper, scrollPct)); + + // indicator that shows current day/month + const currentMonth = currentDate.getMonth() + 1; + // calculate the percentage completion of the current month for the indicator offset + const totalDaysInMonth = new Date((new Date(currentYear, currentMonth, 1)) - 1).getDate(); + const percentOfMonth = (currentDate.getUTCDate() / totalDaysInMonth).toFixed(2) * 100; + const monthEl = block.querySelector(`.month-wrapper[data-year='${currentYear}'] .month[data-num='${currentMonth}']`); + monthEl.classList.add('current'); + const lineEl = document.createElement('div'); + lineEl.classList.add('calendar-indicator'); + // use direct style for offset + lineEl.style.marginRight = ((-2 * percentOfMonth) + 100) + '%'; + monthEl.appendChild(lineEl); + + // close dropdown listener for clicks outside open dropdown + document.querySelector('.gmo-program-details.block').addEventListener('click', dismissDropdown); + block.querySelectorAll('.year-switch > .year-toggle').forEach((control) => { + control.removeEventListener('click', changePeriod); + if (years.length > 1) { + control.addEventListener('click', changePeriod); + } + }); + block.querySelector('.right-controls .today-button').addEventListener('click', () => { + const calendarWrapper = document.querySelector('.calendar-wrapper') + // determine scroll pct for years. always use type = year because "today" doesn't care about quarters. + const yearScrollPct = calculateScroll("year", viewStartYear, currentYear, displayQuarter, years.length); + // determine how far through the current year we are + const now = new Date(); + now.setHours(0,0,0,0); + const dateDiff = Math.floor((now - new Date(now.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24)); + const dayPct = (((dateDiff) * ((1 / years.length) / 365)) * 100); + // get total scroll percent by adding year + day scroll pct + const totalScroll = (parseFloat(yearScrollPct) + parseFloat(dayPct)).toFixed(2); + // scroll to position + scrollToPosition(calendarWrapper, totalScroll); + }); +} + +// calendar view supporting functions + +// Helper function to get task status mapping +async function getTaskStatusMapping(taskStatus) { + const taskStatusArray = await taskStatusMappings; + return taskStatusArray.find(mapping => mapping.value === taskStatus) || {}; +} + +async function addThumbnailToItem(itemEl, programName, campaignName, deliverableType) { + // Create a unique key for the cache based on the parameters, only add the campaignName in cacheKey when it is not null or empty + const cacheKey = campaignName ? `${programName}-${campaignName}-${deliverableType}` : `${programName}-${deliverableType}`; + + // Check if the imageObject is already cached + let imageObject = thumbnailCache[cacheKey]; + + // If not cached, make the API call and store the result in the cache + if (!imageObject) { + try { + imageObject = await searchAsset(programName, campaignName, deliverableType); + thumbnailCache[cacheKey] = imageObject; // Store the result in the cache + } catch (error) { + console.error("Failed to load thumbnail image:", error); + return; // Exit the function if the API call fails } } + + // Use the cached or newly fetched imageObject + if (imageObject && imageObject.imageUrl) { + const thumbnailDiv = itemEl.querySelector('.thumbnail'); + const imgElement = document.createElement('img'); + imgElement.src = imageObject.imageUrl; + imgElement.alt = imageObject.imageAltText; + imgElement.loading = 'lazy'; + thumbnailDiv.appendChild(imgElement); + } else { + console.error("Image Object does not have a valid imageUrl"); + } +} + +function getTimeBounds(items, whichEnd, property) { + const desiredDate = items.reduce((dateCompare, currentItem) => { + const currentItemDate = new Date(currentItem[property]); // Ensure UTC + if (whichEnd === "start") { + return currentItemDate < dateCompare ? currentItemDate : dateCompare; + } else { + return currentItemDate > dateCompare ? currentItemDate : dateCompare; + } + }, new Date(items[0][property])); + return desiredDate; +} + +function showHideGroup(event) { + const arrow = event.target; + const group = arrow.closest('.calendar-group'); + group.querySelector('.group-content').classList.toggle('inactive'); + group.querySelector('.group-expand').classList.toggle('inactive'); + group.querySelector('.group-collapse').classList.toggle('inactive'); + group.querySelector('.group-header').classList.toggle('content-hidden') +} + +function changePeriod(event) { + const arrow = event.target; + const direction = arrow.dataset.direction; + const wrapper = arrow.closest('.inc-dec-wrapper'); + const yearEl = wrapper.querySelector('.current-year'); + const contentWrapper = document.querySelector('.calendar-content-wrapper'); + const view = contentWrapper.dataset.view; + const currentYear = parseInt(yearEl.dataset.year); + const maxYear = viewEnd.getUTCFullYear(); // Use the maximum year from the viewEnd variable + const minYear = viewStart.getUTCFullYear(); // Use the minimum year from the viewStart variable + + let newPeriod, newYear, newQuarter; + + if (view === "quarter") { + const currentQuarter = parseInt(yearEl.dataset.quarter); + newQuarter = (direction == 'right') ? (currentQuarter + 1) : (currentQuarter - 1); + newYear = currentYear; + if (newQuarter > 4) { + newQuarter = 1; + newYear = currentYear + 1; + } + if (newQuarter < 1) { + newQuarter = 4; + newYear = currentYear - 1; + } + } else { + newYear = (direction == 'right') ? (currentYear + 1) : (currentYear - 1); + newQuarter = 1; + } + + // Prevent the year from going beyond the maximum or minimum year + if (newYear > maxYear || newYear < minYear) { + return; + } + + newPeriod = { 'year': newYear, 'quarter': newQuarter }; + refreshCalendar(newPeriod, view); +} + +function getUniqueYears(items) { + const yearsSet = new Set(); + items.forEach(item => { + const startDate = item[startDateProp]; + if (startDate) { + const year = startDate.split('-')[0]; + yearsSet.add(year); + } + }); + if (yearsSet.size === 0) { + const startYear = viewStart.getFullYear(); + const endYear = viewEnd.getFullYear(); + for (let year = startYear; year <= endYear; year++) { + yearsSet.add(year); + } + } + const years = Array.from(yearsSet); + years.sort((a, b) => parseInt(a) - parseInt(b)); + return years; +} + +// handle clicking on the year button +function toggleDropdown(element) { + const dropdown = element.closest('.filter-dropdown-wrapper'); + const iconChevronDown = dropdown.querySelector('.icon-chevronDown'); + const iconChevronUp = dropdown.querySelector('.icon-chevronUp'); + + iconChevronDown.classList.toggle('inactive'); + iconChevronUp.classList.toggle('inactive'); + dropdown.classList.toggle('active'); +} + +// handle clicks outside the dropdown +function dismissDropdown(event) { + const isInsideDropdown = event ? event.target.closest('.filter-dropdown-wrapper') : false; + if (!isInsideDropdown) { + const dropdown = document.querySelector('.filter-dropdown-wrapper'); + dropdown.querySelector('.icon-chevronDown').classList.remove('inactive'); + dropdown.querySelector('.icon-chevronUp').classList.add('inactive'); + dropdown.classList.remove('active'); + } +} + +function filterDropdownSelection(event, viewStartYear, numYears) { + // if we're hopping views, redraw the calendar + // if not just scroll + const calendarContentEl = document.querySelector('.calendar-content-wrapper'); + const currentView = calendarContentEl.dataset.view; + + const optionEl = event.target; + let year, quarter, view; + if (("period") in optionEl.dataset) { + // quarter view + quarter = optionEl.dataset.period; + year = document.querySelector('.inc-dec-wrapper .current-year').dataset.year; + view = "quarter"; + } else { + // year view + view = "year"; + year = optionEl.dataset.year; + quarter = 1; + } + + const period = { 'year': year, 'quarter': quarter } + + if (currentView === view) { + // scroll over + const scrollPct = calculateScroll(view, viewStartYear, year, quarter, numYears); + const calendarWrapper = document.querySelector('.calendar-wrapper'); + scrollToPosition(calendarWrapper, scrollPct); + } else { + const viewStr = view.charAt(0).toUpperCase() + view.slice(1); + document.querySelector('.filter-dropdown-button > .label').textContent = `Selected View: ${viewStr}`; + refreshCalendar(period, view); + } + dismissDropdown(); +} + +// retrieve the year via js when refreshing in quarter view +function refreshCalendar(period, view) { + const block = document.querySelector('.gmo-program-details.block'); + const yearEl = block.querySelector('.inc-dec-wrapper .current-year'); + yearEl.dataset.year = period.year; + yearEl.dataset.quarter = period.quarter; + + if (view === "year") { + yearEl.textContent = period.year; + } else { + yearEl.textContent = `Q${period.quarter} ${period.year}`; + } + + + // trick to remove event listeners + block.querySelector('.filter-dropdown-wrapper').outerHTML += ''; + block.querySelector('.right-controls .today-button').outerHTML += ''; + + block.querySelector('.calendar-wrapper').remove(); + block.querySelector('.filter-dropdown-content').remove(); + + buildCalendar(calendarDeliverables, block, view, deliverableMappings, period); +} + +function calendarYears(startYear, endYear) { + let years = []; + for (let year = startYear; year <= endYear; year++) { + years.push(year); + } + return years; +} + +function buildYearCal(years) { + const calendarEl = document.createElement('div'); + calendarEl.classList.add('calendar-wrapper'); + if (years.length > 1) calendarEl.classList.add('multiyear'); + const backgroundEl = document.createElement('div'); + backgroundEl.classList.add('calendar-background'); + backgroundEl.style.width = (years.length * 100) + '%'; + + years.forEach((year) => { + const yearWrapper = document.createElement('div'); + yearWrapper.dataset.year = year; + yearWrapper.classList.add('year-wrapper'); + yearWrapper.style.width = (100 / years.length) + '%'; + const calendarHeader = document.createElement('div'); + calendarHeader.classList.add('header-wrapper'); + const quartersHeader = document.createElement('div'); + quartersHeader.classList.add('quarter-header'); + quartersHeader.innerHTML = ` +
Q1 ${year}
+
Q2 ${year}
+
Q3 ${year}
+
Q4 ${year}
+ `; + calendarHeader.appendChild(quartersHeader); + + const monthsWrapper = document.createElement('div'); + monthsWrapper.classList.add('month-wrapper'); + monthsWrapper.dataset.year = year; + monthsWrapper.innerHTML = ` +
Jan
+
Feb
+
Mar
+
Apr
+
May
+
Jun
+
Jul
+
Aug
+
Sep
+
Oct
+
Nov
+
Dec
+ `; + yearWrapper.appendChild(calendarHeader); + yearWrapper.appendChild(monthsWrapper); + backgroundEl.appendChild(yearWrapper); + }); + calendarEl.appendChild(backgroundEl); + return calendarEl; +} + + +function buildQuarterCal(years) { + const calendarEl = document.createElement('div'); + calendarEl.classList.add('calendar-wrapper', 'quarter-view'); + if (years.length > 1) calendarEl.classList.add('multiyear'); + const backgroundEl = document.createElement('div'); + backgroundEl.classList.add('calendar-background'); + // this is wider for 'quarter' view- see equivalent in 'year' view. + backgroundEl.style.width = (years.length * 300) + '%'; + + years.forEach((year) => { + const yearWrapper = document.createElement('div'); + yearWrapper.dataset.year = year; + yearWrapper.classList.add('year-wrapper'); + yearWrapper.style.width = (100 / years.length) + '%'; + const calendarHeader = document.createElement('div'); + calendarHeader.classList.add('header-wrapper'); + const quartersHeader = document.createElement('div'); + quartersHeader.classList.add('quarter-header'); + quartersHeader.innerHTML = ` +
Fiscal Q1 ${year}
+
Fiscal Q2 ${year}
+
Fiscal Q3 ${year}
+
Fiscal Q4 ${year}
+ `; + calendarHeader.appendChild(quartersHeader); + + const monthsWrapper = document.createElement('div'); + monthsWrapper.classList.add('month-wrapper'); + monthsWrapper.dataset.year = year; + monthsWrapper.innerHTML = ` +
Dec Q1
+
Jan Q1
+
Feb Q1
+
Mar Q2
+
Apr Q2
+
May Q2
+
Jun Q3
+
Jul Q3
+
Aug Q3
+
Sep Q4
+
Oct Q4
+
Nov Q4
+ `; + yearWrapper.appendChild(calendarHeader); + yearWrapper.appendChild(monthsWrapper); + backgroundEl.appendChild(yearWrapper); + }); + calendarEl.appendChild(backgroundEl); + return calendarEl; +} + +function scrollOnInit(element, scrollPct) { + // Observer to detect when the element becomes visible + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + resizeGroups(); + scrollToPosition(element, scrollPct); + observer.disconnect(); // Stop observing after scrolling + } + }); + }); + + // Start observing the element + observer.observe(element); +} + +function getHorizontalOverflow(element) { + return element.scrollWidth - element.clientWidth; +} + +function resizeGroups() { + const groups = document.querySelectorAll('.calendar-group'); + groups.forEach((group) => { + const overflow = getHorizontalOverflow(group); + if (overflow) { + group.querySelector('.group-header').style.paddingRight = overflow + 'px'; + group.style.paddingRight = overflow + 'px'; + } + }) +} + +function scrollToPosition(element, scrollPct) { + const maxScrollLeft = element.scrollWidth; + const scrollAmt = (maxScrollLeft) * (scrollPct / 100); + element.scrollTo({ + left: scrollAmt, // Replace with desired position + behavior: 'smooth' // Optional: for smooth scrolling + }); +} + +function calculateScroll(type, viewStartYear, displayYear, displayQuarter, numYears) { + const yearDiff = displayYear - viewStartYear; + const yearWidthOffsetPct = (((yearDiff / numYears)) * 100); + + if (type === "quarter") { + return ((yearWidthOffsetPct) + ((displayQuarter - 1) * ((1 / numYears) / 4)) * 100).toFixed(2); + } else { + return (yearWidthOffsetPct).toFixed(2); + } +} + +function isValidDate(dateObj) { + return dateObj instanceof Date && !isNaN(dateObj); } diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 927093f4..7a9bd3cf 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -181,6 +181,7 @@ async function buildCampaignList(campaigns, numPerPage) { const programName = campaign.node.programName; const campaignName = campaign.node.campaignName; const programID = campaign.node.programID ? campaign.node.programID : ""; + const path = campaign.node._path; campaignRow.classList.add('campaign-row'); if ((index + 1) > numPerPage) campaignRow.classList.add('hidden'); @@ -190,9 +191,9 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignIconLink = document.createElement('a'); let campaignDetailsLink = host + `/${detailsPage}?programName=${programName}&`; - campaignDetailsLink += `programID=${programID}` + campaignDetailsLink += `programID=${programID}`; + campaignDetailsLink += `&path=${path}`; campaignIconLink.href = campaignDetailsLink; - const campaignIcon = document.createElement('div'); campaignIcon.classList.add('campaign-icon'); campaignIcon.dataset.programname = programName; @@ -203,7 +204,6 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignNameWrapper = document.createElement('div'); campaignNameWrapper.classList.add('campaign-name-wrapper', 'vertical-center'); - campaignNameWrapper.innerHTML = `
${checkBlankString(programName)} diff --git a/icons/folderOpenOutline.svg b/icons/folderOpenOutline.svg new file mode 100644 index 00000000..ff67e983 --- /dev/null +++ b/icons/folderOpenOutline.svg @@ -0,0 +1,11 @@ + + + + + S FolderOpenOutline 18 N + + \ No newline at end of file diff --git a/icons/launch.svg b/icons/launch.svg new file mode 100644 index 00000000..e6209ba5 --- /dev/null +++ b/icons/launch.svg @@ -0,0 +1,13 @@ + + + + + S Launch 18 N + + + + \ No newline at end of file diff --git a/scripts/graphql.js b/scripts/graphql.js index f2e5ca5d..58012272 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -47,6 +47,8 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { const encodedCursor = encodeURIComponent(cursor); const encodedFilter = encodeURIComponent(JSON.stringify(filter)); const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}first=${encodedFirst}${encodedSemiColon}cursor=${encodedCursor}${encodedSemiColon}filter=${encodedFilter}`; + //Performance logging + const startTime = performance.now(); const jwtToken = await getBearerToken(); try { @@ -57,6 +59,11 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { }, }; const response = await fetch(`${graphqlEndpoint}`, options); + //Performance logging + const endTime = performance.now(); + const executionTime = endTime - startTime; + console.debug(`getAllCampaigns Execution Time: ${executionTime} ms`); + // Handle response codes if (response.status === 200) { const responseBody = await response.json(); @@ -170,6 +177,8 @@ export async function executeQuery(queryString) { const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; const projectId = 'gmo'; const queryEndpoint = `${baseApiUrl}/${projectId}/${queryString}`; + //Performance logging + const startTime = performance.now(); const jwtToken = await getBearerToken(); return fetch(queryEndpoint, { @@ -181,6 +190,11 @@ export async function executeQuery(queryString) { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } + //Performance logging + const endTime = performance.now(); + const executionTime = endTime - startTime; + console.debug(`executeQuery for ${queryString} Execution Time: ${executionTime} ms`); + return response.json(); }).then(data => { return data; // Make sure to return the data so that the promise resolves with it From 1005f030e3a9f77dcd019ff8382adb11ad469024 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Thu, 12 Sep 2024 12:38:36 -0400 Subject: [PATCH 46/95] Visual bugfixes for calendar view (#171) * cherrypick changes for calendar view * Reorder header code to solve for null data * resolve one more console error --- .../gmo-program-details.css | 5 ++-- .../gmo-program-details.js | 26 +++++++++---------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 36a77d6f..0a0c2fca 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -454,6 +454,7 @@ body { max-width: 100%; /* Adjusts the width to leave space for the group count */ display: inline-block; /* Ensures the element respects the max-width */ vertical-align: middle; /* Aligns it properly with other inline elements */ + min-width: 52px; /* Ensure at least 5 characters show */ } & .group-count { position: absolute; @@ -596,8 +597,8 @@ body { background-color: #9D64E1; } } - &#group5 { - background-color: #168a4a; + &.color5 { + background-color: #95dfb696; border: 1px solid #24a25d; & .group-header { background-color: #137941; diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 36c5f29a..c7e2f018 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -44,14 +44,15 @@ export default async function decorate(block) { // Wait for program data to render the actual header const programData = await executeQuery(programQueryString); const program = programData.data.programList.items[0]; - const header = buildHeader(program, queryVars).outerHTML; - - // Update the header with the actual data - block.querySelector('.placeholder-header').outerHTML = header; let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; let totalassets = 0; - if (program) { + let header = block.querySelector('.placeholder-header'); + + if (!(program === undefined)) { + const programHeader = buildHeader(program, queryVars).outerHTML; + // Update the header with the actual data + header.outerHTML = programHeader; try { imageObject = await searchAsset(program.programName, program.campaignName); if (imageObject) { @@ -62,17 +63,17 @@ export default async function decorate(block) { console.error("Failed to load campaign image:", error); } decorateIcons(block); - } - else - { //programName and campaignName is null + } else { + //programName and campaignName is null + header.textContent = 'Unable to retrieve program information.'; block.innerHTML = `
Back
- ${header} -
No data available.
+ ${header.outerHTML} +
No program data available.
`; try { @@ -352,7 +353,7 @@ function insertImageIntoCampaignImg(block, imageObject) { imgElement.loading = 'lazy'; imgElement.src = imageObject.imageUrl; imgElement.alt = imageObject.imageAltText; - campaignImgDiv.appendChild(imgElement); + if (campaignImgDiv) campaignImgDiv.appendChild(imgElement); } function switchTab(tab) { @@ -929,8 +930,7 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) { }); contentWrapper.appendChild(groupEl); - groupIndex +=1; - + groupIndex = (groupIndex === 5) ? 1 : groupIndex + 1; }; calendarEl.appendChild(contentWrapper); From f6ad0f9d1ae09f277a27348853b212f29826bdfd Mon Sep 17 00:00:00 2001 From: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Date: Mon, 3 Jun 2024 14:43:13 -0400 Subject: [PATCH 47/95] Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta --- .../gmo-program-details.css | 532 +-------- .../gmo-program-details.js | 1024 ++--------------- .../gmo-program-header/gmo-program-header.css | 4 +- .../gmo-program-header/gmo-program-header.js | 57 +- blocks/gmo-program-list/gmo-program-list.css | 35 +- blocks/gmo-program-list/gmo-program-list.js | 239 ++-- scripts/assets.js | 28 +- scripts/graphql.js | 77 +- scripts/shared-program.js | 48 +- scripts/site-config.js | 15 - 10 files changed, 318 insertions(+), 1741 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 0a0c2fca..b69ec24c 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -28,7 +28,6 @@ body { font-weight: bold; } } - .gmo-program-details.block { & .h1 { font: normal normal bold 18px/27px Adobe Clean; @@ -181,432 +180,11 @@ body { } } } - .tab.two-column { display: flex; flex-direction: row; justify-content: space-between; } -.tab.calendar { - margin-top:10px; - & > .no-data-msg { - height: 100px; - margin-top: 15px; - display: flex; - align-items: center; - } - & > .control-wrapper { - height: 32px; - padding-top: 1px; - padding-bottom: 1px; - margin-bottom: 15px; - display: flex; - flex-direction: row; - justify-content: space-between; - & .inc-dec-wrapper { - font: normal normal normal 14px/17px Adobe Clean; - display: flex; - flex-direction: row; - width: 140px; - - & .year-switch { - cursor: pointer; - display: flex; - flex-direction: row; - width: 64px; - box-shadow: 0px 1px 4px #00000026; - border-radius: 4px; - & .year-toggle { - display: flex; - justify-content: center; - align-content: center; - height: 32px; - width: 32px; - flex-wrap: wrap; - } - & img { - height: 15px; - &.left { - transform: rotate(180deg); - } - } - &.disabled { - background-color: #c6c6c6; - cursor: default; - } - } - & .current-year { - line-height: 32px; - margin-left: 20px; - &.single { - margin-left: unset; - } - } - } - & .right-controls { - width: 240px; - display: flex; - & .today-button { - width: 66px; - height: 32px; - font: normal normal normal 14px/32px Adobe Clean; - border-radius: 4px; - box-shadow: 0px 1px 4px #00000026; - display: flex; - justify-content: center; - margin-right: 5px; - cursor: pointer; - } - } - & .filter-dropdown-wrapper { - position: relative; - display: inline-block; - font: normal normal normal 14px/17px Adobe Clean; - letter-spacing: 0px; - height: 32px; - background-color: #FFF; - width: 70%; - border: 1px solid #D3D3D3; - border-radius: 4px; - cursor: pointer; - & > .filter-dropdown-button { - height: 32px; - line-height: 32px; - padding-left: 10px; - display: flex; - justify-content: space-between; - & > .label { - overflow: hidden; - } - & > .icon { - padding-top: 4px; - height: 16px; - } - } - & > .filter-dropdown-content { - display: none; - position: absolute; - background-color: #f9f9f9; - - max-height: 200px; - overflow-y: auto; - border: 1px solid #ccc; - z-index: 2; - width: 100%; - } - &.active .filter-dropdown-content { - display: block; - } - & .filter-option, & .filter-label { - display: block; - overflow-x: hidden; - - text-decoration: none; - color: #333; - } - & .filter-option { - padding: 10px 0px 10px 30px; - &:hover { - background-color: #ddd; - } - } - & .filter-label { - padding: 10px 0px 10px 10px; - font-weight: bold; - } - } - } - & > .calendar-wrapper { - overflow-y: auto; - overflow-x: hidden; - background-color: white; - font: normal normal bold 14px/21px Adobe Clean; - display: flex; - flex-direction: column; - border-bottom: 3px solid #F4F4F4; - position: relative; - min-height: 500px; - & .header-wrapper { - height: 24px; - & .quarter-header { - display: flex; - flex-direction: row; - height: 24px; - } - & .quarter { - width: 25%; - display: flex; - justify-content: center; - background-color: #F4F4F4; - - &:not(:first-child) { - border-left: 3px solid white; - } - } - } - &.quarter-view, &.multiyear { - overflow-x: unset; - } - & .calendar-background { - height: 100%; - display: flex; - flex-direction: row; - position: absolute; - top: 0; - bottom: 0; - &.quarter-view { - width: 200%; - } - } - & .month-wrapper, & .quarterview-wrapper { - height: 100%; - width: 100%; - display: flex; - flex-direction: row; - & .month { - width: 8.3%; - display: flex; - justify-content: flex-start; - flex-direction: column; - align-items: center; - border-left: 3px solid #F4F4F4; - height:100%; - &:last-child { - border-right: 3px solid #F4F4F4; - } - & .label { - padding: 3px; - margin-top: 1px; - } - &.current .label { - background-color: #96d7ff; - color: #2680EB; - border-radius: 15px; - padding-right: 15px; - padding-left: 15px; - z-index: 1; - - } - & .calendar-indicator { - width: 1px; - height: 100%; - margin-top: -13%; - background: linear-gradient( - to bottom, #2680EB 50%, transparent 50% - ); - background-size: 1px 5px; - } - } - } - & .calendar-content-wrapper { - position: relative; - padding-top: 65px; - padding-left: 5px; - width: 100%; - top: 0; - left: 0; - right: 0; - padding-bottom: 20px; - } - & .calendar-group { - width: 550px; - background-color: lightcyan; - border-radius: 7px; - &:not(:last-child) { - margin-bottom: 20px; - } - & .group-header { - position:relative; - height: 40px; - width: 100%; - color: white; - display: flex; - flex-direction: row; - flex-wrap: nowrap; /* Prevent wrapping */ - align-content: center; - justify-content: space-between; - border-radius: 7px 7px 0px 0px; - &.content-hidden { - border-radius: 7px; - } - & .left-block { - display: flex; - flex-direction: row; - align-items: center; /* Vertically center the items */ - flex-wrap: nowrap; /* Prevent wrapping within left-block */ - align-content: center; - border-radius: 7px 7px 0px 0px; - } - & .group-arrow { - transform: rotate(180deg); - filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(113%) contrast(100%); - margin-right: 15px; - margin-top: 5px; - } - } - & .group-heading { - line-height: 24px; - height: 24px; - margin-left: 5px; - white-space: nowrap; /* Prevents the text from wrapping to a new line */ - overflow: hidden; /* Hides the overflow text */ - text-overflow: ellipsis; /* Adds an ellipsis (...) to indicate truncated text */ - max-width: 100%; /* Adjusts the width to leave space for the group count */ - display: inline-block; /* Ensures the element respects the max-width */ - vertical-align: middle; /* Aligns it properly with other inline elements */ - min-width: 52px; /* Ensure at least 5 characters show */ - } - & .group-count { - position: absolute; - top: 50%; /* Align it vertically */ - right: 10px; /* Align it horizontally to the right */ - transform: translateY(-50%); /* Center the element vertically */ - display: inline-flex; - align-items: center; /* Vertically center the content */ - justify-content: center; /* Center the content horizontally */ - min-width: 24px; /* Set minimum width instead of fixed width */ - margin-left: 8px; - margin-right: 5px; /* Add margin if necessary to prevent overlapping */ - height: 24px; - border-radius: 10px; - line-height: 24px; - background-color: black; - background: rgba(0,0,0,0.2); - } - & .group-controls { - margin-left: 15px; - } - & .group-collapse { - transform: rotate(90deg); - } - & .group-content { - display: flex; - flex-direction: column; - - padding-left: 5px; - padding-right: 5px; - & .item { - display: flex; - flex-direction: row; - justify-content: flex-start; - background-color: white; - margin-bottom: 10px; - border-radius: 4px; - height: 64px; - min-width: 190px; - font-size: 12px; - &:first-child { - margin-top: 10px; - } - & .content-row { - height: 32px; - line-height: 32px; - &.bottom { - display: flex; - line-height: unset; - align-items: center; - & div:not(last-child) { - margin-right: 4px; - } - } - } - & .start-date, & .link { - border-radius: 5px; - border: 1px solid #a9a9a9; - height: 12px; - padding: 4px; - - } - & .color-tab { - border-radius: 4px 0px 0px 4px; - background-color: blue; - width: 3px; - height: 100%; - } - & > .item-content { - display: flex; - flex-direction: column; - width: 96%; - line-height: 12px; - margin-left: 2px; - } - & .name { - max-width: 62%; - overflow-x: hidden; - text-overflow: ellipsis; - text-wrap: nowrap; - } - } - & .info { - display: flex; - flex-direction: row; - justify-content: flex-start; - } - & .thumbnail { - height: 32px; - width: 32px; - background-color: lightgray; - border-radius: 4px; - margin-right: 5px; - overflow: hidden; - } - & .link { - margin-right: 10px; - display: flex; - & > img { - margin-top: 1px; - margin-left: 5px; - transform: rotate(180deg); - } - } - & .item-status { - height: 5px; - width: 5px; - background-color: green; - border-radius: 50%; - position: relative; - margin-top: 13px; - margin-left: 10px; - } - } - &.color1 { - background-color: #33AB840D; - border: 1px solid #12805C; - & .group-header { - background-color: #33AB84; - } - } - &.color2 { - background-color: #37c8f029; - border: 1px solid #2680EB; - & .group-header { - background-color: #378EF0; - } - } - &.color3 { - background-color: #cf3edc2d; - border: 1px solid #A228AD; - & .group-header { - background-color: #CF3EDC; - } - } - &.color4 { - background-color: #9c64e126; - border: 1px solid #7A42BF; - & .group-header { - background-color: #9D64E1; - } - } - &.color5 { - background-color: #95dfb696; - border: 1px solid #24a25d; - & .group-header { - background-color: #137941; - } - } - } - } -} .overview-wrapper { display: flex; flex-direction: column; @@ -627,7 +205,6 @@ body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; - line-clamp: 3; overflow: hidden; } } @@ -638,7 +215,6 @@ body { cursor: pointer; } } - .kpis-wrapper { margin-top: 30px; & ul { @@ -652,7 +228,6 @@ body { margin-top: 15px; } } - .use-cases-wrapper { margin-bottom: 30px; } @@ -664,7 +239,7 @@ body { & .tags-wrapper { display: flex; - flex-wrap: wrap; + flex-wrap: wrap; /* Ensure tags wrap properly */ margin-top: 10px; } @@ -673,12 +248,12 @@ body { color: #505050; border: 1px solid #D3D3D3; border-radius: 4px; - padding: 0 10px; + padding: 0 10px; /* Ensure no padding at the bottom */ line-height: 32px; - height: 32px; + height: 32px; /* Ensure consistent height */ display: flex; - align-items: center; - margin-bottom: 5px; + align-items: center; /* Vertically center the text */ + margin-bottom: 5px; /* Add margin at the bottom */ &:not(:last-child) { margin-right: 5px; } @@ -690,7 +265,6 @@ body { flex-direction: column; margin-top: 20px; } - .links-wrapper { margin-top: 30px; & .links { @@ -704,7 +278,6 @@ body { color: #0D66D0; } } - .infocards-wrapper { margin-right: 40px; & .card { @@ -718,7 +291,6 @@ body { } } } - .card { & .card-heading { margin-top: 10px; @@ -734,7 +306,6 @@ body { font-size: 14px; } } - .milestone, .card-content { font: normal normal normal 14px/21px Adobe Clean; & .icon { @@ -747,7 +318,6 @@ body { margin-bottom: 5px; } } - .deliverables { & > .page-heading { display: flex; @@ -783,48 +353,6 @@ body { } } } - -.total-assets-tooltip { - position: relative; - display: inline-block; - cursor: pointer; -} - -.total-assets-tooltip .tooltiptext { - visibility: hidden; - white-space: nowrap; - background-color: #D3D3D3; - color: black; - text-align: left; - border-radius: 4px; - padding: 5px 10px; - position: absolute; - z-index: 1; - top: 50%; - left: 100%; - transform: translateY(-50%); - margin-left: 10px; - opacity: 0; - transition: opacity 0.3s; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); -} - -.total-assets-tooltip .tooltiptext::after { - content: ""; - position: absolute; - top: 50%; - left: -5px; - transform: translateY(-50%); - border-width: 5px; - border-style: solid; - border-color: transparent #D3D3D3 transparent transparent; -} - -.total-assets-tooltip:hover .tooltiptext { - visibility: visible; - opacity: 1; -} - .table-wrapper { font: normal normal bold 14px/21px Adobe Clean; & > .table-header { @@ -842,21 +370,17 @@ body { top: 0; } } - .table-content { - max-height: 45vh; - min-height: 7vh; + height: 45vh; overflow-y: auto; &::-webkit-scrollbar { display: none; } } - .inactive { display: none !important; visibility: hidden; } - .row { height: 56px; &:not(:last-child) { @@ -865,16 +389,15 @@ body { &.datarow { display: flex; align-items: center; - height: auto; + height: 88px; font-weight: 200; & .property { - line-height: normal; - padding: 10px 0; + line-height: 88px; } &:first-child, &:nth-child(2) { border-top: 2px solid #F4F4F4; } - & .deliverable-name, .platforms, .deliverable-type, .qa-files, .kpi { + & .deliverable-name, .platforms, .deliverable-type, .review-link, .kpi { overflow: hidden; text-overflow: ellipsis; line-height: 16px; @@ -882,7 +405,7 @@ body { & .date-wrapper { display: flex; flex-direction: column; - justify-content: center; + justify-content:center; & > .completion-date, .revised-date { line-height: 21px; } @@ -923,7 +446,6 @@ body { justify-content: center; } } - .subheader { &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -968,13 +490,12 @@ body { border-radius: 3px; } } -} +} .header-row3:hover .date-tooltip { visibility: visible; opacity: 1; } - .date-tooltip { background-color: #D3D3D3; border-radius: 2px; @@ -982,64 +503,37 @@ body { z-index: 1; position: absolute; text-align: center; - width: 120px; + width: 100px; padding: 2px 0; font: normal normal normal 12px/17px Adobe Clean; margin-left: 100px; } - .column1 { margin-left: 45px; } - .column1 { width: 200px; } - .column3 { width: 140px; } - -.column4, .column5, .column6 { +.column4, & .column5, & .column6 { width: 110px; } - .column2 { width: 130px; } - .column7 { width: 170px; } - .column8 { width: 120px; } - .column9 { width: 150px; - word-wrap: break-word; - white-space: normal; - line-height: 1.2; } - .table-column { &:not(:last-child) { margin-right: 85px; } } - -@media (max-width: 1255px) { - .column9 { - width: 100px; - } -} - -.hide-overflow { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - line-clamp: 3; - overflow: hidden; - text-overflow: ellipsis; -} diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index c7e2f018..5347cb4a 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -1,112 +1,67 @@ import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; +import { getQueryVariable } from '../../scripts/shared.js'; import { executeQuery } from '../../scripts/graphql.js'; -import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray } from '../../scripts/shared-program.js'; +import { resolveMappings, filterArray, getProductMapping, checkBlankString } from '../../scripts/shared-program.js'; import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; let blockConfig; -const queryVars = extractQueryVars(); -const programName = queryVars.programName; -const programID = queryVars.programID; -const deliverableMappings = getMappingArray('deliverableType'); -const platformMappings = getMappingArray('platforms'); -const taskStatusMappings = getMappingArray('taskStatus'); -const startDateProp = 'taskPlannedStartDate'; -const endDateProp = 'taskPlannedEndDate'; -let viewStart, viewEnd, calendarDeliverables; - -// Thumbnail cache array object to store the image objects using cacheKey = `${programName}-${campaignName}-${deliverableType}`; -const thumbnailCache = {}; +const programName = getQueryVariable('programName'); +const programRefNumber = getQueryVariable('programReferenceNumber'); +const deliverableMappings = resolveMappings("getDeliverableTypeMapping"); +const platformMappings = resolveMappings("getPlatformsMapping"); export default async function decorate(block) { + const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); - const encodedPath = queryVars.path ? `${encodeURIComponent(queryVars.path)}` : ''; + const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programReferenceNumber=${encodeURIComponent(programRefNumber)}`; + const programData = await executeQuery(programQueryString); + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}`; + const deliverables = await executeQuery(deliverableQueryString); - blockConfig = readBlockConfig(block); - // Including path in the query if present - const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}` + - (encodedPath ? `${encodedSemi}path=${encodedPath}` : ''); + const p0TargetMarketArea = programData.data.programList.items[0].p0TargetMarketArea; + const p1TargetMarketArea = programData.data.programList.items[0].p1TargetMarketArea; - const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; + // Extract unique deliverable types + const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); + // Extract unique platforms (flattened from arrays within each item) + const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); - // Immediately render a placeholder header + const program = programData.data.programList.items[0]; + const kpis = buildKPIList(program).outerHTML; + + const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; + + const audiences = buildAudienceList(program).outerHTML; + const date = formatDate(program.launchDate); + const artifactLinks = buildArtifactLinks(program).outerHTML; + blockConfig = readBlockConfig(block); block.innerHTML = `
Back
-
Loading program details...
-
- `; - - // Wait for program data to render the actual header - const programData = await executeQuery(programQueryString); - const program = programData.data.programList.items[0]; - - let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; - let totalassets = 0; - let header = block.querySelector('.placeholder-header'); - - if (!(program === undefined)) { - const programHeader = buildHeader(program, queryVars).outerHTML; - // Update the header with the actual data - header.outerHTML = programHeader; - try { - imageObject = await searchAsset(program.programName, program.campaignName); - if (imageObject) { - insertImageIntoCampaignImg(block, imageObject); - totalassets = imageObject.assetCount; - } - } catch (error) { - console.error("Failed to load campaign image:", error); - } - decorateIcons(block); - } else { - //programName and campaignName is null - header.textContent = 'Unable to retrieve program information.'; - block.innerHTML = ` -
- - Back -
-
- ${header.outerHTML} -
No program data available.
+
+
+
+
+
+ ${program.programName} +
+ ${program.campaignName ? '
' + program.campaignName + '
': ""} +
+ + Launch date + ${date} +
+
- `; - try { - //programName and campaignName is null display under development icon - imageObject = await searchAsset(null, null); - if (imageObject) { - insertImageIntoCampaignImg(block, imageObject); - totalassets = imageObject.assetCount; - } - } catch (error) { - console.error("Failed to load campaign image:", error); - } - - decorateIcons(block); - enableBackBtn(block, blockConfig); - return; - } - - const p0TargetMarketArea = program.p0TargetMarketArea; - const p1TargetMarketArea = program.p1TargetMarketArea; - const kpis = buildKPIList(program).outerHTML; - const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; - const audiences = buildAudienceList(program).outerHTML; - const artifactLinks = buildArtifactLinks(program).outerHTML; - - const currentYear = new Date().getFullYear(); - - // Inject the additional HTML content - block.querySelector('.main-body-wrapper').innerHTML += `
Overview
Deliverables
-
Calendar
+
Calendar
@@ -169,165 +124,67 @@ export default async function decorate(block) {
${artifactLinks} -
-
Total Approved Assets
- ${totalassets} - To view the assets, go to the "All Asset" search page and use Program and Campaign name facet to filter the assets +
+
Total Assets
+
-
Deliverable Task Name
+
Deliverable Name
Deliverable Type
Platforms
-
QA Files
+
Review Link
Final Asset
Status Update
Completion Date
-
Task Owner
+
Project Owner
-
-
-
-
-
- -
-
- -
-
-
${currentYear}
-
-
-
Today
-
-
-
Selected View: Year
- - -
-
-
-
-
`; - - // Wait for deliverables data - const deliverables = await executeQuery(deliverableQueryString); - - const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); - const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); - buildProductCard(program); - buildFieldScopes('deliverable-type', uniqueDeliverableTypes, block); - buildFieldScopes('platforms', uniquePlatforms, block); - - const table = await buildTable(await deliverables).then(async (rows) => { - return rows; - }); - - // Batch Dom Updates - const tableRoot = block.querySelector('.table-content'); - const fragment = document.createDocumentFragment(); - fragment.appendChild(table); - tableRoot.appendChild(fragment); - - buildStatus(program.status); - - // Optimize Event Listeners: Added debouncing to event listeners to prevent performance issues. - const debounce = (func, delay) => { - let timeout; - return (...args) => { - clearTimeout(timeout); - timeout = setTimeout(() => func(...args), delay); - }; - }; + try { + const imageObject = await searchAsset(program.programName, program.campaignName); + if (imageObject){ + insertImageIntoCampaignImg(block,imageObject); + document.getElementById('totalassets').textContent = imageObject.assetCount; + } + else + { + document.getElementById('totalassets').textContent = 0; + } + } catch (error) { + console.error("Failed to load campaign image:", error); + } - block.querySelector('.tab-wrapper').addEventListener('click', debounce((event) => { + block.querySelector('.tab-wrapper').addEventListener('click', (event) => { switchTab(event.target); - }, 300)); - - enableBackBtn(block, blockConfig); - + }) + block.querySelector('.back-button').addEventListener('click', () => { + const host = location.origin + getBaseConfigPath(); + const listPage = blockConfig.listpage; + document.location.href = host + `/${listPage}`; + }) block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { const readMore = event.target; const parent = readMore.parentElement; - const paragraph = parent.querySelector('.paragraph'); - paragraph.classList.toggle('hide-overflow'); - readMore.textContent = paragraph.classList.contains('hide-overflow') ? 'Read more' : 'Read less'; + parent.querySelector('.paragraph').classList.toggle('hide-overflow'); }); }); - decorateIcons(block); - buildCalendar(await deliverables, block, "year", await deliverableMappings); -} - -function enableBackBtn(block, blockConfig) { - block.querySelector('.back-button').addEventListener('click', () => { - const host = location.origin + getBaseConfigPath(); - const listPage = blockConfig.listpage; - document.location.href = host + `/${listPage}`; + buildFieldScopes('deliverable-type',uniqueDeliverableTypes, block); + buildFieldScopes('platforms',uniquePlatforms, block); + const table = await buildTable(await deliverables).then(async (rows) => { + return rows; }) -} - -function buildDriverField(driverName) { - const driverSpan = document.createElement('span'); - driverSpan.classList.add('driver-text'); - driverSpan.innerHTML = `Project Owner: ${driverName}`; - return driverSpan; -} - -function buildHeader(program, queryVars) { - const headerWrapper = document.createElement('div'); - headerWrapper.classList.add('details-header-wrapper'); - const date = program && program.launchDate ? `
` + - `Proposed Launch Date${formatDate(program.launchDate)}
` : ""; - const programName = program ? program.programName : queryVars.programName; - const campaignName = program && program.campaignName ? '
' + program.campaignName + '
': ""; - - const driver = program && program.driver ? program.driver : "Not Available"; - let driverField = ''; - - if (program){ - driverField=buildDriverField(driver).outerHTML; - } - - const releaseTier = ` -
- - Release Tier: ${program.releaseTier ? program.releaseTier : "Not Available"} -
`; - - const productGroup = ` -
- - ${program.productGroup && program.productGroup.length > 0 ? program.productGroup.join(', ') : "Not Available"} -
`; - - headerWrapper.innerHTML = ` -
-
-
-
- ${programName} -
- ${campaignName} -
- ${date} - ${driverField} - ${releaseTier} - ${productGroup} -
-
- ` - return headerWrapper; + const tableRoot = block.querySelector('.table-content'); + tableRoot.appendChild(table); + buildStatus(program.status); } /** @@ -346,20 +203,18 @@ function getUniqueItems(items, property) { )]; } -function insertImageIntoCampaignImg(block, imageObject) { +function insertImageIntoCampaignImg(block,imageObject) { const campaignImgDiv = block.querySelector('.campaign-img'); const imgElement = document.createElement('img'); - //Lazy load images - imgElement.loading = 'lazy'; imgElement.src = imageObject.imageUrl; imgElement.alt = imageObject.imageAltText; - if (campaignImgDiv) campaignImgDiv.appendChild(imgElement); + campaignImgDiv.appendChild(imgElement); } function switchTab(tab) { if (tab.classList.contains('active') || tab.classList.contains('tab-wrapper')) { return; - } + } document.querySelector('.tabBtn.active').classList.toggle('active'); document.querySelector(`.tab:not(.inactive)`).classList.toggle('inactive'); const targetTab = tab.dataset.target; @@ -478,7 +333,8 @@ function buildArtifactLinks(program) { async function buildStatus(status) { const statusDiv = document.createElement('div'); statusDiv.classList.add('campaign-status'); - const statusMatch = filterArray(statusMapping, 'value', status); + const statusArray = await resolveMappings("getStatusList"); + const statusMatch = filterArray(statusArray, 'value', status); const statusText = statusMatch ? statusMatch[0].text : status; const statusHex = statusMatch[0]["color-code"]; statusDiv.textContent = statusText; @@ -512,21 +368,17 @@ function formatDate(dateString) { // Formatting the date into mm/dd/yyyy format const formattedDate = mm + '/' + dd + '/' + yyyy; - + return formattedDate; } async function buildTable(jsonResponse) { const deliverableList = jsonResponse.data.deliverableList.items; const programKpi = jsonResponse.data.programList?.items.primaryKpi; - let rows = document.createElement('div'); - // we want the 'null' deliverableType to be part of this set for filtering - const uniqueCatSet = new Set(); - deliverableList.forEach(object => { uniqueCatSet.add(object['deliverableType']) }) - const uniqueCategories = Array.from(uniqueCatSet); - const sortedCategories = sortDeliverableTypes(uniqueCategories); + const rows = document.createElement('div'); + const uniqueCategories = getUniqueItems(deliverableList, 'deliverableType'); let emptyCategory = false; - sortedCategories.forEach(async (category) => { + uniqueCategories.forEach(async (category) => { // build header row let headerRow; const matchingCampaigns = deliverableList.filter(deliverable => deliverable.deliverableType === category); @@ -570,19 +422,6 @@ function dateSort(parent) { }) } -function sortDeliverableTypes(arr) { - return arr.sort((a, b) => { - // If a is null and b is not null, a should come after b - if (a === null && b !== null) return 1; - // If b is null and a is not null, b should come after a - if (a !== null && b === null) return -1; - // If both a and b are null, they are equal in terms of sorting - if (a === null && b === null) return 0; - // If neither a nor b are null, sort them alphabetically - return a.localeCompare(b); - }); -} - async function lookupType(rawText, mappingType) { const mappings = (mappingType === 'deliverable-type') ? await deliverableMappings : await platformMappings; const typeMatch = mappings.filter(item => item.value === rawText); @@ -602,7 +441,7 @@ async function buildHeaderRow(category, headerType, isInactive, matchCount) { const headerRow = document.createElement('div'); headerRow.classList.add('row', 'collapsible', 'header'); let divopen; - if (headerType === 'subcategory') { + if (headerType === 'subcategory') { headerRow.classList.add('subheader'); divopen = '
'; } else { @@ -627,14 +466,13 @@ async function buildTableRow(deliverableJson, kpi, createHidden) { const status = (deliverableJson.deliverableStatusUpdate == null) ? "Not Available" : deliverableJson.deliverableStatusUpdate + "%"; const statusPct = (deliverableJson.deliverableStatusUpdate == null) ? "0%" : deliverableJson.deliverableStatusUpdate + "%"; dataRow.innerHTML = ` -
${checkBlankString(deliverableJson.deliverableName)}
-
${checkBlankString(typeLabel)}
+
${deliverableJson.deliverableName}
+
${typeLabel}
-
- ${deliverableJson.reviewLink ? 'QA Files ': "Not Available"} +
+ Review Link
- ${deliverableJson.linkedFolderLink ? 'Final Asset ': "Not Available"}
@@ -649,11 +487,19 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
-
${dateFormat(deliverableJson.taskCompletionDate)}
+
${checkBlankString(deliverableJson.taskCompletionDate)}
${deliverableJson.previousTaskCompletionDate ? '
Revised from ' + deliverableJson.previousTaskCompletionDate + '
': ""}
${checkBlankString(deliverableJson.driver)}
`; + if (!(deliverableJson.linkedFolderLink == null)) { + const finalAssetLink = document.createElement('a'); + finalAssetLink.href = deliverableJson.linkedFolderLink; + finalAssetLink.classList.add('campaign-link'); + finalAssetLink.target = '_blank'; + finalAssetLink.textContent = "Final Asset"; + dataRow.querySelector('.column5').appendChild(finalAssetLink); + } createPlatformString(deliverableJson.platforms, dataRow); return dataRow; } @@ -679,7 +525,7 @@ function sortRows(rows) { nodes.sort((a, b) => { var classA = a.classList ? a.classList.contains('datarow') : false; var classB = b.classList ? b.classList.contains('datarow') : false; - + if (classA && !classB) { return 1; } else if (!classA && classB) { @@ -709,675 +555,3 @@ function attachListener(htmlElement) { }) }) } - -function extractQueryVars() { - const urlStr = window.location.href; - const pnRegex = /[?&]programName=([^&]+)&programID=([^&]+)(&path=([^&]+))?/; - const match = urlStr.match(pnRegex); - if (match && match[1] && match[2]) { - const pName = decodeURIComponent(match[1]); // Removed the replace method - let pID = decodeURIComponent(match[2]); - let pPath = match[4] ? decodeURIComponent(match[4]) : null; - if (pID.endsWith('#')) { - pID = pID.slice(0, -1); - } - return { - programName: pName, - programID: pID, - path: pPath - }; - } else { - return { - programName: 'Program Name Not Available', - programID: 'Program ID Not Available', - path: null - }; - } -} - -// program calendar view -async function buildCalendar(dataObj, block, type, mappingArray, period) { - if (!calendarDeliverables) calendarDeliverables = dataObj.data.deliverableList.items; - if (!deliverableMappings) deliverableMappings = await mappingArray; - if (!taskStatusMappings) taskStatusMappings = await taskStatusMappings; - - const programLaunch = document.querySelector('span.campaign-date').textContent; - const programLaunchDate = new Date(programLaunch); - - // multiple of 3 for width of column when viewing in quarter mode. can change this - // by adjusting the multiple below, and also the % width of the calendar background - // when drawing a 'quarter' calendar. - - const columnWidth = (type === "year") ? 8.315 : (8.315 * 3); - const currentDate = new Date(); - const currentYear = currentDate.getFullYear(); - - // if there are no deliverables, display msg to user and end construction. - if (calendarDeliverables.length === 0) { - const calendarTab = document.querySelector('.calendar.tab'); - calendarTab.innerHTML = ` -
Required Data is Unavailable for this view.
- `; - return; - } - - // get start of the view - viewStart = getTimeBounds(calendarDeliverables, "start", startDateProp); - viewStart = (!(isValidDate(viewStart)) || viewStart <= 0) ? programLaunchDate : viewStart; - const viewStartYear = viewStart.getUTCFullYear(); - - const displayYear = period ? period.year : viewStartYear; - const displayQuarter = period ? period.quarter : 1; - - const yearIndicator = block.querySelector('.inc-dec-wrapper .current-year'); - yearIndicator.dataset.year = displayYear; - yearIndicator.textContent = displayYear; - - // get end of the view - viewEnd = getTimeBounds(calendarDeliverables, "end", endDateProp); - if (!(isValidDate(viewEnd)) || viewEnd <= 0) { - viewEnd = new Date(viewStart); - viewEnd.setMonth(viewStart.getMonth() + 1); - } - const viewEndYear = viewEnd.getUTCFullYear(); - - // get array of all years to be included - let years = calendarYears(viewStartYear, viewEndYear); - - // disable increment/decrement if only one year in view - if (years.length === 1) { - document.querySelector('.inc-dec-wrapper > .year-switch').classList.add('disabled'); - } - - // build the calendar background here as we already know the period and style - let calendarEl; - if (type === "year") { - calendarEl = buildYearCal(years); - } else { - // if the last item ends in December we need another year to catch the Q1 n+1 finish - if (viewEnd.getUTCMonth = 11) { - years.push(viewEndYear + 1); - } - calendarEl = buildQuarterCal(years); - } - // get unique deliverable types - const uniqueGroups = getUniqueItems(calendarDeliverables, "deliverableType"); - - // set up the content wrapper - const contentWrapper = document.createElement('div'); - contentWrapper.classList.add('calendar-content-wrapper'); - if (type === "quarter") { - contentWrapper.classList.add('quarter-view'); - contentWrapper.dataset.view = "quarter"; - } else { - contentWrapper.dataset.view = "year"; - } - - var groupIndex = 1; - for (const group of uniqueGroups) { - const groupType = await lookupType(group, 'deliverable-type'); - // find all members of this group - const matchedItems = calendarDeliverables.filter(item => item.deliverableType === group); - - // find the earliest date- this is how we set the position for the group against the calendar - let earliestStartDate = getTimeBounds(matchedItems, "start", startDateProp); - earliestStartDate = (!(isValidDate(earliestStartDate)) || earliestStartDate <= 0) ? new Date(viewStart) : earliestStartDate; - let latestEndDate = getTimeBounds(matchedItems, "end", endDateProp); - latestEndDate = (!(isValidDate(latestEndDate)) || latestEndDate <= 0) ? new Date(viewEnd) : latestEndDate; - const startMonth = (earliestStartDate.getUTCMonth()); // getMonth returns 0-11 but this is desirable - const startDay = (earliestStartDate.getUTCDate() - 1); // if at start of month, we don't want to add any more margin - const endMonth = (latestEndDate.getUTCMonth()); - const endDay = (latestEndDate.getUTCDate() - 1); - - const groupStartYear = earliestStartDate.getUTCFullYear(); - const groupEndYear = latestEndDate.getUTCFullYear(); - - // accounting for different years in view - const startYearOffset = ((groupStartYear - viewStartYear) * 12); - const endYearOffset = ((groupEndYear - viewStartYear) * 12); - const totalDaysInMonth = new Date(Date.UTC(groupStartYear, startMonth, 0)).getUTCDate(); - const totalDaysInEndMonth = new Date(Date.UTC(groupEndYear, endMonth, 0)).getUTCDate(); - - const percentOfStartMonth = (startDay / totalDaysInMonth); - const percentOfEndMonth = (endDay / totalDaysInEndMonth); - const dayMargin = (percentOfStartMonth * columnWidth); - const endDayMargin = (percentOfEndMonth * columnWidth); - let startPosition = (((startYearOffset + startMonth) * columnWidth) + dayMargin).toFixed(2); - let endPosition = (((endYearOffset + endMonth) * columnWidth) + endDayMargin).toFixed(2); - - if (type === "quarter") { - startPosition = parseFloat(startPosition) + parseFloat(columnWidth); - endPosition = parseFloat(endPosition) + parseFloat(columnWidth); - } - - if (endMonth > 9) endPosition = endPosition - 0.35; - const widthOfGroup = (endPosition - startPosition); // width of group = start position + (day duration) - // calculate the duration of the group as that helps set the width of its members - const groupDuration = Math.floor((latestEndDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24)); - - const itemWrapper = document.createElement('div'); - itemWrapper.classList.add('group-content'); - - for (const item of matchedItems) { - const itemStartDate = (item[startDateProp]) ? new Date(item[startDateProp]) : viewStart; - const itemEndDate = (item[endDateProp]) ? new Date(item[endDateProp]) : viewEnd; - - const itemEndDateStr = itemEndDate ? itemEndDate.toLocaleDateString().split(',')[0] : null; - const itemDuration = Math.floor((itemEndDate.getTime() - itemStartDate.getTime()) / (1000 * 60 * 60 * 24)); - const itemDurationPct = ((itemDuration / groupDuration) * 100).toFixed(2); - - let daysDifference = Math.floor((itemStartDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24)); - const startPctDiff = ((daysDifference / groupDuration) * 100).toFixed(2); - let itemEl = document.createElement('div'); - itemEl.classList.add('item'); - itemEl.style.marginLeft = startPctDiff + '%'; - - // Find the corresponding color code from the taskStatusMappings array - const itemStatusMapping = await getTaskStatusMapping(item.taskStatus); - const { text: statusText = 'Unknown Status', 'color-code': colorCode = 'green' } = itemStatusMapping; - - // Create a placeholder for the thumbnail - itemEl.innerHTML = ` -
-
-
-
-
-
${item.deliverableName}
-
-
-
-
-
- ${itemEndDateStr ? '
End Date: ' + itemEndDateStr + '
' : ''} -
- QA Files -
-
-
- `; - itemEl.style.width = itemDurationPct + '%'; - - // Call the new function to fetch and add the thumbnail, ensuring sequential execution - await addThumbnailToItem(itemEl, item.programName, item.campaignName,item.deliverableType); - itemWrapper.appendChild(itemEl); - - }; - - //await lookupType(category, 'deliverable-type'); - const groupEl = document.createElement('div'); - groupEl.classList.add('calendar-group', `color${groupIndex}`); - groupEl.style.marginLeft = startPosition + '%'; - groupEl.style.width = widthOfGroup + '%'; - groupEl.innerHTML = ` -
-
- - -
${groupType}
-
${matchedItems.length}
-
-
-
-
- `; - groupEl.appendChild(itemWrapper); - groupEl.querySelectorAll('.group-controls').forEach((arrow) => { - arrow.addEventListener('click', showHideGroup); - }); - - contentWrapper.appendChild(groupEl); - groupIndex = (groupIndex === 5) ? 1 : groupIndex + 1; - }; - - calendarEl.appendChild(contentWrapper); - block.querySelector('.calendar.tab').appendChild(calendarEl); - - // populate "filter" dropdown - const filterDropdown = document.createElement('div'); - filterDropdown.classList.add('filter-dropdown-content'); - const uniqueYears = getUniqueYears(calendarDeliverables); - const yearOptionLabel = document.createElement('div'); - yearOptionLabel.classList.add('filter-label'); - yearOptionLabel.textContent = 'Year'; - const quarterOptionLabel = document.createElement('div'); - quarterOptionLabel.classList.add('filter-label'); - quarterOptionLabel.textContent = 'Quarter'; - filterDropdown.appendChild(yearOptionLabel); - - // when choosing 'Quarter' the top left controls change to control the quarter in focus - // its kind of a zoomed in view. - uniqueYears.forEach((year) => { - const yearOption = document.createElement('div'); - yearOption.classList.add('filter-option'); - yearOption.dataset.year = year; - yearOption.textContent = year; - yearOption.addEventListener('click', (event) => filterDropdownSelection(event, viewStartYear, years.length)); - filterDropdown.appendChild(yearOption); - }); - filterDropdown.appendChild(quarterOptionLabel); - const quarters = [ 1, 2, 3, 4 ]; - quarters.forEach((quarter) => { - const quarterOption = document.createElement('div'); - quarterOption.classList.add('filter-option'); - quarterOption.dataset.period = quarter; - quarterOption.textContent = quarter; - //quarterOption.addEventListener('click', filterDropdownSelection); - quarterOption.addEventListener('click', (event) => filterDropdownSelection(event, viewStartYear, years.length)); - filterDropdown.appendChild(quarterOption); - }) - - const filterDropdownWrapper = block.querySelector('.filter-dropdown-wrapper'); - filterDropdownWrapper.appendChild(filterDropdown); - filterDropdownWrapper.querySelector('.filter-dropdown-button').addEventListener('click', (event) => toggleDropdown(event.target)); - - // scroll to the right - const calendarWrapper = document.querySelector('.calendar-wrapper') - const scrollPct = calculateScroll(type, viewStartYear, displayYear, displayQuarter, years.length); - document.addEventListener('DOMContentLoaded', scrollOnInit(calendarWrapper, scrollPct)); - - // indicator that shows current day/month - const currentMonth = currentDate.getMonth() + 1; - // calculate the percentage completion of the current month for the indicator offset - const totalDaysInMonth = new Date((new Date(currentYear, currentMonth, 1)) - 1).getDate(); - const percentOfMonth = (currentDate.getUTCDate() / totalDaysInMonth).toFixed(2) * 100; - const monthEl = block.querySelector(`.month-wrapper[data-year='${currentYear}'] .month[data-num='${currentMonth}']`); - monthEl.classList.add('current'); - const lineEl = document.createElement('div'); - lineEl.classList.add('calendar-indicator'); - // use direct style for offset - lineEl.style.marginRight = ((-2 * percentOfMonth) + 100) + '%'; - monthEl.appendChild(lineEl); - - // close dropdown listener for clicks outside open dropdown - document.querySelector('.gmo-program-details.block').addEventListener('click', dismissDropdown); - block.querySelectorAll('.year-switch > .year-toggle').forEach((control) => { - control.removeEventListener('click', changePeriod); - if (years.length > 1) { - control.addEventListener('click', changePeriod); - } - }); - block.querySelector('.right-controls .today-button').addEventListener('click', () => { - const calendarWrapper = document.querySelector('.calendar-wrapper') - // determine scroll pct for years. always use type = year because "today" doesn't care about quarters. - const yearScrollPct = calculateScroll("year", viewStartYear, currentYear, displayQuarter, years.length); - // determine how far through the current year we are - const now = new Date(); - now.setHours(0,0,0,0); - const dateDiff = Math.floor((now - new Date(now.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24)); - const dayPct = (((dateDiff) * ((1 / years.length) / 365)) * 100); - // get total scroll percent by adding year + day scroll pct - const totalScroll = (parseFloat(yearScrollPct) + parseFloat(dayPct)).toFixed(2); - // scroll to position - scrollToPosition(calendarWrapper, totalScroll); - }); -} - -// calendar view supporting functions - -// Helper function to get task status mapping -async function getTaskStatusMapping(taskStatus) { - const taskStatusArray = await taskStatusMappings; - return taskStatusArray.find(mapping => mapping.value === taskStatus) || {}; -} - -async function addThumbnailToItem(itemEl, programName, campaignName, deliverableType) { - // Create a unique key for the cache based on the parameters, only add the campaignName in cacheKey when it is not null or empty - const cacheKey = campaignName ? `${programName}-${campaignName}-${deliverableType}` : `${programName}-${deliverableType}`; - - // Check if the imageObject is already cached - let imageObject = thumbnailCache[cacheKey]; - - // If not cached, make the API call and store the result in the cache - if (!imageObject) { - try { - imageObject = await searchAsset(programName, campaignName, deliverableType); - thumbnailCache[cacheKey] = imageObject; // Store the result in the cache - } catch (error) { - console.error("Failed to load thumbnail image:", error); - return; // Exit the function if the API call fails - } - } - - // Use the cached or newly fetched imageObject - if (imageObject && imageObject.imageUrl) { - const thumbnailDiv = itemEl.querySelector('.thumbnail'); - const imgElement = document.createElement('img'); - imgElement.src = imageObject.imageUrl; - imgElement.alt = imageObject.imageAltText; - imgElement.loading = 'lazy'; - thumbnailDiv.appendChild(imgElement); - } else { - console.error("Image Object does not have a valid imageUrl"); - } -} - -function getTimeBounds(items, whichEnd, property) { - const desiredDate = items.reduce((dateCompare, currentItem) => { - const currentItemDate = new Date(currentItem[property]); // Ensure UTC - if (whichEnd === "start") { - return currentItemDate < dateCompare ? currentItemDate : dateCompare; - } else { - return currentItemDate > dateCompare ? currentItemDate : dateCompare; - } - }, new Date(items[0][property])); - return desiredDate; -} - -function showHideGroup(event) { - const arrow = event.target; - const group = arrow.closest('.calendar-group'); - group.querySelector('.group-content').classList.toggle('inactive'); - group.querySelector('.group-expand').classList.toggle('inactive'); - group.querySelector('.group-collapse').classList.toggle('inactive'); - group.querySelector('.group-header').classList.toggle('content-hidden') -} - -function changePeriod(event) { - const arrow = event.target; - const direction = arrow.dataset.direction; - const wrapper = arrow.closest('.inc-dec-wrapper'); - const yearEl = wrapper.querySelector('.current-year'); - const contentWrapper = document.querySelector('.calendar-content-wrapper'); - const view = contentWrapper.dataset.view; - const currentYear = parseInt(yearEl.dataset.year); - const maxYear = viewEnd.getUTCFullYear(); // Use the maximum year from the viewEnd variable - const minYear = viewStart.getUTCFullYear(); // Use the minimum year from the viewStart variable - - let newPeriod, newYear, newQuarter; - - if (view === "quarter") { - const currentQuarter = parseInt(yearEl.dataset.quarter); - newQuarter = (direction == 'right') ? (currentQuarter + 1) : (currentQuarter - 1); - newYear = currentYear; - if (newQuarter > 4) { - newQuarter = 1; - newYear = currentYear + 1; - } - if (newQuarter < 1) { - newQuarter = 4; - newYear = currentYear - 1; - } - } else { - newYear = (direction == 'right') ? (currentYear + 1) : (currentYear - 1); - newQuarter = 1; - } - - // Prevent the year from going beyond the maximum or minimum year - if (newYear > maxYear || newYear < minYear) { - return; - } - - newPeriod = { 'year': newYear, 'quarter': newQuarter }; - refreshCalendar(newPeriod, view); -} - -function getUniqueYears(items) { - const yearsSet = new Set(); - items.forEach(item => { - const startDate = item[startDateProp]; - if (startDate) { - const year = startDate.split('-')[0]; - yearsSet.add(year); - } - }); - if (yearsSet.size === 0) { - const startYear = viewStart.getFullYear(); - const endYear = viewEnd.getFullYear(); - for (let year = startYear; year <= endYear; year++) { - yearsSet.add(year); - } - } - const years = Array.from(yearsSet); - years.sort((a, b) => parseInt(a) - parseInt(b)); - return years; -} - -// handle clicking on the year button -function toggleDropdown(element) { - const dropdown = element.closest('.filter-dropdown-wrapper'); - const iconChevronDown = dropdown.querySelector('.icon-chevronDown'); - const iconChevronUp = dropdown.querySelector('.icon-chevronUp'); - - iconChevronDown.classList.toggle('inactive'); - iconChevronUp.classList.toggle('inactive'); - dropdown.classList.toggle('active'); -} - -// handle clicks outside the dropdown -function dismissDropdown(event) { - const isInsideDropdown = event ? event.target.closest('.filter-dropdown-wrapper') : false; - if (!isInsideDropdown) { - const dropdown = document.querySelector('.filter-dropdown-wrapper'); - dropdown.querySelector('.icon-chevronDown').classList.remove('inactive'); - dropdown.querySelector('.icon-chevronUp').classList.add('inactive'); - dropdown.classList.remove('active'); - } -} - -function filterDropdownSelection(event, viewStartYear, numYears) { - // if we're hopping views, redraw the calendar - // if not just scroll - const calendarContentEl = document.querySelector('.calendar-content-wrapper'); - const currentView = calendarContentEl.dataset.view; - - const optionEl = event.target; - let year, quarter, view; - if (("period") in optionEl.dataset) { - // quarter view - quarter = optionEl.dataset.period; - year = document.querySelector('.inc-dec-wrapper .current-year').dataset.year; - view = "quarter"; - } else { - // year view - view = "year"; - year = optionEl.dataset.year; - quarter = 1; - } - - const period = { 'year': year, 'quarter': quarter } - - if (currentView === view) { - // scroll over - const scrollPct = calculateScroll(view, viewStartYear, year, quarter, numYears); - const calendarWrapper = document.querySelector('.calendar-wrapper'); - scrollToPosition(calendarWrapper, scrollPct); - } else { - const viewStr = view.charAt(0).toUpperCase() + view.slice(1); - document.querySelector('.filter-dropdown-button > .label').textContent = `Selected View: ${viewStr}`; - refreshCalendar(period, view); - } - dismissDropdown(); -} - -// retrieve the year via js when refreshing in quarter view -function refreshCalendar(period, view) { - const block = document.querySelector('.gmo-program-details.block'); - const yearEl = block.querySelector('.inc-dec-wrapper .current-year'); - yearEl.dataset.year = period.year; - yearEl.dataset.quarter = period.quarter; - - if (view === "year") { - yearEl.textContent = period.year; - } else { - yearEl.textContent = `Q${period.quarter} ${period.year}`; - } - - - // trick to remove event listeners - block.querySelector('.filter-dropdown-wrapper').outerHTML += ''; - block.querySelector('.right-controls .today-button').outerHTML += ''; - - block.querySelector('.calendar-wrapper').remove(); - block.querySelector('.filter-dropdown-content').remove(); - - buildCalendar(calendarDeliverables, block, view, deliverableMappings, period); -} - -function calendarYears(startYear, endYear) { - let years = []; - for (let year = startYear; year <= endYear; year++) { - years.push(year); - } - return years; -} - -function buildYearCal(years) { - const calendarEl = document.createElement('div'); - calendarEl.classList.add('calendar-wrapper'); - if (years.length > 1) calendarEl.classList.add('multiyear'); - const backgroundEl = document.createElement('div'); - backgroundEl.classList.add('calendar-background'); - backgroundEl.style.width = (years.length * 100) + '%'; - - years.forEach((year) => { - const yearWrapper = document.createElement('div'); - yearWrapper.dataset.year = year; - yearWrapper.classList.add('year-wrapper'); - yearWrapper.style.width = (100 / years.length) + '%'; - const calendarHeader = document.createElement('div'); - calendarHeader.classList.add('header-wrapper'); - const quartersHeader = document.createElement('div'); - quartersHeader.classList.add('quarter-header'); - quartersHeader.innerHTML = ` -
Q1 ${year}
-
Q2 ${year}
-
Q3 ${year}
-
Q4 ${year}
- `; - calendarHeader.appendChild(quartersHeader); - - const monthsWrapper = document.createElement('div'); - monthsWrapper.classList.add('month-wrapper'); - monthsWrapper.dataset.year = year; - monthsWrapper.innerHTML = ` -
Jan
-
Feb
-
Mar
-
Apr
-
May
-
Jun
-
Jul
-
Aug
-
Sep
-
Oct
-
Nov
-
Dec
- `; - yearWrapper.appendChild(calendarHeader); - yearWrapper.appendChild(monthsWrapper); - backgroundEl.appendChild(yearWrapper); - }); - calendarEl.appendChild(backgroundEl); - return calendarEl; -} - - -function buildQuarterCal(years) { - const calendarEl = document.createElement('div'); - calendarEl.classList.add('calendar-wrapper', 'quarter-view'); - if (years.length > 1) calendarEl.classList.add('multiyear'); - const backgroundEl = document.createElement('div'); - backgroundEl.classList.add('calendar-background'); - // this is wider for 'quarter' view- see equivalent in 'year' view. - backgroundEl.style.width = (years.length * 300) + '%'; - - years.forEach((year) => { - const yearWrapper = document.createElement('div'); - yearWrapper.dataset.year = year; - yearWrapper.classList.add('year-wrapper'); - yearWrapper.style.width = (100 / years.length) + '%'; - const calendarHeader = document.createElement('div'); - calendarHeader.classList.add('header-wrapper'); - const quartersHeader = document.createElement('div'); - quartersHeader.classList.add('quarter-header'); - quartersHeader.innerHTML = ` -
Fiscal Q1 ${year}
-
Fiscal Q2 ${year}
-
Fiscal Q3 ${year}
-
Fiscal Q4 ${year}
- `; - calendarHeader.appendChild(quartersHeader); - - const monthsWrapper = document.createElement('div'); - monthsWrapper.classList.add('month-wrapper'); - monthsWrapper.dataset.year = year; - monthsWrapper.innerHTML = ` -
Dec Q1
-
Jan Q1
-
Feb Q1
-
Mar Q2
-
Apr Q2
-
May Q2
-
Jun Q3
-
Jul Q3
-
Aug Q3
-
Sep Q4
-
Oct Q4
-
Nov Q4
- `; - yearWrapper.appendChild(calendarHeader); - yearWrapper.appendChild(monthsWrapper); - backgroundEl.appendChild(yearWrapper); - }); - calendarEl.appendChild(backgroundEl); - return calendarEl; -} - -function scrollOnInit(element, scrollPct) { - // Observer to detect when the element becomes visible - const observer = new IntersectionObserver((entries, observer) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - resizeGroups(); - scrollToPosition(element, scrollPct); - observer.disconnect(); // Stop observing after scrolling - } - }); - }); - - // Start observing the element - observer.observe(element); -} - -function getHorizontalOverflow(element) { - return element.scrollWidth - element.clientWidth; -} - -function resizeGroups() { - const groups = document.querySelectorAll('.calendar-group'); - groups.forEach((group) => { - const overflow = getHorizontalOverflow(group); - if (overflow) { - group.querySelector('.group-header').style.paddingRight = overflow + 'px'; - group.style.paddingRight = overflow + 'px'; - } - }) -} - -function scrollToPosition(element, scrollPct) { - const maxScrollLeft = element.scrollWidth; - const scrollAmt = (maxScrollLeft) * (scrollPct / 100); - element.scrollTo({ - left: scrollAmt, // Replace with desired position - behavior: 'smooth' // Optional: for smooth scrolling - }); -} - -function calculateScroll(type, viewStartYear, displayYear, displayQuarter, numYears) { - const yearDiff = displayYear - viewStartYear; - const yearWidthOffsetPct = (((yearDiff / numYears)) * 100); - - if (type === "quarter") { - return ((yearWidthOffsetPct) + ((displayQuarter - 1) * ((1 / numYears) / 4)) * 100).toFixed(2); - } else { - return (yearWidthOffsetPct).toFixed(2); - } -} - -function isValidDate(dateObj) { - return dateObj instanceof Date && !isNaN(dateObj); -} diff --git a/blocks/gmo-program-header/gmo-program-header.css b/blocks/gmo-program-header/gmo-program-header.css index 1559e603..ac30d581 100644 --- a/blocks/gmo-program-header/gmo-program-header.css +++ b/blocks/gmo-program-header/gmo-program-header.css @@ -1,7 +1,7 @@ -.gmo-program-header.block { +.gmo-campaign-header.block { display: flex; flex-direction: column; - margin-top: 45px; + margin-top: 20px; } .inputs-wrapper { display: flex; diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index 00f8cc61..98e15246 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -1,6 +1,9 @@ import { decorateIcons } from '../../scripts/lib-franklin.js'; -import { graphqlCampaignByName } from '../../scripts/graphql.js'; -import { statusMapping, productList, getMappingArray } from '../../scripts/shared-program.js'; +import { graphqlQueryNameList, graphqlCampaignByName } from '../../scripts/graphql.js'; +import { statusMapping, productList } from '../../scripts/shared-program.js'; + +// Declared at the top of the file, making it accessible to all functions within this file. +let allProducts = []; export default async function decorate(block) { block.innerHTML = ` @@ -125,31 +128,32 @@ export default async function decorate(block) { sendGmoCampaignListBlockEvent(); }); - initializeDropdowns(); - // Attach event listeners for the dropdowns and reset filters + await initializeDropdowns(); attachEventListeners(); decorateIcons(block); - document.addEventListener('click', handleClickOutside); } async function initializeDropdowns() { // Business Line List - getMappingArray('businessLine').then((response) => { - populateDropdown(response, 'dropdownBusinessOptions', 'businessLine'); - }); - // Geo List - getMappingArray('geoList').then((response) => { - populateDropdown(response, 'dropdownGeoOptions', 'p0TargetGeo'); - }); + const businessLineResponse = await graphqlQueryNameList('getBusinessLine'); + const businessLines = businessLineResponse.data.jsonByPath.item.json.options; + populateDropdown(businessLines, 'dropdownBusinessOptions', 'businessLine'); // Status List const statusResponse = await statusMapping; - populateDropdown(statusResponse, 'dropdownStatusOptions', 'status'); + const statuses = statusResponse.data.jsonByPath.item.json.options; + populateDropdown(statuses, 'dropdownStatusOptions', 'status'); // Product List const productResponse = await productList; - populateDropdown(productResponse, 'dropdownProductOptions', 'productOffering'); + allProducts = productResponse.data.jsonByPath.item.json.options; + populateDropdown(allProducts, 'dropdownProductOptions', 'productOffering'); + + // Geo List + const geoResponse = await graphqlQueryNameList('getGeoList'); + const geos = geoResponse.data.jsonByPath.item.json.options; + populateDropdown(geos, 'dropdownGeoOptions', 'p0TargetGeo'); } // Function to attach event listeners @@ -169,21 +173,12 @@ function attachEventListeners() { if (resetFiltersBtn) { resetFiltersBtn.addEventListener('click', resetFiltersClickHandler); } -} -function populateDropdown(response, dropdownId, type) { - const options = response.data?.jsonByPath ? response.data.jsonByPath.item.json.options : response; - //Sort the options alphabetically - options.sort((a, b) => { - if (a.text < b.text) { - return -1; - } - if (a.text > b.text) { - return 1; - } - return 0; - }); + // Add event listener for clicks outside of dropdowns + document.addEventListener('click', handleClickOutside); +} +function populateDropdown(options, dropdownId, type) { let dropdownContent = document.getElementById(dropdownId); dropdownContent.innerHTML = ''; options.forEach((option, index) => { @@ -194,17 +189,13 @@ function populateDropdown(response, dropdownId, type) { anchor.dataset.type = type; anchor.className = "dropoption"; anchor.textContent = option.text; - anchor.addEventListener('click', dropOptionClickHandler); dropdownContent.appendChild(anchor); }); - // add event listener to button - const button = dropdownContent.parentElement.querySelector(".dropdown-button"); - button.addEventListener('click', dropdownButtonClickHandler); } // Function to filter products based on selected business line function filterProductsByBusinessLine(businessLine) { - const filteredProducts = productList.filter(product => + const filteredProducts = allProducts.filter(product => product['business-line'].includes(businessLine) ); populateDropdown(filteredProducts, 'dropdownProductOptions', 'productOffering'); @@ -333,7 +324,7 @@ function resetAllFilters() { function resetProductsDropDown(){ // Populate all products into Products dropdown - populateDropdown(productList, 'dropdownProductOptions', 'productOffering'); + populateDropdown(allProducts, 'dropdownProductOptions', 'productOffering'); // Reset product offering filters removeSelectedProductOfferingFilters(); attachEventListeners(); diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css index 5e71b736..7ab7b32e 100644 --- a/blocks/gmo-program-list/gmo-program-list.css +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -26,20 +26,9 @@ body { display: flex; font-weight: bold; margin-bottom: 20px; - position: sticky; + padding-top: 5px; } -.list-items { - display: flex; - flex-direction: column; - overflow-y: scroll; - height: 65vh; - -ms-overflow-style: none; - scrollbar-width: none; - &::-webkit-scrollbar { - display: none; - } -} .column-header-wrapper { display: flex; } @@ -59,6 +48,10 @@ body { height: 14px; width: 14px; } +.list-items { + display: flex; + flex-direction: column; +} .campaign-row { display: flex; font-size: 14px; @@ -204,33 +197,28 @@ select { border-radius: 4px; } .column-1 { - width: 18%; + width: 28%; margin-right: 1%; } .column-2 { - width: 25%; + width: 40%; margin-right: 1%; } .column-3 { - width: 15%; + width: 12%; margin-right: 1%; } .column-4 { - width: 14%; + width: 16%; margin-right: 1%; } .column-5 { - width: 10%; + width: 13%; margin-right: 1%; } .column-6 { - width: 10%; - margin-right: 1%; -} -.column-7 { - width: 5%; + width: 14%; } - .status { width: 80px; text-align: center; @@ -262,7 +250,6 @@ select { .campaign-name-label, .campaign-name { position: relative; display: inline-block; - cursor: pointer; } .campaign-name-label:hover .tooltip { diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 7a9bd3cf..d1b94f1a 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -1,7 +1,7 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import { graphqlAllCampaignsFilter, graphqlCampaignCount, generateFilterJSON } from '../../scripts/graphql.js'; -import { getProductMapping, checkBlankString, statusMapping, dateFormat } from '../../scripts/shared-program.js' +import { getProductMapping, checkBlankString, statusMapping } from '../../scripts/shared-program.js' import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; @@ -17,7 +17,7 @@ const headerConfig = [ 'sortable': false }, { - 'name': 'Proposed Launch Date', + 'name': 'Launch Date', 'attribute': 'launch', 'sortable': true, 'type': 'date' @@ -30,26 +30,20 @@ const headerConfig = [ 'name': 'Status', 'attribute': 'status', 'sortable': false - }, - { - 'name': 'Geo', - 'attribute': 'geo', - 'sortable': false } ] -const DEFAULT_ITEMS_PER_PAGE = 8; //Global variables used by helper functions let currentPageInfo = {}; let cursorArray = []; let currentPage = 1; -let currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; +let currentNumberPerPage = 4; let currentGraphqlFilter = {}; -let totalPages = 0; //Get Campaign Count for pagination let campaignCount = await graphqlCampaignCount(); let blockConfig; +//Custom event gmoCampaignListBlock to allow the gmo-campaign-header to trigger the gmo-program-list to update document.addEventListener('gmoCampaignListBlock', async function() { //Build graphq filter that is passed to the graphql persisted queries const graphQLFilterArray = getFilterValues(); @@ -63,16 +57,18 @@ document.addEventListener('gmoCampaignListBlock', async function() { const block = document.querySelector('.gmo-program-list.block'); //Get Campaign Count for pagination campaignCount = await graphqlCampaignCount(currentGraphqlFilter); - + //Trigger loading the gmo-campaign-block //Reset page variables currentPageInfo = {}; cursorArray = []; currentPage = 1; - currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; - //Trigger loading the gmo-campaign-block + currentNumberPerPage = 4; + decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); + }); + export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) { if (blockConfig == undefined) blockConfig = readBlockConfig(block); const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter); @@ -82,7 +78,7 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, currentPageInfo.currentCursor = cursor; //Next Page if (currentPageInfo.hasNextPage){ - currentPageInfo.nextCursor = currentPageInfo.endCursor === undefined ? campaigns[campaigns.length - 1].cursor : currentPageInfo.endCursor; + currentPageInfo.nextCursor = campaigns[campaigns.length - 1].cursor; } if (!previousPage && !nextPage) @@ -95,12 +91,8 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, cursorArray.push(item.cursor); }); } - currentPageInfo.itemCount = campaigns.length; - // Calculate total number of pages - totalPages = Math.ceil(campaignCount / currentNumberPerPage); - const listHeaders = buildListHeaders(headerConfig); const listItems = await buildCampaignList(campaigns, numPerPage); const listFooter = buildListFooter(campaignCount, numPerPage); @@ -113,44 +105,32 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, listContainer.appendChild(listHeaders); listContainer.appendChild(listItems); listContainer.appendChild(listFooter); - // Show Hide Previous and Next Page buttons - togglePaginationButtons(); - - decorateIcons(block); - - // Lazy loading for images - document.addEventListener('DOMContentLoaded', function() { - if ('IntersectionObserver' in window) { - const lazyImages = document.querySelectorAll('.lazy'); - const observer = new IntersectionObserver((entries, observer) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - const img = entry.target; - img.src = img.dataset.src; - img.classList.remove('lazy'); - observer.unobserve(img); - } - }); - }); - lazyImages.forEach(img => observer.observe(img)); - } - }); -} - -function togglePaginationButtons() { - const footerPrev = document.querySelector('.footer-pagination-button.prev'); + //Show Hide Previous and Next Page buttons const footerNext = document.querySelector('.footer-pagination-button.next'); - if (currentPage > 1) { - footerPrev.classList.add('active'); + const footerPrev = document.querySelector('.footer-pagination-button.prev'); + if (currentPageInfo.hasPreviousPage){ + footerPrev.classList.add('active'); } else { - footerPrev.classList.remove('active'); + footerPrev.classList.remove('active'); } - if (currentPage < totalPages) { - footerNext.classList.add('active'); + if (currentPageInfo.hasNextPage){ + footerNext.classList.add('active'); } else { - footerNext.classList.remove('active'); + footerNext.classList.remove('active'); } + decorateIcons(block); + + //Debug Global Variables + //debug_console(); +} + +function debug_console(){ + console.log('currentPageInfo',currentPageInfo); + console.log('cursorArray',cursorArray); + console.log('currentPage',currentPage); + console.log('campaignCount',campaignCount); + } function getFilterValues(){ @@ -178,11 +158,6 @@ async function buildCampaignList(campaigns, numPerPage) { for (const campaign of campaigns) { const index = campaigns.indexOf(campaign); const campaignRow = document.createElement('div'); - const programName = campaign.node.programName; - const campaignName = campaign.node.campaignName; - const programID = campaign.node.programID ? campaign.node.programID : ""; - const path = campaign.node._path; - campaignRow.classList.add('campaign-row'); if ((index + 1) > numPerPage) campaignRow.classList.add('hidden'); @@ -190,43 +165,41 @@ async function buildCampaignList(campaigns, numPerPage) { campaignInfoWrapper.classList.add('campaign-info-wrapper', 'column-1'); const campaignIconLink = document.createElement('a'); - let campaignDetailsLink = host + `/${detailsPage}?programName=${programName}&`; - campaignDetailsLink += `programID=${programID}`; - campaignDetailsLink += `&path=${path}`; + let campaignDetailsLink = host + `/${detailsPage}?programName=${campaign.node.programName}&`; + campaignDetailsLink += `programReferenceNumber=${campaign.node.programReferenceNumber ? campaign.node.programReferenceNumber : ""}` campaignIconLink.href = campaignDetailsLink; + const campaignIcon = document.createElement('div'); campaignIcon.classList.add('campaign-icon'); - campaignIcon.dataset.programname = programName; - campaignIcon.dataset.campaignname = campaignName; - campaignIcon.dataset.programid = programID; - addThumbnail(campaignIcon, programName, campaignName); + campaignIcon.dataset.programname = campaign.node.programName; + campaignIcon.dataset.campaignname = campaign.node.campaignName; + //Add Icon Image + const iconImage = document.createElement('img'); + try { + const imageObject = await searchAsset(campaign.node.programName, campaign.node.campaignName); + iconImage.src = imageObject.imageUrl; + iconImage.alt = imageObject.imageAltText; + } catch (error) { + } + // Append the image to the campaignIcon div + campaignIcon.appendChild(iconImage); campaignIconLink.appendChild(campaignIcon); - const campaignNameWrapper = document.createElement('div'); - campaignNameWrapper.classList.add('campaign-name-wrapper', 'vertical-center'); + const campaignName = document.createElement('div'); + campaignName.classList.add('campaign-name-wrapper', 'vertical-center'); - campaignNameWrapper.innerHTML = ` + campaignName.innerHTML = `
- ${checkBlankString(programName)} + ${checkBlankString(campaign.node.programName)} Program Name
- ${checkBlankString(campaignName,'Marketing Moment Not Available')} + ${checkBlankString(campaign.node.campaignName)} Marketing Moment
`; - - // Add click event to the campaign name label and text - const campaignNameLabel = campaignNameWrapper.querySelector('.campaign-name-label'); - const campaignNameText = campaignNameWrapper.querySelector('.campaign-name'); - campaignNameLabel.addEventListener('click', () => { - window.location.href = campaignDetailsLink; - }); - campaignNameText.addEventListener('click', () => { - window.location.href = campaignDetailsLink; - }); - + campaignInfoWrapper.appendChild(campaignIconLink); - campaignInfoWrapper.appendChild(campaignNameWrapper); + campaignInfoWrapper.appendChild(campaignName); const campaignOverviewWrapper = document.createElement('div'); campaignOverviewWrapper.classList.add('column-2', 'campaign-description-wrapper', 'vertical-center'); @@ -238,7 +211,7 @@ async function buildCampaignList(campaigns, numPerPage) { campaignOverviewWrapper.appendChild(campaignOverview); const campaignLaunch = document.createElement('div'); - campaignLaunch.textContent = dateFormat(campaign.node.launchDate); + campaignLaunch.textContent = checkBlankString(campaign.node.launchDate); campaignLaunch.classList.add('column-3', 'campaign-launch-date', 'vertical-center'); campaignLaunch.dataset.property = 'launch'; @@ -248,60 +221,31 @@ async function buildCampaignList(campaigns, numPerPage) { var campaignStatusWrapper = document.createElement('div'); campaignStatusWrapper.classList.add('status-wrapper', 'column-6', 'vertical-center'); campaignStatusWrapper = buildStatus(campaignStatusWrapper, campaign); - - const campaignGeo = document.createElement('div'); - campaignGeo.textContent = formatGeos(campaign.node.p0TargetGeo); - campaignGeo.classList.add('column-7', 'vertical-center'); - campaignGeo.dataset.property = 'geo'; - campaignRow.appendChild(campaignInfoWrapper); campaignRow.appendChild(campaignOverviewWrapper); campaignRow.appendChild(campaignLaunch); campaignRow.appendChild(campaignProducts); campaignRow.appendChild(campaignStatusWrapper); - campaignRow.appendChild(campaignGeo); listWrapper.appendChild(campaignRow); } return listWrapper; } -function formatGeos(geoArray) { - return geoArray.map(geo => geo.toUpperCase()).join(', '); -} - function buildStatus(statusWrapper, campaign) { const campaignStatus = document.createElement('div'); const statusStr = checkBlankString(campaign.node.status); - const statusMatch = statusMapping.filter(item => item.value === statusStr); - - let statusText, statusColor; - if (statusMatch.length > 0) { - statusText = statusMatch[0].text; - statusColor = statusMatch[0]["color-code"]; - } else { - statusText = statusStr; - statusColor = "BABABA"; - } - + const statusArray = statusMapping.data.jsonByPath.item.json.options; + const statusMatch = statusArray.filter(item => item.value === statusStr); + const statusText = statusMatch.length > 0 ? statusMatch[0].text : statusStr; campaignStatus.textContent = statusText; - campaignStatus.style.backgroundColor = "#" + statusColor; + campaignStatus.style.backgroundColor = "#" + statusMatch[0]["color-code"]; campaignStatus.classList.add('status'); campaignStatus.dataset.property = 'status'; statusWrapper.appendChild(campaignStatus); return statusWrapper; } -async function addThumbnail(parentElement, programName, campaignName) { - const response = await searchAsset(programName, campaignName); - if (response?.imageUrl && response?.imageAltText) { - const iconImage = document.createElement('img'); - iconImage.src = response.imageUrl; - iconImage.alt = response.imageAltText; - parentElement.appendChild(iconImage); - } -} - async function buildProduct(product) { const productParent = document.createElement('div'); const productMapping = await getProductMapping(product); @@ -363,7 +307,6 @@ function buildListHeaders(headerConfig) { function buildListFooter(rows, rowsPerPage) { const pages = Math.ceil(rows / rowsPerPage); - totalPages = pages; const footerWrapper = document.createElement('div'); footerWrapper.classList.add('list-footer', 'footer-wrapper'); footerWrapper.dataset.pages = pages; @@ -378,13 +321,9 @@ function buildListFooter(rows, rowsPerPage) { const footerPrev = document.createElement('div'); footerPrev.classList.add('footer-pagination-button', 'prev'); footerPrev.textContent = 'Prev'; - footerPrev.addEventListener('click', (event) => { - // Disable the button - footerPrev.classList.remove('active'); - footerPrev.classList.add('disabled'); prevPage(event.target); - }); + }) const footerPageBtnsWrapper = document.createElement('div'); footerPageBtnsWrapper.classList.add('footer-pages-wrapper'); @@ -393,13 +332,9 @@ function buildListFooter(rows, rowsPerPage) { //Show current page buildCurrentPageDivElement(currentPage, footerPageBtnsWrapper); - footerNext.addEventListener('click', (event) => { - // Disable the button - footerNext.classList.remove('active'); - footerNext.classList.add('disabled'); + footerNext.addEventListener('click', (event) => { nextPage(event.target); - }); - + }) footerNext.textContent = 'Next'; footerPagination.appendChild(footerPrev); footerPagination.appendChild(footerPageBtnsWrapper); @@ -416,6 +351,7 @@ function buildListFooter(rows, rowsPerPage) { const footerPerPageDropdown = document.createElement('select'); footerPerPageDropdown.id = 'per-page'; footerPerPageDropdown.innerHTML = ` + @@ -468,38 +404,35 @@ function repaginate(dropdown) { } function nextPage(nextBtn) { - if (currentPage < totalPages) { - currentPage++; - const block = document.querySelector('.gmo-program-list.block'); - decorate(block, currentNumberPerPage, currentPageInfo.nextCursor, false, true, currentGraphqlFilter); - - const prevBtn = document.querySelector('.footer-pagination-button.prev'); - prevBtn.classList.add('active'); - - if (currentPage === totalPages) { - nextBtn.classList.remove('active'); - } else { - nextBtn.classList.add('active'); - } + if (currentPageInfo.hasNextPage) { + //Calculate Next Page + currentPage++; + const block = document.querySelector('.gmo-program-list.block'); + decorate( block, currentNumberPerPage, currentPageInfo.nextCursor, false, true,currentGraphqlFilter); + if (!(nextBtn.classList.contains('active'))) { + return; + } + const prevBtn = document.querySelector('.footer-pagination-button.prev'); + prevBtn.classList.add('active'); } } function prevPage(prevBtn) { - if (currentPage > 1) { - currentPage--; - const block = document.querySelector('.gmo-program-list.block'); - - const currentCursor = currentPageInfo.currentCursor; - //Calculate cursor for previous page - const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage; - decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter); - const nextBtn = document.querySelector('.footer-pagination-button.next'); - nextBtn.classList.add('active'); - if (currentPage === 1) { - prevBtn.classList.remove('active'); - } else { - prevBtn.classList.add('active'); - } + if (currentPageInfo.hasPreviousPage) { + currentPage--; + const block = document.querySelector('.gmo-program-list.block'); + const currentCursor = currentPageInfo.currentCursor; + //Calculate cursor for previous page + const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage; + decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter); + if (!(prevBtn.classList.contains('active'))) { + return; + } + const nextBtn = document.querySelector('.footer-pagination-button.next'); + const currentPageBtn = document.querySelector('#current-page'); + const currentPageValue = parseInt(currentPageBtn.dataset.pagenumber); + const targetPage = (currentPageValue - 1); + nextBtn.classList.add('active'); } } diff --git a/scripts/assets.js b/scripts/assets.js index 189af6a4..37ec6233 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -9,7 +9,7 @@ import { getOptimizedDeliveryUrl } from './polaris.js'; -import { getAdminConfig, getBaseConfigPath, getBrandingConfig } from './site-config.js'; +import { getAdminConfig } from './site-config.js'; import { createSearchEndpoint, logError } from './scripts.js'; @@ -33,36 +33,22 @@ const getFilters = () => { return `is_pur-expirationDate = 0 OR pur-expirationDate > ${currentEpoch}`; }; -async function getUnderdevelopmentIcon() { - const configPath = getBaseConfigPath(); - const brandingConfig = await getBrandingConfig(); - const underdevelopmentIconPath = `${configPath}/${brandingConfig.underdevelopmentIcon}`.replace(/\/\//g, '/'); - return { imageUrl: underdevelopmentIconPath, imageAltText: 'Under Development', assetCount: 0 }; -} /** - * Search Asset for programName, campaignName, deliverableType parameters. + * Search Asset for programName and campaignName parameters. * * @param {string} - Program Name. * @param {string} - Campaign Name. - * @param {string} - Deliverable Type - * @param {integer} - Image Width * @returns {Image } Resolves with image object. * @throws {Error} If an HTTP error or network error occurs. */ -export async function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) { +export async function searchAsset(programName, campaignName, imageWidth = 80) { const adminConfig = await getAdminConfig(); const deliveryURL = await initDeliveryEnvironment(); const indexName = await getSearchIndex(); - if (!programName && !campaignName) - { - // Display Underdevelopment Icon - return await getUnderdevelopmentIcon(); - } - // Initialize the facetFilters array const facetFilters = []; if (programName) { // Check if programName is not null @@ -71,10 +57,6 @@ export async function searchAsset(programName, campaignName, deliverableType = ' if (campaignName) { // Check if campaignName is not null facetFilters.push('gmo-campaignName :'+ campaignName); } - - if (deliverableType) { // Check if deliverableType is not null - facetFilters.push('gmo-deliverableType :'+ deliverableType); - } const data = { requests: [ { @@ -114,8 +96,7 @@ export async function searchAsset(programName, campaignName, deliverableType = ' } else { - // Display Underdevelopment Icon - return await getUnderdevelopmentIcon(); + return null; } } // Handle other response codes @@ -125,4 +106,3 @@ export async function searchAsset(programName, campaignName, deliverableType = ' throw error; } } - diff --git a/scripts/graphql.js b/scripts/graphql.js index 58012272..525fdc00 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -5,8 +5,33 @@ import { logError } from './scripts.js'; const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; const projectId = 'gmo'; +export async function graphqlQueryNameList(queryNameList) { + const queryName = queryNameList; + //persisted query URLs have to be encoded together with the first semicolon + const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}`; + const jwtToken = await getBearerToken(); + + // Return the fetch promise chain so that it can be awaited outside + return fetch(graphqlEndpoint, { + method: 'GET', + headers: { + Authorization: jwtToken, + }, + }).then(response => { + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return response.json(); + }).then(data => { + return data; // Make sure to return the data so that the promise resolves with it + }).catch(error => { + console.error('Error fetching data: ', error); + throw error; // Rethrow or handle error as appropriate + }); +} + export async function graphqlCampaignCount(filter = {}) { - const queryName = 'getTotalPrograms'; + const queryName = 'getCampaignNameFilter'; const encodedSemiColon = encodeURIComponent(';'); const encodedFilter = encodeURIComponent(JSON.stringify(filter)); const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}filter=${encodedFilter}`; @@ -47,8 +72,6 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { const encodedCursor = encodeURIComponent(cursor); const encodedFilter = encodeURIComponent(JSON.stringify(filter)); const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}first=${encodedFirst}${encodedSemiColon}cursor=${encodedCursor}${encodedSemiColon}filter=${encodedFilter}`; - //Performance logging - const startTime = performance.now(); const jwtToken = await getBearerToken(); try { @@ -59,11 +82,6 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { }, }; const response = await fetch(`${graphqlEndpoint}`, options); - //Performance logging - const endTime = performance.now(); - const executionTime = endTime - startTime; - console.debug(`getAllCampaigns Execution Time: ${executionTime} ms`); - // Handle response codes if (response.status === 200) { const responseBody = await response.json(); @@ -85,7 +103,7 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { } export async function graphqlCampaignByName(campaignName) { - const queryName = 'getCampaignNameFilter'; + const queryName = 'getCampaignNames'; const encodedCampaignName = encodeURIComponent(campaignName); const encodedSemiColon = encodeURIComponent(';'); //persisted query URLs have to be encoded together with the first semicolon @@ -111,6 +129,36 @@ export async function graphqlCampaignByName(campaignName) { }); } +export async function graphqlFilterOnMarketingInitiative(marketingInitiative) { + + const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; + const projectId = 'gmo'; + const queryName = 'filter-on-marketing-initiative'; + const encodedMarketingInitiative = encodeURIComponent(marketingInitiative); + const encodedSemiColon = encodeURIComponent(';'); + //persisted query URLs have to be encoded together with the first semicolon + const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}marketingInitiative=${encodedMarketingInitiative}`; + const jwtToken = await getBearerToken(); + + // Return the fetch promise chain so that it can be awaited outside + return fetch(graphqlEndpoint, { + method: 'GET', + headers: { + Authorization: jwtToken, + }, + }).then(response => { + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return response.json(); + }).then(data => { + return data; // Make sure to return the data so that the promise resolves with it + }).catch(error => { + console.error('Error fetching data: ', error); + throw error; // Rethrow or handle error as appropriate + }); +} + async function getGraphqlEndpoint() { const result = await getAdminConfig(); return result.aemGraphqlEndpoint; @@ -168,7 +216,9 @@ export function generateFilterJSON(filterParams) { // Convert the result object to JSON const jsonResult = JSON.stringify(result,null,4); - + // Logging the JSON to see the output + console.debug('Graphql filter',jsonResult); + console.debug('result', result); return result; } @@ -177,8 +227,6 @@ export async function executeQuery(queryString) { const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; const projectId = 'gmo'; const queryEndpoint = `${baseApiUrl}/${projectId}/${queryString}`; - //Performance logging - const startTime = performance.now(); const jwtToken = await getBearerToken(); return fetch(queryEndpoint, { @@ -190,11 +238,6 @@ export async function executeQuery(queryString) { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } - //Performance logging - const endTime = performance.now(); - const executionTime = endTime - startTime; - console.debug(`executeQuery for ${queryString} Execution Time: ${executionTime} ms`); - return response.json(); }).then(data => { return data; // Make sure to return the data so that the promise resolves with it diff --git a/scripts/shared-program.js b/scripts/shared-program.js index c76dda30..f6a2e610 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -1,10 +1,18 @@ -import { executeQuery } from "./graphql.js"; -import { getProductIconMapping, getBaseConfigPath, getQueryPaths } from './site-config.js'; +import { graphqlQueryNameList } from "./graphql.js"; +import { getProductIconMapping, getBaseConfigPath } from './site-config.js'; let iconMapping; -const cfMapping = getQueryPaths(); -export let statusMapping = await getMappingArray('status'); -export let productList = await getMappingArray('products'); +export let statusMapping = await graphqlQueryNameList('getStatusList'); +export let productList = await graphqlQueryNameList('getProductList'); + +/* +* Executes graphql query for 'friendly' labels and returns array of the results +*/ +export async function resolveMappings(mappingType) { + const response = await graphqlQueryNameList(mappingType); + const mappingArray = response.data.jsonByPath.item.json.options; + return mappingArray; +} /** * Filter provided array based on provided key/value pair @@ -24,8 +32,9 @@ export async function getProductMapping(product) { } const icon = iconMatch ? configPath + iconMatch[0]['Icon-path'] : defaultIcon; - if (productList == undefined) productList = await getMappingArray('products'); - const productsMatch = filterArray(productList, 'value', product); + if (productList == undefined) productList = await graphqlQueryNameList('getProductList'); + const productsArray = productList.data.jsonByPath.item.json.options; + const productsMatch = filterArray(productsArray, 'value', product); const productsText = productsMatch ? productsMatch[0].text : product; return { @@ -37,29 +46,10 @@ export async function getProductMapping(product) { /* * Check for undefined/blank property and supply 'Not Available' if no data */ -export function checkBlankString(string, notAvailableText = 'Not Available') { - if (string == undefined || string == '') { - return notAvailableText; +export function checkBlankString(string) { + if (string == undefined || string == '' ) { + return 'Not Available'; } else { return string; } } - -export function dateFormat(dateString) { - const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available'; - return formattedDate; -} - -function getCFPath(cfArray, type) { - const cfMatch = cfArray.filter(item => item['type'] === type); - const cfPath = cfMatch.length > 0 ? cfMatch[0].path : null; - return cfPath; -} - -export async function getMappingArray(type) { - const mappingCf = getCFPath(await cfMapping, type); - const mappings = executeQuery(`getMappings${encodeURIComponent(';')}path=${encodeURIComponent(mappingCf)}`).then((response) => { - return response.data.jsonByPath.item.json.options; - }) - return mappings; -} \ No newline at end of file diff --git a/scripts/site-config.js b/scripts/site-config.js index e4c86b94..6c9694ff 100644 --- a/scripts/site-config.js +++ b/scripts/site-config.js @@ -379,19 +379,4 @@ export async function getProductIconMapping() { console.log("Unable to retrieve site-config.json"); } return iconArray; -} - -/** - * @returns {Array} with mapping-type and the path to its content fragment. - */ -export async function getQueryPaths() { - let mapping = []; - const response = await getConfig('site-config.json'); - for (const entry of response['query-fragments'].data || []) { - mapping.push({ - type: entry['mapping-Type'], - path: entry['path'] - }); - } - return mapping; } \ No newline at end of file From f0f9c0e0c134090eeeafebd023cfa9fd2642b976 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Mon, 3 Jun 2024 19:51:46 -0500 Subject: [PATCH 48/95] ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta --- blocks/gmo-program-list/gmo-program-list.js | 19 +++++-------------- scripts/graphql.js | 4 +--- scripts/shared-program.js | 6 +++--- 3 files changed, 9 insertions(+), 20 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index d1b94f1a..71806d5f 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -33,11 +33,13 @@ const headerConfig = [ } ] +const DEFAULT_ITEMS_PER_PAGE = 8; //Global variables used by helper functions let currentPageInfo = {}; let cursorArray = []; let currentPage = 1; -let currentNumberPerPage = 4; +let currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; + let currentGraphqlFilter = {}; //Get Campaign Count for pagination let campaignCount = await graphqlCampaignCount(); @@ -62,7 +64,7 @@ document.addEventListener('gmoCampaignListBlock', async function() { currentPageInfo = {}; cursorArray = []; currentPage = 1; - currentNumberPerPage = 4; + currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); @@ -120,16 +122,6 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, footerNext.classList.remove('active'); } decorateIcons(block); - - //Debug Global Variables - //debug_console(); -} - -function debug_console(){ - console.log('currentPageInfo',currentPageInfo); - console.log('cursorArray',cursorArray); - console.log('currentPage',currentPage); - console.log('campaignCount',campaignCount); } @@ -193,7 +185,7 @@ async function buildCampaignList(campaigns, numPerPage) { Program Name
- ${checkBlankString(campaign.node.campaignName)} + ${checkBlankString(campaign.node.campaignName,'Marketing Moment Not Available')} Marketing Moment
`; @@ -351,7 +343,6 @@ function buildListFooter(rows, rowsPerPage) { const footerPerPageDropdown = document.createElement('select'); footerPerPageDropdown.id = 'per-page'; footerPerPageDropdown.innerHTML = ` - diff --git a/scripts/graphql.js b/scripts/graphql.js index 525fdc00..72f6ceaa 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -216,9 +216,7 @@ export function generateFilterJSON(filterParams) { // Convert the result object to JSON const jsonResult = JSON.stringify(result,null,4); - // Logging the JSON to see the output - console.debug('Graphql filter',jsonResult); - console.debug('result', result); + return result; } diff --git a/scripts/shared-program.js b/scripts/shared-program.js index f6a2e610..39e8db93 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -46,9 +46,9 @@ export async function getProductMapping(product) { /* * Check for undefined/blank property and supply 'Not Available' if no data */ -export function checkBlankString(string) { - if (string == undefined || string == '' ) { - return 'Not Available'; +export function checkBlankString(string, notAvailableText = 'Not Available') { + if (string == undefined || string == '') { + return notAvailableText; } else { return string; } From 167139042ff647336e46009a5752d633f2793730 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Tue, 4 Jun 2024 16:52:52 -0400 Subject: [PATCH 49/95] Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching --- .../gmo-program-header/gmo-program-header.css | 2 +- .../gmo-program-header/gmo-program-header.js | 43 ++++++++-------- blocks/gmo-program-list/gmo-program-list.css | 17 +++++-- blocks/gmo-program-list/gmo-program-list.js | 50 ++++++++++++------- scripts/graphql.js | 30 ----------- 5 files changed, 64 insertions(+), 78 deletions(-) diff --git a/blocks/gmo-program-header/gmo-program-header.css b/blocks/gmo-program-header/gmo-program-header.css index ac30d581..e00c20fb 100644 --- a/blocks/gmo-program-header/gmo-program-header.css +++ b/blocks/gmo-program-header/gmo-program-header.css @@ -1,4 +1,4 @@ -.gmo-campaign-header.block { +.gmo-program-header.block { display: flex; flex-direction: column; margin-top: 20px; diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index 98e15246..d7a9e46d 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -2,9 +2,6 @@ import { decorateIcons } from '../../scripts/lib-franklin.js'; import { graphqlQueryNameList, graphqlCampaignByName } from '../../scripts/graphql.js'; import { statusMapping, productList } from '../../scripts/shared-program.js'; -// Declared at the top of the file, making it accessible to all functions within this file. -let allProducts = []; - export default async function decorate(block) { block.innerHTML = `
@@ -128,32 +125,29 @@ export default async function decorate(block) { sendGmoCampaignListBlockEvent(); }); - await initializeDropdowns(); - attachEventListeners(); + initializeDropdowns(); decorateIcons(block); + document.addEventListener('click', handleClickOutside); } async function initializeDropdowns() { // Business Line List + graphqlQueryNameList('getBusinessLine').then((response) => { + populateDropdown(response, 'dropdownBusinessOptions', 'businessLine'); + }); - const businessLineResponse = await graphqlQueryNameList('getBusinessLine'); - const businessLines = businessLineResponse.data.jsonByPath.item.json.options; - populateDropdown(businessLines, 'dropdownBusinessOptions', 'businessLine'); + // Geo List + graphqlQueryNameList('getGeoList').then((response) => { + populateDropdown(response, 'dropdownGeoOptions', 'p0TargetGeo'); + }); // Status List const statusResponse = await statusMapping; - const statuses = statusResponse.data.jsonByPath.item.json.options; - populateDropdown(statuses, 'dropdownStatusOptions', 'status'); + populateDropdown(statusResponse, 'dropdownStatusOptions', 'status'); // Product List const productResponse = await productList; - allProducts = productResponse.data.jsonByPath.item.json.options; - populateDropdown(allProducts, 'dropdownProductOptions', 'productOffering'); - - // Geo List - const geoResponse = await graphqlQueryNameList('getGeoList'); - const geos = geoResponse.data.jsonByPath.item.json.options; - populateDropdown(geos, 'dropdownGeoOptions', 'p0TargetGeo'); + populateDropdown(productResponse, 'dropdownProductOptions', 'productOffering'); } // Function to attach event listeners @@ -173,12 +167,10 @@ function attachEventListeners() { if (resetFiltersBtn) { resetFiltersBtn.addEventListener('click', resetFiltersClickHandler); } - - // Add event listener for clicks outside of dropdowns - document.addEventListener('click', handleClickOutside); } -function populateDropdown(options, dropdownId, type) { +function populateDropdown(response, dropdownId, type) { + const options = response.data?.jsonByPath ? response.data.jsonByPath.item.json.options : response; let dropdownContent = document.getElementById(dropdownId); dropdownContent.innerHTML = ''; options.forEach((option, index) => { @@ -189,13 +181,18 @@ function populateDropdown(options, dropdownId, type) { anchor.dataset.type = type; anchor.className = "dropoption"; anchor.textContent = option.text; + anchor.addEventListener('click', dropOptionClickHandler); dropdownContent.appendChild(anchor); }); + // add event listener to button + const button = dropdownContent.parentElement.querySelector(".dropdown-button"); + button.addEventListener('click', dropdownButtonClickHandler); } // Function to filter products based on selected business line function filterProductsByBusinessLine(businessLine) { - const filteredProducts = allProducts.filter(product => + const products = productList.data.jsonByPath.item.json.options; + const filteredProducts = products.filter(product => product['business-line'].includes(businessLine) ); populateDropdown(filteredProducts, 'dropdownProductOptions', 'productOffering'); @@ -324,7 +321,7 @@ function resetAllFilters() { function resetProductsDropDown(){ // Populate all products into Products dropdown - populateDropdown(allProducts, 'dropdownProductOptions', 'productOffering'); + populateDropdown(productList, 'dropdownProductOptions', 'productOffering'); // Reset product offering filters removeSelectedProductOfferingFilters(); attachEventListeners(); diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css index 7ab7b32e..a417c0c9 100644 --- a/blocks/gmo-program-list/gmo-program-list.css +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -26,9 +26,20 @@ body { display: flex; font-weight: bold; margin-bottom: 20px; - + position: sticky; padding-top: 5px; } +.list-items { + display: flex; + flex-direction: column; + overflow-y: scroll; + height: 65vh; + -ms-overflow-style: none; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } +} .column-header-wrapper { display: flex; } @@ -48,10 +59,6 @@ body { height: 14px; width: 14px; } -.list-items { - display: flex; - flex-direction: column; -} .campaign-row { display: flex; font-size: 14px; diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 71806d5f..b86c0396 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -150,6 +150,10 @@ async function buildCampaignList(campaigns, numPerPage) { for (const campaign of campaigns) { const index = campaigns.indexOf(campaign); const campaignRow = document.createElement('div'); + const programName = campaign.node.programName; + const campaignName = campaign.node.campaignName; + const programRef = campaign.node.programReferenceNumber; + campaignRow.classList.add('campaign-row'); if ((index + 1) > numPerPage) campaignRow.classList.add('hidden'); @@ -163,35 +167,27 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignIcon = document.createElement('div'); campaignIcon.classList.add('campaign-icon'); - campaignIcon.dataset.programname = campaign.node.programName; - campaignIcon.dataset.campaignname = campaign.node.campaignName; - //Add Icon Image - const iconImage = document.createElement('img'); - try { - const imageObject = await searchAsset(campaign.node.programName, campaign.node.campaignName); - iconImage.src = imageObject.imageUrl; - iconImage.alt = imageObject.imageAltText; - } catch (error) { - } - // Append the image to the campaignIcon div - campaignIcon.appendChild(iconImage); + campaignIcon.dataset.programname = programName; + campaignIcon.dataset.campaignname = campaignName; + campaignIcon.dataset.reference = programRef; + addThumbnail(campaignIcon, programName, campaignName); campaignIconLink.appendChild(campaignIcon); - const campaignName = document.createElement('div'); - campaignName.classList.add('campaign-name-wrapper', 'vertical-center'); + const campaignNameWrapper = document.createElement('div'); + campaignNameWrapper.classList.add('campaign-name-wrapper', 'vertical-center'); - campaignName.innerHTML = ` + campaignNameWrapper.innerHTML = `
- ${checkBlankString(campaign.node.programName)} + ${checkBlankString(programName)} Program Name
- ${checkBlankString(campaign.node.campaignName,'Marketing Moment Not Available')} + ${checkBlankString(campaignName,'Marketing Moment Not Available')} Marketing Moment
`; campaignInfoWrapper.appendChild(campaignIconLink); - campaignInfoWrapper.appendChild(campaignName); + campaignInfoWrapper.appendChild(campaignNameWrapper); const campaignOverviewWrapper = document.createElement('div'); campaignOverviewWrapper.classList.add('column-2', 'campaign-description-wrapper', 'vertical-center'); @@ -203,7 +199,7 @@ async function buildCampaignList(campaigns, numPerPage) { campaignOverviewWrapper.appendChild(campaignOverview); const campaignLaunch = document.createElement('div'); - campaignLaunch.textContent = checkBlankString(campaign.node.launchDate); + campaignLaunch.textContent = dateFormat(campaign.node.launchDate); campaignLaunch.classList.add('column-3', 'campaign-launch-date', 'vertical-center'); campaignLaunch.dataset.property = 'launch'; @@ -238,6 +234,17 @@ function buildStatus(statusWrapper, campaign) { return statusWrapper; } +async function addThumbnail(parentElement, programName, campaignName) { + searchAsset(programName, campaignName).then((response) => { + if (response && (Object.hasOwn(response, 'imageUrl') && Object.hasOwn(response, 'imageAltText'))) { + const iconImage = document.createElement('img'); + iconImage.src = response?.imageUrl; + iconImage.alt = response?.imageAltText; + parentElement.appendChild(iconImage); + } + }) +} + async function buildProduct(product) { const productParent = document.createElement('div'); const productMapping = await getProductMapping(product); @@ -470,3 +477,8 @@ function sortColumn(dir, property) { container.appendChild(row); }); } + +function dateFormat(dateString) { + const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available'; + return formattedDate; +} \ No newline at end of file diff --git a/scripts/graphql.js b/scripts/graphql.js index 72f6ceaa..9ed80bce 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -129,36 +129,6 @@ export async function graphqlCampaignByName(campaignName) { }); } -export async function graphqlFilterOnMarketingInitiative(marketingInitiative) { - - const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; - const projectId = 'gmo'; - const queryName = 'filter-on-marketing-initiative'; - const encodedMarketingInitiative = encodeURIComponent(marketingInitiative); - const encodedSemiColon = encodeURIComponent(';'); - //persisted query URLs have to be encoded together with the first semicolon - const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}marketingInitiative=${encodedMarketingInitiative}`; - const jwtToken = await getBearerToken(); - - // Return the fetch promise chain so that it can be awaited outside - return fetch(graphqlEndpoint, { - method: 'GET', - headers: { - Authorization: jwtToken, - }, - }).then(response => { - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - return response.json(); - }).then(data => { - return data; // Make sure to return the data so that the promise resolves with it - }).catch(error => { - console.error('Error fetching data: ', error); - throw error; // Rethrow or handle error as appropriate - }); -} - async function getGraphqlEndpoint() { const result = await getAdminConfig(); return result.aemGraphqlEndpoint; From c70d822493530daf9aba4c3f6dadd8fdf8e861e6 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 5 Jun 2024 13:30:37 -0400 Subject: [PATCH 50/95] add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log --- .../gmo-program-details.js | 6 +++--- blocks/gmo-program-list/gmo-program-list.js | 21 +++++++++++++------ 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 5347cb4a..55522099 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -7,7 +7,7 @@ import { searchAsset } from '../../scripts/assets.js'; let blockConfig; const programName = getQueryVariable('programName'); -const programRefNumber = getQueryVariable('programReferenceNumber'); +const programID = getQueryVariable('programID'); const deliverableMappings = resolveMappings("getDeliverableTypeMapping"); const platformMappings = resolveMappings("getPlatformsMapping"); @@ -15,9 +15,9 @@ export default async function decorate(block) { const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); - const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programReferenceNumber=${encodeURIComponent(programRefNumber)}`; + const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const programData = await executeQuery(programQueryString); - const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}`; + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const deliverables = await executeQuery(deliverableQueryString); const p0TargetMarketArea = programData.data.programList.items[0].p0TargetMarketArea; diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index b86c0396..76265c26 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -152,7 +152,7 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignRow = document.createElement('div'); const programName = campaign.node.programName; const campaignName = campaign.node.campaignName; - const programRef = campaign.node.programReferenceNumber; + const programID = campaign.node.programID ? campaign.node.programID : ""; campaignRow.classList.add('campaign-row'); if ((index + 1) > numPerPage) campaignRow.classList.add('hidden'); @@ -161,15 +161,15 @@ async function buildCampaignList(campaigns, numPerPage) { campaignInfoWrapper.classList.add('campaign-info-wrapper', 'column-1'); const campaignIconLink = document.createElement('a'); - let campaignDetailsLink = host + `/${detailsPage}?programName=${campaign.node.programName}&`; - campaignDetailsLink += `programReferenceNumber=${campaign.node.programReferenceNumber ? campaign.node.programReferenceNumber : ""}` + let campaignDetailsLink = host + `/${detailsPage}?programName=${programName}&`; + campaignDetailsLink += `programID=${programID}` campaignIconLink.href = campaignDetailsLink; const campaignIcon = document.createElement('div'); campaignIcon.classList.add('campaign-icon'); campaignIcon.dataset.programname = programName; campaignIcon.dataset.campaignname = campaignName; - campaignIcon.dataset.reference = programRef; + campaignIcon.dataset.programid = programID; addThumbnail(campaignIcon, programName, campaignName); campaignIconLink.appendChild(campaignIcon); const campaignNameWrapper = document.createElement('div'); @@ -225,9 +225,18 @@ function buildStatus(statusWrapper, campaign) { const statusStr = checkBlankString(campaign.node.status); const statusArray = statusMapping.data.jsonByPath.item.json.options; const statusMatch = statusArray.filter(item => item.value === statusStr); - const statusText = statusMatch.length > 0 ? statusMatch[0].text : statusStr; + + let statusText, statusColor; + if (statusMatch.length > 0) { + statusText = statusMatch[0].text; + statusColor = statusMatch[0]["color-code"]; + } else { + statusText = statusStr; + statusColor = "BABABA"; + } + campaignStatus.textContent = statusText; - campaignStatus.style.backgroundColor = "#" + statusMatch[0]["color-code"]; + campaignStatus.style.backgroundColor = "#" + statusColor; campaignStatus.classList.add('status'); campaignStatus.dataset.property = 'status'; statusWrapper.appendChild(campaignStatus); From 400442b8b7f209a522dec898309ba9da6c585326 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 5 Jun 2024 17:45:32 -0400 Subject: [PATCH 51/95] Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages --- blocks/gmo-program-details/gmo-program-details.js | 13 ++++++++----- blocks/gmo-program-list/gmo-program-list.js | 7 +------ scripts/graphql.js | 4 ++-- scripts/shared-program.js | 5 +++++ 4 files changed, 16 insertions(+), 13 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 55522099..ff05b20f 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -1,7 +1,7 @@ import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; import { getQueryVariable } from '../../scripts/shared.js'; import { executeQuery } from '../../scripts/graphql.js'; -import { resolveMappings, filterArray, getProductMapping, checkBlankString } from '../../scripts/shared-program.js'; +import { resolveMappings, filterArray, getProductMapping, checkBlankString, dateFormat } from '../../scripts/shared-program.js'; import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; @@ -376,7 +376,10 @@ async function buildTable(jsonResponse) { const deliverableList = jsonResponse.data.deliverableList.items; const programKpi = jsonResponse.data.programList?.items.primaryKpi; const rows = document.createElement('div'); - const uniqueCategories = getUniqueItems(deliverableList, 'deliverableType'); + // we want the 'null' deliverableType to be part of this set for filtering + const uniqueCatSet = new Set(); + deliverableList.forEach(object => { uniqueCatSet.add(object['deliverableType']) }) + const uniqueCategories = Array.from(uniqueCatSet); let emptyCategory = false; uniqueCategories.forEach(async (category) => { // build header row @@ -466,8 +469,8 @@ async function buildTableRow(deliverableJson, kpi, createHidden) { const status = (deliverableJson.deliverableStatusUpdate == null) ? "Not Available" : deliverableJson.deliverableStatusUpdate + "%"; const statusPct = (deliverableJson.deliverableStatusUpdate == null) ? "0%" : deliverableJson.deliverableStatusUpdate + "%"; dataRow.innerHTML = ` -
${deliverableJson.deliverableName}
-
${typeLabel}
+
${checkBlankString(deliverableJson.deliverableName)}
+
${checkBlankString(typeLabel)}
Review Link @@ -487,7 +490,7 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
-
${checkBlankString(deliverableJson.taskCompletionDate)}
+
${dateFormat(deliverableJson.taskCompletionDate)}
${deliverableJson.previousTaskCompletionDate ? '
Revised from ' + deliverableJson.previousTaskCompletionDate + '
': ""}
${checkBlankString(deliverableJson.driver)}
diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 76265c26..4ec0a174 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -1,7 +1,7 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import { graphqlAllCampaignsFilter, graphqlCampaignCount, generateFilterJSON } from '../../scripts/graphql.js'; -import { getProductMapping, checkBlankString, statusMapping } from '../../scripts/shared-program.js' +import { getProductMapping, checkBlankString, statusMapping, dateFormat } from '../../scripts/shared-program.js' import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; @@ -485,9 +485,4 @@ function sortColumn(dir, property) { sortArray.forEach(({ row }, index) => { container.appendChild(row); }); -} - -function dateFormat(dateString) { - const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available'; - return formattedDate; } \ No newline at end of file diff --git a/scripts/graphql.js b/scripts/graphql.js index 9ed80bce..0d59b62f 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -31,7 +31,7 @@ export async function graphqlQueryNameList(queryNameList) { } export async function graphqlCampaignCount(filter = {}) { - const queryName = 'getCampaignNameFilter'; + const queryName = 'getTotalPrograms'; const encodedSemiColon = encodeURIComponent(';'); const encodedFilter = encodeURIComponent(JSON.stringify(filter)); const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}filter=${encodedFilter}`; @@ -103,7 +103,7 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { } export async function graphqlCampaignByName(campaignName) { - const queryName = 'getCampaignNames'; + const queryName = 'getCampaignNamesFilter'; const encodedCampaignName = encodeURIComponent(campaignName); const encodedSemiColon = encodeURIComponent(';'); //persisted query URLs have to be encoded together with the first semicolon diff --git a/scripts/shared-program.js b/scripts/shared-program.js index 39e8db93..e71afcf0 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -53,3 +53,8 @@ export function checkBlankString(string, notAvailableText = 'Not Available') { return string; } } + +export function dateFormat(dateString) { + const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available'; + return formattedDate; +} \ No newline at end of file From 2465e4382ab182fc856e6e06e8bb56bdf12e32a9 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 5 Jun 2024 18:30:28 -0400 Subject: [PATCH 52/95] fix typo in graphql query name (#111) --- scripts/graphql.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/graphql.js b/scripts/graphql.js index 0d59b62f..fd20c366 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -103,7 +103,7 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { } export async function graphqlCampaignByName(campaignName) { - const queryName = 'getCampaignNamesFilter'; + const queryName = 'getCampaignNameFilter'; const encodedCampaignName = encodeURIComponent(campaignName); const encodedSemiColon = encodeURIComponent(';'); //persisted query URLs have to be encoded together with the first semicolon From 05923f8e322b088193fd08be25c7d67cde1163f7 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Wed, 5 Jun 2024 17:46:14 -0500 Subject: [PATCH 53/95] ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. --- blocks/gmo-program-list/gmo-program-list.js | 105 ++++++++++---------- 1 file changed, 55 insertions(+), 50 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 4ec0a174..8a3c6f18 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -36,11 +36,10 @@ const headerConfig = [ const DEFAULT_ITEMS_PER_PAGE = 8; //Global variables used by helper functions let currentPageInfo = {}; -let cursorArray = []; let currentPage = 1; let currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; - let currentGraphqlFilter = {}; +let totalPages = 0; //Get Campaign Count for pagination let campaignCount = await graphqlCampaignCount(); let blockConfig; @@ -62,7 +61,6 @@ document.addEventListener('gmoCampaignListBlock', async function() { //Trigger loading the gmo-campaign-block //Reset page variables currentPageInfo = {}; - cursorArray = []; currentPage = 1; currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; @@ -75,26 +73,23 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, if (blockConfig == undefined) blockConfig = readBlockConfig(block); const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter); const campaigns = campaignPaginatedResponse.data.programPaginated.edges; + + //Set previous cursor to currentCursor + currentPageInfo.previousCursor = currentPageInfo.currentCursor; + currentPageInfo = campaignPaginatedResponse.data.programPaginated.pageInfo; //Current cursor used in previous page logic currentPageInfo.currentCursor = cursor; //Next Page if (currentPageInfo.hasNextPage){ - currentPageInfo.nextCursor = campaigns[campaigns.length - 1].cursor; - } - - if (!previousPage && !nextPage) - { - cursorArray = campaigns.map(item => item.cursor); + currentPageInfo.nextCursor = currentPageInfo.endCursor === undefined ? campaigns[campaigns.length - 1].cursor : currentPageInfo.endCursor; } - else if (nextPage){ - campaigns.forEach(item => { - cursorArray.push(item.cursor); - }); - } currentPageInfo.itemCount = campaigns.length; + // Calculate total number of pages + totalPages = Math.ceil(campaignCount / currentNumberPerPage); + const listHeaders = buildListHeaders(headerConfig); const listItems = await buildCampaignList(campaigns, numPerPage); const listFooter = buildListFooter(campaignCount, numPerPage); @@ -107,20 +102,21 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, listContainer.appendChild(listHeaders); listContainer.appendChild(listItems); listContainer.appendChild(listFooter); - //Show Hide Previous and Next Page buttons + // Show Hide Previous and Next Page buttons const footerNext = document.querySelector('.footer-pagination-button.next'); const footerPrev = document.querySelector('.footer-pagination-button.prev'); - if (currentPageInfo.hasPreviousPage){ - footerPrev.classList.add('active'); + if (currentPage > 1) { + footerPrev.classList.add('active'); } else { - footerPrev.classList.remove('active'); + footerPrev.classList.remove('active'); } - if (currentPageInfo.hasNextPage){ - footerNext.classList.add('active'); + if (currentPage < totalPages) { + footerNext.classList.add('active'); } else { - footerNext.classList.remove('active'); + footerNext.classList.remove('active'); } + decorateIcons(block); } @@ -315,6 +311,7 @@ function buildListHeaders(headerConfig) { function buildListFooter(rows, rowsPerPage) { const pages = Math.ceil(rows / rowsPerPage); + totalPages = pages; const footerWrapper = document.createElement('div'); footerWrapper.classList.add('list-footer', 'footer-wrapper'); footerWrapper.dataset.pages = pages; @@ -329,9 +326,13 @@ function buildListFooter(rows, rowsPerPage) { const footerPrev = document.createElement('div'); footerPrev.classList.add('footer-pagination-button', 'prev'); footerPrev.textContent = 'Prev'; + footerPrev.addEventListener('click', (event) => { + // Disable the button + footerPrev.classList.remove('active'); + footerPrev.classList.add('disabled'); prevPage(event.target); - }) + }); const footerPageBtnsWrapper = document.createElement('div'); footerPageBtnsWrapper.classList.add('footer-pages-wrapper'); @@ -340,9 +341,13 @@ function buildListFooter(rows, rowsPerPage) { //Show current page buildCurrentPageDivElement(currentPage, footerPageBtnsWrapper); - footerNext.addEventListener('click', (event) => { + footerNext.addEventListener('click', (event) => { + // Disable the button + footerNext.classList.remove('active'); + footerNext.classList.add('disabled'); nextPage(event.target); - }) + }); + footerNext.textContent = 'Next'; footerPagination.appendChild(footerPrev); footerPagination.appendChild(footerPageBtnsWrapper); @@ -411,35 +416,34 @@ function repaginate(dropdown) { } function nextPage(nextBtn) { - if (currentPageInfo.hasNextPage) { - //Calculate Next Page - currentPage++; - const block = document.querySelector('.gmo-program-list.block'); - decorate( block, currentNumberPerPage, currentPageInfo.nextCursor, false, true,currentGraphqlFilter); - if (!(nextBtn.classList.contains('active'))) { - return; - } - const prevBtn = document.querySelector('.footer-pagination-button.prev'); - prevBtn.classList.add('active'); + if (currentPage < totalPages) { + currentPage++; + const block = document.querySelector('.gmo-program-list.block'); + decorate(block, currentNumberPerPage, currentPageInfo.nextCursor, false, true, currentGraphqlFilter); + + const prevBtn = document.querySelector('.footer-pagination-button.prev'); + prevBtn.classList.add('active'); + + if (currentPage === totalPages) { + nextBtn.classList.remove('active'); + } else { + nextBtn.classList.add('active'); + } } } function prevPage(prevBtn) { - if (currentPageInfo.hasPreviousPage) { - currentPage--; - const block = document.querySelector('.gmo-program-list.block'); - const currentCursor = currentPageInfo.currentCursor; - //Calculate cursor for previous page - const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage; - decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter); - if (!(prevBtn.classList.contains('active'))) { - return; - } - const nextBtn = document.querySelector('.footer-pagination-button.next'); - const currentPageBtn = document.querySelector('#current-page'); - const currentPageValue = parseInt(currentPageBtn.dataset.pagenumber); - const targetPage = (currentPageValue - 1); - nextBtn.classList.add('active'); + if (currentPage > 1) { + currentPage--; + const block = document.querySelector('.gmo-program-list.block'); + decorate(block, currentNumberPerPage, currentPage.previousCursor, true, false, currentGraphqlFilter); + const nextBtn = document.querySelector('.footer-pagination-button.next'); + nextBtn.classList.add('active'); + if (currentPage === 1) { + prevBtn.classList.remove('active'); + } else { + prevBtn.classList.add('active'); + } } } @@ -485,4 +489,5 @@ function sortColumn(dir, property) { sortArray.forEach(({ row }, index) => { container.appendChild(row); }); -} \ No newline at end of file +} + From a5bbdd6934a556d5957708a575332260e0140cff Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 6 Jun 2024 10:19:25 -0500 Subject: [PATCH 54/95] Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) --- blocks/gmo-program-list/gmo-program-list.js | 23 ++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 8a3c6f18..4899cfe8 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -36,6 +36,7 @@ const headerConfig = [ const DEFAULT_ITEMS_PER_PAGE = 8; //Global variables used by helper functions let currentPageInfo = {}; +let cursorArray = []; let currentPage = 1; let currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; let currentGraphqlFilter = {}; @@ -61,6 +62,7 @@ document.addEventListener('gmoCampaignListBlock', async function() { //Trigger loading the gmo-campaign-block //Reset page variables currentPageInfo = {}; + cursorArray = []; currentPage = 1; currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; @@ -73,10 +75,6 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, if (blockConfig == undefined) blockConfig = readBlockConfig(block); const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter); const campaigns = campaignPaginatedResponse.data.programPaginated.edges; - - //Set previous cursor to currentCursor - currentPageInfo.previousCursor = currentPageInfo.currentCursor; - currentPageInfo = campaignPaginatedResponse.data.programPaginated.pageInfo; //Current cursor used in previous page logic currentPageInfo.currentCursor = cursor; @@ -85,6 +83,17 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, currentPageInfo.nextCursor = currentPageInfo.endCursor === undefined ? campaigns[campaigns.length - 1].cursor : currentPageInfo.endCursor; } + if (!previousPage && !nextPage) + { + cursorArray = campaigns.map(item => item.cursor); + } + else if (nextPage){ + + campaigns.forEach(item => { + cursorArray.push(item.cursor); + }); + } + currentPageInfo.itemCount = campaigns.length; // Calculate total number of pages @@ -436,7 +445,11 @@ function prevPage(prevBtn) { if (currentPage > 1) { currentPage--; const block = document.querySelector('.gmo-program-list.block'); - decorate(block, currentNumberPerPage, currentPage.previousCursor, true, false, currentGraphqlFilter); + + const currentCursor = currentPageInfo.currentCursor; + //Calculate cursor for previous page + const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage; + decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter); const nextBtn = document.querySelector('.footer-pagination-button.next'); nextBtn.classList.add('active'); if (currentPage === 1) { From 2370f3f2d7e4bcc077ba3cff231dcd03629318a8 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Fri, 7 Jun 2024 12:24:48 -0400 Subject: [PATCH 55/95] Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made --- .../gmo-program-details.css | 4 ++-- .../gmo-program-details/gmo-program-details.js | 18 ++++++++++++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index b69ec24c..1ac8b1f9 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -1,7 +1,6 @@ :root { border-bottom: none; } - body { background-color: rgb(247, 246, 246); } @@ -371,7 +370,8 @@ body { } } .table-content { - height: 45vh; + max-height: 45vh; + min-height: 7vh; overflow-y: auto; &::-webkit-scrollbar { display: none; diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index ff05b20f..262d20e6 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -375,13 +375,14 @@ function formatDate(dateString) { async function buildTable(jsonResponse) { const deliverableList = jsonResponse.data.deliverableList.items; const programKpi = jsonResponse.data.programList?.items.primaryKpi; - const rows = document.createElement('div'); + let rows = document.createElement('div'); // we want the 'null' deliverableType to be part of this set for filtering const uniqueCatSet = new Set(); deliverableList.forEach(object => { uniqueCatSet.add(object['deliverableType']) }) const uniqueCategories = Array.from(uniqueCatSet); + const sortedCategories = sortDeliverableTypes(uniqueCategories); let emptyCategory = false; - uniqueCategories.forEach(async (category) => { + sortedCategories.forEach(async (category) => { // build header row let headerRow; const matchingCampaigns = deliverableList.filter(deliverable => deliverable.deliverableType === category); @@ -425,6 +426,19 @@ function dateSort(parent) { }) } +function sortDeliverableTypes(arr) { + return arr.sort((a, b) => { + // If a is null and b is not null, a should come after b + if (a === null && b !== null) return 1; + // If b is null and a is not null, b should come after a + if (a !== null && b === null) return -1; + // If both a and b are null, they are equal in terms of sorting + if (a === null && b === null) return 0; + // If neither a nor b are null, sort them alphabetically + return a.localeCompare(b); + }); +} + async function lookupType(rawText, mappingType) { const mappings = (mappingType === 'deliverable-type') ? await deliverableMappings : await platformMappings; const typeMatch = mappings.filter(item => item.value === rawText); From 9992820296e418364d916e522cca0d828b9f641f Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 12 Jun 2024 11:38:58 -0400 Subject: [PATCH 56/95] Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import --- .../gmo-program-details.js | 9 ++--- .../gmo-program-header/gmo-program-header.js | 11 +++--- blocks/gmo-program-list/gmo-program-list.js | 3 +- scripts/graphql.js | 27 +------------- scripts/shared-program.js | 37 +++++++++++-------- scripts/site-config.js | 15 ++++++++ 6 files changed, 47 insertions(+), 55 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 262d20e6..679fc029 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -1,15 +1,15 @@ import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; import { getQueryVariable } from '../../scripts/shared.js'; import { executeQuery } from '../../scripts/graphql.js'; -import { resolveMappings, filterArray, getProductMapping, checkBlankString, dateFormat } from '../../scripts/shared-program.js'; +import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray } from '../../scripts/shared-program.js'; import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; let blockConfig; const programName = getQueryVariable('programName'); const programID = getQueryVariable('programID'); -const deliverableMappings = resolveMappings("getDeliverableTypeMapping"); -const platformMappings = resolveMappings("getPlatformsMapping"); +const deliverableMappings = getMappingArray('deliverableType'); +const platformMappings = getMappingArray('platforms'); export default async function decorate(block) { @@ -333,8 +333,7 @@ function buildArtifactLinks(program) { async function buildStatus(status) { const statusDiv = document.createElement('div'); statusDiv.classList.add('campaign-status'); - const statusArray = await resolveMappings("getStatusList"); - const statusMatch = filterArray(statusArray, 'value', status); + const statusMatch = filterArray(statusMapping, 'value', status); const statusText = statusMatch ? statusMatch[0].text : status; const statusHex = statusMatch[0]["color-code"]; statusDiv.textContent = statusText; diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index d7a9e46d..ab99e4f3 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -1,6 +1,6 @@ import { decorateIcons } from '../../scripts/lib-franklin.js'; -import { graphqlQueryNameList, graphqlCampaignByName } from '../../scripts/graphql.js'; -import { statusMapping, productList } from '../../scripts/shared-program.js'; +import { graphqlCampaignByName } from '../../scripts/graphql.js'; +import { statusMapping, productList, getMappingArray } from '../../scripts/shared-program.js'; export default async function decorate(block) { block.innerHTML = ` @@ -132,12 +132,12 @@ export default async function decorate(block) { async function initializeDropdowns() { // Business Line List - graphqlQueryNameList('getBusinessLine').then((response) => { + getMappingArray('businessLine').then((response) => { populateDropdown(response, 'dropdownBusinessOptions', 'businessLine'); }); // Geo List - graphqlQueryNameList('getGeoList').then((response) => { + getMappingArray('geoList').then((response) => { populateDropdown(response, 'dropdownGeoOptions', 'p0TargetGeo'); }); @@ -191,8 +191,7 @@ function populateDropdown(response, dropdownId, type) { // Function to filter products based on selected business line function filterProductsByBusinessLine(businessLine) { - const products = productList.data.jsonByPath.item.json.options; - const filteredProducts = products.filter(product => + const filteredProducts = productList.filter(product => product['business-line'].includes(businessLine) ); populateDropdown(filteredProducts, 'dropdownProductOptions', 'productOffering'); diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 4899cfe8..04a15a3a 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -228,8 +228,7 @@ async function buildCampaignList(campaigns, numPerPage) { function buildStatus(statusWrapper, campaign) { const campaignStatus = document.createElement('div'); const statusStr = checkBlankString(campaign.node.status); - const statusArray = statusMapping.data.jsonByPath.item.json.options; - const statusMatch = statusArray.filter(item => item.value === statusStr); + const statusMatch = statusMapping.filter(item => item.value === statusStr); let statusText, statusColor; if (statusMatch.length > 0) { diff --git a/scripts/graphql.js b/scripts/graphql.js index fd20c366..c4d733f4 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -5,31 +5,6 @@ import { logError } from './scripts.js'; const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; const projectId = 'gmo'; -export async function graphqlQueryNameList(queryNameList) { - const queryName = queryNameList; - //persisted query URLs have to be encoded together with the first semicolon - const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}`; - const jwtToken = await getBearerToken(); - - // Return the fetch promise chain so that it can be awaited outside - return fetch(graphqlEndpoint, { - method: 'GET', - headers: { - Authorization: jwtToken, - }, - }).then(response => { - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - return response.json(); - }).then(data => { - return data; // Make sure to return the data so that the promise resolves with it - }).catch(error => { - console.error('Error fetching data: ', error); - throw error; // Rethrow or handle error as appropriate - }); -} - export async function graphqlCampaignCount(filter = {}) { const queryName = 'getTotalPrograms'; const encodedSemiColon = encodeURIComponent(';'); @@ -213,4 +188,4 @@ export async function executeQuery(queryString) { console.error('Error fetching data: ', error); throw error; // Rethrow or handle error as appropriate }); -}; +}; \ No newline at end of file diff --git a/scripts/shared-program.js b/scripts/shared-program.js index e71afcf0..c76dda30 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -1,18 +1,10 @@ -import { graphqlQueryNameList } from "./graphql.js"; -import { getProductIconMapping, getBaseConfigPath } from './site-config.js'; +import { executeQuery } from "./graphql.js"; +import { getProductIconMapping, getBaseConfigPath, getQueryPaths } from './site-config.js'; let iconMapping; -export let statusMapping = await graphqlQueryNameList('getStatusList'); -export let productList = await graphqlQueryNameList('getProductList'); - -/* -* Executes graphql query for 'friendly' labels and returns array of the results -*/ -export async function resolveMappings(mappingType) { - const response = await graphqlQueryNameList(mappingType); - const mappingArray = response.data.jsonByPath.item.json.options; - return mappingArray; -} +const cfMapping = getQueryPaths(); +export let statusMapping = await getMappingArray('status'); +export let productList = await getMappingArray('products'); /** * Filter provided array based on provided key/value pair @@ -32,9 +24,8 @@ export async function getProductMapping(product) { } const icon = iconMatch ? configPath + iconMatch[0]['Icon-path'] : defaultIcon; - if (productList == undefined) productList = await graphqlQueryNameList('getProductList'); - const productsArray = productList.data.jsonByPath.item.json.options; - const productsMatch = filterArray(productsArray, 'value', product); + if (productList == undefined) productList = await getMappingArray('products'); + const productsMatch = filterArray(productList, 'value', product); const productsText = productsMatch ? productsMatch[0].text : product; return { @@ -57,4 +48,18 @@ export function checkBlankString(string, notAvailableText = 'Not Available') { export function dateFormat(dateString) { const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available'; return formattedDate; +} + +function getCFPath(cfArray, type) { + const cfMatch = cfArray.filter(item => item['type'] === type); + const cfPath = cfMatch.length > 0 ? cfMatch[0].path : null; + return cfPath; +} + +export async function getMappingArray(type) { + const mappingCf = getCFPath(await cfMapping, type); + const mappings = executeQuery(`getMappings${encodeURIComponent(';')}path=${encodeURIComponent(mappingCf)}`).then((response) => { + return response.data.jsonByPath.item.json.options; + }) + return mappings; } \ No newline at end of file diff --git a/scripts/site-config.js b/scripts/site-config.js index 6c9694ff..e4c86b94 100644 --- a/scripts/site-config.js +++ b/scripts/site-config.js @@ -379,4 +379,19 @@ export async function getProductIconMapping() { console.log("Unable to retrieve site-config.json"); } return iconArray; +} + +/** + * @returns {Array} with mapping-type and the path to its content fragment. + */ +export async function getQueryPaths() { + let mapping = []; + const response = await getConfig('site-config.json'); + for (const entry of response['query-fragments'].data || []) { + mapping.push({ + type: entry['mapping-Type'], + path: entry['path'] + }); + } + return mapping; } \ No newline at end of file From a0dd601e4d563e45b67c6c29c670b62035eff904 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 12 Jun 2024 14:09:38 -0400 Subject: [PATCH 57/95] add checks for null 'review link' and 'final asset' (#122) --- blocks/gmo-program-details/gmo-program-details.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 679fc029..cf717066 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -486,9 +486,10 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
${checkBlankString(typeLabel)}
- Review Link + ${deliverableJson.reviewLink ? 'Review Link ': "Not Available"}
+ ${deliverableJson.linkedFolderLink ? 'Final Asset ': "Not Available"}
@@ -508,14 +509,6 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
${checkBlankString(deliverableJson.driver)}
`; - if (!(deliverableJson.linkedFolderLink == null)) { - const finalAssetLink = document.createElement('a'); - finalAssetLink.href = deliverableJson.linkedFolderLink; - finalAssetLink.classList.add('campaign-link'); - finalAssetLink.target = '_blank'; - finalAssetLink.textContent = "Final Asset"; - dataRow.querySelector('.column5').appendChild(finalAssetLink); - } createPlatformString(deliverableJson.platforms, dataRow); return dataRow; } From e5e94f1c6dc42f2b5f1e5d0af3060a76c113b66f Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 12 Jun 2024 16:53:26 -0400 Subject: [PATCH 58/95] Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name --- .../gmo-program-details.js | 108 +++++++++++++----- 1 file changed, 78 insertions(+), 30 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index cf717066..ededa381 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -1,63 +1,64 @@ import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; -import { getQueryVariable } from '../../scripts/shared.js'; import { executeQuery } from '../../scripts/graphql.js'; import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray } from '../../scripts/shared-program.js'; import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; let blockConfig; -const programName = getQueryVariable('programName'); -const programID = getQueryVariable('programID'); +const queryVars = extractQueryVars(); +const programName = queryVars.programName; +const programID = queryVars.programID; const deliverableMappings = getMappingArray('deliverableType'); const platformMappings = getMappingArray('platforms'); export default async function decorate(block) { - const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const programData = await executeQuery(programQueryString); + const program = programData.data.programList.items[0]; + blockConfig = readBlockConfig(block); + const header = buildHeader(program, queryVars).outerHTML; + if (!program) { + block.innerHTML = ` +
+ + Back +
+
+ ${header} +
No data available.
+
+ ` + decorateIcons(block); + enableBackBtn(block, blockConfig); + return; + } + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const deliverables = await executeQuery(deliverableQueryString); - const p0TargetMarketArea = programData.data.programList.items[0].p0TargetMarketArea; - const p1TargetMarketArea = programData.data.programList.items[0].p1TargetMarketArea; + const p0TargetMarketArea = program.p0TargetMarketArea; + const p1TargetMarketArea = program.p1TargetMarketArea; // Extract unique deliverable types const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); // Extract unique platforms (flattened from arrays within each item) const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); - - const program = programData.data.programList.items[0]; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; - const date = formatDate(program.launchDate); const artifactLinks = buildArtifactLinks(program).outerHTML; - blockConfig = readBlockConfig(block); + block.innerHTML = `
Back
-
-
-
-
-
- ${program.programName} -
- ${program.campaignName ? '
' + program.campaignName + '
': ""} -
- - Launch date - ${date} -
-
-
+ ${header}
Overview
Deliverables
@@ -164,11 +165,7 @@ export default async function decorate(block) { block.querySelector('.tab-wrapper').addEventListener('click', (event) => { switchTab(event.target); }) - block.querySelector('.back-button').addEventListener('click', () => { - const host = location.origin + getBaseConfigPath(); - const listPage = blockConfig.listpage; - document.location.href = host + `/${listPage}`; - }) + enableBackBtn(block, blockConfig); block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { const readMore = event.target; @@ -187,6 +184,35 @@ export default async function decorate(block) { buildStatus(program.status); } +function enableBackBtn(block, blockConfig) { + block.querySelector('.back-button').addEventListener('click', () => { + const host = location.origin + getBaseConfigPath(); + const listPage = blockConfig.listpage; + document.location.href = host + `/${listPage}`; + }) +} + +function buildHeader(program, queryVars) { + const headerWrapper = document.createElement('div'); + headerWrapper.classList.add('details-header-wrapper'); + const date = program && program.launchDate ? `
` + + `Launch date${formatDate(program.launchDate)}
` : ""; + const programName = program ? program.programName : queryVars.programName; + const campaignName = program && program.campaignName ? '
' + program.campaignName + '
': ""; + headerWrapper.innerHTML = ` +
+
+
+
+ ${programName} +
+ ${campaignName} + ${date} +
+ ` + return headerWrapper; +} + /** * Extracts unique values from a specified property within an array of objects. * @@ -564,3 +590,25 @@ function attachListener(htmlElement) { }) }) } + +function extractQueryVars() { + const urlStr = window.location.href; + const pnRegex = /.*programName=(.*?)&programID=(.*)/; + const match = urlStr.match(pnRegex); + if (match && match[1] && match[2]) { + const pName = decodeURIComponent(match[1]); + let pID = decodeURIComponent(match[2]) + if (pID.endsWith('#')) { + pID = pID.slice(0, -1); + } + return { + programName: pName, + programID: pID + } + } else { + return { + programName: 'Program Name Not Available', + programID: 'Program ID Not Available' + } + } +} \ No newline at end of file From 46507c1463a58fe409b60900cdd34d9bdafe9856 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 13 Jun 2024 16:13:56 -0500 Subject: [PATCH 59/95] Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) --- blocks/gmo-program-header/gmo-program-header.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index ab99e4f3..295e046b 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -126,6 +126,8 @@ export default async function decorate(block) { }); initializeDropdowns(); + // Attach event listeners for the dropdowns and reset filters + attachEventListeners(); decorateIcons(block); document.addEventListener('click', handleClickOutside); } From baa993e334368026c44a2fb092140462347d9482 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Fri, 14 Jun 2024 16:08:21 -0500 Subject: [PATCH 60/95] Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes --- .../gmo-program-details.css | 46 +++++++++++++++++-- 1 file changed, 41 insertions(+), 5 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 1ac8b1f9..9a24c36e 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -1,6 +1,7 @@ :root { border-bottom: none; } + body { background-color: rgb(247, 246, 246); } @@ -27,6 +28,7 @@ body { font-weight: bold; } } + .gmo-program-details.block { & .h1 { font: normal normal bold 18px/27px Adobe Clean; @@ -179,11 +181,13 @@ body { } } } + .tab.two-column { display: flex; flex-direction: row; justify-content: space-between; } + .overview-wrapper { display: flex; flex-direction: column; @@ -214,6 +218,7 @@ body { cursor: pointer; } } + .kpis-wrapper { margin-top: 30px; & ul { @@ -227,6 +232,7 @@ body { margin-top: 15px; } } + .use-cases-wrapper { margin-bottom: 30px; } @@ -264,6 +270,7 @@ body { flex-direction: column; margin-top: 20px; } + .links-wrapper { margin-top: 30px; & .links { @@ -277,6 +284,7 @@ body { color: #0D66D0; } } + .infocards-wrapper { margin-right: 40px; & .card { @@ -290,6 +298,7 @@ body { } } } + .card { & .card-heading { margin-top: 10px; @@ -305,6 +314,7 @@ body { font-size: 14px; } } + .milestone, .card-content { font: normal normal normal 14px/21px Adobe Clean; & .icon { @@ -317,6 +327,7 @@ body { margin-bottom: 5px; } } + .deliverables { & > .page-heading { display: flex; @@ -352,6 +363,7 @@ body { } } } + .table-wrapper { font: normal normal bold 14px/21px Adobe Clean; & > .table-header { @@ -369,6 +381,7 @@ body { top: 0; } } + .table-content { max-height: 45vh; min-height: 7vh; @@ -377,10 +390,12 @@ body { display: none; } } + .inactive { display: none !important; visibility: hidden; } + .row { height: 56px; &:not(:last-child) { @@ -389,10 +404,11 @@ body { &.datarow { display: flex; align-items: center; - height: 88px; + height: auto; /* Set to auto to accommodate varying heights */ font-weight: 200; & .property { - line-height: 88px; + line-height: normal; /* Adjust line-height to normal */ + padding: 10px 0; /* Add padding for better spacing */ } &:first-child, &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -405,7 +421,7 @@ body { & .date-wrapper { display: flex; flex-direction: column; - justify-content:center; + justify-content: center; & > .completion-date, .revised-date { line-height: 21px; } @@ -446,6 +462,7 @@ body { justify-content: center; } } + .subheader { &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -490,12 +507,13 @@ body { border-radius: 3px; } } - } + .header-row3:hover .date-tooltip { visibility: visible; opacity: 1; } + .date-tooltip { background-color: #D3D3D3; border-radius: 2px; @@ -508,32 +526,50 @@ body { font: normal normal normal 12px/17px Adobe Clean; margin-left: 100px; } + .column1 { margin-left: 45px; } + .column1 { width: 200px; } + .column3 { width: 140px; } -.column4, & .column5, & .column6 { + +.column4, .column5, .column6 { width: 110px; } + .column2 { width: 130px; } + .column7 { width: 170px; } + .column8 { width: 120px; } + .column9 { width: 150px; + word-wrap: break-word; + white-space: normal; + line-height: 1.2; } + .table-column { &:not(:last-child) { margin-right: 85px; } } + +@media (max-width: 1255px) { + .column9 { + width: 100px; + } +} From 1bd72f3a86674eab54178ff8f07a8d8917c4aa31 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Tue, 18 Jun 2024 15:59:53 -0500 Subject: [PATCH 61/95] ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" --- .../gmo-program-details.css | 73 +++++++++++-------- .../gmo-program-details.js | 31 ++++++-- blocks/gmo-program-list/gmo-program-list.css | 17 +++-- blocks/gmo-program-list/gmo-program-list.js | 16 ++++ 4 files changed, 94 insertions(+), 43 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 9a24c36e..e77f4ed0 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -102,37 +102,6 @@ body { } } -.header-row3 .icon-release-tier { - width: 16px; - height: 16px; - background-image: url('/icons/launch.svg'); - background-size: contain; - background-repeat: no-repeat; - margin-right: 8px; - margin-left: 16px; -} - -.header-row3 .icon-productGroup { - width: 16px; - height: 16px; - background-image: url('/icons/folderOpenOutline.svg'); - background-size: contain; - background-repeat: no-repeat; - margin-right: 8px; - margin-left: 16px; -} - -.header-row3 .release-tier { - font: normal normal normal 14px/21px Adobe Clean; - margin-left: 8px; -} - -.header-row3 .productGroup { - font: normal normal normal 14px/21px Adobe Clean; - margin-left: 8px; -} - - .details-header-wrapper .header-row3 { display: flex; align-items: center; @@ -364,6 +333,47 @@ body { } } +.total-assets-tooltip { + position: relative; + display: inline-block; + cursor: pointer; +} + +.total-assets-tooltip .tooltiptext { + visibility: hidden; + white-space: nowrap; /* Ensure text appears on one line */ + background-color: #D3D3D3; /* Match the background color */ + color: black; /* Match the text color */ + text-align: left; /* Left-align the text */ + border-radius: 4px; + padding: 5px 10px; /* Adjust padding as needed */ + position: absolute; + z-index: 1; + top: 50%; /* Center vertically */ + left: 100%; /* Position to the right of the element */ + transform: translateY(-50%); /* Center vertically */ + margin-left: 10px; /* Adjust margin to match the screenshot */ + opacity: 0; + transition: opacity 0.3s; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */ +} + +.total-assets-tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 50%; /* Center the arrow vertically */ + left: -5px; /* Adjust to position the arrow */ + transform: translateY(-50%); /* Center vertically */ + border-width: 5px; + border-style: solid; + border-color: transparent #D3D3D3 transparent transparent; /* Arrow color matches tooltip background */ +} + +.total-assets-tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} + .table-wrapper { font: normal normal bold 14px/21px Adobe Clean; & > .table-header { @@ -573,3 +583,4 @@ body { width: 100px; } } + diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index ededa381..a950bbb3 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -125,21 +125,22 @@ export default async function decorate(block) {
${artifactLinks} -
-
Total Assets
+
+
Total Approved Assets
+ To view the assets, go to the "All Asset" search page and use Program and Campaign name facet to filter the assets
-
Deliverable Name
+
Deliverable Task Name
Deliverable Type
Platforms
Review Link
Final Asset
Status Update
Completion Date
-
Project Owner
+
Task Owner
@@ -192,6 +193,13 @@ function enableBackBtn(block, blockConfig) { }) } +function buildDriverField(driverName) { + const driverSpan = document.createElement('span'); + driverSpan.classList.add('driver-text'); + driverSpan.innerHTML = `Project Owner: ${driverName}`; + return driverSpan; +} + function buildHeader(program, queryVars) { const headerWrapper = document.createElement('div'); headerWrapper.classList.add('details-header-wrapper'); @@ -199,6 +207,14 @@ function buildHeader(program, queryVars) { `Launch date${formatDate(program.launchDate)}
` : ""; const programName = program ? program.programName : queryVars.programName; const campaignName = program && program.campaignName ? '
' + program.campaignName + '
': ""; + + const driver = program && program.driver ? program.driver : "Not Available"; + let driverField = ''; + + if (program){ + driverField=buildDriverField(driver).outerHTML; + } + headerWrapper.innerHTML = `
@@ -207,7 +223,10 @@ function buildHeader(program, queryVars) { ${programName}
${campaignName} - ${date} +
+ ${date} + ${driverField} +
` return headerWrapper; @@ -611,4 +630,4 @@ function extractQueryVars() { programID: 'Program ID Not Available' } } -} \ No newline at end of file +} diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css index a417c0c9..f2351932 100644 --- a/blocks/gmo-program-list/gmo-program-list.css +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -204,28 +204,33 @@ select { border-radius: 4px; } .column-1 { - width: 28%; + width: 18%; margin-right: 1%; } .column-2 { - width: 40%; + width: 25%; margin-right: 1%; } .column-3 { - width: 12%; + width: 15%; margin-right: 1%; } .column-4 { - width: 16%; + width: 14%; margin-right: 1%; } .column-5 { - width: 13%; + width: 10%; margin-right: 1%; } .column-6 { - width: 14%; + width: 10%; + margin-right: 1%; } +.column-7 { + width: 5%; +} + .status { width: 80px; text-align: center; diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 04a15a3a..83563dc9 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -30,6 +30,11 @@ const headerConfig = [ 'name': 'Status', 'attribute': 'status', 'sortable': false + }, + { + 'name': 'Geo', + 'attribute': 'geo', + 'sortable': false } ] @@ -214,17 +219,28 @@ async function buildCampaignList(campaigns, numPerPage) { var campaignStatusWrapper = document.createElement('div'); campaignStatusWrapper.classList.add('status-wrapper', 'column-6', 'vertical-center'); campaignStatusWrapper = buildStatus(campaignStatusWrapper, campaign); + + const campaignGeo = document.createElement('div'); + campaignGeo.textContent = formatGeos(campaign.node.p0TargetGeo); + campaignGeo.classList.add('column-7', 'vertical-center'); + campaignGeo.dataset.property = 'geo'; + campaignRow.appendChild(campaignInfoWrapper); campaignRow.appendChild(campaignOverviewWrapper); campaignRow.appendChild(campaignLaunch); campaignRow.appendChild(campaignProducts); campaignRow.appendChild(campaignStatusWrapper); + campaignRow.appendChild(campaignGeo); listWrapper.appendChild(campaignRow); } return listWrapper; } +function formatGeos(geoArray) { + return geoArray.map(geo => geo.toUpperCase()).join(', '); +} + function buildStatus(statusWrapper, campaign) { const campaignStatus = document.createElement('div'); const statusStr = checkBlankString(campaign.node.status); From 946694f8ec0e49c9529435902684ffe44e1c7250 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Tue, 25 Jun 2024 10:07:34 -0500 Subject: [PATCH 62/95] ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet --- blocks/gmo-program-details/gmo-program-details.css | 2 +- blocks/gmo-program-details/gmo-program-details.js | 6 +++--- blocks/gmo-program-list/gmo-program-list.css | 1 + blocks/gmo-program-list/gmo-program-list.js | 13 ++++++++++++- scripts/assets.js | 8 ++++++-- 5 files changed, 23 insertions(+), 7 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index e77f4ed0..0c5346a7 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -423,7 +423,7 @@ body { &:first-child, &:nth-child(2) { border-top: 2px solid #F4F4F4; } - & .deliverable-name, .platforms, .deliverable-type, .review-link, .kpi { + & .deliverable-name, .platforms, .deliverable-type, .qa-files, .kpi { overflow: hidden; text-overflow: ellipsis; line-height: 16px; diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index a950bbb3..e493bcd7 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -136,7 +136,7 @@ export default async function decorate(block) {
Deliverable Task Name
Deliverable Type
Platforms
-
Review Link
+
QA Files
Final Asset
Status Update
Completion Date
@@ -530,8 +530,8 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
${checkBlankString(deliverableJson.deliverableName)}
${checkBlankString(typeLabel)}
-
- ${deliverableJson.reviewLink ? 'Review Link ': "Not Available"} +
+ ${deliverableJson.reviewLink ? 'QA Files ': "Not Available"}
${deliverableJson.linkedFolderLink ? 'Final Asset ': "Not Available"} diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css index f2351932..5e71b736 100644 --- a/blocks/gmo-program-list/gmo-program-list.css +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -262,6 +262,7 @@ select { .campaign-name-label, .campaign-name { position: relative; display: inline-block; + cursor: pointer; } .campaign-name-label:hover .tooltip { diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 83563dc9..0635f963 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -185,6 +185,7 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignNameWrapper = document.createElement('div'); campaignNameWrapper.classList.add('campaign-name-wrapper', 'vertical-center'); + campaignNameWrapper.innerHTML = `
${checkBlankString(programName)} @@ -195,7 +196,17 @@ async function buildCampaignList(campaigns, numPerPage) { Marketing Moment
`; - + + // Add click event to the campaign name label and text + const campaignNameLabel = campaignNameWrapper.querySelector('.campaign-name-label'); + const campaignNameText = campaignNameWrapper.querySelector('.campaign-name'); + campaignNameLabel.addEventListener('click', () => { + window.location.href = campaignDetailsLink; + }); + campaignNameText.addEventListener('click', () => { + window.location.href = campaignDetailsLink; + }); + campaignInfoWrapper.appendChild(campaignIconLink); campaignInfoWrapper.appendChild(campaignNameWrapper); diff --git a/scripts/assets.js b/scripts/assets.js index 37ec6233..ea159d72 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -9,7 +9,7 @@ import { getOptimizedDeliveryUrl } from './polaris.js'; -import { getAdminConfig } from './site-config.js'; +import { getAdminConfig, getBaseConfigPath, getBrandingConfig } from './site-config.js'; import { createSearchEndpoint, logError } from './scripts.js'; @@ -96,7 +96,11 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { } else { - return null; + //Display Underdevelopment Icon + const configPath = getBaseConfigPath(); + const brandingConfig = await getBrandingConfig(); + const underdevelopmentIconPath = `${configPath}/${brandingConfig.underdevelopmentIcon}`.replace(/\/\//g, '/'); + return {imageUrl : underdevelopmentIconPath, imageAltText: 'Under Development', assetCount: 0}; } } // Handle other response codes From 7d1fd32505d2fe524d9a1bf14fdf854658c1f06f Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Fri, 28 Jun 2024 11:44:04 -0500 Subject: [PATCH 63/95] Sorted the options in the dropdown lists alphabetically on the options text field (#131) --- blocks/gmo-program-header/gmo-program-header.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index 295e046b..00f8cc61 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -173,6 +173,17 @@ function attachEventListeners() { function populateDropdown(response, dropdownId, type) { const options = response.data?.jsonByPath ? response.data.jsonByPath.item.json.options : response; + //Sort the options alphabetically + options.sort((a, b) => { + if (a.text < b.text) { + return -1; + } + if (a.text > b.text) { + return 1; + } + return 0; + }); + let dropdownContent = document.getElementById(dropdownId); dropdownContent.innerHTML = ''; options.forEach((option, index) => { From d8c040b6af33f7192074b9f74161ba235f00548e Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Fri, 28 Jun 2024 11:50:12 -0500 Subject: [PATCH 64/95] ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. --- .../gmo-program-details.js | 132 +++++++++++------- 1 file changed, 82 insertions(+), 50 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index e493bcd7..8feafeb6 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -14,12 +14,47 @@ const platformMappings = getMappingArray('platforms'); export default async function decorate(block) { const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); + + blockConfig = readBlockConfig(block); + const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; + + // Immediately render a placeholder header + block.innerHTML = ` +
+ + Back +
+
+
Loading program details...
+
+ `; + + // Wait for program data to render the actual header const programData = await executeQuery(programQueryString); const program = programData.data.programList.items[0]; - blockConfig = readBlockConfig(block); const header = buildHeader(program, queryVars).outerHTML; - if (!program) { + + // Update the header with the actual data + block.querySelector('.placeholder-header').outerHTML = header; + + let imageObject = null; + let totalassets = 0; + if (program) { + try { + imageObject = await searchAsset(program.programName, program.campaignName); + if (imageObject) { + insertImageIntoCampaignImg(block, imageObject); + totalassets = imageObject.assetCount; + } + } catch (error) { + console.error("Failed to load campaign image:", error); + } + decorateIcons(block); + } + else + { block.innerHTML = `
@@ -35,30 +70,15 @@ export default async function decorate(block) { return; } - const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; - const deliverables = await executeQuery(deliverableQueryString); - const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; - - // Extract unique deliverable types - const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); - // Extract unique platforms (flattened from arrays within each item) - const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); const kpis = buildKPIList(program).outerHTML; - const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; - const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; - - block.innerHTML = ` -
- - Back -
-
- ${header} + + // Inject the additional HTML content + block.querySelector('.main-body-wrapper').innerHTML += `
Overview
Deliverables
@@ -127,7 +147,7 @@ export default async function decorate(block) { ${artifactLinks}
Total Approved Assets
- + ${totalassets} To view the assets, go to the "All Asset" search page and use Program and Campaign name facet to filter the assets
@@ -146,26 +166,43 @@ export default async function decorate(block) {
-
`; + + // Wait for deliverables data + const deliverables = await executeQuery(deliverableQueryString); + + const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); + const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); + buildProductCard(program); - try { - const imageObject = await searchAsset(program.programName, program.campaignName); - if (imageObject){ - insertImageIntoCampaignImg(block,imageObject); - document.getElementById('totalassets').textContent = imageObject.assetCount; - } - else - { - document.getElementById('totalassets').textContent = 0; - } - } catch (error) { - console.error("Failed to load campaign image:", error); - } + buildFieldScopes('deliverable-type', uniqueDeliverableTypes, block); + buildFieldScopes('platforms', uniquePlatforms, block); + + const table = await buildTable(await deliverables).then(async (rows) => { + return rows; + }); - block.querySelector('.tab-wrapper').addEventListener('click', (event) => { + // Batch Dom Updates + const tableRoot = block.querySelector('.table-content'); + const fragment = document.createDocumentFragment(); + fragment.appendChild(table); + tableRoot.appendChild(fragment); + + buildStatus(program.status); + + // Optimize Event Listeners: Added debouncing to event listeners to prevent performance issues. + const debounce = (func, delay) => { + let timeout; + return (...args) => { + clearTimeout(timeout); + timeout = setTimeout(() => func(...args), delay); + }; + }; + + block.querySelector('.tab-wrapper').addEventListener('click', debounce((event) => { switchTab(event.target); - }) + }, 300)); + enableBackBtn(block, blockConfig); block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { @@ -175,14 +212,7 @@ export default async function decorate(block) { }); }); decorateIcons(block); - buildFieldScopes('deliverable-type',uniqueDeliverableTypes, block); - buildFieldScopes('platforms',uniquePlatforms, block); - const table = await buildTable(await deliverables).then(async (rows) => { - return rows; - }) - const tableRoot = block.querySelector('.table-content'); - tableRoot.appendChild(table); - buildStatus(program.status); + } function enableBackBtn(block, blockConfig) { @@ -248,9 +278,11 @@ function getUniqueItems(items, property) { )]; } -function insertImageIntoCampaignImg(block,imageObject) { +function insertImageIntoCampaignImg(block, imageObject) { const campaignImgDiv = block.querySelector('.campaign-img'); const imgElement = document.createElement('img'); + //Lazy load images + imgElement.loading = 'lazy'; imgElement.src = imageObject.imageUrl; imgElement.alt = imageObject.imageAltText; campaignImgDiv.appendChild(imgElement); @@ -259,7 +291,7 @@ function insertImageIntoCampaignImg(block,imageObject) { function switchTab(tab) { if (tab.classList.contains('active') || tab.classList.contains('tab-wrapper')) { return; - } + } document.querySelector('.tabBtn.active').classList.toggle('active'); document.querySelector(`.tab:not(.inactive)`).classList.toggle('inactive'); const targetTab = tab.dataset.target; @@ -412,7 +444,7 @@ function formatDate(dateString) { // Formatting the date into mm/dd/yyyy format const formattedDate = mm + '/' + dd + '/' + yyyy; - + return formattedDate; } @@ -502,7 +534,7 @@ async function buildHeaderRow(category, headerType, isInactive, matchCount) { const headerRow = document.createElement('div'); headerRow.classList.add('row', 'collapsible', 'header'); let divopen; - if (headerType === 'subcategory') { + if (headerType === 'subcategory') { headerRow.classList.add('subheader'); divopen = '
'; } else { @@ -579,7 +611,7 @@ function sortRows(rows) { nodes.sort((a, b) => { var classA = a.classList ? a.classList.contains('datarow') : false; var classB = b.classList ? b.classList.contains('datarow') : false; - + if (classA && !classB) { return 1; } else if (!classA && classB) { From 19944f5670ef24fd2b600f74df54e9923991a2bc Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Mon, 8 Jul 2024 14:49:37 -0500 Subject: [PATCH 65/95] assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon --- .../gmo-program-details.js | 15 +++++++++++-- scripts/assets.js | 21 ++++++++++++++----- 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 8feafeb6..09f34aca 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -54,7 +54,7 @@ export default async function decorate(block) { decorateIcons(block); } else - { + { //programName and campaignName is null block.innerHTML = `
@@ -64,7 +64,18 @@ export default async function decorate(block) { ${header}
No data available.
- ` + `; + try { + //programName and campaignName is null display under development icon + imageObject = await searchAsset(null, null); + if (imageObject) { + insertImageIntoCampaignImg(block, imageObject); + totalassets = imageObject.assetCount; + } + } catch (error) { + console.error("Failed to load campaign image:", error); + } + decorateIcons(block); enableBackBtn(block, blockConfig); return; diff --git a/scripts/assets.js b/scripts/assets.js index ea159d72..7d213422 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -33,6 +33,12 @@ const getFilters = () => { return `is_pur-expirationDate = 0 OR pur-expirationDate > ${currentEpoch}`; }; +async function getUnderdevelopmentIcon() { + const configPath = getBaseConfigPath(); + const brandingConfig = await getBrandingConfig(); + const underdevelopmentIconPath = `${configPath}/${brandingConfig.underdevelopmentIcon}`.replace(/\/\//g, '/'); + return { imageUrl: underdevelopmentIconPath, imageAltText: 'Under Development', assetCount: 0 }; +} /** * Search Asset for programName and campaignName parameters. @@ -49,6 +55,13 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); + + if (programName==null && campaignName==null) + { + // Display Underdevelopment Icon + return await getUnderdevelopmentIcon(); + } + // Initialize the facetFilters array const facetFilters = []; if (programName) { // Check if programName is not null @@ -96,11 +109,8 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { } else { - //Display Underdevelopment Icon - const configPath = getBaseConfigPath(); - const brandingConfig = await getBrandingConfig(); - const underdevelopmentIconPath = `${configPath}/${brandingConfig.underdevelopmentIcon}`.replace(/\/\//g, '/'); - return {imageUrl : underdevelopmentIconPath, imageAltText: 'Under Development', assetCount: 0}; + // Display Underdevelopment Icon + return await getUnderdevelopmentIcon(); } } // Handle other response codes @@ -110,3 +120,4 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { throw error; } } + From 652faa8e4a4b2ff86f44c2fae87b8f9d6e2961f4 Mon Sep 17 00:00:00 2001 From: Tyrone Tse Date: Thu, 11 Jul 2024 10:19:18 -0500 Subject: [PATCH 66/95] gmo-program-details.js PR Code review change to --- blocks/gmo-program-details/gmo-program-details.js | 2 +- scripts/assets.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 09f34aca..89e776c1 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -39,7 +39,7 @@ export default async function decorate(block) { // Update the header with the actual data block.querySelector('.placeholder-header').outerHTML = header; - let imageObject = null; + let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; let totalassets = 0; if (program) { try { diff --git a/scripts/assets.js b/scripts/assets.js index 7d213422..c4b5fb58 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -56,7 +56,7 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); - if (programName==null && campaignName==null) + if (!programName && !campaignName) { // Display Underdevelopment Icon return await getUnderdevelopmentIcon(); From 29a5876be86eac4cc5065409778ff64df870e139 Mon Sep 17 00:00:00 2001 From: Tyrone Tse Date: Thu, 11 Jul 2024 10:20:06 -0500 Subject: [PATCH 67/95] Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. --- blocks/gmo-program-details/gmo-program-details.js | 2 +- scripts/assets.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 89e776c1..09f34aca 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -39,7 +39,7 @@ export default async function decorate(block) { // Update the header with the actual data block.querySelector('.placeholder-header').outerHTML = header; - let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; + let imageObject = null; let totalassets = 0; if (program) { try { diff --git a/scripts/assets.js b/scripts/assets.js index c4b5fb58..7d213422 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -56,7 +56,7 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); - if (!programName && !campaignName) + if (programName==null && campaignName==null) { // Display Underdevelopment Icon return await getUnderdevelopmentIcon(); From 04d953d19fcff7b74f49e8ffed3ab2d8e2f9645f Mon Sep 17 00:00:00 2001 From: Tyrone Tse Date: Thu, 11 Jul 2024 10:25:26 -0500 Subject: [PATCH 68/95] gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) --- blocks/gmo-program-details/gmo-program-details.js | 2 +- scripts/assets.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 09f34aca..89e776c1 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -39,7 +39,7 @@ export default async function decorate(block) { // Update the header with the actual data block.querySelector('.placeholder-header').outerHTML = header; - let imageObject = null; + let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; let totalassets = 0; if (program) { try { diff --git a/scripts/assets.js b/scripts/assets.js index 7d213422..e4902c59 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -56,7 +56,7 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); - if (programName==null && campaignName==null) + if (!progamName && !campaginName) { // Display Underdevelopment Icon return await getUnderdevelopmentIcon(); From 49e77a61d9da5de44facec59443ff1c6f7514478 Mon Sep 17 00:00:00 2001 From: Tyrone Tse Date: Thu, 11 Jul 2024 12:11:40 -0500 Subject: [PATCH 69/95] Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) --- scripts/assets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/assets.js b/scripts/assets.js index e4902c59..c4b5fb58 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -56,7 +56,7 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { const indexName = await getSearchIndex(); - if (!progamName && !campaginName) + if (!programName && !campaignName) { // Display Underdevelopment Icon return await getUnderdevelopmentIcon(); From 1ac4f6437d515534a2972fcec174b80064d545b2 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 11 Jul 2024 16:31:53 -0500 Subject: [PATCH 70/95] feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. --- blocks/gmo-program-list/gmo-program-list.js | 67 +++++++++++++++------ 1 file changed, 48 insertions(+), 19 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 0635f963..e26f3d61 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -50,8 +50,19 @@ let totalPages = 0; let campaignCount = await graphqlCampaignCount(); let blockConfig; -//Custom event gmoCampaignListBlock to allow the gmo-campaign-header to trigger the gmo-program-list to update -document.addEventListener('gmoCampaignListBlock', async function() { +// Debounce function to reduce the number of calls +function debounce(func, delay) { + let debounceTimer; + return function() { + const context = this; + const args = arguments; + clearTimeout(debounceTimer); + debounceTimer = setTimeout(() => func.apply(context, args), delay); + }; +} + +//Custom event gmoCampaignListBlock with debounce to allow the gmo-campaign-header to trigger the gmo-program-list to update +document.addEventListener('gmoCampaignListBlock', debounce(async function() { //Build graphq filter that is passed to the graphql persisted queries const graphQLFilterArray = getFilterValues(); const searchInputValue = document.getElementById('campaign-search').value; @@ -64,16 +75,15 @@ document.addEventListener('gmoCampaignListBlock', async function() { const block = document.querySelector('.gmo-program-list.block'); //Get Campaign Count for pagination campaignCount = await graphqlCampaignCount(currentGraphqlFilter); - //Trigger loading the gmo-campaign-block + //Reset page variables currentPageInfo = {}; cursorArray = []; currentPage = 1; currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; - + //Trigger loading the gmo-campaign-block decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); - -}); +}, 300)); export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) { @@ -117,8 +127,32 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, listContainer.appendChild(listItems); listContainer.appendChild(listFooter); // Show Hide Previous and Next Page buttons - const footerNext = document.querySelector('.footer-pagination-button.next'); + togglePaginationButtons(); + + decorateIcons(block); + + // Lazy loading for images + document.addEventListener('DOMContentLoaded', function() { + if ('IntersectionObserver' in window) { + const lazyImages = document.querySelectorAll('.lazy'); + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + img.classList.remove('lazy'); + observer.unobserve(img); + } + }); + }); + lazyImages.forEach(img => observer.observe(img)); + } + }); +} + +function togglePaginationButtons() { const footerPrev = document.querySelector('.footer-pagination-button.prev'); + const footerNext = document.querySelector('.footer-pagination-button.next'); if (currentPage > 1) { footerPrev.classList.add('active'); } else { @@ -130,9 +164,6 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, } else { footerNext.classList.remove('active'); } - - decorateIcons(block); - } function getFilterValues(){ @@ -275,14 +306,13 @@ function buildStatus(statusWrapper, campaign) { } async function addThumbnail(parentElement, programName, campaignName) { - searchAsset(programName, campaignName).then((response) => { - if (response && (Object.hasOwn(response, 'imageUrl') && Object.hasOwn(response, 'imageAltText'))) { - const iconImage = document.createElement('img'); - iconImage.src = response?.imageUrl; - iconImage.alt = response?.imageAltText; - parentElement.appendChild(iconImage); - } - }) + const response = await searchAsset(programName, campaignName); + if (response?.imageUrl && response?.imageAltText) { + const iconImage = document.createElement('img'); + iconImage.src = response.imageUrl; + iconImage.alt = response.imageAltText; + parentElement.appendChild(iconImage); + } } async function buildProduct(product) { @@ -529,4 +559,3 @@ function sortColumn(dir, property) { container.appendChild(row); }); } - From a70789301140fcfbed006ab594f0b62b96b32a67 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Fri, 12 Jul 2024 08:42:42 -0500 Subject: [PATCH 71/95] ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. --- blocks/gmo-program-list/gmo-program-list.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index e26f3d61..9b331872 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -50,19 +50,7 @@ let totalPages = 0; let campaignCount = await graphqlCampaignCount(); let blockConfig; -// Debounce function to reduce the number of calls -function debounce(func, delay) { - let debounceTimer; - return function() { - const context = this; - const args = arguments; - clearTimeout(debounceTimer); - debounceTimer = setTimeout(() => func.apply(context, args), delay); - }; -} - -//Custom event gmoCampaignListBlock with debounce to allow the gmo-campaign-header to trigger the gmo-program-list to update -document.addEventListener('gmoCampaignListBlock', debounce(async function() { +document.addEventListener('gmoCampaignListBlock', async function() { //Build graphq filter that is passed to the graphql persisted queries const graphQLFilterArray = getFilterValues(); const searchInputValue = document.getElementById('campaign-search').value; @@ -83,8 +71,7 @@ document.addEventListener('gmoCampaignListBlock', debounce(async function() { currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; //Trigger loading the gmo-campaign-block decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); -}, 300)); - +}); export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) { if (blockConfig == undefined) blockConfig = readBlockConfig(block); From 46e479bdb9ff942796f06a61c2acc409eac10182 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Mon, 15 Jul 2024 09:15:31 -0500 Subject: [PATCH 72/95] ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. --- blocks/gmo-program-details/gmo-program-details.css | 7 +++++++ blocks/gmo-program-details/gmo-program-details.js | 6 +++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 0c5346a7..de5beace 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -584,3 +584,10 @@ body { } } +.hide-overflow { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 89e776c1..2531bf5a 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -215,13 +215,17 @@ export default async function decorate(block) { }, 300)); enableBackBtn(block, blockConfig); + block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { const readMore = event.target; const parent = readMore.parentElement; - parent.querySelector('.paragraph').classList.toggle('hide-overflow'); + const paragraph = parent.querySelector('.paragraph'); + paragraph.classList.toggle('hide-overflow'); + readMore.textContent = paragraph.classList.contains('hide-overflow') ? 'Read more' : 'Read less'; }); }); + decorateIcons(block); } From 2775ebb5bab29056bfd918603b73c6c20c1ea926 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 18 Jul 2024 11:34:09 -0500 Subject: [PATCH 73/95] Updated function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) (#142) Added new parameter deliverableType, moved parameter imageWidth to be the last parameter. --- scripts/assets.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/scripts/assets.js b/scripts/assets.js index c4b5fb58..6fa27db1 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -41,15 +41,17 @@ async function getUnderdevelopmentIcon() { } /** - * Search Asset for programName and campaignName parameters. + * Search Asset for programName, campaignName, deliverableType parameters. * * @param {string} - Program Name. * @param {string} - Campaign Name. + * @param {string} - Deliverable Type + * @param {integer} - Image Width * @returns {Image } Resolves with image object. * @throws {Error} If an HTTP error or network error occurs. */ -export async function searchAsset(programName, campaignName, imageWidth = 80) { +export async function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) { const adminConfig = await getAdminConfig(); const deliveryURL = await initDeliveryEnvironment(); @@ -70,6 +72,10 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { if (campaignName) { // Check if campaignName is not null facetFilters.push('gmo-campaignName :'+ campaignName); } + + if (deliverableType) { // Check if deliverableType is not null + facetFilters.push('gmo-deliverableType :'+ deliverableType); + } const data = { requests: [ { From 66aacde76833db24759f5ddff04d0dbd8a52a537 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Mon, 29 Jul 2024 13:26:17 -0500 Subject: [PATCH 74/95] Updated Launch Date label to Proposed Launch Date in Program List (#145) Updated Launch Date tool tip to and Proposed Launch Date in Program Details page --- blocks/gmo-program-details/gmo-program-details.css | 2 +- blocks/gmo-program-details/gmo-program-details.js | 2 +- blocks/gmo-program-list/gmo-program-list.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index de5beace..ca75382e 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -531,7 +531,7 @@ body { z-index: 1; position: absolute; text-align: center; - width: 100px; + width: 120px; padding: 2px 0; font: normal normal normal 12px/17px Adobe Clean; margin-left: 100px; diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 2531bf5a..738f03b0 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -249,7 +249,7 @@ function buildHeader(program, queryVars) { const headerWrapper = document.createElement('div'); headerWrapper.classList.add('details-header-wrapper'); const date = program && program.launchDate ? `
` + - `Launch date${formatDate(program.launchDate)}
` : ""; + `Proposed Launch Date${formatDate(program.launchDate)}` : ""; const programName = program ? program.programName : queryVars.programName; const campaignName = program && program.campaignName ? '
' + program.campaignName + '
': ""; diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 9b331872..927093f4 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -17,7 +17,7 @@ const headerConfig = [ 'sortable': false }, { - 'name': 'Launch Date', + 'name': 'Proposed Launch Date', 'attribute': 'launch', 'sortable': true, 'type': 'date' From 62943a749914720347ae0f96a83314fc4f817778 Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Wed, 31 Jul 2024 15:01:02 -0700 Subject: [PATCH 75/95] Added redirect block which supports regex (#148) Co-authored-by: Mathieu Lessard --- blocks/gmo-redirect/gmo-redirect.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/blocks/gmo-redirect/gmo-redirect.js b/blocks/gmo-redirect/gmo-redirect.js index 3c1c2a87..7f3bd32e 100644 --- a/blocks/gmo-redirect/gmo-redirect.js +++ b/blocks/gmo-redirect/gmo-redirect.js @@ -24,12 +24,13 @@ export default async function decorate(block) { for(let key in match.groups){ redirect = redirect.replace(`{${key}}`, match.groups[key]); } - alert('You are being redirected to the latest version of the Marketing Hub. Please update your URL, if saved/bookmarked.') - console.info('redirecting to', redirect); + console.log('redirecting to', redirect); window.location.href = redirect; return; } } } block.innerHTML = ''; -} \ No newline at end of file +} + + From 55a3a68dba9f9d629e29ee1e20d4ed40651033cd Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Thu, 1 Aug 2024 08:26:44 -0700 Subject: [PATCH 76/95] Replaced console.log with console.info (#149) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info --------- Co-authored-by: Mathieu Lessard --- blocks/gmo-redirect/gmo-redirect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/gmo-redirect/gmo-redirect.js b/blocks/gmo-redirect/gmo-redirect.js index 7f3bd32e..61228bad 100644 --- a/blocks/gmo-redirect/gmo-redirect.js +++ b/blocks/gmo-redirect/gmo-redirect.js @@ -24,7 +24,7 @@ export default async function decorate(block) { for(let key in match.groups){ redirect = redirect.replace(`{${key}}`, match.groups[key]); } - console.log('redirecting to', redirect); + console.info('redirecting to', redirect); window.location.href = redirect; return; } From 8684c19fe3f90dc7f73ef41151950f07a83ea0e4 Mon Sep 17 00:00:00 2001 From: mathieu-lessard Date: Wed, 7 Aug 2024 11:49:52 -0700 Subject: [PATCH 77/95] Added alert letting people know their content as moved (#154) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info * Added alert for redirect --------- Co-authored-by: Mathieu Lessard --- blocks/gmo-redirect/gmo-redirect.js | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/gmo-redirect/gmo-redirect.js b/blocks/gmo-redirect/gmo-redirect.js index 61228bad..2825d62f 100644 --- a/blocks/gmo-redirect/gmo-redirect.js +++ b/blocks/gmo-redirect/gmo-redirect.js @@ -24,6 +24,7 @@ export default async function decorate(block) { for(let key in match.groups){ redirect = redirect.replace(`{${key}}`, match.groups[key]); } + alert('You are being redirected to the latest version of the Marketing Hub. Please update your URL, if saved/bookmarked.') console.info('redirecting to', redirect); window.location.href = redirect; return; From 67bba22d727c5f06d69bea1a50e34b293d64cacc Mon Sep 17 00:00:00 2001 From: Mathieu Lessard Date: Thu, 8 Aug 2024 08:07:06 -0700 Subject: [PATCH 78/95] Squashed commit of the following: commit 0659922c04ac5a76e29b135dc534b56ffd1d554d Author: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu Aug 1 12:16:47 2024 -0500 Branch rc to main => Update the 'Launch Date' label to "Proposed Launch Date" (#147) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) * feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. * ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. * Modified FAQ Nav (#139) Co-authored-by: Mathieu Lessard * Updated function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) (#142) Added new parameter deliverableType, moved parameter imageWidth to be the last parameter. * Updated Launch Date label to Proposed Launch Date in Program List (#145) Updated Launch Date tool tip to and Proposed Launch Date in Program Details page * Added redirect block which supports regex (#148) Co-authored-by: Mathieu Lessard * Replaced console.log with console.info (#149) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info --------- Co-authored-by: Mathieu Lessard --------- Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: Shivani gupta Co-authored-by: shivanigupta commit c6113b9347cc431a8a6054f955bf3a1895b93773 Author: mathieu-lessard Date: Tue Jul 16 11:59:05 2024 -0700 MH3.FY24.0716 Release (#140) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) * feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. * ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. * Modified FAQ Nav (#139) Co-authored-by: Mathieu Lessard --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: Shivani gupta Co-authored-by: shivanigupta commit 5ac808b833988e6c029eb1eed9a3a7e394fdbb94 Author: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu Jul 11 12:27:11 2024 -0500 Release candidate into main for Thursday (11 Jul) Release (Fix typo in variable name) (#136) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) --------- Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: Shivani gupta Co-authored-by: shivanigupta --- blocks/gmo-redirect/gmo-redirect.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/blocks/gmo-redirect/gmo-redirect.js b/blocks/gmo-redirect/gmo-redirect.js index 2825d62f..3c1c2a87 100644 --- a/blocks/gmo-redirect/gmo-redirect.js +++ b/blocks/gmo-redirect/gmo-redirect.js @@ -32,6 +32,4 @@ export default async function decorate(block) { } } block.innerHTML = ''; -} - - +} \ No newline at end of file From e4c6d60d90273b96d64e93a7d5185b0189485716 Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Fri, 16 Aug 2024 11:52:14 -0700 Subject: [PATCH 79/95] DXI-27831: header fix for marketing dashboard filters (#159) --- blocks/gmo-program-header/gmo-program-header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/gmo-program-header/gmo-program-header.css b/blocks/gmo-program-header/gmo-program-header.css index e00c20fb..1559e603 100644 --- a/blocks/gmo-program-header/gmo-program-header.css +++ b/blocks/gmo-program-header/gmo-program-header.css @@ -1,7 +1,7 @@ .gmo-program-header.block { display: flex; flex-direction: column; - margin-top: 20px; + margin-top: 45px; } .inputs-wrapper { display: flex; From 2edd85c6477ecc0f34e403118460c78d8f471834 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 4 Sep 2024 16:15:23 -0400 Subject: [PATCH 80/95] Calendar view feature branch into RC (#160) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ASSETS-88928 : Update Deliverables Page Fields for Phase 2 to branch assets-72024 (#143) * feat: Add default values for Release Tier and Categories in program details - Updated the `buildHeader` function in `gmo-program-details.js` to display "Unavailable" for `releaseTier` if it does not exist. - Updated the `buildHeader` function to display "Unavailable" for `categories` if it does not exist or is empty. - Ensured the changes display the correct SVG icons and handle the presence and absence of the values correctly. - Added new SVG icons folderOpenOutline and launch * Updated Unavailable to Not Available * Program details calendar view (#144) * initial commit, calendar table - todo: add a function to populate async since this loads hidden initially * Continue iterating on static html * styling grouped content * refactor html 'month' columns were not extending to the edges of container. Experimented and found working fix. * continue iterating group/item placement * make width of groups dynamic based on properties * Make widths and placement programmatic * functional javascript - add ability to expand/collapse groups - add ability to scroll year left/right (todo: dropdown) - major cleanup of console log * add in year-changing controls * add current month indicator * remove todo, restore normal default tab * update indicator to reflect actual date * start refactoring dropdown, fix indicator * allow switching between year/quarter view * final bugfixes for quarter-switching * finish task filtering - tasks that start in view and end out of view show correctly - resolve bug with start positioning - todo: remove logging * year view functionality restored with refactor * finish quarter view * add function to resize groups if members overflow * change start date to end date for tasks * slight cleanup * resolve issue w/ merge * Added code to display the thumbnail for the programName and campaignName Fixed split error in function getUniqueYears(items) * Added thumbnail for programName and campaignName without using await * Refactored code to use function async function addThumbnailToItem(itemEl, programName, campaignName) * slightly refactor group-building logic * cleanup * Removed debug console.log code Removed commented out code Get thumbnail for searchAsset(programName, campaignName,deliverableType) * Calendar view update (#150) * fix 'today' button and current day indicator * fix buttons * width adjustments for 'quarter' view * handle missing start/end dates * light cleanup * merge 72024 in, perform cleanup * ASSETS-72026 : Use taskStatus CF for mapping to get the task status label (#151) * Added taskStatus colored dots from /content/dam/gmo-cf/en/wf-picklist-data-source/taskStatus JSON object * feat: Add tooltip to task status dot with dynamic status text and color - Implemented tooltip functionality for task status dots in the calendar view. - Added a helper function `getTaskStatusMapping` to retrieve task status details from `taskStatusMappings`. - Updated the HTML generation for task status dots to include a tooltip displaying the corresponding status text. * ASSETS-72027 : [Issue] Fix Number Alignment on Calendar Page View (#152) * Added CSS adjustments for group-heading alignment and implemented title attribute for tooltips in program-calendar.js - Updated .group-header and .left-block CSS classes to prevent text wrapping and ensure proper alignment of group heading and count elements. - Applied text-overflow: ellipsis to .group-heading to handle long text and prevent it from breaking the layout. - Added a title attribute to the group-heading div in program-calendar.js to display the full text as a tooltip when truncated. * Implemented absolute positioning for .group-count and adjusted .group-heading for improved text visibility - Changed .group-count to use absolute positioning within .group-header to optimize layout and provide more space for .group-heading text. - Adjusted .group-heading max-width to 100% to allow it to occupy the full available width within its container before applying text overflow. - Applied top: 50% and transform: translateY(-50%) to .group-count for vertical centering. - Fine-tuned padding, margins, and alignment to ensure elements are properly aligned and the layout remains consistent across different screen sizes. * MH3.FY24.0808 Release (#155) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) * feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. * ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. * Modified FAQ Nav (#139) Co-authored-by: Mathieu Lessard * Updated function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) (#142) Added new parameter deliverableType, moved parameter imageWidth to be the last parameter. * Updated Launch Date label to Proposed Launch Date in Program List (#145) Updated Launch Date tool tip to and Proposed Launch Date in Program Details page * Added redirect block which supports regex (#148) Co-authored-by: Mathieu Lessard * Replaced console.log with console.info (#149) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info --------- Co-authored-by: Mathieu Lessard * Added alert letting people know their content as moved (#154) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info * Added alert for redirect --------- Co-authored-by: Mathieu Lessard * Squashed commit of the following: commit 0659922c04ac5a76e29b135dc534b56ffd1d554d Author: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu Aug 1 12:16:47 2024 -0500 Branch rc to main => Update the 'Launch Date' label to "Proposed Launch Date" (#147) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config … * Assets 98992 (#153) * add requested changes - update start/end date properties - change tooltip on 'end date' pill - update filter to show current view - disable increment/decrement if no add'l years to show * add enhanced date checking * fix typo, condense code * remove intentional wrong property * fix bug when calendar is refreshed * disable increment/decrement instead of hide * CSS : Renamed classes icon-categories to icon-productGroup, categories to productGroup. (#156) JS : Renamed classes icon-categories to icon-productGroup, categories to productGroup. Renamed GraphQL field program.categories to program.productGroup * display msg when no deliverables in calendar (#157) * [Issue] Year View Navigator on Calendar Displays Extreme Years (#158) * Prevent year navigation beyond available data range in calendar - Added logic in `changePeriod` function to restrict year navigation within the bounds of available calendar data. - Defined `maxYear` and `minYear` based on the calendar data's start and end dates. - Ensured that users cannot select a year beyond the maximum or below the minimum year available in the calendar data. * Changed to 'auto' to disable smooth scrolling for better user experience * Restored smooth scrolling, and added code to simply not scroll to the next year or previous year if newYear > maxYear || newYear < minYear is true * use current year in initial block, update msg (#161) - main js for details block now programmatically retrieves current year - updated missing data msg for calendar view * Releasing changes in Prod (#162) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * ASSETS-88912 : [Issue] Last page number is not matching with total number of pages (#105) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the config file admin-config.json * Changed queryName to getAllCampaings * Rollback to 3/15/24 Commit a519a5155c3dd57f0c54ea8bd336cd0a231cffab before adding GraphQL test code * Delete test graphql code * ASSETS-88895 : Show HCV report pages to limited users (#55) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Campaign List block for Marketing Dashboard page (#56) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 --------- Co-authored-by: Michael Dickson * updated hydration-utils.js (#54) MH: Added Firefly product to AA Modal 'Product' Field List * Assets 98990 - Dynamic campaign list (#61) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * ASSETS-88895 : Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist (#60) * security.js updated function checkUserAccess for users that are members of the imsUserGroup, that if a page has the property reporting-access then access to the page is only granted if the user is member of te group defined by the property imsReportingGroup in the file admin-config.xlsx site-config.js : Updated the function getQuickLinkConfig to show the quick link to users who are members of the new column Group in shared-quicklinks tab of file site-config.xlsx * securiity.js : Deleted function isReportingAccessPage() as it is not needed any more. Updated function checkUserAccess() : Update code for non public pages, check if the current page path is in the pages returned by the function getQuickLinks. If it does not exist in quick links, then the user does not have access to the page. The functionQuickLinks already has logic to check if a page is only accessible by users of a page group. Renamed function checkGroupAccess(adminConfigGroupPropertyName) to checkPageGroupAccess(adminConfigGroupPropertyName) * Updated function getQuickLinkConfig() to still work if the row.Group is undefined or does not exist * Added function export async function graphqlFilterOnMarketingInitiative(marketingInitiative) (#64) Which calls the persisted query gmo/filter-on-marketing-initiative with example parameters { "marketingInitiative": "FY24Q1-Q2_AdobeExpress_level Up" } https://author-p108396-e1046543.adobeaemcloud.com/graphql/execute.json/gmo/filter-on-marketing-initiative%3BmarketingInitiative=FY24Q1-Q2_AdobeExpress_level%20Up * Campaign List filters display (#65) * initial html structure setup * refactor from select to div implementation Select with multiselect displays as a list, not a dropdown * finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure * Assets 98990 (#66) * initial commit, new blocks/files * rename files, start implementing * continuing to implement/adjust styling * 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 * finish pagination * Updates to css/js to better align to mockup * minor updates - update graphql query to have hardcoded offset/limit (to resolve error) - remove comments - add placeholder 'refresh date' message and css - move css for main body to accomodate above message * add firefly icon --------- Co-authored-by: Tyrone Tse * ASSETS-88899 : [Issue] Collection Detail Page is Redirecting to No-Access Page (#68) * Added function hideQuickLinks() * Added the hide field to the shared-quicklinks config/worksheet /blocks/adp-header/adp-header.js : Updated the code to only show links if hide!=='true' /scripts/security.js : Updated function checkUserAccess to get the current URL without the parameters for /collection/ and /share/ /scripts/site-config.js : Updated function to include the hide field * Refactored the If statement logic * Assets 98992- Campaign details/overview (#69) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * ASSETS-88900 : Update Pagination for gmo-campiagn-list Block (#70) * gmo-campagin-list refactored to use persisted query function function graphqlCampaignPaginated(first,cursor) to get a page of Campaigns at a time * Refactored the Navigation code for Previous Page, Next Page, Select Number of Items on a Page. Refactored the code for Repaginate for when the number of items page is changed Show current page status * graphql.js : Updated function graphqlAllCampaigns(first,cursor) to call getAllCampaigns persisted query with parameters first and cursor Deleted function graphqlCampaignPaginated(first,cursor) Updated gmo-campaign-list/gmo-campaign-list.js : To use persisted query graphqlAllCampaigns(first,cursor) and refactored the pagination to call the decorate function to call the graphql query each time to get the next or previous page * Fixed logic in calculating the nextCursor * Removed all debug console.log statements * Removed testCampaigns array of test campaign data, which now has been replaced by data from graphql * Renamed the variable testConfig to headerConfig * Campaign details block (#71) * initial block structure * start mocking up structure * many changes - finish overview tab mockup - (mostly) finish deliverables tab * fix css- add top/bottom borders to rows * delete invalid metadata from new svgs * updates for mvp - Rename and hide various elements of page - Refactor tablebuilding function to deal with items that are missing categorization properties * hide total assets * add status bar display Also adjusted demo data slightly to include due date and lead * update css/html to align with mockup and mvp * resolve border bug * implemented requested changes * ASSETS-88901 : (Backend) Campaign Page: Filters (#72) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program --------- Co-authored-by: Shivani gupta * ASSETS-88901 : Campaign Header: Dropdown List Only Allow Single Value to Be Selected (#73) * graphql.js : Added functions graphqlProductList and graphqlStatusList gmo-campaign-header.js : Updated code to build Status dropdown from function graphqlStatusList Updated code to build Product dropdown from function graphqlProductList * /blocks/gmo-campaign-list/gmo-campaign-list.js => Added custom event listener for custom event gmoCampaignListBlock which allows the event gmoCampaignListBlock to be called from the block component gmo-campaign-header.js /blocks/gmo-campaign-header/gmo-campaign-header.js : Created new function sendGmoCampaignListBlockEvent() that calls the custom event gmoCampaignListBlock from the gmo-campaign-header. This will trigger the custom event in the /blocks/gmo-campaign-list to call the graphql persisted query getAllCampaigns with a filter based on the selected values from the dropdown lists for Business Line Status and Product * graphql.js : Added test function graphAllCampaignsFilterfirst,cursor,filter) : Which has the filter parameter which is the graphQL filter object Added function generateFilterJSON(filterParams) which generates the graphQL filter object from an Array of parameters. /blocks/gmo-campaign-header/gmo-campaign-header.js : Added event on the campaign-search field, to trigger the sendGmoCampaignBlockEvent after 3 characters are typed, later this will be replaced by a Campaign Suggested List generated as the user types /blocks/gmo-campaign-list/gmo-campaign-list.js : Added code build the graphQL filter object from the Campaign Search fields and Drop Downs Updated the function decorate to have new parameter graphQLFilter So that the function graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter) can be called * Adde autocomplete list CSS, JS and HMTL for the campaign search field. * graphql.js Update function graphCampaignByName to use persisted query getCampaignNames used for autocomplete list for Campaign Name search gmo-campaign-list.js : Changed campaignName search to use filter operater : '=' /gmo-campaign-header.js : Updated campaign search autocompleteList to trigger sendCampaignListBlockEvent to make autocomplete search work * gmo-campaign-header.js : Updated function resetAllFilters() to call function sendGmoCampaignListBlockEvent(); gmo-campaign-list.js : Updated campaignCount to call function graphqlCampaignCount(graphqlFilter) with graphqlFilter graphql.js : Updated function graphCampaignCount : Added filter parameter, and call persisted query getCampaignNameFilter * Removed console.log messages * Fixed bug with currentPageInfo.nextCursor * Fixed bug in calculation of cursor to use for the previous page logic * graphql.js : Deleted function graphqlAllCampaigns(first,cursor) , replaced function graphqlStatusList() and graphqlProductList() with function graphqlQueryNameList(queryNameList) Variables baseApiUrl and projectId are now global/class level variables. gmo-campaign-header.js : Close dropdown list when a value is selected * update campaign with program * Updated function toggleOption : To only allow a single option to be selected in the dropdown list --------- Co-authored-by: Shivani gupta * Assets 98993 (#75) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * resolve pr comments * Release 05.09.2024 (#78) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) --------- Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman * ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Assets 98994 (#81) * many updates * finish dynamic properties - all properties should be dynamic based on graphql data - refactored some common lookups to a shared javascript file - updated overflow for overview/description - made status, products more presentable - more elegant handling of empty audience and kpi lists * test rename svg to resolve issue * finish updating icon names and mapping * initial changeover from static to dynamic data * adjustments based on feedback * additional changes based on feedback * minor bugfix, null checks * squash final bug with read more * final touches * combine two graphql functions with duplicated code * bugfixes per pr review * ASSETS-88902 : Make the Business Line Dropdown List filter values in the Product Dropdown List filter (#82) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries * Updated Business Line dropdown list to be populated by graphql persisted query getBusinessLine. Updated Geo dropdown list to be populated by graphql persisted query getGeoList * Updated the Business Line dropdown list to filter the Products List when a Business Line is selected. When a Business Line option is deselected then the Products List shows all products. * Reduced the sample dropdown list options * make links configurable, remove extraneous logs (#83) * ASSETS-88903 : [Issue] Product Name and Label are Undefined (#84) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Removed comment * ASSETS-88904 : Update Asset Thumbnail for Campaign List Entries (#85) * Refactored the function buildProduct(product) to handle the condition when a product is not defined in the JSON object productMappings[product] which is defined in /scripts/shared-campaigns.js * Added function searchAsset(programName, campaignName) to get the asset URL * Changed alt text to use assets repo-name property * Renamed/Moved AssetsDatasource.js to /scripts/assets gmo-campaign-list.js : Added logic to only allow blockConfig to be set on initial call to function decorate(block ... otherwise the values from blockConfig are overwritten when paginating to next page. gmo-campaign-details.js : Added campaign Image gmo-campaign-details.css : Updated CSS to display campaign Image * gmo-campaign-list.js : Deleted comment /scripts/assets.js : Updated to use createSearchEndpoint /scripts/scripts.js : Added export to export function createSearchEndpoint() { * Fixed bug when product is not defined in productMappings in /scripts/shared-campaigns.js * gmo-campaign-list.js : Removed iconImage.alt = "Failed to load image"; /scripts/assets.js : Updated facetFilters to an Array of Stings instead of Array of objects * Assets 98996 (#88) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * ASSETS-88905 : Add Fields to the Overview Tab (#87) * Added Target Market Area lists function function createKPI(kpi) is renamed createLI(li) Added function buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea) { * gmo-campaign-details.css : CSS fixes for scope-tag to not wrap gmo-campaign-details.js : Added Target Market Area and Platforms refactored async function buildChannelScope(scopeTypeId, scopes, block) to be able to display data for data based for a specified CSS ID * Added function getUniqueItems(items, property) to get unique values for deliverableType and platforms * Renamed function async function buildChannelScope(scopeTypeId, scopes, block) to async function buildFieldScopes(scopeTypeId, scopes, block) * Added global variable globalGraphFliter (#92) Previous and Next Buttons now call function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) with graphFilter = currentGraphqlFilter * Assets 98996 (#93) * initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping * add deliverabletype graphql - todo: refactor, some superfluous function(s) can be removed * refactor product list to use graphql * fix deliverable type tags, fix multiline text * fix sort on marketing moments column * removing merge artifact * resolve PR comments * platforms mapping with graphql (#94) - also cleaned up extraneous/defunct code * Refactor sort icons (#95) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * ASSETS-88908 : Remove Console Error in Marketing Dashboard page and Campaign Details when no image is found (#96) * assets.js : Refactored code to eliminate console.log error gmo-campaign-list.js : Removed console.error("No campaign image found:", error); * Eliminated JavaScript errors when image is not found * Display total assets = 0 when the campaign image does not exist * Code cleanup (#98) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * Updated product mapping label to text "Not Available" when the product mapping label is null (#99) * Code cleanup part 2 (#100) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * Added function closeAllDropDowns() (#101) Added function handleClickOutside(event) Updated function attachEventListeners() // Add event listener for clicks outside of dropdowns document.addEventListener('click', handleClickOutside); Added function resetProductsDropDown(); Updated function resetAllFilters() to call function resetProductsDropDown(); * Sticky deliverables header, update graphql endpoints (#102) * platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card * cleanup, readd missing row - remove commented code - remove commented html - readd campaign name to overview tab if available * resolve undone null check for product label * handle bad response from product icon map * update query endpoints, css tweak on deliverables * Added tool tip for Program Name and Campaign Name (#103) * remove duplicate icons * Change default items per page from 4 to 8 Changed undefined message for Campaign to Marketing Moment Not Available * Remove debugging from graphql.js * Deleted function debug_console() --------- Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Michael Dickson Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani gupta * Performance refactoring (#107) * performance refactoring - improve thumbnail performance by makin async - format date property to yyyy-mm-dd - fix margin issue in program header - refactor function that builds header dropdown for increased performance * resolve bug with event listeners not attaching * add programID parameter to deliverable query (#109) * add programID parameter to deliverable query * quick null check for status color * remove console log * Update query names, handle formatting (#110) * update query names * handle null deliverable types * make dateFormat function available to detail block * remove unused function * remove console log messages * fix typo in graphql query name (#111) * ASSETS-88914 : Fix Pagination Frontend Code (#108) * Changed the default number items per page to 4 Added function debounce(func, wait) to delay the Previous and Next page to wait 0.5 seconds between each click, to stop the user clicking too fast and breaking pagination * Decrease debounce timeout to 200 milliseconds (0.2 secs) * Added check that next page cannot go past last page Added check that prev page cannot go back past page 1 * fix(pagination): Ensure proper handling of next/prev buttons and page boundaries - Added totalPages calculation and checks to ensure "Next" button is disabled on the last page - Updated nextPage function to correctly enable/disable pagination buttons - Improved prevPage function to ensure it navigates back to the first page correctly - Applied debounce to prevent rapid clicking issues - Refactored logic for enabling/disabling pagination buttons based on current page state * - Changed default items per page to 8 - Removed 4 items per page from filter - Removed cusorArray, and replaced it with currentPageInfo.previousCursor = currentPageInfo.currentCursor; - Set next cursor to data.programPaginated.pageInfo.endCursor; - Function prevPage now uses currentPage.previousCursor as the cursor parameter value, and calculating the cursor value to use from cursorArray is no longer needed. * Increased the click delay to 500 milliseconds * Disabled the Previous and Next Button as soon as they are clicked, to prevent the user multiple clicking the button. * Restored previous logic using cursorArray to manage the calculation of the cursor for the previous page. (#113) * Adjust height of deliverables tab on program-details block (#114) * minor css changes for program details * adjust deliverables table height * add min height to deliverables table * remove commented css * Sort deliverable type array before rows are made * DXI-26587- Modify landing page for v3 Hub, so Signin goes to CH/v4 (#116) * Replace throwing 404 error when the asset is not found, with asset.svg icon (#119) * Make content fragment path for WF mappings configurable (#118) * refactoring to use single graphql endpoint for map * refactor 'mapping' functions - refactor mapping retrieval functions in all three hcv blocks * Remove comments * remove unused function stub * resolve bug in header filter refresh * remove unused import * Fixed issue where header didn't load if the user didn't have a profile yet (#121) Co-authored-by: Mathieu Lessard * add checks for null 'review link' and 'final asset' (#122) * Refactor header and query variable extraction (#123) * add checks for null 'review link' and 'final asset' * Add msg for programs with no data available * refactor header so it can be used with no data * wrap msg with div for styling * refactor query variable extraction - had to account for ampersand in program name * Updated Product List (#117) * Product list updated * N/A value and label now match * Fixed formatting --------- Co-authored-by: Mathieu Lessard * Restored calling the function attatchEventListerners() at the end of the function decorate(block) (#124) * Fix text wrapping issue in Project Owner column for smaller viewports (#125) - Adjusted CSS to ensure text in the "Project Owner" column wraps properly - Set row height to auto and adjusted line-height for better spacing - Added media query for responsive width adjustments - Ensured consistent display and improved readability across different viewport sizes * ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126) * feat: Add Geo column to program list and adjust column widths for proper alignment - Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list - Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading - Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column * - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab. - Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets." - Styled the tooltip to match the color and background of the Launch Date tooltip. - Ensured the tooltip text appears on one line and positioned it correctly. - Updated the "Total Asset" label to "Total Approved Asset" - Updated the "Deliverable Name" column name to "Deliverable Task Name" * - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova" - Update the Project "Owner column" label to "Task Owner" * ASSETS-88921 : Marketing Moments Clickable Title and Underdevelopment Icon for ProgramNames/Campaigns (#128) * feat: Change cursor to pointer for campaign name label and text - Added CSS to change cursor to pointer on hover for .campaign-name-label and .campaign-name span. feat: Add click event to campaign name label and text - Updated buildCampaignList function to add click event listener to campaign name label and text. - Clicking on the campaign name label or text now navigates to campaignDetailsLink. - Ensured the appearance of the label and text remains unchanged while adding navigation functionality. feat: Rename "Review Link" to "QA Files" in the "Deliverable" task tab - Updated Program Details column text/header to QA files - Updated CSS class from review-link to qa-files * - feature : When a campaign does not have an image assigned display the underdevelopment icon Updated function searchAsset(programName, campaignName, imageWidth = 80) to get the underdevelopment icon from site-config worksheet shared-branding worksheet * Sorted the options in the dropdown lists alphabetically on the options text field (#131) * ASSETS-88922 : Review the Deliverable page load time (#130) * Improve page load time by parallelizing API calls and adding debug logs - Updated `decorate` function to fetch program details and deliverables in parallel using `Promise.all`. - Added console logs before and after API calls to help with debugging. - Maintained existing functionality while optimizing performance by reducing sequential API calls. * Remove logging messages * feat: Improve performance of gmo-program-details.js - Implement parallel GraphQL queries to reduce load times. - Lazy load images using the `loading="lazy"` attribute to improve initial load performance. - Batch DOM updates using `document.createDocumentFragment()` to minimize reflows and repaints. - Debounce event listeners to prevent performance issues caused by rapid firing of events. These optimizations should enhance the overall performance and responsiveness of the page. * Optimize header rendering and asynchronous data fetching - Initiate parallel fetching of program details and deliverables. - Render a placeholder header immediately to improve perceived load time. - Update header with actual data once program details are fetched. - Ensure images are loaded asynchronously without blocking header rendering. * feat: Inject additional HTML content into main-body-wrapper after header update - Added HTML content including tab-wrapper, overview, and deliverables sections to the main-body-wrapper div after the header. - Updated the main-body-wrapper div to include newly provided HTML content for improved user interface and navigation. - Ensured the content injection occurs after the header update to maintain correct rendering order. * Added back displaying the back button with arrow icon and program name not available message and no data available message when program * Updated logic to display the total asset count for an image * Reverted back to const programData = await executeQuery(programQueryString); const deliverables = await executeQuery(deliverableQueryString); * Restored constant variables for Marketing Goal, KPIs, Target Market, Audiences const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; const kpis = buildKPIList(program).outerHTML; const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; To make the code more readable, they were removed when the structure of the code was refactored to incrementally build the block.innerHTML, to make the page appear to load faster. * assets.js (#132) Added helper function async function getUnderdevelopmentIcon() to display the underdevelopment icon. Also display the under development icon when programName and campaignName is null gmo-program-details.js When programName and campaignName is null display the under development icon * gmo-program-details.js PR Code review change to * Revert "gmo-program-details.js" This reverts commit 18ddd12c8fef2fbcb9c56b54735e907f421f17ad. * gmo-program-details.js PR code review change to let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; assets.js PR code review change to if (!progamName && !campaginName) * Resolved typo in variable programName from if (!progamName && !campaginName) to if (!programName && !campaignName) * feat: Improve page load speed and add lazy loading for images (#134) - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * ASSETS-88926 : Review and Improve Page Performance of Marketing Moment Landing page (Push Failed) (#137) * feat: Improve page load speed and add lazy loading for images - Implement debounce for search input to reduce the number of API calls. - Refactor the `decorate` function for better readability and performance. - Add lazy loading for images using `IntersectionObserver` to load images only when they come into view. - Move pagination button toggling to a separate `togglePaginationButtons` function. - Ensure strict comparison (`===`) for block configuration check. * feat: Improve page load speed and add lazy loading for images - Removed debounce for search - Added lazy loading for images using `IntersectionObserver` to load images only when they come into view. * ASSETS-88927 : Toggle Read More Button (#138) * feat: Add Read More/Read Less toggle functionality - Added event listener for Read More buttons to toggle text visibility in Marketing Goal and Product Value sections. - Updated the decorate function to handle Read More/Read Less functionality. * style: Add hide-overflow class for text truncation - Added .hide-overflow class to handle text truncation with ellipsis. - Ensured compatibility with the Read More/Read Less functionality. * Modified FAQ Nav (#139) Co-authored-by: Mathieu Lessard * Updated function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) (#142) Added new parameter deliverableType, moved parameter imageWidth to be the last parameter. * Updated Launch Date label to Proposed Launch Date in Program List (#145) Updated Launch Date tool tip to and Proposed Launch Date in Program Details page * Added redirect block which supports regex (#148) Co-authored-by: Mathieu Lessard * Replaced console.log with console.info (#149) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info --------- Co-authored-by: Mathieu Lessard * Added alert letting people know their content as moved (#154) * Added redirect block which supports regex * Added alert for redirect * Changed log to info * Added alert for redirect * Changed log to info * Added alert for redirect --------- Co-authored-by: Mathieu Lessard * Squashed commit of the following: commit 0659922c04ac5a76e29b135dc534b56ffd1d554d Author: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu Aug 1 12:16:47 2024 -0500 Branch rc to main => Update the 'Launch Date' label to "Proposed Launch Date" (#147) * Added mapping for uuid (#74) Co-authored-by: Mathieu Lessard * Removed Prefix from Displayed UUID Value on Assets (#76) * Modified formatAssetMetadata() to allow custom dc-format Labels (#79) * Removed "required" and custom values for fields (#86) Co-authored-by: Mathieu Lessard * Added getBaseConfigPath to Collections Back Button (#89) * Releasing HCV Dashboard code (#106) * ASSETS-88894 GRAPHQL Persisted Query Code (#53) * GRAPHQL POC Demo code to call a Persisted GraphQL query for Content Fragments * Updated the code call the GraphQL Persisted query from the QA AEM Author server, and also to authenticate using the JWT Bearer token * Renamed file test-graphql.js to graphql.js Added function graphqlAllCampaign() to get call GraphQL persisted query for All Campains Added function graphqlCampaignByName(campaignName) to get call GraphQL persisted query to get campaign by campaign name. Added function getGraphqlEndpoint() to get the value of property aemGraphqlEndpoint from the conf… * feat: Open QA Files links in a new tab in program calendar view (#163) - Updated the QA Files links in the program calendar (`program-calendar.js`) to include `target="_blank"`, ensuring that these links open in a new browser tab. - This change improves user experience by allowing them to view QA Files without navigating away from the current page. * Hide overflow in calendar task thumbnails (#164) Setting a max-height skews the aspect ratio and sometimes shows the gray default background. With overflow: hidden you can still get an idea of what the thumbnail is without having it look distorted. * Assets 72092 (#166) * move calendar functions to main details block * fix small issues - add null check to release tier property - refactor logic when checking for bad view starts to account for non-US time zones * remove commented code * Marketing Dashboard and Program Detail Optimization by adding the Content Fragment Path (#165) * Added performance logging code for queries getAllCampaigns for Program List executeQuery for Program Details * gmo-program-details.js : Added the path parameter to program-details page, which now is passed to the graphql query getProgramDetails which now has the path parameter query ($programName: String, $programID:String, $path:ID) * Fix programName extraction and conditionally add 'path' parameter to query string - Corrected the `extractQueryVars` function to properly handle and return the correct value for `programName`, ensuring that the `+` character is not mistakenly replaced with a space. - Updated the construction of `programQueryString` to include the `path` parameter only if `encodedPath` is not an empty string. - These changes improve the accuracy of parameter handling and optimize the query string construction process. * Updated logging to use console.debug * feat(calendar): implement caching mechanism for thumbnails to optimize performance - Replaced array-based caching with an object-based caching system using a combination of `programName`, `campaignName`, and `deliverableType` as the cache key. - Updated the `addThumbnailToItem` function to utilize the new caching mechanism, reducing redundant API calls. - Converted the outer loop from `forEach` to `for...of` to ensure proper handling of asynchronous operations and to support the sequential execution of `await` calls. * Removed commented out code * Update cache key generation to conditionally include campaignName - Modified the cache key generation logic to only include campaignName if it is not null or an empty string. * fix bug by updating variable name. delete comment (#167) * change remaining valid date checks (#168) --------- Co-authored-by: Shivani gupta Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: mathieu-lessard Co-authored-by: Mathieu Lessard Co-authored-by: Christopher Heintzman Co-authored-by: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-authored-by: Samruddhi <150183547+staware30@users.noreply.github.com> Co-authored-by: Shivani gupta Co-authored-by: shivanigupta --- .../gmo-program-details.css | 495 +++++++++++- .../gmo-program-details.js | 721 +++++++++++++++++- blocks/gmo-program-list/gmo-program-list.js | 6 +- scripts/graphql.js | 14 + 4 files changed, 1202 insertions(+), 34 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index ca75382e..36a77d6f 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -102,6 +102,37 @@ body { } } +.header-row3 .icon-release-tier { + width: 16px; + height: 16px; + background-image: url('/icons/launch.svg'); + background-size: contain; + background-repeat: no-repeat; + margin-right: 8px; + margin-left: 16px; +} + +.header-row3 .icon-productGroup { + width: 16px; + height: 16px; + background-image: url('/icons/folderOpenOutline.svg'); + background-size: contain; + background-repeat: no-repeat; + margin-right: 8px; + margin-left: 16px; +} + +.header-row3 .release-tier { + font: normal normal normal 14px/21px Adobe Clean; + margin-left: 8px; +} + +.header-row3 .productGroup { + font: normal normal normal 14px/21px Adobe Clean; + margin-left: 8px; +} + + .details-header-wrapper .header-row3 { display: flex; align-items: center; @@ -156,7 +187,425 @@ body { flex-direction: row; justify-content: space-between; } +.tab.calendar { + margin-top:10px; + & > .no-data-msg { + height: 100px; + margin-top: 15px; + display: flex; + align-items: center; + } + & > .control-wrapper { + height: 32px; + padding-top: 1px; + padding-bottom: 1px; + margin-bottom: 15px; + display: flex; + flex-direction: row; + justify-content: space-between; + & .inc-dec-wrapper { + font: normal normal normal 14px/17px Adobe Clean; + display: flex; + flex-direction: row; + width: 140px; + + & .year-switch { + cursor: pointer; + display: flex; + flex-direction: row; + width: 64px; + box-shadow: 0px 1px 4px #00000026; + border-radius: 4px; + & .year-toggle { + display: flex; + justify-content: center; + align-content: center; + height: 32px; + width: 32px; + flex-wrap: wrap; + } + & img { + height: 15px; + &.left { + transform: rotate(180deg); + } + } + &.disabled { + background-color: #c6c6c6; + cursor: default; + } + } + & .current-year { + line-height: 32px; + margin-left: 20px; + &.single { + margin-left: unset; + } + } + } + & .right-controls { + width: 240px; + display: flex; + & .today-button { + width: 66px; + height: 32px; + font: normal normal normal 14px/32px Adobe Clean; + border-radius: 4px; + box-shadow: 0px 1px 4px #00000026; + display: flex; + justify-content: center; + margin-right: 5px; + cursor: pointer; + } + } + & .filter-dropdown-wrapper { + position: relative; + display: inline-block; + font: normal normal normal 14px/17px Adobe Clean; + letter-spacing: 0px; + height: 32px; + background-color: #FFF; + width: 70%; + border: 1px solid #D3D3D3; + border-radius: 4px; + cursor: pointer; + & > .filter-dropdown-button { + height: 32px; + line-height: 32px; + padding-left: 10px; + display: flex; + justify-content: space-between; + & > .label { + overflow: hidden; + } + & > .icon { + padding-top: 4px; + height: 16px; + } + } + & > .filter-dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + + max-height: 200px; + overflow-y: auto; + border: 1px solid #ccc; + z-index: 2; + width: 100%; + } + &.active .filter-dropdown-content { + display: block; + } + & .filter-option, & .filter-label { + display: block; + overflow-x: hidden; + + text-decoration: none; + color: #333; + } + & .filter-option { + padding: 10px 0px 10px 30px; + &:hover { + background-color: #ddd; + } + } + & .filter-label { + padding: 10px 0px 10px 10px; + font-weight: bold; + } + } + } + & > .calendar-wrapper { + overflow-y: auto; + overflow-x: hidden; + background-color: white; + font: normal normal bold 14px/21px Adobe Clean; + display: flex; + flex-direction: column; + border-bottom: 3px solid #F4F4F4; + position: relative; + min-height: 500px; + & .header-wrapper { + height: 24px; + & .quarter-header { + display: flex; + flex-direction: row; + height: 24px; + } + & .quarter { + width: 25%; + display: flex; + justify-content: center; + background-color: #F4F4F4; + + &:not(:first-child) { + border-left: 3px solid white; + } + } + } + &.quarter-view, &.multiyear { + overflow-x: unset; + } + & .calendar-background { + height: 100%; + display: flex; + flex-direction: row; + position: absolute; + top: 0; + bottom: 0; + &.quarter-view { + width: 200%; + } + } + & .month-wrapper, & .quarterview-wrapper { + height: 100%; + width: 100%; + display: flex; + flex-direction: row; + & .month { + width: 8.3%; + display: flex; + justify-content: flex-start; + flex-direction: column; + align-items: center; + border-left: 3px solid #F4F4F4; + height:100%; + &:last-child { + border-right: 3px solid #F4F4F4; + } + & .label { + padding: 3px; + margin-top: 1px; + } + &.current .label { + background-color: #96d7ff; + color: #2680EB; + border-radius: 15px; + padding-right: 15px; + padding-left: 15px; + z-index: 1; + + } + & .calendar-indicator { + width: 1px; + height: 100%; + margin-top: -13%; + background: linear-gradient( + to bottom, #2680EB 50%, transparent 50% + ); + background-size: 1px 5px; + } + } + } + & .calendar-content-wrapper { + position: relative; + padding-top: 65px; + padding-left: 5px; + width: 100%; + top: 0; + left: 0; + right: 0; + padding-bottom: 20px; + } + & .calendar-group { + width: 550px; + background-color: lightcyan; + border-radius: 7px; + &:not(:last-child) { + margin-bottom: 20px; + } + & .group-header { + position:relative; + height: 40px; + width: 100%; + color: white; + display: flex; + flex-direction: row; + flex-wrap: nowrap; /* Prevent wrapping */ + align-content: center; + justify-content: space-between; + border-radius: 7px 7px 0px 0px; + &.content-hidden { + border-radius: 7px; + } + & .left-block { + display: flex; + flex-direction: row; + align-items: center; /* Vertically center the items */ + flex-wrap: nowrap; /* Prevent wrapping within left-block */ + align-content: center; + border-radius: 7px 7px 0px 0px; + } + & .group-arrow { + transform: rotate(180deg); + filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(113%) contrast(100%); + margin-right: 15px; + margin-top: 5px; + } + } + & .group-heading { + line-height: 24px; + height: 24px; + margin-left: 5px; + white-space: nowrap; /* Prevents the text from wrapping to a new line */ + overflow: hidden; /* Hides the overflow text */ + text-overflow: ellipsis; /* Adds an ellipsis (...) to indicate truncated text */ + max-width: 100%; /* Adjusts the width to leave space for the group count */ + display: inline-block; /* Ensures the element respects the max-width */ + vertical-align: middle; /* Aligns it properly with other inline elements */ + } + & .group-count { + position: absolute; + top: 50%; /* Align it vertically */ + right: 10px; /* Align it horizontally to the right */ + transform: translateY(-50%); /* Center the element vertically */ + display: inline-flex; + align-items: center; /* Vertically center the content */ + justify-content: center; /* Center the content horizontally */ + min-width: 24px; /* Set minimum width instead of fixed width */ + margin-left: 8px; + margin-right: 5px; /* Add margin if necessary to prevent overlapping */ + height: 24px; + border-radius: 10px; + line-height: 24px; + background-color: black; + background: rgba(0,0,0,0.2); + } + & .group-controls { + margin-left: 15px; + } + & .group-collapse { + transform: rotate(90deg); + } + & .group-content { + display: flex; + flex-direction: column; + + padding-left: 5px; + padding-right: 5px; + & .item { + display: flex; + flex-direction: row; + justify-content: flex-start; + background-color: white; + margin-bottom: 10px; + border-radius: 4px; + height: 64px; + min-width: 190px; + font-size: 12px; + &:first-child { + margin-top: 10px; + } + & .content-row { + height: 32px; + line-height: 32px; + &.bottom { + display: flex; + line-height: unset; + align-items: center; + & div:not(last-child) { + margin-right: 4px; + } + } + } + & .start-date, & .link { + border-radius: 5px; + border: 1px solid #a9a9a9; + height: 12px; + padding: 4px; + } + & .color-tab { + border-radius: 4px 0px 0px 4px; + background-color: blue; + width: 3px; + height: 100%; + } + & > .item-content { + display: flex; + flex-direction: column; + width: 96%; + line-height: 12px; + margin-left: 2px; + } + & .name { + max-width: 62%; + overflow-x: hidden; + text-overflow: ellipsis; + text-wrap: nowrap; + } + } + & .info { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + & .thumbnail { + height: 32px; + width: 32px; + background-color: lightgray; + border-radius: 4px; + margin-right: 5px; + overflow: hidden; + } + & .link { + margin-right: 10px; + display: flex; + & > img { + margin-top: 1px; + margin-left: 5px; + transform: rotate(180deg); + } + } + & .item-status { + height: 5px; + width: 5px; + background-color: green; + border-radius: 50%; + position: relative; + margin-top: 13px; + margin-left: 10px; + } + } + &.color1 { + background-color: #33AB840D; + border: 1px solid #12805C; + & .group-header { + background-color: #33AB84; + } + } + &.color2 { + background-color: #37c8f029; + border: 1px solid #2680EB; + & .group-header { + background-color: #378EF0; + } + } + &.color3 { + background-color: #cf3edc2d; + border: 1px solid #A228AD; + & .group-header { + background-color: #CF3EDC; + } + } + &.color4 { + background-color: #9c64e126; + border: 1px solid #7A42BF; + & .group-header { + background-color: #9D64E1; + } + } + &#group5 { + background-color: #168a4a; + border: 1px solid #24a25d; + & .group-header { + background-color: #137941; + } + } + } + } +} .overview-wrapper { display: flex; flex-direction: column; @@ -177,6 +626,7 @@ body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; + line-clamp: 3; overflow: hidden; } } @@ -213,7 +663,7 @@ body { & .tags-wrapper { display: flex; - flex-wrap: wrap; /* Ensure tags wrap properly */ + flex-wrap: wrap; margin-top: 10px; } @@ -222,12 +672,12 @@ body { color: #505050; border: 1px solid #D3D3D3; border-radius: 4px; - padding: 0 10px; /* Ensure no padding at the bottom */ + padding: 0 10px; line-height: 32px; - height: 32px; /* Ensure consistent height */ + height: 32px; display: flex; - align-items: center; /* Vertically center the text */ - margin-bottom: 5px; /* Add margin at the bottom */ + align-items: center; + margin-bottom: 5px; &:not(:last-child) { margin-right: 5px; } @@ -341,32 +791,32 @@ body { .total-assets-tooltip .tooltiptext { visibility: hidden; - white-space: nowrap; /* Ensure text appears on one line */ - background-color: #D3D3D3; /* Match the background color */ - color: black; /* Match the text color */ - text-align: left; /* Left-align the text */ + white-space: nowrap; + background-color: #D3D3D3; + color: black; + text-align: left; border-radius: 4px; - padding: 5px 10px; /* Adjust padding as needed */ + padding: 5px 10px; position: absolute; z-index: 1; - top: 50%; /* Center vertically */ - left: 100%; /* Position to the right of the element */ - transform: translateY(-50%); /* Center vertically */ - margin-left: 10px; /* Adjust margin to match the screenshot */ + top: 50%; + left: 100%; + transform: translateY(-50%); + margin-left: 10px; opacity: 0; transition: opacity 0.3s; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */ + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); } .total-assets-tooltip .tooltiptext::after { content: ""; position: absolute; - top: 50%; /* Center the arrow vertically */ - left: -5px; /* Adjust to position the arrow */ - transform: translateY(-50%); /* Center vertically */ + top: 50%; + left: -5px; + transform: translateY(-50%); border-width: 5px; border-style: solid; - border-color: transparent #D3D3D3 transparent transparent; /* Arrow color matches tooltip background */ + border-color: transparent #D3D3D3 transparent transparent; } .total-assets-tooltip:hover .tooltiptext { @@ -414,11 +864,11 @@ body { &.datarow { display: flex; align-items: center; - height: auto; /* Set to auto to accommodate varying heights */ + height: auto; font-weight: 200; & .property { - line-height: normal; /* Adjust line-height to normal */ - padding: 10px 0; /* Add padding for better spacing */ + line-height: normal; + padding: 10px 0; } &:first-child, &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -588,6 +1038,7 @@ body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; + line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 738f03b0..36c5f29a 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -10,14 +10,24 @@ const programName = queryVars.programName; const programID = queryVars.programID; const deliverableMappings = getMappingArray('deliverableType'); const platformMappings = getMappingArray('platforms'); +const taskStatusMappings = getMappingArray('taskStatus'); +const startDateProp = 'taskPlannedStartDate'; +const endDateProp = 'taskPlannedEndDate'; +let viewStart, viewEnd, calendarDeliverables; + +// Thumbnail cache array object to store the image objects using cacheKey = `${programName}-${campaignName}-${deliverableType}`; +const thumbnailCache = {}; export default async function decorate(block) { const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); + const encodedPath = queryVars.path ? `${encodeURIComponent(queryVars.path)}` : ''; blockConfig = readBlockConfig(block); + // Including path in the query if present + const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}` + + (encodedPath ? `${encodedSemi}path=${encodedPath}` : ''); - const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; // Immediately render a placeholder header @@ -88,12 +98,14 @@ export default async function decorate(block) { const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; + const currentYear = new Date().getFullYear(); + // Inject the additional HTML content block.querySelector('.main-body-wrapper').innerHTML += `
Overview
Deliverables
-
Calendar
+
Calendar
@@ -177,6 +189,32 @@ export default async function decorate(block) {
+
+
+
+
+
+ +
+
+ +
+
+
${currentYear}
+
+
+
Today
+
+
+
Selected View: Year
+ + +
+
+
+
+
+ `; // Wait for deliverables data @@ -227,7 +265,7 @@ export default async function decorate(block) { }); decorateIcons(block); - + buildCalendar(await deliverables, block, "year", await deliverableMappings); } function enableBackBtn(block, blockConfig) { @@ -260,6 +298,18 @@ function buildHeader(program, queryVars) { driverField=buildDriverField(driver).outerHTML; } + const releaseTier = ` +
+ + Release Tier: ${program.releaseTier ? program.releaseTier : "Not Available"} +
`; + + const productGroup = ` +
+ + ${program.productGroup && program.productGroup.length > 0 ? program.productGroup.join(', ') : "Not Available"} +
`; + headerWrapper.innerHTML = `
@@ -271,6 +321,8 @@ function buildHeader(program, queryVars) {
${date} ${driverField} + ${releaseTier} + ${productGroup}
` @@ -659,22 +711,673 @@ function attachListener(htmlElement) { function extractQueryVars() { const urlStr = window.location.href; - const pnRegex = /.*programName=(.*?)&programID=(.*)/; + const pnRegex = /[?&]programName=([^&]+)&programID=([^&]+)(&path=([^&]+))?/; const match = urlStr.match(pnRegex); if (match && match[1] && match[2]) { - const pName = decodeURIComponent(match[1]); - let pID = decodeURIComponent(match[2]) + const pName = decodeURIComponent(match[1]); // Removed the replace method + let pID = decodeURIComponent(match[2]); + let pPath = match[4] ? decodeURIComponent(match[4]) : null; if (pID.endsWith('#')) { pID = pID.slice(0, -1); } return { programName: pName, - programID: pID - } + programID: pID, + path: pPath + }; } else { return { programName: 'Program Name Not Available', - programID: 'Program ID Not Available' + programID: 'Program ID Not Available', + path: null + }; + } +} + +// program calendar view +async function buildCalendar(dataObj, block, type, mappingArray, period) { + if (!calendarDeliverables) calendarDeliverables = dataObj.data.deliverableList.items; + if (!deliverableMappings) deliverableMappings = await mappingArray; + if (!taskStatusMappings) taskStatusMappings = await taskStatusMappings; + + const programLaunch = document.querySelector('span.campaign-date').textContent; + const programLaunchDate = new Date(programLaunch); + + // multiple of 3 for width of column when viewing in quarter mode. can change this + // by adjusting the multiple below, and also the % width of the calendar background + // when drawing a 'quarter' calendar. + + const columnWidth = (type === "year") ? 8.315 : (8.315 * 3); + const currentDate = new Date(); + const currentYear = currentDate.getFullYear(); + + // if there are no deliverables, display msg to user and end construction. + if (calendarDeliverables.length === 0) { + const calendarTab = document.querySelector('.calendar.tab'); + calendarTab.innerHTML = ` +
Required Data is Unavailable for this view.
+ `; + return; + } + + // get start of the view + viewStart = getTimeBounds(calendarDeliverables, "start", startDateProp); + viewStart = (!(isValidDate(viewStart)) || viewStart <= 0) ? programLaunchDate : viewStart; + const viewStartYear = viewStart.getUTCFullYear(); + + const displayYear = period ? period.year : viewStartYear; + const displayQuarter = period ? period.quarter : 1; + + const yearIndicator = block.querySelector('.inc-dec-wrapper .current-year'); + yearIndicator.dataset.year = displayYear; + yearIndicator.textContent = displayYear; + + // get end of the view + viewEnd = getTimeBounds(calendarDeliverables, "end", endDateProp); + if (!(isValidDate(viewEnd)) || viewEnd <= 0) { + viewEnd = new Date(viewStart); + viewEnd.setMonth(viewStart.getMonth() + 1); + } + const viewEndYear = viewEnd.getUTCFullYear(); + + // get array of all years to be included + let years = calendarYears(viewStartYear, viewEndYear); + + // disable increment/decrement if only one year in view + if (years.length === 1) { + document.querySelector('.inc-dec-wrapper > .year-switch').classList.add('disabled'); + } + + // build the calendar background here as we already know the period and style + let calendarEl; + if (type === "year") { + calendarEl = buildYearCal(years); + } else { + // if the last item ends in December we need another year to catch the Q1 n+1 finish + if (viewEnd.getUTCMonth = 11) { + years.push(viewEndYear + 1); + } + calendarEl = buildQuarterCal(years); + } + // get unique deliverable types + const uniqueGroups = getUniqueItems(calendarDeliverables, "deliverableType"); + + // set up the content wrapper + const contentWrapper = document.createElement('div'); + contentWrapper.classList.add('calendar-content-wrapper'); + if (type === "quarter") { + contentWrapper.classList.add('quarter-view'); + contentWrapper.dataset.view = "quarter"; + } else { + contentWrapper.dataset.view = "year"; + } + + var groupIndex = 1; + for (const group of uniqueGroups) { + const groupType = await lookupType(group, 'deliverable-type'); + // find all members of this group + const matchedItems = calendarDeliverables.filter(item => item.deliverableType === group); + + // find the earliest date- this is how we set the position for the group against the calendar + let earliestStartDate = getTimeBounds(matchedItems, "start", startDateProp); + earliestStartDate = (!(isValidDate(earliestStartDate)) || earliestStartDate <= 0) ? new Date(viewStart) : earliestStartDate; + let latestEndDate = getTimeBounds(matchedItems, "end", endDateProp); + latestEndDate = (!(isValidDate(latestEndDate)) || latestEndDate <= 0) ? new Date(viewEnd) : latestEndDate; + const startMonth = (earliestStartDate.getUTCMonth()); // getMonth returns 0-11 but this is desirable + const startDay = (earliestStartDate.getUTCDate() - 1); // if at start of month, we don't want to add any more margin + const endMonth = (latestEndDate.getUTCMonth()); + const endDay = (latestEndDate.getUTCDate() - 1); + + const groupStartYear = earliestStartDate.getUTCFullYear(); + const groupEndYear = latestEndDate.getUTCFullYear(); + + // accounting for different years in view + const startYearOffset = ((groupStartYear - viewStartYear) * 12); + const endYearOffset = ((groupEndYear - viewStartYear) * 12); + const totalDaysInMonth = new Date(Date.UTC(groupStartYear, startMonth, 0)).getUTCDate(); + const totalDaysInEndMonth = new Date(Date.UTC(groupEndYear, endMonth, 0)).getUTCDate(); + + const percentOfStartMonth = (startDay / totalDaysInMonth); + const percentOfEndMonth = (endDay / totalDaysInEndMonth); + const dayMargin = (percentOfStartMonth * columnWidth); + const endDayMargin = (percentOfEndMonth * columnWidth); + let startPosition = (((startYearOffset + startMonth) * columnWidth) + dayMargin).toFixed(2); + let endPosition = (((endYearOffset + endMonth) * columnWidth) + endDayMargin).toFixed(2); + + if (type === "quarter") { + startPosition = parseFloat(startPosition) + parseFloat(columnWidth); + endPosition = parseFloat(endPosition) + parseFloat(columnWidth); + } + + if (endMonth > 9) endPosition = endPosition - 0.35; + const widthOfGroup = (endPosition - startPosition); // width of group = start position + (day duration) + // calculate the duration of the group as that helps set the width of its members + const groupDuration = Math.floor((latestEndDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24)); + + const itemWrapper = document.createElement('div'); + itemWrapper.classList.add('group-content'); + + for (const item of matchedItems) { + const itemStartDate = (item[startDateProp]) ? new Date(item[startDateProp]) : viewStart; + const itemEndDate = (item[endDateProp]) ? new Date(item[endDateProp]) : viewEnd; + + const itemEndDateStr = itemEndDate ? itemEndDate.toLocaleDateString().split(',')[0] : null; + const itemDuration = Math.floor((itemEndDate.getTime() - itemStartDate.getTime()) / (1000 * 60 * 60 * 24)); + const itemDurationPct = ((itemDuration / groupDuration) * 100).toFixed(2); + + let daysDifference = Math.floor((itemStartDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24)); + const startPctDiff = ((daysDifference / groupDuration) * 100).toFixed(2); + let itemEl = document.createElement('div'); + itemEl.classList.add('item'); + itemEl.style.marginLeft = startPctDiff + '%'; + + // Find the corresponding color code from the taskStatusMappings array + const itemStatusMapping = await getTaskStatusMapping(item.taskStatus); + const { text: statusText = 'Unknown Status', 'color-code': colorCode = 'green' } = itemStatusMapping; + + // Create a placeholder for the thumbnail + itemEl.innerHTML = ` +
+
+
+
+
+
${item.deliverableName}
+
+
+
+
+
+ ${itemEndDateStr ? '
End Date: ' + itemEndDateStr + '
' : ''} +
+ QA Files +
+
+
+ `; + itemEl.style.width = itemDurationPct + '%'; + + // Call the new function to fetch and add the thumbnail, ensuring sequential execution + await addThumbnailToItem(itemEl, item.programName, item.campaignName,item.deliverableType); + itemWrapper.appendChild(itemEl); + + }; + + //await lookupType(category, 'deliverable-type'); + const groupEl = document.createElement('div'); + groupEl.classList.add('calendar-group', `color${groupIndex}`); + groupEl.style.marginLeft = startPosition + '%'; + groupEl.style.width = widthOfGroup + '%'; + groupEl.innerHTML = ` +
+
+ + +
${groupType}
+
${matchedItems.length}
+
+
+
+
+ `; + groupEl.appendChild(itemWrapper); + groupEl.querySelectorAll('.group-controls').forEach((arrow) => { + arrow.addEventListener('click', showHideGroup); + }); + + contentWrapper.appendChild(groupEl); + groupIndex +=1; + + }; + + calendarEl.appendChild(contentWrapper); + block.querySelector('.calendar.tab').appendChild(calendarEl); + + // populate "filter" dropdown + const filterDropdown = document.createElement('div'); + filterDropdown.classList.add('filter-dropdown-content'); + const uniqueYears = getUniqueYears(calendarDeliverables); + const yearOptionLabel = document.createElement('div'); + yearOptionLabel.classList.add('filter-label'); + yearOptionLabel.textContent = 'Year'; + const quarterOptionLabel = document.createElement('div'); + quarterOptionLabel.classList.add('filter-label'); + quarterOptionLabel.textContent = 'Quarter'; + filterDropdown.appendChild(yearOptionLabel); + + // when choosing 'Quarter' the top left controls change to control the quarter in focus + // its kind of a zoomed in view. + uniqueYears.forEach((year) => { + const yearOption = document.createElement('div'); + yearOption.classList.add('filter-option'); + yearOption.dataset.year = year; + yearOption.textContent = year; + yearOption.addEventListener('click', (event) => filterDropdownSelection(event, viewStartYear, years.length)); + filterDropdown.appendChild(yearOption); + }); + filterDropdown.appendChild(quarterOptionLabel); + const quarters = [ 1, 2, 3, 4 ]; + quarters.forEach((quarter) => { + const quarterOption = document.createElement('div'); + quarterOption.classList.add('filter-option'); + quarterOption.dataset.period = quarter; + quarterOption.textContent = quarter; + //quarterOption.addEventListener('click', filterDropdownSelection); + quarterOption.addEventListener('click', (event) => filterDropdownSelection(event, viewStartYear, years.length)); + filterDropdown.appendChild(quarterOption); + }) + + const filterDropdownWrapper = block.querySelector('.filter-dropdown-wrapper'); + filterDropdownWrapper.appendChild(filterDropdown); + filterDropdownWrapper.querySelector('.filter-dropdown-button').addEventListener('click', (event) => toggleDropdown(event.target)); + + // scroll to the right + const calendarWrapper = document.querySelector('.calendar-wrapper') + const scrollPct = calculateScroll(type, viewStartYear, displayYear, displayQuarter, years.length); + document.addEventListener('DOMContentLoaded', scrollOnInit(calendarWrapper, scrollPct)); + + // indicator that shows current day/month + const currentMonth = currentDate.getMonth() + 1; + // calculate the percentage completion of the current month for the indicator offset + const totalDaysInMonth = new Date((new Date(currentYear, currentMonth, 1)) - 1).getDate(); + const percentOfMonth = (currentDate.getUTCDate() / totalDaysInMonth).toFixed(2) * 100; + const monthEl = block.querySelector(`.month-wrapper[data-year='${currentYear}'] .month[data-num='${currentMonth}']`); + monthEl.classList.add('current'); + const lineEl = document.createElement('div'); + lineEl.classList.add('calendar-indicator'); + // use direct style for offset + lineEl.style.marginRight = ((-2 * percentOfMonth) + 100) + '%'; + monthEl.appendChild(lineEl); + + // close dropdown listener for clicks outside open dropdown + document.querySelector('.gmo-program-details.block').addEventListener('click', dismissDropdown); + block.querySelectorAll('.year-switch > .year-toggle').forEach((control) => { + control.removeEventListener('click', changePeriod); + if (years.length > 1) { + control.addEventListener('click', changePeriod); + } + }); + block.querySelector('.right-controls .today-button').addEventListener('click', () => { + const calendarWrapper = document.querySelector('.calendar-wrapper') + // determine scroll pct for years. always use type = year because "today" doesn't care about quarters. + const yearScrollPct = calculateScroll("year", viewStartYear, currentYear, displayQuarter, years.length); + // determine how far through the current year we are + const now = new Date(); + now.setHours(0,0,0,0); + const dateDiff = Math.floor((now - new Date(now.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24)); + const dayPct = (((dateDiff) * ((1 / years.length) / 365)) * 100); + // get total scroll percent by adding year + day scroll pct + const totalScroll = (parseFloat(yearScrollPct) + parseFloat(dayPct)).toFixed(2); + // scroll to position + scrollToPosition(calendarWrapper, totalScroll); + }); +} + +// calendar view supporting functions + +// Helper function to get task status mapping +async function getTaskStatusMapping(taskStatus) { + const taskStatusArray = await taskStatusMappings; + return taskStatusArray.find(mapping => mapping.value === taskStatus) || {}; +} + +async function addThumbnailToItem(itemEl, programName, campaignName, deliverableType) { + // Create a unique key for the cache based on the parameters, only add the campaignName in cacheKey when it is not null or empty + const cacheKey = campaignName ? `${programName}-${campaignName}-${deliverableType}` : `${programName}-${deliverableType}`; + + // Check if the imageObject is already cached + let imageObject = thumbnailCache[cacheKey]; + + // If not cached, make the API call and store the result in the cache + if (!imageObject) { + try { + imageObject = await searchAsset(programName, campaignName, deliverableType); + thumbnailCache[cacheKey] = imageObject; // Store the result in the cache + } catch (error) { + console.error("Failed to load thumbnail image:", error); + return; // Exit the function if the API call fails } } + + // Use the cached or newly fetched imageObject + if (imageObject && imageObject.imageUrl) { + const thumbnailDiv = itemEl.querySelector('.thumbnail'); + const imgElement = document.createElement('img'); + imgElement.src = imageObject.imageUrl; + imgElement.alt = imageObject.imageAltText; + imgElement.loading = 'lazy'; + thumbnailDiv.appendChild(imgElement); + } else { + console.error("Image Object does not have a valid imageUrl"); + } +} + +function getTimeBounds(items, whichEnd, property) { + const desiredDate = items.reduce((dateCompare, currentItem) => { + const currentItemDate = new Date(currentItem[property]); // Ensure UTC + if (whichEnd === "start") { + return currentItemDate < dateCompare ? currentItemDate : dateCompare; + } else { + return currentItemDate > dateCompare ? currentItemDate : dateCompare; + } + }, new Date(items[0][property])); + return desiredDate; +} + +function showHideGroup(event) { + const arrow = event.target; + const group = arrow.closest('.calendar-group'); + group.querySelector('.group-content').classList.toggle('inactive'); + group.querySelector('.group-expand').classList.toggle('inactive'); + group.querySelector('.group-collapse').classList.toggle('inactive'); + group.querySelector('.group-header').classList.toggle('content-hidden') +} + +function changePeriod(event) { + const arrow = event.target; + const direction = arrow.dataset.direction; + const wrapper = arrow.closest('.inc-dec-wrapper'); + const yearEl = wrapper.querySelector('.current-year'); + const contentWrapper = document.querySelector('.calendar-content-wrapper'); + const view = contentWrapper.dataset.view; + const currentYear = parseInt(yearEl.dataset.year); + const maxYear = viewEnd.getUTCFullYear(); // Use the maximum year from the viewEnd variable + const minYear = viewStart.getUTCFullYear(); // Use the minimum year from the viewStart variable + + let newPeriod, newYear, newQuarter; + + if (view === "quarter") { + const currentQuarter = parseInt(yearEl.dataset.quarter); + newQuarter = (direction == 'right') ? (currentQuarter + 1) : (currentQuarter - 1); + newYear = currentYear; + if (newQuarter > 4) { + newQuarter = 1; + newYear = currentYear + 1; + } + if (newQuarter < 1) { + newQuarter = 4; + newYear = currentYear - 1; + } + } else { + newYear = (direction == 'right') ? (currentYear + 1) : (currentYear - 1); + newQuarter = 1; + } + + // Prevent the year from going beyond the maximum or minimum year + if (newYear > maxYear || newYear < minYear) { + return; + } + + newPeriod = { 'year': newYear, 'quarter': newQuarter }; + refreshCalendar(newPeriod, view); +} + +function getUniqueYears(items) { + const yearsSet = new Set(); + items.forEach(item => { + const startDate = item[startDateProp]; + if (startDate) { + const year = startDate.split('-')[0]; + yearsSet.add(year); + } + }); + if (yearsSet.size === 0) { + const startYear = viewStart.getFullYear(); + const endYear = viewEnd.getFullYear(); + for (let year = startYear; year <= endYear; year++) { + yearsSet.add(year); + } + } + const years = Array.from(yearsSet); + years.sort((a, b) => parseInt(a) - parseInt(b)); + return years; +} + +// handle clicking on the year button +function toggleDropdown(element) { + const dropdown = element.closest('.filter-dropdown-wrapper'); + const iconChevronDown = dropdown.querySelector('.icon-chevronDown'); + const iconChevronUp = dropdown.querySelector('.icon-chevronUp'); + + iconChevronDown.classList.toggle('inactive'); + iconChevronUp.classList.toggle('inactive'); + dropdown.classList.toggle('active'); +} + +// handle clicks outside the dropdown +function dismissDropdown(event) { + const isInsideDropdown = event ? event.target.closest('.filter-dropdown-wrapper') : false; + if (!isInsideDropdown) { + const dropdown = document.querySelector('.filter-dropdown-wrapper'); + dropdown.querySelector('.icon-chevronDown').classList.remove('inactive'); + dropdown.querySelector('.icon-chevronUp').classList.add('inactive'); + dropdown.classList.remove('active'); + } +} + +function filterDropdownSelection(event, viewStartYear, numYears) { + // if we're hopping views, redraw the calendar + // if not just scroll + const calendarContentEl = document.querySelector('.calendar-content-wrapper'); + const currentView = calendarContentEl.dataset.view; + + const optionEl = event.target; + let year, quarter, view; + if (("period") in optionEl.dataset) { + // quarter view + quarter = optionEl.dataset.period; + year = document.querySelector('.inc-dec-wrapper .current-year').dataset.year; + view = "quarter"; + } else { + // year view + view = "year"; + year = optionEl.dataset.year; + quarter = 1; + } + + const period = { 'year': year, 'quarter': quarter } + + if (currentView === view) { + // scroll over + const scrollPct = calculateScroll(view, viewStartYear, year, quarter, numYears); + const calendarWrapper = document.querySelector('.calendar-wrapper'); + scrollToPosition(calendarWrapper, scrollPct); + } else { + const viewStr = view.charAt(0).toUpperCase() + view.slice(1); + document.querySelector('.filter-dropdown-button > .label').textContent = `Selected View: ${viewStr}`; + refreshCalendar(period, view); + } + dismissDropdown(); +} + +// retrieve the year via js when refreshing in quarter view +function refreshCalendar(period, view) { + const block = document.querySelector('.gmo-program-details.block'); + const yearEl = block.querySelector('.inc-dec-wrapper .current-year'); + yearEl.dataset.year = period.year; + yearEl.dataset.quarter = period.quarter; + + if (view === "year") { + yearEl.textContent = period.year; + } else { + yearEl.textContent = `Q${period.quarter} ${period.year}`; + } + + + // trick to remove event listeners + block.querySelector('.filter-dropdown-wrapper').outerHTML += ''; + block.querySelector('.right-controls .today-button').outerHTML += ''; + + block.querySelector('.calendar-wrapper').remove(); + block.querySelector('.filter-dropdown-content').remove(); + + buildCalendar(calendarDeliverables, block, view, deliverableMappings, period); +} + +function calendarYears(startYear, endYear) { + let years = []; + for (let year = startYear; year <= endYear; year++) { + years.push(year); + } + return years; +} + +function buildYearCal(years) { + const calendarEl = document.createElement('div'); + calendarEl.classList.add('calendar-wrapper'); + if (years.length > 1) calendarEl.classList.add('multiyear'); + const backgroundEl = document.createElement('div'); + backgroundEl.classList.add('calendar-background'); + backgroundEl.style.width = (years.length * 100) + '%'; + + years.forEach((year) => { + const yearWrapper = document.createElement('div'); + yearWrapper.dataset.year = year; + yearWrapper.classList.add('year-wrapper'); + yearWrapper.style.width = (100 / years.length) + '%'; + const calendarHeader = document.createElement('div'); + calendarHeader.classList.add('header-wrapper'); + const quartersHeader = document.createElement('div'); + quartersHeader.classList.add('quarter-header'); + quartersHeader.innerHTML = ` +
Q1 ${year}
+
Q2 ${year}
+
Q3 ${year}
+
Q4 ${year}
+ `; + calendarHeader.appendChild(quartersHeader); + + const monthsWrapper = document.createElement('div'); + monthsWrapper.classList.add('month-wrapper'); + monthsWrapper.dataset.year = year; + monthsWrapper.innerHTML = ` +
Jan
+
Feb
+
Mar
+
Apr
+
May
+
Jun
+
Jul
+
Aug
+
Sep
+
Oct
+
Nov
+
Dec
+ `; + yearWrapper.appendChild(calendarHeader); + yearWrapper.appendChild(monthsWrapper); + backgroundEl.appendChild(yearWrapper); + }); + calendarEl.appendChild(backgroundEl); + return calendarEl; +} + + +function buildQuarterCal(years) { + const calendarEl = document.createElement('div'); + calendarEl.classList.add('calendar-wrapper', 'quarter-view'); + if (years.length > 1) calendarEl.classList.add('multiyear'); + const backgroundEl = document.createElement('div'); + backgroundEl.classList.add('calendar-background'); + // this is wider for 'quarter' view- see equivalent in 'year' view. + backgroundEl.style.width = (years.length * 300) + '%'; + + years.forEach((year) => { + const yearWrapper = document.createElement('div'); + yearWrapper.dataset.year = year; + yearWrapper.classList.add('year-wrapper'); + yearWrapper.style.width = (100 / years.length) + '%'; + const calendarHeader = document.createElement('div'); + calendarHeader.classList.add('header-wrapper'); + const quartersHeader = document.createElement('div'); + quartersHeader.classList.add('quarter-header'); + quartersHeader.innerHTML = ` +
Fiscal Q1 ${year}
+
Fiscal Q2 ${year}
+
Fiscal Q3 ${year}
+
Fiscal Q4 ${year}
+ `; + calendarHeader.appendChild(quartersHeader); + + const monthsWrapper = document.createElement('div'); + monthsWrapper.classList.add('month-wrapper'); + monthsWrapper.dataset.year = year; + monthsWrapper.innerHTML = ` +
Dec Q1
+
Jan Q1
+
Feb Q1
+
Mar Q2
+
Apr Q2
+
May Q2
+
Jun Q3
+
Jul Q3
+
Aug Q3
+
Sep Q4
+
Oct Q4
+
Nov Q4
+ `; + yearWrapper.appendChild(calendarHeader); + yearWrapper.appendChild(monthsWrapper); + backgroundEl.appendChild(yearWrapper); + }); + calendarEl.appendChild(backgroundEl); + return calendarEl; +} + +function scrollOnInit(element, scrollPct) { + // Observer to detect when the element becomes visible + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + resizeGroups(); + scrollToPosition(element, scrollPct); + observer.disconnect(); // Stop observing after scrolling + } + }); + }); + + // Start observing the element + observer.observe(element); +} + +function getHorizontalOverflow(element) { + return element.scrollWidth - element.clientWidth; +} + +function resizeGroups() { + const groups = document.querySelectorAll('.calendar-group'); + groups.forEach((group) => { + const overflow = getHorizontalOverflow(group); + if (overflow) { + group.querySelector('.group-header').style.paddingRight = overflow + 'px'; + group.style.paddingRight = overflow + 'px'; + } + }) +} + +function scrollToPosition(element, scrollPct) { + const maxScrollLeft = element.scrollWidth; + const scrollAmt = (maxScrollLeft) * (scrollPct / 100); + element.scrollTo({ + left: scrollAmt, // Replace with desired position + behavior: 'smooth' // Optional: for smooth scrolling + }); +} + +function calculateScroll(type, viewStartYear, displayYear, displayQuarter, numYears) { + const yearDiff = displayYear - viewStartYear; + const yearWidthOffsetPct = (((yearDiff / numYears)) * 100); + + if (type === "quarter") { + return ((yearWidthOffsetPct) + ((displayQuarter - 1) * ((1 / numYears) / 4)) * 100).toFixed(2); + } else { + return (yearWidthOffsetPct).toFixed(2); + } +} + +function isValidDate(dateObj) { + return dateObj instanceof Date && !isNaN(dateObj); } diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 927093f4..7a9bd3cf 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -181,6 +181,7 @@ async function buildCampaignList(campaigns, numPerPage) { const programName = campaign.node.programName; const campaignName = campaign.node.campaignName; const programID = campaign.node.programID ? campaign.node.programID : ""; + const path = campaign.node._path; campaignRow.classList.add('campaign-row'); if ((index + 1) > numPerPage) campaignRow.classList.add('hidden'); @@ -190,9 +191,9 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignIconLink = document.createElement('a'); let campaignDetailsLink = host + `/${detailsPage}?programName=${programName}&`; - campaignDetailsLink += `programID=${programID}` + campaignDetailsLink += `programID=${programID}`; + campaignDetailsLink += `&path=${path}`; campaignIconLink.href = campaignDetailsLink; - const campaignIcon = document.createElement('div'); campaignIcon.classList.add('campaign-icon'); campaignIcon.dataset.programname = programName; @@ -203,7 +204,6 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignNameWrapper = document.createElement('div'); campaignNameWrapper.classList.add('campaign-name-wrapper', 'vertical-center'); - campaignNameWrapper.innerHTML = `
${checkBlankString(programName)} diff --git a/scripts/graphql.js b/scripts/graphql.js index c4d733f4..0b7f08c5 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -47,6 +47,8 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { const encodedCursor = encodeURIComponent(cursor); const encodedFilter = encodeURIComponent(JSON.stringify(filter)); const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}first=${encodedFirst}${encodedSemiColon}cursor=${encodedCursor}${encodedSemiColon}filter=${encodedFilter}`; + //Performance logging + const startTime = performance.now(); const jwtToken = await getBearerToken(); try { @@ -57,6 +59,11 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { }, }; const response = await fetch(`${graphqlEndpoint}`, options); + //Performance logging + const endTime = performance.now(); + const executionTime = endTime - startTime; + console.debug(`getAllCampaigns Execution Time: ${executionTime} ms`); + // Handle response codes if (response.status === 200) { const responseBody = await response.json(); @@ -170,6 +177,8 @@ export async function executeQuery(queryString) { const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; const projectId = 'gmo'; const queryEndpoint = `${baseApiUrl}/${projectId}/${queryString}`; + //Performance logging + const startTime = performance.now(); const jwtToken = await getBearerToken(); return fetch(queryEndpoint, { @@ -181,6 +190,11 @@ export async function executeQuery(queryString) { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } + //Performance logging + const endTime = performance.now(); + const executionTime = endTime - startTime; + console.debug(`executeQuery for ${queryString} Execution Time: ${executionTime} ms`); + return response.json(); }).then(data => { return data; // Make sure to return the data so that the promise resolves with it From 2c580c139315bef16421a028b25d1a032a2bbbed Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Tue, 1 Oct 2024 16:26:37 -0400 Subject: [PATCH 81/95] Add loading spinner to program list and details blocks (#173) * add loading overlay, defer api call * refactor some js to remove blocking awaits also tweak css for loading spinner * add loading overlay to details block Refactored the loading overlay to move functions to shared-program. Moved CSS to gmo-styles. Added to details block. * add spinner to program details block --- .../gmo-program-details.css | 5 ++ .../gmo-program-details.js | 12 ++-- blocks/gmo-program-list/gmo-program-list.css | 7 ++- blocks/gmo-program-list/gmo-program-list.js | 35 +++++++----- scripts/graphql.js | 55 +++++++++---------- scripts/shared-program.js | 33 ++++++++++- styles/gmo-styles.css | 44 +++++++++++++++ 7 files changed, 141 insertions(+), 50 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 0a0c2fca..9f43a01d 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -29,7 +29,12 @@ body { } } +.gmo-program-details-wrapper { + margin-top: 50px; +} + .gmo-program-details.block { + position: relative; & .h1 { font: normal normal bold 18px/27px Adobe Clean; } diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index c7e2f018..23ef08ae 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -1,6 +1,6 @@ import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; import { executeQuery } from '../../scripts/graphql.js'; -import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray } from '../../scripts/shared-program.js'; +import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray, showLoadingOverlay, hideLoadingOverlay } from '../../scripts/shared-program.js'; import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; @@ -40,6 +40,7 @@ export default async function decorate(block) {
Loading program details...
`; + showLoadingOverlay(block); // Wait for program data to render the actual header const programData = await executeQuery(programQueryString); @@ -219,7 +220,7 @@ export default async function decorate(block) { `; // Wait for deliverables data - const deliverables = await executeQuery(deliverableQueryString); + const deliverables = executeQuery(deliverableQueryString); const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); @@ -228,14 +229,14 @@ export default async function decorate(block) { buildFieldScopes('deliverable-type', uniqueDeliverableTypes, block); buildFieldScopes('platforms', uniquePlatforms, block); - const table = await buildTable(await deliverables).then(async (rows) => { + const table = buildTable(await deliverables).then(async (rows) => { return rows; }); // Batch Dom Updates const tableRoot = block.querySelector('.table-content'); const fragment = document.createDocumentFragment(); - fragment.appendChild(table); + fragment.appendChild(await table); tableRoot.appendChild(fragment); buildStatus(program.status); @@ -266,6 +267,7 @@ export default async function decorate(block) { }); decorateIcons(block); + hideLoadingOverlay(block); buildCalendar(await deliverables, block, "year", await deliverableMappings); } @@ -478,7 +480,7 @@ function buildArtifactLinks(program) { async function buildStatus(status) { const statusDiv = document.createElement('div'); statusDiv.classList.add('campaign-status'); - const statusMatch = filterArray(statusMapping, 'value', status); + const statusMatch = filterArray(await statusMapping, 'value', status); const statusText = statusMatch ? statusMatch[0].text : status; const statusHex = statusMatch[0]["color-code"]; statusDiv.textContent = statusText; diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css index 5e71b736..44af6daa 100644 --- a/blocks/gmo-program-list/gmo-program-list.css +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -1,6 +1,10 @@ body { background-color: rgb(247, 246, 246); } +.gmo-program-list.block { + position: relative; + min-height: 500px; +} .refresh-notification { text-align: right; font-size: 14px; @@ -101,6 +105,7 @@ body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; + line-clamp: 4; overflow: hidden; text-overflow: ellipsis; } @@ -286,4 +291,4 @@ select { padding: 2px 0; font: normal normal normal 12px/17px Adobe Clean; margin-left: 20px; -} +} \ No newline at end of file diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 7a9bd3cf..163910c6 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -1,7 +1,7 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import { graphqlAllCampaignsFilter, graphqlCampaignCount, generateFilterJSON } from '../../scripts/graphql.js'; -import { getProductMapping, checkBlankString, statusMapping, dateFormat } from '../../scripts/shared-program.js' +import { getProductMapping, checkBlankString, statusMapping, dateFormat, showLoadingOverlay, hideLoadingOverlay } from '../../scripts/shared-program.js' import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; @@ -39,6 +39,7 @@ const headerConfig = [ ] const DEFAULT_ITEMS_PER_PAGE = 8; +//const programStatusMapping = statusMapping; //Global variables used by helper functions let currentPageInfo = {}; let cursorArray = []; @@ -47,7 +48,7 @@ let currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; let currentGraphqlFilter = {}; let totalPages = 0; //Get Campaign Count for pagination -let campaignCount = await graphqlCampaignCount(); +let campaignCount = graphqlCampaignCount(); let blockConfig; document.addEventListener('gmoCampaignListBlock', async function() { @@ -62,7 +63,7 @@ document.addEventListener('gmoCampaignListBlock', async function() { currentGraphqlFilter= generateFilterJSON(graphQLFilterArray); const block = document.querySelector('.gmo-program-list.block'); //Get Campaign Count for pagination - campaignCount = await graphqlCampaignCount(currentGraphqlFilter); + campaignCount = graphqlCampaignCount(currentGraphqlFilter); //Reset page variables currentPageInfo = {}; @@ -74,6 +75,7 @@ document.addEventListener('gmoCampaignListBlock', async function() { }); export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) { + showLoadingOverlay(block); if (blockConfig == undefined) blockConfig = readBlockConfig(block); const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter); const campaigns = campaignPaginatedResponse.data.programPaginated.edges; @@ -99,11 +101,11 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, currentPageInfo.itemCount = campaigns.length; // Calculate total number of pages - totalPages = Math.ceil(campaignCount / currentNumberPerPage); + totalPages = Math.ceil(await campaignCount / currentNumberPerPage); const listHeaders = buildListHeaders(headerConfig); - const listItems = await buildCampaignList(campaigns, numPerPage); - const listFooter = buildListFooter(campaignCount, numPerPage); + const listItems = buildCampaignList(campaigns, numPerPage); + const listFooter = buildListFooter(await campaignCount, numPerPage); block.innerHTML = `
@@ -111,13 +113,15 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, `; const listContainer = block.querySelector('.list-container'); listContainer.appendChild(listHeaders); - listContainer.appendChild(listItems); + listContainer.appendChild(await listItems); listContainer.appendChild(listFooter); // Show Hide Previous and Next Page buttons togglePaginationButtons(); decorateIcons(block); + hideLoadingOverlay(block); + // Lazy loading for images document.addEventListener('DOMContentLoaded', function() { if ('IntersectionObserver' in window) { @@ -247,7 +251,7 @@ async function buildCampaignList(campaigns, numPerPage) { var campaignStatusWrapper = document.createElement('div'); campaignStatusWrapper.classList.add('status-wrapper', 'column-6', 'vertical-center'); - campaignStatusWrapper = buildStatus(campaignStatusWrapper, campaign); + campaignStatusWrapper = await buildStatus(campaignStatusWrapper, campaign); const campaignGeo = document.createElement('div'); campaignGeo.textContent = formatGeos(campaign.node.p0TargetGeo); @@ -270,10 +274,11 @@ function formatGeos(geoArray) { return geoArray.map(geo => geo.toUpperCase()).join(', '); } -function buildStatus(statusWrapper, campaign) { +async function buildStatus(statusWrapper, campaign) { const campaignStatus = document.createElement('div'); const statusStr = checkBlankString(campaign.node.status); - const statusMatch = statusMapping.filter(item => item.value === statusStr); + const programStatusMapping = await statusMapping; + const statusMatch = programStatusMapping.filter(item => item.value === statusStr); let statusText, statusColor; if (statusMatch.length > 0) { @@ -467,13 +472,13 @@ function repaginate(dropdown) { decorate(block, currentNumberPerPage, '', false, false); } -function nextPage(nextBtn) { +async function nextPage(nextBtn) { if (currentPage < totalPages) { currentPage++; const block = document.querySelector('.gmo-program-list.block'); - decorate(block, currentNumberPerPage, currentPageInfo.nextCursor, false, true, currentGraphqlFilter); + await decorate(block, currentNumberPerPage, currentPageInfo.nextCursor, false, true, currentGraphqlFilter); - const prevBtn = document.querySelector('.footer-pagination-button.prev'); + const prevBtn = block.querySelector('.footer-pagination-button.prev'); prevBtn.classList.add('active'); if (currentPage === totalPages) { @@ -484,7 +489,7 @@ function nextPage(nextBtn) { } } -function prevPage(prevBtn) { +async function prevPage(prevBtn) { if (currentPage > 1) { currentPage--; const block = document.querySelector('.gmo-program-list.block'); @@ -492,7 +497,7 @@ function prevPage(prevBtn) { const currentCursor = currentPageInfo.currentCursor; //Calculate cursor for previous page const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage; - decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter); + await decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter); const nextBtn = document.querySelector('.footer-pagination-button.next'); nextBtn.classList.add('active'); if (currentPage === 1) { diff --git a/scripts/graphql.js b/scripts/graphql.js index 0b7f08c5..106d531a 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -5,39 +5,38 @@ import { logError } from './scripts.js'; const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`; const projectId = 'gmo'; -export async function graphqlCampaignCount(filter = {}) { +export function graphqlCampaignCount(filter = {}) { const queryName = 'getTotalPrograms'; const encodedSemiColon = encodeURIComponent(';'); const encodedFilter = encodeURIComponent(JSON.stringify(filter)); const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}filter=${encodedFilter}`; - const jwtToken = await getBearerToken(); - - try { - const options = { - method: 'GET', - headers: { - Authorization: jwtToken, - }, - }; - const response = await fetch(`${graphqlEndpoint}`, options); - // Handle response codes - if (response.status === 200) { - const responseBody = await response.json(); - return responseBody.data.programList.items.length; - } if (response.status === 404) { - // Handle 404 error - const errorResponse = await response.json(); - throw new Error(`Failed to get graphqlCampaignCount (404): ${errorResponse.detail}`); - } else { - // Handle other response codes - throw new Error(`Failed to retrieve graphqlCampaignCount: ${response.status} ${response.statusText}`); - } - } catch (error) { - // Handle network or other errors - logError('graphqlCampaignCount', error); - throw error; - } + return getBearerToken() + .then(jwtToken => { + const options = { + method: 'GET', + headers: { + Authorization: jwtToken, + }, + }; + + return fetch(`${graphqlEndpoint}`, options); + }) + .then(response => { + if (response.status === 200) { + return response.json().then(responseBody => responseBody.data.programList.items.length); + } else if (response.status === 404) { + return response.json().then(errorResponse => { + throw new Error(`Failed to get graphqlCampaignCount (404): ${errorResponse.detail}`); + }); + } else { + throw new Error(`Failed to retrieve graphqlCampaignCount: ${response.status} ${response.statusText}`); + } + }) + .catch(error => { + logError('graphqlCampaignCount', error); + throw error; + }); } export async function graphqlAllCampaignsFilter(first,cursor,filter) { diff --git a/scripts/shared-program.js b/scripts/shared-program.js index c76dda30..0f57f352 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -3,7 +3,7 @@ import { getProductIconMapping, getBaseConfigPath, getQueryPaths } from './site- let iconMapping; const cfMapping = getQueryPaths(); -export let statusMapping = await getMappingArray('status'); +export let statusMapping = getMappingArray('status'); export let productList = await getMappingArray('products'); /** @@ -62,4 +62,35 @@ export async function getMappingArray(type) { return response.data.jsonByPath.item.json.options; }) return mappings; +} + +export function showLoadingOverlay(targetDiv) { + const overlayEl = document.createElement('div'); + overlayEl.className = 'loading-overlay'; + + // Create the spinner and loading message + const spinnerEl = document.createElement('div'); + spinnerEl.className = 'loading-content'; + + const spinner = document.createElement('div'); + spinner.className = 'spinner'; + + const loadingMessage = document.createElement('span'); + loadingMessage.className = 'loading-message'; + loadingMessage.innerText = 'Loading...'; + + // Append spinner and message to content container + spinnerEl.appendChild(spinner); + spinnerEl.appendChild(loadingMessage); + overlayEl.appendChild(spinnerEl); + + // Append overlay to the target div + targetDiv.appendChild(overlayEl); +} + +export function hideLoadingOverlay(targetDiv) { + const overlay = targetDiv.querySelector('.loading-overlay'); + if (overlay) { + targetDiv.removeChild(overlay); + } } \ No newline at end of file diff --git a/styles/gmo-styles.css b/styles/gmo-styles.css index e7b2b014..5884812a 100644 --- a/styles/gmo-styles.css +++ b/styles/gmo-styles.css @@ -28,4 +28,48 @@ header nav .nav-brand .adp-logo img { .adp-toast { text-transform: none; +} + +/* 'Loading' overlay */ +.loading-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(192, 192, 192, 0.701); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.spinner { + border: 4px solid rgba(255, 255, 255, 0.3); + border-top: 4px solid white; + border-radius: 50%; + width: 40px; + height: 40px; + animation: spin 1s linear infinite; +} + +/* Keyframes for the spinner */ +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.loading-message { + color: white; + font-size: 1.2rem; + margin-left: 10px; +} + +.loading-content { + display: flex; + align-items: center; } \ No newline at end of file From 03a4573438ce8a71bff947a6a90a89f0a675d69f Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Tue, 22 Oct 2024 17:13:15 -0400 Subject: [PATCH 82/95] Details page refactor (#175) * initial refactor of details page - add new helper functions for dom element creation - utilize helper functions to create static html - add async function that starts after block is created and backfills data * adjust overflow calculation * replace not available placeholder text * allow target market area assignment to fail gracefully * Resolve console errors when program can't be found * ensure back button is enabled * remove legacy/unnecessary hidden content --- .../gmo-program-details.css | 4 + .../gmo-program-details.js | 439 +++++++++++------- scripts/shared-program.js | 65 ++- 3 files changed, 328 insertions(+), 180 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 9f43a01d..5c69faa2 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -31,10 +31,12 @@ body { .gmo-program-details-wrapper { margin-top: 50px; + min-height: 400px; } .gmo-program-details.block { position: relative; + min-height: 400px; & .h1 { font: normal normal bold 18px/27px Adobe Clean; } @@ -48,6 +50,8 @@ body { font: normal normal normal 14px/21px Adobe Clean; } & > .main-body-wrapper { + min-height: 300px; + position: relative; display: flex; flex-direction: column; background: #FFFFFF; diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 23ef08ae..7eac71b3 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -1,16 +1,20 @@ import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js'; import { executeQuery } from '../../scripts/graphql.js'; -import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray, showLoadingOverlay, hideLoadingOverlay } from '../../scripts/shared-program.js'; import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; +import { + filterArray, getProductMapping, checkBlankString, + dateFormat, statusMapping, getMappingArray, + showLoadingOverlay, hideLoadingOverlay, div, + span, img +} from '../../scripts/shared-program.js'; + let blockConfig; +let deliverableMappings, platformMappings, taskStatusMappings; const queryVars = extractQueryVars(); const programName = queryVars.programName; const programID = queryVars.programID; -const deliverableMappings = getMappingArray('deliverableType'); -const platformMappings = getMappingArray('platforms'); -const taskStatusMappings = getMappingArray('taskStatus'); const startDateProp = 'taskPlannedStartDate'; const endDateProp = 'taskPlannedEndDate'; let viewStart, viewEnd, calendarDeliverables; @@ -19,37 +23,228 @@ let viewStart, viewEnd, calendarDeliverables; const thumbnailCache = {}; export default async function decorate(block) { + blockConfig = readBlockConfig(block); + block.innerHTML = ` `; + + const currentYear = new Date().getFullYear(); + + const backButton = div({ class: 'back-button'}, span({ class: 'icon icon-back'}), span({ class: 'back-label'}, 'Back')); + const bodyWrapper = div({ class: 'main-body-wrapper'}); + const headerWrapper = div( + { class: 'details-header-wrapper'}, + div({ class: 'campaign-img'}), + div( + { class: 'header-title'}, + div({ class: 'header-row1'}, span({ class: 'h1'}, 'Loading details..')), + div( + { class: 'header-row2 header-row3'}, + div({ class: 'header-row3 data-element'}, + span({ class: 'icon icon-calendar'}), + span({ class: 'date-tooltip'}, 'Proposed Launch Date'), + span({ class: 'campaign-date'}, 'Loading details..'), + ), + span({ class: 'driver-text'}, 'Project Owner: Loading details..'), + div( + { class: 'header-row3 data-element'}, + span({ class: 'icon icon-release-tier'}), + span({ class: 'release-tier'}, 'Release Tier: Loading details..'), + ), + div( + { class: 'header-row3 data-element'}, + span({ class: 'icon icon-productGroup'}), + span({ class: 'productGroup'}, 'Loading details..'), + ), + ), + ), + ); + + // tab wrapper + const tabWrapper = div( + { class: 'tab-wrapper'}, + div({ id: 'tab1toggle', class: 'tabBtn active', 'data-target': 'tab1'}, 'Overview'), + div({ id: 'tab2toggle', class: 'tabBtn', 'data-target': 'tab2'}, 'Deliverables'), + div({ id: 'tab3toggle', class: 'tabBtn', 'data-target': 'tab3'}, 'Calendar'), + ); + + // overview tab + const overviewTab = div( + { id: 'tab1', class: 'two-column overview tab'}, + div( + { class: 'overview-wrapper'}, + span({ class: 'h1 overview-heading'}, 'At a Glance'), + div( + { class: 'product-overview-wrapper'}, + span({ class: 'h3'}, 'Marketing Goal'), + div({ class: 'overview paragraph hide-overflow'}, ' '), + div({ class: 'button no-bg read-more'}, 'Read more'), + ), + div( + { class: 'product-value-wrapper'}, + span({ class: 'h3'}, 'Product Value'), + div({ class: 'description paragraph hide-overflow'}, ' '), + div({ class: 'button no-bg read-more'}, 'Read more'), + ), + div( + { class: 'kpis-wrapper'}, + span({ class: 'h3'}, 'KPIs to Measure Success'), + ), + div( + { class: 'kpis-wrapper market-wrapper'}, + span({ class: 'h3'}, 'Target Market Area'), + ), + div( + { class: 'use-cases-wrapper inactive'}, + span({ class: 'h3'}, 'Hero Use Cases'), + div( + { class: 'tags-wrapper'}, + div({ class: 'use-case-tag'}, 'Text to Image'), + div({ class: 'use-case-tag'}, 'Use Case 2'), + ) + + ), + div( + { id: 'deliverable-type', class: 'channel-scope-wrapper'}, + span({ class: 'h3'}, 'Deliverable Type'), + div({ class: 'tags-wrapper'}), + ), + div( + { id: 'platforms', class: 'channel-scope-wrapper'}, + span({ class: 'h3'}, 'Platforms'), + div({ class: 'tags-wrapper'}), + ), + ), + div( + { class: 'infocards-wrapper'}, + div( + { class: 'card products'}, + div({ class: 'card-heading h3'}, 'Products'), + ), + div( + { class: 'card audiences'}, + div({ class: 'card-heading h3'}, 'Audiences'), + ) + ), + ); + + // deliverables tab + const deliverablesTab = div( + { id: 'tab2', class: 'deliverables tab inactive'}, + div( + { class: 'page-heading'}, + div( + { class: 'total-assets total-assets-tooltip' }, + div({ class: 'h3'}, 'Total Approved Assets'), + span({ id: 'totalassets', class: 'description'}, 'Not Available'), + span( + { class: 'tooltiptext'}, + 'To view the assets, go to the "All Asset" search page and use Program and Campaign name facet to filter the assets.', + ), + ), + ), + div( + { class: 'table-wrapper'}, + div( + { class: 'table-header' }, + div({ class: 'header table-column column1' }, 'Deliverable Task Name'), + div({ class: 'header table-column column2' }, 'Deliverable Type'), + div({ class: 'header table-column column3' }, 'Platforms'), + div({ class: 'header table-column column4' }, 'QA Files'), + div({ class: 'header table-column column5' }, 'Final Asset'), + div({ class: 'header table-column column7' }, 'Status Update'), + div({ class: 'header table-column column8' }, 'Completion Date'), + div({ class: 'header table-column column9' }, 'Task Owner'), + ), + div({ class: 'table-content' }), + ) + ); + + // calendar tab + const calendarTab = div( + { id: 'tab3', class: 'calendar tab inactive'}, + div( + { class: 'control-wrapper' }, + div( + { class: 'inc-dec-wrapper' }, + div( + { class: 'year-switch' }, + div( + { id: 'dec-year', class: 'year-toggle' }, + img( + { class: 'left', 'data-direction': 'left', src: '/icons/chevron-right.svg'}, + ), + ), + div( + { id: 'inc-year', class: 'year-toggle' }, + img( + { class: 'right', 'data-direction': 'right', src: '/icons/chevron-right.svg'}, + ), + ) + ), + div( + { class: 'current-year', 'data-quarter': '1', 'data-year': `${currentYear}` }, + `${currentYear}`, + ), + ), + div( + { class: 'right-controls' }, + div({ class: 'today-button' }, 'Today'), + div( + { class: 'filter-dropdown-wrapper' }, + div( + { class: 'filter-dropdown-button' }, + div({ class: 'label' }, 'Selected View: Year'), + span({ class: 'icon icon-chevronDown' }), + span({ class: 'icon icon-chevronUp inactive' }), + ), + ), + ), + ), + ); + + bodyWrapper.appendChild(headerWrapper); + bodyWrapper.appendChild(tabWrapper); + bodyWrapper.appendChild(overviewTab); + bodyWrapper.appendChild(deliverablesTab); + bodyWrapper.appendChild(calendarTab); + showLoadingOverlay(bodyWrapper); + block.appendChild(backButton); + block.appendChild(bodyWrapper); + decorateIcons(block); + + // add dynamic data + addProgramStats(block); + + // enable back button + enableBackBtn(block, blockConfig); +} + +async function addProgramStats(block) { + // mappings + deliverableMappings = getMappingArray('deliverableType'); + platformMappings = getMappingArray('platforms'); + taskStatusMappings = getMappingArray('taskStatus'); + + // main program data const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); const encodedPath = queryVars.path ? `${encodeURIComponent(queryVars.path)}` : ''; - - blockConfig = readBlockConfig(block); - // Including path in the query if present const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}` + (encodedPath ? `${encodedSemi}path=${encodedPath}` : ''); - - const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; - - // Immediately render a placeholder header - block.innerHTML = ` -
- - Back -
-
-
Loading program details...
-
- `; - showLoadingOverlay(block); - - // Wait for program data to render the actual header const programData = await executeQuery(programQueryString); const program = programData.data.programList.items[0]; + const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); + const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); + const bodyWrapper = document.querySelector('.main-body-wrapper'); + + // for deliverable list + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; + // for thumbnails let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; let totalassets = 0; - let header = block.querySelector('.placeholder-header'); + // build header + let header = block.querySelector('.details-header-wrapper'); if (!(program === undefined)) { const programHeader = buildHeader(program, queryVars).outerHTML; // Update the header with the actual data @@ -63,7 +258,6 @@ export default async function decorate(block) { } catch (error) { console.error("Failed to load campaign image:", error); } - decorateIcons(block); } else { //programName and campaignName is null header.textContent = 'Unable to retrieve program information.'; @@ -87,175 +281,55 @@ export default async function decorate(block) { } catch (error) { console.error("Failed to load campaign image:", error); } - - decorateIcons(block); + hideLoadingOverlay(bodyWrapper); enableBackBtn(block, blockConfig); + decorateIcons(block); return; } - const p0TargetMarketArea = program.p0TargetMarketArea; - const p1TargetMarketArea = program.p1TargetMarketArea; - const kpis = buildKPIList(program).outerHTML; - const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; - const audiences = buildAudienceList(program).outerHTML; - const artifactLinks = buildArtifactLinks(program).outerHTML; - - const currentYear = new Date().getFullYear(); - - // Inject the additional HTML content - block.querySelector('.main-body-wrapper').innerHTML += ` -
-
Overview
-
Deliverables
-
Calendar
-
-
-
- At a Glance -
- Marketing Goal -
${checkBlankString(program.marketingGoal.plaintext)}
-
Read more
-
-
- Product Value -
${checkBlankString(program.productValue.plaintext)}
-
Read more
-
-
- KPIs to Measure Success - ${kpis} -
-
- Target Market Area - ${targetMarketAreas} -
-
- Hero Use Cases -
-
Text to Image
-
Use Case 2
-
-
-
- Main Message - - A major genAI release of the Photoshop beta app that delivers new and enhanced generative AI capabilities. - -
- -
- Deliverable Type -
-
-
- -
- Platforms -
-
-
- ${artifactLinks} -
-
-
-
Products
-
-
-
Audiences
- ${audiences} -
-
-
-
-
- ${artifactLinks} -
-
Total Approved Assets
- ${totalassets} - To view the assets, go to the "All Asset" search page and use Program and Campaign name facet to filter the assets -
-
-
-
-
Deliverable Task Name
-
Deliverable Type
-
Platforms
-
QA Files
-
Final Asset
-
Status Update
-
Completion Date
-
Task Owner
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
${currentYear}
-
-
-
Today
-
-
-
Selected View: Year
- - -
-
-
-
-
- - `; - - // Wait for deliverables data - const deliverables = executeQuery(deliverableQueryString); - - const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); - const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); - + // start populating needed statistics and areas + // add major UI elements + const p0TargetMarketArea = program.p0TargetMarketArea ? program.p0TargetMarketArea : null; + const p1TargetMarketArea = program.p1TargetMarketArea ? program.p1TargetMarketArea : null; + const kpis = buildKPIList(program); + const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea); + const audiences = buildAudienceList(program); + const artifactLinks = buildArtifactLinks(program); + + document.querySelector('.kpis-wrapper').appendChild(kpis); + document.querySelector('.market-wrapper').appendChild(targetMarketAreas); + document.querySelector('.card.audiences').appendChild(audiences); + document.querySelector('.overview-wrapper').appendChild(artifactLinks); + + // add text + const marketingGoal = checkBlankString(program.marketingGoal.plaintext); + document.querySelector('.product-overview-wrapper > .paragraph').textContent = marketingGoal; + const productValue = checkBlankString(program.productValue.plaintext); + document.querySelector('.product-value-wrapper > .paragraph').textContent = productValue; + + // additional dom updates buildProductCard(program); buildFieldScopes('deliverable-type', uniqueDeliverableTypes, block); buildFieldScopes('platforms', uniquePlatforms, block); + // deliverables tab + const deliverables = executeQuery(deliverableQueryString); + document.querySelector('.page-heading').appendChild(artifactLinks); + document.querySelector('.total-assets > .description').textContent = totalassets; + const table = buildTable(await deliverables).then(async (rows) => { return rows; }); - - // Batch Dom Updates const tableRoot = block.querySelector('.table-content'); const fragment = document.createDocumentFragment(); fragment.appendChild(await table); tableRoot.appendChild(fragment); - buildStatus(program.status); - // Optimize Event Listeners: Added debouncing to event listeners to prevent performance issues. - const debounce = (func, delay) => { - let timeout; - return (...args) => { - clearTimeout(timeout); - timeout = setTimeout(() => func(...args), delay); - }; - }; - - block.querySelector('.tab-wrapper').addEventListener('click', debounce((event) => { - switchTab(event.target); - }, 300)); + // calendar tab + buildCalendar(await deliverables, block, "year", await deliverableMappings); - enableBackBtn(block, blockConfig); - + // enable 'read more' buttons block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { const readMore = event.target; @@ -266,9 +340,16 @@ export default async function decorate(block) { }); }); + // enable tab switching + block.querySelector('.tab-wrapper').addEventListener('click', (event) => { + switchTab(event.target); + }); + + // decorate any new icons decorateIcons(block); - hideLoadingOverlay(block); - buildCalendar(await deliverables, block, "year", await deliverableMappings); + + // remove loading spinner + hideLoadingOverlay(bodyWrapper); } function enableBackBtn(block, blockConfig) { @@ -1346,7 +1427,7 @@ function scrollOnInit(element, scrollPct) { } function getHorizontalOverflow(element) { - return element.scrollWidth - element.clientWidth; + return ((element.scrollWidth - element.clientWidth) + 4); } function resizeGroups() { diff --git a/scripts/shared-program.js b/scripts/shared-program.js index 0f57f352..f52b2e37 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -93,4 +93,67 @@ export function hideLoadingOverlay(targetDiv) { if (overlay) { targetDiv.removeChild(overlay); } -} \ No newline at end of file +} + +/** + * Example Usage: + * + * domEl('main', + * div({ class: 'card' }, + * a({ href: item.path }, + * div({ class: 'card-thumb' }, + * createOptimizedPicture(item.image, item.title, 'lazy', [{ width: '800' }]), + * ), + * div({ class: 'card-caption' }, + * h3(item.title), + * p({ class: 'card-description' }, item.description), + * p({ class: 'button-container' }, + * a({ href: item.path, 'aria-label': 'Read More', class: 'button primary' }, 'Read More'), + * ), + * ), + * ), + * ) + */ + +/** + * Helper for more concisely generating DOM Elements with attributes and children + * @param {string} tag HTML tag of the desired element + * @param {[Object?, ...Element]} items: First item can optionally be an object of attributes, + * everything else is a child element + * @returns {Element} The constructred DOM Element + */ +export function domEl(tag, ...items) { + const element = document.createElement(tag); + + if (!items || items.length === 0) return element; + + if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') { + const [attributes, ...rest] = items; + items = rest; + + Object.entries(attributes).forEach(([key, value]) => { + if (!key.startsWith('on')) { + element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value); + } else { + element.addEventListener(key.substring(2).toLowerCase(), value); + } + }); + } + + items.forEach((item) => { + item = item instanceof Element || item instanceof HTMLElement + ? item + : document.createTextNode(item); + element.appendChild(item); + }); + + return element; + } + +/* + More short hand functions can be added for very common DOM elements below. + domEl function from above can be used for one off DOM element occurrences. +*/ +export function div(...items) { return domEl('div', ...items); } +export function span(...items) { return domEl('span', ...items); } +export function img(...items) { return domEl('img', ...items); } \ No newline at end of file From 817dc3139c046e66e656fd53bd39be1e883570d6 Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Tue, 12 Nov 2024 11:44:45 -0800 Subject: [PATCH 83/95] DXI- 29263 (#178) * DXI-29263- Make All 'Deliverable Types' and 'Platform' labels Interactive * Update gmo-program-details.js * Update gmo-program-details.js * Asset count update * Asset Count Update * Removed commented code and console statements * Removed console statement --- .../gmo-program-details.css | 21 +++ .../gmo-program-details.js | 161 +++++++++++++++++- scripts/assets.js | 7 +- 3 files changed, 180 insertions(+), 9 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 5c69faa2..2435fb67 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -691,6 +691,11 @@ body { &:not(:last-child) { margin-right: 5px; } + &.selected{ + background-color: #0096FF; + color: white; + } + } } @@ -1052,3 +1057,19 @@ body { overflow: hidden; text-overflow: ellipsis; } + +.selected { + background-color: #0096FF; + .scope{ + color: white; + font-weight: bold; /* Optional: to make the text bold */ + } + +} + +.clear-selection { + font-weight: normal; + 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 42efbb9f..96dda18e 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -64,7 +64,7 @@ export default async function decorate(block) { div({ id: 'tab1toggle', class: 'tabBtn active', 'data-target': 'tab1'}, 'Overview'), div({ id: 'tab2toggle', class: 'tabBtn', 'data-target': 'tab2'}, 'Deliverables'), div({ id: 'tab3toggle', class: 'tabBtn', 'data-target': 'tab3'}, 'Calendar'), - ); + ); // overview tab const overviewTab = div( @@ -105,11 +105,13 @@ export default async function decorate(block) { div( { id: 'deliverable-type', class: 'channel-scope-wrapper'}, span({ class: 'h3'}, 'Deliverable Type'), + div({ class: 'description'}, 'Select a deliverable type to display platform the assets were created for.'), div({ class: 'tags-wrapper'}), ), div( { id: 'platforms', class: 'channel-scope-wrapper'}, span({ class: 'h3'}, 'Platforms'), + div({ class: 'description'}, 'Select a platform to display deliverable type the assets were created for.'), div({ class: 'tags-wrapper'}), ), ), @@ -238,6 +240,10 @@ async function addProgramStats(block) { // for deliverable list const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; + let imageTest = {imageUrl : '', imageAltText: '', assetCount: 0}; + imageTest = await searchAsset(programName, programName.campaignName, 'email', 'appier'); + console.log('Image Test:', imageTest); + // for thumbnails let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; @@ -309,14 +315,60 @@ async function addProgramStats(block) { // additional dom updates buildProductCard(program); - buildFieldScopes('deliverable-type', uniqueDeliverableTypes, block); - buildFieldScopes('platforms', uniquePlatforms, block); // deliverables tab const deliverables = executeQuery(deliverableQueryString); document.querySelector('.page-heading').appendChild(artifactLinks); document.querySelector('.total-assets > .description').textContent = totalassets; + //Create a map to store the associations + const deliverableTypeToPlatformsMap = new Map(); + // Create a map to store the associations + const platformToDeliverableTypesMap = new Map(); + + // Populate the map + programData.data.deliverableList.items.forEach(item => { + const deliverableType = item.deliverableType; //deliverableType + const platforms = item.platforms; // array of platform strings + + platforms.forEach(async platform => { + let assetResult = {imageUrl : '', imageAltText: '', assetCount: 0}; + assetResult = await searchAsset(programName, programName.campaignName, deliverableType, platform); + let assetCount = assetResult.assetCount; + // deliverableType, platform, assetCount + if (!deliverableTypeToPlatformsMap.has(deliverableType)) { + // Case: If the deliverable type is not in the map, create a new entry with the platform added to the new map. + const deliverableTypesPlatformAssetCountMap = new Map(); + deliverableTypesPlatformAssetCountMap.set(platform, assetCount); + // Create a new entry for each deliverable type with the new map. + deliverableTypeToPlatformsMap.set(deliverableType, deliverableTypesPlatformAssetCountMap); + } else { + // Case: If the deliverable type is in the map, add the platform to the existing set. + const deliverableTypesPlatformAssetCountMap = deliverableTypeToPlatformsMap.get(deliverableType); + deliverableTypesPlatformAssetCountMap.set(platform, assetCount); + deliverableTypeToPlatformsMap.set(deliverableType, deliverableTypesPlatformAssetCountMap); + } + + if (!platformToDeliverableTypesMap.has(platform)) { + // Case: If the platform is not in the map, create a new entry with the deliverableType added to the new map. + const platformdeliverableTypesAssetCountMap = new Map(); + platformdeliverableTypesAssetCountMap.set(deliverableType, assetCount); + // Create a new entry for each platform with the new map. + platformToDeliverableTypesMap.set(platform, platformdeliverableTypesAssetCountMap); + } else { + // Case: If the platform is in the map, add the deliverableType to the existing set. + const platformdeliverableTypesAssetCountMap = platformToDeliverableTypesMap.get(platform); + platformdeliverableTypesAssetCountMap.set(deliverableType, assetCount); + platformToDeliverableTypesMap.set(platform, platformdeliverableTypesAssetCountMap); + } + }); + + }); + + buildProductCard(program); + buildFieldScopes('deliverable-type', uniqueDeliverableTypes, block, deliverableTypeToPlatformsMap); + buildFieldScopes('platforms', uniquePlatforms, block, platformToDeliverableTypesMap); + const table = buildTable(await deliverables).then(async (rows) => { return rows; }); @@ -452,7 +504,7 @@ function switchTab(tab) { } -async function buildFieldScopes(scopeTypeId, scopes, block) { +async function buildFieldScopes(scopeTypeId, scopes, block, associationMap) { if (scopes.length == 0) { block.querySelector(`#${scopeTypeId}.channel-scope-wrapper`).classList.add('inactive'); return; @@ -460,12 +512,105 @@ async function buildFieldScopes(scopeTypeId, scopes, block) { const scopesParent = block.querySelector(`#${scopeTypeId}.channel-scope-wrapper .tags-wrapper`); scopes.forEach(async (scope) => { if (scope == null || scope == undefined || scope == '') return; - const tag = document.createElement('div'); + const tag = document.createElement('button'); tag.classList.add('scope-tag'); tag.textContent = await lookupType(scope, scopeTypeId); - scopesParent.appendChild(tag); - }); -} + tag.id = scope; + scopesParent.appendChild(tag); + + let isSelected = false; + + tag.addEventListener('click', async () => { + if (isSelected) { + // Clear the selection + const allTags = document.querySelectorAll('.scope-tag'); + allTags.forEach(t => { + t.style.display = 'inline-block'; + t.classList.remove('selected'); // Remove the selected class + }); + const associatedItems = associationMap.get(scope); + + // Reset the associated buttons + associatedItems.forEach(async (_count, key) => { + const associatedTag = Array.from(allTags).find(t => t.id.includes(key)); + if (associatedTag) { + let alternateTextContent = await lookupType(associatedTag.id, (scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); + associatedTag.textContent = `${alternateTextContent}`; + associatedTag.style.display = 'inline-block'; + associatedTag.style.pointerEvents = 'auto'; // Make the clickable + } + }); + + tag.textContent = await lookupType(scope, scopeTypeId); + isSelected = false; + + // Reset the heading text content + let headingDiv = document.getElementById((scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); + // Fetch h3 class from headingDiv + let heading = headingDiv.querySelector('span.h3'); + + // Remove the appended heading.textContent + heading.textContent = heading.textContent.split(' (')[0]; + + // Remove the "Clear selection" hyperlink text next to the headingDiv + let clearSelection = document.getElementById('clear-selection'); + clearSelection.remove(); + } else { + // Hide all buttons + const allTags = document.querySelectorAll('.scope-tag'); + console.log('All Tags:', allTags); + allTags.forEach(t => t.style.display = 'none'); + + // 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)}`; + tag.style.display = 'inline-block'; + + // selectedTextContent = await lookupType(scope, scopeTypeId); + let totalAssociatedAssetCount = 0; + + // Show the associated buttons + associatedItems.forEach(async (count, key) => { + totalAssociatedAssetCount = totalAssociatedAssetCount + count; + const associatedTag = Array.from(allTags).find(t => t.id.includes(key)); + console.log('Associated Tag:', associatedTag); + let alternateTextContent = await lookupType(associatedTag.id, (scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); + if (associatedTag) { + associatedTag.textContent = `${await lookupType(scope, scopeTypeId)}: ${alternateTextContent} (${count})`; + associatedTag.style.display = 'inline-block'; + associatedTag.style.pointerEvents = 'none'; // Make the tag non-clickable + } + }); + // Add the selected class to the clicked button + tag.classList.add('selected'); + isSelected = true; + let alternateHeadingDiv = document.getElementById((scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); + // Fetch h3 class from headingDiv + let alternateHeading = alternateHeadingDiv.querySelector('span.h3'); + + // Append heading.textContent with number 3 + alternateHeading.textContent = `${alternateHeading.textContent} (${totalAssociatedAssetCount} ${totalAssociatedAssetCount > 1 ? 'assets' : 'asset'})`; + + let headingDiv = document.getElementById((scopeTypeId)); + + // Add a "Clear selection" hyperlink text next to the headingDiv + let clearSelection = document.createElement('a'); + clearSelection.id = 'clear-selection'; + clearSelection.classList.add('clear-selection'); + clearSelection.textContent = 'Clear selection'; + clearSelection.addEventListener('click', () => { + tag.click(); + }); + // Append the "Clear selection" hyperlink text next to the headingDiv as its first child + headingDiv.firstChild.appendChild(clearSelection); + + } + }); + }); + } function buildKPIList(program) { let kpiList = document.createElement('ul'); diff --git a/scripts/assets.js b/scripts/assets.js index 6fa27db1..864cc877 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -51,7 +51,7 @@ async function getUnderdevelopmentIcon() { * @throws {Error} If an HTTP error or network error occurs. */ -export async function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) { +export async function searchAsset(programName, campaignName, deliverableType = '', platform = '', imageWidth = 80) { const adminConfig = await getAdminConfig(); const deliveryURL = await initDeliveryEnvironment(); @@ -76,6 +76,11 @@ export async function searchAsset(programName, campaignName, deliverableType = ' if (deliverableType) { // Check if deliverableType is not null facetFilters.push('gmo-deliverableType :'+ deliverableType); } + + if (platform) { // Check if platform is not null + facetFilters.push('gmo-platform :'+ platform); + } + const data = { requests: [ { From bcc4c220fba7316cfd5c7ba18c243dd712e06a9c Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Tue, 19 Nov 2024 12:10:55 -0800 Subject: [PATCH 84/95] DXI- 29263 (#180) * DXI-29263- Make All 'Deliverable Types' and 'Platform' labels Interactive * Update gmo-program-details.js * Update gmo-program-details.js * Asset count update * Asset Count Update * Removed commented code and console statements * Removed console statement * null pointer exception fix update * resolving conflicts * resolving conflict * changes merge --- .../gmo-program-details.js | 69 +++++++++++++------ 1 file changed, 47 insertions(+), 22 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 96dda18e..c472cfb0 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -128,6 +128,7 @@ export default async function decorate(block) { ), ); + // deliverables tab const deliverablesTab = div( { id: 'tab2', class: 'deliverables tab inactive'}, @@ -328,13 +329,21 @@ async function addProgramStats(block) { // Populate the map programData.data.deliverableList.items.forEach(item => { - const deliverableType = item.deliverableType; //deliverableType + const deliverableType = item.deliverableType; //array of deliverableType const platforms = item.platforms; // array of platform strings - + // If deliverableType or platforms is null, skip the iteration + if (deliverableType === null || deliverableType === undefined || platforms === null || platforms === undefined) { + return; + } + //if deliverableType or Platforms has same value, show both buttons + if (deliverableType.value === 0 || platforms.value === 0) { + return; + } platforms.forEach(async platform => { let assetResult = {imageUrl : '', imageAltText: '', assetCount: 0}; assetResult = await searchAsset(programName, programName.campaignName, deliverableType, platform); let assetCount = assetResult.assetCount; + // deliverableType, platform, assetCount if (!deliverableTypeToPlatformsMap.has(deliverableType)) { // Case: If the deliverable type is not in the map, create a new entry with the platform added to the new map. @@ -522,6 +531,10 @@ async function buildFieldScopes(scopeTypeId, scopes, block, associationMap) { tag.addEventListener('click', async () => { if (isSelected) { + let headingDiv1 = document.getElementById((scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); + // Fetch all .scope-tag class from headingDiv1 + let alternativeTags = headingDiv1.querySelectorAll('.scope-tag'); + // Clear the selection const allTags = document.querySelectorAll('.scope-tag'); allTags.forEach(t => { @@ -529,17 +542,20 @@ 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 - associatedItems.forEach(async (_count, key) => { - const associatedTag = Array.from(allTags).find(t => t.id.includes(key)); - if (associatedTag) { - let alternateTextContent = await lookupType(associatedTag.id, (scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); - associatedTag.textContent = `${alternateTextContent}`; - associatedTag.style.display = 'inline-block'; - associatedTag.style.pointerEvents = 'auto'; // Make the clickable - } - }); + if (associatedItems) { + associatedItems.forEach(async (_count, key) => { + const associatedTag = Array.from(alternativeTags).find(t => t.id.includes(key)); + if (associatedTag) { + let alternateTextContent = await lookupType(associatedTag.id, (scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); + associatedTag.textContent = `${alternateTextContent}`; + associatedTag.style.display = 'inline-block'; + associatedTag.style.pointerEvents = 'auto'; // Make the clickable + } + }); + } tag.textContent = await lookupType(scope, scopeTypeId); isSelected = false; @@ -560,6 +576,11 @@ async function buildFieldScopes(scopeTypeId, scopes, block, associationMap) { 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); @@ -573,17 +594,21 @@ async function buildFieldScopes(scopeTypeId, scopes, block, associationMap) { let totalAssociatedAssetCount = 0; // Show the associated buttons - associatedItems.forEach(async (count, key) => { - totalAssociatedAssetCount = totalAssociatedAssetCount + count; - const associatedTag = Array.from(allTags).find(t => t.id.includes(key)); - console.log('Associated Tag:', associatedTag); - let alternateTextContent = await lookupType(associatedTag.id, (scopeTypeId === 'deliverable-type') ? 'platforms' : 'deliverable-type'); - if (associatedTag) { - associatedTag.textContent = `${await lookupType(scope, scopeTypeId)}: ${alternateTextContent} (${count})`; - associatedTag.style.display = 'inline-block'; - associatedTag.style.pointerEvents = 'none'; // Make the tag non-clickable - } - }); + if (associatedItems) { + 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'; + associatedTag.style.pointerEvents = 'none'; // Make the tag non-clickable + + } + }); + } // Add the selected class to the clicked button tag.classList.add('selected'); isSelected = true; From c4e6a6e8e690576e0039a69335da035df6784d9f Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Wed, 20 Nov 2024 12:27:23 -0500 Subject: [PATCH 85/95] Display autocollection info (#177) * handle auto collections * Change placement of program collection link * updates to string parsing, column name, css * adjust collection link display - add center truncation - expand collection link column and change name - shrink margin on other columns * remove hardcoded test name * update 'Final Asset' to 'Approved Asset (Workfront)' * update code to show full collection name * program link to open in new tab --- .../gmo-program-details.css | 35 +++++- .../gmo-program-details.js | 115 ++++++++++++++++-- scripts/shared-program.js | 3 +- 3 files changed, 134 insertions(+), 19 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 2435fb67..38d425b2 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -646,6 +646,9 @@ body { color: #505050; cursor: pointer; } + .collection-block { + width: fit-content; + } } .kpis-wrapper { @@ -776,26 +779,38 @@ body { } } } - .links-wrapper { + .links-wrapper, .collections-wrapper { display: flex; flex-direction: column; max-width: 90%; margin-right: 100px; margin-top: unset; - & .links { + .links, .collections { display: flex; justify-content: space-between; margin-top: 10px; } - & .campaign-link { + .campaign-link, .collection-link { font: normal normal normal 14px/21px Adobe Clean; letter-spacing: 0px; color: #0D66D0; + &:not(:last-child) { margin-right: 30px; } } } + .collections-wrapper { + margin-left: 100px; + } + .collection-link-wrapper { + display: flex; + flex-direction: column; + .collection-link { + display: block; + white-space: nowrap; + } + } } .total-assets-tooltip { @@ -1014,7 +1029,17 @@ body { width: 140px; } -.column4, .column5, .column6 { +.column4 { + width: 110px; + margin-right: 40px; +} + +.column5 { + width: 410px; + margin-right: 40px; +} + +.column6 { width: 110px; } @@ -1039,7 +1064,7 @@ body { .table-column { &:not(:last-child) { - margin-right: 85px; + margin-right: 45px; } } diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index c472cfb0..780ceb09 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -6,7 +6,7 @@ import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray, showLoadingOverlay, hideLoadingOverlay, div, - span, img + span, img, a } from '../../scripts/shared-program.js'; @@ -152,7 +152,7 @@ export default async function decorate(block) { div({ class: 'header table-column column2' }, 'Deliverable Type'), div({ class: 'header table-column column3' }, 'Platforms'), div({ class: 'header table-column column4' }, 'QA Files'), - div({ class: 'header table-column column5' }, 'Final Asset'), + div({ class: 'header table-column column5' }, 'Approved Collection Link(s)'), div({ class: 'header table-column column7' }, 'Status Update'), div({ class: 'header table-column column8' }, 'Completion Date'), div({ class: 'header table-column column9' }, 'Task Owner'), @@ -235,6 +235,7 @@ async function addProgramStats(block) { (encodedPath ? `${encodedSemi}path=${encodedPath}` : ''); const programData = await executeQuery(programQueryString); const program = programData.data.programList.items[0]; + const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); const bodyWrapper = document.querySelector('.main-body-wrapper'); @@ -302,6 +303,7 @@ async function addProgramStats(block) { const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea); const audiences = buildAudienceList(program); const artifactLinks = buildArtifactLinks(program); + const collections = buildProgramCollections(program); document.querySelector('.kpis-wrapper').appendChild(kpis); document.querySelector('.market-wrapper').appendChild(targetMarketAreas); @@ -321,6 +323,7 @@ async function addProgramStats(block) { const deliverables = executeQuery(deliverableQueryString); document.querySelector('.page-heading').appendChild(artifactLinks); document.querySelector('.total-assets > .description').textContent = totalassets; + if (collections) document.querySelector('.deliverables > .page-heading').appendChild(collections); //Create a map to store the associations const deliverableTypeToPlatformsMap = new Map(); @@ -421,6 +424,27 @@ function enableBackBtn(block, blockConfig) { }) } +function buildProgramCollections(program) { + const programCollections = program.programLevelcollectionLink; + if (programCollections) { + const collectionsElem = div( + { id: 'collections-wrapper', class: 'collections-wrapper' }, + div({ class: 'h3' }, 'Program Collection'), + ); + const collectionsLinksWrapper = div({ class: 'collections' }); + + programCollections.forEach((collection) => { + const collectionData = parseCollectionLink(collection); + const collectionLink = a({ class: 'collection-link', href: collectionData.link, target: '_blank' }, collectionData.name); + collectionsLinksWrapper.appendChild(collectionLink); + }); + collectionsElem.appendChild(collectionsLinksWrapper); + return collectionsElem; + } else { + return null; + } +} + function buildDriverField(driverName) { const driverSpan = document.createElement('span'); driverSpan.classList.add('driver-text'); @@ -871,23 +895,24 @@ async function buildHeaderRow(category, headerType, isInactive, matchCount) { return headerRow; } -async function buildTableRow(deliverableJson, kpi, createHidden) { +async function buildTableRow(deliverable, kpi, createHidden) { //look up friendly name for deliverable type - const typeLabel = await lookupType(deliverableJson.deliverableType, 'deliverable-type'); + const typeLabel = await lookupType(deliverable.deliverableType, 'deliverable-type'); const dataRow = document.createElement('div'); dataRow.classList.add('row', 'datarow'); if (createHidden) dataRow.classList.add('inactive'); - const status = (deliverableJson.deliverableStatusUpdate == null) ? "Not Available" : deliverableJson.deliverableStatusUpdate + "%"; - const statusPct = (deliverableJson.deliverableStatusUpdate == null) ? "0%" : deliverableJson.deliverableStatusUpdate + "%"; + const status = (deliverable.deliverableStatusUpdate == null) ? "Not Available" : deliverable.deliverableStatusUpdate + "%"; + const statusPct = (deliverable.deliverableStatusUpdate == null) ? "0%" : deliverable.deliverableStatusUpdate + "%"; + const assetLinks = createAssetLink(deliverable); dataRow.innerHTML = ` -
${checkBlankString(deliverableJson.deliverableName)}
+
${checkBlankString(deliverable.deliverableName)}
${checkBlankString(typeLabel)}
- ${deliverableJson.reviewLink ? 'QA Files ': "Not Available"} + ${deliverable.reviewLink ? 'QA Files ': "Not Available"}
- ${deliverableJson.linkedFolderLink ? 'Final Asset ': "Not Available"} + ${assetLinks.outerHTML}
@@ -902,12 +927,12 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
-
${dateFormat(deliverableJson.taskCompletionDate)}
- ${deliverableJson.previousTaskCompletionDate ? '
Revised from ' + deliverableJson.previousTaskCompletionDate + '
': ""} +
${dateFormat(deliverable.taskCompletionDate)}
+ ${deliverable.previousTaskCompletionDate ? '
Revised from ' + deliverable.previousTaskCompletionDate + '
': ""}
-
${checkBlankString(deliverableJson.driver)}
+
${checkBlankString(deliverable.driver)}
`; - createPlatformString(deliverableJson.platforms, dataRow); + createPlatformString(deliverable.platforms, dataRow); return dataRow; } @@ -925,6 +950,70 @@ async function createPlatformString(platforms, htmlElem) { htmlElem.querySelector('.column3.platforms').textContent = platformString; } +function createAssetLink(deliverable) { + const collections = deliverable.collectionLink; + const linkWrapper = div({ class: 'collection-link-wrapper '}); + if (collections) { + collections.forEach((collection) => { + const collectionData = parseCollectionLink(collection); + const parsedCollectionName = parseCollectionName(collectionData.fullName); + const collectionLink = a({ class: 'collection-link', href: collectionData.link, target: '_blank', title: collectionData.name }, parsedCollectionName); + linkWrapper.appendChild(collectionLink); + }); + } else { + const linkedFolder = deliverable.linkedFolderLink; + if (linkedFolder) { + const linkedFolderLink = a({ class: 'campaign-link', target: '_blank', href: linkedFolder }, 'Approved Assets (Workfront)'); + linkWrapper.appendChild(linkedFolderLink); + } else { + linkWrapper.textContent = 'Not Available'; + } + + } + return linkWrapper; +} + +function parseCollectionName(rawString) { + const collectionName = rawString; + const maxLength = 73; + const charsToShow = 34; + + if (collectionName.length > maxLength) { + const truncatedString = collectionName.slice(0, charsToShow) + "[...]" + collectionName.slice(-charsToShow); + return truncatedString; + } else { + return collectionName; + } +} + +function parseCollectionLink(collectionString) { + let collectionName, collectionPlatform, collectionCategory, collectionLink; + const fullNameSplit = collectionString.split(';'); + const splitString = collectionString.split(' | '); + + const fullName = (fullNameSplit.length > 1) ? fullNameSplit[0] : 'Collection'; + + if (splitString.length > 1) { + collectionName = splitString[0]; + collectionPlatform = splitString[1]; + [ collectionCategory, collectionLink ] = splitString[2].split(';'); + } else { + collectionName = 'Collection'; + collectionPlatform, collectionCategory = 'Not Available'; + collectionLink = splitString[0]; + } + + const parsedCollection = { + 'name': collectionName, + 'platform': collectionPlatform, + 'category': collectionCategory, + 'link': collectionLink, + 'fullName': fullName + } + + return parsedCollection; +} + function sortRows(rows) { const rowParent = rows; const nodes = Array.from(rowParent.childNodes); diff --git a/scripts/shared-program.js b/scripts/shared-program.js index f52b2e37..7c0d2dfc 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -156,4 +156,5 @@ export function domEl(tag, ...items) { */ export function div(...items) { return domEl('div', ...items); } export function span(...items) { return domEl('span', ...items); } -export function img(...items) { return domEl('img', ...items); } \ No newline at end of file +export function img(...items) { return domEl('img', ...items); } +export function a(...items) { return domEl('a', ...items); } \ No newline at end of file From 89969e5bbd8cc869c9f721cee8afbe079ec37d83 Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Fri, 22 Nov 2024 12:48:44 -0800 Subject: [PATCH 86/95] DXI-30009 (#181) * Export Asset Button * created 'Export CSV Button' and fetch data * button css changes --- .../gmo-program-details.css | 31 +++++++- .../gmo-program-details.js | 74 +++++++++++++++++-- icons/download-button.svg | 43 +++++++++++ 3 files changed, 139 insertions(+), 9 deletions(-) create mode 100644 icons/download-button.svg diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 38d425b2..a10283ed 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; @@ -693,6 +720,7 @@ body { margin-bottom: 5px; &:not(:last-child) { margin-right: 5px; + cursor: pointer; } &.selected{ background-color: #0096FF; @@ -1097,4 +1125,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 780ceb09..ff77c60e 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'), - ) + ), ), ); @@ -377,6 +387,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); @@ -566,7 +630,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) { @@ -598,17 +661,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)}`; @@ -622,9 +682,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'; @@ -659,7 +717,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 00000000..ddabb183 --- /dev/null +++ b/icons/download-button.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 52f2700fe3bb2ddb8d78369748cdde47a1cdef0c Mon Sep 17 00:00:00 2001 From: Samruddhi Date: Mon, 25 Nov 2024 10:21:28 -0800 Subject: [PATCH 87/95] update file to resolve conflicts Co-Authored-By: mathieu-lessard Co-Authored-By: Mathieu Lessard Co-Authored-By: Christopher Heintzman Co-Authored-By: Shivani Gupta <61603050+shiv-gup@users.noreply.github.com> Co-Authored-By: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-Authored-By: Samruddhi <150183547+staware30@users.noreply.github.com> Co-Authored-By: Tyrone Tse Co-Authored-By: Shivani gupta Co-Authored-By: Shivani gupta Co-Authored-By: shivanigupta --- blocks/gmo-program-details/gmo-program-details.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 56ae0d51..c6f39b0a 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -12,7 +12,6 @@ import { let blockConfig; let deliverableMappings, platformMappings, taskStatusMappings; -let deliverableMappings, platformMappings, taskStatusMappings; const queryVars = extractQueryVars(); const programName = queryVars.programName; const programID = queryVars.programID; From 3d654077003ba31df645d5b9ff4e51053f07fcbd Mon Sep 17 00:00:00 2001 From: Samruddhi Date: Mon, 25 Nov 2024 10:27:02 -0800 Subject: [PATCH 88/95] removed duplicates Co-Authored-By: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-Authored-By: Samruddhi <150183547+staware30@users.noreply.github.com> Co-Authored-By: Tyrone Tse Co-Authored-By: Shivani gupta Co-Authored-By: Shivani gupta Co-Authored-By: shivanigupta --- blocks/gmo-program-details/gmo-program-details.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index c6f39b0a..30823294 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -264,7 +264,6 @@ async function addProgramStats(block) { // build header let header = block.querySelector('.details-header-wrapper'); // build header - let header = block.querySelector('.details-header-wrapper'); if (!(program === undefined)) { const programHeader = buildHeader(program, queryVars).outerHTML; // Update the header with the actual data From eb17fef4e3b6582165299621fdbba43e47a6254a Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Mon, 25 Nov 2024 16:11:49 -0800 Subject: [PATCH 89/95] DXI- 30009 (#183) * Export Asset Button * created 'Export CSV Button' and fetch data * button css changes * minor change in csv code --- blocks/gmo-program-details/gmo-program-details.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 30823294..c68b1a18 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -424,7 +424,7 @@ async function addProgramStats(block) { csvContent += '\n'; // Add the grand total asset count row and bold the text - csvContent += `Total Asset Count,,${grandTotalAssetCount},\n`; + csvContent += `Total Unique Asset Count,,${grandTotalAssetCount},\n`; // Encode the CSV content const encodedUri = encodeURI(csvContent); @@ -731,7 +731,7 @@ async function buildFieldScopes(scopeTypeId, scopes, block, associationMap) { } }); }); - } + } function buildKPIList(program) { let kpiList = document.createElement('ul'); From 8ef73d810f7a8bceae8df61d3615e38efebed1cc Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Tue, 26 Nov 2024 11:05:51 -0500 Subject: [PATCH 90/95] remove merge artifacts --- blocks/gmo-program-details/gmo-program-details.js | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index c68b1a18..f48615c5 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -263,7 +263,6 @@ async function addProgramStats(block) { // build header let header = block.querySelector('.details-header-wrapper'); - // build header if (!(program === undefined)) { const programHeader = buildHeader(program, queryVars).outerHTML; // Update the header with the actual data @@ -458,10 +457,6 @@ async function addProgramStats(block) { // calendar tab buildCalendar(await deliverables, block, "year", await deliverableMappings); - // enable 'read more' buttons - // calendar tab - buildCalendar(await deliverables, block, "year", await deliverableMappings); - // enable 'read more' buttons block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { @@ -478,20 +473,11 @@ async function addProgramStats(block) { switchTab(event.target); }); - // decorate any new icons - // enable tab switching - block.querySelector('.tab-wrapper').addEventListener('click', (event) => { - switchTab(event.target); - }); - // decorate any new icons decorateIcons(block); // remove loading spinner hideLoadingOverlay(bodyWrapper); - - // remove loading spinner - hideLoadingOverlay(bodyWrapper); } function enableBackBtn(block, blockConfig) { From aa893030964a58ad00d38187c90f1d7a9d709ad4 Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Mon, 2 Dec 2024 12:57:38 -0800 Subject: [PATCH 91/95] DXI- 30198 (#185) * Search by ProgramName * filtered based on programName * search field text update --- blocks/gmo-program-header/gmo-program-header.js | 9 +++++---- blocks/gmo-program-list/gmo-program-list.js | 2 +- scripts/graphql.js | 8 ++++---- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index 00f8cc61..e1edebf0 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -1,5 +1,6 @@ import { decorateIcons } from '../../scripts/lib-franklin.js'; -import { graphqlCampaignByName } from '../../scripts/graphql.js'; +//import { graphqlCampaignByName } from '../../scripts/graphql.js'; +import { graphqlProgramByName } from '../../scripts/graphql.js'; import { statusMapping, productList, getMappingArray } from '../../scripts/shared-program.js'; export default async function decorate(block) { @@ -7,7 +8,7 @@ export default async function decorate(block) {
- +
@@ -80,9 +81,9 @@ export default async function decorate(block) { const value = this.value; if (value) { - const graphqlData = await graphqlCampaignByName(value); + const graphqlData = await graphqlProgramByName(value); //Get unique values - const searchItems = Array.from(new Set(graphqlData.data.programList.items.map(item => item.campaignName))); + const searchItems = Array.from(new Set(graphqlData.data.programList.items.map(item => item.programName))); autocomplete(value, searchItems); } else diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 163910c6..6a902fb6 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -57,7 +57,7 @@ document.addEventListener('gmoCampaignListBlock', async function() { const searchInputValue = document.getElementById('campaign-search').value; if (searchInputValue!=='') { - graphQLFilterArray.push({type:'campaignName', value:searchInputValue, operator:'='}) + graphQLFilterArray.push({type:'programName', value:searchInputValue, operator:'='}) } currentGraphqlFilter= generateFilterJSON(graphQLFilterArray); diff --git a/scripts/graphql.js b/scripts/graphql.js index 106d531a..37993c1f 100644 --- a/scripts/graphql.js +++ b/scripts/graphql.js @@ -83,12 +83,12 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) { } -export async function graphqlCampaignByName(campaignName) { - const queryName = 'getCampaignNameFilter'; - const encodedCampaignName = encodeURIComponent(campaignName); +export async function graphqlProgramByName(programName) { + const queryName = 'getProgramNameFilter'; + const encodedProgramName = encodeURIComponent(programName); const encodedSemiColon = encodeURIComponent(';'); //persisted query URLs have to be encoded together with the first semicolon - const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}campaignName=${encodedCampaignName}`; + const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}programName=${encodedProgramName}`; const jwtToken = await getBearerToken(); // Return the fetch promise chain so that it can be awaited outside From 97e0dacf77c242e1f56173ea1502f1b1f9c4e88e Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:28:35 -0500 Subject: [PATCH 92/95] Expand/Collapse All Deliverables (#186) * expand/collapse btns, css, js * forcing update of shared-program.js * remove comment * add tooltip to expand/collapse button --- .../gmo-program-details.css | 7 +++++ .../gmo-program-details.js | 30 +++++++++++++++++++ icons/AddCircle_18_N.svg | 11 +++++++ icons/RemoveCircle_18_N.svg | 11 +++++++ scripts/shared-program.js | 2 +- 5 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 icons/AddCircle_18_N.svg create mode 100644 icons/RemoveCircle_18_N.svg diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index a10283ed..9e6737d5 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -897,6 +897,9 @@ body { position: sticky; position: -webkit-sticky; top: 0; + & > .showhide-deliverables { + margin-left: 10px; + } } } @@ -1053,6 +1056,10 @@ body { width: 200px; } +.header.column1 { + margin-left: 16px; +} + .column3 { width: 140px; } diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index f48615c5..414c9722 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -140,6 +140,7 @@ export default async function decorate(block) { // deliverables tab + const expandCollapseTooltip = 'Expand/Collapse All Deliverable Tasks'; const deliverablesTab = div( { id: 'tab2', class: 'deliverables tab inactive'}, div( @@ -158,6 +159,8 @@ export default async function decorate(block) { { class: 'table-wrapper'}, div( { class: 'table-header' }, + img({ class: 'expand-deliverables showhide-deliverables', src: "/icons/AddCircle_18_N.svg", title: expandCollapseTooltip }), + img({ class: 'collapse-deliverables showhide-deliverables inactive', src: "/icons/RemoveCircle_18_N.svg", title: expandCollapseTooltip }), div({ class: 'header table-column column1' }, 'Deliverable Task Name'), div({ class: 'header table-column column2' }, 'Deliverable Type'), div({ class: 'header table-column column3' }, 'Platforms'), @@ -473,6 +476,18 @@ async function addProgramStats(block) { switchTab(event.target); }); + // enable expand/collapse all deliverables + block.querySelectorAll('.expand-deliverables, .collapse-deliverables').forEach((button) => { + button.addEventListener('click', (event) => { + const clickedBtn = event.currentTarget; + document.querySelector('.showhide-deliverables.inactive').classList.toggle('inactive'); + clickedBtn.classList.toggle('inactive'); + + const expand = clickedBtn.classList.contains('expand-deliverables'); + document.querySelectorAll('.row.collapsible').forEach((group) => toggleGroup(group, expand)); + }); + }) + // decorate any new icons decorateIcons(block); @@ -480,6 +495,21 @@ async function addProgramStats(block) { hideLoadingOverlay(bodyWrapper); } +function toggleGroup(group, expand) { + if (expand) { + group.querySelector('.icon-next').classList.add('inactive'); + group.querySelector('.icon-collapse').classList.remove('inactive'); + } else { + group.querySelector('.icon-next').classList.remove('inactive'); + group.querySelector('.icon-collapse').classList.add('inactive'); + } + Array.from(group.children).forEach((child) => { + if (child.classList.contains('row')) { + child.classList.toggle('inactive', !expand); + } + }); +}; + function enableBackBtn(block, blockConfig) { block.querySelector('.back-button').addEventListener('click', () => { const host = location.origin + getBaseConfigPath(); diff --git a/icons/AddCircle_18_N.svg b/icons/AddCircle_18_N.svg new file mode 100644 index 00000000..c292803b --- /dev/null +++ b/icons/AddCircle_18_N.svg @@ -0,0 +1,11 @@ + + + + + S AddCircle 18 N + + \ No newline at end of file diff --git a/icons/RemoveCircle_18_N.svg b/icons/RemoveCircle_18_N.svg new file mode 100644 index 00000000..75f78101 --- /dev/null +++ b/icons/RemoveCircle_18_N.svg @@ -0,0 +1,11 @@ + + + + + S RemoveCircle 18 N + + \ No newline at end of file diff --git a/scripts/shared-program.js b/scripts/shared-program.js index 7c0d2dfc..bf13f615 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -157,4 +157,4 @@ export function domEl(tag, ...items) { export function div(...items) { return domEl('div', ...items); } export function span(...items) { return domEl('span', ...items); } export function img(...items) { return domEl('img', ...items); } -export function a(...items) { return domEl('a', ...items); } \ No newline at end of file +export function a(...items) { return domEl('a', ...items); } From 5ffc3904c23f0743f73049e971dd071498044048 Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Thu, 5 Dec 2024 12:21:37 -0800 Subject: [PATCH 93/95] DXI- 30009 (#187) * Export Asset Button * created 'Export CSV Button' and fetch data * button css changes * minor change in csv code Co-Authored-By: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-Authored-By: Samruddhi <150183547+staware30@users.noreply.github.com> Co-Authored-By: Tyrone Tse Co-Authored-By: Shivani gupta Co-Authored-By: Shivani gupta Co-Authored-By: shivanigupta * duplicates Co-Authored-By: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-Authored-By: Samruddhi <150183547+staware30@users.noreply.github.com> Co-Authored-By: Tyrone Tse Co-Authored-By: Shivani gupta Co-Authored-By: Shivani gupta Co-Authored-By: shivanigupta * deleting extra brackets Co-Authored-By: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-Authored-By: Samruddhi <150183547+staware30@users.noreply.github.com> Co-Authored-By: Tyrone Tse Co-Authored-By: Shivani gupta Co-Authored-By: Shivani gupta Co-Authored-By: shivanigupta * Update in asset count label * Merge branch 'rc' of https://github.com/hlxsites/adobe-gmo into DXI-30009 * conflict resolved * conflict resolved-1 * removed duplicates * removed extra bracket * fixed conflict(declared twice) * removed duplicate --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: Shivani gupta Co-authored-by: shivanigupta --- blocks/gmo-program-details/gmo-program-details.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 414c9722..38a95a6c 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -426,7 +426,7 @@ async function addProgramStats(block) { csvContent += '\n'; // Add the grand total asset count row and bold the text - csvContent += `Total Unique Asset Count,,${grandTotalAssetCount},\n`; + csvContent += `Instances of assets deployed,,${grandTotalAssetCount},\n`; // Encode the CSV content const encodedUri = encodeURI(csvContent); From c7c95ba3e82318f0fdc0eeb47071106fe33bcf87 Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Thu, 5 Dec 2024 13:20:35 -0800 Subject: [PATCH 94/95] Dxi 30009 (#188) * Export Asset Button * created 'Export CSV Button' and fetch data * button css changes * minor change in csv code Co-Authored-By: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-Authored-By: Samruddhi <150183547+staware30@users.noreply.github.com> Co-Authored-By: Tyrone Tse Co-Authored-By: Shivani gupta Co-Authored-By: Shivani gupta Co-Authored-By: shivanigupta * duplicates Co-Authored-By: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-Authored-By: Samruddhi <150183547+staware30@users.noreply.github.com> Co-Authored-By: Tyrone Tse Co-Authored-By: Shivani gupta Co-Authored-By: Shivani gupta Co-Authored-By: shivanigupta * deleting extra brackets Co-Authored-By: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-Authored-By: Samruddhi <150183547+staware30@users.noreply.github.com> Co-Authored-By: Tyrone Tse Co-Authored-By: Shivani gupta Co-Authored-By: Shivani gupta Co-Authored-By: shivanigupta * Update in asset count label * Merge branch 'rc' of https://github.com/hlxsites/adobe-gmo into DXI-30009 * conflict resolved * conflict resolved-1 * removed duplicates * removed extra bracket * fixed conflict(declared twice) * removed duplicate * removing duplicate for product card --------- Co-authored-by: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Co-authored-by: Tyrone Tse Co-authored-by: Shivani gupta Co-authored-by: Shivani gupta Co-authored-by: shivanigupta --- blocks/gmo-program-details/gmo-program-details.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 38a95a6c..d7293111 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -330,7 +330,7 @@ async function addProgramStats(block) { document.querySelector('.product-value-wrapper > .paragraph').textContent = productValue; // additional dom updates - buildProductCard(program); + //buildProductCard(program); // deliverables tab const deliverables = executeQuery(deliverableQueryString); From 5be35af9a5107f30347cfe968ac4911371981aff Mon Sep 17 00:00:00 2001 From: Shivani gupta Date: Thu, 5 Dec 2024 17:25:08 -0500 Subject: [PATCH 95/95] resolving conflicts --- blocks/gmo-program-details/gmo-program-details.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 055cb765..736fedde 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -119,7 +119,6 @@ export default async function decorate(block) { { id: 'platforms', class: 'channel-scope-wrapper'}, span({ class: 'h3'}, 'Platforms'), div({ class: 'description'}, 'Select a platform to display deliverable type the assets were created for.'), - div({ class: 'description'}, 'Select a platform to display deliverable type the assets were created for.'), div({ class: 'tags-wrapper'}), ), ),