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/assets/dist/main.css

@@ -1771,9 +1771,28 @@ article.card {
     height: 610px; }
     article.card.modal-card > .col {
       flex-basis: 50%; }
-    article.card.modal-card section.col-right header {
+    article.card.modal-card section.col-right > *:not(nav.tools) {
       position: relative;
+      padding: 0.5em;
+      box-sizing: border-box;
+      width: 100%; }
+    article.card.modal-card section.col-right header {
       bottom: auto; }
+    article.card.modal-card section.col-right section.samples ul {
+      display: flex;
+      flex-flow: row wrap;
+      font-size: 0.882em;
+      font-weight: 300; }
+      article.card.modal-card section.col-right section.samples ul span.showroom {
+        font-weight: 500; }
+    article.card.modal-card section.col-right section.body p {
+      font-size: 0.882em;
+      font-weight: 300;
+      line-height: 1.35; }
+    article.card.modal-card section.col-right nav.tools {
+      opacity: 1; }
+      article.card.modal-card section.col-right nav.tools section.close span.btn.mdi-close {
+        cursor: pointer; }
 
 #main-content > article.article div.cols {
   display: grid;

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -26,6 +26,11 @@ Vue.use(VModal)
 import store from 'vuejs/store'
 import router from 'vuejs/route'
 
+// import VueI18n from 'vue-i18n'
+// Vue.use(VueI18n)
+// import * as Locales from 'assets/i18n/locales.json'
+import i18n from 'vuejs/i18n'
+
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
@@ -43,9 +48,10 @@ import 'theme/assets/styles/main.scss'
       _v_pagetitle_block, _v_search_block,
       _v_main_content, _v_left_content
     const _is_front = drupalSettings.path.isFront
-
     console.log('drupalSettings', drupalSettings)
 
+    // let _I18n
+
     //  ___      _ _
     // |_ _|_ _ (_) |_
     //  | || ' \| |  _|
@@ -70,6 +76,8 @@ import 'theme/assets/styles/main.scss'
     function initVues () {
       // only launch views if we are not in commerce pages
       if (!checkNoVuePages()) {
+        initVi18n()
+        initVStore()
         initVRouter()
         initVSiteBrandingBlock()
         initVPagetitleBlock()
@@ -81,6 +89,23 @@ import 'theme/assets/styles/main.scss'
       initVUserBlock()
     }
 
+    function initVi18n () {
+      i18n.locale = drupalDecoupled.lang_code
+      console.log('i18n.messages', i18n.messages)
+    //   const locales = {
+    //     ...Locales
+    //   }
+    //   _I18n = new VueI18n({
+    //     locale: drupalDecoupled.lang_code,
+    //     locales
+    //   })
+    //   console.log('_I18n', _I18n)
+    }
+
+    function initVStore () {
+      store.dispatch('Showrooms/getItems')
+    }
+
     function initVRouter () {
       // we need this to update the title and body classes while using history nav
       router.beforeEach((to, from, next) => {
@@ -136,6 +161,7 @@ import 'theme/assets/styles/main.scss'
     function initVSiteBrandingBlock () {
       _v_sitebranding_block = new Vue({
         store,
+        i18n,
         router,
         el: '#block-sitebranding',
         methods: {
@@ -165,6 +191,7 @@ import 'theme/assets/styles/main.scss'
       // create the vue
       _v_pagetitle_block = new Vue({
         store,
+        i18n,
         router,
         el: $blk,
         computed: {
@@ -195,6 +222,7 @@ import 'theme/assets/styles/main.scss'
 
       _v_user_block = new Vue({
         store,
+        i18n,
         // computed: {
         //   ...mapState({
         //     isloggedin: state => state.User.isloggedin
@@ -223,6 +251,7 @@ import 'theme/assets/styles/main.scss'
 
       _v_header_menu = new Vue({
         store,
+        i18n,
         router,
         el: '#block-header',
         methods: {
@@ -246,6 +275,7 @@ import 'theme/assets/styles/main.scss'
       const main_html = $main_content.innerHTML
       _v_main_content = new Vue({
         store,
+        i18n,
         render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
       }).$mount('#' + id)
     }
@@ -271,6 +301,7 @@ import 'theme/assets/styles/main.scss'
       // in any case create the vue
       _v_search_block = new Vue({
         store,
+        i18n,
         render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
       }).$mount('#' + id)
     }
@@ -280,6 +311,7 @@ import 'theme/assets/styles/main.scss'
       // in any case create the vue
       _v_left_content = new Vue({
         store,
+        i18n,
         render: h => h(VLeftContent, { props: { id: id } })
       }).$mount('#' + id)
     }

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -867,10 +867,41 @@ article.card{
       flex-basis: 50%;
     }
     section.col-right{
-      header{
+      >*:not(nav.tools){
         position: relative;
+        padding: 0.5em;
+        box-sizing: border-box;
+        width: 100%;
+      }
+      header{
         bottom: auto;
       }
+      section.samples{
+        ul{
+          display: flex;
+          flex-flow: row wrap;
+          font-size: 0.882em;
+          font-weight: 300;
+          // line-height: 1.35;
+          span.showroom{ font-weight: 500; }
+        }
+      }
+      section.body{
+        p{
+          font-size: 0.882em;
+          font-weight: 300;
+          line-height: 1.35;
+        }
+
+      }
+      nav.tools{
+        opacity: 1;
+        section.close{
+          span.btn.mdi-close{
+            cursor:pointer;
+          }
+        }
+      }
     }
   }
 }

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: [] })
       }
     },