feat(InputText): add keypress enter event

Author: dewita

pages/administration/categories/index.vue

@@ -18,7 +18,7 @@
         <div class="header-wrapper">
           <div class="input-wrapper--with-icon">
             <Icon type="search"/>
-            <input ref="inputText" class="input--primary-color" type="text" v-model="searchModel"
+            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keypress.enter="debounceInput"
                    placeholder="Rechercher">
           </div>
 
@@ -165,6 +165,22 @@
       })
     }
 
+    /**
+     * Event for the input html element
+     * Search with the title entered and update the store
+     */
+    debounceInput(e: any)  {
+      this.searchModel = e.target.value;
+    }
+
+    resetIfEmpty(e:any) {
+      const value:string =  e.target.value;
+
+      if(value === '') {
+        this.searchModel = "";
+      }
+    }
+
     /**
      * Add or remove an id from the selected tags array
      * Add if state of the checkbox is true and the item is not in the array

pages/administration/exercices/index.vue

@@ -15,7 +15,6 @@
         <PanelItem>
           <FilterPanel strategy="admin" :radio-button-rating="true"
                        :radio-button-state="true"
-                       :reset-button="true"
                        :favorite="true"
                        :search-mode="true"
                        :historical-mode="true"
@@ -42,7 +41,7 @@
         <div class="header-wrapper">
           <div class="input-wrapper--with-icon">
             <Icon type="search"/>
-            <input ref="inputText" class="input--primary-color" type="text" v-on:input="debounceInput"
+            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keypress.enter="debounceInput"
                    placeholder="Rechercher">
           </div>
 
@@ -165,8 +164,6 @@
   import {User} from "~/assets/js/api/user";
   import {AxiosError} from "axios";
 
-  const debounce = require('lodash.debounce');
-
   const ratio = .2;
 
   const download = require('downloadjs');
@@ -359,11 +356,19 @@
      * Event for the input html element
      * Search with the title entered and update the store
      */
-    debounceInput = debounce((e: any) => {
+    debounceInput(e: any)  {
       const value = e.target.value;
       this.$accessor.exercises.fetch({data: {title: value}});
       this.$accessor.historical.addHistorical({tags: this.$accessor.tags.selectedTags, title: value})
-    }, 300);
+    }
+
+    resetIfEmpty(e:any) {
+      const value:string =  e.target.value;
+
+      if(value === '') {
+        this.$accessor.exercises.fetch({data: {title: ''}});
+      }
+    }
 
     /**
      * Reset the input value

pages/administration/tags/index.vue

@@ -14,7 +14,6 @@
       <Panel>
         <PanelItem>
           <TagFilterPanel
-            :reset-button="true"
             :search-mode="true"
             @reset="resetInput"/>
         </PanelItem>
@@ -27,7 +26,7 @@
         <div class="header-wrapper">
           <div class="input-wrapper--with-icon">
             <Icon type="search"/>
-            <input ref="inputText" class="input--primary-color" type="text" v-model="searchModel"
+            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keypress.enter="debounceInput"
                    placeholder="Rechercher">
           </div>
 
@@ -219,6 +218,23 @@
       this.$accessor.tags.addOrRemoveTag({...tag, isSelected: state})
     }
 
+
+    /**
+     * Event for the input html element
+     * Search with the title entered and update the store
+     */
+    debounceInput(e: any)  {
+      this.searchModel = e.target.value;
+    }
+
+    resetIfEmpty(e:any) {
+      const value:string =  e.target.value;
+
+      if(value === '') {
+        this.searchModel = "";
+      }
+    }
+
     /**
      * Remove from the databases the tags and update the tag store
      */

pages/exercices/index.vue

@@ -3,15 +3,15 @@
     <div class="banner search-banner">
       <div class="input-wrapper--with-icon">
         <Icon type="search"/>
-        <input ref="inputText" class="input--primary-color" type="text" v-on:input="debounceInput"
+        <input ref="inputText" class="input--primary-color" type="text" @keypress.enter="debounceInput"
                placeholder="Rechercher">
       </div>
     </div>
 
     <div class="wrapper wrapper--with-panel">
       <Panel>
         <PanelItem>
-          <FilterPanel :reset-button="true" :radio-button-rating="true" :favorite="true" :search-mode="true"
+          <FilterPanel :radio-button-rating="true" :favorite="true" :search-mode="true"
                        :historical-mode="true"
                        @reset="resetInput"/>
         </PanelItem>
@@ -41,8 +41,6 @@
   import RadioButtonSelecter from "~/components/Search/RadioButtonSelecter.vue";
   import {AxiosError} from "axios";
 
-  const debounce = require('lodash.debounce');
-
   @Component({
     components: {
       RadioButtonSelecter,
@@ -78,15 +76,15 @@
   export default class extends Vue {
     @Ref() inputText!: HTMLInputElement;
 
-    debounceInput = debounce((e: any) => {
+    debounceInput(e: any) {
       const value = e.target.value;
       this.$accessor.exercises.fetch({data: {title: value}});
       this.$accessor.historical.addHistorical({
         tags: this.$accessor.tags.selectedTags,
         title: value,
         vote: this.$accessor.exercises.search_criterion.vote
       })
-    }, 300);
+    }
 
     resetInput() {
       this.inputText.value = ""

pages/gestion/mes-exercices/index.vue

@@ -15,7 +15,6 @@
         <PanelItem>
           <FilterPanel strategy="user" :radio-button-rating="true"
                        :radio-button-state="true"
-                       :reset-button="true"
                        :favorite="true"
                        :search-mode="true"
                        :historical-mode="true"
@@ -40,7 +39,7 @@
         <div class="header-wrapper">
           <div class="input-wrapper--with-icon">
             <Icon type="search"/>
-            <input ref="inputText" class="input--primary-color" type="text" v-on:input="debounceInput"
+            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keypress.enter="debounceInput"
                    placeholder="Rechercher">
           </div>
 
@@ -312,11 +311,19 @@
      * Event for the input html element
      * Search with the title entered and update the store
      */
-    debounceInput = debounce((e: any) => {
+    debounceInput(e: any) {
       const value = e.target.value;
       this.$accessor.exercises.fetch({data: {title: value}});
       this.$accessor.historical.addHistorical({tags: this.$accessor.tags.selectedTags, title: value})
-    }, 300);
+    }
+
+    resetIfEmpty(e:any) {
+      const value:string =  e.target.value;
+
+      if(value === '') {
+        this.$accessor.exercises.fetch({data: {title: ""}});
+      }
+    }
 
     /**
      * Reset the input value