From edc9c5f76a4abaae6ccd6e899d94cca7b94afe49 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Tue, 16 Jun 2020 12:31:04 +0200
Subject: [PATCH] fixes for picker

---
 zero.Web.UI/App/components/forms/form.vue   | 22 ++++-
 zero.Web.UI/App/components/forms/search.vue |  6 +-
 zero.Web.UI/App/components/pickers/pick.vue | 97 +++++++++++++++------
 3 files changed, 94 insertions(+), 31 deletions(-)

diff --git a/zero.Web.UI/App/components/forms/form.vue b/zero.Web.UI/App/components/forms/form.vue
index c1921254..f14b875f 100644
--- a/zero.Web.UI/App/components/forms/form.vue
+++ b/zero.Web.UI/App/components/forms/form.vue
@@ -1,5 +1,5 @@
 <template>
-  <form class="ui-form" @submit.prevent="onSubmit" @change="onChange">
+  <form class="ui-form" @keydown="onKeydown" @submit.prevent="onSubmit" @change="onChange">
     <slot v-if="loadingState === 'default'" v-bind="slotProps" />
     <div v-if="loadingState == 'loading'" class="ui-form-loading">
       <i class="ui-form-loading-progress"></i>
@@ -37,7 +37,8 @@
       isShared: false,
       slotProps: {
         state: null
-      }
+      },
+      submitBlocked: false
     }),
 
     watch: {
@@ -178,7 +179,10 @@
       // submits the form
       onSubmit(e)
       {
-        this.$emit('submit', this, e);
+        if (!this.submitBlocked)
+        {
+          this.$emit('submit', this, e);
+        }
       },
 
 
@@ -189,6 +193,18 @@
       },
 
 
+      // prevent submission of form on enter key press
+      onKeydown(e)
+      {
+        if (e.keyCode === 13)
+        {
+          this.submitBlocked = true;
+          clearTimeout(this.submitBlockedTimeout);
+          this.submitBlockedTimeout = setTimeout(() => this.submitBlocked = false, 300);
+        }
+      },
+
+
       // set dirty status
       setDirty(dirty)
       {
diff --git a/zero.Web.UI/App/components/forms/search.vue b/zero.Web.UI/App/components/forms/search.vue
index d4ae6a9c..448ed03d 100644
--- a/zero.Web.UI/App/components/forms/search.vue
+++ b/zero.Web.UI/App/components/forms/search.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="ui-searchinput">
     <input ref="input" type="search" :value="value" @input="onChange" @keyup.enter="onSubmit" class="ui-input" v-localize:placeholder="placeholder" />
-    <button type="button" class="ui-searchinput-button" v-localize:title="'@ui.search.button'" @click="onSubmit"><i class="fth-search"></i></button>
+    <slot name="button" v-bind="{ onSubmit: onSubmit }">
+      <button type="button" class="ui-searchinput-button" v-localize:title="'@ui.search.button'" @click="onSubmit"><i class="fth-search"></i></button>
+    </slot>
   </div>
 </template>
 
@@ -35,7 +37,7 @@
 
       onSubmit(ev)
       {
-        this.$emit('submit', this.$refs.input.value)
+        this.$emit('submit', this.$refs.input.value);
       },
 
       focus()
diff --git a/zero.Web.UI/App/components/pickers/pick.vue b/zero.Web.UI/App/components/pickers/pick.vue
index 25822429..9b503310 100644
--- a/zero.Web.UI/App/components/pickers/pick.vue
+++ b/zero.Web.UI/App/components/pickers/pick.vue
@@ -32,7 +32,11 @@
       </div>
 
       <!-- search -->
-      <ui-search v-if="configuration.search.enabled" ref="search" class="ui-pick-overlay-search" :value="searchValue" @input="onSearch" @submit="onSearchSubmit" />
+      <ui-search v-if="configuration.search.enabled" ref="search" class="ui-pick-overlay-search" :value="searchValue" @input="onSearch" @submit="onSearchSubmit">
+        <template v-slot:button="search" v-if="configuration.autocomplete">
+          <button type="button" class="ui-searchinput-button" v-localize:title="'@ui.search.button'" @click="search.onSubmit"><i class="fth-check"></i></button>
+        </template>
+      </ui-search>
 
       <!-- items -->
       <div class="ui-pick-overlay-items">
@@ -72,6 +76,8 @@
     autocomplete: false,  
     // maximum selection count
     limit: 10,
+    // multiple selection
+    multiple: true,
     // whether the previews/results are sortable or not
     sortable: true,
     // close picker when an item is clicked
@@ -158,29 +164,27 @@
     watch: {
       config: {
         deep: true,
-        handler()
+        handler(newval, oldval)
         {
-          this.buildConfig();
-          this.loaded = false;
+          if (JSON.stringify(newval) !== JSON.stringify(oldval))
+          {
+            this.buildConfig();
+            this.loaded = false;
+          }
         }
       },
       value(val)
       {
-        if (this.multiple)
-        {
-          this.selected = _isArray(val) && val.length ? _clone(val) : [];
-        }
-        else
-        {
-          this.selected = val ? [val] : [];
-        }
-
-        this.loadPreviews();
+        this.onValueChanged(val);
       }
     },
 
 
     computed: {
+      multiple()
+      {
+        return this.configuration.multiple;
+      },
       canAdd()
       {
         return (!this.value && !this.multiple) || (!this.value || this.value.length < this.configuration.limit);
@@ -189,10 +193,6 @@
       {
         return typeof this.configuration.items === 'function';
       },
-      multiple()
-      {
-        return this.configuration.limit > 1;
-      },
       title()
       {
         if (!!this.configuration.title) return this.configuration.title;
@@ -231,11 +231,27 @@
     {
       this.buildConfig();
       this.debouncedUpdate = _debounce(this.loadSuggestions, 300);
+      this.onValueChanged(this.value);
     },
 
 
     methods: {
 
+      onValueChanged(val)
+      {
+        if (this.multiple)
+        {
+          this.selected = _isArray(val) && val.length ? _clone(val) : [];
+        }
+        else
+        {
+          this.selected = val ? [val] : [];
+        }
+
+        this.loadPreviews();
+      },
+
+
       buildConfig()
       {
         var config = JSON.parse(JSON.stringify(defaultConfig));
@@ -371,6 +387,12 @@
             this.selected.forEach(id =>
             {
               let res = _find(this.items, item => item.id === id);
+
+              if (!res)
+              {
+                // TODO push error output
+              }
+
               this.previews.push(_clone(res));
             });
           }
@@ -378,17 +400,31 @@
           {
             this.previews = items;
           }
+
+          //console.info(JSON.parse(JSON.stringify(this.previews)));
         };
 
-        let promise = this.configuration.previews || this.configuration.items;
-
-        if (typeof promise === 'function')
+        if (this.configuration.autocomplete)
         {
-          promise(this.selected).then(onLoaded, false);
+          onLoaded(_map(this.selected, s =>
+          {
+            let item = { id: s };
+            item[this.configuration.keys.name] = s;
+            return item;
+          }), false);
         }
         else
         {
-          onLoaded(promise, true);
+          let promise = this.configuration.previews || this.configuration.items;
+
+          if (typeof promise === 'function')
+          {
+            promise(this.selected).then(onLoaded);
+          }
+          else
+          {
+            onLoaded(promise, true);
+          }
         }
       },
 
@@ -409,7 +445,11 @@
 
       onSearchSubmit()
       {
-
+        let value = this.searchValue.trim();
+        let item = {};
+        item.id = value;
+        item[this.configuration.keys.name] = value;
+        this.select(item);
       },
 
 
@@ -421,7 +461,12 @@
         {
           if (!this.canAdd)
           {
-            return;
+            if (this.limit > 1)
+            {
+              return;
+            }
+
+            this.selected = [];
           }
 
           var index = this.selected.indexOf(value);
@@ -442,7 +487,7 @@
         else
         {
           this.selected = [value];
-          this.onChange(value, 0);
+          this.onChange(value);
           this.onSelected(value, item);
         }
       },