Merge pull request #60 from SourceCodeOER/improvements

feat: Improvements

Author: dewita

assets/css/form.scss

@@ -58,10 +58,10 @@ input[type=file] {
   display: none;
 
   + label {
-    color:white;
+    color: white;
     border-radius: 4px;
     padding: 10px 15px;
-    cursor:pointer;
+    cursor: pointer;
     text-transform: uppercase;
     font-size: .7em;
     font-weight: bold;
@@ -79,15 +79,30 @@ input[type=file] {
 
 .input-wrapper--with-icon {
   position: relative;
+
+  &.one-third {
+    max-width: 33%;
+  }
+
+  &.input-with--enter-icon:after {
+    content: "↵";
+    color:$PRIMARY_COLOR;
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    @include transformHelper(translateY(-50%));
+  }
+
   input:not([type=radio]) {
     padding-left: 50px;
   }
+
   svg {
     width: 15px;
     position: absolute;
     top: 50%;
     left: 20px;
-    transform: translateY(-50%);
+    @include transformHelper(translateY(-50%));
   }
 }
 

components/Gestion/FavoriteForm.vue

@@ -20,7 +20,7 @@
                           rules="max:100"
                           v-slot="{ errors }">
             <span class="label__name">
-              Titre de la sélection
+              Titre de recherche
             </span>
         <input id="Title" placeholder="Entrez le titre de votre recherche" name="title" v-model="form.title"
                v-on:input="debounceInput" class="input--grey" type="text">

pages/administration/categories/index.vue

@@ -16,9 +16,9 @@
         <h1>Gestion des catégories</h1>
 
         <div class="header-wrapper">
-          <div class="input-wrapper--with-icon">
+          <div class="input-wrapper--with-icon input-with--enter-icon">
             <Icon type="search"/>
-            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keypress.enter="debounceInput"
+            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keydown.enter="debounceInput"
                    placeholder="Rechercher">
           </div>
 

pages/administration/exercices/index.vue

@@ -39,9 +39,9 @@
 
 
         <div class="header-wrapper">
-          <div class="input-wrapper--with-icon">
+          <div class="input-wrapper--with-icon input-with--enter-icon">
             <Icon type="search"/>
-            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keypress.enter="debounceInput"
+            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keydown.enter="debounceInput"
                    placeholder="Rechercher">
           </div>
 

pages/administration/tags/index.vue

@@ -24,9 +24,9 @@
         <h1>Gestion des tags</h1>
 
         <div class="header-wrapper">
-          <div class="input-wrapper--with-icon">
+          <div class="input-wrapper--with-icon input-with--enter-icon">
             <Icon type="search"/>
-            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keypress.enter="debounceInput"
+            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keydown.enter="debounceInput"
                    placeholder="Rechercher">
           </div>
 

pages/exercices/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="container--with-menu">
     <div class="banner search-banner">
-      <div class="input-wrapper--with-icon">
+      <div class="input-wrapper--with-icon one-third input-with--enter-icon">
         <Icon type="search"/>
-        <input ref="inputText" class="input--primary-color" type="text" @keypress.enter="debounceInput"
+        <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keydown.enter="debounceInput"
                placeholder="Rechercher">
       </div>
     </div>
@@ -89,6 +89,14 @@
       this.inputText.value = ""
     }
 
+    resetIfEmpty(e:any) {
+      const value:string =  e.target.value;
+
+      if(value === '') {
+        this.$accessor.exercises.fetch({data: {title: ""}});
+      }
+    }
+
     refreshInput() {
       this.inputText.value = this.$accessor.exercises.search_criterion.title || '';
     }

pages/gestion/mes-exercices/index.vue

@@ -37,9 +37,9 @@
                                                              class="init">réinitialiser la recherche</span></div>
 
         <div class="header-wrapper">
-          <div class="input-wrapper--with-icon">
+          <div class="input-wrapper--with-icon input-with--enter-icon">
             <Icon type="search"/>
-            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keypress.enter="debounceInput"
+            <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keydown.enter="debounceInput"
                    placeholder="Rechercher">
           </div>