better modalCard, integrated i18n with vuejs-i18n and drupal's strings_i18n_json_export

remain to automaticly export jsons and updated json files with webpack
and to understand how to access nested translations

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -50,7 +50,7 @@
       :items="item.images"
       :index="lightbox_index"
       srcName="src"
-      loop="true"
+      :loop="true"
       @close="lightbox_index = null">
     </CoolLightBox>
   </article>

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -7,6 +7,12 @@
         <span class="ref">{{ item.field_reference }}</span>
       </header>
       <nav class="tools">
+        <section class="tool close">
+          <span
+            class="btn mdi mdi-close"
+            @click.prevent="onCloseModalCard"
+          />
+        </section>
         <section class="tool flags">
           <span class="btn mdi mdi-folder-outline"/>
           <div class="tool-content">
@@ -27,6 +33,18 @@
           </div>
         </section>
       </nav>
+      <section class="samples">
+        <h3>{{ $t("Validation.Bundle") }}</h3>
+        <ul>
+          <li
+            v-for="sample in item.field_samples"
+            :key="sample.target_id"
+          >
+            <span class="showroom">{{ showrooms[sample.target_id].name }}</span>: {{ sample.location }}
+          </li>
+        </ul>
+      </section>
+      <section class="body" v-html="item.body.processed"/>
     </section>
     <section class="col col-left images" v-switcher>
       <figure
@@ -50,7 +68,7 @@
       :items="item.images"
       :index="lightbox_index"
       srcName="src"
-      loop="true"
+      :loop="true"
       @close="lightbox_index = null">
     </CoolLightBox>
   </article>
@@ -73,9 +91,13 @@ export default {
   },
   computed: {
     ...mapState({
-      flagcolls: state => state.User.flagcolls
+      flagcolls: state => state.User.flagcolls,
+      showrooms: state => state.Showrooms.showrooms_by_tid
     })
   },
+  created () {
+    console.log('modale item', this.item)
+  },
   methods: {
     ...mapActions({
       flagUnflag: 'User/flagUnflag'
@@ -105,6 +127,9 @@ export default {
           this.loadingFlag = false;
         })
       }
+    },
+    onCloseModalCard (e) {
+      this.$modal.hideAll()
     }
   }
 }

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -64,7 +64,7 @@
         <CoolLightBox
           :items="content.lightbox_items"
           :index="lightbox_index"
-          loop
+          :loop="true"
           @close="lightbox_index = null">
         </CoolLightBox>
         <div class="gallery-wrapper">

web/themes/custom/materiotheme/vuejs/i18n/index.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import * as en from './en.json'
+import * as fr from './fr.json'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    ...en.default
+  },
+  fr: {
+    ...fr.default
+  }
+}
+
+export default new VueI18n({
+  locale: 'en',
+  messages
+})

web/themes/custom/materiotheme/vuejs/i18n/locales.json

@@ -0,0 +1,8 @@
+{
+  "en": {
+    "samples": "Samples"
+  },
+  "fr": {
+    "samples": "Échantillons"
+  }
+}

web/themes/custom/materiotheme/vuejs/store/modules/showrooms.js

@@ -8,7 +8,8 @@ export default {
 
   // initial state
   state: {
-    items: []
+    items: [],
+    showrooms_by_tid: {}
   },
 
   // getters
@@ -18,6 +19,9 @@ export default {
   mutations: {
     setItems (state, items) {
       state.items = state.items.concat(items)
+      items.forEach((item, i) => {
+        state.showrooms_by_tid[item.tid] = item
+      })
     }
   },
 

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -257,10 +257,10 @@ export default {
                   imgStyle: ['card_medium_half'],
                   callBack: 'loadMaterialsCallBack',
                   callBackArgs: { collid: collid }
-                }).then( () => {
+                }).then(() => {
                   resolve()
                 })
-              }else{
+              } else {
                 commit('setLoadedCollItems', { collid: collid, items: [] })
                 resolve()
               }
@@ -291,7 +291,7 @@ export default {
           console.log('committing setLoadedCollItems without args')
           commit('setLoadedCollItems')
         }
-      }else{
+      } else {
         commit('setLoadedCollItems', { collid: collid, items: [] })
       }
     },