`
From 27e2467338e964b10fc43b410d008e4033f80e3c Mon Sep 17 00:00:00 2001
From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com>
Date: Thu, 2 May 2024 15:34:20 -0500
Subject: [PATCH 2/2] 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
---
.../gmo-campaign-header.css | 36 ++++
.../gmo-campaign-header.js | 186 +++++++++++++-----
blocks/gmo-campaign-list/gmo-campaign-list.js | 67 +++++--
scripts/graphql.js | 116 +++++++++--
4 files changed, 325 insertions(+), 80 deletions(-)
diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.css b/blocks/gmo-campaign-header/gmo-campaign-header.css
index 00343bc9..ac30d581 100644
--- a/blocks/gmo-campaign-header/gmo-campaign-header.css
+++ b/blocks/gmo-campaign-header/gmo-campaign-header.css
@@ -15,6 +15,7 @@
border-radius: 4px;
display: flex;
align-items: center;
+ position: relative; /* Added to be the anchor for absolute positioning for autocomplete feature*/
& > .icon {
background-color: #FFF;
height: 14px;
@@ -161,3 +162,38 @@
}
}
}
+
+/* Add the following for autocomplete styling */
+
+.autocomplete-items {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ border: 1px solid #cccccc;
+ border-top: none;
+ z-index: 10;
+ background: #ffffff;
+ overflow-y: auto;
+ max-height: 200px;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.autocomplete-items div {
+ padding: 10px 15px;
+ cursor: pointer;
+ border-bottom: 1px solid #f0f0f0;
+ font-size: 14px; /* Adjust the font-size as needed */
+ color: #333; /* Adjust the text color as needed */
+ line-height: 1.4; /* Adjust line-height for better readability if necessary */
+}
+
+.autocomplete-items div:hover {
+ background-color: #e9e9e9;
+}
+
+.autocomplete-items div:last-child {
+ border-bottom: none;
+}
diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.js b/blocks/gmo-campaign-header/gmo-campaign-header.js
index d9961bdd..6e4e96cb 100644
--- a/blocks/gmo-campaign-header/gmo-campaign-header.js
+++ b/blocks/gmo-campaign-header/gmo-campaign-header.js
@@ -1,4 +1,5 @@
import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { graphqlQueryNameList, graphqlCampaignByName } from '../../scripts/graphql.js';
export default async function decorate(block) {
block.innerHTML = `
@@ -6,21 +7,19 @@ export default async function decorate(block) {