@fluid-topics/ft-search-saved-searches 1.0.23

package/README.md

@@ -0,0 +1,26 @@
+Displays the saved searches
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-search-saved-searches
+yarn add @fluid-topics/ft-search-saved-searches
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-search-saved-searches"
+
+function render() {
+    return html`<ft-search-context>
+                    <ft-search-saved-searches
+                        showDescription
+                        showSearchFilters
+                        showSearchButton
+                        showAlertStatus
+                    ></ft-search-saved-searches>
+                </ft-search-context>`
+}
+```

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

@@ -0,0 +1,27 @@
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { FtMySearch } from "@fluid-topics/public-api";
+import "@fluid-topics/ft-card";
+import "@fluid-topics/ft-icon";
+import "@fluid-topics/ft-button";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+declare const FtSearchSavedSearch_base: typeof FtSearchComponent & (new (...args: any[]) => import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface);
+export declare class FtSearchSavedSearch extends FtSearchSavedSearch_base {
+    search?: FtMySearch;
+    showDescription: boolean;
+    showSearchFilters: boolean;
+    showSearchButton: boolean;
+    showAlertStatus: boolean;
+    selected: boolean;
+    static elementDefinitions: ElementDefinitionsMap;
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderDescription;
+    private renderSearchButton;
+    private renderAlertStatus;
+    private renderSearchFilters;
+    private renderMetadata;
+    private mapSortKey;
+    private mapPeriodFilter;
+}
+export {};

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

@@ -0,0 +1,169 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, nothing, css } from "lit";
+import { property } from "lit/decorators.js";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import "@fluid-topics/ft-card";
+import "@fluid-topics/ft-icon";
+import "@fluid-topics/ft-button";
+import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtCard, FtCardCssVariables } from "@fluid-topics/ft-card";
+import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtSearchSavedSearchesCssVariables } from "./ft-search-saved-searches.css";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { defaultSavedSearchesMessages, savedSearches } from "./utils/SavedSearchesComponentMessages";
+import { FtChip } from "@fluid-topics/ft-chip";
+class FtSearchSavedSearch extends withI18n(FtSearchComponent) {
+    constructor() {
+        super();
+        this.showDescription = false;
+        this.showSearchFilters = false;
+        this.showSearchButton = false;
+        this.showAlertStatus = false;
+        this.selected = false;
+        this.addI18nContext(savedSearches, defaultSavedSearchesMessages);
+    }
+    render() {
+        var _a;
+        return html `
+            <ft-card title="${(_a = this.search) === null || _a === void 0 ? void 0 : _a.title}" clickable ?selected="${this.selected}">
+                ${this.renderAlertStatus()}
+                <div id="container">
+                    ${this.renderDescription()}
+                    ${this.renderSearchFilters()}
+                    ${this.renderSearchButton()}
+                </div>
+            </ft-card>
+        `;
+    }
+    renderDescription() {
+        var _a;
+        return this.showDescription ? html `<div id="description" class="content">${(_a = this.search) === null || _a === void 0 ? void 0 : _a.description}</div>` : nothing;
+    }
+    renderSearchButton() {
+        return this.showSearchButton ? html `<div id="searchButton" class="content"><ft-button id="search" icon="search">${savedSearches.messages.search()}</ft-button></div>` : nothing;
+    }
+    renderAlertStatus() {
+        var _a;
+        return this.showAlertStatus && ((_a = this.search) === null || _a === void 0 ? void 0 : _a.alert) ? html `<ft-icon id="alertStatus" slot="header">alert</ft-icon>` : nothing;
+    }
+    // See net.antidot.fluidtopics.client.application.mylibrary.shared.MyLibraryTagWidgetFactory.createMySearchTags
+    renderSearchFilters() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return this.showSearchFilters ? html `<div id="searchFilters" class="content">
+            ${((_b = (_a = this.search) === null || _a === void 0 ? void 0 : _a.searchRequest.query.length) !== null && _b !== void 0 ? _b : 0 > 0) ? this.renderMetadata(savedSearches.messages.keywords(), (_c = this.search) === null || _c === void 0 ? void 0 : _c.searchRequest.query, true) : nothing}
+            ${(_d = this.search) === null || _d === void 0 ? void 0 : _d.searchRequest.filters.map(f => this.renderMetadata(f.label, f.values))}
+            ${((_g = (_f = (_e = this.search) === null || _e === void 0 ? void 0 : _e.searchRequest.contentLocale) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0 > 0) ? this.renderMetadata(savedSearches.messages.language(), (_h = this.search) === null || _h === void 0 ? void 0 : _h.searchRequest.contentLocale, true) : nothing}
+            ${((_l = (_k = (_j = this.search) === null || _j === void 0 ? void 0 : _j.searchRequest.sort[0]) === null || _k === void 0 ? void 0 : _k.key.length) !== null && _l !== void 0 ? _l : 0 > 0) ? this.renderMetadata(savedSearches.messages.sort(), this.mapSortKey((_m = this.search) === null || _m === void 0 ? void 0 : _m.searchRequest.sort[0].key), true) : nothing}
+            ${((_o = this.search) === null || _o === void 0 ? void 0 : _o.searchRequest.periodFilter) ? this.renderMetadata(savedSearches.messages.period(), this.mapPeriodFilter((_p = this.search) === null || _p === void 0 ? void 0 : _p.searchRequest.periodFilter), true) : nothing}
+        </div>` : nothing;
+    }
+    renderMetadata(key, values, highlighted = false) {
+        return html `<ft-chip dense ?highlighted=${highlighted}><span class="metadata-label">${key}</span><span class="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 "--";
+        }
+    }
+}
+FtSearchSavedSearch.elementDefinitions = {
+    "ft-icon": FtIcon,
+    "ft-card": FtCard,
+    "ft-chip": FtChip,
+    "ft-button": FtButton
+};
+FtSearchSavedSearch.styles = css `
+      ft-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)};
+      }
+
+      ft-card[selected] {
+        ${setVariable(FtRippleCssVariables.backgroundColor, FtSearchSavedSearchesCssVariables.activeSearchBackgroundColor)};
+      }
+
+      #search {
+        ${setVariable(FtButtonCssVariables.color, FtSearchSavedSearchesCssVariables.inactiveButtonTextColor)};
+      }
+
+      ft-card[selected] #search {
+        ${setVariable(FtButtonCssVariables.color, FtSearchSavedSearchesCssVariables.activeButtonTextColor)};
+      }
+
+      #searchFilters {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+      }
+
+      .content {
+        margin-bottom: 8px;
+      }
+
+      .content:last-child {
+        margin-bottom: 0;
+      }
+
+      ft-card::part(header) {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .metadata-label:after {
+        content: ":";
+        margin-right: 0.4em;
+        margin-left: 0.2em;
+      }
+    `;
+__decorate([
+    property()
+], FtSearchSavedSearch.prototype, "search", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSavedSearch.prototype, "showDescription", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSavedSearch.prototype, "showSearchFilters", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSavedSearch.prototype, "showSearchButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSavedSearch.prototype, "showAlertStatus", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSavedSearch.prototype, "selected", void 0);
+export { FtSearchSavedSearch };

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

@@ -0,0 +1,15 @@
+export declare const FtSearchSavedSearchesCssVariables: {
+    activeButtonTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    activeSearchBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    activeSearchBorderStyle: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    activeSearchBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    activeSearchBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    activeSearchBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    inactiveButtonTextColor: 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;
+};
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,27 @@
+var _a, _b, _c, _d;
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+import { FtCardCssVariables } from "@fluid-topics/ft-card";
+export const FtSearchSavedSearchesCssVariables = {
+    activeButtonTextColor: FtCssVariableFactory.extend("--ft-search-saved-searches-active-button-text-color", designSystemVariables.colorPrimary),
+    activeSearchBackgroundColor: FtCssVariableFactory.extend("--ft-search-saved-searches-active-search-background-color", designSystemVariables.colorContent),
+    activeSearchBorderStyle: FtCssVariableFactory.create("--ft-search-saved-searches-active-search-border-style", "UNKNOWN", (_a = FtCardCssVariables.selectedOutlineStyle.lastResortDefaultValue()) !== null && _a !== void 0 ? _a : "solid"),
+    activeSearchBorderColor: FtCssVariableFactory.extend("--ft-search-saved-searches-active-search-border-color", designSystemVariables.colorPrimary),
+    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),
+    inactiveSearchBackgroundColor: FtCssVariableFactory.extend("--ft-search-saved-searches-inactive-search-background-color", designSystemVariables.colorContent),
+    inactiveSearchBorderStyle: FtCssVariableFactory.create("--ft-search-saved-searches-inactive-search-border-style", "UNKNOWN", (_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),
+};
+// language=CSS
+export const styles = css `
+    #container {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        margin: 3px;
+    }
+`;

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

@@ -0,0 +1,30 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtSearchSavedSearchesProperties } from "./ft-search-saved-searches.properties";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+declare const FtSearchSavedSearches_base: typeof FtSearchComponent & (new (...args: any[]) => import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface);
+export declare class FtSearchSavedSearches extends FtSearchSavedSearches_base implements FtSearchSavedSearchesProperties {
+    static styles: import("lit").CSSResult;
+    showDescription: boolean;
+    showSearchFilters: boolean;
+    showSearchButton: boolean;
+    showAlertStatus: boolean;
+    private savedSearches?;
+    private user?;
+    private request?;
+    private editorMode;
+    private requiredRole;
+    static elementDefinitions: ElementDefinitionsMap;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    private get userHasRights();
+    private get isEmpty();
+    private isSelected;
+    private mapFtSearchSortCriterion;
+    private toFtSearchRequest;
+    private mapSearchFilter;
+    connectedCallback(): void;
+    private setSearch;
+    protected update(changedProperties: PropertyValues): void;
+}
+export {};

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

@@ -0,0 +1,151 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { property } from "lit/decorators.js";
+import { deepEqual, redux } 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 { 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";
+class FtSearchSavedSearches extends withI18n(FtSearchComponent) {
+    constructor() {
+        super();
+        this.showDescription = false;
+        this.showSearchFilters = false;
+        this.showSearchButton = false;
+        this.showAlertStatus = false;
+        this.editorMode = false;
+        this.requiredRole = FtUserRole.SAVED_SEARCH_USER;
+        this.addStore(ftAppInfoStore);
+        this.addStore(ftUserAssetsStore);
+        this.addI18nContext(savedSearches, defaultSavedSearchesMessages);
+    }
+    render() {
+        var _a;
+        if (this.editorMode && !this.userHasRights) {
+            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>
+            `;
+        }
+        else {
+            return html `
+                <style>
+                    :host {
+                        display: none !important;
+                    }
+                </style>
+            `;
+        }
+    }
+    get userHasRights() {
+        var _a;
+        return !!((_a = this.user) === null || _a === void 0 ? void 0 : _a.roles.includes(this.requiredRole));
+    }
+    get isEmpty() {
+        var _a;
+        return ((_a = this.savedSearches) !== null && _a !== void 0 ? _a : []).length == 0;
+    }
+    isSelected(mySearchRequest) {
+        var _a;
+        const request = (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.store.getState().request;
+        return request != undefined
+            && deepEqual(request.query, mySearchRequest.query)
+            && deepEqual([...request.filters], [...mySearchRequest.filters])
+            && deepEqual([...request.sort].map(this.mapFtSearchSortCriterion), [...mySearchRequest.sort].map(this.mapFtSearchSortCriterion))
+            && deepEqual(request.contentLocale, mySearchRequest.contentLocale)
+            && deepEqual(request.periodFilter, mySearchRequest.periodFilter);
+    }
+    mapFtSearchSortCriterion(s) {
+        return { ...s };
+    }
+    toFtSearchRequest(mySearchRequest) {
+        return this.stateManager == undefined ? undefined : {
+            ...this.stateManager.store.getState().request,
+            periodFilter: mySearchRequest.periodFilter,
+            query: mySearchRequest.query,
+            filters: mySearchRequest.filters.map(this.mapSearchFilter),
+            sort: mySearchRequest.sort,
+            contentLocale: mySearchRequest.contentLocale,
+        };
+    }
+    mapSearchFilter(f) {
+        return { key: f.key,
+            values: f.values,
+            negative: f.negative
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        userAssetsActions.reloadMySearches();
+    }
+    setSearch(mySearchRequest) {
+        var _a;
+        const ftSearchRequest = this.toFtSearchRequest(mySearchRequest);
+        if (ftSearchRequest != undefined)
+            (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setRequest(ftSearchRequest);
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if ((changedProperties.has("user") || changedProperties.has("savedSearches"))
+            && this.savedSearches == undefined) {
+            userAssetsActions.reloadMySearches();
+        }
+    }
+}
+FtSearchSavedSearches.styles = styles;
+FtSearchSavedSearches.elementDefinitions = {
+    "ft-search-saved-search": FtSearchSavedSearch,
+    "ft-typography": FtTypography
+};
+__decorate([
+    property({ type: Boolean })
+], FtSearchSavedSearches.prototype, "showDescription", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSavedSearches.prototype, "showSearchFilters", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSavedSearches.prototype, "showSearchButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSavedSearches.prototype, "showAlertStatus", void 0);
+__decorate([
+    redux({ store: ftUserAssetsStore.name })
+], FtSearchSavedSearches.prototype, "savedSearches", void 0);
+__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: "search" })
+], FtSearchSavedSearches.prototype, "request", void 0);
+__decorate([
+    redux({ store: ftAppInfoStore.name })
+], FtSearchSavedSearches.prototype, "editorMode", void 0);
+export { FtSearchSavedSearches };