Step 1: Creating page Messages: userlist last messages + a page for all the messages received and sent.

- Added CMyEditor and CMySelect to the git committ.

src/components/CEventsCalendar/CEventsCalendar.ts

@@ -22,13 +22,14 @@ 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, IMessagePage, EState, IMessage, IDest, IOrigin } from '@src/model/Calendar'
+import { IBookedEvent, IBookedEventPage, EState } from '@src/model/Calendar'
 import { costanti } from '@src/store/Modules/costanti'
 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'
+import { IMessagePage, IMessage, IIdentity } from '../../model'
 
 @Component({
   name: 'CEventsCalendar',
@@ -64,7 +65,8 @@ export default class CEventsCalendar extends Vue {
       username: ''
     },
     origin: {
-      userId: ''
+      idapp: process.env.APP_ID,
+      username: ''
     },
     message: ''
   }
@@ -663,13 +665,16 @@ export default class CEventsCalendar extends Vue {
     this.askInfopage.show = false
 
     const data: IMessage = {
-      idapp: process.env.APP_ID,
+      source: {
-      origin: {
-        userId: UserStore.state.my._id,
         page: '',
         event_id: myevent._id,
         infoevent: tools.gettextevent(this, myevent)
       },
+      idapp: process.env.APP_ID,
+      origin: {
+        idapp: process.env.APP_ID,
+        username: UserStore.state.username
+      },
       dest: {
         idapp: process.env.APP_ID,
         username: myevent.teacher

src/components/CMyEditor/CMyEditor.scss

@@ -0,0 +1,4 @@
+.myflex{
+  display: flex;
+  flex: 1;
+}

src/components/CMyEditor/CMyEditor.ts

@@ -0,0 +1,240 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { QEditor } from 'quasar'
+
+@Component({
+  name: 'CMyEditor'
+})
+
+export default class CMyEditor extends Vue {
+  public $q
+  public editor = null
+  @Prop({ required: true }) public value
+  @Prop({ required: false, default: '' }) public myclass
+
+  public myvalue = ''
+  public mycolor = ''
+
+  public myfonts = {
+    arial: 'Arial',
+    arial_black: 'Arial Black',
+    comic_sans: 'Comic Sans MS',
+    courier_new: 'Courier New',
+    impact: 'Impact',
+    lucida_grande: 'Lucida Grande',
+    times_new_roman: 'Times New Roman',
+    verdana: 'Verdana'
+  }
+
+  public toolbarcomp = [
+    ['left', 'center', 'right', 'justify'],
+    ['bold', 'italic', 'underline', 'strike'],
+    [
+      {
+        label: this.$q.lang.editor.formatting,
+        icon: this.$q.iconSet.editor.formatting,
+        list: 'no-icons',
+        options: [
+          'p',
+          'h4',
+          'h5',
+          'h6',
+          'code'
+        ]
+      },
+      {
+        label: this.$q.lang.editor.fontSize,
+        icon: this.$q.iconSet.editor.fontSize,
+        fixedLabel: true,
+        fixedIcon: true,
+        list: 'no-icons',
+        options: [
+          'size-1',
+          'size-2',
+          'size-3',
+          'size-4',
+          'size-5',
+          'size-6',
+          'size-7'
+        ]
+      },
+      {
+        label: this.$q.lang.editor.defaultFont,
+        icon: this.$q.iconSet.editor.font,
+        fixedIcon: true,
+        list: 'no-icons',
+        options: [
+          'default_font',
+          'arial',
+          'arial_black',
+          'comic_sans',
+          'courier_new',
+          'impact',
+          'lucida_grande',
+          'times_new_roman',
+          'verdana'
+        ]
+      },
+      'removeFormat'
+    ],
+    ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
+
+    ['undo', 'redo', 'viewsource'],
+  ]
+
+  get tools() {
+    return tools
+  }
+
+  public changeval(newval) {
+    // console.log('changeval', newval)
+    this.$emit('update:value', newval)
+  }
+
+  public mounted() {
+    this.myvalue = this.value
+    this.editor = this.$refs.editor_ref
+  }
+
+  public setcolor() {
+    document.execCommand('foreColor', false, this.mycolor)
+  }
+
+  /**
+   * Capture the <CTL-V> paste event, only allow plain-text, no images.
+   *
+   * see: https://stackoverflow.com/a/28213320
+   *
+   * @param {object} evt - array of files
+   * @author Daniel Thompson-Yvetot
+   * @license MIT
+   */
+  public pasteCapture(evt) {
+    // let text, onPasteStripFormattingIEPaste
+    // evt.preventDefault()
+    // if (evt.originalEvent && evt.originalEvent.clipboardData.getData) {
+    //   text = evt.originalEvent.clipboardData.getData('text/plain')
+    //   this.$refs.editor_ref.runCmd('insertText', text)
+    // }
+    // else if (evt.clipboardData && evt.clipboardData.getData) {
+    //   text = evt.clipboardData.getData('text/plain')
+    //   this.$refs.editor_ref.runCmd('insertText', text)
+    // }
+    // else if (window.clipboardData && window.clipboardData.getData) {
+    //   if (!onPasteStripFormattingIEPaste) {
+    //     onPasteStripFormattingIEPaste = true
+    //     this.$refs.editor_ref.runCmd('ms-pasteTextOnly', text)
+    //   }
+    //   onPasteStripFormattingIEPaste = false
+    // }
+  }
+
+}
+
+/*
+
+https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand#Commands
+
+backColor
+Changes the document background color. In styleWithCss mode, it affects the background color of the containing block instead. This requires a <color> value string to be passed in as a value argument. Note that Internet Explorer uses this to set the text background color.
+bold
+Toggles bold on/off for the selection or at the insertion point. Internet Explorer uses the <strong> tag instead of <b>.
+ClearAuthenticationCache
+Clears all authentication credentials from the cache.
+contentReadOnly
+Makes the content document either read-only or editable. This requires a boolean true/false as the value argument. (Not supported by Internet Explorer.)
+copy
+Copies the current selection to the clipboard. Conditions of having this behavior enabled vary from one browser to another, and have evolved over time. Check the compatibility table to determine if you can use it in your case.
+createLink
+Creates an hyperlink from the selection, but only if there is a selection. Requires a URI string as a value argument for the hyperlink's href. The URI must contain at least a single character, which may be whitespace. (Internet Explorer will create a link with a null value.)
+cut
+Removes the current selection and copies it to the clipboard. When this behavior is enabled varies between browsers, and its conditions have evolved over time. Check the compatibility table for usage details.
+decreaseFontSize
+Adds a <small> tag around the selection or at the insertion point. (Not supported by Internet Explorer.)
+defaultParagraphSeparator
+Changes the paragraph separator used when new paragraphs are created in editable text regions. See Differences in markup generation for more details.
+delete
+Deletes the current selection.
+enableAbsolutePositionEditor
+Enables or disables the grabber that allows absolutely-positioned elements to be moved around. This is disabled by default in Firefox 63 Beta/Dev Edition (bug 1449564)
+enableInlineTableEditing
+Enables or disables the table row/column insertion and deletion controls. This is disabled by default in Firefox 63 Beta/Dev Edition (bug 1449564).
+enableObjectResizing
+Enables or disables the resize handles on images, tables, and absolutely-positioned elements and other resizable objects. This is disabled by default in Firefox 63 Beta/Dev Edition (bug 1449564).
+fontName
+Changes the font name for the selection or at the insertion point. This requires a font name string (like "Arial") as a value argument.
+fontSize
+Changes the font size for the selection or at the insertion point. This requires an integer from 1-7 as a value argument.
+foreColor
+Changes a font color for the selection or at the insertion point. This requires a hexadecimal color value string as a value argument.
+formatBlock
+Adds an HTML block-level element around the line containing the current selection, replacing the block element containing the line if one exists (in Firefox, <blockquote> is the exception — it will wrap any containing block element). Requires a tag-name string as a value argument. Virtually all block-level elements can be used. (Internet Explorer and Edge support only heading tags H1–H6, ADDRESS, and PRE, which must be wrapped in angle brackets, such as "<H1>".)
+forwardDelete
+Deletes the character ahead of the cursor's position, identical to hitting the Delete key on a Windows keyboard.
+heading
+Adds a heading element around a selection or insertion point line. Requires the tag-name string as a value argument (i.e. "H1", "H6"). (Not supported by Internet Explorer and Safari.)
+hiliteColor
+Changes the background color for the selection or at the insertion point. Requires a color value string as a value argument. useCSS must be true for this to function. (Not supported by Internet Explorer.)
+increaseFontSize
+Adds a <big> tag around the selection or at the insertion point. (Not supported by Internet Explorer.)
+indent
+Indents the line containing the selection or insertion point. In Firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented.
+insertBrOnReturn
+Controls whether the Enter key inserts a <br> element, or splits the current block element into two. (Not supported by Internet Explorer.)
+insertHorizontalRule
+Inserts a <hr> element at the insertion point, or replaces the selection with it.
+insertHTML
+Inserts an HTML string at the insertion point (deletes selection). Requires a valid HTML string as a value argument. (Not supported by Internet Explorer.)
+insertImage
+Inserts an image at the insertion point (deletes selection). Requires a URL string for the image's src as a value argument. The requirements for this string are the same as createLink.
+insertOrderedList
+Creates a numbered ordered list for the selection or at the insertion point.
+insertUnorderedList
+Creates a bulleted unordered list for the selection or at the insertion point.
+insertParagraph
+Inserts a paragraph around the selection or the current line. (Internet Explorer inserts a paragraph at the insertion point and deletes the selection.)
+insertText
+Inserts the given plain text at the insertion point (deletes selection).
+italic
+Toggles italics on/off for the selection or at the insertion point. (Internet Explorer uses the <em> element instead of <i>.)
+justifyCenter
+Centers the selection or insertion point.
+justifyFull
+Justifies the selection or insertion point.
+justifyLeft
+Justifies the selection or insertion point to the left.
+justifyRight
+Right-justifies the selection or the insertion point.
+outdent
+Outdents the line containing the selection or insertion point.
+paste
+Pastes the clipboard contents at the insertion point (replaces current selection). Disabled for web content. See [1].
+redo
+Redoes the previous undo command.
+removeFormat
+Removes all formatting from the current selection.
+selectAll
+Selects all of the content of the editable region.
+strikeThrough
+Toggles strikethrough on/off for the selection or at the insertion point.
+subscript
+Toggles subscript on/off for the selection or at the insertion point.
+superscript
+Toggles superscript on/off for the selection or at the insertion point.
+underline
+Toggles underline on/off for the selection or at the insertion point.
+undo
+Undoes the last executed command.
+unlink
+Removes the anchor element from a selected hyperlink.
+useCSS
+Toggles the use of HTML tags or CSS for the generated markup. Requires a boolean true/false as a value argument.
+NOTE: This argument is logically backwards (i.e. use false to use CSS, true to use HTML) and unsupported by Internet Explorer. This has been deprecated in favor of styleWithCSS.
+styleWithCSS
+Replaces the useCSS command. true modifies/generates style attributes in markup, false generates presentational elements.
+
+ */

src/components/CMyEditor/CMyEditor.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <form
+                autocorrect="off"
+                autocapitalize="off"
+                autocomplete="off"
+                spellcheck="false">
+
+            <q-btn rounded size="sm" color="primary">
+                <q-icon name="colorize" class="cursor-pointer">
+                    <q-popup-proxy>
+                        <q-color v-model="mycolor" @change="setcolor"></q-color>
+                    </q-popup-proxy>
+                </q-icon>
+            </q-btn>
+            <q-editor
+                    ref="editor_ref"
+                    toolbar-text-color="white"
+                    toolbar-toggle-color="yellow-8"
+                    toolbar-bg="primary"
+                    :toolbar="toolbarcomp"
+                    :fonts="myfonts"
+                    @input="changeval"
+                    @paste.native="evt => pasteCapture(evt)"
+                    v-model="myvalue">
+            </q-editor>
+        </form>
+    </div>
+</template>
+
+<script lang="ts" src="./CMyEditor.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMyEditor.scss';
+</style>

src/components/CMyEditor/index.ts

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

src/components/CMySelect/CMySelect.scss

@@ -0,0 +1,4 @@
+.myflex{
+  display: flex;
+  flex: 1;
+}

src/components/CMySelect/CMySelect.ts

@@ -0,0 +1,56 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { IPerson } from '../../model/GlobalStore'
+
+@Component({
+  name: 'CMySelect'
+})
+
+export default class CMySelect extends Vue {
+  @Prop({ required: true }) public value
+  @Prop({ required: true, default: '' }) public label
+  @Prop({ required: false, default: '' }) public myclass
+  @Prop({ required: true, default: '' }) public optlab
+  @Prop({ required: true, default: '' }) public optval
+  @Prop({ required: false, default: true }) public useinput: boolean
+  @Prop({ required: false, default: null }) public newvaluefunc
+  @Prop({ required: false, default: null }) public funcgetvaluebyid
+  @Prop({ required: true }) public options
+
+  public myvalue = ''
+
+  get tools() {
+    return tools
+  }
+
+  public nothing() {
+
+  }
+
+  public changeval(newval) {
+    console.log('changeval', newval)
+    // const newvallab = newval[`${this.optval}`]
+    // this.myvalue = newvallab
+    this.$emit('update:value', newval)
+  }
+
+  public mounted() {
+    const rec = this.options.find((myrec) => myrec[`${this.optval}`] === this.value)
+    console.log('rec', rec)
+    if (!this.useinput) {
+      this.myvalue = this.value
+    } else {
+      if (rec) {
+        if (this.funcgetvaluebyid)
+          this.myvalue = this.funcgetvaluebyid(rec[`${this.optval}`])
+        else
+          this.myvalue = rec[`${this.optlab}`]
+
+        console.log('this.myvalue', this.myvalue, 'this.optval', this.optval, 'rec', rec[`${this.optval}`])
+      }
+    }
+  }
+}

src/components/CMySelect/CMySelect.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div v-if="useinput">
+            <q-select
+                    :input-class="myclass"
+                    filled
+                    v-model="myvalue"
+                    :use-input="useinput"
+                    input-debounce="0"
+                    @new-value="newvaluefunc"
+                    new-value-mode="add-unique"
+                    :options="options"
+                    :option-value="optval"
+                    :option-label="optlab"
+                    @input="changeval"
+                    :label="label"
+                    dense
+            >
+            </q-select>
+        </div>
+        <div v-else>
+            <q-select
+                    :input-class="myclass"
+                    filled
+                    v-model="myvalue"
+                    :options="options"
+                    :option-value="optval"
+                    :option-label="optlab"
+                    @input="changeval"
+                    :label="label"
+                    emit-value
+                    map-options
+                    style="min-width: 170px; max-width: 400px;"
+            >
+
+            </q-select>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./CMySelect.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMySelect.scss';
+</style>

src/components/CMySelect/index.ts

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

src/components/Header/Header.ts

@@ -43,10 +43,6 @@ export default class Header extends Vue {
   public photo = ''
   public visuimg: boolean = true
 
-  get tools() {
-    return tools
-  }
-
   get conn_changed() {
     return GlobalStore.state.stateConnection
   }

src/components/Header/Header.vue

@@ -108,7 +108,7 @@
                 <q-btn class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && isLogged" round dense flat
                        @click="rightDrawerOpen = !rightDrawerOpen">
                     <q-avatar size="30px">
-                        <img :src="`statics/`+ getMyImg">
+                        <img :src="getMyImg">
                     </q-avatar>
                 </q-btn>
 
@@ -137,7 +137,7 @@
                 <div class="absolute-top bg-transparent text-black center_img" style="margin-top: 10px;">
 
                     <q-avatar class="q-mb-sm center_img">
-                        <img :src="`../../statics/` + getMyImg">
+                        <img :src="`../../` + getMyImg">
                     </q-avatar>
                     <q-btn class="absolute-top-right" style="margin-right: 10px; color: white;"
                            dense flat round icon="close" @click="rightDrawerOpen = !rightDrawerOpen">

src/components/Shen/CTesseraElettronica/CTesseraElettronica.ts

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { SingleProject } from '../../projects/SingleProject'
+import { CTodo } from '../../todos/CTodo'
+import { GlobalStore } from '../../../store/Modules'
+
+@Component({})
+export default class CTesseraElettronica extends Vue {
+  public $q
+  public $t
+  public $refs: {
+    frametessera
+  }
+
+  public mounted() {
+    // ...
+    // $('#frametessera').contents().find('#nome').val("PPPP")
+  }
+
+  get getNome() {
+    return ''
+  }
+  get getFrame() {
+
+    // console.log('getFrame', $('#frametessera'))
+    return ''
+  }
+
+  get rightDrawerOpen() {
+    return GlobalStore.state.RightDrawerOpen
+  }
+}

src/components/Shen/CTesseraElettronica/CTesseraElettronica.vue

@@ -0,0 +1,22 @@
+<template>
+    <q-card class="q-ma-xs" bordered>
+        <q-card-section>
+            <div class="text-h6 bg-deep-purple-8 text-white text-center">Per accedere alla Tessera:
+            </div>
+        </q-card-section>
+        <q-separator inset/>
+        <q-card-section>
+            <iframe v-if="rightDrawerOpen" id="frametessera" ref="frametessera"
+                    src="https://www.conceptstudio.it/website/csenravenna/electro/"
+                    style="border: 0; width: 100%; max-width: 360px; min-height: 500px;"></iframe>
+
+        </q-card-section>
+        <!--Elisa GHZLSE78A65G388B-->
+    </q-card>
+</template>
+<script lang="ts" src="./CTesseraElettronica.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CTesseraElettronica.scss';
+</style>

src/components/Shen/CTesseraElettronica/index.ts

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

src/layouts/toolbar/messagePopover/messagePopover.ts

@@ -13,7 +13,7 @@ import { UserStore } from '../../../store/Modules'
 
 import MixinUsers from '../../../mixins/mixin-users'
 
-const namespace = 'UserModule'
+const namespace = 'MessageModule'
 
 @Component({
   mixins: [MixinUsers]
@@ -29,22 +29,17 @@ export default class MessagePopover extends Vue {
     // }
   }
 
-  get getNumMsg() {
+  public clickChat(msg: IMessage){
-    return UserStore.getters.getlasts_messages().length
+    this.$router.replace('/messages/' + msg.dest.username)
-  }
-
-  get getNumMsgUnread() {
-    // return UserStore.getters.getlasts_messages().length
-    return UserStore.getters.getnumMsgUnread()
   }
 
   get getNumNotifUnread() {
-    // return UserStore.getters.getlasts_messages().length
+
     return 0
   }
 
   public randomDate(): Date {
-    let myval = Math.floor(Math.random() * 10000000000)
+    const myval = Math.floor(Math.random() * 10000000000)
     return tools.getstrDateTime(new Date(tools.getTimestampsNow() - myval))
   }
 
@@ -79,10 +74,6 @@ export default class MessagePopover extends Vue {
       */
   }
 
-  get tools() {
-    return tools
-  }
-
   // public requestPosts() {
   //   // console.log('requestPosts...')
   //   let prova = [{ title: 'primo' }, { title: 'Secondo' }]

src/layouts/toolbar/messagePopover/messagePopover.vue

@@ -15,11 +15,10 @@
                         </q-item>
                     </div>
 
-                    <q-item clickable v-ripple v-for="(msg, index) in lasts_messages()" :key="index">
+                    <q-item clickable v-ripple v-for="(msg, index) in lasts_messages()" :key="index" @click="clickChat(msg)">
 
                         <q-item-section avatar>
                             <q-avatar>
-                                {{msg.origin.username}}
                                 <img :src="getImgByUsername(msg.dest.username)">
                             </q-avatar>
                         </q-item-section>

src/mixins/mixin-users.ts

@@ -1,11 +1,23 @@
 import Vue from 'vue'
-import { GlobalStore, UserStore } from '../store/Modules'
+import { GlobalStore, UserStore, MessageStore } from '../store/Modules'
+
 
 import Component from 'vue-class-component'
+import { func_tools } from '../store/Modules/toolsext'
+import { tools } from '../store/Modules/tools'
 
 // You can declare a mixin as the same style as components.
 @Component
 export default class MixinUsers extends Vue {
+  public mythis() {
+    return this
+  }
+  get func_tools() {
+    return func_tools
+  }
+  get tools() {
+    return tools
+  }
   public getUserByUsername(username) {
     return UserStore.getters.getNameSurnameByUsername(username)
   }
@@ -16,7 +28,7 @@ export default class MixinUsers extends Vue {
     return UserStore.state.my.username
   }
   get getMyImg() {
-    return UserStore.getters.getImgByUsername(UserStore.state.my.username)
+    return 'statics/' + UserStore.getters.getImgByUsername(UserStore.state.my.username)
   }
   get MenuCollapse() {
     return GlobalStore.state.menuCollapse
@@ -37,4 +49,13 @@ export default class MixinUsers extends Vue {
   get Email() {
     return UserStore.state.my.email
   }
+  get getNumMsg() {
+    return MessageStore.getters.getlasts_messages().length
+  }
+
+  get getNumMsgUnread() {
+    // return UserStore.getters.getlasts_messages().length
+    return MessageStore.getters.getnumMsgUnread()
+  }
+
 }

src/model/Calendar.ts

@@ -41,29 +41,6 @@ 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
@@ -101,11 +78,6 @@ export interface IBookedEventPage {
   state: EState
 }
 
-export interface IMessagePage {
-  show: boolean
-  msg: IMessage
-  state: EState
-}
 
 export interface ICalendarState {
   editable: boolean

src/model/UserStore.ts

@@ -1,12 +1,11 @@
 import { IToken } from 'model/other'
-import { IMessage } from '@src/model/Calendar'
 
 export const DefaultUser: IUserFields = {
   email: '',
   username: '',
   name: '',
   surname: '',
-  password: '',
+  password: ''
 }
 
 export interface IUserFields {
@@ -45,5 +44,4 @@ export interface IUserState {
   isManager?: boolean
   usersList?: IUserFields[]
   countusers?: number
-  msgs?: IMessage[]
 }

src/model/index.ts

@@ -1,4 +1,5 @@
 export * from './UserStore'
+export * from './MessageStore'
 export * from './GlobalStore'
 export * from './signin-option'
 export * from './signup-option'

src/statics/i18n.js

@@ -18,6 +18,9 @@ const msgglobal = {
       },
       manage: {
         menu: 'Gestione'
+      },
+      messages: {
+        menu: 'I tuoi Messaggi'
       }
     },
     sendmsg: {
@@ -300,6 +303,9 @@ const msgglobal = {
       },
       manage: {
         menu: 'Gestionar'
+      },
+      messages: {
+        menu: 'Tus mensajes'
       }
     },
     sendmsg: {
@@ -573,6 +579,9 @@ const msgglobal = {
       },
       manage: {
         menu: 'Gérer'
+      },
+      messages: {
+        menu: 'Vos messages'
       }
     },
     sendmsg: {
@@ -845,6 +854,9 @@ const msgglobal = {
       },
       manage: {
         menu: 'Manage'
+      },
+      messages: {
+        menu: 'Your Messages'
       }
     },
     sendmsg: {
@@ -1116,6 +1128,9 @@ const msgglobal = {
       },
       manage: {
         menu: 'Manage'
+      },
+      messages: {
+        menu: 'Your Messages'
       }
     },
     sendmsg: {

src/store/Modules/GlobalStore.ts

@@ -13,7 +13,7 @@ import { costanti } from '@src/store/Modules/costanti'
 import { tools } from '@src/store/Modules/tools'
 import { toolsext } from '@src/store/Modules/toolsext'
 import * as ApiTables from '@src/store/Modules/ApiTables'
-import { CalendarStore, GlobalStore, Projects, Todos, UserStore } from '@store'
+import { CalendarStore, GlobalStore, MessageStore, Projects, Todos, UserStore } from '@store'
 import messages from '../../statics/i18n'
 import globalroutines from './../../globalroutines/index'
 
@@ -283,7 +283,7 @@ namespace Mutations {
     else if (table === 'users')
       return UserStore.state.usersList
     else if (table === 'sendmsgs')
-      return UserStore.state.msgs
+      return MessageStore.state.last_msgs
     else
       return null
 
@@ -535,11 +535,11 @@ namespace Actions {
           UserStore.mutations.setusersList(res.data.usersList)
         }
 
-        if (res.data.msgs) {
+        if (res.data.last_msgs) {
-          UserStore.state.msgs = [...res.data.msgs]
+          MessageStore.state.last_msgs = [...res.data.last_msgs]
         }
 
-        console.log('UserStore.state.msgs', UserStore.state.msgs)
+        // console.log('MessageStore.state.last_msgs', MessageStore.state.last_msgs)
 
         // console.log('**********  res', 'state.todos', state.todos, 'checkPending', checkPending)
         // After Login will store into the indexedDb...

src/store/Modules/UserStore.ts

@@ -17,7 +17,6 @@ import translate from './../../globalroutines/util'
 import * as Types from '@src/store/Api/ApiTypes'
 import { ICalendarState, ICfgServer } from '@src/model'
 import { shared_consts } from '../../common/shared_vuejs'
-import { IMessage } from '@src/model/Calendar'
 
 const bcrypt = require('bcryptjs')
 
@@ -42,7 +41,6 @@ const state: IUserState = {
   isAdmin: false,
   isManager: false,
   usersList: [],
-  msgs: [],
   countusers: 0
 }
 
@@ -142,7 +140,6 @@ namespace Getters {
   const getImgByUsername = b.read((mystate: IUserState) => (username): string => {
     // Check if is this User!
     const myrec = UserStore.getters.getUserByUsername(username)
-    console.log('getImgByUsername', username, myrec)
     if (myrec && !!myrec.img) {
       return myrec.img
     } else {
@@ -150,17 +147,6 @@ namespace Getters {
     }
   }, 'getImgByUsername')
 
-  const getlasts_messages = b.read((mystate: IUserState) => () => {
-    const ctrec = (mystate.msgs) ? mystate.msgs.slice(0, 5) : []
-    // const ctrec = (mystate.msgs) ? mystate.msgs.slice().reverse().slice(0, 5) : []
-    return (ctrec)
-
-  }, 'getlasts_messages')
-
-  const getnumMsgUnread = b.read((mystate: IUserState) => () => {
-    return mystate.msgs.filter((msg) => !msg.read).length
-  }, 'getnumMsgUnread')
-
   export const getters = {
     get isUserInvalid() {
       return isUserInvalid()
@@ -200,14 +186,7 @@ namespace Getters {
     },
     get getUsersList() {
       return getUsersList()
-    },
-    get getlasts_messages() {
-      return getlasts_messages()
-    },
-    get getnumMsgUnread() {
-      return getnumMsgUnread()
     }
-    // get fullName() { return fullName();},
   }
 
 }
@@ -720,28 +699,6 @@ 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();
@@ -765,7 +722,6 @@ namespace Actions {
     resetpwd: b.dispatch(resetpwd),
     signin: b.dispatch(signin),
     signup: b.dispatch(signup),
-    SendMsgEvent: b.dispatch(SendMsgEvent),
     vreg: b.dispatch(vreg)
   }
 

src/store/Modules/index.ts

@@ -1,6 +1,7 @@
 export {storeBuilder} from './Store/Store'
 export {default as GlobalStore} from './GlobalStore'
 export {default as UserStore} from './UserStore'
+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'

src/store/Modules/serv_constants.ts

@@ -1,5 +1,6 @@
 export const serv_constants = {
   RIS_CODE_TODO_CREATING_NOTMYUSER: -1001,
+  RIS_CODE_NOT_MY_USERNAME: -1010,
 
   RIS_CODE_ERR: -99,
   RIS_CODE_EMAIL_ALREADY_VERIFIED: -5,

src/store/Modules/tools.ts

@@ -26,6 +26,9 @@ import { func_tools } from '@src/store/Modules/toolsext'
 import { serv_constants } from '@src/store/Modules/serv_constants'
 import { shared_consts } from '@src/common/shared_vuejs'
 
+import { dom } from 'quasar'
+const { height, width } = dom
+
 export interface INotify {
   color?: string | 'primary'
   textColor?: string
@@ -1737,8 +1740,11 @@ export const tools = {
   ,
   getstrYYMMDDDateTime(mytimestamp) {
     return date.formatDate(mytimestamp, 'YYYY-MM-DD HH:mm')
-  }
+  },
-  ,
+
+  getstrYYMMDDDateTimeAll(mytimestamp) {
+    return date.formatDate(mytimestamp, 'YYYY-MM-DD HH:mm:ss')
+  },
 
 // mystrdate "26.04.2013"
   convertstrtoDate(mystrdate
@@ -1801,8 +1807,11 @@ export const tools = {
   ,
   getTimestampsNow() {
     return new Date().valueOf()
-  }
+  },
-  ,
+
+  gettimestampByDate(mydate) {
+    return mydate.toString()
+  },
 
   isMainProject(idproj) {
     return idproj === process.env.PROJECT_ID_MAIN
@@ -2456,8 +2465,14 @@ export const tools = {
           }
           return record
         })
-  }
+  },
-  ,
+  getheight(mythis) {
+    // return height()
+    return mythis.$q.screen.height
+  },
+  getLastDateReadReset() {
+    return new Date(1999, 1, 1, 0, 0, 0)
+  },
 
   isBitActive(bit, whattofind) {
     return ((bit & whattofind) === whattofind)

src/views/messages/index.ts

@@ -0,0 +1 @@
+export {default as Messages} from './messages'

src/views/messages/messages.scss

@@ -0,0 +1,33 @@
+.messages_page{
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: auto;
+  margin-bottom: auto;
+  min-height: 400px;
+}
+
+.title_msg{
+  font-weight: bold;
+}
+
+.user{
+  font-weight: bold;
+}
+
+.active-user{
+  color:blue;
+  background-color: rgba(174, 189, 241, 0.71);
+  border-radius: 1rem !important;
+}
+
+.chat-list{
+  border-radius: 20px;
+}
+
+.chat_dest{
+
+}
+
+.chat_my{
+
+}

src/views/messages/messages.ts

@@ -0,0 +1,103 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { toolsext } from '../../store/Modules/toolsext'
+import { MessageStore, UserStore } from '../../store/Modules'
+import globalroutines from '../../globalroutines/index'
+import { tools } from '../../store/Modules/tools'
+import MixinUsers from '../../mixins/mixin-users'
+import { IChat, IMessage, IUserState } from '../../model'
+import { Getter } from 'vuex-class'
+import { IMsgUsers } from '../../model/MessageStore'
+
+// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
+
+const namespace = 'MessageModule'
+
+@Component({
+  name: 'Messages',
+  mixins: [MixinUsers],
+  components: {  }
+})
+
+export default class Messages extends Vue {
+  public $t
+  public $q
+  public mydrawer = true
+  public miniState = false
+  public chatsel: IChat = {
+    username: '',
+    lasttimeActive: new Date()
+  }
+
+  @Getter('getlasts_messages', { namespace })
+  public lasts_messages: (state: IUserState) => IMessage[]
+
+  public showNotif(msgcode) {
+    tools.showNotif(this.$q, this.$t(msgcode))
+  }
+
+  public drawerClick(e) {
+    // if in "mini" state and user
+    // click on drawer, we switch it to "normal" mode
+    if (this.miniState) {
+      this.miniState = false
+
+      // notice we have registered an event with capture flag;
+      // we need to stop further propagation as this click is
+      // intended for switching drawer to "normal" mode only
+      e.stopPropagation()
+    }
+  }
+
+  get getheight() {
+    // return height()
+    return this.$q.screen.height - 43 // .toolbar
+  }
+
+  public isMenuActive(username) {
+    return this.chatsel.username === username
+  }
+
+  @Watch('$route.params.un')
+  public changeusername() {
+    this.chatsel.username = this.$route.params.un
+    if (!this.miniState && tools.isMobile()) {
+      this.miniState = true
+    }
+
+    // Retrieve last msgs data from the server
+    MessageStore.actions.updateMsgDataFromServer({username: this.chatsel.username, lastdataread: this.getlastdataread() } )
+  }
+
+  public selChat(mymsg: IMessage) {
+    this.$router.replace('/messages/' + mymsg.dest.username)
+  }
+
+  public msgchat(): IMsgUsers {
+    // Get msg for this chat
+    return MessageStore.state.users_msg.find((rec) => rec.username === this.chatsel.username)
+  }
+
+  public msgchat_records(): IMessage[] {
+    const myrec = this.msgchat()
+    console.log('myrec', myrec)
+    // Get msg for this chat
+    return (myrec) ? myrec.msgs : []
+  }
+
+  public getlastdataread(): Date {
+    const myrec = this.msgchat()
+    // Get msg for this chat
+    return (myrec) ? tools.gettimestampByDate(myrec.lastdataread) : tools.getLastDateReadReset()
+  }
+
+  public getMsgText(msg: IMessage) {
+    return [msg.message]
+  }
+
+  public created() {
+
+    this.changeusername()
+  }
+
+}

src/views/messages/messages.vue

@@ -0,0 +1,136 @@
+<template>
+    <div>
+        <q-layout view="hHh Lpr lff" container :style="`height: ` + getheight + `px`"
+                  class="shadow-2 rounded-borders messages_page">
+            <q-drawer
+                    v-model="mydrawer"
+
+                    :mini="!mydrawer || miniState"
+                    @click.capture="drawerClick"
+
+                    :width="300"
+                    :breakpoint="300"
+                    bordered
+                    content-class="bg-grey-3">
+
+                <q-scroll-area class="fit">
+                    <q-list bordered class="rounded-borders chat-list">
+                        <q-item-label header class="title_msg">{{$t('msgs.messages')}}</q-item-label>
+
+                        <q-separator/>
+
+                        <div v-if="getNumMsg === 0">
+                            <q-item>
+                                {{$t('msgs.nomessage')}}
+
+                            </q-item>
+                        </div>
+
+                        <q-item clickable
+
+                                :active="isMenuActive(msg.dest.username)"
+                                active-class="active-user"
+                                v-for="(msg, index) in lasts_messages()"
+                                :key="index"
+                                @click="selChat(msg)">
+
+                            <q-item-section avatar>
+                                <q-avatar>
+                                    <img :src="getImgByUsername(msg.dest.username)">
+                                </q-avatar>
+                            </q-item-section>
+
+                            <q-item-section>
+                                <q-item-label lines="1">{{getUserByUsername(msg.dest.username)}}</q-item-label>
+                                <q-item-label caption lines="2">
+                                    {{msg.message}}
+                                </q-item-label>
+                            </q-item-section>
+
+                            <q-item-section side top>
+                                {{tools.getstrDateTimeShort(msg.datemsg)}}
+                            </q-item-section>
+                        </q-item>
+
+                        <q-separator/>
+                    </q-list>
+                </q-scroll-area>
+
+                <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
+                    <q-btn
+                            dense
+                            round
+                            unelevated
+                            color="accent"
+                            icon="chevron_left"
+                            @click="miniState = true">
+                    </q-btn>
+                </div>
+            </q-drawer>
+
+            <q-page-container>
+                <q-page class="q-px-lg q-py-md">
+                    <div>
+                        <q-item clickable v-if="!!chatsel.username">
+
+                            <q-item-section avatar>
+                                <q-avatar>
+                                    <img :src="getImgByUsername(chatsel.username)">
+                                </q-avatar>
+                            </q-item-section>
+
+                            <q-item-section>
+                                <q-item-label lines="1">{{getUserByUsername(chatsel.username)}}</q-item-label>
+                                <q-item-label caption lines="2">
+                                    {{func_tools.getDateTimeShortStr(chatsel.lasttimeActive)}}
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </div>
+                    <q-separator/>
+                    <div class="q-pa-md row" style="flex-direction: column;">
+                        <q-item clickable v-for="(msg, index) in msgchat_records()" :key="index" v-if="msg.dest">
+                            <div class="chat_dest" v-if="msg.dest.username === getMyUsername()">
+                                <q-chat-message
+                                        :name="getUserByUsername(msg.origin.username)"
+                                        :text="getMsgText(msg)"
+                                        :stamp="tools.getstrDateTimeShort(msg.datemsg)"
+                                        text-color="black"
+                                        bg-color="grey-2">
+                                    <template v-slot:avatar>
+                                        <q-avatar size="sm">
+                                            <img :src="getImgByUsername(msg.origin.username)">
+                                        </q-avatar>
+                                    </template>
+                                </q-chat-message>
+                            </div>
+                            <div class="chat_my" v-else>
+                                <q-chat-message
+                                        name="me"
+                                        :text="getMsgText(msg)"
+                                        :stamp="tools.getstrDateTimeShort(msg.datemsg)"
+                                        sent
+                                        bg-color="blue-2">
+                                    <template v-slot:avatar>
+                                        <q-avatar size="sm">
+                                            <img :src="getMyImg">
+                                        </q-avatar>
+                                    </template>
+
+                                </q-chat-message>
+                            </div>
+
+                        </q-item>
+                    </div>
+                </q-page>
+            </q-page-container>
+        </q-layout>
+    </div>
+</template>
+
+<script lang="ts" src="./messages.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './messages.scss';
+</style>