@@ -342,7 +358,7 @@ export default class PartnerCards extends LitElement {
`;
+ /* eslint-enable indent */
},
)}`;
}
@@ -389,6 +406,7 @@ export default class PartnerCards extends LitElement {
`,
)}`;
+ // eslint-disable-next-line consistent-return
return { htmlContent, tagsCount: extractedTags.length };
}
@@ -413,6 +431,7 @@ export default class PartnerCards extends LitElement {
element.classList.toggle('expanded');
}
+ // eslint-disable-next-line class-methods-use-this
toggleFilter(clickedFilter) {
clickedFilter.classList.toggle('expanded');
}
@@ -432,28 +451,33 @@ export default class PartnerCards extends LitElement {
if (this.blockData.sort.items.length) this.handleSortAction();
if (this.blockData.filters.length) this.handleFilterAction();
this.additionalActions();
+ // eslint-disable-next-line no-return-assign
this.cards.forEach((card, index) => card.orderNum = index + 1);
+ this.updatePaginatedCards();
}
+ // eslint-disable-next-line class-methods-use-this
additionalActions() {}
handleResetActions() {
this.searchTerm = '';
this.selectedFilters = {};
this.blockData.filters.forEach((filter) => {
+ // eslint-disable-next-line no-return-assign
filter.tags.forEach((tag) => tag.checked = false);
this.urlSearchParams.delete(filter.key);
});
- this.urlSearchParams.delete('filters');
this.additionalResetActions();
this.paginationCounter = 1;
this.handleActions();
- this.handleUrlSearchParams();
+ if (this.blockData.filters.length) this.handleUrlSearchParams();
}
+ // eslint-disable-next-line class-methods-use-this
additionalResetActions() {}
handleSearchAction() {
+ // eslint-disable-next-line max-len
this.cards = this.allCards.filter((card) => card.contentArea?.title.toLowerCase().includes(this.searchTerm)
|| card.contentArea?.description.toLowerCase().includes(this.searchTerm));
}
@@ -496,10 +520,13 @@ export default class PartnerCards extends LitElement {
if ('id' in firstObj && 'version' in firstObj) {
cardArbitraryArr = cardArbitraryArr.slice(1);
}
+ // eslint-disable-next-line consistent-return
return selectedFiltersKeys.every((key) => cardArbitraryArr.some((arbitraryTag) => {
+ if (!arbitraryTag.value || !arbitraryTag.key) return false;
const arbitraryTagKeyStr = arbitraryTag.key.trim().toLowerCase().replaceAll(' ', '-');
const arbitraryTagValueStr = arbitraryTag.value.trim().toLowerCase().replaceAll(' ', '-');
if (key === arbitraryTagKeyStr) {
+ // eslint-disable-next-line max-len
return this.selectedFilters[key].some((selectedTag) => selectedTag.key === arbitraryTagValueStr);
}
return false;
@@ -562,6 +589,7 @@ export default class PartnerCards extends LitElement {
tag.checked = false;
const { key: tagKey, parentKey: filterKey } = tag;
+ // eslint-disable-next-line max-len
const updatedFilterTags = [...this.selectedFilters[filterKey]].filter((filterTag) => filterTag.key !== tagKey);
if (updatedFilterTags.length) {
@@ -591,6 +619,7 @@ export default class PartnerCards extends LitElement {
this.blockData.filters.forEach((filter) => {
if (filter.key === filterKey) {
+ // eslint-disable-next-line no-return-assign
filter.tags.forEach((tag) => tag.checked = false);
}
});
@@ -615,13 +644,48 @@ export default class PartnerCards extends LitElement {
};
}
+ updatePaginatedCards() {
+ const endIndex = this.paginationCounter * this.cardsPerPage;
+ const startIndex = this.blockData.pagination === 'load-more' ? 0 : (this.paginationCounter - 1) * this.cardsPerPage;
+ this.paginatedCards = this.cards.slice(startIndex, endIndex);
+ }
+
+ handleLoadMore() {
+ this.paginationCounter += 1;
+ this.handleActions();
+ }
+
+ handlePageNum(pageNum) {
+ if (this.paginationCounter !== pageNum) {
+ this.paginationCounter = pageNum;
+ this.handleActions();
+ }
+ }
+
+ handlePrevPage() {
+ if (this.paginationCounter > 1) {
+ this.paginationCounter -= 1;
+ this.handleActions();
+ }
+ }
+
+ handleNextPage() {
+ if (this.paginationCounter < this.totalPages) {
+ this.paginationCounter += 1;
+ this.handleActions();
+ }
+ }
+
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('resize', this.updateView);
}
+ /* eslint-disable indent */
render() {
return html`
+ ${this.fetchedData
+ ? html`