Creazione tabella Product

src/components/CCard/CCard.vue

@@ -1,26 +1,28 @@
 <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>
+          <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 label="Biografia" name="two"></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="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>
+            <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"
@@ -43,7 +45,7 @@
           </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 :href="tools.getemailto(myop.email)" target="_blank">{{ myop.email }}
             </a>
           </div>
 
@@ -55,19 +57,15 @@
 
 
           <div class="op__storia" v-html="myop.intro"></div>
-                <q-btn rounded size="sm" color="secondary" @click="clicca()">Continua ...</q-btn>
+          <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-card>
+  </div>
 </template>
 
 <script lang="ts" src="./CCard.ts">

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
+
+
+}

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>

src/components/CECommerce/index.ts

@@ -0,0 +1 @@
+export {default as CECommerce} from './CECommerce.vue'

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 '
+  }
 }

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">

src/components/CMyDashboard/CMyDashboard.vue

@@ -290,24 +290,27 @@
 
               </CTitleBanner>
 
+              <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', {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-info"
-                       color="primary" @click="shownuovoviaggio=true"
+                           icon="fas fa-ship"
+                           color="positive" @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')"
-                                :color_ko="true"
-                                :msgFalse="$t('steps.enter_nave_9req_ko')">
-                    </CRequisiti>
-                  </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"
@@ -669,7 +674,6 @@
                      :label="$t('steps.nuovo_imbarco')">
               </q-btn>
           </div>
-          </div>
         </q-card-section>
       </q-card>
     </q-dialog>

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 }
 })
 

src/components/CProductCard/CProductCard.scss

@@ -0,0 +1,3 @@
+.card .product-image {
+  height: 300px;
+}

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
+
+}

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>

src/components/CProductCard/index.ts

@@ -0,0 +1 @@
+export {default as CProductCard} from './CProductCard.vue'

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">

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>

src/components/CVideoPromo/CVideoPromo.vue

@@ -9,12 +9,29 @@
                     clcolor="text-white"
                     myclass="myshad" canopen="true" :visible="true">
 
+        <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>
+          <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>
 
       <div v-if="showconditions">

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/'

src/db/static_data.ts

@@ -9,7 +9,7 @@ import {
   IProject,
   ITodo,
   Privacy,
-  IPerson,
+  IUserProfile,
   IFunctionality,
   IPreloadImages
 } from '../model/index'

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

src/model/index.ts

@@ -13,3 +13,4 @@ export * from './Projects'
 
 export * from './Calendar'
 export * from './Estimate'
+export * from './Products'

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>',

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',

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'

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)

src/views/ecommerce/index.ts

@@ -0,0 +1 @@
+export * from './productsList'

src/views/ecommerce/productsList/index.ts

@@ -0,0 +1 @@
+export {default as ProductsList} from './productsList.vue'

src/views/ecommerce/productsList/productsList.scss

@@ -0,0 +1,5 @@
+$heightBtn: 100%;
+
+.card .product-image {
+  height: 300px;
+}

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()
+  }
+
+}

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>