From 44305d8778c852e62563a865f183381fab9087eb Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Thu, 24 Oct 2019 23:30:18 +0200
Subject: [PATCH] - Delete Event with ask confirmation - Fix dateStart only 1
 view if is the same day - Sending a message from the Event Page: to a user or
 to a "Event" - Add button "Ask Info" - Starting view msg into the
 messagepopup component

---
 .../CEventsCalendar/CEventsCalendar.ts        |  93 ++++++-
 .../CEventsCalendar/CEventsCalendar.vue       | 115 +++++----
 src/components/Header/Header.vue              |   2 -
 .../toolbar/messagePopover/messagePopover.ts  |  42 ++--
 .../toolbar/messagePopover/messagePopover.vue |  48 ++--
 src/model/Calendar.ts                         |  29 +++
 src/model/UserStore.ts                        |   2 +
 src/statics/i18n.js                           |  58 ++++-
 src/store/Modules/GlobalStore.ts              |  12 +-
 .../Modules/Store/calendar/CalendarStore.ts   |  11 +-
 src/store/Modules/UserStore.ts                |  38 ++-
 src/store/Modules/lists.ts                    |   1 +
 src/store/Modules/tools.ts                    | 237 +++++++++++++-----
 13 files changed, 508 insertions(+), 180 deletions(-)

diff --git a/src/components/CEventsCalendar/CEventsCalendar.ts b/src/components/CEventsCalendar/CEventsCalendar.ts
index fee862c..9cf1aa3 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.ts
+++ b/src/components/CEventsCalendar/CEventsCalendar.ts
@@ -22,7 +22,7 @@ import QDateTimeScroller from '@quasar/quasar-app-extension-qscroller/src/compon
 import { CTodo } from '@src/components/todos/CTodo'
 import { SingleProject } from '@src/components/projects/SingleProject'
 import { IEvents } from '@src/model'
-import { IBookedEvent, IBookedEventPage, EState } from '@src/model/Calendar'
+import { IBookedEvent, IBookedEventPage, IMessagePage, EState, IMessage, IDest, IOrigin } from '@src/model/Calendar'
 import { costanti } from '@src/store/Modules/costanti'
 import router from '@router'
 import { static_data } from '@src/db/static_data'
@@ -58,6 +58,17 @@ export default class CEventsCalendar extends Vue {
     modified: false
   }
 
+  public formAskForDefault: IMessage = {
+    dest: {
+      idapp: process.env.APP_ID,
+      username: ''
+    },
+    origin: {
+      userId: ''
+    },
+    message: ''
+  }
+
   public mioalert = false
 
   public dateFormatter: any = ''
@@ -78,10 +89,16 @@ export default class CEventsCalendar extends Vue {
     bookedevent: null,
     state: EState.None
   }
+  public askInfopage: IMessagePage = {
+    show: false,
+    msg: null,
+    state: EState.None
+  }
 
   public contextDay = null
   public eventForm: IEvents = { ...this.formDefault }
   public bookEventForm = { ...this.formbookEventDefault }
+  public askInfoForm: IMessage = { ...this.formAskForDefault }
   public displayEvent = false
   public myevent = null
   // public events = []
@@ -355,7 +372,6 @@ export default class CEventsCalendar extends Vue {
     return this
   }
 
-
   public $refs: {
     calendar: any
   }
@@ -434,6 +450,7 @@ export default class CEventsCalendar extends Vue {
       this.myevent = eventparam
       this.bookEventForm.msgbooking = ''
       this.bookEventForm.numpeople = 1
+      this.bookEventForm.booked = true
       this.bookEventpage.state = EState.Creating
 
       this.displayEvent = false
@@ -441,6 +458,28 @@ export default class CEventsCalendar extends Vue {
     }
   }
 
+  public askForInfoEventMenu(eventparam) {
+    if (!UserStore.state.isLogged || !UserStore.state.verified_email) {
+      // Visu right Toolbar to make SignIn
+      GlobalStore.state.RightDrawerOpen = true
+      // this.$router.push('/signin')
+    } else {
+      console.log('askForInfoEventMenu')
+      this.askInfoForm = { ...this.formAskForDefault }
+
+      this.myevent = eventparam
+
+      this.askInfoForm = {
+        message: ''
+      }
+
+      this.askInfopage.state = EState.Creating
+
+      this.displayEvent = false
+      this.askInfopage.show = true // show dialog
+    }
+  }
+
   public clEvent(event: IEvents) {
     return (this.isAlreadyBooked(event) ? 'text-left bg-light-green-1' : 'text-left')
   }
@@ -460,10 +499,7 @@ export default class CEventsCalendar extends Vue {
   }
 
   public deleteEvent(eventparam) {
-    const index = this.findEventIndex(eventparam)
-    if (index >= 0) {
-      CalendarStore.state.eventlist.splice(index, 1)
-    }
+    tools.CancelEvent(this, eventparam)
   }
 
   public findEventIndex(eventparam) {
@@ -514,7 +550,7 @@ export default class CEventsCalendar extends Vue {
 
     const mydatatosave = {
       id: myrec._id,
-      table: 'myevents',
+      table: tools.TABEVENTS,
       fieldsvalue: myrec
     }
 
@@ -557,7 +593,7 @@ export default class CEventsCalendar extends Vue {
       // ++Save into the Database
       const mydatatosave = {
         id: data._id,
-        table: 'myevents',
+        table: tools.TABEVENTS,
         fieldsvalue: data
       }
 
@@ -565,7 +601,7 @@ export default class CEventsCalendar extends Vue {
         this.UpdateDbByFields(data, true)
       } else {
         const mydataadd = {
-          table: 'myevents',
+          table: tools.TABEVENTS,
           data
         }
 
@@ -623,7 +659,36 @@ export default class CEventsCalendar extends Vue {
   }
 
   public sendMsg(myevent: IEvents) {
-    // ..
+    const self = this
+    this.askInfopage.show = false
+
+    const data: IMessage = {
+      idapp: process.env.APP_ID,
+      origin: {
+        userId: UserStore.state.userId,
+        page: '',
+        event_id: myevent._id,
+        infoevent: tools.gettextevent(this, myevent)
+      },
+      dest: {
+        idapp: process.env.APP_ID,
+        username: myevent.teacher
+      },
+      read: false,
+      deleted: false,
+      message: this.askInfoForm.message,
+      datemsg: tools.getDateNow()
+    }
+
+    this.SendMsgEvent(data).then((ris) => {
+      self.contextDay = null
+      if (ris)
+        tools.showPositiveNotif(self.$q, self.$t('cal.sendmsg_sent'))
+      else
+        tools.showNegativeNotif(self.$q, self.$t('cal.sendmsg_error'))
+    })
+
+
   }
 
   public saveBookEvent(myevent: IEvents) {
@@ -772,6 +837,10 @@ export default class CEventsCalendar extends Vue {
     return await CalendarStore.actions.BookEvent(eventparam)
   }
 
+  public async SendMsgEvent(param: IMessage) {
+    return await UserStore.actions.SendMsgEvent(param)
+  }
+
   public isAlreadyBooked(eventparam: IEvents) {
     return CalendarStore.getters.findEventBooked(eventparam, true)
   }
@@ -961,6 +1030,8 @@ export default class CEventsCalendar extends Vue {
     // check if event is in the past
     const datenow = tools.addDays(tools.getDateNow(), -1)
 
-    return (myevent.dateTimeEnd >= datenow)
+    // console.log('datenow', datenow, 'end', myevent.dateTimeEnd)
+
+    return (new Date(myevent.dateTimeEnd) >= datenow)
   }
 }
diff --git a/src/components/CEventsCalendar/CEventsCalendar.vue b/src/components/CEventsCalendar/CEventsCalendar.vue
index 463ee3b..84e40f4 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.vue
+++ b/src/components/CEventsCalendar/CEventsCalendar.vue
@@ -74,23 +74,9 @@
                                 </q-chip>
                             </div>
                             <div v-if="myevent.dateTimeStart" class="cal__when">
-                                <span class="cal__where-title">{{$t('cal.when')}}: </span>
-                                <span class="cal__where-content">{{ tools.getstrDate(myevent.dateTimeStart)}} - {{ tools.getstrDate(myevent.dateTimeEnd)}}</span>
-
-                                <span v-if="myevent.infoextra" class="cal__hours">
-                                        <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
-                                        <span class="cal__hours-content">{{ myevent.infoextra }}  </span>
-                                    </span>
-                                <span v-else>
-                                        <span v-if="!tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
-                                              class="cal__hours">
-                                             -
-                                            <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
-                                            <span class="cal__hours-content">{{$t('cal.starttime')}} {{ tools.getstrTime(myevent.dateTimeStart) }}
-                                                <span v-if="myevent.dateTimeEnd">{{ $t('cal.endtime')}}: {{ tools.getstrTime(myevent.dateTimeEnd) }}</span>
-                                            </span>
-                                        </span>
-                                    </span>
+                                <span class="cal__where-title">{{$t('cal.when')}}:
+                                    <span v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
+                                </span>
                             </div>
                             <p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
                                 <q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
@@ -307,29 +293,9 @@
                                 {{myevent.title}}
                             </q-chip>
                             <div v-if="myevent.dateTimeStart" class="cal__when">
-                                <span class="cal__where-title">{{$t('cal.when')}}: </span>
-                                <span class="cal__where-content">{{func_tools.getDateStr(myevent.dateTimeStart)}}</span>
-                                <span v-if="tools.hasManyDays(myevent.dateTimeStart)" class="cal__where-content"> - {{func_tools.getDateStr(myevent.dateTimeEnd)}}<br/></span>
-                                <span v-if="myevent.infoextra" class="cal__hours">
-                                        <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
-                                        <span class="cal__hours-content">{{ myevent.infoextra }}  </span>
-                                    </span>
-                                <span v-else>
-                                        <span v-if="!tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
-                                              class="cal__hours">
-                                             -
-                                            <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
-                                            <span class="cal__hours-content"><span v-if="!tools.isMobile()">{{$t('cal.starttime')}} </span>{{ tools.getstrTime(myevent.dateTimeStart) }}
-                                                <span v-if="myevent.dateTimeEnd">
-                                                    <span v-if="!tools.isMobile()">
-                                                    {{$t('cal.endtime')}}
-                                                    </span>
-                                                    <span v-else> - </span>
-                                                    {{ tools.getstrTime(myevent.dateTimeEnd) }}
-                                                </span>
-                                            </span>
-                                        </span>
-                                    </span>
+                                <span class="cal__where-title">{{$t('cal.when')}}:
+                                    <span v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
+                                </span>
                             </div>
                             <div class="q-pa-xs">
                                 <q-card class="text-white windowcol">
@@ -369,7 +335,7 @@
                         <q-btn v-if="bookEventpage.state === EState.Modifying" flat :label="$t('cal.cancelbooking')"
                                color="negative"
                                @click="tools.CancelBookingEvent(mythis, myevent, bookEventForm._id, true)"></q-btn>
-                        <q-btn v-if="checkseinviaMsg" flat :label="$t('dialog.sendmsg')" color="primary"
+                        <q-btn v-if="checkseinviaMsg" flat :label="$t('dialog.sendonlymsg')" color="primary"
                                @click="sendMsg(myevent)"></q-btn>
                         <q-btn v-else flat :label="getTitleBtnBooking" color="primary" @click="saveBookEvent(myevent)"
                                :disable="!(bookEventpage.state === EState.Creating || hasModifiedBooking)"></q-btn>
@@ -380,6 +346,53 @@
                 </q-card>
             </q-dialog>
 
+            <q-dialog v-model="askInfopage.show" no-backdrop-dismiss>
+                <q-card v-if="askInfopage.show" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+                    <q-toolbar class="bg-primary text-white">
+                        <q-toolbar-title>
+                            {{$t('cal.booking')}}
+                        </q-toolbar-title>
+                        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+                    </q-toolbar>
+
+                    <q-card-section class="inset-shadow">
+                        <q-img :src="getImgEvent(myevent)"
+                               class="absolute-top"
+                               style="height: 150px;">
+                        </q-img>
+                        <div style="margin-top: 150px;">
+
+                            <q-chip
+                                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
+                                    text-color="white"
+                                    class="shadow-5 q-mb-md" dense>
+                                {{myevent.title}}
+                            </q-chip>
+                            <div v-if="myevent.dateTimeStart" class="cal__when">
+                                <span class="cal__where-title">{{$t('cal.when')}}:
+                                    <span v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
+                                </span>
+                            </div>
+                            <div class="q-pa-xs">
+                                <q-card class="text-white windowcol">
+                                    <q-card-section>
+                                        <q-input v-model="askInfoForm.message" :label="$t('cal.msgbooking')+':'"
+                                                 autogrow>
+                                        </q-input>
+                                    </q-card-section>
+                                </q-card>
+
+                            </div>
+                        </div>
+                    </q-card-section>
+                    <q-card-actions align="right">
+                        <q-btn flat :label="$t('dialog.sendmsg')" color="primary"
+                               @click="sendMsg(myevent)"></q-btn>
+                        <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
+                    </q-card-actions>
+                </q-card>
+            </q-dialog>
+
             <!--v-touch-swipe.mouse.left.right="handleSwipe" -->
 
             <!-- the calendar -->
@@ -547,17 +560,7 @@
 
                         </p>
                         <div class="listaev__date listaev__align_center_mobile">
-
-                            <div v-if="event.infoextra">
-                                    <span class="listaev__date">{{func_tools.getDateStr(event.dateTimeStart)}} - <span
-                                            class="cal__hours-content">{{ event.infoextra }}</span> </span>
-                            </div>
-                            <div v-else>
-                                <div v-if="event.dateTimeStart" class="listaev__date">
-                                    {{tools.getstrDateTime(event.dateTimeStart)}} -
-                                    {{tools.getstrDateTime(event.dateTimeEnd)}}
-                                </div>
-                            </div>
+                            <span v-html="tools.getstrDateTimeEvent(mythis, event, true)"></span>
                         </div>
 
                         <div class="listaev__align_center_mobile">
@@ -649,12 +652,16 @@
                                         </span>
                             </p>
                             <div class="row justify-end">
-                                <q-btn rounded outline
+                                <q-btn rounded outline class="q-mx-sm"
+                                       color="primary" @click="askForInfoEventMenu(event)"
+                                       :label="$t('event.askinfo')">
+                                </q-btn>
+                                <q-btn rounded outline class="q-mx-sm"
                                        v-if="!event.nobookable && !isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
                                        color="primary" @click="addBookEventMenu(event)"
                                        :label="$t('cal.booking')" :disable="!isEventEnabled(event)">
                                 </q-btn>
-                                <q-btn rounded outline
+                                <q-btn rounded outline class="q-mx-sm"
                                        v-if="!event.nobookable && isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
                                        text-color="red"
                                        @click.native="EditBookEvent(event)"
diff --git a/src/components/Header/Header.vue b/src/components/Header/Header.vue
index 991deb0..f9b35c9 100644
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@@ -93,9 +93,7 @@
                 </q-btn-dropdown>
 
 
-                <!--
                 <message-popover></message-popover>
-                -->
 
                 <!--
                 <div class="right-itens">
diff --git a/src/layouts/toolbar/messagePopover/messagePopover.ts b/src/layouts/toolbar/messagePopover/messagePopover.ts
index a70bce7..05d3d3d 100644
--- a/src/layouts/toolbar/messagePopover/messagePopover.ts
+++ b/src/layouts/toolbar/messagePopover/messagePopover.ts
@@ -1,35 +1,33 @@
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 
-import { GlobalStore } from '@store'
-import { IPost } from '../../../model/index'
+import { GlobalStore, CalendarStore } from '@store'
+import { ICalendarState, IMessage, IPost, IUserState } from '../../../model/index'
 
 import './messagePopover.scss'
 import { tools } from '@src/store/Modules/tools'
 import { toolsext } from '@src/store/Modules/toolsext'
+import { ITodo, ITodosState } from '../../../model'
+import { Getter } from 'vuex-class'
+
+const namespace = 'UserModule'
 
 @Component({
 })
 export default class MessagePopover extends Vue {
-  posts: IPost[] = []
+
+  @Getter('getlasts_messages', { namespace })
+  public lasts_messages: (state: IUserState) => IMessage[]
 
   public created() {
-    if (GlobalStore.state.posts.length < 1) {
-      this.requestPosts()
-    }
+    // if (GlobalStore.state.posts.length < 1) {
+    //   this.requestPosts()
+    // }
   }
 
-  get filteredPosts() {
-    if (this.posts.length >= 1)
-      return this.posts.slice(0, 5)
-    else
-      return []
-  }
-
-
   public randomDate(): Date {
     let myval = Math.floor(Math.random() * 10000000000)
-    return new Date(tools.getTimestampsNow() - myval)
+    return tools.getstrDateTime(new Date(tools.getTimestampsNow() - myval))
   }
 
   public randomAvatarUrl() {
@@ -63,10 +61,14 @@ export default class MessagePopover extends Vue {
       */
   }
 
-  public requestPosts() {
-    // console.log('requestPosts...')
-    let prova = [{ title: 'primo' }, { title: 'Secondo' }]
-    this.posts.push(...prova)
-
+  get tools() {
+    return tools
   }
+
+  // public requestPosts() {
+  //   // console.log('requestPosts...')
+  //   let prova = [{ title: 'primo' }, { title: 'Secondo' }]
+  //   this.posts.push(...prova)
+  //
+  // }
 }
diff --git a/src/layouts/toolbar/messagePopover/messagePopover.vue b/src/layouts/toolbar/messagePopover/messagePopover.vue
index 93581e1..6574ced 100644
--- a/src/layouts/toolbar/messagePopover/messagePopover.vue
+++ b/src/layouts/toolbar/messagePopover/messagePopover.vue
@@ -3,21 +3,41 @@
         <i class="fa fa-2x fa-envelope-o"></i>
         <span class="floating label bg-dark">5</span>
         <q-menu self="top right">
-            <div class="list striped">
-                <p class="caption no-margin text-center text-white bg-teal">Messages from people</p>
-                <div class="item item-link two-lines item-delimiter no-margin"
-                     v-for="post in filteredPosts"
-                >
-                    <img class="item-primary" :src="randomAvatarUrl()">
-                    <div class="item-content has-secondary">
-                        <div>{{post.title}}</div>
-                        <div>{{randomDate()}}</div>
-                    </div>
-                    <span class="label bg-red text-white item-secondary no-margin">
-            <i class="left-detail"></i> New
-          </span>
+            <q-list bordered class="rounded-borders" style="max-width: 350px; min-width: 250px;">
+                <q-item-label header>{{$t('msgs.messages')}}</q-item-label>
+
+                <q-separator inset="item"/>
+
+                <div v-if="lasts_messages().length === 0">
+                    <q-item>
+                        {{$t('msgs.nomessage')}}
+
+                    </q-item>
                 </div>
-            </div>
+
+                <q-item clickable v-ripple v-for="(msg, index) in lasts_messages()" :key="index">
+
+                    <q-item-section avatar>
+                        <q-avatar>
+                            {{msg.origin.username}}
+                            <img src="https://cdn.quasar.dev/img/avatar2.jpg">
+                        </q-avatar>
+                    </q-item-section>
+
+                    <q-item-section>
+                        <q-item-label lines="1">{{msg.message}}</q-item-label>
+                        <q-item-label caption lines="2">
+
+                        </q-item-label>
+                    </q-item-section>
+
+                    <q-item-section side top>
+                        {{tools.getstrDateTime(msg.datemsg)}}
+                    </q-item-section>
+                </q-item>
+
+                <q-separator inset="item"/>
+            </q-list>
         </q-menu>
     </button>
 </template>
diff --git a/src/model/Calendar.ts b/src/model/Calendar.ts
index 11f830b..f923aeb 100644
--- a/src/model/Calendar.ts
+++ b/src/model/Calendar.ts
@@ -41,6 +41,29 @@ export interface IBookedEvent {
   booked: boolean
 }
 
+export interface IOrigin {
+  userId?: string
+  page?: string
+  event_id?: string
+  infoevent?: string
+}
+
+export interface IDest {
+  idapp?: string
+  username?: string
+}
+
+export interface IMessage {
+  _id?: any
+  idapp?: string
+  origin?: IOrigin
+  dest?: IDest
+  message: string
+  datemsg?: Date
+  read?: boolean
+  deleted?: boolean
+}
+
 export interface IOperators {
   username: string
   name: string
@@ -78,6 +101,12 @@ export interface IBookedEventPage {
   state: EState
 }
 
+export interface IMessagePage {
+  show: boolean
+  msg: IMessage
+  state: EState
+}
+
 export interface ICalendarState {
   editable: boolean
   eventlist: IEvents[]
diff --git a/src/model/UserStore.ts b/src/model/UserStore.ts
index 3d826fe..844411e 100644
--- a/src/model/UserStore.ts
+++ b/src/model/UserStore.ts
@@ -1,4 +1,5 @@
 import { IToken } from 'model/other'
+import { IMessage } from '@src/model/Calendar'
 
 export const DefaultUser = <IUserState>{
   email: '',
@@ -36,6 +37,7 @@ export interface IUserState {
   isManager?: boolean
   usersList?: IUserList[]
   countusers?: number
+  msgs?: IMessage[]
 }
 
 export interface IUserList {
diff --git a/src/statics/i18n.js b/src/statics/i18n.js
index 1cee75c..93ede4d 100644
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -33,7 +33,8 @@ const msgglobal = {
       add: 'Aggiungi',
       today: 'Oggi',
       book: 'Prenota',
-      sendmsg: 'Invia solo un Msg',
+      sendmsg: 'Invia Messaggio',
+      sendonlymsg: 'Invia solo un Msg',
       msg: {
         titledeleteTask: 'Elimina Task',
         deleteTask: "Vuoi Eliminare {mytodo}?"
@@ -194,14 +195,20 @@ const msgglobal = {
     cal: {
       booked: 'Prenotato',
       booked_error: 'Prenotazione non avvenuta. Riprovare più tardi',
+      sendmsg_error: 'Messaggio non inviato. Riprovare più tardi',
+      sendmsg_sent: 'Messaggio Inviato',
       booking: 'Prenota Evento',
       titlebooking: 'Prenotazione',
       modifybooking: 'Modifica Prenotazione',
       cancelbooking: 'Cancella Prenotazione',
       canceledbooking: 'Prenotazione Cancellata',
       cancelederrorbooking: 'Cancellazione non effettuata, Riprovare più tardi',
+      cancelevent: 'Cancella Evento',
+      canceledevent: 'Evento Cancellato',
+      cancelederrorevent: 'Cancellazione Evento non effettuata, Riprovare',
       event: 'Evento',
       starttime: 'Dalle',
+      enddate: 'al',
       endtime: 'alle',
       duration: 'Durata',
       hours: 'Orario',
@@ -224,6 +231,11 @@ const msgglobal = {
       teachertitle: 'Insegnante',
       peoplebooked: 'Prenotaz.',
     },
+    msgs: {
+      message: 'Messaggio',
+      messages: 'Messaggi',
+      nomessage: 'Nessun Messaggio'
+    },
     event: {
       _id: 'id',
       typol: 'Typology',
@@ -303,7 +315,8 @@ const msgglobal = {
       add: 'Aggrega',
       today: 'Hoy',
       book: 'Reserva',
-      sendmsg: 'Envia solo Mensaje',
+      sendmsg: 'Envia Mensaje',
+      sendonlymsg: 'Envia solo Mensaje',
       msg: {
         titledeleteTask: 'Borrar Tarea',
         deleteTask: 'Quieres borrar {mytodo}?'
@@ -458,6 +471,8 @@ const msgglobal = {
     cal: {
       booked: 'Reservado',
       booked_error: 'Reserva fallida. Intenta nuevamente más tarde',
+      sendmsg_error: 'Mensaje no enviado Intenta nuevamente más tarde',
+      sendmsg_sent: 'Mensaje enviado',
       booking: 'Reserva Evento',
       titlebooking: 'Reserva',
       modifybooking: 'Edita Reserva',
@@ -466,6 +481,7 @@ const msgglobal = {
       cancelederrorbooking: 'Cancelación no realizada, intente nuevamente más tarde',
       event: 'Evento',
       starttime: 'Inicio',
+      enddate: 'a',
       endtime: 'fin',
       duration: 'Duración',
       hours: 'Tiempo',
@@ -488,6 +504,11 @@ const msgglobal = {
       teachertitle: 'Maestro',
       peoplebooked: 'Reserv.',
     },
+    msgs: {
+      message: 'Mensaje',
+      messages: 'Mensajes',
+      nomessage: 'Sin Mensaje'
+    },
     event: {
       _id: 'id',
       typol: 'Typology',
@@ -567,7 +588,8 @@ const msgglobal = {
       cancel: 'annuler',
       today: 'Aujourd\'hui',
       book: 'Réserve',
-      sendmsg: 'envoyer seul un msg',
+      sendmsg: 'envoyer msg',
+      sendonlymsg: 'envoyer seul un msg',
       msg: {
         titledeleteTask: 'Supprimer la tâche',
         deleteTask: 'Voulez-vous supprimer {mytodo}?'
@@ -721,6 +743,8 @@ const msgglobal = {
     cal: {
       booked: 'Réservé',
       booked_error: 'La réservation a échoué. Réessayez plus tard',
+      sendmsg_error: 'Message non envoyé. Réessayez plus tard',
+      sendmsg_sent: 'Message envoyé',
       booking: 'Réserver l\'événement',
       titlebooking: 'Réservation',
       modifybooking: 'changement de réservation',
@@ -729,6 +753,7 @@ const msgglobal = {
       cancelederrorbooking: 'Annulation non effectuée, réessayez plus tard',
       event: 'événement',
       starttime: 'Accueil',
+      enddate: 'au',
       endtime: 'fin',
       duration: 'Durée',
       hours: 'Le temps',
@@ -751,6 +776,11 @@ const msgglobal = {
       teachertitle: 'Professeur',
       peoplebooked: 'Réserv.',
     },
+    msgs: {
+      message: 'Message',
+      messages: 'Messages',
+      nomessage: 'Pas de message'
+    },
     event: {
       _id: 'id',
       typol: 'Typologie',
@@ -830,7 +860,8 @@ const msgglobal = {
       cancel: 'Cancel',
       today: 'Today',
       book: 'Book',
-      sendmsg: 'Send only a Msg',
+      sendmsg: 'Send Message',
+      sendonlymsg: 'Send only a Msg',
       msg: {
         titledeleteTask: 'Delete Task',
         deleteTask: 'Delete Task {mytodo}?'
@@ -983,6 +1014,8 @@ const msgglobal = {
     cal: {
       booked: 'Booked',
       booked_error: 'Reservation failed. Try again later',
+      sendmsg_error: 'Message not sent. Try again later',
+      sendmsg_sent: 'Message sent',
       booking: 'Book the Event',
       titlebooking: 'Reservation',
       modifybooking: 'Modify Reservation',
@@ -991,6 +1024,7 @@ const msgglobal = {
       cancelederrorbooking: 'Cancellation unsuccessfully, try again later',
       event: 'Event',
       starttime: 'From',
+      enddate: 'to',
       endtime: 'to',
       duration: 'Duration',
       hours: 'Hours',
@@ -1013,6 +1047,11 @@ const msgglobal = {
       teachertitle: 'Teacher',
       peoplebooked: 'Booked',
     },
+    msgs: {
+      message: 'Messaggio',
+      messages: 'Messaggi',
+      nomessage: 'Nessun Messaggio'
+    },
     event: {
       _id: 'id',
       typol: 'Typology',
@@ -1092,7 +1131,8 @@ const msgglobal = {
       cancel: 'Cancel',
       today: 'Today',
       book: 'Book',
-      sendmsg: 'Send only a Msg',
+      sendmsg: 'Send Message',
+      sendonlymsg: 'Send only a Msg',
       msg: {
         titledeleteTask: 'Delete Task',
         deleteTask: 'Delete Task {mytodo}?'
@@ -1247,6 +1287,8 @@ const msgglobal = {
     cal: {
       booked: 'Booked',
       booked_error: 'Reservation failed. Try again later',
+      sendmsg_error: 'Message not sent. Try again later',
+      sendmsg_sent: 'Message sent',
       booking: 'Book the Event',
       titlebooking: 'Reservation',
       modifybooking: 'Modify Reservation',
@@ -1255,6 +1297,7 @@ const msgglobal = {
       cancelederrorbooking: 'Cancellation unsuccessfully, try again later',
       event: 'Event',
       starttime: 'From',
+      enddate: 'to',
       endtime: 'to',
       duration: 'Duration',
       hours: 'Hours',
@@ -1277,6 +1320,11 @@ const msgglobal = {
       teachertitle: 'Teacher',
       peoplebooked: 'Booked',
     },
+    msgs: {
+      message: 'Messaggio',
+      messages: 'Messaggi',
+      nomessage: 'Nessun Messaggio'
+    },
     event: {
       _id: 'id',
       typol: 'Typology',
diff --git a/src/store/Modules/GlobalStore.ts b/src/store/Modules/GlobalStore.ts
index eb155c8..c89ccf2 100644
--- a/src/store/Modules/GlobalStore.ts
+++ b/src/store/Modules/GlobalStore.ts
@@ -270,7 +270,7 @@ namespace Mutations {
   }
 
   function getListByTable(table): any[] {
-    if (table === 'myevents')
+    if (table === tools.TABEVENTS)
       return CalendarStore.state.eventlist
     else if (table === 'operators')
       return CalendarStore.state.operators
@@ -282,6 +282,8 @@ namespace Mutations {
       return CalendarStore.state.bookedevent
     else if (table === 'users')
       return UserStore.state.usersList
+    else if (table === 'sendmsgs')
+      return UserStore.state.msgs
     else
       return null
 
@@ -533,6 +535,12 @@ namespace Actions {
           UserStore.mutations.setusersList(res.data.usersList)
         }
 
+        if (res.data.msgs) {
+          UserStore.state.msgs = [...res.data.msgs]
+        }
+
+        console.log('UserStore.state.msgs', UserStore.state.msgs)
+
         // console.log('**********  res', 'state.todos', state.todos, 'checkPending', checkPending)
         // After Login will store into the indexedDb...
 
@@ -593,7 +601,7 @@ namespace Actions {
   }
 
   async function DeleteRec(context, { table, id }) {
-    console.log('DeleteRec', id)
+    console.log('DeleteRec', table, id)
 
     return await Api.SendReq('/delrec/' + table + '/' + id, 'DELETE', null)
       .then((res) => {
diff --git a/src/store/Modules/Store/calendar/CalendarStore.ts b/src/store/Modules/Store/calendar/CalendarStore.ts
index e66bcde..a6a52de 100644
--- a/src/store/Modules/Store/calendar/CalendarStore.ts
+++ b/src/store/Modules/Store/calendar/CalendarStore.ts
@@ -1,5 +1,5 @@
 import Api from '@api'
-import { IBookedEvent, ICalendarState, IEvents } from 'model'
+import { IBookedEvent, ICalendarState, IEvents, IMessage } from 'model'
 import { ILinkReg, IResult, IIdToken, IToken } from 'model/other'
 import { storeBuilder } from '../Store'
 
@@ -9,7 +9,7 @@ import { tools } from '../../tools'
 import translate from '../../../../globalroutines/util'
 import * as Types from '../../../Api/ApiTypes'
 import { db_data } from '@src/db/db_data'
-import { UserStore } from '@store'
+import { GlobalStore, UserStore } from '@store'
 import { lists } from '@src/store/Modules/lists'
 
 // State
@@ -190,6 +190,10 @@ namespace Actions {
 
   }
 
+  async function CancelEvent(context, { id }) {
+    return await GlobalStore.actions.DeleteRec({table: tools.TABEVENTS, id } )
+  }
+
   async function CancelBookingEvent(context, { ideventbook, notify }) {
     console.log('CALSTORE: CancelBookingEvent', ideventbook, notify)
 
@@ -216,7 +220,8 @@ namespace Actions {
 
   export const actions = {
     BookEvent: b.dispatch(BookEvent),
-    CancelBookingEvent: b.dispatch(CancelBookingEvent)
+    CancelBookingEvent: b.dispatch(CancelBookingEvent),
+    CancelEvent: b.dispatch(CancelEvent)
   }
 
   // async function resetpwd(context, paramquery: ICalendarState) {
diff --git a/src/store/Modules/UserStore.ts b/src/store/Modules/UserStore.ts
index e0a4d68..7ca6a7d 100644
--- a/src/store/Modules/UserStore.ts
+++ b/src/store/Modules/UserStore.ts
@@ -15,8 +15,9 @@ import { db_data } from '@src/db/db_data'
 
 import translate from './../../globalroutines/util'
 import * as Types from '@src/store/Api/ApiTypes'
-import { ICfgServer } from '@src/model'
+import { ICalendarState, ICfgServer } from '@src/model'
 import { shared_consts } from '../../common/shared_vuejs'
+import { IMessage } from '@src/model/Calendar'
 
 const bcrypt = require('bcryptjs')
 
@@ -39,6 +40,7 @@ const state: IUserState = {
   isAdmin: false,
   isManager: false,
   usersList: [],
+  msgs: [],
   countusers: 0
 }
 
@@ -119,6 +121,12 @@ namespace Getters {
     return mystate.usersList.find((item) => item._id === userId)
   }, 'getUserByUserId')
 
+  const getlasts_messages = b.read((mystate: IUserState) => () => {
+    const ctrec = (mystate.msgs) ? mystate.msgs.slice(0, 5) : []
+    return (ctrec)
+
+  }, 'getlasts_messages')
+
   export const getters = {
     get isUserInvalid() {
       return isUserInvalid()
@@ -149,6 +157,9 @@ namespace Getters {
     },
     get getUsersList() {
       return getUsersList()
+    },
+    get getlasts_messages() {
+      return getlasts_messages()
     }
     // get fullName() { return fullName();},
   }
@@ -684,6 +695,29 @@ namespace Actions {
     }
   }
 
+  async function SendMsgEvent(context, msg: IMessage) {
+    console.log('SendMsgEvent', msg)
+
+    return await Api.SendReq('/sendmsg', 'POST', msg)
+      .then((res) => {
+        console.log('res', res)
+        if (res.status === 200) {
+          if (res.data.code === serv_constants.RIS_CODE_OK) {
+            msg._id = res.data.id
+            state.msgs.push(msg)
+            return true
+          }
+        }
+        return false
+      })
+      .catch((error) => {
+        console.error(error)
+        return false
+      })
+
+  }
+
+
   /*
     async function refreshUserInfos(){
       let {token, refresh_token} = JWT.fetch();
@@ -700,7 +734,6 @@ namespace Actions {
     }
   */
 
-
   export const actions = {
     autologin_FromLocalStorage: b.dispatch(autologin_FromLocalStorage),
     logout: b.dispatch(logout),
@@ -708,6 +741,7 @@ namespace Actions {
     resetpwd: b.dispatch(resetpwd),
     signin: b.dispatch(signin),
     signup: b.dispatch(signup),
+    SendMsgEvent: b.dispatch(SendMsgEvent),
     vreg: b.dispatch(vreg)
   }
 
diff --git a/src/store/Modules/lists.ts b/src/store/Modules/lists.ts
index c7dd494..24c6784 100644
--- a/src/store/Modules/lists.ts
+++ b/src/store/Modules/lists.ts
@@ -17,6 +17,7 @@ export const lists = {
 
     DELETE_RECTABLE: 300,
     DUPLICATE_RECTABLE: 310,
+    DELETE_EVENT: 320,
 
     CAN_EDIT_TABLE: 400,
     SHOW_PREV_REC: 401
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index f89ddfd..cfb6cf8 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -33,6 +33,8 @@ export interface INotify {
 }
 
 export const tools = {
+  TABEVENTS: 'myevents',
+
   MAX_CHARACTERS: 60,
   projects: 'projects',
   todos: 'todos',
@@ -1331,6 +1333,16 @@ export const tools = {
         } else
           tools.showNegativeNotif(myself.$q, myself.$t('cal.cancelederrorbooking'))
       })
+    } else if (func === lists.MenuAction.DELETE_EVENT) {
+      console.log('param1', par.param1, 'id', par.param1._id)
+      CalendarStore.actions.CancelEvent({ id: par.param1._id }).then((ris) => {
+        if (ris) {
+          // Remove this record from my list
+          CalendarStore.state.eventlist = CalendarStore.state.eventlist.filter((event) => (event._id !== par.param1._id))
+          tools.showPositiveNotif(myself.$q, myself.$t('cal.canceledevent') + ' "' + par.param1.title + '"')
+        } else
+          tools.showNegativeNotif(myself.$q, myself.$t('cal.cancelederrorevent'))
+      })
     } else if (func === lists.MenuAction.DELETE_RECTABLE) {
       console.log('param1', par.param1)
       GlobalStore.actions.DeleteRec({ table, id: par.param1 }).then((ris) => {
@@ -1656,21 +1668,53 @@ export const tools = {
       return ''
   },
 
+  getstrDateTimeEvent(mythis, myevent, withhtml) {
+    let mystr = ''
+    // is same day?
+    if (tools.getstrDate(myevent.dateTimeStart) === tools.getstrDate(myevent.dateTimeEnd)) {
+      if (withhtml) {
+        mystr += `<span class="cal__where-content">${tools.getstrDate(myevent.dateTimeStart)}</span>
+                    <span class="cal__hours-content">${mythis.$t('cal.starttime')} ${ tools.getstrTime(myevent.dateTimeStart) }
+                    ${ mythis.$t('cal.endtime')} ${ tools.getstrTime(myevent.dateTimeEnd) }`
+      } else {
+        mystr = `${tools.getstrDate(myevent.dateTimeStart)}
+                 ${mythis.$t('cal.starttime')} ${ tools.getstrTime(myevent.dateTimeStart) }          
+                 ${ mythis.$t('cal.endtime')}: ${ tools.getstrTime(myevent.dateTimeEnd) }`
+      }
+    } else {
+      mystr = `<span class="cal__where-content">${tools.getstrDate(myevent.dateTimeStart)}</span>
+                 <span class="cal__hours-content">${mythis.$t('cal.starttime')} ${ tools.getstrTime(myevent.dateTimeStart) } </span>
+                  ${ mythis.$t('cal.enddate')} ${tools.getstrDate(myevent.dateTimeEnd)}
+                  <span class="cal__hours-content">${ mythis.$t('cal.endtime')}: ${ tools.getstrTime(myevent.dateTimeEnd) } </span>`
+    }
+
+    if (myevent.infoextra) {
+      mystr += `<span class="cal__hours">
+                  <span class="cal__hours-title">${mythis.$t('cal.hours')}: </span>
+                  <span class="cal__hours-content">${ myevent.infoextra }  </span>
+              </span>
+            </span>`
+    }
+    return mystr
+  },
+
   getstrDateTime(mytimestamp) {
     // console.log('getstrDate', mytimestamp)
     if (!!mytimestamp)
       return date.formatDate(mytimestamp, 'DD/MM/YYYY HH:mm')
     else
       return ''
-  },
+  }
+  ,
 
   getstrDateEmailTime(mythis, mytimestamp) {
     // console.log('getstrDate', mytimestamp)
     if (!!mytimestamp)
-      return date.formatDate(mytimestamp, 'DD/MM/YYYY') + ' ' + mythis.$t('starttime') + ' ' + date.formatDate(mytimestamp, 'HH:mm')
+      return date.formatDate(mytimestamp, 'DD/MM/YYYY') + ' ' + mythis.$t('cal.starttime') + ' ' + date.formatDate(mytimestamp, 'HH:mm')
     else
       return ''
-  },
+  }
+  ,
   getstrMMMDate(mytimestamp) {
     // console.log('getstrDate', mytimestamp)
     if (!!mytimestamp)
@@ -1681,10 +1725,12 @@ export const tools = {
   ,
   getstrYYMMDDDate(mytimestamp) {
     return date.formatDate(mytimestamp, 'YYYY-MM-DD')
-  },
+  }
+  ,
   getstrYYMMDDDateTime(mytimestamp) {
     return date.formatDate(mytimestamp, 'YYYY-MM-DD HH:mm')
-  },
+  }
+  ,
 
 // mystrdate "26.04.2013"
   convertstrtoDate(mystrdate
@@ -1714,7 +1760,8 @@ export const tools = {
     }
     value = value.toString()
     return value.charAt(0).toUpperCase() + value.slice(1)
-  },
+  }
+  ,
 
   firstchars(value, numchars = 200) {
     if (!value) {
@@ -1728,7 +1775,8 @@ export const tools = {
     } catch (e) {
       return value
     }
-  },
+  }
+  ,
 
   getDateNow() {
     const mydate = new Date()
@@ -1745,18 +1793,21 @@ export const tools = {
   ,
   getTimestampsNow() {
     return new Date().valueOf()
-  },
+  }
+  ,
 
   isMainProject(idproj) {
     return idproj === process.env.PROJECT_ID_MAIN
-  },
+  }
+  ,
 
-  getUrlByTipoProj(tipoproj, name?: string) {
+  getUrlByTipoProj(tipoproj, name ?: string) {
     if (!!name)
       return '/' + name + '/'
     else
       return '/' + tipoproj + '/'
-  },
+  }
+  ,
 
   // convertMenuListInListRoutes(arrlista: IMenuList[]) {
   //   const lista = []
@@ -1784,15 +1835,18 @@ export const tools = {
       return Privacy.onlyme
     else
       return Privacy.all
-  },
+  }
+  ,
 
   getprivacywritebytipoproj(tipoproj) {
     return Privacy.onlyme
-  },
+  }
+  ,
 
   addRoute(myarr, values) {
     myarr.push(values)
-  },
+  }
+  ,
   displayConfirmNotification() {
     let options = null
     if ('serviceWorker' in navigator) {
@@ -1819,7 +1873,8 @@ export const tools = {
           })
       }
     }
-  },
+  }
+  ,
 
   dataURItoBlob(dataURI) {
     const byteString = atob(dataURI.split(',')[1])
@@ -1831,7 +1886,8 @@ export const tools = {
     }
     const blob = new Blob([ab], { type: mimeString })
     return blob
-  },
+  }
+  ,
 
   showNotificationExample() {
     let options = null
@@ -1858,11 +1914,13 @@ export const tools = {
           swreg.showNotification('aaa', options)
         })
     }
-  },
+  }
+  ,
 
   getemailto(text) {
     return 'mailto:' + text
-  },
+  }
+  ,
 
   askfornotification() {
     tools.showNotif(this.$q, this.$t('notification.waitingconfirm'), { color: 'positive', icon: 'notifications' })
@@ -1878,11 +1936,13 @@ export const tools = {
       }
     })
 
-  },
+  }
+  ,
 
   heightgallery() {
     return tools.heightGallVal().toString() + 'px'
-  },
+  }
+  ,
 
   heightGallVal() {
     let maxh2 = 0
@@ -1904,9 +1964,10 @@ export const tools = {
     }
 
     return maxh2
-  },
+  }
+  ,
 
-  myheight_imgtitle(myheight?, myheightmobile?) {
+  myheight_imgtitle(myheight ?, myheightmobile ?) {
     let maxheight = 0
     if (!!myheight) {
       maxheight = myheight
@@ -1940,7 +2001,8 @@ export const tools = {
 
     // console.log('ris', ris)
     return ris
-  },
+  }
+  ,
 
   myheight_dialog() {
     if (Screen.width < 400) {
@@ -1950,9 +2012,10 @@ export const tools = {
     } else {
       return '500'
     }
-  },
+  }
+  ,
 
-  styles_imgtitle(sized?: string) {
+  styles_imgtitle(sized ?: string) {
     if (!!sized) {
       return sized
     } else {
@@ -1962,7 +2025,8 @@ export const tools = {
         return 'max-height: 350px'
       }
     }
-  },
+  }
+  ,
 
   /*
       <q-img
@@ -1988,7 +2052,8 @@ export const tools = {
       '(min-width: 400px) and (max-width: 800px) 800w, ' +
       '(min-width: 800px) and (max-width: 1200px) 1200w, ' +
       '(min-width: 1200px) 1600w'
-  },
+  }
+  ,
 
   maxwidth_imgtitle() {
     if (Screen.width < 400) {
@@ -1996,11 +2061,13 @@ export const tools = {
     } else {
       return 'max-width: 350px'
     }
-  },
+  }
+  ,
 
   isMobile() {
     return (Screen.width < 400)
-  },
+  }
+  ,
 
   mywidth_imgtitle() {
     if (Screen.width < 400) {
@@ -2010,11 +2077,13 @@ export const tools = {
     } else {
       return '350'
     }
-  },
+  }
+  ,
 
   mymargin_imgtitle() {
     return 'auto'
-  },
+  }
+  ,
 
   showthumbnails() {
     if (Screen.width < 400) {
@@ -2024,7 +2093,8 @@ export const tools = {
     } else {
       return true
     }
-  },
+  }
+  ,
 
   padTime(val) {
     val = Math.floor(val)
@@ -2032,9 +2102,10 @@ export const tools = {
       return '0' + val
     }
     return val + ''
-  },
+  }
+  ,
 
-  getLocale(vero?: boolean) {
+  getLocale(vero ?: boolean) {
     if (UserStore) {
       if (UserStore.state) {
         return UserStore.state.lang
@@ -2044,15 +2115,18 @@ export const tools = {
       return process.env.LANG_DEFAULT
     else
       return ''
-  },
+  }
+  ,
 
   addDays(mydate, days) {
     return date.addToDate(mydate, { days })
-  },
+  }
+  ,
 
   addMinutes(mydate, minutes) {
     return date.addToDate(mydate, { minutes })
-  },
+  }
+  ,
 
   gettitlemain(datamain: ITimeLineMain) {
     if (datamain.titlemain[toolsext.getLocale()])
@@ -2061,7 +2135,8 @@ export const tools = {
       return datamain.titlemain[static_data.arrLangUsed[0]]
     }
 
-  },
+  }
+  ,
   getwwithwhocoll(datamain: ICollaborations) {
     if (datamain.withwhom_title[toolsext.getLocale()])
       return datamain.withwhom_title[toolsext.getLocale()]
@@ -2069,22 +2144,26 @@ export const tools = {
       return datamain.withwhom_title[static_data.arrLangUsed[0]]
     }
 
-  },
+  }
+  ,
   gettextcoll(data: IColl) {
     if (data.subtitle[toolsext.getLocale()])
       return data.subtitle[toolsext.getLocale()]
     else {
       return data.subtitle[static_data.arrLangUsed[0]]
     }
-  },
+  }
+  ,
   gettitlecoll(data: IColl) {
     if (data.title[toolsext.getLocale()])
       return data.title[toolsext.getLocale()]
     else {
       return data.title[static_data.arrLangUsed[0]]
     }
-  },
-  gettextdescr(data: ITimeLineEntry, numdescr = 'description') {
+  }
+  ,
+  gettextdescr(data: ITimeLineEntry, numdescr = 'description'
+  ) {
     if (!!data[numdescr]) {
       if (data[numdescr][toolsext.getLocale()])
         return data[numdescr][toolsext.getLocale()]
@@ -2094,7 +2173,8 @@ export const tools = {
     } else {
       return ''
     }
-  },
+  }
+  ,
 
   getlink(data: ITimeLineEntry) {
     if (data.link_text[toolsext.getLocale()])
@@ -2103,7 +2183,8 @@ export const tools = {
       return data.link_text[static_data.arrLangUsed[0]]
     }
 
-  },
+  }
+  ,
 
   getlinkurl(data: ITimeLineEntry) {
     if (data.link_url_lang) {
@@ -2153,7 +2234,8 @@ export const tools = {
       return { path: '', file: fileimg }
     }
 
-  },
+  }
+  ,
 
   convertHTMLtoText(myhtml) {
     let msg = myhtml
@@ -2164,7 +2246,8 @@ export const tools = {
     msg = msg.replace('<br>', '\n')
 
     return msg
-  },
+  }
+  ,
   gettextevent(mythis, myevent: IEvents) {
     // return '"' + myevent.title + '" (' + func_tools.getDateStr(myevent.date) + ') - ' + myevent.time
     return '"' + myevent.title + '" (' + tools.getstrDateEmailTime(mythis, myevent.dateTimeStart) + ')'
@@ -2185,7 +2268,8 @@ export const tools = {
 
     // this.$q.lang.set(mylang)
 
-  },
+  }
+  ,
   getappname(mythis) {
     if (mythis === undefined)
       return ''
@@ -2215,7 +2299,8 @@ export const tools = {
     globalroutines(mythis, 'loadapp', '')
 
     tools.SignIncheckErrors(mythis, tools.OK, ispageLogin)
-  },
+  }
+  ,
 
   loginInCorso(mythis) {
     // console.log('loginInCorso')
@@ -2225,9 +2310,10 @@ export const tools = {
       msg += ' ' + process.env.MONGODB_HOST
     }
     mythis.$q.loading.show({ message: msg })
-  },
+  }
+  ,
 
-  SignIncheckErrors(mythis, riscode, ispageLogin?: boolean) {
+  SignIncheckErrors(mythis, riscode, ispageLogin ?: boolean) {
     // console.log('SignIncheckErrors: ', riscode)
     try {
       if (riscode === tools.OK) {
@@ -2274,7 +2360,8 @@ export const tools = {
     } finally {
       // ...
     }
-  },
+  }
+  ,
 
   SignUpcheckErrors(mythis, riscode: number) {
     console.log('SignUpcheckErrors', riscode)
@@ -2297,16 +2384,19 @@ export const tools = {
       tools.showNotif(mythis.$q, 'Errore num ' + riscode)
     }
 
-  },
+  }
+  ,
   isCssColor(color) {
     return !!color && !!color.match(/^(#|(rgb|hsl)a?\()/)
-  },
+  }
+  ,
   displayClasses(eventparam) {
     return {
       // [`bg-${eventparam.bgcolor}`]: !tools.isCssColor(eventparam.bgcolor),
       'text-white': !tools.isCssColor(eventparam.bgcolor)
     }
-  },
+  }
+  ,
   displayStyles(eventparam) {
     const s = { color: '' }
     if (tools.isCssColor(eventparam.bgcolor)) {
@@ -2314,21 +2404,32 @@ export const tools = {
       s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
     }
     return s
-  },
+  }
+  ,
   CancelBookingEvent(mythis, eventparam: IEvents, bookeventid: string, notify: boolean) {
     console.log('CancelBookingEvent ', eventparam)
     tools.askConfirm(mythis.$q, translate('cal.titlebooking'), translate('cal.cancelbooking') + ' ' + tools.gettextevent(mythis, eventparam) + '?', translate('dialog.yes'), translate('dialog.no'), mythis, '', lists.MenuAction.DELETE, 0, {
       param1: bookeventid,
       param2: notify
     })
-  },
+  }
+  ,
+  CancelEvent(mythis, eventparam: IEvents) {
+    console.log('CancelEvent ', eventparam)
+    tools.askConfirm(mythis.$q, translate('cal.event'), translate('cal.cancelevent') + ' ' + tools.gettextevent(mythis, eventparam) + '?', translate('dialog.yes'), translate('dialog.no'), mythis, '', lists.MenuAction.DELETE_EVENT, 0, {
+      param1: eventparam,
+      param2: true
+    })
+  }
+  ,
   ActionRecTable(mythis, action, table, id, item, askaction) {
     console.log('ActionRecTable', id)
     return tools.askConfirm(mythis.$q, 'Action', translate(askaction) + '?', translate('dialog.yes'), translate('dialog.no'), mythis, table, action, 0, {
       param1: id,
       param2: item
     })
-  },
+  }
+  ,
 
   async createNewRecord(mythis, table, data) {
 
@@ -2337,16 +2438,18 @@ export const tools = {
       data
     }
 
-    return await GlobalStore.actions.saveTable(mydata)
-      .then((record) => {
-        if (record) {
-          tools.showPositiveNotif(mythis.$q, mythis.$t('db.recupdated'))
-        } else {
-          tools.showNegativeNotif(mythis.$q, mythis.$t('db.recfailed'))
-        }
-        return record
-      })
-  },
+    return await
+      GlobalStore.actions.saveTable(mydata)
+        .then((record) => {
+          if (record) {
+            tools.showPositiveNotif(mythis.$q, mythis.$t('db.recupdated'))
+          } else {
+            tools.showNegativeNotif(mythis.$q, mythis.$t('db.recfailed'))
+          }
+          return record
+        })
+  }
+  ,
 
   isBitActive(bit, whattofind) {
     return ((bit & whattofind) === whattofind)