web/elements: make SearchSelect optionally blankable

closes #2504

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-03-16 10:12:40 +01:00
parent 1f6af8c221
commit 42389188ad
3 changed files with 22 additions and 1 deletions

View file

@ -137,6 +137,6 @@ install:
cd website && npm i cd website && npm i
a: install a: install
tmux -CC \ tmux \
new-session 'make run' \; \ new-session 'make run' \; \
split-window 'make web-watch' split-window 'make web-watch'

View file

@ -26,6 +26,9 @@ export class SearchSelect<T> extends LitElement {
@property({ type: Boolean }) @property({ type: Boolean })
open = false; open = false;
@property({ type: Boolean })
blankable = false;
@property() @property()
placeholder: string = t`Select an object.`; placeholder: string = t`Select an object.`;
@ -82,6 +85,22 @@ export class SearchSelect<T> extends LitElement {
</div> </div>
<ul class="pf-c-select__menu" role="listbox" ?hidden="${!this.open}"> <ul class="pf-c-select__menu" role="listbox" ?hidden="${!this.open}">
${this.blankable
? html`
<li role="presentation">
<button
class="pf-c-select__menu-item"
role="option"
@click=${() => {
this.selectedObject = undefined;
this.open = false;
}}
>
---------
</button>
</li>
`
: html``}
${this.objects.map((obj) => { ${this.objects.map((obj) => {
return html` return html`
<li role="presentation"> <li role="presentation">

View file

@ -228,6 +228,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
.selected=${(group: Group): boolean => { .selected=${(group: Group): boolean => {
return group.pk === this.instance?.group; return group.pk === this.instance?.group;
}} }}
?blankable=${true}
> >
</ak-search-select> </ak-search-select>
${this.policyOnly ${this.policyOnly
@ -262,6 +263,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
.selected=${(user: User): boolean => { .selected=${(user: User): boolean => {
return user.pk === this.instance?.user; return user.pk === this.instance?.user;
}} }}
?blankable=${true}
> >
</ak-search-select> </ak-search-select>
${this.policyOnly ${this.policyOnly