Skip to content

Commit c1299aa

Browse files
Safo-SamsonSafo-Samson
committed
filter button done omggg
1 parent 191c7d3 commit c1299aa

File tree

4 files changed

+490
-73
lines changed

4 files changed

+490
-73
lines changed

‎Technical test-intern_template_updated_SE.html‎

Lines changed: 102 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -40,34 +40,62 @@
4040

4141
function filterFor2022(e) {
4242
// TODO: Task #2
43-
//building a query expression using advanced query
44-
const queryExpression = buildQueryExpression().addStringField({
45-
field: 'date',
46-
operator: 'isExactly',
47-
values: ['2022']
48-
}).toQuerySyntax();
4943

5044
//building a query expression using advanced query
51-
const advancedQuery = "@year==2022";
52-
53-
//building the static filter value for the static filter
54-
const staticFilterValue = buildStaticFilterValue({
55-
caption:'Content for 2022', //caption for the static filter value
56-
expression: queryExpression,
57-
});
45+
const advancedQuery = "@year==2022";
5846

59-
const staticFilter = buildStaticFilter(headlessEngine, {
60-
id:"fileType", // id for static filter props, eg fileType
61-
values: [staticFilterValue] //needs a static filter value StaticFilterValue[]
62-
})
47+
// loading all the actions needed to execute the search and log the events using the headless engine
48+
const advancedSearchQueryActionCreators = loadAdvancedSearchQueryActions(headlessEngine);
49+
const searchActionCreators = loadSearchActions(headlessEngine);
50+
const searchAnalyticsActionCreators = loadSearchAnalyticsActions(headlessEngine);
51+
52+
// using the loadAdvancedSearchQueryActions send the advanced query `aq` and `groupBy` parameters to the headless engine
53+
const payloadDispatchableAction = advancedSearchQueryActionCreators.updateAdvancedSearchQueries({
54+
"aq": advancedQuery,
55+
"groupBy": [
56+
{
57+
"field": "@year",
58+
"sortCriteria": "occurrences",
59+
}
60+
],
61+
});
6362

63+
// The static filter selection user clicks on the filter button to filter for 2022 content
64+
const dispatchableLogFilterSelectAction = searchAnalyticsActionCreators.logStaticFilterSelect({
65+
staticFilterId:"year",
66+
staticFilterValue:{
67+
caption: "Filter content for 2022",
68+
expression: advancedQuery,
69+
}
70+
});
6471

65-
// using the loadAdvancedSearchQueryActions to add the static filter to the search interface
66-
const advancedSearchQueryActionCreators = loadAdvancedSearchQueryActions(headlessEngine);
67-
const payloadDispatchableAction = advancedSearchQueryActionCreators.updateAdvancedSearchQueries(advancedQuery);
68-
headlessEngine.dispatch(payloadDispatchableAction);
72+
// Creating actions that executes a search query from the static filter.
73+
const dispatchableSearchAction = searchActionCreators.executeSearch(dispatchableLogFilterSelectAction);
6974

75+
//The event to log when a search interface loads for the first time.
76+
const dispatchableLogInterfaceLoad = searchAnalyticsActionCreators.logInterfaceLoad();
77+
//The event to log when the results sort criterion is changed
78+
const dispatchableLogSortChange = searchAnalyticsActionCreators.logResultsSort();
79+
//The event to log when a user provides negative feedback for a given smart snippet answer
80+
const dispatchableLogDislikeSmartSnippet = searchAnalyticsActionCreators.logDislikeSmartSnippet();
81+
//The event to log when a static filter value is selected.
82+
const dispatchableLogStaticFilterSelect = searchAnalyticsActionCreators.logStaticFilterSelect({
83+
staticFilterId:"year",
84+
staticFilterValue:{
85+
caption: "Filter content for 2022",
86+
expression: advancedQuery,
87+
}
88+
});
89+
90+
7091

92+
// dispatching the actions
93+
headlessEngine.dispatch(payloadDispatchableAction);
94+
headlessEngine.dispatch(dispatchableSearchAction);
95+
headlessEngine.dispatch(dispatchableLogSortChange);
96+
headlessEngine.dispatch(dispatchableLogDislikeSmartSnippet);
97+
headlessEngine.dispatch(dispatchableLogStaticFilterSelect);
98+
headlessEngine.dispatch(dispatchableLogInterfaceLoad);
7199
}
72100

73101
</script>
@@ -257,6 +285,7 @@
257285
right: 0;
258286
cursor: pointer;
259287
user-select: none;
288+
260289
}
261290

262291
.this-year-button:hover {
@@ -268,13 +297,37 @@
268297
color: white;
269298
}
270299
}
300+
301+
/* The styling I had to handle for the filter button to show on all screens */
302+
@media only screen and (max-width:1014px) {
303+
.this-year-button {
304+
border: 1px solid #1372ec;
305+
border-radius: 10px;
306+
margin: 10px 10px 10px -100px; /* negative margin to move the button to the left */
307+
text-align: center;
308+
padding: 10px;
309+
user-select: none;
310+
}
311+
312+
.this-year-button:hover {
313+
background: #e1e9f3;
314+
}
315+
316+
.this-year-button.active {
317+
background: #066bf0;
318+
color: white;
319+
}
320+
321+
}
322+
271323
</style>
272324
</head>
273325

274326
<body>
275327
<atomic-search-interface fields-to-include='["snrating","sncost","ytvideoduration","ytthumbnailurl"]'>
276328
<div class="header-bg"></div>
277-
<atomic-search-box></atomic-search-box>
329+
330+
<atomic-search-box ></atomic-search-box>
278331
<div class="this-year-button">Filter for 2022 Content</div>
279332
<atomic-facet-manager>
280333
<atomic-category-facet field="geographicalhierarchy" label="World Atlas" with-search> </atomic-category-facet>
@@ -297,8 +350,10 @@
297350
<atomic-color-facet field="filetype" label="Files" number-of-values="6" sort-criteria="occurrences"></atomic-color-facet>
298351

299352
<!-- building a facet for date so i can filter for 2022 content -->
300-
<atomic-timeframe-facet label="Timeframe" with-date-picker="true" max="31/12/2022" min="01/01/2022" >
301-
</atomic-timeframe-facet>
353+
<atomic-facet field="year" label="Year" ></atomic-facet>
354+
355+
<!-- <atomic-timeframe-facet label="Timeframe" with-date-picker="true" max="31/12/2022" min="01/01/2022" >
356+
</atomic-timeframe-facet> -->
302357

303358
</atomic-facet-manager>
304359
<atomic-breadbox></atomic-breadbox>
@@ -330,19 +385,36 @@
330385
/* Flexbox layout for the excerpt section to display the text and the image thumbnail */
331386
.excerpt-result-section {
332387
display: flex;
333-
}
388+
}
334389

335390
.excerpt-text {
336391
flex: 8; /* Take 80% of the space */
337392
margin-right: 0.95rem;
393+
338394
}
339395

340396
.excerpt-image {
341397
flex: 2; /* Take the remaining 20% of the space */
342398
height: 100%;
343399
width: 100%;
344-
object-fit: contain;
400+
object-fit: contain;
345401
}
402+
403+
#featured-result::part(result-badge-element) {
404+
background-color:black;
405+
color: white;
406+
}
407+
408+
#top-result::part(result-badge-element) {
409+
background-color:white;
410+
color: black;
411+
border: 1px solid black;
412+
}
413+
414+
#date-result {
415+
color: rgb(5, 1, 1);
416+
font-weight: 500;
417+
}
346418
</style>
347419

348420
<!-- ** The Visual Result Section -- this gives the video icon ** -->
@@ -354,15 +426,15 @@
354426
<!-- ** The Badge Result Section ** -->
355427
<atomic-result-section-badges>
356428
<atomic-field-condition>
357-
<atomic-result-badge if-defined="featured" label="featured"></atomic-result-badge>
358-
<atomic-result-badge if-defined="top result" label="top result"></atomic-result-badge>
429+
<atomic-result-badge if-defined="featured" label="featured" id="featured-result"></atomic-result-badge>
430+
<atomic-result-badge if-defined="top result" label="top result" id="top-result"></atomic-result-badge>
359431
</atomic-field-condition>
360432
</atomic-result-section-badges>
361433

362434
<!-- ** The Action Result Section for date ** -->
363435
<atomic-result-section-actions>
364-
<atomic-field-condition if-defined="date">
365-
<atomic-result-date></atomic-result-date>
436+
<atomic-field-condition if-defined="date" >
437+
<atomic-result-date id="date-result" ></atomic-result-date>
366438
</atomic-field-condition>
367439
</atomic-result-section-actions>
368440

‎assets/css/styles.css‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -243,18 +243,41 @@ display: inline-block;
243243
***/
244244

245245
/* Flexbox layout for the excerpt section to display the text and the image thumbnail */
246-
.excerpt-result-section {
247-
display: flex;
248-
}
249-
250-
.excerpt-text {
251-
flex: 8; /* Take 80% of the space */
252-
margin-right: 0.95rem;
253-
}
254-
255-
.excerpt-image {
256-
flex: 2; /* Take the remaining 20% of the space */
257-
height: 100%;
258-
width: 100%;
259-
object-fit: contain;
260-
}
246+
247+
.field-label {
248+
font-weight: bold;
249+
margin-right: 0.25rem;
250+
}
251+
252+
/* Flexbox layout for the excerpt section to display the text and the image thumbnail */
253+
.excerpt-result-section {
254+
display: flex;
255+
}
256+
257+
.excerpt-text {
258+
flex: 8; /* Take 80% of the space */
259+
margin-right: 0.95rem;
260+
}
261+
262+
.excerpt-image {
263+
flex: 2; /* Take the remaining 20% of the space */
264+
height: 100%;
265+
width: 100%;
266+
object-fit: contain;
267+
}
268+
269+
#featured-result::part(result-badge-element) {
270+
background-color:black;
271+
color: white;
272+
}
273+
274+
#top-result::part(result-badge-element) {
275+
background-color:white;
276+
color: black;
277+
border: 1px solid black;
278+
}
279+
280+
#date-result {
281+
color: rgb(5, 1, 1);
282+
font-weight: 500;
283+
}

‎assets/js/main.js‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import {
22
loadAdvancedSearchQueryActions,
33
loadSearchActions,
44
loadSearchAnalyticsActions,
5+
buildStaticFilter,
6+
buildStaticFilterValue,
7+
buildQueryExpression,
58
} from "https://static.cloud.coveo.com/atomic/v2/headless/headless.esm.js";
69

710
let headlessEngine;
@@ -26,37 +29,38 @@ let headlessEngine;
2629

2730
function filterFor2022(e) {
2831
// TODO: Task #2
29-
// Create a new query to filter for 2022
30-
// Execute the new query
31-
// Hint: Use the headless engine to create a new query
32-
// Hint: Use the headless engine to execute the new query
33-
// Hint: Use the headless engine to execute the new query
34-
const query = headlessEngine.state.query;
35-
const newQuery = query.setFilter("date", "2022");
36-
headlessEngine.dispatch(loadSearchActions.executeSearch(newQuery));
37-
38-
// Create an advanced query to filter for content from the year 2022
39-
const advancedQuery = "@year==2022";
4032

41-
// Get the current state of the search interface
42-
const state = headlessEngine.state;
33+
//building a query expression using advanced query
34+
const queryExpression = buildQueryExpression()
35+
.addStringField({
36+
field: "year",
37+
operator: "isExactly",
38+
values: ["2022"],
39+
})
40+
.toQuerySyntax();
4341

44-
// Apply the advanced query to the search state
45-
const updatedState = loadAdvancedSearchQueryActions.applyAdvancedSearchQuery(
46-
state,
47-
advancedQuery
48-
);
42+
//building a query expression using advanced query
43+
const advancedQuery = "@year==2022";
4944

50-
// Update the search state
51-
headlessEngine.setState(updatedState);
45+
//building the static filter value for the static filter
46+
const staticFilterValue = buildStaticFilterValue({
47+
caption: "Content for 2022", //caption for the static filter value
48+
expression: queryExpression,
49+
});
50+
51+
const staticFilter = buildStaticFilter(headlessEngine, {
52+
id: "year", // id for static filter props, eg fileType
53+
values: [staticFilterValue], //needs a static filter value StaticFilterValue[]
54+
});
5255

53-
// Log the appropriate analytics event (e.g., filter selection)
54-
loadSearchAnalyticsActions.logSearchEvent(
55-
headlessEngine,
56-
"FilterFor2022",
57-
"StaticFilterSelection"
58-
);
56+
staticFilter.toggleSelect("2022");
5957

60-
// Execute the search with the updated state
61-
loadSearchActions.executeSearch(headlessEngine);
58+
// using the loadAdvancedSearchQueryActions to add the static filter to the search interface
59+
const advancedSearchQueryActionCreators =
60+
loadAdvancedSearchQueryActions(headlessEngine);
61+
const payloadDispatchableAction =
62+
advancedSearchQueryActionCreators.updateAdvancedSearchQueries(
63+
advancedQuery
64+
);
65+
headlessEngine.dispatch(payloadDispatchableAction);
6266
}

0 commit comments

Comments
 (0)