From a9c4b0906254a6caf7f52b2e38e5a62340478541 Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Mon, 21 Dec 2020 02:17:47 +0100
Subject: [PATCH] Creazione tabella Product

---
 src/components/CCard/CCard.vue                | 124 +++++++++---------
 src/components/CECommerce/CECommerce.scss     |   0
 src/components/CECommerce/CECommerce.ts       |  18 +++
 src/components/CECommerce/CECommerce.vue      |  20 +++
 src/components/CECommerce/index.ts            |   1 +
 src/components/CImgText/CImgText.ts           |  13 ++
 src/components/CImgText/CImgText.vue          |   4 +-
 src/components/CMyDashboard/CMyDashboard.vue  |  32 +++--
 src/components/CNextZoom/CNextZoom.ts         |   2 +-
 src/components/CProductCard/CProductCard.scss |   3 +
 src/components/CProductCard/CProductCard.ts   |  21 +++
 src/components/CProductCard/CProductCard.vue  |  58 ++++++++
 src/components/CProductCard/index.ts          |   1 +
 .../CSignUpNotevole/CSignUpNotevole.vue       |   3 +
 src/components/CStatusReg/CStatusReg.vue      |  24 ++--
 src/components/CVideoPromo/CVideoPromo.vue    |  23 +++-
 src/components/index.ts                       |   2 +
 src/db/static_data.ts                         |   2 +-
 src/model/GlobalStore.ts                      |   1 +
 src/model/index.ts                            |   1 +
 src/statics/lang/it.js                        |   9 +-
 src/store/Modules/fieldsTable.ts              |  24 +++-
 src/store/Modules/index.ts                    |   1 +
 src/store/Modules/tools.ts                    |  10 +-
 src/views/ecommerce/index.ts                  |   1 +
 src/views/ecommerce/productsList/index.ts     |   1 +
 .../ecommerce/productsList/productsList.scss  |   5 +
 .../ecommerce/productsList/productsList.ts    |  63 +++++++++
 .../ecommerce/productsList/productsList.vue   |  24 ++++
 29 files changed, 383 insertions(+), 108 deletions(-)
 create mode 100755 src/components/CECommerce/CECommerce.scss
 create mode 100755 src/components/CECommerce/CECommerce.ts
 create mode 100755 src/components/CECommerce/CECommerce.vue
 create mode 100755 src/components/CECommerce/index.ts
 create mode 100755 src/components/CProductCard/CProductCard.scss
 create mode 100755 src/components/CProductCard/CProductCard.ts
 create mode 100755 src/components/CProductCard/CProductCard.vue
 create mode 100755 src/components/CProductCard/index.ts
 create mode 100755 src/views/ecommerce/index.ts
 create mode 100755 src/views/ecommerce/productsList/index.ts
 create mode 100755 src/views/ecommerce/productsList/productsList.scss
 create mode 100755 src/views/ecommerce/productsList/productsList.ts
 create mode 100755 src/views/ecommerce/productsList/productsList.vue

diff --git a/src/components/CCard/CCard.vue b/src/components/CCard/CCard.vue
index ddcbb77..0be88c7 100755
--- a/src/components/CCard/CCard.vue
+++ b/src/components/CCard/CCard.vue
@@ -1,78 +1,76 @@
 <template>
+  <div>
     <q-card class="my-card text-center">
-        <q-img :src="`statics/images/` + myop.img" class="myimg">
-            <div class="absolute-bottom text-spacetrans text-shadow">
-                <div class="text-h6 text-trans">{{myop.name}} {{myop.surname}}</div>
-                <div class="text-subtitle-carica text-trans">{{myop.qualification}}</div>
+
+      <q-img :src="`statics/images/` + myop.img" class="myimg">
+        <div class="absolute-bottom text-spacetrans text-shadow">
+          <div class="text-h6 text-trans">{{ myop.name }} {{ myop.surname }}</div>
+          <div class="text-subtitle-carica text-trans">{{ myop.qualification }}</div>
+        </div>
+      </q-img>
+
+      <q-tabs v-model="tab" class="text-teal">
+        <q-tab label="Info" name="one"></q-tab>
+        <q-tab v-if="myop.intro" label="Biografia" name="two"></q-tab>
+      </q-tabs>
+
+      <q-separator></q-separator>
+
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="one">
+          <div class="text-subtitle-carica">{{ myop.disciplines }}</div>
+          <div v-if="myop.certifications" class="text-subtitle-certificato">{{ myop.certifications }}</div>
+          <div class="op__cell">
+            <q-icon class="flex-icon" name="mobile_friendly"></q-icon>
+            <span class="q-ma-sm">{{ myop.cell }}</span>
+
+            <div class="row justify-center margin_buttons q-gutter-lg">
+              <q-btn v-if="myop.email" fab-mini icon="fas fa-envelope"
+                     color="blue-grey-6" type="a"
+                     size="sm"
+                     :href="tools.getemailto(myop.email)" target="__blank">
+              </q-btn>
+              <q-btn v-if="tools.getHttpForWhatsapp(myop.cell)" fab-mini icon="fab fa-whatsapp"
+                     color="green" type="a"
+                     size="sm"
+                     :href="tools.getHttpForWhatsapp(myop.cell)" target="__blank">
+              </q-btn>
+
+              <q-btn v-if="tools.getHttpForTelegram(myop.usertelegram)" fab-mini icon="fab fa-telegram"
+                     color="blue" type="a"
+                     size="sm"
+                     :href="tools.getHttpForTelegram(myop.usertelegram)" target="__blank">
+              </q-btn>
             </div>
-        </q-img>
+          </div>
+          <div class="op__email">
+            <q-icon class="flex-icon" name="contact_mail"></q-icon>&nbsp;
+            <a :href="tools.getemailto(myop.email)" target="_blank">{{ myop.email }}
+            </a>
+          </div>
 
-        <q-tabs v-model="tab" class="text-teal">
-            <q-tab label="Info" name="one"></q-tab>
-            <q-tab label="Biografia" name="two"></q-tab>
-        </q-tabs>
-
-        <q-separator></q-separator>
-
-        <q-tab-panels v-model="tab" animated>
-            <q-tab-panel name="one">
-                <div class="text-subtitle-carica">{{myop.disciplines}}</div>
-                <div v-if="myop.certifications" class="text-subtitle-certificato">{{myop.certifications}}</div>
-                <div class="op__cell">
-                    <q-icon class="flex-icon" name="mobile_friendly"></q-icon>
-                    <span class="q-ma-sm">{{myop.cell}}</span>
-
-                    <div class="row justify-center margin_buttons q-gutter-lg">
-                        <q-btn v-if="myop.email" fab-mini icon="fas fa-envelope"
-                               color="blue-grey-6" type="a"
-                               size="sm"
-                               :href="tools.getemailto(myop.email)" target="__blank">
-                        </q-btn>
-                        <q-btn v-if="tools.getHttpForWhatsapp(myop.cell)" fab-mini icon="fab fa-whatsapp"
-                               color="green" type="a"
-                               size="sm"
-                               :href="tools.getHttpForWhatsapp(myop.cell)" target="__blank">
-                        </q-btn>
-
-                        <q-btn v-if="tools.getHttpForTelegram(myop.usertelegram)" fab-mini icon="fab fa-telegram"
-                               color="blue" type="a"
-                               size="sm"
-                               :href="tools.getHttpForTelegram(myop.usertelegram)" target="__blank">
-                        </q-btn>
-                    </div>
-                </div>
-                <div class="op__email">
-                    <q-icon class="flex-icon" name="contact_mail"></q-icon>&nbsp;
-                    <a :href="tools.getemailto(myop.email)" target="_blank">{{myop.email}}
-                    </a>
-                </div>
-
-                <div class="op__facebook" v-if="myop.paginafb">
-                    <a :href="myop.paginafb" target="_blank">
-                        <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"></i> Pagina Facebook
-                    </a>
-                </div>
+          <div class="op__facebook" v-if="myop.paginafb">
+            <a :href="myop.paginafb" target="_blank">
+              <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"></i> Pagina Facebook
+            </a>
+          </div>
 
 
-                <div class="op__storia" v-html="myop.intro"></div>
-                <q-btn rounded size="sm" color="secondary" @click="clicca()">Continua ...</q-btn>
-            </q-tab-panel>
+          <div class="op__storia" v-html="myop.intro"></div>
+          <q-btn v-if="myop.intro" rounded size="sm" color="secondary" @click="clicca()">Continua ...</q-btn>
+        </q-tab-panel>
 
-            <q-tab-panel name="two">
-                <div class="op__storia" v-html="myop.info"></div>
-            </q-tab-panel>
-        </q-tab-panels>
-
-        <!--<q-card-section>-->
-        <!--<div class="text-subtitle3">{{myop.disciplines}}</div>-->
-        <!--{{myop.info}}-->
-        <!--</q-card-section>-->
+        <q-tab-panel name="two">
+          <div class="op__storia" v-html="myop.info"></div>
+        </q-tab-panel>
+      </q-tab-panels>
     </q-card>
+  </div>
 </template>
 
 <script lang="ts" src="./CCard.ts">
 </script>
 
 <style lang="scss" scoped>
-    @import './CCard.scss';
+  @import './CCard.scss';
 </style>
diff --git a/src/components/CECommerce/CECommerce.scss b/src/components/CECommerce/CECommerce.scss
new file mode 100755
index 0000000..e69de29
diff --git a/src/components/CECommerce/CECommerce.ts b/src/components/CECommerce/CECommerce.ts
new file mode 100755
index 0000000..2288453
--- /dev/null
+++ b/src/components/CECommerce/CECommerce.ts
@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+import { validationMixin } from 'vuelidate'
+import MixinBase from '../../mixins/mixin-base'
+import { ProductsList } from '@src/views/ecommerce'
+
+
+@Component({
+  mixins: [validationMixin],
+  components: { ProductsList }
+})
+
+export default class CECommerce extends MixinBase {
+  public $v
+  public $t: any
+
+
+}
diff --git a/src/components/CECommerce/CECommerce.vue b/src/components/CECommerce/CECommerce.vue
new file mode 100755
index 0000000..2348dad
--- /dev/null
+++ b/src/components/CECommerce/CECommerce.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <form>
+            <div class="q-gutter-xs">
+              Prodotti:
+              <ProductsList>
+
+              </ProductsList>
+            </div>
+
+        </form>
+    </div>
+</template>
+
+<script lang="ts" src="./CECommerce.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CECommerce.scss';
+</style>
diff --git a/src/components/CECommerce/index.ts b/src/components/CECommerce/index.ts
new file mode 100755
index 0000000..33ca7b1
--- /dev/null
+++ b/src/components/CECommerce/index.ts
@@ -0,0 +1 @@
+export {default as CECommerce} from './CECommerce.vue'
diff --git a/src/components/CImgText/CImgText.ts b/src/components/CImgText/CImgText.ts
index dbe2670..2f6920f 100755
--- a/src/components/CImgText/CImgText.ts
+++ b/src/components/CImgText/CImgText.ts
@@ -30,4 +30,17 @@ export default class CImgText extends Vue {
   @Prop({ required: false, default: '' }) public style1: string
   @Prop({ required: false, default: 'image' }) public alt1: string
   @Prop({ required: false, default: 'image' }) public alt2: string
+
+  get clrowcol() {
+    let mycl = 'row'
+    if (tools.isMobile())
+      mycl = 'column'
+
+    return mycl
+  }
+
+  get myclass() {
+
+    return this.clrowcol + ' items-start q-col-gutter-xs imgtext '
+  }
 }
diff --git a/src/components/CImgText/CImgText.vue b/src/components/CImgText/CImgText.vue
index b428c0d..bf7b66d 100755
--- a/src/components/CImgText/CImgText.vue
+++ b/src/components/CImgText/CImgText.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <section class="padding_testo bg-white text-grey-10 text-justify">  <!-- v-scroll-reveal.reset -->
-      <div class="row items-start q-col-gutter-xs imgtext">
-        <div class="row q-px-xs">
+      <div :class="myclass">
+        <div :class="clrowcol + ` q-px-xs`">
           <q-img v-if="src" :src="src" class="" :style="style1" :alt="alt1"></q-img>
           <q-img v-if="src2" :src="src2" class="" :style="style1" :alt="alt2"></q-img>
           <div class="section_text">
diff --git a/src/components/CMyDashboard/CMyDashboard.vue b/src/components/CMyDashboard/CMyDashboard.vue
index e6dba4b..e6ca70d 100755
--- a/src/components/CMyDashboard/CMyDashboard.vue
+++ b/src/components/CMyDashboard/CMyDashboard.vue
@@ -290,24 +290,27 @@
 
               </CTitleBanner>
 
-              <div class="text-center">
-                <q-btn class="q-ma-md" rounded size="md"
-                       icon="fas fa-info"
-                       color="primary" @click="shownuovoviaggio=true"
-                       :label="$t('steps.nuovo_imbarco')">
-
-                </q-btn>
-              </div>
-
               <div v-if="!!dashboard.myself" class="q-pa-xs text-center">
 
                 <div v-if="!!dashboard.myself.name">
                   <div v-if="!HasNave">
-                    <CRequisiti :statebool="Completato9Req" :msgTrue="$t('steps.enter_nave_9req_ok')"
+                    <CRequisiti :statebool="Completato9Req" :msgTrue="$t('steps.enter_nave_9req_ok', {sitename:
+                  $t('ws.sitename')})"
                                 :color_ko="true"
                                 :msgFalse="$t('steps.enter_nave_9req_ko')">
                     </CRequisiti>
                   </div>
+
+                  <div class="text-center">
+                    <q-btn class="q-ma-md" rounded size="md"
+                           icon="fas fa-ship"
+                           color="positive" @click="shownuovoviaggio=true"
+                           :label="$t('steps.nuovo_imbarco')">
+
+                    </q-btn>
+                  </div>
+
+
                   <q-card class="my-card-shadow yes_shadow">
                     <q-img
                       src="statics/images/listanavi.jpg"
@@ -634,12 +637,13 @@
 
             </div>
             <br>
-            <div v-html="$t('steps.inserisci_invitante')" class="ins_invitante">
+            <!--<div v-html="$t('steps.inserisci_invitante')" class="ins_invitante">
 
-            </div>
+            </div>-->
             <br>
 
 
+            <!--
             <div class="column q-gutter-sm justify-center text-center">
               <q-input
                 bg-color="lightblue"
@@ -660,7 +664,8 @@
 
               </q-input>
 
-              <!--<q-toggle v-model="notifBot" :label="$t('dashboard.sendnotification')"/>-->
+              <q-toggle v-model="notifBot" :label="$t('dashboard.sendnotification')"/>
+              -->
 
               <q-btn class="q-ma-md" rounded size="md"
                      icon="fas fa-ship"
@@ -668,7 +673,6 @@
                      color="positive" @click="addNuovoImbarco"
                      :label="$t('steps.nuovo_imbarco')">
               </q-btn>
-            </div>
           </div>
         </q-card-section>
       </q-card>
diff --git a/src/components/CNextZoom/CNextZoom.ts b/src/components/CNextZoom/CNextZoom.ts
index 48f6843..dc924ac 100755
--- a/src/components/CNextZoom/CNextZoom.ts
+++ b/src/components/CNextZoom/CNextZoom.ts
@@ -14,7 +14,7 @@ import { CCopyBtn } from '../CCopyBtn'
 import { date } from 'quasar'
 
 @Component({
-  name: 'CStatusReg',
+  name: 'CNextZoom',
   components: { CTitleBanner, CCardState, CCopyBtn }
 })
 
diff --git a/src/components/CProductCard/CProductCard.scss b/src/components/CProductCard/CProductCard.scss
new file mode 100755
index 0000000..0d1e9d3
--- /dev/null
+++ b/src/components/CProductCard/CProductCard.scss
@@ -0,0 +1,3 @@
+.card .product-image {
+  height: 300px;
+}
diff --git a/src/components/CProductCard/CProductCard.ts b/src/components/CProductCard/CProductCard.ts
new file mode 100755
index 0000000..6011b61
--- /dev/null
+++ b/src/components/CProductCard/CProductCard.ts
@@ -0,0 +1,21 @@
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { tools } from '../../store/Modules/tools'
+import MixinBase from '@src/mixins/mixin-base'
+import { CTitleBanner } from '@components'
+import { CCardState } from '../CCardState'
+import { GlobalStore } from '../../store'
+import { CCopyBtn } from '../CCopyBtn'
+
+import { date } from 'quasar'
+import { IProduct } from '@src/model'
+
+@Component({
+  name: 'CProductCard',
+  components: { CTitleBanner, CCardState, CCopyBtn }
+})
+
+export default class CProductCard extends MixinBase {
+  @Prop({ required: true }) public product: IProduct
+  public $t
+
+}
diff --git a/src/components/CProductCard/CProductCard.vue b/src/components/CProductCard/CProductCard.vue
new file mode 100755
index 0000000..bd220a5
--- /dev/null
+++ b/src/components/CProductCard/CProductCard.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="q-pa-md row items-start q-gutter-md">
+
+      <q-card class="my-card">
+        <q-img :src="`statics/` + product.img">
+        </q-img>
+
+        <q-card-section>
+          <q-btn
+            fab
+            color="primary"
+            icon="fas fa-cart-plus"
+            class="absolute"
+            style="top: 0; right: 12px; transform: translateY(-50%);"
+          />
+
+          <div class="row no-wrap items-center">
+            <div class="col text-h6 ellipsis">
+              {{ product.name }}
+            </div>
+            <div class="col-auto text-grey text-caption q-pt-md row no-wrap items-center">
+              <q-icon name="place"/>
+              250 ft
+            </div>
+          </div>
+
+          <q-rating v-model="stars" :max="5" size="32px"/>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <div class="text-subtitle1">
+            € {{ product.price }}
+          </div>
+          <div class="text-caption text-grey">
+            {{ product.description }}
+          </div>
+        </q-card-section>
+
+        <q-separator/>
+
+        <q-card-actions>
+          <q-btn flat round icon="event"/>
+          <q-btn flat color="primary">
+            Aggiungi al Carrello
+          </q-btn>
+        </q-card-actions>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CProductCard.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CProductCard.scss';
+</style>
diff --git a/src/components/CProductCard/index.ts b/src/components/CProductCard/index.ts
new file mode 100755
index 0000000..34e134f
--- /dev/null
+++ b/src/components/CProductCard/index.ts
@@ -0,0 +1 @@
+export {default as CProductCard} from './CProductCard.vue'
diff --git a/src/components/CSignUpNotevole/CSignUpNotevole.vue b/src/components/CSignUpNotevole/CSignUpNotevole.vue
index c7e859b..d66f9ea 100755
--- a/src/components/CSignUpNotevole/CSignUpNotevole.vue
+++ b/src/components/CSignUpNotevole/CSignUpNotevole.vue
@@ -7,6 +7,7 @@
       </p>
     </div>
 
+    <!--
     <q-banner
       v-if="!nuovareg"
       rounded
@@ -24,6 +25,8 @@
       <span class="mybanner">{{ $t('reg.nuove_registrazioni')}}</span>
     </q-banner>
 
+    -->
+
     <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
 
     <div class="q-gutter-sm">
diff --git a/src/components/CStatusReg/CStatusReg.vue b/src/components/CStatusReg/CStatusReg.vue
index 382ddaa..a69755f 100755
--- a/src/components/CStatusReg/CStatusReg.vue
+++ b/src/components/CStatusReg/CStatusReg.vue
@@ -10,12 +10,12 @@
           <CCardState :mytext="$t('pages.statusreg.reg')" :myval="datastat.num_reg"
                       :myperc="100"></CCardState>
 
-          <CCardState :mytext="$t('pages.statusreg.passeggeri')"
+          <!--<CCardState :mytext="$t('pages.statusreg.passeggeri')"
                       mycolor="blue"
                       size="150px"
                       size_mob="130px"
                       :myval="datastat.num_passeggeri"
-                      :myperc="100"></CCardState>
+                      :myperc="100"></CCardState>-->
 
           <!--<CCardState :mytext="$t('statusreg.imbarcati')"
                       size="150px"
@@ -81,15 +81,17 @@
             </transition-group>
           </div>
 
-          <CGeoChart :mydata="datastat.arr_nations">
+          <!--<CGeoChart :mydata="datastat.arr_nations">
+
+          </CGeoChart>-->
 
-          </CGeoChart>
           <div class="row q-pa-sm text-center justify-center">
+            <!--
             <div class="clBorderZoom">
               <CListNationality :mydata="datastat.arr_nations">
 
               </CListNationality>
-            </div>
+            </div>-->
             <div class="clBorderTutor">
               <CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_daily')">
 
@@ -97,19 +99,11 @@
               <CLineChart :mydata="datastat.reg_weekly" :title="$t('stat.reg_weekly')">
 
               </CLineChart>
-              <CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_total')"
+              <!--<CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_total')"
                           :offset="datastat.numreg_untilday" :sum="true"
                           :mycolors="['#0b0', '#666']">
 
-              </CLineChart>
-            </div>
-            <div class="clBorderSteps">
-              <CLineChart :mydata="datastat.imbarcati_daily" :title="$t('stat.imbarcati')">
-
-              </CLineChart>
-              <CLineChart :mydata="datastat.imbarcati_weekly" :title="$t('stat.imbarcati_weekly')">
-
-              </CLineChart>
+              </CLineChart>-->
             </div>
           </div>
         </div>
diff --git a/src/components/CVideoPromo/CVideoPromo.vue b/src/components/CVideoPromo/CVideoPromo.vue
index 4030502..215302d 100755
--- a/src/components/CVideoPromo/CVideoPromo.vue
+++ b/src/components/CVideoPromo/CVideoPromo.vue
@@ -9,11 +9,28 @@
                     clcolor="text-white"
                     myclass="myshad" canopen="true" :visible="true">
 
-        <div v-if="toolsext.isLang('fr')">
-          <CVideo myvideokey="GZR0ncSaG8s"></CVideo>
+        <div v-if="showconditions">
+          <div v-if="toolsext.isLang('fr')">
+            <CVideo myvideokey="GZR0ncSaG8s"></CVideo>
+          </div>
+          <div v-else>
+            <CVideo myvideokey="DWfQzbOCK3s"></CVideo>
+          </div>
         </div>
         <div v-else>
-          <CVideo myvideokey="DWfQzbOCK3s"></CVideo>
+          <div v-if="toolsext.isLang('si')">
+            <CVideo myvideokey="5vJ-xSdoUmk"></CVideo>
+          </div>
+          <div v-else-if="toolsext.isLang('it')">
+            <CVideo myvideokey="GU93sIBG6yM"></CVideo>
+          </div>
+          <div v-else-if="toolsext.isLang('hr')">
+            <CVideo myvideokey="zBksb1vdddw"></CVideo>
+          </div>
+          <div v-else>
+            <CVideo myvideokey="16VpLhir7xg"></CVideo>
+          </div>
+
         </div>
       </CTitleBanner>
 
diff --git a/src/components/index.ts b/src/components/index.ts
index 7934d29..4fea1ec 100755
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -60,3 +60,5 @@ export * from './CMyRequirement'
 export * from './CSigninNoreg'
 export * from './CMyNave'
 export * from './CMyFlotta'
+export * from './CECommerce'
+export * from '../views/ecommerce/'
diff --git a/src/db/static_data.ts b/src/db/static_data.ts
index 97fb2ff..30a903e 100755
--- a/src/db/static_data.ts
+++ b/src/db/static_data.ts
@@ -9,7 +9,7 @@ import {
   IProject,
   ITodo,
   Privacy,
-  IPerson,
+  IUserProfile,
   IFunctionality,
   IPreloadImages
 } from '../model/index'
diff --git a/src/model/GlobalStore.ts b/src/model/GlobalStore.ts
index e9f6429..3fe9c18 100755
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -334,6 +334,7 @@ export interface IFunctionality {
   SHOW_IF_IS_SERVER_CONNECTION?: boolean
   ENABLE_TODOS_LOADING?: boolean
   ENABLE_PROJECTS_LOADING?: boolean
+  ENABLE_ECOMMERCE?: boolean
   SHOW_NEWSLETTER?: boolean
   SHOW_ONLY_POLICY?: boolean
   SHOW_MESSAGES?: boolean
diff --git a/src/model/index.ts b/src/model/index.ts
index f856338..a05578b 100755
--- a/src/model/index.ts
+++ b/src/model/index.ts
@@ -13,3 +13,4 @@ export * from './Projects'
 
 export * from './Calendar'
 export * from './Estimate'
+export * from './Products'
diff --git a/src/statics/lang/it.js b/src/statics/lang/it.js
index 0b927ea..4415291 100755
--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
@@ -82,10 +82,9 @@ const msg_it = {
       reg_total: 'Registrazioni Totali',
     },
     steps: {
-      nuovo_imbarco: 'Prenota un altro Viaggio',
-      vuoi_entrare_nuova_nave: 'Desideri aiutare il Movimento ad avanzare e intendi entrare in un\'altra Nave?<br>Effettuando un Nuovo Dono di 33€, potrai percorrere un altro viaggio ed avere un\'altra opportunità di diventare Sognatore!<br>' +
-      'Se confermi verrai aggiunto alla lista d\'attesa per i prossimi imbarchi.',
-      inserisci_invitante: 'Inserisci qui sotto l\'username della persona che vuoi aiutare, donandoti come suo Invitato:',
+      nuovo_imbarco: 'Entra Effettuando il tuo Dono',
+      vuoi_entrare_nuova_nave: 'Scegli il metodo di pagamento che preferisci, inviando 33€ al Sognatore.<br>Ricorda di mettere nei commenti/causale del pagamento: "<strong>Dono</strong>"',
+      inserisci_invitante: 'Facoltativo: Puoi inserire qui sotto l\'username della persona che vuoi aiutare, donandoti come suo Invitato:',
       vuoi_cancellare_imbarco: 'Sicuro di voler cancellare questo imbarco in Nave AYNI?',
       sei_stato_aggiunto: 'Sei stato aggiunto alla lista d\'imbarco! Nei prossimi giorni verrai aggiunto ad una Nuova Nave in partenza!',
       completed: 'Completati',
@@ -124,7 +123,7 @@ const msg_it = {
       enter_prog_requisiti_ok: 'Hai completato tutti i 5 requisiti per entrare nella Lista d\'Imbarco.<br>',
       enter_prog_msg: 'Riceverai un messaggio nei prossimi giorni su AYNI BOT, appena la tua Nave sarà pronta!',
       enter_prog_msg_2: 'Ricorda che più persone inviti e più sali di Posizione, per accedere alla prossima Nave!',
-      enter_nave_9req_ok: 'COMPLIMENTI! Hai Completato TUTTI i 7 Passi della Guida! Grazie per Aiutare {sitename} ad Espandersi!<br>Potrai molto presto partire con il tuo Viaggio, facendo il tuo dono e proseguendo verso il Sognatore',
+      enter_nave_9req_ok: 'COMPLIMENTI! Hai Completato TUTTI i 7 Passi della Guida! Grazie per Aiutare {sitename} ad Espandersi !<br>Ora puoi Iniziare il tuo Nuovo Viaggio, effettuando il tuo Dono e proseguendo verso il Sognatore',
       enter_nave_9req_ko: 'Ricorda che puoi Aiutare a far Crescere ed Espandere il Movimento, Condividendo con chiunque questo nostro viaggio!',
       enter_prog: 'Entro nella Lista d\'Imbarco',
       enter_prog_long: 'Ricorda che puoi Aiutare a far Crescere ed Espandere il Movimento, Condividendo con chiunque questo nostro viaggio!<br>',
diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts
index e189fed..c4bf48b 100755
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -163,6 +163,22 @@ const colTableWhere = [
   AddCol(DeleteRec)
 ]
 
+const colTableProducts = [
+  AddCol({ name: 'name', label_trans: 'products.name' }),
+  AddCol({ name: 'description', label_trans: 'products.description' }),
+  AddCol({ name: 'icon', label_trans: 'products.icon' }),
+  AddCol({ name: 'img', label_trans: 'products.img' }),
+  AddCol({ name: 'department', label_trans: 'products.department' }),
+  AddCol({ name: 'idProducer', label_trans: 'products.idProducer' }),
+  AddCol({ name: 'category', label_trans: 'products.category' }),
+  AddCol({ name: 'price', label_trans: 'products.price', fieldtype: tools.FieldType.number }),
+  AddCol({ name: 'color', label_trans: 'products.color' }),
+  AddCol({ name: 'size', label_trans: 'products.size' }),
+  AddCol({ name: 'quantity', label_trans: 'products.quantity', fieldtype: tools.FieldType.number }),
+  AddCol({ name: 'date', label_trans: 'products.date', fieldtype: tools.FieldType.date }),
+  AddCol(DeleteRec)
+]
+
 const colcontribtype = [
   AddCol({ name: 'label', label_trans: 'proj.longdescr' }),
   AddCol({ name: 'showprice', label_trans: 'event.showprice', fieldtype: tools.FieldType.boolean }),
@@ -296,7 +312,6 @@ const colTablePermission = [
   AddCol(DeleteRec)
 ]
 
-
 const colTableOperator = [
   AddCol({ name: 'username', label_trans: 'reg.username_short' }),
   AddCol({ name: 'name', label_trans: 'reg.name' }),
@@ -838,6 +853,13 @@ export const fieldsTable = {
       colkey: 'username',
       collabel: (rec) => rec.name + ' ' + rec.surname
     },
+    {
+      value: 'products',
+      label: 'Prodotti',
+      columns: colTableProducts,
+      colkey: 'id',
+      collabel: 'name'
+    },
     {
       value: 'wheres',
       label: 'Luoghi',
diff --git a/src/store/Modules/index.ts b/src/store/Modules/index.ts
index 6abf15e..2741a88 100755
--- a/src/store/Modules/index.ts
+++ b/src/store/Modules/index.ts
@@ -6,3 +6,4 @@ export {default as MessageStore} from './MessageStore'
 export {default as Todos} from './Todos'
 export {default as Projects} from './Projects'
 export {default as CalendarStore} from './Store/calendar/CalendarStore'
+export {default as Products} from './Products'
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index 7d61823..f29279d 100755
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -67,6 +67,7 @@ export const tools = {
 
   IDAPP_AYNI: '7',
   IDAPP_SIP: '9',
+  IDAPP_CNM: '10',
 
   TipoMsg: {
     SEND_LINK_CHAT_DONATORI: 1,
@@ -78,7 +79,7 @@ export const tools = {
     SEND_MSG_A_MEDIATORI: 1010,
     SEND_MSG_A_SOGNATORE: 1020,
     SEND_MSG_A_UTENTE_SOSTITUITO: 1030,
-    SEND_MSG_DONO_RICEVUTO_CORRETTAMENTE: 1040,
+    SEND_MSG_DONO_RICEVUTO_CORRETTAMENTE: 1040
   },
 
   listBestColor: [
@@ -1491,7 +1492,7 @@ export const tools = {
         myfunc: func,
         data: par.param2,
         username: par.param2.username,
-        notifBot: null,
+        notifBot: null
       }
 
       // if (par.param2.notifBot)
@@ -3242,16 +3243,19 @@ export const tools = {
 
   isBitActive(bit, whattofind) {
     if (whattofind > 0)
+      // tslint:disable-next-line:no-bitwise
       return ((bit & whattofind) === whattofind)
     else
       return false
   },
 
   SetBit(myval, bit) {
+    // tslint:disable-next-line:no-bitwise
     myval |= bit
     return myval
   },
   UnSetBit(myval, bit) {
+    // tslint:disable-next-line:no-bitwise
     myval &= ~bit
     return myval
   },
@@ -3407,7 +3411,7 @@ export const tools = {
 
   CapitalizeAllWords(str) {
     const splitStr = str.toLowerCase().split(' ')
-    for (var i = 0; i < splitStr.length; i++) {
+    for (let i = 0; i < splitStr.length; i++) {
       // You do not need to check if i is larger than splitStr length, as your for does that for you
       // Assign it back to the array
       splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1)
diff --git a/src/views/ecommerce/index.ts b/src/views/ecommerce/index.ts
new file mode 100755
index 0000000..0dedba0
--- /dev/null
+++ b/src/views/ecommerce/index.ts
@@ -0,0 +1 @@
+export * from './productsList'
diff --git a/src/views/ecommerce/productsList/index.ts b/src/views/ecommerce/productsList/index.ts
new file mode 100755
index 0000000..4a56142
--- /dev/null
+++ b/src/views/ecommerce/productsList/index.ts
@@ -0,0 +1 @@
+export {default as ProductsList} from './productsList.vue'
diff --git a/src/views/ecommerce/productsList/productsList.scss b/src/views/ecommerce/productsList/productsList.scss
new file mode 100755
index 0000000..9df13d3
--- /dev/null
+++ b/src/views/ecommerce/productsList/productsList.scss
@@ -0,0 +1,5 @@
+$heightBtn: 100%;
+
+.card .product-image {
+  height: 300px;
+}
diff --git a/src/views/ecommerce/productsList/productsList.ts b/src/views/ecommerce/productsList/productsList.ts
new file mode 100755
index 0000000..2090d99
--- /dev/null
+++ b/src/views/ecommerce/productsList/productsList.ts
@@ -0,0 +1,63 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import {
+  IAction,
+  IDrag, IProduct,
+  IProductsState, ITodo, ITodosState,
+  TypeProj
+} from '../../../model/index'
+import { SingleProject } from '../../../components/projects/SingleProject/index'
+import { CTodo } from '../../../components/todos/CTodo'
+
+import { tools } from '../../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { lists } from '../../../store/Modules/lists'
+import * as ApiTables from '../../../store/Modules/ApiTables'
+
+import { GlobalStore, Projects, Todos } from '@store'
+import { UserStore } from '@store'
+
+import { Getter } from 'vuex-class'
+
+import { date, Screen } from 'quasar'
+import { CProgress } from '../../../components/CProgress'
+import { CDate } from '../../../components/CDate'
+import { RouteNames } from '@src/router/route-names'
+import { CProductCard } from '@src/components/CProductCard'
+import { Action } from 'vuex'
+import Products from '@src/store/Modules/Products'
+
+const namespace: string = 'Products'
+
+@Component({
+  name: 'ProductsList',
+  components: { SingleProject, CProgress, CTodo, CDate, CProductCard },
+  filters: {
+    capitalize(value) {
+      if (!value) {
+        return ''
+      }
+      value = value.toString()
+      return value.charAt(0).toUpperCase() + value.slice(1)
+    }
+  }
+})
+
+export default class ProductsList extends Vue {
+  public $q: any
+
+  /*public $refs: {
+    singleproject: SingleProject[],
+    ctodo: CTodo
+  }*/
+
+  get getProducts() {
+    return Products.getters.getProducts()
+  }
+
+  public mounted() {
+    Products.actions.loadProducts()
+  }
+
+}
diff --git a/src/views/ecommerce/productsList/productsList.vue b/src/views/ecommerce/productsList/productsList.vue
new file mode 100755
index 0000000..4d983d7
--- /dev/null
+++ b/src/views/ecommerce/productsList/productsList.vue
@@ -0,0 +1,24 @@
+<template>
+  <q-page>
+    <div class="panel">
+      <div style="padding: 25px;">
+        <div class="container">
+          <div class="row">
+
+            <div class="col-md-4" v-for="(product, index) in getProducts" :key="index">
+              <CProductCard :product="product"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script lang="ts" src="./productsList.ts">
+
+</script>
+
+<style lang="scss" scoped>
+@import './productsList';
+</style>