Merge pull request #58 from SourceCodeOER/enhancement

feat: Enhancement

Author: dewita

components/Exercise/ExercisesPanel.vue

@@ -244,7 +244,7 @@
 
     header {
       .results {
-        font-weight: lighter;
+        font-weight: 500;
       }
     }
 

components/Panel/Item/DetailsPanel.vue

@@ -12,37 +12,17 @@
         </div>
       </div>
 
-
-      <div v-if="!!exercise.url || !!exercise.file" class="sources">
-        <h3>Sources</h3>
-
-        <a v-if="!!exercise.url" :href="exercise.url" target="_blank" class="button-wrapper">
-          <button class=" button--ternary-color-reverse">
-            Lien vers l'exercice
-          </button>
-        </a>
-
-        <div v-if="!!exercise.file" @click="downloadFile" class="button-wrapper">
-          <button class="button--ternary-color-reverse">
-            Télécharger l'exercice
-          </button>
-        </div>
-
-      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
   import {Component, Prop, Vue} from "vue-property-decorator";
-  import {Exercise, ExerciseMetrics, ExerciseTag} from "../../../types";
+  import {Exercise, ExerciseTag} from "../../../types";
   import Icon from "~/components/Symbols/Icon.vue";
   import Rating from "~/components/Rating/Rating.vue";
-  import {BusEvent} from "~/components/Event/BusEvent";
   import {AxiosError} from "axios";
 
-  const download = require('downloadjs');
-
   @Component({
     components: {Rating, Icon}
   })
@@ -61,9 +41,7 @@
      * The exercise containing details, tags,...
      */
     @Prop({type: Object, required: true}) exercise!: Exercise;
-
-    private cdnLink!: string;
-
+    
     /**
      * Classify all tags by categories and sorts the categories
      */
@@ -93,37 +71,6 @@
       return arrayOfTagByCategories
     }
 
-    async downloadFile() {
-      try {
-
-        const result:Blob = await this.$axios.$get(`/files/${this.exercise.file}`, {responseType: 'blob'});
-
-        download(result, "archive.zip", result.type);
-
-        this.$displaySuccess("Téléchargement éffectué.");
-
-      } catch (e) {
-        const error = e as AxiosError;
-
-        if (error.response) {
-          const status: number = error.response.status;
-
-          if (status === 404) {
-            this.$displayError(`Ce fichier est introuvable`);
-          } else if (status === 500) {
-            this.$displayError(`Une erreur est survenue lors du téléchargement.`);
-          }
-        } else {
-          this.$displayError(`Une erreur est survenue lors du téléchargement.`);
-        }
-      }
-    }
-
-    created() {
-      const link: string | undefined = this.$accessor.sharedEnv.CDN_SERVER;
-      this.cdnLink = link ? link : ''
-    }
-
   }
 </script>
 

components/Panel/Item/HistoricalPanel.vue

@@ -99,6 +99,8 @@
       }
 
       await this.$accessor.exercises.fetch({data: {tags: tagsRequest, title: title, vote: historical.vote}});
+
+      this.$emit('refresh');
     }
   }
 </script>

components/Tag/Tag.vue

@@ -49,12 +49,13 @@
 
   .tag {
     display: inline-block;
-    padding: 10px 10px;
+    padding: 12px 12px;
+    letter-spacing: .5px;
     border-radius: 4px;
     background-color: white;
     color: darken($SECONDARY_COLOR, 12);
     border: 1px solid darken($SECONDARY_COLOR, 12);
-    font-weight: lighter;
+    font-weight: bold;
     font-size: .75em;
     margin-right: 5px;
     margin-bottom: 10px;

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/_id.vue

@@ -22,7 +22,7 @@
         </PanelItem>
 
         <PanelItem>
-          <FilterPanel strategy="admin" :reset-button="true" :search-mode="true" mode="strict" title="Tags"/>
+          <FilterPanel strategy="admin" :search-mode="true" mode="strict" title="Tags"/>
         </PanelItem>
       </Panel>
 

pages/administration/exercices/creer-exercice.vue

@@ -22,7 +22,7 @@
         </PanelItem>
 
         <PanelItem>
-          <FilterPanel strategy="admin" :reset-button="true" :search-mode="true" mode="strict" title="Tags"/>
+          <FilterPanel strategy="admin" :search-mode="true" mode="strict" title="Tags"/>
         </PanelItem>
       </Panel>
 

pages/administration/exercices/index.vue

@@ -15,18 +15,17 @@
         <PanelItem>
           <FilterPanel strategy="admin" :radio-button-rating="true"
                        :radio-button-state="true"
-                       :reset-button="true"
                        :favorite="true"
                        :search-mode="true"
                        :historical-mode="true"
                        @reset="resetInput"/>
         </PanelItem>
         <PanelItem>
-          <HistoricalPanel/>
+          <HistoricalPanel @refresh="refreshInput"/>
         </PanelItem>
 
         <PanelItem>
-          <FavoritePanel/>
+          <FavoritePanel @fetch="refreshInput"/>
         </PanelItem>
       </Panel>
 
@@ -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,23 @@
      * 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: ''}});
+      }
+    }
+
+    refreshInput() {
+      this.inputText.value = this.$accessor.exercises.search_criterion.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/_id.vue

@@ -63,12 +63,31 @@
           </div>
         </div>
         <button v-if="isTheCreator || isAdmin || isSuperAdmin" @click="modifyExercise"
-                class="button--ternary-color-reverse">Modifier l'exercice
+                class="button--ternary-color-reverse modify-button">Modifier l'exercice
         </button>
 
         <h2 class="title--primary-color__light">Description</h2>
 
         <article v-html="exercise.description" class="exercise-article"></article>
+
+        <template v-if="!!exercise.url || !!exercise.file">
+
+          <h2 class="title--primary-color__light">Sources</h2>
+
+          <a v-if="!!exercise.url" :href="exercise.url" target="_blank" class="button-wrapper">
+            <button class=" button--ternary-color-reverse">
+              Lien vers l'exercice
+            </button>
+          </a>
+
+          <div v-if="!!exercise.file" @click="downloadFile" class="button-wrapper">
+            <button class="button--ternary-color-reverse">
+              Télécharger l'exercice
+            </button>
+          </div>
+
+        </template>
+
       </section>
     </div>
   </div>
@@ -99,6 +118,8 @@
   hljs.registerLanguage('cmake', cmake);
   hljs.registerLanguage('cs', cs);
 
+  const download = require('downloadjs');
+
   @Component({
     components: {
       Rating,
@@ -175,7 +196,6 @@
       const metrics: ExerciseMetrics | undefined = this.exercise.metrics;
 
       if (metrics) {
-        console.log(metrics);
         return metrics.votes
       }
 
@@ -219,6 +239,33 @@
       }
     }
 
+    async downloadFile() {
+      try {
+
+        const result:Blob = await this.$axios.$get(`/files/${this.exercise.file}`, {responseType: 'blob'});
+
+        download(result, "archive.zip", result.type);
+
+        this.$displaySuccess("Téléchargement éffectué.");
+
+      } catch (e) {
+        const error = e as AxiosError;
+
+        if (error.response) {
+          const status: number = error.response.status;
+
+          if (status === 404) {
+            this.$displayError(`Ce fichier est introuvable`);
+          } else if (status === 500) {
+            this.$displayError(`Une erreur est survenue lors du téléchargement.`);
+          }
+        } else {
+          this.$displayError(`Une erreur est survenue lors du téléchargement.`);
+        }
+      }
+    }
+
+
     mounted() {
       if (process.client) {
         const exercise: Element | null = document.querySelector("#Exercise");
@@ -283,11 +330,19 @@
         }
       }
 
+      .button-wrapper {
+        text-align: left;
+      }
+
       button {
+        font-size: .75em;
+        min-width: 250px;
+      }
+
+      button.modify-button {
         position: absolute;
         right: 20px;
         top: 20px;
-        font-size: .75em;
       }
     }