Documentation for Et2FavoritesMenu

This commit is contained in:
nathan 2024-06-12 14:47:13 -06:00
parent 95f1034abd
commit 7ea76b2e12
2 changed files with 35 additions and 6 deletions

View File

@ -0,0 +1,5 @@
```html:preview
<et2-favorites-menu>
</et2-favorites-menu>
```

View File

@ -1,4 +1,4 @@
import {css, html, LitElement, TemplateResult} from "lit";
import {css, html, LitElement, nothing, TemplateResult} from "lit";
import {customElement} from "lit/decorators/custom-element.js";
import {Et2Widget} from "../Et2Widget/Et2Widget";
import {Favorite} from "./Favorite";
@ -6,10 +6,19 @@ import {property} from "lit/decorators/property.js";
import {until} from "lit/directives/until.js";
import {repeat} from "lit/directives/repeat.js";
/**
* @summary A menu listing a user's favorites. Populated from the user's preferences.
*
* @dependency sl-menu
* @dependency sl-menu-item
* @dependency sl-menu-label
* @dependency et2-image
*
* @slot - Add additional menu items
*/
@customElement("et2-favorites-menu")
export class Et2FavoritesMenu extends Et2Widget(LitElement)
{
static get styles()
{
return [
@ -29,10 +38,21 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
]
};
/**
* The current application we're showing favorites for.
*
* @type {string}
*/
@property()
application : string;
private favorites : { [name : string] : Favorite }
private favorites : { [name : string] : Favorite } = {
'blank': {
name: typeof this.egw()?.lang == "function" ? this.egw().lang("No filters") : "No filters",
state: {},
group: false
}
};
private loadingPromise = Promise.resolve();
connectedCallback()
@ -76,12 +96,12 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
protected menuItemTemplate(name : string, favorite : Favorite) : TemplateResult
{
let is_admin = (typeof this.egw().app('admin') != "undefined");
let is_admin = (typeof this.egw()?.app == "function") && (typeof this.egw()?.app('admin') != "undefined");
//@ts-ignore option.group does not exist
let icon = (favorite.group !== false && !is_admin || ['blank', '~add~'].includes(name)) ? "" : html`
<et2-image slot="suffix" src="trash" icon @click=${this.handleDelete}
statustext="${this.egw().lang("Delete")}"></et2-image>`;
statustext="${this.egw()?.lang("Delete") ?? "Delete"}"></et2-image>`;
return html`
<sl-menu-item value="${name}">
@ -93,7 +113,8 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
protected loadingTemplate()
{
return html`
<sl-menu-item loading>${this.egw().lang("Loading")}</sl-menu-item>`;
<sl-menu-item loading>${typeof this.egw()?.lang == "function" ? this.egw().lang("Loading") : "Loading"}
</sl-menu-item>`;
}
render()
@ -104,7 +125,10 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
<sl-menu
@sl-select=${this.handleSelect}
>
${this.label ? html`
<sl-menu-label>${this.label}</sl-menu-label>` : nothing}
${repeat(Object.keys(this.favorites), (i) => this.menuItemTemplate(i, this.favorites[i]))}
<slot></slot>
</sl-menu>
`;
});