THE-906 Nettoyage ancien fonctionnement + affichage de 10 en 10

abes-esr · Aug 23, 2023 · 5e37f55 · 5e37f55
1 parent 72a29e1
commit 5e37f55
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 29 deletions.
diff --git a/src/components/common/Keywords.vue b/src/components/common/Keywords.vue
@@ -19,30 +19,23 @@
           </v-card>
         </v-overlay>
       </div>
-      <v-chip-group id="first-chip-line">
-        <v-chip label v-for="keyWord in selectKeyWords(keyWordPerLine, 0)" :key="keyWord.keyword + forceRenderKey"
-          :title="keyWord.keyword" :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
-          :disabled="keyWord.type === 'sujetsRameau' ? false : true"
-          @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
-          <span class="key-word-label">{{ keyWord.keyword }}</span>
-        </v-chip>
-      </v-chip-group>
-      <v-fade-transition>
-        <v-chip-group v-show="readMore" id="second-chip-line">
-          <!--      readmore button effect-->
-          <v-chip v-show="readMore" label v-for="keyWord in selectKeyWords(Infinity, keyWordPerLine)"
-            :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword"
-            :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
+        <v-chip-group class="chip-lines">
+          <v-chip label v-for="keyWord in selectKeyWords()" :key="keyWord.keyword + forceRenderKey"
+            :title="keyWord.keyword" :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
             :disabled="keyWord.type === 'sujetsRameau' ? false : true"
             @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
             <span class="key-word-label">{{ keyWord.keyword }}</span>
           </v-chip>
         </v-chip-group>
-      </v-fade-transition>
-      <div id="key-words-button-wrapper" v-if="selectKeyWords(Infinity, keyWordPerLine).length > 0">
-        <v-btn id="read-more-button" variant="outlined" @click="readMore = !readMore" flat>
+      <div id="key-words-button-wrapper">
+        <v-btn v-if="numberOfKeywords > 5" id="read-less-button" variant="outlined" @click="narrowDownKeywords" flat>
           <span></span>
-          <span>{{ readMore ? $t('theseView.showLessKeywords') : $t('theseView.showMoreKeywords') }}</span>
+          <span>{{ $t('theseView.showLessKeywords') }}</span>
+          <v-icon class="toggle-up-down" :class='{ "rotate": readMore }'>mdi-arrow-down-circle-outline</v-icon>
+        </v-btn>
+        <v-btn id="read-more-button" variant="outlined" @click="addTenKeywords" flat>
+          <span></span>
+          <span>{{ $t('theseView.showMoreKeywords') }}</span>
           <v-icon class="toggle-up-down" :class='{ "rotate": readMore }'>mdi-arrow-down-circle-outline</v-icon>
         </v-btn>
       </div>
@@ -74,11 +67,12 @@ const props = defineProps({
 
 const { mobile } = useDisplay();
 
-const keyWordPerLine = mobile.value ? ref(6) : ref(5);
+const numberOfKeywordsPerLine = mobile.value ? ref(6) : ref(5);
+const numberOfKeywords = mobile.value ? ref(6) : ref(5);
 const forceRenderKey = ref(0);
 
 const keywords = ref([]);
-const readMore = ref(false);
+const increment = ref(10);
 const selectedLanguage = ref("fr");
 
 onBeforeUpdate(() => {
@@ -107,8 +101,8 @@ const langList = computed(() => {
  * @param offset
  * @returns {UnwrapRefSimple<*>[]}
  */
-function selectKeyWords(numberOfWords, offset) {
-  return keywords.value[selectedLanguage.value].filter((word, index) => { return index < numberOfWords + offset && index >= offset; });
+function selectKeyWords() {
+  return keywords.value[selectedLanguage.value].filter((word, index) => { return index < numberOfKeywords.value && index >= 0; });
 }
 
 /*
@@ -129,11 +123,18 @@ function onUpdateLangue(langue) {
   selectedLanguage.value = langue;
 }
 
+function addTenKeywords() {
+  numberOfKeywords.value += increment.value;
+}
+
+function narrowDownKeywords() {
+  numberOfKeywords.value = numberOfKeywordsPerLine.value;
+}
 /**
  * Watchers
  */
 watch(mobile, (newValue) => {
-  keyWordPerLine.value = newValue ? 6 : 5;
+  numberOfKeywordsPerLine.value = newValue ? 6 : 5;
 
   forceRenderKey.value++;
 });
@@ -142,8 +143,7 @@ watch(mobile, (newValue) => {
 <style scoped lang="scss">
 @use '../../../node_modules/vuetify/settings';
 
-#second-chip-line :deep(.v-chip--disabled),
-#first-chip-line :deep(.v-chip--disabled) {
+.chip-lines :deep(.v-chip--disabled) {
   opacity: unset;
   pointer-events: unset;
 }
@@ -152,7 +152,7 @@ watch(mobile, (newValue) => {
   margin-top: unset !important;
 }
 
-#first-chip-line {
+.chip-lines {
   flex-wrap: wrap !important;
 }
 

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -63,7 +63,7 @@
         "alert": "Report an error",
         "exporter": "Export",
         "showMoreKeywords": "Show more keywords",
-        "showLessKeywords": "Show less keywords",
+        "showLessKeywords": "Narrow down list",
         "showMoreAbstract": "Afficher la suite du résumé",
         "showLessAbstract": "Afficher un extrait du résumé",
         "access": "Thesis access"

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -71,8 +71,8 @@
     "theseSuivante": "Thèse suivante",
     "alert": "Signaler une erreur",
     "exporter": "Exporter",
-    "showMoreKeywords": "Afficher tous les mots-clés",
-    "showLessKeywords": "Afficher moins de mots-clés",
+    "showMoreKeywords": "Afficher plus de mots-clés",
+    "showLessKeywords": "Réduire la liste",
     "showMoreAbstract": "Afficher la suite du résumé",
     "showLessAbstract": "Afficher un extrait du résumé",
     "projet": "Projet de thèse",