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] 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