#2064

assets/css/app.scss

@@ -335,7 +335,7 @@ section[role="main-content"]{
           &.inactive{
             opacity: 0.4;
           }
-          span{
+          span.tout, span.letter{
             @include fontcaption;
             font-variant: small-caps;
             font-size: 1em;
@@ -348,9 +348,12 @@ section[role="main-content"]{
             text-align: center;
           }
 
-          &:not(:first-of-type) span{
+          &:not(:first-of-type) span.letter{
             width: 1.1em; height: 1.1em;
           }
+          span.quantity{
+            font-size: 0.765em;
+          }
         }
       }
     }

src/pages/IndexLocorum.vue

@@ -20,18 +20,22 @@
         <ul>
           <li :class="{ inactive: activeLetter }">
             <span
+              class="tout"
               @click.prevent="onClickLetter(null)"
               @keyup.enter="onClickLetter(null)"
             >tout</span>
+            <span class="quantity">[{{ items.length }}]</span>
           </li>
           <li
-            v-for="l in letters" :key="l"
-            :class="{ inactive: activeLetter && l !== activeLetter }"
+            v-for="l in letters" :key="l.l"
+            :class="{ inactive: activeLetter && l.l !== activeLetter }"
           >
             <span
-              @click.prevent="onClickLetter(l)"
-              @keyup.enter="onClickLetter(l)"
-            >{{ l }}</span>
+              class="letter"
+              @click.prevent="onClickLetter(l.l)"
+              @keyup.enter="onClickLetter(l.l)"
+            >{{ l.l }}</span>
+            <span class="quantity">[{{ l.q }}]</span>
           </li>
         </ul>
 
@@ -57,7 +61,7 @@ export default {
   },
   data: () => ({
     items: [],
-    letters: [],
+    letters: {},
     activeLetter: null
   }),
   beforeCreate () {
@@ -78,11 +82,30 @@ export default {
           })
         }
         for (let i = 0; i < this.items.length; i++) {
-          if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) {
-            this.letters.push(this.items[i].letter.toLowerCase())
+          // console.log(typeof this.items[i].letter)
+          if (this.items[i].letter !== '') {
+            let letter = this.items[i].letter.toLowerCase()
+            console.log(letter)
+            if (Object.keys(this.letters).indexOf(letter) === -1) {
+              this.letters[letter] = {
+                l: letter,
+                q: 1
+              }
+            } else {
+              this.letters[letter].q += 1
+            }
           }
         }
-        this.letters = this.letters.sort()
+        console.log(this.letters)
+        this.letters = this.letters.sort((a, b) => {
+          if (a.l < b.l) {
+            return -1
+          } else if (a.l > b.l) {
+            return 1
+          } else {
+            return 0
+          }
+        })
       })
       .catch((error) => {
         console.warn('Issue with index locorum', error)

src/pages/IndexNominum.vue

@@ -20,18 +20,22 @@
         <ul>
           <li :class="{ inactive: activeLetter }">
             <span
+              class="tout"
               @click.prevent="onClickLetter(null)"
               @keyup.enter="onClickLetter(null)"
             >tout</span>
+            <span class="quantity">[{{ items.length }}]</span>
           </li>
           <li
-            v-for="l in letters" :key="l"
-            :class="{ inactive: activeLetter && l !== activeLetter }"
+            v-for="l in letters" :key="l.l"
+            :class="{ inactive: activeLetter && l.l !== activeLetter }"
           >
             <span
-              @click.prevent="onClickLetter(l)"
-              @keyup.enter="onClickLetter(l)"
-            >{{ l }}</span>
+              class="letter"
+              @click.prevent="onClickLetter(l.l)"
+              @keyup.enter="onClickLetter(l.l)"
+            >{{ l.l }}</span>
+            <span class="quantity">[{{ l.q }}]</span>
           </li>
         </ul>
 
@@ -57,7 +61,7 @@ export default {
   },
   data: () => ({
     items: [],
-    letters: [],
+    letters: {},
     activeLetter: null
   }),
   beforeCreate () {
@@ -81,11 +85,29 @@ export default {
         }
         for (let i = 0; i < this.items.length; i++) {
           // console.log(typeof this.items[i].letter)
-          if (this.items[i].letter !== '' && this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) {
-            this.letters.push(this.items[i].letter.toLowerCase())
+          if (this.items[i].letter !== '') {
+            let letter = this.items[i].letter.toLowerCase()
+            console.log(letter)
+            if (Object.keys(this.letters).indexOf(letter) === -1) {
+              this.letters[letter] = {
+                l: letter,
+                q: 1
+              }
+            } else {
+              this.letters[letter].q += 1
+            }
           }
         }
-        this.letters = this.letters.sort()
+        console.log(this.letters)
+        this.letters = this.letters.sort((a, b) => {
+          if (a.l < b.l) {
+            return -1
+          } else if (a.l > b.l) {
+            return 1
+          } else {
+            return 0
+          }
+        })
       })
       .catch((error) => {
         console.warn('Issue with index nominum', error)

src/pages/IndexOperum.vue

@@ -21,18 +21,22 @@
         <ul>
           <li :class="{ inactive: activeLetter }">
             <span
+              class="tout"
               @click.prevent="onClickLetter(null)"
               @keyup.enter="onClickLetter(null)"
             >tout</span>
+            <span class="quantity">[{{ items.length }}]</span>
           </li>
           <li
-            v-for="l in letters" :key="l"
-            :class="{ inactive: activeLetter && l !== activeLetter }"
+            v-for="l in letters" :key="l.l"
+            :class="{ inactive: activeLetter && l.l !== activeLetter }"
           >
             <span
-              @click.prevent="onClickLetter(l)"
-              @keyup.enter="onClickLetter(l)"
-            >{{ l }}</span>
+              class="letter"
+              @click.prevent="onClickLetter(l.l)"
+              @keyup.enter="onClickLetter(l.l)"
+            >{{ l.l }}</span>
+            <span class="quantity">[{{ l.q }}]</span>
           </li>
         </ul>
 
@@ -59,7 +63,7 @@ export default {
   },
   data: () => ({
     items: [],
-    letters: [],
+    letters: {},
     activeLetter: null
   }),
   beforeCreate () {
@@ -80,11 +84,30 @@ export default {
           })
         }
         for (let i = 0; i < this.items.length; i++) {
-          if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) {
-            this.letters.push(this.items[i].letter.toLowerCase())
+          // console.log(typeof this.items[i].letter)
+          if (this.items[i].letter !== '') {
+            let letter = this.items[i].letter.toLowerCase()
+            console.log(letter)
+            if (Object.keys(this.letters).indexOf(letter) === -1) {
+              this.letters[letter] = {
+                l: letter,
+                q: 1
+              }
+            } else {
+              this.letters[letter].q += 1
+            }
           }
         }
-        this.letters = this.letters.sort()
+        console.log(this.letters)
+        this.letters = this.letters.sort((a, b) => {
+          if (a.l < b.l) {
+            return -1
+          } else if (a.l > b.l) {
+            return 1
+          } else {
+            return 0
+          }
+        })
       })
       .catch((error) => {
         console.warn('Issue with index operum', error)