@salesforcedevs/dx-components 0.69.0 → 0.70.0

package/src/modules/dx/searchResults/searchResults.ts

@@ -0,0 +1,187 @@
+import { LightningElement, api, track } from "lwc";
+import type * as CoveoSDK from "coveo-search-ui";
+
+interface CoveoSearch {
+    state: typeof CoveoSDK.state;
+    get: typeof CoveoSDK.get;
+    $$: typeof CoveoSDK.$$;
+    InitializationEvents: typeof CoveoSDK.InitializationEvents;
+    QueryEvents: typeof CoveoSDK.QueryEvents;
+    SearchEndpoint: typeof CoveoSDK.SearchEndpoint;
+    TemplateCache: typeof CoveoSDK.TemplateCache;
+    UnderscoreTemplate: typeof CoveoSDK.UnderscoreTemplate;
+    init: typeof CoveoSDK.init;
+    IQuerySuccessEventArgs: CoveoSDK.IQuerySuccessEventArgs;
+}
+
+declare const Coveo: CoveoSearch;
+
+function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
+    numberOfPages: number;
+    currentPage: number;
+} {
+    const pageSize = event.query.numberOfResults!;
+    const totalResults = event.results.totalCount!;
+    const numberOfPages = Math.ceil(totalResults / pageSize);
+
+    const currentPage = event.query.firstResult! / pageSize + 1;
+
+    return { numberOfPages, currentPage };
+}
+
+const resultsTemplatesInnerHtml = `
+    <script
+        id="myDocumentResultTemplate"
+        class="result-template"
+        type="text/html"
+        data-field-publicurl=""
+    >
+        <div class="dx-result">
+            <p class="dx-result-title">
+                <a
+                    class="CoveoResultLink"
+                    data-field="@publicurl"
+                ></a>
+            </p>
+            <p class="dx-result-excerpt CoveoExcerpt"></p>
+        </div>
+    </script>
+    <script
+        id="myDefaultResultTemplate"
+        class="result-template"
+        type="text/html"
+    >
+            <div class="dx-result">
+                <p class="dx-result-title">
+                    <a class="CoveoResultLink"></a>
+                </p>
+                <p class="dx-result-excerpt CoveoExcerpt"></p>
+            </div>
+    </script>
+`;
+
+export default class SearchResults extends LightningElement {
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchPipeline!: string;
+
+    private root: HTMLElement | null = null;
+    private isInitialized = false;
+
+    @track _query: string = "";
+
+    @api
+    get searchQuery() {
+        return this._query;
+    }
+    set searchQuery(q: string) {
+        this._query = q;
+        if (this.isInitialized && this._query !== "") {
+            this.updateSearchQuery();
+        }
+    }
+
+    private totalResults: number | null = null;
+
+    private get title() {
+        return this.totalResults ? this.totalResults.toLocaleString() : "";
+    }
+
+    private query: string = "";
+    private hasFilters: boolean = false;
+
+    private get hasQuery(): boolean {
+        return this.query !== "";
+    }
+
+    private updateSearchQuery() {
+        Coveo.state(this.root!, "q", this._query);
+    }
+
+    private clearFilters() {
+        const BreadcrumbManager = Coveo.get(
+            this.root!.querySelector(".CoveoBreadcrumb") as HTMLElement
+        ) as any;
+        BreadcrumbManager.clearBreadcrumbs();
+    }
+
+    private currentPage: number = 1;
+    private totalPages: number = 1;
+
+    private goToPage(e: CustomEvent) {
+        const page = e.detail;
+        const Pager = Coveo.get(
+            this.root!.querySelector(".CoveoPager") as HTMLElement
+        ) as any;
+        Pager.setPage(page);
+        this.currentPage = page;
+    }
+
+    private dismissFiltersOverlay = () => {
+        const overlay = this.root!.querySelector(
+            ".coveo-dropdown-background-active"
+        ) as HTMLElement | null;
+        overlay?.click();
+    };
+
+    private attachListeners(root: HTMLElement) {
+        Coveo.$$(root).on(
+            Coveo.InitializationEvents.afterInitialization,
+            () => {
+                if (this._query !== "") {
+                    Coveo.state(this.root!, "q", this.searchQuery);
+                }
+                if (Coveo.state(this.root!, "q") === "") {
+                    Coveo.state(this.root!, "sort", "date descending");
+                }
+                this.isInitialized = true;
+            }
+        );
+
+        Coveo.$$(root).on(Coveo.QueryEvents.querySuccess, (event: any) => {
+            const { currentPage, numberOfPages } = getPaginationState(
+                event.detail
+            );
+            this.currentPage = currentPage;
+            this.totalPages = numberOfPages;
+            this.totalResults = event.detail.results.totalCount;
+            this.query = event.detail.query.q ?? "";
+            this.hasFilters = event.detail.query.facets.some((f: any) => {
+                return f.currentValues.some((cv: any) => {
+                    return cv.state === "selected";
+                });
+            });
+        });
+    }
+
+    private initializeCoveo() {
+        this.root = this.template.querySelector(".CoveoSearchInterface")!;
+
+        const resultsList = this.template.querySelector(".CoveoResultList");
+        if (resultsList) {
+            resultsList.innerHTML = resultsTemplatesInnerHtml;
+        }
+
+        Coveo.SearchEndpoint.configureCloudV2Endpoint(
+            this.coveoOrganizationId,
+            this.coveoPublicAccessToken
+        );
+
+        this.attachListeners(this.root);
+
+        Coveo.init(this.root);
+    }
+
+    renderedCallback() {
+        if (!this.isInitialized) {
+            if (Object.prototype.hasOwnProperty.call(window, "Coveo")) {
+                this.initializeCoveo();
+            } else {
+                const script = document.querySelector("script.coveo-script");
+                script?.addEventListener("load", () => {
+                    this.initializeCoveo();
+                });
+            }
+        }
+    }
+}