Pannello Utente

Aggiornamento Yarn

src/layouts/toolbar/messagePopover/messagePopover.ts

@@ -17,10 +17,14 @@ export default defineComponent({
 
   setup(props) {
     const $router = useRouter()
+
+    const { getNumMsgUnread, getNumMsg, getUsernameChatByMsg, getImgByMsg, getNumNotifUnread } = MixinUsers()
+
     // function lasts_messages (state: IUserState) => IMessage[] {
     //
     // }
 
+
     function lasts_messages() {
       // ++Todo: lasts_messages
       return []
@@ -30,10 +34,6 @@ export default defineComponent({
       // $router.replace(`/messages/${ msg.dest.username}`)
     }
 
-    function getNumNotifUnread() {
-      return 0
-    }
-
     function randomDate(): Date {
       const myval = Math.floor(Math.random() * 10000000000)
       return tools.getstrDateTime(new Date(tools.getTimestampsNow() - myval))
@@ -69,6 +69,12 @@ export default defineComponent({
     return {
       lasts_messages,
       clickChat,
+      getNumMsgUnread,
+      getNumMsg,
+      getUsernameChatByMsg,
+      getImgByMsg,
+      getNumNotifUnread,
+      tools,
     }
   },
 })

src/layouts/toolbar/messagePopover/messagePopover.vue

@@ -1,16 +1,16 @@
 <template>
     <div>
-        <q-btn flat round dense icon="fas fa-comment" class="q-mx-xs" >
-            <q-badge v-if="getNumMsgUnread > 0" floating color="red">{{getNumMsgUnread}}</q-badge>
+        <q-btn flat round dense icon="fas fa-comment" class="q-mx-xs">
+            <q-badge v-if="getNumMsgUnread() > 0" 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-item-label header>{{$t('msgs.messages')}}</q-item-label>
 
                     <q-separator/>
 
-                    <div v-if="getNumMsg === 0">
+                    <div v-if="getNumMsg() === 0">
                         <q-item>
-                            {{t('msgs.nomessage')}}
+                            {{$t('msgs.nomessage')}}
 
                         </q-item>
                     </div>
@@ -39,8 +39,8 @@
                 </q-list>
             </q-menu>
         </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 v-if="false" flat round dense icon="fas fa-comment">
+            <q-badge v-if="getNumNotifUnread() > 0" floating color="red">{{getNumNotifUnread()}}</q-badge>
         </q-btn>
     </div>
 </template>

src/layouts/toolbar/notifPopover/notifPopover.scss

@@ -0,0 +1,17 @@
+.list {
+  max-width: 400px;
+}
+
+.item > img.item-primary:not(.thumbnail) {
+  border-radius: 10px !important;
+}
+
+.item > img.item-primary {
+  width: 48px;
+  height: 46px;
+}
+
+.item > .item-secondary {
+  width: 57px;
+  font-size: 13px;
+}

src/layouts/toolbar/notifPopover/notifPopover.ts

@@ -0,0 +1,107 @@
+import { computed, defineComponent, ref } from 'vue'
+
+import {
+  IChat,
+  IMessage, IMsgUsers, INotif,
+} from '@model'
+
+import './notifPopover.scss'
+import { tools } from '@src/store/Modules/tools'
+
+import { useRouter } from 'vue-router'
+import MixinUsers from '../../../mixins/mixin-users'
+import { useNotifStore } from '@store/NotifStore'
+import { useUserStore } from '@store/UserStore'
+
+const namespace = 'notifModule'
+
+export default defineComponent({
+  name: 'notifPopover',
+
+  setup(props) {
+    const $router = useRouter()
+    const userStore = useUserStore()
+    const notifStore = useNotifStore()
+
+    const loading = ref(false)
+
+    const lasts_notifs = computed(() => notifStore.getlasts_notifs)
+
+    const notifsel = ref(<INotif>{
+      dest: '',
+      datenotif: new Date()
+    })
+
+    const { getNumNotifUnread, getNumNotif, getUsernameChatByNotif, getImgByNotif, getNotifText } = MixinUsers()
+
+    // function lasts_notifs (state: IUserState) => IMessage[] {
+    //
+    // }
+
+
+    function clickChat(msg: IMessage) {
+      // $router.replace(`/notifs/${ msg.dest.username}`)
+    }
+
+    function getlastnotif(username: string): any {
+      // Get msg for this chat
+      if (notifStore.last_notifs)
+        return notifStore.last_notifs.find((rec: INotif) => rec.dest === username)
+      // return users_msg_saved[username]
+    }
+
+    function getlastdataread(username: string): any {
+      // Get msg for this
+
+      let myrec = getlastnotif(username)
+      const lastdata: any = (myrec) ? myrec.lastdataread : tools.getLastDateReadReset()
+
+      let mydate = ''
+      if (!tools.isIsoDate(lastdata))
+        mydate = lastdata.toISOString()
+      else
+        return lastdata
+
+      // console.log('getlastdataread', mydate)
+      return mydate
+    }
+
+
+    function refreshdata(username: string) {
+      loading.value = true
+
+      notifsel.value.dest = ''
+
+      return notifStore.updateNotifDataFromServer({
+        username,
+        lastdataread: getlastdataread(username)
+      }).then((ris) => {
+        notifsel.value.dest = username
+        loading.value = false
+
+        const element = document.getElementById('last')
+        tools.scrollToElement(element)
+
+        // changemsgs('', '')
+
+      }).catch((err) => {
+        loading.value = false
+      })
+    }
+
+    function mounted() {
+      refreshdata(userStore.my.username)
+    }
+
+    return {
+      lasts_notifs,
+      clickChat,
+      getNumNotifUnread,
+      getNumNotif,
+      getUsernameChatByNotif,
+      getImgByNotif,
+      getNotifText,
+      tools,
+    }
+  },
+})

src/layouts/toolbar/notifPopover/notifPopover.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <q-btn flat round dense icon="fas fa-bell" class="q-mx-xs">
+      <q-badge v-if="getNumNotifUnread() > 0" floating color="red">{{ getNumNotifUnread() }}</q-badge>
+
+      <q-menu anchor="bottom right" self="top right">
+        <q-bar class="bg-primary text-white">
+          {{ $t('notifs.notifs') }}
+          <q-space/>
+          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+        </q-bar>
+        <div>
+          Imposta notifiche:<br>
+
+          <q-toggle dark v-model="notifs[0]" :label="$t('notifs.warn_province')"/>
+
+
+        </div>
+        <q-list bordered class="rounded-borders" style="max-width: 350px; min-width: 250px;">
+
+          <q-separator/>
+
+          <div v-if="getNumNotif() === 0">
+            <q-item>
+              {{ $t('notifs.nonotif') }}
+
+            </q-item>
+          </div>
+
+          <q-item clickable v-ripple v-for="(notif, index) in lasts_notifs()" :key="index" @click="clickChat(notif)">
+
+            <q-item-section avatar>
+              <q-avatar>
+                <q-item-label lines="1">{{ getTypeNotif(notif) }}</q-item-label>
+              </q-avatar>
+            </q-item-section>
+
+            <!--<q-item-section avatar>
+                <q-avatar>
+                    <img :src="getImgByNotif(notif)" :alt="getUsernameChatByNotif(notif)">
+                </q-avatar>
+            </q-item-section>-->
+
+            <q-item-section>
+              <q-item-label lines="1">{{ getUsernameChatByNotif(notif) }}</q-item-label>
+              <q-item-label caption lines="2">
+                {{ getNotifText(notif, false) }}
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side top>
+              {{ tools.getstrDateTimeShort(notif.datenotif) }}
+            </q-item-section>
+          </q-item>
+
+          <q-separator/>
+        </q-list>
+      </q-menu>
+    </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="./notifPopover.ts">
+</script>