@fluid-topics/ft-search-result-metadata 1.1.12 → 1.1.13

package/build/SearchResultMetadataMessages.d.ts

@@ -2,5 +2,6 @@ import { I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
 export interface SearchResultMetadataMessages extends I18nMessages {
     noKeySelected(): string;
     noValuePresent(key: string): string;
+    noValueInCluster(): string;
 }
 export declare const searchResultMetadataContext: I18nMessageContext<SearchResultMetadataMessages>;

package/build/ft-search-result-metadata.css.js

@@ -2,4 +2,15 @@ import { css } from "lit";
 export const FtSearchResultMetadataCssVariables = {};
 // language=CSS
 export const styles = css `
+    .ft-search-result-metadata--container {
+        position: relative;
+    }
+
+    .ft-search-result-metadata--container ft-chip {
+        cursor: pointer;
+    }
+
+    a {
+        all: unset;
+    }
 `;

package/build/ft-search-result-metadata.d.ts

@@ -1,6 +1,7 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtSearchResultMetadataProperties } from "./ft-search-result-metadata.properties";
+import type { FtSearchResultStateManager } from "@fluid-topics/ft-search-result-context/build/registration";
 import { FtSearchResultComponent } from "@fluid-topics/ft-search-result-context/build/registration";
 declare const FtSearchResultMetadata_base: typeof FtSearchResultComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
 export declare class FtSearchResultMetadata extends FtSearchResultMetadata_base implements FtSearchResultMetadataProperties {
@@ -8,19 +9,33 @@ export declare class FtSearchResultMetadata extends FtSearchResultMetadata_base
     static styles: import("lit").CSSResult;
     key?: string;
     useChip?: boolean;
+    useAsClusterSwitch?: boolean;
+    goToDocumentOnSwitch?: boolean;
     /**
      * @deprecated Use CSS
      */
     maxLength?: number;
     private editorMode;
-    private metadata?;
+    private resultMetadata?;
+    private metadataLabel?;
+    private computedClusters;
     constructor();
+    setResultStateManager(resultStateManager: FtSearchResultStateManager): void;
     protected render(): import("lit").TemplateResult<1>;
+    private renderClusterList;
+    private onClusterSelected;
+    private computeClusters;
+    private renderClusterItem;
+    private renderClusterItemValue;
+    private onResultClick;
+    private renderChip;
     private renderContent;
+    private get displayCluster();
     private getEllipsis;
     protected update(props: PropertyValues): void;
     private get resultData();
     private get valueText();
     private get tooltipText();
+    private findClusterMetadataLabel;
 }
 export {};

package/build/ft-search-result-metadata.js

@@ -14,30 +14,96 @@ import { withI18n } from "@fluid-topics/ft-i18n";
 import { searchResultMetadataContext } from "./SearchResultMetadataMessages";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
 import { FtChip } from "@fluid-topics/ft-chip";
+import { FtFloatingMenu, FtFloatingMenuItem, FtFloatingMenuLabel } from "@fluid-topics/ft-floating-menu";
+import { getResultUrl, SearchResultClickEvent } from "@fluid-topics/ft-search-result-context/build/utils";
+import { ClusteringHelper } from "@fluid-topics/ft-search-result-context/build/ClusteringHelper";
+import { repeat } from "lit/directives/repeat.js";
 class FtSearchResultMetadata extends withI18n(FtSearchResultComponent) {
     constructor() {
         super();
         this.useChip = false;
+        this.useAsClusterSwitch = false;
+        this.goToDocumentOnSwitch = false;
         this.editorMode = false;
+        this.computedClusters = {};
         this.addStore(ftAppInfoStore);
         this.addI18nContext(searchResultMetadataContext);
     }
+    setResultStateManager(resultStateManager) {
+        super.setResultStateManager(resultStateManager);
+        if (this.key && this.useAsClusterSwitch) {
+            resultStateManager.registerMetadata(this.key);
+        }
+    }
     render() {
+        return this.displayCluster ? this.renderClusterList() : this.renderChip();
+    }
+    renderClusterList() {
+        return html `
+            <div class="ft-search-result-metadata--container">
+                <ft-floating-menu icon="THIN_ARROW"
+                                  @select=${this.onClusterSelected}
+                                  slot="button">
+                    ${this.renderChip("toggle")}
+                    <ft-floating-menu-label>${this.metadataLabel}</ft-floating-menu-label>
+                    ${repeat(Object.entries(this.computedClusters), ([value, _]) => value, ([value, item]) => this.renderClusterItem(item.result, item.metadata))}
+                </ft-floating-menu>
+            </div>
+        `;
+    }
+    onClusterSelected(e) {
+        var _a;
+        (_a = this.resultStateManager) === null || _a === void 0 ? void 0 : _a.selectResult(this.computedClusters[e.detail].result);
+    }
+    computeClusters() {
+        const newClusters = {};
+        const clusteringHelper = new ClusteringHelper(this.cluster, this.result, this.resultStateManager.registeredMetadata);
+        clusteringHelper.computeClustersItemsForMetadata(this.key)
+            .forEach(item => {
+            newClusters[item.metadata.value] = item;
+        });
+        this.computedClusters = newClusters;
+    }
+    renderClusterItem(result, metadata) {
+        if (this.goToDocumentOnSwitch) {
+            return html `
+                <a href="${getResultUrl(result)}" @click=${() => this.onResultClick(result)}>
+                    <ft-floating-menu-item value="${metadata.value}">${this.renderClusterItemValue(metadata.value, metadata.displayValue)}
+                    </ft-floating-menu-item>
+                </a>
+            `;
+        }
+        return html `
+            <ft-floating-menu-item value="${metadata.value}">${this.renderClusterItemValue(metadata.value, metadata.displayValue)}</ft-floating-menu-item>
+        `;
+    }
+    renderClusterItemValue(value, displayValue) {
+        return value === displayValue ? html `${value}` : html `
+            <ft-tooltip text="${value}">${displayValue}</ft-tooltip>
+        `;
+    }
+    onResultClick(result) {
+        this.dispatchEvent(new SearchResultClickEvent(result, this.rank));
+    }
+    renderChip(slot) {
         if (this.useChip) {
             return html `
-                <ft-tooltip text="${this.tooltipText}">
-                    <ft-chip>${this.renderContent()}</ft-chip>
+                <ft-tooltip text="${this.tooltipText}" slot="${slot}">
+                    <ft-chip icon="${this.displayCluster ? "THIN_ARROW" : ""}" trailingIcon>${this.renderContent()}</ft-chip>
                 </ft-tooltip>
             `;
         }
         else {
-            return html `${this.renderContent()}`;
+            return html `<span slot=${slot}>${this.renderContent()}</span>`;
         }
     }
     renderContent() {
-        if (this.metadata) {
+        if (this.resultMetadata) {
             return html `${this.getEllipsis(this.valueText)}`;
         }
+        if (this.useAsClusterSwitch && Object.keys(this.computedClusters).length > 0) {
+            return html `${searchResultMetadataContext.messages.noValueInCluster()}`;
+        }
         if (this.editorMode) {
             if (this.key) {
                 return html `${searchResultMetadataContext.messages.noValuePresent(this.key)}`;
@@ -54,15 +120,41 @@ class FtSearchResultMetadata extends withI18n(FtSearchResultComponent) {
             </style>
         `;
     }
+    get displayCluster() {
+        var _a, _b;
+        return this.useAsClusterSwitch
+            && ((_b = (_a = this.cluster) === null || _a === void 0 ? void 0 : _a.entries.length) !== null && _b !== void 0 ? _b : 0) > 1;
+    }
     getEllipsis(text) {
         let cutText = this.maxLength ? text.substring(0, this.maxLength) : text;
         return cutText + (cutText.length < text.length ? "…" : "");
     }
     update(props) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         super.update(props);
         if ((props.has("result") || props.has("key")) && this.result) {
-            this.metadata = (_a = this.resultData) === null || _a === void 0 ? void 0 : _a.metadata.find(m => m.key == this.key);
+            this.resultMetadata = (_a = this.resultData) === null || _a === void 0 ? void 0 : _a.metadata.find(m => m.key == this.key);
+            this.metadataLabel = this.findClusterMetadataLabel();
+        }
+        if (props.has("key") && this.useAsClusterSwitch) {
+            if (props.get("key")) {
+                (_b = this.resultStateManager) === null || _b === void 0 ? void 0 : _b.unregisterMetadata(props.get("key"));
+            }
+            if (this.key) {
+                (_c = this.resultStateManager) === null || _c === void 0 ? void 0 : _c.registerMetadata(this.key);
+            }
+        }
+        if (props.has("useAsCluster") && this.key) {
+            if (this.useAsClusterSwitch) {
+                (_d = this.resultStateManager) === null || _d === void 0 ? void 0 : _d.registerMetadata(this.key);
+            }
+            else {
+                (_e = this.resultStateManager) === null || _e === void 0 ? void 0 : _e.unregisterMetadata(this.key);
+            }
+        }
+        if ((props.has("cluster") || props.has("result") || props.has("key") || props.has("useAsCluster"))
+            && this.cluster && this.result && this.key && this.useAsClusterSwitch) {
+            this.computeClusters();
         }
     }
     get resultData() {
@@ -71,16 +163,29 @@ class FtSearchResultMetadata extends withI18n(FtSearchResultComponent) {
     }
     get valueText() {
         var _a, _b;
-        return (_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.values.join(", ")) !== null && _b !== void 0 ? _b : "";
+        return (_b = (_a = this.resultMetadata) === null || _a === void 0 ? void 0 : _a.values.join(", ")) !== null && _b !== void 0 ? _b : "";
     }
     get tooltipText() {
-        var _a, _b;
-        return this.metadata ? `${(_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.metadata.key}: ${this.valueText}` : "";
+        if (this.resultMetadata) {
+            return `${this.metadataLabel}: ${this.valueText}`;
+        }
+        if (this.useAsClusterSwitch) {
+            return `${this.metadataLabel}: ${searchResultMetadataContext.messages.noValueInCluster()}`;
+        }
+        return "";
+    }
+    findClusterMetadataLabel() {
+        var _a;
+        const metadata = (_a = this.cluster) === null || _a === void 0 ? void 0 : _a.entries.flatMap(result => { var _a, _b; return ((_b = (_a = result === null || result === void 0 ? void 0 : result.map) !== null && _a !== void 0 ? _a : result === null || result === void 0 ? void 0 : result.document) !== null && _b !== void 0 ? _b : result === null || result === void 0 ? void 0 : result.topic).metadata.filter(m => m.key == this.key); })[0];
+        return metadata === null || metadata === void 0 ? void 0 : metadata.label;
     }
 }
 FtSearchResultMetadata.elementDefinitions = {
     "ft-tooltip": FtTooltip,
     "ft-chip": FtChip,
+    "ft-floating-menu": FtFloatingMenu,
+    "ft-floating-menu-item": FtFloatingMenuItem,
+    "ft-floating-menu-label": FtFloatingMenuLabel,
 };
 FtSearchResultMetadata.styles = styles;
 __decorate([
@@ -89,6 +194,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtSearchResultMetadata.prototype, "useChip", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchResultMetadata.prototype, "useAsClusterSwitch", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchResultMetadata.prototype, "goToDocumentOnSwitch", void 0);
 __decorate([
     property({ type: Number, attribute: "max-length" })
 ], FtSearchResultMetadata.prototype, "maxLength", void 0);
@@ -97,5 +208,11 @@ __decorate([
 ], FtSearchResultMetadata.prototype, "editorMode", void 0);
 __decorate([
     state()
-], FtSearchResultMetadata.prototype, "metadata", void 0);
+], FtSearchResultMetadata.prototype, "resultMetadata", void 0);
+__decorate([
+    state()
+], FtSearchResultMetadata.prototype, "metadataLabel", void 0);
+__decorate([
+    state()
+], FtSearchResultMetadata.prototype, "computedClusters", void 0);
 export { FtSearchResultMetadata };