search for iconpicker

zero.Web/App/Components/Forms/search.vue

@@ -48,8 +48,7 @@
 
     .ui-input
     {
-      display: inline-block;
-      width: auto;
+      display: block;
       min-width: 320px;
       padding-right: 40px;
     }

zero.Web/App/Components/pickers/iconPicker/overlay.vue

@@ -4,11 +4,13 @@
       <ui-header-bar :title="config.title" :back-button="false" :close-button="true" />
     </template>
     <template v-slot:footer>
-      <ui-button type="white" :label="config.closeLabel" @click="config.close"></ui-button>
+      <ui-button type="white" :label="config.closeLabel" @click="config.hide"></ui-button>
     </template>
 
+    <ui-search class="ui-iconpicker-overlay-search" v-model="query" />
+
     <div class="ui-iconpicker-overlay-items" :class="color">
-      <button v-for="item in config.items" type="button" class="ui-iconpicker-overlay-item" :class="{ 'is-active': item === icon }" :title="item" @click="select(item)">
+      <button v-for="item in items" type="button" class="ui-iconpicker-overlay-item" :class="{ 'is-active': item === icon }" :title="item" @click="select(item)">
         <i :class="item"></i>
       </button>
     </div>
@@ -17,6 +19,8 @@
 
 
 <script>
+  import { debounce as _debounce, filter as _filter } from 'underscore';
+
   export default {
 
     props: {
@@ -26,18 +30,26 @@
 
     data: () => ({
       icon: null,
-      color: null
+      color: null,
+      query: '',
+      items: []
     }),
 
     watch: {
       model()
       {
         this.init();
+      },
+      query()
+      {
+        this.debouncedSearch();
       }
     },
 
-    mounted()
+    created()
     {
+      this.debouncedSearch = _debounce(this.search, 100);
+      this.items = this.config.items;
       this.init();
     },
 
@@ -68,6 +80,23 @@
           this.icon = parts[0];
           this.color = parts.length > 1 ? parts[1] : null;
         }
+      },
+
+      search()
+      {
+        const query = this.query;
+
+        if (!query)
+        {
+          this.items = this.config.items;
+        }
+        else
+        {
+          this.items = _filter(this.config.items, function (item)
+          {
+            return item.toLowerCase().indexOf(query) > -1;
+          })
+        }
       }
     }
   }
@@ -107,4 +136,9 @@
       border-color: var(--color-line);
     }*/
   }
+
+  .ui-iconpicker-overlay-search
+  {
+    margin-bottom: 20px;
+  }
 </style>

zero.Web/Mapper/UserMapperConfig.cs

@@ -44,7 +44,7 @@ namespace zero.Web.Mapper
         target.Name = source.Name;
         target.IsActive = source.IsActive && (!source.LockoutEnabled || !source.LockoutEnd.HasValue);
         target.Email = source.Email;
-        target.Avatar = "http://localhost:14051/media/UserAvatars/09eb6d4d41894a44a9585b94bf9cff41.jpg?width=50&height=50&mode=crop"; // TODO //source.Avatar?.Source;
+        target.Avatar = "https://fifty.brothers.studio/Media/Avatars/tobi.jpg"; // TODO //source.Avatar?.Source;
         target.Roles = String.Join(", ", source.Roles); // TODO get name from alias
       });