extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 14:41:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Documentation for Et2FavoritesMenu

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
api/js/etemplate/Et2Favorites/Et2FavoritesMenu.md Normal file
View File

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

36
api/js/etemplate/Et2Favorites/Et2FavoritesMenu.ts
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 {customElement} from "lit/decorators/custom-element.js";
import {Et2Widget} from "../Et2Widget/Et2Widget"; import {Et2Widget} from "../Et2Widget/Et2Widget";
import {Favorite} from "./Favorite"; import {Favorite} from "./Favorite";
@ -6,10 +6,19 @@ import {property} from "lit/decorators/property.js";
import {until} from "lit/directives/until.js"; import {until} from "lit/directives/until.js";
import {repeat} from "lit/directives/repeat.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") @customElement("et2-favorites-menu")
export class Et2FavoritesMenu extends Et2Widget(LitElement) export class Et2FavoritesMenu extends Et2Widget(LitElement)
{ {
static get styles() static get styles()
{ {
return [ return [
@ -29,10 +38,21 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
] ]
}; };
/**
* The current application we're showing favorites for.
*
* @type {string}
*/
@property() @property()
application : string; 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(); private loadingPromise = Promise.resolve();
connectedCallback() connectedCallback()
@ -76,12 +96,12 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
protected menuItemTemplate(name : string, favorite : Favorite) : TemplateResult 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 //@ts-ignore option.group does not exist
let icon = (favorite.group !== false && !is_admin || ['blank', '~add~'].includes(name)) ? "" : html` let icon = (favorite.group !== false && !is_admin || ['blank', '~add~'].includes(name)) ? "" : html`
<et2-image slot="suffix" src="trash" icon @click=${this.handleDelete} <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` return html`
<sl-menu-item value="${name}"> <sl-menu-item value="${name}">
@ -93,7 +113,8 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
protected loadingTemplate() protected loadingTemplate()
{ {
return html` 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() render()
@ -104,7 +125,10 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
<sl-menu <sl-menu
@sl-select=${this.handleSelect} @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]))} ${repeat(Object.keys(this.favorites), (i) => this.menuItemTemplate(i, this.favorites[i]))}
<slot></slot>
</sl-menu> </sl-menu>
`; `;
}); });