From 42389188adb7f968d9e64684ce7abb1fed83ec82 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 16 Mar 2022 10:12:40 +0100
Subject: [PATCH] web/elements: make SearchSelect optionally blankable

closes #2504

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 Makefile                                    |  2 +-
 web/src/elements/SearchSelect.ts            | 19 +++++++++++++++++++
 web/src/pages/policies/PolicyBindingForm.ts |  2 ++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/Makefile b/Makefile
index 9432eea18..524065482 100644
--- a/Makefile
+++ b/Makefile
@@ -137,6 +137,6 @@ install:
 	cd website && npm i
 
 a: install
-	tmux -CC \
+	tmux \
 		new-session 'make run' \; \
 		split-window 'make web-watch'
diff --git a/web/src/elements/SearchSelect.ts b/web/src/elements/SearchSelect.ts
index 6b056b98b..bf9953ba7 100644
--- a/web/src/elements/SearchSelect.ts
+++ b/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">
diff --git a/web/src/pages/policies/PolicyBindingForm.ts b/web/src/pages/policies/PolicyBindingForm.ts
index e8c1ed330..52dea9ddb 100644
--- a/web/src/pages/policies/PolicyBindingForm.ts
+++ b/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