Add certifications numbers

.gitignore

@@ -37,6 +37,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+package-lock.json
 
 # TypeScript v1 declaration files
 typings/

README.md

@@ -3,6 +3,9 @@
 ## Build Setup
 
 ```bash
+# use node 16
+$ nvm use 16
+
 # install dependencies
 $ npm install
 

components/btn/Theme.vue

@@ -39,14 +39,7 @@ export default {
     },
 
     getMediaPreference() {
-      const hasDarkPreference = window.matchMedia(
-        "(prefers-color-scheme: dark)"
-      ).matches;
-      if (hasDarkPreference) {
-        return "dark-theme";
-      } else {
-        return "light-theme";
-      }
+      return localStorage.getItem("user-theme");
     },
   },
 };

components/certif/List.vue

@@ -27,14 +27,14 @@ export default {
             type: String,
             required: true,
             validator: function (value) {
-                const types = ['recieved','sent']
+                const types = ['received','sent']
                 return types.indexOf(value) !== -1
             }
         }
     },
     methods : {
         getNeighbor(certif) {
-            return this.type == "recieved" ? certif.from : certif.to
+            return this.type == "received" ? certif.from : certif.to
         }
     },
     computed : {

package.json

@@ -17,6 +17,8 @@
     "@nuxtjs/apollo": "^4.0.1-rc.5",
     "@nuxtjs/i18n": "^7.2.0",
     "@nuxtjs/pwa": "^3.3.5",
+    "apollo-link-context": "^1.0.20",
+    "apollo-link-http": "^1.5.17",
     "bootstrap": "^4.6.1",
     "chart.js": "^3.6.2",
     "core-js": "^3.15.1",

pages/membres/_hash.vue

@@ -13,13 +13,13 @@
         </div>
         <div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
           <div class="col-12 col-md-6 mb-3">
-            <h3>{{ $t('certifications.recues') }} 
+            <h3>{{ $t('certifications.recues') }} ({{ idFromHash.received_certifications.certifications.length }})
               <BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" />
             </h3>
-            <CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
+            <CertifList :certifs="idFromHash.received_certifications.certifications" type="received" />
           </div>
           <div class="col-12 col-md-6">
-            <h3>{{ $t('certifications.envoyees') }}</h3>
+            <h3>{{ $t('certifications.envoyees') }} ({{ idFromHash.sent_certifications.length }})</h3>
             <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
           </div>
         </div>
@@ -30,8 +30,10 @@
 
 <script>
 import {SEARCH_MEMBER} from "@/graphql/queries"
+import CertifStatus from '~/components/badge/CertifStatus.vue';
 
 export default {
+  components: { CertifStatus },
   data() {
     // Variables locales
     return {