From 399635908a776984488444a4d8e6780d2429422b Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Mon, 9 Nov 2020 22:13:18 +0100
Subject: [PATCH] #94 [profile] better flags widget interface

---
 components/ButtonList.vue   | 27 +++++++++++++++++++++++++--
 locale/pl/translations.suml |  1 +
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/components/ButtonList.vue b/components/ButtonList.vue
index 5be50c2f4..75fadbe77 100644
--- a/components/ButtonList.vue
+++ b/components/ButtonList.vue
@@ -7,13 +7,33 @@
                     <slot v-bind:v="val" v-bind:desc="options[val]">
                         {{ val }}
                     </slot>
+                    <a href="#" class="text-danger" @click.prevent="$emit('input', iVal.filter(v => v !== val))">
+                        <Icon v="times"/>
+                    </a>
                 </a>
             </li>
+            <li slot="footer" class="list-inline-item py-1">
+                <div class="input-group">
+                    <input v-model="search" class="form-control form-control-sm" :placeholder="$t('crud.search')"/>
+                    <div class="input-group-append">
+                        <button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
+                            <Icon v="times"/>
+                        </button>
+
+                        <button v-if="all" type="button" class="btn btn-light btn-sm border" @click.prevent="all = false">
+                            <Icon v="caret-up"/>
+                        </button>
+                        <button v-else type="button" class="btn btn-light btn-sm border" @click.prevent="all = true">
+                            <Icon v="caret-down"/>
+                        </button>
+                    </div>
+                </div>
+            </li>
         </draggable>
 
         <draggable tag="ul" v-model="remainingOptions" ghostClass="ghost" @end="$emit('input', iVal)" class="list-inline" :group="ulid">
-            <li v-for="val in remainingOptions" class="list-inline-item py-1">
-                <a href="#" class="badge badge-light p-2" @click.prevent>
+            <li v-for="val in remainingOptions" v-if="all || (search && options[val].toLowerCase().includes(search))" class="list-inline-item py-1">
+                <a href="#" class="badge badge-light p-2" @click.prevent="$emit('input', [...iVal, val])">
                     <slot v-bind:v="val" v-bind:desc="options[val]">
                         {{ val }}
                     </slot>
@@ -40,12 +60,15 @@
                 iVal: this.value,
                 remainingOptions: this.buildRemainingOptions(),
                 ulid: ulid(),
+                search: '',
+                all: false,
             }
         },
         watch: {
             value() {
                 this.iVal = this.value;
                 this.remainingOptions = this.buildRemainingOptions();
+                this.search = '';
             },
         },
         methods: {
diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml
index c8452f09e..4727fa1a5 100644
--- a/locale/pl/translations.suml
+++ b/locale/pl/translations.suml
@@ -765,6 +765,7 @@ crud:
     add: 'Dodaj'
     filter: 'Filtruj'
     filterLong: 'Filtruj listę…'
+    search: 'Szukaj…'
 
 beta: >
     Strona jest w wersji βeta!