- Fixed Image avatar user list, q-qvatar rounded image

src/common/shared_vuejs.ts

@@ -7,7 +7,7 @@ export const shared_consts = {
   },
 
   fieldsUserToChange() {
-    return ['username', 'email', 'name', 'surname', 'perm', 'date_reg', 'verified_email']
+    return ['username', 'email', 'name', 'surname', 'perm', 'date_reg', 'verified_email', 'img', 'ipaddr']
   }
 
 }

src/components/CEventsCalendar/CEventsCalendar.ts

@@ -440,7 +440,7 @@ export default class CEventsCalendar extends Vue {
   }
 
   public addBookEventMenu(eventparam) {
-    if (!UserStore.state.isLogged || !UserStore.state.verified_email) {
+    if (!UserStore.state.isLogged || !UserStore.state.my.verified_email) {
       // Visu right Toolbar to make SignIn
       GlobalStore.state.RightDrawerOpen = true
       // this.$router.push('/signin')
@@ -459,7 +459,7 @@ export default class CEventsCalendar extends Vue {
   }
 
   public askForInfoEventMenu(eventparam) {
-    if (!UserStore.state.isLogged || !UserStore.state.verified_email) {
+    if (!UserStore.state.isLogged || !UserStore.state.my.verified_email) {
       // Visu right Toolbar to make SignIn
       GlobalStore.state.RightDrawerOpen = true
       // this.$router.push('/signin')
@@ -665,7 +665,7 @@ export default class CEventsCalendar extends Vue {
     const data: IMessage = {
       idapp: process.env.APP_ID,
       origin: {
-        userId: UserStore.state.userId,
+        userId: UserStore.state.my._id,
         page: '',
         event_id: myevent._id,
         infoevent: tools.gettextevent(this, myevent)
@@ -688,7 +688,6 @@ export default class CEventsCalendar extends Vue {
         tools.showNegativeNotif(self.$q, self.$t('cal.sendmsg_error'))
     })
 
-
   }
 
   public saveBookEvent(myevent: IEvents) {
@@ -703,7 +702,7 @@ export default class CEventsCalendar extends Vue {
       // self.bookEventForm.booked = self.bookEventForm.bookedcheck
 
       const data: IBookedEvent = {
-        userId: UserStore.state.userId,
+        userId: UserStore.state.my._id,
         id_bookedevent: myevent._id,
         numpeople: self.bookEventForm.numpeople,
         infoevent: tools.gettextevent(self, myevent),

src/components/CSignUp/CSignUp.ts

@@ -4,7 +4,7 @@ import { UserStore } from '@store'
 import { tools } from '../../store/Modules/tools'
 import { toolsext } from '@src/store/Modules/toolsext'
 
-import { ISignupOptions, IUserState } from 'model'
+import { ISignupOptions, IUserState, IUserFields } from 'model'
 import { validations, TSignup } from './CSignUp-validate'
 
 import { validationMixin } from 'vuelidate'

src/components/Header/Header.scss

@@ -211,7 +211,7 @@ canvas {
 }
 
 .toolbar {
-  min-height: 30px;
+  min-height: 43px;
 }
 
 .right-itens a, .right-itens button {
@@ -296,3 +296,8 @@ canvas {
   margin-bottom: 5px;
 }
 
+.roundimg  {
+  border-radius: 50% !important;
+  color: red;
+  background-color: red;
+}

src/components/Header/Header.ts

@@ -15,8 +15,11 @@ import Quasar, { Screen } from 'quasar'
 import { static_data } from '../../db/static_data'
 import globalroutines from '../../globalroutines'
 
+import MixinUsers from '../../mixins/mixin-users'
+
 @Component({
   name: 'Header',
+  mixins: [MixinUsers],
   components: {
     drawer,
     messagePopover, CSignIn
@@ -315,28 +318,6 @@ export default class Header extends Vue {
     }, 100)
   }
 
-  get MenuCollapse() {
-    return GlobalStore.state.menuCollapse
-    // return true
-  }
-
-  get Username() {
-    return UserStore.state.username
-  }
-  get myName() {
-    return UserStore.state.name
-  }
-  get mySurname() {
-    return UserStore.state.surname
-  }
-  get Verificato() {
-    return UserStore.state.verified_email
-  }
-
-  get Email() {
-    return UserStore.state.email
-  }
-
   public logoutHandler() {
     UserStore.actions.logout()
       .then(() => {
@@ -359,7 +340,7 @@ export default class Header extends Vue {
   }
 
   get isVerified() {
-    return UserStore.state.verified_email
+    return UserStore.state.my.verified_email
   }
 
   public loginOk() {

src/components/Header/Header.vue

@@ -102,11 +102,14 @@
 
                 <!-- BUTTON USER BAR -->
 
-                <q-btn v-if="static_data.functionality.SHOW_USER_MENU && !isLogged" dense flat round icon="menu"
+                <q-btn class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && !isLogged" dense flat round icon="menu"
                        @click="rightDrawerOpen = !rightDrawerOpen">
                 </q-btn>
-                <q-btn v-if="static_data.functionality.SHOW_USER_MENU && isLogged" dense flat round
+                <q-btn class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && isLogged" round dense flat
-                       icon="img:statics/images/avatar/avatar3_small.png" @click="rightDrawerOpen = !rightDrawerOpen">
+                       @click="rightDrawerOpen = !rightDrawerOpen">
+                    <q-avatar size="30px">
+                        <img :src="`statics/`+ getMyImg">
+                    </q-avatar>
                 </q-btn>
 
             </q-toolbar>
@@ -134,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/images/avatar/avatar3_small.png">
+                        <img :src="`../../statics/` + 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/projects/SingleProject/SingleProject.ts

@@ -293,7 +293,7 @@ export default class SingleProject extends Vue {
   }
 
   get isMyProject() {
-    return this.itemproject.userId === UserStore.state.userId
+    return this.itemproject.userId === UserStore.state.my._id
   }
 
   get tipoProj() {

src/globalroutines/indexdb.ts

@@ -15,7 +15,7 @@ function saveConfigIndexDb(context) {
     _id: costanti.CONFIG_ID_CFG,
     lang: toolsext.getLocale(),
     token: UserStore.state.x_auth_token,
-    userId: UserStore.state.userId
+    userId: UserStore.state.my._id
   }
 
   writeConfigIndexDb('config', data)

src/layouts/toolbar/messagePopover/messagePopover.ts

@@ -9,10 +9,14 @@ import { tools } from '@src/store/Modules/tools'
 import { toolsext } from '@src/store/Modules/toolsext'
 import { ITodo, ITodosState } from '../../../model'
 import { Getter } from 'vuex-class'
+import { UserStore } from '../../../store/Modules'
+
+import MixinUsers from '../../../mixins/mixin-users'
 
 const namespace = 'UserModule'
 
 @Component({
+  mixins: [MixinUsers]
 })
 export default class MessagePopover extends Vue {
 
@@ -25,6 +29,20 @@ export default class MessagePopover extends Vue {
     // }
   }
 
+  get getNumMsg() {
+    return UserStore.getters.getlasts_messages().length
+  }
+
+  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)
     return tools.getstrDateTime(new Date(tools.getTimestampsNow() - myval))

src/layouts/toolbar/messagePopover/messagePopover.vue

@@ -1,14 +1,14 @@
 <template>
-    <button class="relative-position animate-bounce">
+    <div>
-        <i class="fa fa-2x fa-envelope-o"></i>
+        <q-btn flat round dense icon="fas fa-comment" class="q-mx-xs" >
-        <span class="floating label bg-dark">5</span>
+            <q-badge floating color="red">{{getNumMsgUnread}}</q-badge>
             <q-menu self="top right">
                 <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"/>
+                    <q-separator/>
 
-                <div v-if="lasts_messages().length === 0">
+                    <div v-if="getNumMsg === 0">
                         <q-item>
                             {{$t('msgs.nomessage')}}
 
@@ -20,26 +20,30 @@
                         <q-item-section avatar>
                             <q-avatar>
                                 {{msg.origin.username}}
-                            <img src="https://cdn.quasar.dev/img/avatar2.jpg">
+                                <img :src="getImgByUsername(msg.dest.username)">
                             </q-avatar>
                         </q-item-section>
 
                         <q-item-section>
-                        <q-item-label lines="1">{{msg.message}}</q-item-label>
+                            <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.getstrDateTime(msg.datemsg)}}
+                            {{tools.getstrDateTimeShort(msg.datemsg)}}
                         </q-item-section>
                     </q-item>
 
-                <q-separator inset="item"/>
+                    <q-separator/>
                 </q-list>
             </q-menu>
-    </button>
+        </q-btn>
+        <q-btn v-if="false" flat round dense icon="fas fa-bell">
+            <q-badge v-if="getNumNotifUnread > 0" floating color="red">{{getNumNotifUnread}}</q-badge>
+        </q-btn>
+    </div>
 </template>
 
 <script lang="ts" src="./messagePopover.ts">

src/mixins/mixin-users.ts

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import { GlobalStore, UserStore } from '../store/Modules'
+
+import Component from 'vue-class-component'
+
+// You can declare a mixin as the same style as components.
+@Component
+export default class MixinUsers extends Vue {
+  public getUserByUsername(username) {
+    return UserStore.getters.getNameSurnameByUsername(username)
+  }
+  public getImgByUsername(username) {
+    return `statics/` + UserStore.getters.getImgByUsername(username)
+  }
+  public getMyUsername() {
+    return UserStore.state.my.username
+  }
+  get getMyImg() {
+    return UserStore.getters.getImgByUsername(UserStore.state.my.username)
+  }
+  get MenuCollapse() {
+    return GlobalStore.state.menuCollapse
+    // return true
+  }
+  get Username() {
+    return UserStore.state.my.username
+  }
+  get myName() {
+    return UserStore.state.my.name
+  }
+  get mySurname() {
+    return UserStore.state.my.surname
+  }
+  get Verificato() {
+    return UserStore.state.my.verified_email
+  }
+  get Email() {
+    return UserStore.state.my.email
+  }
+}

src/model/UserStore.ts

@@ -1,30 +1,38 @@
 import { IToken } from 'model/other'
 import { IMessage } from '@src/model/Calendar'
 
-export const DefaultUser = <IUserState>{
+export const DefaultUser: IUserFields = {
   email: '',
   username: '',
   name: '',
   surname: '',
   password: '',
-  lang: 'it'
 }
 
-export interface IUserState {
+export interface IUserFields {
-  userId?: string
+  _id?: string
   email?: string
   username?: string
   name?: string
   surname?: string
   password?: string
-  lang?: string
   ipaddr?: string
   perm?: number
+  img?: string
+  verified_email?: boolean
+  tokens?: IToken[]
+}
+
+/*
+password?: string
+ lang
+ */
+
+export interface IUserState {
+  my: IUserFields
+  lang?: string
   repeatPassword?: string
 
-  tokens?: IToken[]
-
-  verified_email?: boolean
   categorySel?: string
 
   tokenforgot?: string
@@ -35,14 +43,7 @@ export interface IUserState {
   isLogged?: boolean
   isAdmin?: boolean
   isManager?: boolean
-  usersList?: IUserList[]
+  usersList?: IUserFields[]
   countusers?: number
   msgs?: IMessage[]
 }
-
-export interface IUserList {
-  _id: string
-  username: string
-  name?: string
-  surname?: string
-}

src/statics/i18n.js

@@ -85,7 +85,7 @@ const msgglobal = {
       richiesto: 'Campo Richiesto',
       email: 'Email',
       cell: 'Móvil',
-      img: 'Imagen de archivo',
+      img: 'Immagine',
       date_reg: 'Data Reg.',
       perm: 'Permessi',
       username: 'Nome Utente',

src/store/Modules/GlobalStore.ts

@@ -419,8 +419,8 @@ namespace Actions {
       options,
       subs: newSub,
       others: {
-        userId: UserStore.state.userId,
+        userId: UserStore.state.my._id,
-        access: UserStore.state.tokens[0].access
+        access: UserStore.state.my.tokens[0].access
       }
     }
 
@@ -515,7 +515,7 @@ namespace Actions {
   async function checkUpdates(context) {
     console.log('checkUpdates')
 
-    // if (UserStore.state.userId === '')
+    // if (UserStore.state.my._id === '')
     //   return false // Login not made
 
     state.networkDataReceived = false
@@ -643,7 +643,7 @@ namespace Actions {
 
     const showall = UserStore.state.isAdmin || UserStore.state.isManager ? '1' : '0'
 
-    const myuserid = (UserStore.state.userId) ? UserStore.state.userId : '0'
+    const myuserid = (UserStore.state.my._id) ? UserStore.state.my._id : '0'
 
     const ris = await Api.SendReq('/loadsite/' + myuserid + '/' + process.env.APP_ID + '/' + showall, 'GET', null)
       .then((res) => {

src/store/Modules/Projects.ts

@@ -46,7 +46,7 @@ function getarrByCategory(category: string) {
 
 function initcat() {
   const rec = Getters.getters.getRecordEmpty()
-  rec.userId = UserStore.state.userId
+  rec.userId = UserStore.state.my._id
 
   return rec
 }
@@ -62,11 +62,11 @@ function getproj(projects, idproj, tipoproj: string) {
   let ris = null
 
   if (tipoproj === RouteNames.myprojects)
-    ris = projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId === UserStore.state.userId) && (proj.privacyread === Privacy.onlyme))
+    ris = projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId === UserStore.state.my._id) && (proj.privacyread === Privacy.onlyme))
   else if (tipoproj === RouteNames.projectsshared)
-    ris = projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId === UserStore.state.userId) && (proj.privacyread !== Privacy.onlyme))
+    ris = projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId === UserStore.state.my._id) && (proj.privacyread !== Privacy.onlyme))
   else if (tipoproj === RouteNames.projectsall)
-    ris = projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId !== UserStore.state.userId) )
+    ris = projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId !== UserStore.state.my._id) )
 
   // console.log('idproj', idproj, 'projects', projects, 'getproj', tipoproj, 'ris=', ris)
 
@@ -168,7 +168,7 @@ namespace Getters {
 
     if (!!UserStore.state) {
 
-      if (UserStore.state.userId === proj.userId)  // If it's the owner
+      if (UserStore.state.my._id === proj.userId)  // If it's the owner
         return true
 
       return (proj.privacyread === Privacy.all) ||
@@ -186,7 +186,7 @@ namespace Getters {
 
     if (!!UserStore) {
       if (!!UserStore.state)
-        return ((UserStore.state.userId === proj.userId) || (proj.privacywrite === Privacy.all))  // If it's the owner
+        return ((UserStore.state.my._id === proj.userId) || (proj.privacywrite === Privacy.all))  // If it's the owner
       else
         return false
     }
@@ -289,13 +289,13 @@ namespace Actions {
       }
     }
 
-    // if (UserStore.state.userId === '') {
+    // if (UserStore.state.my._id === '') {
     //   return false  // Login not made
     // }
 
-    console.log('dbLoad', nametable, checkPending, 'userid=', UserStore.state.userId)
+    console.log('dbLoad', nametable, checkPending, 'userid=', UserStore.state.my._id)
 
-    const ris = await Api.SendReq('/projects/' + UserStore.state.userId, 'GET', null)
+    const ris = await Api.SendReq('/projects/' + UserStore.state.my._id, 'GET', null)
       .then((res) => {
         if (res.data.projects) {  // console.log('RISULTANTE CATEGORIES DAL SERVER = ', res.data.categories)
           stateglob.projects = res.data.projects

src/store/Modules/Store/calendar/CalendarStore.ts

@@ -50,11 +50,11 @@ const stateGetter = b.state()
 namespace Getters {
 
   const findEventBooked = b.read((mystate: ICalendarState) => (myevent: IEvents, isconfirmed: boolean) => {
-    return mystate.bookedevent.find((bookedevent) => (bookedevent.id_bookedevent === myevent._id) && (bookedevent.userId === UserStore.state.userId) && ((isconfirmed && bookedevent.booked) || (!isconfirmed)))
+    return mystate.bookedevent.find((bookedevent) => (bookedevent.id_bookedevent === myevent._id) && (bookedevent.userId === UserStore.state.my._id) && ((isconfirmed && bookedevent.booked) || (!isconfirmed)))
   }, 'findEventBooked')
 
   const getNumParticipants = b.read((mystate: ICalendarState) => (myevent: IEvents, showall) => {
-    const myarr = mystate.bookedevent.filter((bookedevent) => (bookedevent.id_bookedevent === myevent._id) && (bookedevent.booked) && (showall || (!showall && bookedevent.userId === UserStore.state.userId) ))
+    const myarr = mystate.bookedevent.filter((bookedevent) => (bookedevent.id_bookedevent === myevent._id) && (bookedevent.booked) && (showall || (!showall && bookedevent.userId === UserStore.state.my._id) ))
     if (myarr)
       return myarr.reduce((sum, bookedevent) => sum + bookedevent.numpeople, 0)
     else
@@ -62,7 +62,7 @@ namespace Getters {
   }, 'getNumParticipants')
 
   const getEventsBookedByIdEvent = b.read((mystate: ICalendarState) => (idevent, showall) => {
-    return mystate.bookedevent.filter((bookedevent) => (bookedevent.id_bookedevent === idevent) && (bookedevent.booked) && (showall || (!showall && bookedevent.userId === UserStore.state.userId) ))
+    return mystate.bookedevent.filter((bookedevent) => (bookedevent.id_bookedevent === idevent) && (bookedevent.booked) && (showall || (!showall && bookedevent.userId === UserStore.state.my._id) ))
   }, 'getEventsBookedByIdEvent')
 
   const getTeacherName = b.read((mystate: ICalendarState) => (teacherusername) => {
@@ -134,7 +134,7 @@ namespace Getters {
 
 namespace Mutations {
   // function authUser(state: ICalendarState, data: ICalendarState) {
-  //   state.userId = data.userId
+  //   state._id = data._id
   // }
   //
   // export const mutations = {
@@ -153,7 +153,7 @@ namespace Actions {
       numpeople: bookevent.numpeople,
       msgbooking: bookevent.msgbooking,
       datebooked: bookevent.datebooked,
-      userId: UserStore.state.userId,
+      userId: UserStore.state.my._id,
       booked: bookevent.booked,
       modified: bookevent.modified
     }

src/store/Modules/Todos.ts

@@ -52,7 +52,7 @@ function gettodosByCategory(category: string): any[] {
 function initcat() {
 
   const rec = Getters.getters.getRecordEmpty()
-  rec.userId = UserStore.state.userId
+  rec.userId = UserStore.state.my._id
 
   return rec
 
@@ -67,7 +67,7 @@ namespace Getters {
     const objtodo: ITodo = {
       // _id: tools.getDateNow().toISOString(),  // Create NEW
       _id: objectId(),
-      userId: UserStore.state.userId,
+      userId: UserStore.state.my._id,
       descr: '',
       priority: tools.Priority.PRIORITY_NORMAL,
       statustodo: tools.Status.OPENED,
@@ -258,15 +258,15 @@ namespace Actions {
     if (!static_data.functionality.ENABLE_PROJECTS_LOADING)
       return null
 
-    console.log('dbLoad', nametable, checkPending, 'userid=', UserStore.state.userId)
+    console.log('dbLoad', nametable, checkPending, 'userid=', UserStore.state.my._id)
 
-    // if (UserStore.state.userId === '') {
+    // if (UserStore.state.my._id === '') {
     //   return new Types.AxiosError(0, null, 0, '')
     // }
 
     let ris = null
 
-    ris = await Api.SendReq('/todos/' + UserStore.state.userId, 'GET', null)
+    ris = await Api.SendReq('/todos/' + UserStore.state.my._id, 'GET', null)
       .then((res) => {
         if (res.data.todos) {  // console.log('RISULTANTE CATEGORIES DAL SERVER = ', res.data.categories)
           state.todos = res.data.todos

src/store/Modules/UserStore.ts

@@ -1,5 +1,5 @@
 import Api from '@api'
-import { ISignupOptions, ISigninOptions, IUserState, IUserList } from 'model'
+import { ISignupOptions, ISigninOptions, IUserState, IUserFields } from 'model'
 import { ILinkReg, IResult, IIdToken, IToken } from 'model/other'
 import { storeBuilder } from './Store/Store'
 import router from '@router'
@@ -23,16 +23,18 @@ const bcrypt = require('bcryptjs')
 
 // State
 const state: IUserState = {
-  userId: '',
+  my: {
+    _id: '',
     email: '',
     username: '',
     name: '',
     surname: '',
     password: '',
+    tokens: [],
+    verified_email: false
+  },
   lang: process.env.LANG_DEFAULT,
   repeatPassword: '',
-  tokens: [],
-  verified_email: false,
   categorySel: 'personal',
   servercode: 0,
   x_auth_token: '',
@@ -53,15 +55,15 @@ namespace Getters {
 
   const isUserInvalid = b.read((mystate) => {
     try {
-      const ris = (mystate.userId === undefined) || (mystate.userId.trim() === '') || (mystate.tokens[0] === undefined)
+      const ris = (mystate.my._id === undefined) || (mystate.my._id.trim() === '') || (mystate.my.tokens[0] === undefined)
-      // console.log('state.userId', state.userId, 'ris', ris)
+      // console.log('state._id', state._id, 'ris', ris)
       return ris
     } catch (e) {
       return true
     }
   }, 'isUserInvalid')
 
-  const lang = b.read((state) => {
+  const lang = b.read((mystate) => {
     if (state.lang !== '') {
       return state.lang
     } else {
@@ -70,9 +72,9 @@ namespace Getters {
   }, 'lang')
 
   // const tok = b.read(state => {
-  //   if (state.tokens) {
+  //   if (state.my.tokens) {
-  //     if (typeof state.tokens[0] !== 'undefined') {
+  //     if (typeof state.my.tokens[0] !== 'undefined') {
-  //       return state.tokens[0].token
+  //       return state.my.tokens[0].token
   //     } else {
   //       return ''
   //     }
@@ -81,15 +83,15 @@ namespace Getters {
   //   }
   // }, 'tok')
 
-  const isServerError = b.read((state) => {
+  const isServerError = b.read((mystate) => {
     return (state.servercode === tools.ERR_SERVERFETCH)
   }, 'isServerError')
 
-  const getServerCode = b.read((state) => {
+  const getServerCode = b.read((mystate) => {
     return state.servercode
   }, 'getServerCode')
 
-  const getNameSurnameByUserId = b.read((state: IUserState) => (userId: string) => {
+  const getNameSurnameByUserId = b.read((mystate: IUserState) => (userId: string) => {
     const user = UserStore.getters.getUserByUserId(userId)
     if (user)
       return user.name + ' ' + user.surname
@@ -97,36 +99,68 @@ namespace Getters {
       return '(' + userId + ')'
   }, 'getNameSurnameByUserId')
 
+  const getNameSurnameByUsername = b.read((mystate: IUserState) => (username: string) => {
+    const user = UserStore.getters.getUserByUsername(username)
+    if (user)
+      return user.name + ' ' + user.surname
+    else
+      return '(' + username + ')'
+  }, 'getNameSurnameByUsername')
+
   const getUsersList = b.read((mystate: IUserState) => {
     return mystate.usersList
   }, 'getUsersList')
 
-  const IsMyFriend = b.read((state) => (userIdOwner) => {
+  const IsMyFriend = b.read((mystate) => (userIdOwner) => {
     // ++TODO Check if userIdOwner is my friend
     // userIdOwner is my friend ?
     return true
   }, 'IsMyFriend')
 
-  const IsMyGroup = b.read((state) => (userIdOwner) => {
+  const IsMyGroup = b.read((mystate) => (userIdOwner) => {
     // ++TODO Check if userIdOwner is on my groups
     // userIdOwner is on my groups ?
     return true
   }, 'IsMyGroup')
 
-  const getUserByUserId = b.read((mystate: IUserState) => (userId): IUserState => {
+  const getUserByUserId = b.read((mystate: IUserState) => (userId): IUserFields => {
     // Check if is this User!
-    if (state.userId === userId)
+    if (state.my._id === userId)
-      return state
+      return state.my
 
     return mystate.usersList.find((item) => item._id === userId)
   }, 'getUserByUserId')
 
+  const getUserByUsername = b.read((mystate: IUserState) => (username): IUserFields => {
+    // Check if is this User!
+    if (state.my.username === username)
+      return state.my
+
+    return mystate.usersList.find((item) => item.username === username)
+  }, 'getUserByUsername')
+
+  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 {
+      return 'images/avatar/avatar3_small.png'
+    }
+  }, '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()
@@ -155,11 +189,23 @@ namespace Getters {
     get getUserByUserId() {
       return getUserByUserId()
     },
+    get getNameSurnameByUsername() {
+      return getNameSurnameByUsername()
+    },
+    get getImgByUsername() {
+      return getImgByUsername()
+    },
+    get getUserByUsername() {
+      return getUserByUsername()
+    },
     get getUsersList() {
       return getUsersList()
     },
     get getlasts_messages() {
       return getlasts_messages()
+    },
+    get getnumMsgUnread() {
+      return getnumMsgUnread()
     }
     // get fullName() { return fullName();},
   }
@@ -167,76 +213,75 @@ namespace Getters {
 }
 
 namespace Mutations {
-  function authUser(mystate: IUserState, data: IUserState) {
+  function authUser(mystate: IUserState, data: IUserFields) {
-    mystate.userId = data.userId
+    mystate.my = {...data}
-    mystate.username = data.username
+
-    mystate.name = data.name
+    mystate.isAdmin = tools.isBitActive(mystate.my.perm, shared_consts.Permissions.Admin)
-    mystate.surname = data.surname
+    mystate.isManager = tools.isBitActive(mystate.my.perm, shared_consts.Permissions.Manager)
-    mystate.perm = data.perm
-    mystate.isAdmin = tools.isBitActive(mystate.perm, shared_consts.Permissions.Admin)
-    mystate.isManager = tools.isBitActive(mystate.perm, shared_consts.Permissions.Manager)
 
     // console.log('authUser', 'state.isAdmin', mystate.isAdmin)
     console.table(mystate)
     console.table(data)
-    if (data.verified_email) {
+
-      mystate.verified_email = data.verified_email
+    // if (data.my.verified_email) {
+    //   mystate.my.verified_email = data.my.verified_email
+    // }
+    //
+    // if (data.categorySel) {
+    //   mystate.categorySel = data.categorySel
+    // }  // ??
+
+    mystate.my.tokens = []
+    resetArrToken(mystate.my.tokens)
+    mystate.my.tokens.push({ access: 'auth', token: mystate.x_auth_token, data_login: tools.getDateNow() })
+
+    // console.log('state.my.tokens', state.my.tokens)
   }
 
-    if (data.categorySel) {
+  function setpassword(mystate: IUserState, newstr: string) {
-      mystate.categorySel = data.categorySel
+    mystate.my.password = newstr
-    }  // ??
-
-    resetArrToken(mystate.tokens)
-    mystate.tokens.push({ access: 'auth', token: mystate.x_auth_token, data_login: tools.getDateNow() })
-
-    // console.log('state.tokens', state.tokens)
   }
 
-  function setpassword(state: IUserState, newstr: string) {
+  function setusersList(mystate: IUserState, usersList: IUserFields[]) {
-    state.password = newstr
-  }
-
-  function setusersList(mystate: IUserState, usersList: IUserList[]) {
     // console.log('setusersList', usersList)
     mystate.usersList = [...usersList]
   }
 
-  function setemail(state: IUserState, newstr: string) {
+  function setemail(mystate: IUserState, newstr: string) {
-    state.email = newstr
+    mystate.my.email = newstr
   }
 
-  function setlang(state: IUserState, newstr: string) {
+  function setlang(mystate: IUserState, newstr: string) {
     console.log('SETLANG', newstr)
-    state.lang = newstr
+    mystate.lang = newstr
     tools.setLangAtt(newstr)
     localStorage.setItem(tools.localStorage.lang, state.lang)
   }
 
-  function UpdatePwd(state: IUserState, x_auth_token: string) {
+  function UpdatePwd(mystate: IUserState, x_auth_token: string) {
-    state.x_auth_token = x_auth_token
+    mystate.x_auth_token = x_auth_token
-    if (!state.tokens) {
+    if (!mystate.my.tokens) {
-      state.tokens = []
+      mystate.my.tokens = []
     }
-    state.tokens.push({ access: 'auth', token: x_auth_token, data_login: tools.getDateNow() })
+    mystate.my.tokens.push({ access: 'auth', token: x_auth_token, data_login: tools.getDateNow() })
   }
 
-  function setServerCode(state: IUserState, num: number) {
+  function setServerCode(mystate: IUserState, num: number) {
-    state.servercode = num
+    mystate.servercode = num
   }
 
-  function setResStatus(state: IUserState, status: number) {
+  function setResStatus(mystate: IUserState, status: number) {
-    state.resStatus = status
+    mystate.resStatus = status
   }
 
-  function setAuth(state: IUserState, x_auth_token: string) {
+  function setAuth(mystate: IUserState, x_auth_token: string) {
 
-    state.x_auth_token = x_auth_token
+    mystate.x_auth_token = x_auth_token
   }
 
   function resetArrToken(arrtokens) {
-    if (!arrtokens.tokens) {
+    if (!arrtokens) {
-      arrtokens.tokens = []
+      arrtokens = []
     }
 
     // Take only the others access (from others Browser)
@@ -245,25 +290,25 @@ namespace Mutations {
     })
   }
 
-  function clearAuthData(state: IUserState) {
+  function clearAuthData(mystate: IUserState) {
-    state.userId = ''
+    mystate.my._id = ''
-    state.username = ''
+    mystate.my.username = ''
-    state.name = ''
+    mystate.my.name = ''
-    state.surname = ''
+    mystate.my.surname = ''
-    resetArrToken(state.tokens)
+    resetArrToken(mystate.my.tokens)
-    state.verified_email = false
+    mystate.my.verified_email = false
-    state.categorySel = 'personal'
+    mystate.categorySel = 'personal'
 
-    state.servercode = 0
+    mystate.servercode = 0
-    state.resStatus = 0
+    mystate.resStatus = 0
-    state.isLogged = false
+    mystate.isLogged = false
-    state.x_auth_token = ''
+    mystate.x_auth_token = ''
   }
 
-  function setErrorCatch(state: IUserState, axerr: Types.AxiosError) {
+  function setErrorCatch(mystate: IUserState, axerr: Types.AxiosError) {
     try {
-      if (state.servercode !== tools.ERR_SERVERFETCH) {
+      if (mystate.servercode !== tools.ERR_SERVERFETCH) {
-        state.servercode = axerr.getCode()
+        mystate.servercode = axerr.getCode()
       }
       console.log('Err catch: (servercode:', axerr.getCode(), axerr.getMsgError(), ')')
     } catch (e) {
@@ -271,11 +316,11 @@ namespace Mutations {
     }
   }
 
-  function getMsgError(state: IUserState, err: number) {
+  function getMsgError(mystate: IUserState, err: number) {
     let msgerrore = ''
     if (err !== tools.OK) {
-      msgerrore = 'Error [' + state.servercode + ']: '
+      msgerrore = 'Error [' + mystate.servercode + ']: '
-      if (state.servercode === tools.ERR_SERVERFETCH) {
+      if (mystate.servercode === tools.ERR_SERVERFETCH) {
         msgerrore = translate('fetch.errore_server')
       } else {
         msgerrore = translate('fetch.errore_generico')
@@ -302,7 +347,7 @@ namespace Mutations {
     clearAuthData: b.commit(clearAuthData),
     setErrorCatch: b.commit(setErrorCatch),
     getMsgError: b.commit(getMsgError),
-    setusersList: b.commit(setusersList),
+    setusersList: b.commit(setusersList)
   }
 }
 
@@ -322,8 +367,8 @@ namespace Actions {
   async function resetpwd(context, paramquery: IUserState) {
 
     const usertosend = {
-      email: paramquery.email,
+      email: paramquery.my.email,
-      password: paramquery.password,
+      password: paramquery.my.password,
       tokenforgot: paramquery.tokenforgot
     }
     console.log(usertosend)
@@ -341,11 +386,10 @@ namespace Actions {
 
   }
 
-
   async function requestpwd(context, paramquery: IUserState) {
 
     const usertosend = {
-      email: paramquery.email
+      email: paramquery.my.email
     }
     console.log(usertosend)
 
@@ -419,31 +463,21 @@ namespace Actions {
             Mutations.mutations.setServerCode(res.status)
 
             if (res.status === 200) {
-              const userId = newuser._id
-              const username = authData.username
-              const name = authData.name
-              const surname = authData.surname
               if (process.env.DEV) {
-                console.log('USERNAME = ' + username)
+                console.log('USERNAME = ' + newuser.username)
-                console.log('IDUSER= ' + userId)
+                console.log('IDUSER= ' + newuser._id)
               }
 
-              Mutations.mutations.authUser({
+              Mutations.mutations.authUser(newuser)
-                userId,
-                username,
-                name,
-                surname,
-                verified_email: false
-              })
 
               const now = tools.getDateNow()
               // const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
               const expirationDate = new Date(now.getTime() * 1000)
               localStorage.setItem(tools.localStorage.lang, state.lang)
-              localStorage.setItem(tools.localStorage.userId, userId)
+              localStorage.setItem(tools.localStorage.userId, newuser._id)
-              localStorage.setItem(tools.localStorage.username, username)
+              localStorage.setItem(tools.localStorage.username, newuser.username)
-              localStorage.setItem(tools.localStorage.name, name)
+              localStorage.setItem(tools.localStorage.name, newuser.name)
-              localStorage.setItem(tools.localStorage.surname, surname)
+              localStorage.setItem(tools.localStorage.surname, newuser.surname)
               localStorage.setItem(tools.localStorage.token, state.x_auth_token)
               localStorage.setItem(tools.localStorage.expirationDate, expirationDate.toString())
               localStorage.setItem(tools.localStorage.verified_email, String(false))
@@ -529,38 +563,26 @@ namespace Actions {
         if (res.success) {
           GlobalStore.mutations.SetwasAlreadySubOnDb(res.data.subsExistonDb)
 
-          const myuser: IUserState = res.data.usertosend
+          const myuser: IUserFields = res.data.usertosend
           if (myuser) {
-            const userId = myuser.userId
-            const username = authData.username
-            const name = myuser.name
-            const surname = myuser.surname
-            const verified_email = myuser.verified_email
-
             console.table(myuser)
 
-            Mutations.mutations.authUser({
+            Mutations.mutations.authUser(myuser)
-              userId,
-              username,
-              name,
-              surname,
-              verified_email,
-              perm: myuser.perm
-            })
 
             const now = tools.getDateNow()
             // const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
             const expirationDate = new Date(now.getTime() * 1000)
             localStorage.setItem(tools.localStorage.lang, state.lang)
-            localStorage.setItem(tools.localStorage.userId, userId)
+            localStorage.setItem(tools.localStorage.userId, myuser._id)
-            localStorage.setItem(tools.localStorage.username, username)
+            localStorage.setItem(tools.localStorage.username, myuser.username)
-            localStorage.setItem(tools.localStorage.name, name)
+            localStorage.setItem(tools.localStorage.name, myuser.name)
-            localStorage.setItem(tools.localStorage.surname, surname)
+            localStorage.setItem(tools.localStorage.surname, myuser.surname)
             localStorage.setItem(tools.localStorage.perm, String(myuser.perm) || '')
+            localStorage.setItem(tools.localStorage.img, String(myuser.img) || '')
             localStorage.setItem(tools.localStorage.token, state.x_auth_token)
             localStorage.setItem(tools.localStorage.expirationDate, expirationDate.toString())
             localStorage.setItem(tools.localStorage.isLogged, String(true))
-            localStorage.setItem(tools.localStorage.verified_email, String(verified_email))
+            localStorage.setItem(tools.localStorage.verified_email, String(myuser.verified_email))
             localStorage.setItem(tools.localStorage.wasAlreadySubOnDb, String(GlobalStore.state.wasAlreadySubOnDb))
 
           }
@@ -593,6 +615,7 @@ namespace Actions {
     localStorage.removeItem(tools.localStorage.username)
     localStorage.removeItem(tools.localStorage.name)
     localStorage.removeItem(tools.localStorage.surname)
+    localStorage.removeItem(tools.localStorage.img)
     localStorage.removeItem(tools.localStorage.perm)
     localStorage.removeItem(tools.localStorage.isLogged)
     // localStorage.removeItem(rescodes.localStorage.leftDrawerOpen)
@@ -658,26 +681,28 @@ namespace Actions {
         const expirationDate = new Date(String(expirationDateStr))
         const now = tools.getDateNow()
         if (now < expirationDate) {
-          const userId = String(localStorage.getItem(tools.localStorage.userId))
+          const _id = String(localStorage.getItem(tools.localStorage.userId))
           const username = String(localStorage.getItem(tools.localStorage.username))
           const name = String(localStorage.getItem(tools.localStorage.name))
           const surname = String(localStorage.getItem(tools.localStorage.surname))
           const verified_email = localStorage.getItem(tools.localStorage.verified_email) === 'true'
           const perm = parseInt(localStorage.getItem(tools.localStorage.perm), 10)
+          const img = String(localStorage.getItem(tools.localStorage.img))
 
           GlobalStore.state.wasAlreadySubOnDb = localStorage.getItem(tools.localStorage.wasAlreadySubOnDb) === 'true'
 
-          console.log('*************  autologin userId', userId)
+          console.log('*************  autologin _id', _id)
 
           UserStore.mutations.setAuth(token)
 
           Mutations.mutations.authUser({
-            userId,
+            _id,
             username,
             name,
             surname,
             verified_email,
-            perm
+            perm,
+            img
           })
 
           isLogged = true
@@ -686,7 +711,7 @@ namespace Actions {
 
       await setGlobal(isLogged)
 
-      // console.log('autologin userId STATE ', state.userId)
+      // console.log('autologin _id STATE ', state._id)
 
       return true
     } catch (e) {
@@ -717,7 +742,6 @@ namespace Actions {
 
   }
 
-
   /*
     async function refreshUserInfos(){
       let {token, refresh_token} = JWT.fetch();

src/store/Modules/tools.ts

@@ -76,7 +76,8 @@ export const tools = {
     name: 'nm',
     surname: 'sn',
     perm: 'pm',
-    lang: 'lg'
+    lang: 'lg',
+    img: 'img'
   },
 
   Priority: {
@@ -1704,8 +1705,15 @@ export const tools = {
       return date.formatDate(mytimestamp, 'DD/MM/YYYY HH:mm')
     else
       return ''
-  }
+  },
-  ,
+
+  getstrDateTimeShort(mytimestamp) {
+    // console.log('getstrDate', mytimestamp)
+    if (!!mytimestamp)
+      return date.formatDate(mytimestamp, 'DD/MM HH:mm')
+    else
+      return ''
+  },
 
   getstrDateEmailTime(mythis, mytimestamp) {
     // console.log('getstrDate', mytimestamp)

src/views/admin/cfgServer/cfgServer.ts

@@ -47,7 +47,7 @@ export default class CfgServer extends Vue {
   public selItem(item) {
     console.log('item', item)
     this.keysel = item.chiave
-    this.userIdsel = item.userid
+    this.userIdsel = item.userId
     console.log('this.keysel', this.keysel)
   }
 

src/views/admin/testp1/testp1.ts

@@ -68,18 +68,18 @@ export default class Testp1 extends Vue {
   }
 
   TestBtn2() {
-    GlobalStore.state.testp1.mioarray.push({chiave: 'pippo2', userId: UserStore.state.userId, valore: GlobalStore.state.testp1.contatore.toString() })
+    GlobalStore.state.testp1.mioarray.push({chiave: 'pippo2', userId: UserStore.state.my._id, valore: GlobalStore.state.testp1.contatore.toString() })
   }
 
   TestBtnModify() {
     // GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
-    GlobalStore.mutations.setPaoArray({chiave: 'pippo', userId: UserStore.state.userId, valore: '20' } )
+    GlobalStore.mutations.setPaoArray({chiave: 'pippo', userId: UserStore.state.my._id, valore: '20' } )
 
   }
 
   TestBtnCambiaTutto() {
     // GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
-    GlobalStore.mutations.NewArray([{chiave: 'nuovorec1', userId: UserStore.state.userId, valore: '1' }, {chiave: 'nuovorec2', userId: UserStore.state.userId, valore: '2' }] )
+    GlobalStore.mutations.NewArray([{chiave: 'nuovorec1', userId: UserStore.state.my._id, valore: '1' }, {chiave: 'nuovorec2', userId: UserStore.state.my._id, valore: '2' }] )
 
   }
 

src/views/login/requestresetpwd.vue

@@ -62,12 +62,12 @@
   import Vue from 'vue'
   import { email, required } from "vuelidate/lib/validators"
   import { UserStore } from "../../store/Modules";
-  import { IUserState } from "../../model";
+  import { IUserFields, IUserState } from "../../model"
   import { tools } from "../../store/Modules/tools";
   import { toolsext } from '@src/store/Modules/toolsext'
   export default class RequestResetPwd extends Vue{
     emailsent = false
-    form: IUserState = {
+    form: IUserFields = {
       email: '',
       tokenforgot: ''
     }

src/views/login/updatepassword.vue

@@ -74,13 +74,13 @@
   import Vue from 'vue'
   import { required } from "vuelidate/lib/validators"
   import { UserStore } from "../../store/Modules";
-  import { IUserState } from "../../model";
+  import { IUserFields, IUserState } from "../../model"
   import { tools } from "../../store/Modules/tools";
   import { toolsext } from '@src/store/Modules/toolsext'
 
   export default class UpdatePassword extends Vue {
     emailsent = false
-    form: IUserState = {
+    form = {
       password: '',
       repeatPassword: '',
       tokenforgot: '',