From 313a7db77dbac6ba2d19d44aee37121dc5cd97f4 Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Sun, 20 Oct 2019 01:22:38 +0200
Subject: [PATCH] - Added TablesList page - Added Insert Record empty

---
 .../CEventsCalendar/CEventsCalendar.ts        |  23 +--
 .../CEventsCalendar/CEventsCalendar.vue       |   7 +-
 src/components/CGridTableRec/CGridTableRec.ts | 147 ++++++++++++++----
 .../CGridTableRec/CGridTableRec.vue           |  77 +++++++--
 src/components/CPage/CPage.scss               |   0
 src/components/CPage/CPage.ts                 |  36 -----
 src/components/CPage/CPage.vue                |  28 ----
 src/components/CPage/index.ts                 |   1 -
 src/components/Header/Header.ts               |  19 ++-
 src/components/Header/Header.vue              |  10 +-
 src/components/index.ts                       |   2 +-
 src/model/Calendar.ts                         |  18 ++-
 src/model/GlobalStore.ts                      |  11 +-
 src/statics/i18n.js                           |  20 +++
 src/store/Modules/GlobalStore.ts              |  25 ++-
 src/store/Modules/tools.ts                    |  16 +-
 16 files changed, 292 insertions(+), 148 deletions(-)
 delete mode 100644 src/components/CPage/CPage.scss
 delete mode 100644 src/components/CPage/CPage.ts
 delete mode 100644 src/components/CPage/CPage.vue
 delete mode 100644 src/components/CPage/index.ts

diff --git a/src/components/CEventsCalendar/CEventsCalendar.ts b/src/components/CEventsCalendar/CEventsCalendar.ts
index f125114..43f0195 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.ts
+++ b/src/components/CEventsCalendar/CEventsCalendar.ts
@@ -26,6 +26,7 @@ import router from '@router'
 import { static_data } from '@src/db/static_data'
 import translate from '@src/globalroutines/util'
 import { lists } from '../../store/Modules/lists'
+import { GlobalStore } from '../../store/Modules'
 
 @Component({
   name: 'CEventsCalendar',
@@ -349,7 +350,7 @@ export default class CEventsCalendar extends Vue {
 
   public getEndTime(eventparam) {
     let endTime = new Date(eventparam.date + ' ' + eventparam.time + ':00')
-    endTime = date.addToDate(endTime, { minutes: eventparam.duration })
+    endTime = date.addToDate(endTime, { minutes: eventparam.dur })
     endTime = date.formatDate(endTime, 'HH:mm')
     return endTime
   }
@@ -394,7 +395,9 @@ export default class CEventsCalendar extends Vue {
 
   public addBookEventMenu(eventparam) {
     if (!UserStore.state.isLogged || !UserStore.state.verified_email) {
-      this.$router.push('/signin')
+      // Visu right Toolbar to make SignIn
+      GlobalStore.state.RightDrawerOpen = true
+      // this.$router.push('/signin')
     } else {
       console.log('addBookEventMenu')
       this.resetForm()
@@ -421,7 +424,7 @@ export default class CEventsCalendar extends Vue {
     if (eventparam.time) {
       timestamp = eventparam.date + ' ' + eventparam.time
       const startTime = new Date(timestamp)
-      const endTime = date.addToDate(startTime, { minutes: eventparam.duration })
+      const endTime = date.addToDate(startTime, { minutes: eventparam.dur })
       this.eventForm.dateTimeStart = this.formatDate(startTime) + ' ' + this.formatTime(startTime) // endTime.toString()
       this.eventForm.dateTimeEnd = this.formatDate(endTime) + ' ' + this.formatTime(endTime) // endTime.toString()
     } else {
@@ -513,8 +516,8 @@ export default class CEventsCalendar extends Vue {
       }
       const data: IEvents = {
         time: '',
-        duration: 0,
-        duration2: 0,
+        dur: 0,
+        dur2: 0,
         title: form.title,
         details: form.details,
         icon: form.icon,
@@ -524,7 +527,7 @@ export default class CEventsCalendar extends Vue {
       if (form.allDay === false) {
         // get time into separate var
         data.time = String(form.dateTimeStart).slice(11, 16)
-        data.duration = self.getDuration(form.dateTimeStart, form.dateTimeEnd, 'minutes')
+        data.dur = self.getDuration(form.dateTimeStart, form.dateTimeEnd, 'minutes')
       }
       if (update === true) {
         const index = self.findEventIndex(self.contextDay)
@@ -648,7 +651,7 @@ export default class CEventsCalendar extends Vue {
 
   public handleSwipe({ evt, ...info }) {
     if (this.dragging === false) {
-      if (info.duration >= 30 && this.ignoreNextSwipe === false) {
+      if (info.dur >= 30 && this.ignoreNextSwipe === false) {
         if (info.direction === 'right') {
           this.calendarPrev()
         } else if (info.direction === 'left') {
@@ -743,7 +746,7 @@ export default class CEventsCalendar extends Vue {
       s.top = timeStartPos(eventparam.time) + 'px'
     }
     if (timeDurationHeight) {
-      s.height = timeDurationHeight(eventparam.duration) + 'px'
+      s.height = timeDurationHeight(eventparam.dur) + 'px'
     }
     s['align-items'] = 'flex-start'
     return s
@@ -804,10 +807,10 @@ export default class CEventsCalendar extends Vue {
           if (eventsloc.length > 0) {
             // check for overlapping times
             const startTime = new Date(CalendarStore.state.eventlist[i].date + ' ' + CalendarStore.state.eventlist[i].time)
-            const endTime = date.addToDate(startTime, { minutes: CalendarStore.state.eventlist[i].duration })
+            const endTime = date.addToDate(startTime, { minutes: CalendarStore.state.eventlist[i].dur })
             for (let j = 0; j < eventsloc.length; ++j) {
               const startTime2 = new Date(eventsloc[j].date + ' ' + eventsloc[j].time)
-              const endTime2 = date.addToDate(startTime2, { minutes: eventsloc[j].duration2 })
+              const endTime2 = date.addToDate(startTime2, { minutes: eventsloc[j].dur2 })
               if (date.isBetweenDates(startTime, startTime2, endTime2) || date.isBetweenDates(endTime, startTime2, endTime2)) {
                 eventsloc[j].side = 'left'
                 // CalendarStore.state.eventlist[i].side = 'right'
diff --git a/src/components/CEventsCalendar/CEventsCalendar.vue b/src/components/CEventsCalendar/CEventsCalendar.vue
index 9817f5a..544ce1e 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.vue
+++ b/src/components/CEventsCalendar/CEventsCalendar.vue
@@ -1,10 +1,5 @@
-$t('
 <template>
     <div class="landing">
-        <CTitle imgbackground="../../statics/images/calendario_eventi.jpg"
-                headtitle="Calendario Eventi" sizes="max-height: 120px"></CTitle>
-
-
         <q-page class="column">
             <!-- display an myevent -->
             <q-dialog v-model="displayEvent">
@@ -469,7 +464,7 @@ $t('
                                 <div v-if="event.date" class="listaev__date">
                                     {{func_tools.getDateStr(event.date)}}
                                     <span v-if="event.time" class="cal__hours-content"> - {{ event.time }} <span
-                                            v-if="event.duration">- {{ getEndTime(event) }}</span></span>
+                                            v-if="event.dur">- {{ getEndTime(event) }}</span></span>
                                     <span v-if="event.days > 1"><br/>{{func_tools.getDateStr(tools.addDays(event.date, event.days - 1))}}</span>
                                 </div>
                             </div>
diff --git a/src/components/CGridTableRec/CGridTableRec.ts b/src/components/CGridTableRec/CGridTableRec.ts
index 9cb8869..0997475 100644
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -5,19 +5,28 @@ import { GlobalStore, UserStore } from '../../store/Modules/index'
 import { tools } from '../../store/Modules/tools'
 
 import { shared_consts } from '../../common/shared_vuejs'
-import { ICategory, IColGridTable } from '../../model'
+import { ICategory, IColGridTable, ITableRec } from '../../model'
 import { CTodo } from '../todos/CTodo'
 import { SingleProject } from '../projects/SingleProject'
 import { lists } from '../../store/Modules/lists'
 
 @Component({})
 export default class CGridTableRec extends Vue {
-  @Prop({ required: true }) public mytable: string
-  @Prop({ required: true }) public mytitle: string
-  @Prop({ required: true }) public mycolumns: any[]
-  @Prop({ required: true }) public colkey: string
+  @Prop({ required: false }) public prop_mytable: string
+  @Prop({ required: true }) public prop_mytitle: string
+  @Prop({ required: false, default: [] }) public prop_mycolumns: any[]
+  @Prop({ required: false, default: '' }) public prop_colkey: string
   @Prop({ required: false, default: '' }) public nodataLabel: string
   @Prop({ required: false, default: '' }) public noresultLabel: string
+  @Prop({ required: false, default: null }) public tablesList: ITableRec[]
+
+  public mytable: string
+  public mytitle: string
+  public mycolumns: any[]
+  public colkey: string
+
+  public tablesel: string = ''
+
   public $q
   public $t
   public loading: boolean = false
@@ -30,6 +39,7 @@ export default class CGridTableRec extends Vue {
   } = { sortBy: '', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 }
 
   public serverData: any [] = []
+  public spinner_visible: boolean = false
 
   public idsel: string = ''
   public colsel: string = ''
@@ -61,11 +71,11 @@ export default class CGridTableRec extends Vue {
   }
 
   public selItem(item, colsel) {
-    console.log('item', item)
+    // console.log('item', item)
     this.selected = item
     this.idsel = item._id
     this.colsel = colsel
-    console.log('this.idsel', this.idsel)
+    // console.log('this.idsel', this.idsel)
   }
 
   public undoVal() {
@@ -84,9 +94,7 @@ export default class CGridTableRec extends Vue {
       // colkey: this.colkey,
       id: this.idsel,
       table: this.mytable,
-      fieldsvalue: {
-
-      }
+      fieldsvalue: {}
     }
 
     mydata.fieldsvalue[this.colsel] = newVal
@@ -103,15 +111,28 @@ export default class CGridTableRec extends Vue {
 
   public created() {
     // this.serverData = this.mylist.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
-    this.mycolumns.forEach((elem) => {
-      if (elem.field !== '')
-        this.colVisib.push(elem.field)
 
-      if (elem.visible && elem.field === '')
-        this.colExtra.push(elem.name)
+    this.mytable = this.prop_mytable
+    this.mytitle = this.prop_mytitle
+    this.mycolumns = this.prop_mycolumns
+    this.colkey = this.prop_colkey
 
-    })
+    this.changeTable(false)
+  }
 
+  public updatedcol() {
+    if (this.mycolumns) {
+      this.colVisib = []
+      this.colExtra = []
+      this.mycolumns.forEach((elem) => {
+        if (elem.field !== '')
+          this.colVisib.push(elem.field)
+
+        if (elem.visible && elem.field === '')
+          this.colExtra.push(elem.name)
+
+      })
+    }
   }
 
   get getrows() {
@@ -122,8 +143,13 @@ export default class CGridTableRec extends Vue {
     const { page, rowsPerPage, rowsNumber, sortBy, descending } = props.pagination
     const filter = props.filter
 
+    if (!this.mytable)
+      return
+
     this.loading = true
 
+    this.spinner_visible = true
+
     // update rowsCount with appropriate value
 
     // get all rows if "All" (0) is selected
@@ -133,13 +159,20 @@ export default class CGridTableRec extends Vue {
     const startRow = (page - 1) * rowsPerPage
     const endRow = startRow + fetchCount
 
-      // fetch data from "server"
+    // fetch data from "server"
     this.fetchFromServer(startRow, endRow, filter, sortBy, descending).then((ris) => {
 
       this.pagination.rowsNumber = this.getRowsNumberCount(filter)
 
       // clear out existing data and add new
-      this.serverData.splice(0, this.serverData.length, ...this.returnedData)
+      if (this.returnedData === []) {
+        this.serverData = []
+      } else {
+        if (this.serverData.length > 0)
+          this.serverData.splice(0, this.serverData.length, ...this.returnedData)
+        else
+          this.serverData = [...this.returnedData]
+      }
 
       // don't forget to update local pagination object
       this.pagination.page = page
@@ -149,6 +182,7 @@ export default class CGridTableRec extends Vue {
 
       // ...and turn of loading indicator
       this.loading = false
+      this.spinner_visible = false
     })
   }
 
@@ -174,8 +208,6 @@ export default class CGridTableRec extends Vue {
       descending
     }
 
-    console.table(params)
-
     const data = await GlobalStore.actions.loadTable(params)
 
     if (data) {
@@ -186,7 +218,9 @@ export default class CGridTableRec extends Vue {
       this.returnedCount = 0
     }
 
-      // if (!filter) {
+    return true
+
+    // if (!filter) {
     //   data = this.original.slice(startRow, startRow + count)
     // }
     // else {
@@ -244,6 +278,21 @@ export default class CGridTableRec extends Vue {
     return (col.disable || !this.canEdit) ? '' : 'colmodif'
   }
 
+  public async createNewRecord() {
+    this.loading = true
+
+    const mydata = {
+      table: this.mytable,
+      data: {}
+    }
+    const data = await GlobalStore.actions.saveTable(mydata)
+
+    this.serverData.push(data)
+    this.pagination.rowsNumber++
+
+    this.loading = false
+  }
+
   public saveFieldValue(mydata) {
     console.log('saveFieldValue', mydata)
 
@@ -259,11 +308,11 @@ export default class CGridTableRec extends Vue {
   }
 
   public mounted() {
-    this.mycolumns.forEach((rec: IColGridTable) => {
-      if (rec.label_trans)
-        rec.label = this.$t(rec.label_trans)
-    })
+    this.changeTable(false)
 
+  }
+
+  public refresh() {
     this.onRequest({
       pagination: this.pagination,
       filter: undefined
@@ -278,7 +327,8 @@ export default class CGridTableRec extends Vue {
 
   public ActionAfterYes(action, item) {
     if (action === lists.MenuAction.DELETE_RECTABLE) {
-      this.serverData.splice(this.serverData.indexOf(item), 1)
+      if (this.serverData.length > 0)
+        this.serverData.splice(this.serverData.indexOf(item), 1)
     }
   }
 
@@ -296,10 +346,51 @@ export default class CGridTableRec extends Vue {
 
   public visuValByType(col, val) {
     if (col.isdate) {
-      return tools.getstrDateTime(val)
+      if (val === undefined) {
+        return '[]'
+      } else {
+        return tools.getstrDateTime(val)
+      }
     } else {
-      return val
+      if (val === undefined) {
+        return '[]'
+      } else {
+        let mystr = tools.firstchars(val, tools.MAX_CHARACTERS)
+        if (val.length > tools.MAX_CHARACTERS)
+          mystr += '...'
+        return mystr
+      }
     }
   }
 
+  public changeTable(mysel) {
+    // console.log('changeTable')
+
+    let mytab = null
+    if (this.tablesList) {
+      if (!this.tablesel) {
+        this.tablesel = this.tablesList[0].value
+      }
+
+      mytab = this.tablesList.find((rec) => rec.value === this.tablesel)
+    }
+
+    if (mytab) {
+      this.mytitle = mytab.label
+      this.colkey = mytab.colkey
+      this.mycolumns = [...mytab.columns]
+    }
+
+    this.mycolumns.forEach((rec: IColGridTable) => {
+      if (rec.label_trans)
+        rec.label = this.$t(rec.label_trans)
+    })
+
+    if (mytab) {
+      this.mytable = mytab.value
+    }
+
+    this.updatedcol()
+    this.refresh()
+  }
 }
diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue
index e96a05c..aaf8daa 100644
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -34,14 +34,20 @@
 
                 <!--<p style="color:red"> Rows: {{ getrows }}</p>-->
 
-                <q-toggle v-model="funcActivated" :val="lists.MenuAction.CAN_EDIT_TABLE"
+                <q-toggle v-if="mytable" v-model="funcActivated" :val="lists.MenuAction.CAN_EDIT_TABLE" class="q-mx-sm"
                           :label="$t('grid.editvalues')"></q-toggle>
 
+                <q-btn v-if="mytable" label="Refresh" color="primary" @click="refresh" class="q-mx-sm"></q-btn>
+                <q-btn v-if="mytable" flat dense color="primary" :disable="loading" label="Add Record"
+                       @click="createNewRecord"></q-btn>
+
                 <q-space/>
 
+
                 <!--<q-toggle v-for="(mycol, index) in mycolumns" v-model="colVisib" :val="rec.field" :label="mycol.label"></q-toggle>-->
 
                 <q-select
+                        v-if="mytable"
                         v-model="colVisib"
                         multiple
                         borderless
@@ -56,18 +62,71 @@
 
                 </q-select>
 
+                <q-select v-if="tablesList"
+                          v-model="tablesel"
+                          rounded
+                          outlined
+                          dense
+                          :options="tablesList"
+                          :display-value="mytitle"
+                          emit-value
+                          @input="changeTable"
+                >
+                </q-select>
+
+
+                <q-inner-loading :showing="spinner_visible">
+                    <q-spinner-gears size="50px" color="primary"/>
+                </q-inner-loading>
+
             </template>
 
-            <q-tr slot="body" slot-scope="props" :props="props">
+            <q-tr v-if="mytable" slot="body" slot-scope="props" :props="props">
                 <q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colVisib.includes(col.field)">
-                    <div :class="getclassCol(col)">
-                        {{ visuValByType(col, props.row[col.name]) }}
-                        <q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
-                                      :title="col.title" buttons
-                                      @save="SaveValue" @show="selItem(props.row, col.field)">
-                            <q-input v-model="props.row[col.name]"/>
+                    <div v-if="col.isdate">
+                        <div style="max-width: 250px">
+                            <q-input dense v-model="props.row[col.name]">
+                                <template v-slot:prepend>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                                      :title="col.title" buttons
+                                                      @save="SaveValue" @show="selItem(props.row, col.field)">
+                                            <q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" />
 
-                        </q-popup-edit>
+                                        </q-popup-edit>
+                                        <!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
+                                            <!--<q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" />-->
+                                        <!--</q-popup-proxy>-->
+                                    </q-icon>
+                                </template>
+
+                                <template v-slot:append>
+                                    <q-icon name="access_time" class="cursor-pointer">
+                                        <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                                      :title="col.title" buttons
+                                                      @save="SaveValue" @show="selItem(props.row, col.field)">
+                                            <q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h />
+
+                                        </q-popup-edit>
+
+                                        <!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
+                                            <!--<q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h />-->
+                                        <!--</q-popup-proxy>-->
+                                    </q-icon>
+                                </template>
+                            </q-input>
+                        </div>
+                    </div>
+                    <div v-else>
+                        <div :class="getclassCol(col)">
+                            {{ visuValByType(col, props.row[col.name]) }}
+                            <q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                          :title="col.title" buttons
+                                          @save="SaveValue" @show="selItem(props.row, col.field)">
+                                <q-input v-model="props.row[col.name]"/>
+
+                            </q-popup-edit>
+                        </div>
                     </div>
                 </q-td>
                 <q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colExtra.includes(col.name)">
diff --git a/src/components/CPage/CPage.scss b/src/components/CPage/CPage.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/CPage/CPage.ts b/src/components/CPage/CPage.ts
deleted file mode 100644
index 1d16cac..0000000
--- a/src/components/CPage/CPage.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
-import { GlobalStore, UserStore } from '@store'
-
-import { Logo } from '../../components/logo'
-
-import { Footer } from '../../components/Footer'
-
-import VueScrollReveal from 'vue-scroll-reveal'
-import { tools } from '@src/store/Modules/tools'
-import { toolsext } from '@src/store/Modules/toolsext'
-import { Screen } from 'quasar'
-
-Vue.use(VueScrollReveal, {
-  class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.
-  duration: 1200,
-  scale: 0.95,
-  distance: '10px',
-  rotate: {
-    x: 0,
-    y: 0,
-    z: 0
-  }
-  // mobile: true
-})
-
-@Component({
-  name: 'CPage',
-  components: { Logo, Footer }
-})
-export default class CPage extends Vue {
-  @Prop({ required: true }) public imghead: string = ''
-  @Prop({ required: true }) public headtitle: string = ''
-  @Prop({ required: true }) public img1: string = ''
-  @Prop({ required: true }) public text1: string = ''
-}
diff --git a/src/components/CPage/CPage.vue b/src/components/CPage/CPage.vue
deleted file mode 100644
index 9646e04..0000000
--- a/src/components/CPage/CPage.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-    <q-page class="text-white">
-        <div class="landing">
-            <CTitle :src="imghead" :title="headtitle">
-            </CTitle>
-
-            <section class="padding_testo bg-white text-grey-10 text-center" v-scroll-reveal.reset>
-                <div class="landing__features row items-start q-col-gutter-xs intro">
-                    <div class="intro__associazione">
-                        <!--<img src="../../statics/images/scuolaopbenessere/16427623_404497389905092_1266178961781563443_n.jpg">-->
-                        <img :src="img1">
-                        {{text1}}
-                    </div>
-                </div>
-            </section>
-
-            <Footer></Footer>
-        </div>
-
-    </q-page>
-
-
-</template>
-<script lang="ts" src="./CPage.ts">
-</script>
-<style lang="scss" scoped>
-    @import './CPage.scss';
-</style>
diff --git a/src/components/CPage/index.ts b/src/components/CPage/index.ts
deleted file mode 100644
index bb5e7cb..0000000
--- a/src/components/CPage/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {default as CPage} from './CPage.vue'
diff --git a/src/components/Header/Header.ts b/src/components/Header/Header.ts
index ecc3f77..020f9a2 100644
--- a/src/components/Header/Header.ts
+++ b/src/components/Header/Header.ts
@@ -37,16 +37,11 @@ export default class Header extends Vue {
   public clCloudDownload: string = ''
   public clCloudUp_Indexeddb: string = ''
   public clCloudDown_Indexeddb: string = 'clIndexeddbsend'
-  public right: boolean = false
   public photo = ''
   public visuimg: boolean = true
 
-  get getappname(){
-    if (Screen.width < 400) {
-      return this.$t('msg.myAppNameShort')
-    } else {
-      return this.$t('msg.myAppName')
-    }
+  get tools() {
+    return tools
   }
 
   get conn_changed() {
@@ -110,6 +105,14 @@ export default class Header extends Vue {
     localStorage.setItem(tools.localStorage.leftDrawerOpen, value.toString())
   }
 
+  get rightDrawerOpen() {
+    return GlobalStore.state.RightDrawerOpen
+  }
+
+  set rightDrawerOpen(value) {
+    GlobalStore.state.RightDrawerOpen = value
+  }
+
   get lang() {
     return this.$q.lang.isoName
   }
@@ -380,7 +383,7 @@ export default class Header extends Vue {
   }
 
   public clickregister() {
-    this.right = false
+    this.rightDrawerOpen = false
     this.$router.replace('/signup')
   }
 }
diff --git a/src/components/Header/Header.vue b/src/components/Header/Header.vue
index ba57bbe..991deb0 100644
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@@ -39,7 +39,7 @@
                     <q-avatar>
                         <img :src="imglogo" height="27">
                     </q-avatar>
-                    {{getappname}}
+                    {{tools.getappname()}}
                     <div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
                 </q-toolbar-title>
 
@@ -105,10 +105,10 @@
                 <!-- BUTTON USER BAR -->
 
                 <q-btn v-if="static_data.functionality.SHOW_USER_MENU && !isLogged" dense flat round icon="menu"
-                       @click="right = !right">
+                       @click="rightDrawerOpen = !rightDrawerOpen">
                 </q-btn>
                 <q-btn v-if="static_data.functionality.SHOW_USER_MENU && isLogged" dense flat round
-                       icon="img:statics/images/avatar/avatar3_small.png" @click="right = !right">
+                       icon="img:statics/images/avatar/avatar3_small.png" @click="rightDrawerOpen = !rightDrawerOpen">
                 </q-btn>
 
             </q-toolbar>
@@ -128,7 +128,7 @@
         </q-drawer>
 
         <!-- USER BAR -->
-        <q-drawer v-if="static_data.functionality.SHOW_USER_MENU" v-model="right" side="right" elevated>
+        <q-drawer v-if="static_data.functionality.SHOW_USER_MENU" v-model="rightDrawerOpen" side="right" elevated>
             <div id="profile">
                 <q-img class="absolute-top" src="../../statics/images/landing_first_section.png"
                        style="height: 150px">
@@ -139,7 +139,7 @@
                         <img src="../../statics/images/avatar/avatar3_small.png">
                     </q-avatar>
                     <q-btn class="absolute-top-right" style="margin-right: 10px; color: white;"
-                           dense flat round icon="close" @click="right = !right">
+                           dense flat round icon="close" @click="rightDrawerOpen = !rightDrawerOpen">
                     </q-btn>
                     <div v-if="isLogged" class="text-weight-bold text-user">{{ Username }} - {{ myName }} <span
                             v-if="isAdmin"> [Admin]</span><span v-if="isManager"> [Manager]</span></div>
diff --git a/src/components/index.ts b/src/components/index.ts
index f9b2c6b..f15ec27 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,7 +4,7 @@ export * from './logo'
 export * from './CProgress'
 export * from './CCard'
 export * from './CBook'
-export * from './CPage'
+export * from './CMyPage'
 export * from './CTitle'
 export * from './CImgText'
 export * from './CImgTitle'
diff --git a/src/model/Calendar.ts b/src/model/Calendar.ts
index 8127050..456e916 100644
--- a/src/model/Calendar.ts
+++ b/src/model/Calendar.ts
@@ -1,11 +1,13 @@
 
 export interface IEvents {
   _id?: any
-  time?: string
-  duration?: number
-  duration2?: number
+  typol?: string
+  short_tit?: string
   title?: string
   details?: string
+  time?: string
+  dur?: number
+  dur2?: number
   date?: string
   side?: string
   bgcolor?: string
@@ -13,13 +15,19 @@ export interface IEvents {
   icon?: string
   img?: string
   where?: string
-  teacher?: string
-  teacher2?: string
+  contribtype?: number
+  teacher?: string  // teacherid
+  teacher2?: string // teacherid2
   avatar?: string
   avatar2?: string
   infoextra?: string
+  linkpage?: string
   linkpdf?: string
   nobookable?: boolean
+  news?: boolean
+  dupId?: any
+  canceled?: boolean
+  deleted?: boolean
 }
 
 export interface IBookedEvent {
diff --git a/src/model/GlobalStore.ts b/src/model/GlobalStore.ts
index f15afad..ffd00a3 100644
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -48,6 +48,7 @@ export interface IGlobalState {
   mobileMode: boolean
   menuCollapse: boolean
   leftDrawerOpen: boolean
+  RightDrawerOpen: boolean
   category: string
   stateConnection: string
   networkDataReceived: boolean
@@ -214,7 +215,7 @@ export interface IParamsQuery {
 
 export interface IColGridTable {
   name: string
-  required: boolean
+  required?: boolean
   label?: string
   label_trans?: string
   align?: string
@@ -227,4 +228,12 @@ export interface IColGridTable {
   action?: any
   foredit?: boolean
   isdate?: boolean
+  visuonlyEditVal?: boolean
+}
+
+export interface ITableRec {
+  label: string
+  value: string
+  columns: IColGridTable[]
+  colkey: string
 }
diff --git a/src/statics/i18n.js b/src/statics/i18n.js
index c1145ab..02332b2 100644
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -6,6 +6,7 @@ const msgglobal = {
       editvalues: 'Modifica Valori',
       showprevedit: 'Mostra Eventi Passati',
       columns: 'Colonne',
+      tableslist: 'Tabelle',
     },
     otherpages: {
       admin : {
@@ -13,6 +14,7 @@ const msgglobal = {
         eventlist: 'Le tue Prenotazioni',
         usereventlist: 'Prenotazioni Utenti',
         userlist: 'Lista Utenti',
+        tableslist: 'Lista Tabelle',
       },
       manage: {
         menu: 'Gestione'
@@ -78,6 +80,8 @@ const msgglobal = {
       incorso: 'Registrazione in corso...',
       richiesto: 'Campo Richiesto',
       email: 'Email',
+      cell: 'Móvil',
+      img: 'Imagen de archivo',
       date_reg: 'Data Reg.',
       perm: 'Permessi',
       username: 'Nome Utente',
@@ -239,6 +243,7 @@ const msgglobal = {
       editvalues: 'Cambiar valores',
       showprevedit: 'Mostrar eventos pasados',
       columns: 'Columnas',
+      tableslist: 'Tablas'
     },
     otherpages: {
       admin : {
@@ -246,6 +251,7 @@ const msgglobal = {
         eventlist: 'Sus Reservas',
         usereventlist: 'Reserva Usuarios',
         userlist: 'Lista de usuarios',
+        tableslist: 'Listado de tablas',
       },
       manage: {
         menu: 'Gestionar'
@@ -311,6 +317,8 @@ const msgglobal = {
       incorso: 'Registro en curso...',
       richiesto: 'Campo requerido',
       email: 'Email',
+      cell: 'Telefono',
+      img: 'File image',
       date_reg: 'Fecha Reg.',
       perm: 'Permisos',
       username: 'Nombre usuario',
@@ -466,6 +474,7 @@ const msgglobal = {
       editvalues: 'Changer les valeurs',
       showprevedit: 'Afficher les événements passés',
       columns: 'Colonnes',
+      tableslist: 'Tables',
     },
     otherpages: {
       admin : {
@@ -473,6 +482,7 @@ const msgglobal = {
         eventlist: 'Vos réservations',
         usereventlist: 'Réservation Utilisateur',
         userlist: 'Liste d\'utilisateurs',
+        tableslist: 'Liste des tables',
       },
       manage: {
         menu: 'Gérer'
@@ -537,6 +547,8 @@ const msgglobal = {
       incorso: 'Inscription en cours...',
       richiesto: 'Champ obligatoire',
       email: 'Email',
+      cell: 'Téléphone',
+      img: 'Fichier image',
       date_reg: 'Date Inscript.',
       perm: 'Autorisations',
       username: 'Nom d\'utilisateur',
@@ -692,6 +704,7 @@ const msgglobal = {
       editvalues: 'Edit Values',
       showprevedit: 'Show Past Events',
       columns: 'Columns',
+      tableslist: 'Tables',
     },
     otherpages: {
       admin : {
@@ -699,6 +712,7 @@ const msgglobal = {
         eventlist: 'Your Booking',
         usereventlist: 'Users Booking',
         userlist: 'Users List',
+        tableslist: 'List of tables',
       },
       manage: {
         menu: 'Manage'
@@ -763,6 +777,8 @@ const msgglobal = {
       incorso: 'Registration please wait...',
       richiesto: 'Field Required',
       email: 'Email',
+      cell: 'Phone',
+      img: 'File Image',
       date_reg: 'Reg. Date',
       perm: 'Permissions',
       username_login: 'Username or email',
@@ -917,6 +933,7 @@ const msgglobal = {
       editvalues: 'Edit Values',
       showprevedit: 'Show Past Events',
       columns: 'Columns',
+      tableslist: 'Tables',
     },
     otherpages: {
       admin : {
@@ -924,6 +941,7 @@ const msgglobal = {
         eventlist: 'Your Booking',
         usereventlist: 'Users Booking',
         userlist: 'Users List',
+        tableslist: 'List of tables',
       },
       manage: {
         menu: 'Manage'
@@ -989,6 +1007,8 @@ const msgglobal = {
       incorso: 'Registration please wait...',
       richiesto: 'Field Required',
       email: 'Email',
+      cell: 'Phone',
+      img: 'File Image',
       date_reg: 'Reg. Date',
       perm: 'Permissions',
       username_login: 'Username or email',
diff --git a/src/store/Modules/GlobalStore.ts b/src/store/Modules/GlobalStore.ts
index 192a772..04c6b98 100644
--- a/src/store/Modules/GlobalStore.ts
+++ b/src/store/Modules/GlobalStore.ts
@@ -17,7 +17,6 @@ import { GlobalStore, Projects, Todos, UserStore } from '@store'
 import messages from '../../statics/i18n'
 import globalroutines from './../../globalroutines/index'
 
-
 import { cfgrouter } from '../../router/route-config'
 import { static_data } from '@src/db/static_data'
 import { IParamsQuery } from '@src/model/GlobalStore'
@@ -41,6 +40,7 @@ const state: IGlobalState = {
   mobileMode: false,
   menuCollapse: true,
   leftDrawerOpen: true,
+  RightDrawerOpen: false,
   stateConnection: stateConnDefault,
   networkDataReceived: false,
   cfgServer: [],
@@ -504,15 +504,30 @@ namespace Actions {
   }
 
   async function loadTable(context, params: IParamsQuery) {
-    console.log('loadTable', params)
+    // console.log('loadTable', params)
 
     return await Api.SendReq('/gettable', 'POST', params)
       .then((res) => {
-        console.table(res)
+        // console.table(res)
         return res.data
       })
       .catch((error) => {
-        console.log('error loadUsersList', error)
+        console.log('error loadTable', error)
+        UserStore.mutations.setErrorCatch(error)
+        return null
+      })
+  }
+
+  async function saveTable(context, mydata: object) {
+    // console.log('saveTable', mydata)
+
+    return await Api.SendReq('/settable', 'POST', mydata)
+      .then((res) => {
+        // console.table(res)
+        return res.data
+      })
+      .catch((error) => {
+        console.log('error saveTable', error)
         UserStore.mutations.setErrorCatch(error)
         return null
       })
@@ -551,7 +566,6 @@ namespace Actions {
       })
   }
 
-
   export const actions = {
     setConta: b.dispatch(setConta),
     createPushSubscription: b.dispatch(createPushSubscription),
@@ -563,6 +577,7 @@ namespace Actions {
     checkUpdates: b.dispatch(checkUpdates),
     saveFieldValue: b.dispatch(saveFieldValue),
     loadTable: b.dispatch(loadTable),
+    saveTable: b.dispatch(saveTable),
     DeleteRec: b.dispatch(DeleteRec)
   }
 
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index 2191da9..618b254 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -33,6 +33,7 @@ export interface INotify {
 }
 
 export const tools = {
+  MAX_CHARACTERS: 60,
   projects: 'projects',
   todos: 'todos',
   EMPTY: 0,
@@ -1681,7 +1682,11 @@ export const tools = {
     if (!value) {
       return ''
     }
-    return value.substring(0, numchars) + '...'
+    try {
+      return value.substring(0, numchars) + '...'
+    }catch (e) {
+      return value
+    }
   },
 
   getDateNow() {
@@ -1877,8 +1882,8 @@ export const tools = {
 
     const maxh2 = this.heightGallVal()
 
-    console.log('maxh2', maxh2)
-    console.log('maxheight', maxheight)
+    // console.log('maxh2', maxh2)
+    // console.log('maxheight', maxheight)
 
     let ris = 0
 
@@ -1892,7 +1897,7 @@ export const tools = {
         ris = parseInt(myheightmobile, 10)
     }
 
-    console.log('ris', ris)
+    // console.log('ris', ris)
     return ris
   },
 
@@ -2199,7 +2204,8 @@ export const tools = {
           tools.showNotif(mythis.$q, mythis.$t('login.errato'), { color: 'negative', icon: 'notifications' })
           mythis.iswaitingforRes = false
           if (ispageLogin) {
-            mythis.$router.push('/signin')
+            GlobalStore.state.RightDrawerOpen = true
+            // mythis.$router.push('/signin')
           }
         })