[feature] typeahead for command list

- adds typeahead component for selecting command on edit task form

Author: roshangautam

public/css/app.css

@@ -9,6 +9,8 @@ import TaskOutput from './tasks/components/TaskOutput.vue';
 import StatusButton from './tasks/components/StatusButton.vue';
 import ExecuteButton from './tasks/components/ExecuteButton.vue';
 import ImportButton from './tasks/components/ImportButton'
+import CommandList from './tasks/components/CommandList'
+import ClickToClose from "./components/ClickToClose";
 
 Promise.delay = function (time) {
   return new Promise((resolve, reject) => {
@@ -50,7 +52,9 @@ new Vue({
     'execute-button': ExecuteButton,
     'import-button': ImportButton,
     'task-type' : TaskType,
-    'task-output' : TaskOutput
+    'task-output' : TaskOutput,
+    'click-to-close' : ClickToClose,
+    'command-list' : CommandList
   },
   mounted() {
     UIkit.use(Icons);

public/css/app.css.map

@@ -0,0 +1,22 @@
+<script>
+  export default {
+    name: 'ClickToClose',
+    props: ['do'],
+    mounted() {
+      const listener = (e) => {
+        if (e.target === this.$el || this.$el.contains(e.target)) {
+          return;
+        }
+
+        this.do();
+      };
+
+      document.addEventListener('click', listener);
+
+      this.$once('hook:beforeDestroy', () => document.removeEventListener('click', listener));
+    },
+    render() {
+      return this.$slots.default[0];
+    },
+  };
+</script>

public/js/app.js

@@ -27,7 +27,7 @@
     },
     mounted() {
       document.addEventListener("keydown", (e) => {
-        if (this.show && e.keyCode == 27) {
+        if (this.show && e.keyCode === 27) {
           this.close();
         }
       });

resources/assets/js/app.js

@@ -0,0 +1,123 @@
+<template>
+    <click-to-close :do="close">
+        <div class="search-select">
+            <input type="text" name="command" ref="input" readonly @click="open" class="uk-input" v-model="selected" placeholder="Select a command"/>
+            <div ref="dropdown" v-show="isOpen" class="uk-card uk-card-default uk-padding-small uk-box-shadow-large">
+                <div class="uk-search uk-search-default uk-width-1-1">
+                    <span class="uk-search-icon-flip" uk-search-icon></span>
+                    <label>
+                        <input class="uk-input"
+                               type="search"
+                               v-model="search"
+                               ref="search"
+                               @keydown.esc="close"
+                               @keydown.down="highlightNext"
+                               @keydown.up="highlightPrev"
+                               @keydown.enter.prevent="selectHighlighted"
+                               @keydown.tab.prevent>
+                    </label>
+                </div>
+
+                <ul ref="options" v-show="filteredOptions.length > 0" class="uk-list uk-list-striped uk-height-max-medium uk-position-relative uk-overflow-auto">
+                    <li class="search-select-option" :class="{ 'uk-text-bold': index === highlightedIndex }"
+                        v-for="(option, index) in filteredOptions"
+                        :key="option.name"
+                        @click="select(option)">
+                        {{ option.name }}
+                        <em class="uk-padding-small uk-padding-remove-top uk-padding-remove-bottom uk-padding-remove-right">
+                            {{option.description}}
+                        </em> 
+                    </li>
+                </ul>
+                <div v-show="filteredOptions.length <= 0" class="uk-padding-small">
+                    No results found for "{{ search }}"
+                </div>
+            </div>
+        </div>        
+    </click-to-close>
+</template>
+
+<style scoped>
+    .search-select-option {
+        background: transparent;
+    }
+    .search-select-option:hover {
+        cursor: pointer;
+    }
+</style>
+
+<script>
+  import ClickToClose from "../../components/ClickToClose";
+  export default {
+    name: 'CommandList',
+    components: {ClickToClose},
+    props: ['command', 'commands'],
+    data() {
+      return {
+        selected: decodeURI(this.command),
+        options: Object.values(this.commands),
+        isOpen: false,
+        search: '',
+        highlightedIndex: 0
+      };
+    },
+    computed: {
+      filteredOptions() {
+        return this.options.filter(option => option.name.toLowerCase().includes(this.search.toLowerCase()));
+      }
+    },
+    methods: {
+      open() {
+        if (this.isOpen) {
+          return;
+        }
+
+        this.isOpen = true;
+        this.highlightedIndex = this.options.findIndex(option => option.name === this.selected);
+        this.$nextTick(() => {
+          this.$refs.search.focus();
+          this.scrollToHighlighted();
+        });
+      },
+      close() {
+        if (!this.isOpen) {
+          return;
+        }
+
+        this.isOpen = false;
+        this.$refs.input.focus();
+      },
+      select(option) {
+        this.selected = option.name;
+        this.search = '';
+        this.highlightedIndex = 0;
+        this.close();
+      },
+      selectHighlighted() {
+        this.select(this.filteredOptions[this.highlightedIndex]);
+      },
+      scrollToHighlighted() {
+        this.$refs.options.children[this.highlightedIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+      },
+      highlight(index) {
+        this.highlightedIndex = index;
+
+        if (this.highlightedIndex < 0) {
+          this.highlightedIndex = this.filteredOptions.length - 1;
+        }
+
+        if (this.highlightedIndex > this.filteredOptions.length - 1) {
+          this.highlightedIndex = 0;
+        }
+
+        this.scrollToHighlighted();
+      },
+      highlightNext() {
+        this.highlight(this.highlightedIndex + 1);
+      },
+      highlightPrev() {
+        this.highlight(this.highlightedIndex - 1);
+      }  
+    }    
+  };
+</script>

resources/assets/js/components/ClickToClose.vue

@@ -31,16 +31,7 @@
             <div class="uk-text-meta">Select an artisan command to schedule</div>
         </div>
         <div class="uk-width-1-1@s uk-width-2-3@m">
-            <select id="command" name="command" class="uk-select" placeholder="Click here to select one of the available commands">
-                <option value="">Select a command</option>
-                @foreach ($commands as $command)
-                    <optgroup label="{{$command->getDescription()}}">
-                        <option value="{{$command->getName()}}" {{old('command', $task->command) == $command->getName() ? 'selected' : ''}}>
-                            {{$command->getName()}}
-                        </option>
-                    </optgroup>
-                @endforeach
-            </select>
+            <command-list command="{{ $task->command }}" :commands="{{ json_encode($commands) }}"></command-list>
             @if($errors->has('command'))
                 <p class="uk-text-danger">{{$errors->first('command')}}</p>
             @endif

resources/assets/js/components/UIKitModal.vue

@@ -97,9 +97,12 @@ public function view(Task $task)
      */
     public function edit(Task $task)
     {
+        $commands = Totem::getCommands()->map(function($command) {
+            return ['name' => $command->getName(), 'description' => $command->getDescription()]; 
+        });
         return view('totem::tasks.form', [
             'task'          => $task,
-            'commands'      => Totem::getCommands(),
+            'commands'      => $commands,
             'timezones'     => timezone_identifiers_list(),
             'frequencies'   => Totem::frequencies(),
         ]);