@salesforcedevs/dx-components 0.34.0 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.34.0",
+    "version": "0.35.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -26,5 +26,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "3fb8d8f361564473da583dae0a1e90cdeb943601"
+    "gitHead": "f7fc8ed1e4ba14038343beeeed60324f50622117"
 }

package/src/modules/dx/button/button.ts

@@ -21,6 +21,8 @@ export default class Button extends LightningElement {
     @api variant: ButtonVariant = "primary";
     @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";
+    @api name?: string;
+    @api value?: any;
 
     // button props
     @api type: "submit" | "reset" | "button" = "button";

package/src/modules/dx/contentArchive/contentArchive.html

@@ -29,28 +29,28 @@
                         name="site"
                         title={contentTypeTitle}
                         options={contentTypeList}
-                        onchange={updateSelectedFilters}
+                        onchange={handleUpdateSiteFilter}
                     ></dx-filter-menu>
                     <dx-filter-menu
                         name="dates"
                         title={dateTitle}
                         options={dateList}
                         variant="nested"
-                        onchange={updateSelectedFilters}
+                        onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                     <template if:false={hideBlogFilters}>
                         <dx-filter-menu
                             name="authors"
                             title={authorTitle}
                             options={authorList}
-                            onchange={updateSelectedFilters}
+                            onchange={handleFiltersEvent}
                         ></dx-filter-menu>
                     </template>
                     <dx-filter-menu
                         name="categories"
                         title={categoryTitle}
                         options={categoryList}
-                        onchange={updateSelectedFilters}
+                        onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                 </template>
             </dx-modal-drawer>
@@ -76,28 +76,28 @@
                         name="site"
                         title={contentTypeTitle}
                         options={contentTypeList}
-                        onchange={updateSelectedFilters}
+                        onchange={handleUpdateSiteFilter}
                     ></dx-filter-menu>
                     <dx-filter-menu
                         name="dates"
                         title={dateTitle}
                         options={dateList}
                         variant="nested"
-                        onchange={updateSelectedFilters}
+                        onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                     <template if:false={hideBlogFilters}>
                         <dx-filter-menu
                             name="authors"
                             title={authorTitle}
                             options={authorList}
-                            onchange={updateSelectedFilters}
+                            onchange={handleFiltersEvent}
                         ></dx-filter-menu>
                     </template>
                     <dx-filter-menu
                         name="categories"
                         title={categoryTitle}
                         options={categoryList}
-                        onchange={updateSelectedFilters}
+                        onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                 </template>
             </template>

package/src/modules/dx/contentArchive/contentArchive.ts

@@ -2,10 +2,19 @@ import { LightningElement } from "lwc";
 import cx from "classnames";
 import { getArchivePosts, getArchiveFilterList } from "utils/contentArchive";
 import { sortSplittedPostsByMonth } from "utils/dates";
+import { Filters } from "./contentArchive.types";
+import { QueryCoordinator } from "utils/queryCoordinator";
 
 const MOBILE_MATCH = "767px";
 
+const QUERY_SITE_FILTER = "c__filter";
+const PODCASTS = { id: 2, name: "Podcasts" };
+const BLOGS = { id: 1, name: "Blogs" };
 export default class ContentArchive extends LightningElement {
+    private _contentTypeList = [
+        { ...BLOGS, checked: false },
+        { ...PODCASTS, checked: false }
+    ];
     private totalResults: number | null = null;
     private currentPage: number = 1;
     private totalPages: number = 1;
@@ -22,7 +31,7 @@ export default class ContentArchive extends LightningElement {
     private isMobile: boolean = false;
     private mobileMatchMedia!: MediaQueryList;
 
-    private selectedFilterMenuData: any = {
+    private selectedFilterMenuData: Filters = {
         site: [],
         dates: [],
         authors: [],
@@ -88,10 +97,7 @@ export default class ContentArchive extends LightningElement {
     }
 
     get contentTypeList() {
-        return [
-            { id: 1, name: "Blogs" },
-            { id: 2, name: "Podcasts" }
-        ];
+        return this._contentTypeList;
     }
 
     get hideBlogFilters() {
@@ -146,9 +152,37 @@ export default class ContentArchive extends LightningElement {
         });
     }
 
-    private updateSelectedFilters(e: CustomEvent) {
+    private handleUpdateSiteFilter(e: CustomEvent) {
         const { value, name, checked } = e.detail;
 
+        let selectedFilters: string[] | null = [];
+        this._contentTypeList.forEach((option) => {
+            if (option.name === value.name) {
+                option.checked = checked;
+            }
+            if (option.checked) {
+                selectedFilters?.push(option.name);
+            }
+        });
+
+        if (selectedFilters?.length === 0) {
+            selectedFilters = null;
+        }
+        QueryCoordinator.setUrlParamValue(QUERY_SITE_FILTER, selectedFilters);
+
+        this.updateSelectedFilters(value, name, checked);
+    }
+
+    private handleFiltersEvent(e: CustomEvent) {
+        const { value, name, checked } = e.detail;
+        this.updateSelectedFilters(value, name, checked);
+    }
+
+    private updateSelectedFilters(
+        value: any,
+        name: keyof Filters,
+        checked: any
+    ) {
         let copy = {
             ...this.selectedFilterMenuData
         };
@@ -217,7 +251,7 @@ export default class ContentArchive extends LightningElement {
     private removeFilterItem(e: any) {
         const { name, value } = e.target;
 
-        this.updateSelectedFilters(
+        this.handleUpdateSiteFilter(
             new CustomEvent("updateselectedfilters", {
                 detail: {
                     name,
@@ -395,8 +429,32 @@ export default class ContentArchive extends LightningElement {
         this.onMobileChange(this.mobileMatchMedia);
         this.mobileMatchMedia.addEventListener("change", this.onMobileChange);
 
+        const presetFilters: string[] =
+            QueryCoordinator.getUrlParamValue(QUERY_SITE_FILTER);
+        if (
+            presetFilters?.some((filterString) => filterString === BLOGS.name)
+        ) {
+            this.presetSiteFilter(BLOGS);
+        }
+        if (
+            presetFilters?.some(
+                (filterString) => filterString === PODCASTS.name
+            )
+        ) {
+            this.presetSiteFilter(PODCASTS);
+        }
+
         if (this.posts.length === 0) {
             this.fetchPostsByCardType();
         }
     }
+
+    presetSiteFilter(filter: any) {
+        this._contentTypeList.forEach((option) => {
+            if (option.name === filter.name) {
+                option.checked = true;
+            }
+        });
+        this.updateSelectedFilters(filter, "site", true);
+    }
 }

package/src/modules/dx/contentArchive/contentArchive.types.ts

@@ -0,0 +1,6 @@
+export interface Filters {
+    site: any[];
+    dates: any[];
+    authors: any[];
+    categories: any[];
+}

package/src/modules/dx/filterMenu/filterMenu.html

@@ -30,6 +30,7 @@
                                     label={option.name}
                                     name={option.name}
                                     value={option}
+                                    checked={option.checked}
                                     onchange={onChange}
                                 ></dx-checkbox>
                             </template>

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -1,9 +1,14 @@
 import { LightningElement, api } from "lwc";
 
+interface Option {
+    id: number;
+    name: string;
+    checked: boolean;
+}
 export default class FilterMenu extends LightningElement {
     @api name: string = "";
     @api title: string = "Filter Menu";
-    @api options: any = [];
+    @api options: Option[] = [];
     @api variant: string = "base";
 
     private showMore: boolean = false;
@@ -80,7 +85,6 @@ export default class FilterMenu extends LightningElement {
 
     private onChange(e: any) {
         const { checked, value } = e.detail;
-
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {

package/src/modules/utils/queryCoordinator/queryCoordinator.ts

@@ -0,0 +1,17 @@
+export class QueryCoordinator {
+    static getUrlParamValue(key: string) {
+        return JSON.parse(
+            new URL(window.location.href).searchParams.get(key) || "null"
+        );
+    }
+
+    static setUrlParamValue(key: string, value: any) {
+        const newUrl = new URL(window.location.href);
+        if (value) {
+            newUrl.searchParams.set(key, JSON.stringify(value));
+        } else {
+            newUrl.searchParams.delete(key);
+        }
+        window.history.replaceState(null, "", newUrl.href);
+    }
+}