Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-152988 - filter and sort labels not authorable from the block #35

Merged
merged 4 commits into from
Jun 25, 2024
Merged

MWPW-152988 - filter and sort labels not authorable from the block #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a89ded2
MWPW-152988 - filter and sort labels not authorable from the block
draganalilly021 Jun 25, 2024
3b23020
MWPW-152988 - populateLocalizedTextFromListItems moved to utils
draganalilly021 Jun 25, 2024
f64021b
MWPW-152988 - unit test fix
draganalilly021 Jun 25, 2024
c39d773
MWPW-152988 - unit test fix2
draganalilly021 Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion eds/blocks/knowledge-base-overview/knowledge-base-overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getLibs, replaceText, getConfig } from './../../scripts/utils.js';
import { getLibs, replaceText, getConfig, populateLocalizedTextFromListItems } from './../../scripts/utils.js';
import { KnowledgeBaseOverview } from './KnowledgeBaseOverview.js';

function declareKnowledgeBaseOverview() {
Expand Down Expand Up @@ -40,6 +40,8 @@ export default async function init(el) {
'{{search}}': 'Search',
};

populateLocalizedTextFromListItems(el, localizedText);

const deps = await Promise.all([
localizationPromises(localizedText, config),
import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
Expand Down
6 changes: 4 additions & 2 deletions eds/blocks/partner-news/partner-news.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getLibs, replaceText, getConfig } from './../../scripts/utils.js';
import { getLibs, replaceText, getConfig, populateLocalizedTextFromListItems } from './../../scripts/utils.js';
import { PartnerNews } from './PartnerNews.js';

function declarePartnerNews() {
Expand Down Expand Up @@ -38,9 +38,11 @@ export default async function init(el) {
'{{previous-month}}': 'Previous month',
'{{results}}': 'Results',
'{{search}}': 'Search',
'{{show-all}}': 'Show all'
'{{show-all}}': 'Show all',
};

populateLocalizedTextFromListItems(el, localizedText);

const deps = await Promise.all([
localizationPromises(localizedText, config),
import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
Expand Down
36 changes: 17 additions & 19 deletions eds/components/PartnerCards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,35 +123,33 @@ export class PartnerCards extends LitElement {
this.blockData.title = titleEl.innerText.trim();
},
'filter': (cols) => {
const [filterKeyEl, filterValueEl, filterTagsKeysEl, filterTagsValueEl] = cols;
const filterKey = filterKeyEl.innerText.trim().toLowerCase().replaceAll(' ', '-');
const filterValue = filterValueEl.innerText.trim();
const filterTagsKeys = Array.from(filterTagsKeysEl.querySelectorAll('li'), (li) => li.innerText.trim().toLowerCase());
const filterTagsValue = Array.from(filterTagsValueEl.querySelectorAll('li'), (li) => li.innerText.trim());
const [filterKeyEl, filterTagsKeysEl] = cols;
const filterKey = filterKeyEl.innerText.trim().toLowerCase().replace(/ /g, '-');
const filterTagsKeys = Array.from(filterTagsKeysEl.querySelectorAll('li'), (li) => li.innerText.trim().toLowerCase().replace(/ /g, '-'));

if (!filterKey || !filterTagsKeys.length) return;

let filterObj = {
key: filterKey,
value: filterValue,
tags: filterTagsKeys.map((tagKey, tagIndex) => ({
key: tagKey.replaceAll(' ', '-'),
parentKey: filterKey,
value: filterTagsValue[tagIndex],
checked: false
value: this.blockData.localizedText[`{{${filterKey}}}`],
tags: filterTagsKeys.map((tagKey) => ({
key: tagKey,
parentKey: filterKey,
value: this.blockData.localizedText[`{{${tagKey}}}`],
checked: false
}))
};
this.blockData.filters.push(filterObj);
},
'sort': (cols) => {
const [sortKeysEl, sortValuesEl] = cols;
const sortKeys = Array.from(sortKeysEl.querySelectorAll('li'), (li) => li.innerText.trim().toLowerCase());
const sortValues = Array.from(sortValuesEl.querySelectorAll('li'), (li) => li.innerText.trim());
const [sortKeysEl] = cols;
const sortKeys = Array.from(sortKeysEl.querySelectorAll('li'), (li) => li.innerText.trim().toLowerCase().replace(/ /g, '-'));

const sortItems = sortKeys.map((sortKey, sortIndex) => ({
key: sortKey.endsWith('_default') ? sortKey.slice(0, -8) : sortKey,
value: sortValues[sortIndex]
}));
const sortItems = sortKeys.map((sortKey) => {
const key = sortKey.endsWith('_default') ? sortKey.slice(0, -8) : sortKey;
const value = this.blockData.localizedText[`{{${key}}}`];
return { key, value };
});

const defaultKey = sortKeys.find(key => key.endsWith('_default')).slice(0, -8) || sortKeys[0];
const defaultValue = sortItems.find(e => e.key === defaultKey).value;
Expand All @@ -173,7 +171,7 @@ export class PartnerCards extends LitElement {
const rows = Array.from(this.blockData.tableData);
rows.forEach((row) => {
const cols = Array.from(row.children);
const rowTitle = cols[0].innerText.trim().toLowerCase().replaceAll(' ', '-');
const rowTitle = cols[0].innerText.trim().toLowerCase().replace(/ /g, '-');
const colsContent = cols.slice(1);
if (blockDataActions[rowTitle]) blockDataActions[rowTitle](colsContent);
});
Expand Down
9 changes: 9 additions & 0 deletions eds/scripts/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,12 @@ export { createTag, localizeLink, getConfig };

const { replaceText } = await import(`${miloLibs}/features/placeholders.js`);
export { replaceText };

export function populateLocalizedTextFromListItems(el, localizedText) {
const liList = Array.from(el.querySelectorAll('li'));
liList.forEach(liEl => {
let liContent = liEl.innerText.trim().toLowerCase().replace(/ /g, '-');
if (liContent.endsWith('_default')) liContent = liContent.slice(0, -8);
localizedText[`{{${liContent}}}`] = liContent;
});
}
130 changes: 77 additions & 53 deletions test/blocks/knowledge-base-overview/mocks/body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,85 +2,109 @@
<div>
<div>Title</div>
<div>Sample Title for Card Collection</div>
<div></div>
</div>
<div>
<div>Cards per page</div>
<div>6</div>
<div></div>
</div>
<div>
<div>Filter</div>
<div>Audience</div>
<div>Audience</div>
<div>
<ol>
<li>Marketing</li>
<li>Sales</li>
<li>Practice Lead</li>
<li>Technical</li>
</ol>
<ul>
<li>Applications</li>
</ul>
</div>
<div>
<ol>
<li>Marketing</li>
<li>Sales</li>
<li>Practice Lead</li>
<li>Technical</li>
</ol>
<ul>
<li>sign</li>
<li>advertising-cloud</li>
<li>analytics</li>
<li>audience-manager</li>
<li>campaign</li>
<li>commerce</li>
<li>customer-journey-analytics</li>
<li>document-cloud</li>
<li>document-services</li>
<li>experience-cloud</li>
<li>experience-manager</li>
<li>experience-platform</li>
<li>journey-optimizer</li>
<li>marketo-engage</li>
<li>microsoft</li>
<li>real-time-cdp</li>
<li>target</li>
<li>workfront</li>
</ul>
</div>
</div>
<div>
<div>Filter</div>
<div>Region</div>
<div>Region</div>
<div>
<ol>
<li>Americas</li>
<li>Asia Pacific</li>
<li>EMEA</li>
<li>Japan</li>
</ol>
<ul>
<li>audience</li>
</ul>
</div>
<div>
<ol>
<li>Americas</li>
<li>Asia Pacific</li>
<li>Europe, Middle East &#x26; Africa</li>
<li>Japan</li>
</ol>
<ul>
<li>marketing</li>
<li>sales</li>
<li>practice-lead</li>
<li>technical</li>
</ul>
</div>
</div>
<div>
<div>Filter</div>
<div>product</div>
<div>Product</div>
<div>
<ol>
<li>adobe-experience-manager</li>
<li>adobe-analytics</li>
<li>adobe-target</li>
</ol>
<ul>
<li>region</li>
</ul>
</div>
<div>
<ol>
<li>Experience manager</li>
<li>Analytics</li>
<li>Target</li>
</ol>
<ul>
<li>americas</li>
<li>asia-pacific</li>
<li>emea</li>
<li>japan</li>
</ul>
</div>
</div>
<div>
<div>Sort</div>
<div>Filter</div>
<div>
<ol>
<li>newest_default</li>
<li>oldest</li>
<li>a-z</li>
<li>z-a</li>
</ol>
<ul>
<li>topic</li>
</ul>
</div>
<div>
<ol>
<li>Date: newest</li>
<li>Date: oldest</li>
<li>Title: A-Z</li>
<li>Title: Z-A</li>
</ol>
<ul>
<li>analyst-reports</li>
<li>amplify</li>
<li>certification-credentials</li>
<li>enablement-training</li>
<li>events</li>
<li>executive-insights</li>
<li>industries</li>
<li>marketing</li>
<li>program-benefits</li>
<li>programs-contests</li>
<li>product-releases</li>
<li>selling</li>
<li>solutions</li>
<li>specialization</li>
</ul>
</div>
</div>
<div>
<div>Sort</div>
<div>
<ul>
<li>newest</li>
<li>oldest_default</li>
</ul>
</div>
<div></div>
</div>
</div>
Loading
Loading