Partner news block

eds/blocks/knowledge-base-overview/KnowledgeBaseOverview.js

@@ -0,0 +1,86 @@
+import { getLibs } from './../../scripts/utils.js';
+const miloLibs = getLibs();
+const { html, css, repeat } = await import (`${miloLibs}/deps/lit-all.min.js`);
+import { numericPaginationStyles } from './../../components/PartnerCardsStyles.js';
+import { PartnerCards } from "./../../components/PartnerCards.js";
+
+export class KnowledgeBaseOverview extends PartnerCards {
+
+  static properties = {
+    ...PartnerCards.properties,
+    totalPages: { type: Number },
+  };
+
+  constructor() {
+    super();
+    this.totalPages = 0;
+  }
+
+  static styles = [
+    PartnerCards.styles,
+    css`${numericPaginationStyles}`
+  ];
+
+  get paginationList() {
+    if (!this.cards.length) return;
+
+    const min = 1;
+    this.totalPages = Math.ceil(this.cards.length / this.cardsPerPage);
+
+    const pagesNumArray = Array.from({ length: this.totalPages }, (_, i) => i + min);
+    return html`${repeat(
+      pagesNumArray,
+      (pageNum) => pageNum,
+      (pageNum) => html`<button
+        class="page-btn ${this.paginationCounter === pageNum ? 'selected' : ''}"
+        @click="${() => this.handlePageNum(pageNum)}"
+        aria-label="${this.blockData.localizedText['{{page}}']} ${pageNum}">
+        ${pageNum}
+      </button>`
+    )}`;
+  }
+
+  get pagination() {
+    return html `
+      <div class="pagination-pages-list">
+        <button class="pagination-prev-btn ${this.paginationCounter === 1 || !this.paginatedCards?.length ? 'disabled' : ''}" @click="${this.handlePrevPage}" aria-label="${this.blockData.localizedText['{{previous-page}}']}">
+          ${this.blockData.localizedText['{{prev}}']}</button>
+        ${this.paginationList}
+        <button class="pagination-next-btn ${this.paginationCounter === this.totalPages || !this.paginatedCards?.length ? 'disabled': ''}" @click="${this.handleNextPage}" aria-label="${this.blockData.localizedText['{{next-page}}']}">
+          ${this.blockData.localizedText['{{next}}']}</button>
+      </div>
+    `;
+  }
+
+  handleActions() {
+    super.handleActions();
+    this.updatePaginatedCards();
+  }
+
+  updatePaginatedCards() {
+    const startIndex = (this.paginationCounter - 1) * this.cardsPerPage;
+    const endIndex = this.paginationCounter * this.cardsPerPage;
+    this.paginatedCards = this.cards.slice(startIndex, endIndex);
+  }
+
+  handlePageNum(pageNum) {
+    if (this.paginationCounter !== pageNum) {
+      this.paginationCounter = pageNum;
+      this.handleActions();
+    }
+  }
+
+  handlePrevPage() {
+    if ( this.paginationCounter > 1 ) {
+      this.paginationCounter--;
+      this.handleActions();
+    }
+  }
+
+  handleNextPage() {
+    if (this.paginationCounter < this.totalPages) {
+      this.paginationCounter++;
+      this.handleActions();
+    }
+  }
+}

eds/blocks/knowledge-base-overview/knowledge-base-overview.js

@@ -0,0 +1,133 @@
+import { getLibs, replaceText, getConfig } from './../../scripts/utils.js';
+import { KnowledgeBaseOverview } from './KnowledgeBaseOverview.js';
+
+function declareKnowledgeBaseOverview() {
+  if (customElements.get('knowledge-base-overview')) return;
+  customElements.define('knowledge-base-overview', KnowledgeBaseOverview);
+}
+
+async function localizationPromises(localizedText, config) {
+  return Promise.all(Object.keys(localizedText).map(async (key) => {
+    const value = await replaceText(key, config);
+    if (value.length) localizedText[key] = value;
+  }));
+}
+
+export default async function init(el) {
+  performance.mark('knowledge-base-overview:start');
+
+  const miloLibs = getLibs();
+  const config = getConfig();
+
+  const sectionIndex = el.parentNode.getAttribute('data-idx');
+
+  let blockData = {
+    'title': '',
+    'filters': [],
+    'sort': {
+      'default': {},
+      items: []
+    },
+    'cardsPerPage': 9
+  }
+
+  let localizedText = {
+    '{{apply}}': 'Apply',
+    '{{back}}': 'Back',
+    '{{clear-all}}': 'Clear all',
+    '{{filter}}': 'Filter',
+    '{{filter-by}}': 'Filter by',
+    '{{filters}}': 'Filters',
+    '{{next}}': 'Next',
+    '{{next-page}}': 'Next Page',
+    '{{no-results-description}}': 'Try checking your spelling or broadening your search.',
+    '{{no-results-title}}': 'No Results Found',
+    '{{of}}': 'Of',
+    '{{page}}': 'Page',
+    '{{prev}}': 'Prev',
+    '{{previous-page}}': 'Previous Page',
+    '{{results}}': 'Results',
+    '{{search}}': 'Search',
+  };
+
+  const blockDataActions = {
+    'title': (cols) => {
+      const [titleEl] = cols;
+      blockData.title = titleEl.innerText.trim();
+    },
+    'filter': (cols) => {
+      const [filterKeyEl, filterValueEl, filterTagsKeysEl, filterTagsValueEl] = cols;
+      const filterKey = filterKeyEl.innerText.trim().toLowerCase();
+      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());
+
+      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
+        }))
+      };
+      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 sortItems = sortKeys.map((sortKey, sortIndex) => ({
+        key: sortKey.endsWith('_default') ? sortKey.slice(0, -8) : sortKey,
+        value: sortValues[sortIndex]
+      }));
+
+      const defaultKey = sortKeys.find(key => key.endsWith('_default')).slice(0, -8) || sortKeys[0];
+      const defaultValue = sortItems.find(e => e.key === defaultKey).value;
+
+      blockData.sort = { items: sortItems, default: { key: defaultKey, value: defaultValue }};
+    },
+    'cards per page': (cols) => {
+      const [cardsPerPageEl] = cols;
+      const cardsPerPageStr = cardsPerPageEl.innerText.trim();
+      const cardsPerPageNum = parseInt(cardsPerPageStr);
+      if (cardsPerPageNum) blockData.cardsPerPage = cardsPerPageNum;
+    }
+  }
+
+  const rows = Array.from(el.children);
+  rows.forEach((row) => {
+    const cols = Array.from(row.children);
+    const rowTitle = cols[0].innerText.trim().toLowerCase();
+    const colsContent = cols.slice(1);
+    if (blockDataActions[rowTitle]) blockDataActions[rowTitle](colsContent);
+  })
+
+  const deps = await Promise.all([
+    localizationPromises(localizedText, config),
+    import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/search.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/button.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/progress-circle.js`),
+  ]);
+
+  declareKnowledgeBaseOverview();
+
+  blockData.localizedText = localizedText;
+
+  const app = document.createElement('knowledge-base-overview');
+  app.className = 'content knowledge-base-overview-wrapper';
+  app.blockData = blockData;
+  app.setAttribute('data-idx', sectionIndex);
+  el.replaceWith(app);
+
+  await deps;
+  performance.mark('knowledge-base-overview:end');
+  performance.measure('knowledge-base-overview block', 'knowledge-base-overview:start', 'knowledge-base-overview:end');
+  return app;
+}