web/elements: make SearchSelect optionally blankable

closes #2504

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

Makefile

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

web/src/elements/SearchSelect.ts

@@ -26,6 +26,9 @@ export class SearchSelect<T> extends LitElement {
     @property({ type: Boolean })
     open = false;
 
+    @property({ type: Boolean })
+    blankable = false;
+
     @property()
     placeholder: string = t`Select an object.`;
 
@@ -82,6 +85,22 @@ export class SearchSelect<T> extends LitElement {
             </div>
 
             <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) => {
                     return html`
                         <li role="presentation">

web/src/pages/policies/PolicyBindingForm.ts

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