@fluid-topics/ft-search-saved-searches 1.1.13 → 1.1.14

package/build/ft-search-saved-searches.css.d.ts

@@ -7,10 +7,14 @@ export declare const FtSearchSavedSearchesCssVariables: {
     activeSearchBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     activeSearchBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     inactiveButtonTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    inactiveButtonBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     inactiveSearchBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     inactiveSearchBorderStyle: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     inactiveSearchBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     inactiveSearchBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     inactiveSearchBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    chipBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    cardTitleFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    cardTitleFontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;

package/build/ft-search-saved-searches.css.js

@@ -2,6 +2,10 @@ var _a, _b, _c, _d;
 import { css } from "lit";
 import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtCardCssVariables } from "@fluid-topics/ft-card";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple";
+import { FtChipCssVariables } from "@fluid-topics/ft-chip";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button";
+import { FtTypographyTitleDenseCssVariables } from "@fluid-topics/ft-typography";
 export const FtSearchSavedSearchesCssVariables = {
     color: FtCssVariableFactory.extend("--ft-search-saved-searches-color", "", designSystemVariables.colorOnSurface),
     activeButtonTextColor: FtCssVariableFactory.extend("--ft-search-saved-searches-active-button-text-color", "", designSystemVariables.colorPrimary),
@@ -11,21 +15,79 @@ export const FtSearchSavedSearchesCssVariables = {
     activeSearchBorderWidth: FtCssVariableFactory.create("--ft-search-saved-searches-active-search-border-width", "", "SIZE", (_b = FtCardCssVariables.selectedOutlineWidth.lastResortDefaultValue()) !== null && _b !== void 0 ? _b : "2px"),
     activeSearchBorderRadius: FtCssVariableFactory.extend("--ft-search-saved-searches-active-search-border-radius", "", designSystemVariables.borderRadiusM),
     inactiveButtonTextColor: FtCssVariableFactory.extend("--ft-search-saved-searches-inactive-button-text-color", "", designSystemVariables.colorPrimary),
+    inactiveButtonBackgroundColor: FtCssVariableFactory.extend("--ft-search-saved-searches-inactive-button-background-color", "", designSystemVariables.colorSurface),
     inactiveSearchBackgroundColor: FtCssVariableFactory.extend("--ft-search-saved-searches-inactive-search-background-color", "", designSystemVariables.colorContent),
     inactiveSearchBorderStyle: FtCssVariableFactory.create("--ft-search-saved-searches-inactive-search-border-style", "", "BORDER-STYLE", (_c = FtCardCssVariables.outlineStyle.lastResortDefaultValue()) !== null && _c !== void 0 ? _c : "solid"),
     inactiveSearchBorderColor: FtCssVariableFactory.extend("--ft-search-saved-searches-inactive-search-border-color", "", designSystemVariables.colorPrimary),
     inactiveSearchBorderWidth: FtCssVariableFactory.create("--ft-search-saved-searches-inactive-search-border-width", "", "SIZE", (_d = FtCardCssVariables.outlineWidth.lastResortDefaultValue()) !== null && _d !== void 0 ? _d : "0"),
     inactiveSearchBorderRadius: FtCssVariableFactory.extend("--ft-search-saved-searches-inactive-search-border-radius", "", designSystemVariables.borderRadiusM),
+    chipBackgroundColor: FtCssVariableFactory.extend("--ft-search-saved-searches-chip-background-color", "", designSystemVariables.colorSurface),
+    cardTitleFontSize: FtCssVariableFactory.create("--ft-search-saved-searches-card-title-font-size", "", "SIZE", "16px"),
+    cardTitleFontWeight: FtCssVariableFactory.create("--ft-search-saved-searches-card-title-font-weight", "", "SIZE", "600"),
 };
 // language=CSS
 export const styles = css `
-    #container {
+    [part="container"] {
         display: flex;
         flex-direction: column;
-        gap: 24px;
+        gap: 12px;
         margin: 3px;
-
         ${setVariable(FtCardCssVariables.colorOnSurfaceHigh, FtSearchSavedSearchesCssVariables.color)};
         ${setVariable(FtCardCssVariables.colorOnSurfaceMedium, FtSearchSavedSearchesCssVariables.color)};
     }
+
+    [part="card"] {
+        ${setVariable(FtCardCssVariables.outlineStyle, FtSearchSavedSearchesCssVariables.inactiveSearchBorderStyle)};
+        ${setVariable(FtCardCssVariables.outlineWidth, FtSearchSavedSearchesCssVariables.inactiveSearchBorderWidth)};
+        ${setVariable(FtCardCssVariables.outlineColor, FtSearchSavedSearchesCssVariables.inactiveSearchBorderColor)};
+        ${setVariable(FtCardCssVariables.borderRadius, FtSearchSavedSearchesCssVariables.inactiveSearchBorderRadius)};
+        ${setVariable(FtCardCssVariables.selectedOutlineStyle, FtSearchSavedSearchesCssVariables.activeSearchBorderStyle)};
+        ${setVariable(FtCardCssVariables.selectedOutlineWidth, FtSearchSavedSearchesCssVariables.activeSearchBorderWidth)};
+        ${setVariable(FtCardCssVariables.selectedOutlineColor, FtSearchSavedSearchesCssVariables.activeSearchBorderColor)};
+        ${setVariable(FtCardCssVariables.selectedBorderRadius, FtSearchSavedSearchesCssVariables.activeSearchBorderRadius)};
+        ${setVariable(FtRippleCssVariables.backgroundColor, FtSearchSavedSearchesCssVariables.inactiveSearchBackgroundColor)};
+    }
+
+    [part="card"][selected] {
+        ${setVariable(FtRippleCssVariables.backgroundColor, FtSearchSavedSearchesCssVariables.activeSearchBackgroundColor)};
+    }
+
+    [part="title"] {
+        ${setVariable(FtTypographyTitleDenseCssVariables.fontSize, FtSearchSavedSearchesCssVariables.cardTitleFontSize)};
+        ${setVariable(FtTypographyTitleDenseCssVariables.fontWeight, FtSearchSavedSearchesCssVariables.cardTitleFontWeight)};
+    }
+
+    [part="card-content"] {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    [part="search-filters"] {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+    }
+
+    [part="chip"] {
+        ${setVariable(FtChipCssVariables.backgroundColor, FtSearchSavedSearchesCssVariables.chipBackgroundColor)};
+    }
+
+    [part="search-button"] {
+        ${setVariable(FtButtonCssVariables.color, FtSearchSavedSearchesCssVariables.inactiveButtonTextColor)};
+    }
+
+    [part="search-button"]:not([disabled]) {
+        ${setVariable(FtButtonCssVariables.color, FtSearchSavedSearchesCssVariables.inactiveButtonTextColor)};
+        ${setVariable(FtButtonCssVariables.backgroundColor, FtSearchSavedSearchesCssVariables.inactiveButtonBackgroundColor)};
+    }
+
+    [part="metadata-label"]:after {
+        content: ":";
+    }
+
+    a, a:hover, a:focus, a:active {
+        text-decoration: none;
+        color: inherit;
+    }
 `;

package/build/ft-search-saved-searches.d.ts

@@ -1,6 +1,7 @@
-import { PropertyValues } from "lit";
+import { nothing, PropertyValues } from "lit";
 import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtSearchSavedSearchesProperties } from "./ft-search-saved-searches.properties";
+import { FtMySearch, FtSearchFilter } from "@fluid-topics/public-api";
 import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
 declare const FtSearchSavedSearches_base: typeof FtSearchComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
 export declare class FtSearchSavedSearches extends FtSearchSavedSearches_base implements FtSearchSavedSearchesProperties {
@@ -9,22 +10,30 @@ export declare class FtSearchSavedSearches extends FtSearchSavedSearches_base im
     showSearchFilters: boolean;
     showSearchButton: boolean;
     showAlertStatus: boolean;
-    private savedSearches?;
+    savedSearches?: Array<FtMySearch>;
     private user?;
+    private baseUrl?;
     private request?;
-    private editorMode;
     private requiredRole;
     static elementDefinitions: ElementDefinitionsMap;
     constructor();
-    render(): import("lit").TemplateResult<1>;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
+    private renderDescription;
+    private renderSearchButton;
+    private renderAlertStatus;
+    private renderSearchFilters;
+    private renderMetadata;
+    private mapSortKey;
+    private mapPeriodFilter;
     private get userHasRights();
     private get isEmpty();
     private isSelected;
+    areFtSearchFiltersEqual(arr1: FtSearchFilter[], arr2: FtSearchFilter[]): boolean;
     private mapFtSearchSortCriterion;
     private toFtSearchRequest;
     private mapSearchFilter;
     connectedCallback(): void;
-    private setSearch;
+    private onLinkClick;
     protected update(changedProperties: PropertyValues): void;
 }
 export {};

package/build/ft-search-saved-searches.js

@@ -4,19 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { property } from "lit/decorators.js";
-import { deepEqual, redux } from "@fluid-topics/ft-wc-utils";
+import { deepEqual, redux, serializeRequest } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-search-saved-searches.css";
 import { ftAppInfoStore } from "@fluid-topics/ft-app-context";
-import { FtSearchSavedSearch } from "./ft-search-saved-search";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { repeat } from "lit/directives/repeat.js";
-import { FtUserRole } from "@fluid-topics/public-api";
+import { FtSearchScope, FtUserRole, FtVirtualField, userHasRole } from "@fluid-topics/public-api";
 import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
 import { ftUserAssetsStore, userAssetsActions } from "@fluid-topics/ft-app-context/build/redux-stores/FtUserAssetsStore";
 import { withI18n } from "@fluid-topics/ft-i18n";
 import { defaultSavedSearchesMessages, savedSearches } from "./utils/SavedSearchesComponentMessages";
+import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtCard } from "@fluid-topics/ft-card";
+import { FtChip } from "@fluid-topics/ft-chip";
+import { FtButton } from "@fluid-topics/ft-button";
 class FtSearchSavedSearches extends withI18n(FtSearchComponent) {
     constructor() {
         super();
@@ -24,7 +27,6 @@ class FtSearchSavedSearches extends withI18n(FtSearchComponent) {
         this.showSearchFilters = false;
         this.showSearchButton = false;
         this.showAlertStatus = false;
-        this.editorMode = false;
         this.requiredRole = FtUserRole.SAVED_SEARCH_USER;
         this.addStore(ftAppInfoStore);
         this.addStore(ftUserAssetsStore);
@@ -32,43 +34,111 @@ class FtSearchSavedSearches extends withI18n(FtSearchComponent) {
     }
     render() {
         var _a;
-        if (this.editorMode && !this.userHasRights) {
+        if (this.userHasRights && !this.isEmpty) {
             return html `
-                <ft-typography>${savedSearches.messages.missingRole(this.requiredRole)}</ft-typography>`;
-        }
-        else if (this.editorMode && this.isEmpty) {
-            return html `
-                <ft-typography>${savedSearches.messages.displaySavedSearchesHere()}</ft-typography>`;
-        }
-        else if (this.userHasRights && !this.isEmpty) {
-            return html `
-                <div id="container">
-                    ${repeat((_a = this.savedSearches) !== null && _a !== void 0 ? _a : [], s => s.id, s => html `
-                                <ft-search-saved-search
-                                        .search=${s}
-                                        ?showDescription=${this.showDescription}
-                                        ?showSearchFilters=${this.showSearchFilters}
-                                        ?showSearchButton=${this.showSearchButton}
-                                        ?showAlertStatus=${this.showAlertStatus}
-                                        ?selected=${this.isSelected(s.searchRequest)}
-                                        @click=${(e) => this.setSearch(s.searchRequest)}
-                                ></ft-search-saved-search>`)}
+                <div part="container">
+                    ${repeat((_a = this.savedSearches) !== null && _a !== void 0 ? _a : [], s => s.id, s => {
+                const ftSearchRequest = this.toFtSearchRequest(s.searchRequest);
+                if (ftSearchRequest === undefined)
+                    return nothing;
+                const link = serializeRequest(this.baseUrl, ftSearchRequest);
+                return html `
+                                    <a href="${link}" @click="${(e) => this.onLinkClick(e, ftSearchRequest)}">
+                                        <ft-card clickable ?selected="${this.isSelected(s.searchRequest)}" part="card">
+                                            <div slot="header">
+                                                <ft-typography variant="title">${s.title}</ft-typography>
+                                                ${this.renderAlertStatus(s.alert)}
+                                            </div>
+
+                                            <div part="card-content">
+                                                ${this.renderDescription(s.description)}
+                                                ${this.renderSearchFilters(s.searchRequest)}
+                                                ${this.renderSearchButton(this.isSelected(s.searchRequest))}
+                                            </div>
+                                        </ft-card>
+                                    </a>
+                                `;
+            })}
                 </div>
             `;
         }
         else {
-            return html `
-                <style>
-                    :host {
-                        display: none !important;
-                    }
-                </style>
-            `;
+            return nothing;
+        }
+    }
+    renderDescription(description) {
+        return this.showDescription && description
+            ? html `<div part="description" class="content">${description}</div>`
+            : nothing;
+    }
+    renderSearchButton(isSelected) {
+        return this.showSearchButton
+            ? html `<div part="search-button"><ft-button id="search" icon="search" ?disabled=${isSelected}>${savedSearches.messages.search()}</ft-button></div>`
+            : nothing;
+    }
+    renderAlertStatus(alert) {
+        return this.showAlertStatus && alert
+            ? html `<ft-icon part="alert-status">alert</ft-icon>`
+            : nothing;
+    }
+    // See net.antidot.fluidtopics.client.application.mylibrary.shared.MyLibraryTagWidgetFactory.createMySearchTags
+    renderSearchFilters(searchRequest) {
+        var _a, _b, _c, _d, _e;
+        return this.showSearchFilters ? html `<div part="search-filters" class="content">
+            ${((_a = searchRequest.query.length) !== null && _a !== void 0 ? _a : 0 > 0)
+            ? this.renderMetadata(savedSearches.messages.keywords(), searchRequest.query)
+            : nothing}
+            ${searchRequest.virtualField == FtVirtualField.TITLE_ONLY
+            ? this.renderMetadata(savedSearches.messages.in(), savedSearches.messages.titles())
+            : nothing}
+            ${searchRequest.scope == FtSearchScope.DOCUMENTS
+            ? this.renderMetadata(savedSearches.messages.resultsType(), savedSearches.messages.documentsOnly())
+            : nothing}
+            ${searchRequest.filters.map(f => this.renderMetadata(f.label, f.values))}
+            ${((_c = (_b = searchRequest.contentLocale) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0 > 0)
+            ? this.renderMetadata(savedSearches.messages.language(), searchRequest.contentLocale)
+            : nothing}
+            ${((_e = (_d = searchRequest.sort[0]) === null || _d === void 0 ? void 0 : _d.key.length) !== null && _e !== void 0 ? _e : 0 > 0)
+            ? this.renderMetadata(savedSearches.messages.sort(), this.mapSortKey(searchRequest.sort[0].key))
+            : nothing}
+            ${searchRequest.periodFilter
+            ? this.renderMetadata(savedSearches.messages.period(), this.mapPeriodFilter(searchRequest.periodFilter))
+            : nothing}
+        </div>` : nothing;
+    }
+    renderMetadata(key, values) {
+        return html `
+            <ft-chip dense part="chip">
+                <span part="metadata-label">${key}</span>
+                <span part="metadata-values">${Array.isArray(values) ? values.join(", ") : values}</span>
+            </ft-chip>`;
+    }
+    mapSortKey(key) {
+        switch (key) {
+            case "afs:relevance":
+                return savedSearches.messages.relevance();
+            case "ft:lastEdition":
+                return savedSearches.messages.lastUpdate();
+            default:
+                return key;
+        }
+    }
+    mapPeriodFilter(periodFilter) {
+        switch (periodFilter.periodType) {
+            case "LAST_WEEK":
+                return savedSearches.messages.lastWeek();
+            case "LAST_MONTH":
+                return savedSearches.messages.lastMonth();
+            case "LAST_YEAR":
+                return savedSearches.messages.lastYear();
+            case "CUSTOM":
+                return savedSearches.messages.customPeriod();
+            default:
+                return "--";
         }
     }
     get userHasRights() {
-        var _a;
-        return !!((_a = this.user) === null || _a === void 0 ? void 0 : _a.roles.includes(this.requiredRole));
+        return userHasRole(this.user, this.requiredRole);
     }
     get isEmpty() {
         var _a;
@@ -78,13 +148,28 @@ class FtSearchSavedSearches extends withI18n(FtSearchComponent) {
         var _a, _b, _c, _d;
         return this.request != undefined
             && deepEqual(this.request.query, mySearchRequest.query)
-            && deepEqual([...this.request.filters], [...mySearchRequest.filters].map(this.mapSearchFilter))
+            && this.areFtSearchFiltersEqual([...this.request.filters], [...mySearchRequest.filters].map(this.mapSearchFilter))
             && deepEqual([...this.request.sort].map(this.mapFtSearchSortCriterion), [...mySearchRequest.sort].map(this.mapFtSearchSortCriterion))
             && deepEqual(this.request.contentLocale, mySearchRequest.contentLocale)
             && deepEqual(this.request.periodFilter, mySearchRequest.periodFilter)
             && deepEqual((_a = this.request.virtualField) !== null && _a !== void 0 ? _a : "EVERYWHERE", (_b = mySearchRequest.virtualField) !== null && _b !== void 0 ? _b : "EVERYWHERE")
             && deepEqual((_c = this.request.scope) !== null && _c !== void 0 ? _c : "DEFAULT", (_d = mySearchRequest.scope) !== null && _d !== void 0 ? _d : "DEFAULT");
     }
+    areFtSearchFiltersEqual(arr1, arr2) {
+        if (!deepEqual(arr1.map(i => i.key).sort(), arr2.map(i => i.key).sort())) {
+            return false;
+        }
+        const compareObjects = (obj1, obj2) => {
+            return obj1.key === obj2.key && obj1.negative === obj2.negative && deepEqual(obj1.values.sort(), obj2.values.sort());
+        };
+        for (const obj1 of arr1) {
+            const matchingObject = arr2.find(obj2 => compareObjects(obj1, obj2));
+            if (!matchingObject) {
+                return false;
+            }
+        }
+        return true;
+    }
     mapFtSearchSortCriterion(s) {
         return { ...s };
     }
@@ -111,11 +196,13 @@ class FtSearchSavedSearches extends withI18n(FtSearchComponent) {
         super.connectedCallback();
         userAssetsActions.reloadMySearches();
     }
-    setSearch(mySearchRequest) {
+    onLinkClick(e, ftSearchRequest) {
         var _a;
-        const ftSearchRequest = this.toFtSearchRequest(mySearchRequest);
-        if (ftSearchRequest != undefined) {
+        if (!e.ctrlKey && !e.metaKey) {
+            e.stopPropagation();
+            e.preventDefault();
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setRequest(ftSearchRequest);
+            this.click();
         }
     }
     update(changedProperties) {
@@ -128,8 +215,11 @@ class FtSearchSavedSearches extends withI18n(FtSearchComponent) {
 }
 FtSearchSavedSearches.styles = styles;
 FtSearchSavedSearches.elementDefinitions = {
-    "ft-search-saved-search": FtSearchSavedSearch,
-    "ft-typography": FtTypography
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
+    "ft-card": FtCard,
+    "ft-chip": FtChip,
+    "ft-button": FtButton
 };
 __decorate([
     property({ type: Boolean })
@@ -149,10 +239,10 @@ __decorate([
 __decorate([
     redux({ store: ftAppInfoStore.name, selector: (s) => { var _a; return (_a = s.session) === null || _a === void 0 ? void 0 : _a.profile; } })
 ], FtSearchSavedSearches.prototype, "user", void 0);
+__decorate([
+    redux({ store: ftAppInfoStore.name })
+], FtSearchSavedSearches.prototype, "baseUrl", void 0);
 __decorate([
     redux({ store: "search" })
 ], FtSearchSavedSearches.prototype, "request", void 0);
-__decorate([
-    redux({ store: ftAppInfoStore.name })
-], FtSearchSavedSearches.prototype, "editorMode", void 0);
 export { FtSearchSavedSearches };