From 9c799e3dc9fd29a92687a502867c73fdc8129354 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 28 Jan 2021 17:09:37 +0200
Subject: [PATCH] Added search to slot fill dialog

---
 .../ui/components/global/TextField.vue        |  1 +
 .../ui/creature/slots/SlotFillDialog.vue      | 42 +++++++++++++++++--
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/app/imports/ui/components/global/TextField.vue b/app/imports/ui/components/global/TextField.vue
index 337543e8..fcbe9fad 100644
--- a/app/imports/ui/components/global/TextField.vue
+++ b/app/imports/ui/components/global/TextField.vue
@@ -10,6 +10,7 @@
     @input="input"
     @focus="focused = true"
     @blur="focused = false"
+    @keyup="e => $emit('keyup', e)"
   />
 </template>
 
diff --git a/app/imports/ui/creature/slots/SlotFillDialog.vue b/app/imports/ui/creature/slots/SlotFillDialog.vue
index 8820c1e0..89329cbe 100644
--- a/app/imports/ui/creature/slots/SlotFillDialog.vue
+++ b/app/imports/ui/creature/slots/SlotFillDialog.vue
@@ -7,8 +7,20 @@
       <v-toolbar-title>
         {{ model.name }}
       </v-toolbar-title>
+      <v-spacer />
+      <text-field
+        prepend-inner-icon="search"
+        regular
+        hide-details
+        :value="searchValue"
+        :debounce="200"
+        @change="searchChanged"
+        @keyup.enter="insert"
+      />
     </template>
-    <div class="library-nodes">
+    <div
+      class="library-nodes"
+    >
       <v-fade-transition mode="out-in">
         <column-layout
           v-if="$subReady.slotFillers && libraryNodes && libraryNodes.length"
@@ -58,10 +70,16 @@
         >
           <h4>
             Nothing suitable was found in your libraries
+            <span v-if="searchValue">
+              matching "{{ searchValue }}"
+            </span>
           </h4>
           <p>
             This slot requires a {{ slotPropertyTypeName }}
-            <template v-if="model.slotTags.length">
+            <template v-if="model.slotTags.length == 1">
+              with the tag <code>{{ model.slotTags[0] }}</code>,
+            </template>
+            <template v-else-if="model.slotTags.length > 1">
               with the following tags:
               <span
                 v-for="(tag, index) in model.slotTags"
@@ -71,7 +89,7 @@
               </span>
             </template>
             <span v-if="model.spaceLeft">
-              that fills less than {{ model.spaceLeft }} slots
+              that fills less than {{ model.spaceLeft }} {{ model.spaceLeft == 1 && 'slot' || 'slots' }}
             </span>
           </p>
         </div>
@@ -99,7 +117,7 @@
       <v-btn
         flat
         :disabled="!selectedNode"
-        @click="$store.dispatch('popDialogStack', selectedNode)"
+        @click="insert"
       >
         Insert
       </v-btn>
@@ -138,6 +156,7 @@ export default {
   },
   data(){return {
     selectedNode: undefined,
+    searchValue: undefined,
   }},
   computed: {
     slotPropertyTypeName(){
@@ -158,6 +177,15 @@ export default {
       let prop = PROPERTIES[model.type]
       return prop && prop.name;
     },
+    searchChanged(val, ack){
+      this.selectedNode = undefined;
+      this.searchValue = val;
+      setTimeout(ack, 200);
+    },
+    insert(){
+      if (!this.selectedNode) return;
+      this.$store.dispatch('popDialogStack', this.selectedNode);
+    }
   },
   meteor: {
     $subscribe: {
@@ -175,6 +203,12 @@ export default {
       let filter = {
         removed: {$ne: true},
       };
+      if (this.searchValue){
+        filter.name = {
+          $regex: this.searchValue.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'),
+          $options: 'i'
+        };
+      }
       if (this.model.slotTags && this.model.slotTags.length){
         filter.tags = {$all: this.model.slotTags};
       }