First Committ

src/layouts/toolbar/messagePopover/messagePopover.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/messagePopover/messagePopover.ts

@@ -0,0 +1,81 @@
+import { defineComponent } from 'vue'
+
+import {
+  IMessage,
+} from '@model'
+
+import './messagePopover.scss'
+import { tools } from '@src/store/Modules/tools'
+
+import { useRouter } from 'vue-router'
+import MixinUsers from '../../../mixins/mixin-users'
+
+const namespace = 'MessageModule'
+
+export default defineComponent({
+  name: 'MessagePopover',
+
+  mixins: [MixinUsers],
+
+  setup(props) {
+    const $router = useRouter()
+    // function lasts_messages (state: IUserState) => IMessage[] {
+    //
+    // }
+
+    function lasts_messages() {
+      // ++Todo: lasts_messages
+      return []
+    }
+
+    // if (GlobalStore.state.posts.length < 1) {
+    //   this.requestPosts()
+    // }
+    function created() {}
+
+    function clickChat(msg: IMessage) {
+      // $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))
+    }
+
+    function randomAvatarUrl() {
+      // return `https://api.adorable.io/avatars/face/${this.randomEye()}/${this.randomNose()}/${this.randomMouth()}/${this.randomHexColor()}`
+    }
+
+    function randomHexColor() {
+      return Math.random().toString(16).slice(2, 8)
+    }
+
+    function randomArrayElement(array: any) {
+      return array[Math.floor((Math.random() * array.length))]
+    }
+
+    /*
+    function randomEye() {
+      return this.randomArrayElement(['eyes1', 'eyes10', 'eyes2', 'eyes3', 'eyes4', 'eyes5', 'eyes6', 'eyes7', 'eyes9'])
+    }
+
+    function randomNose() {
+      return this.randomArrayElement(['nose2', 'nose3', 'nose4', 'nose5', 'nose6', 'nose7', 'nose8', 'nose9'])
+    }
+
+    function randomMouth() {
+      return this.randomArrayElement(['mouth1', 'mouth10', 'mouth11', 'mouth3', 'mouth5', 'mouth6', 'mouth7', 'mouth9'])
+    }
+
+     */
+
+    return {
+      lasts_messages,
+      clickChat,
+    }
+  },
+})

src/layouts/toolbar/messagePopover/messagePopover.vue

@@ -0,0 +1,49 @@
+<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-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/>
+
+                    <div v-if="getNumMsg === 0">
+                        <q-item>
+                            {{t('msgs.nomessage')}}
+
+                        </q-item>
+                    </div>
+
+                    <q-item clickable v-ripple v-for="(msg, index) in lasts_messages()" :key="index" @click="clickChat(msg)">
+
+                        <q-item-section avatar>
+                            <q-avatar>
+                                <img :src="getImgByMsg(msg)" :alt="getUsernameChatByMsg(msg)">
+                            </q-avatar>
+                        </q-item-section>
+
+                        <q-item-section>
+                            <q-item-label lines="1">{{getUsernameChatByMsg(msg)}}</q-item-label>
+                            <q-item-label caption lines="2">
+                                {{getMsgText(msg, false)}}
+                            </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-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="./messagePopover.ts">
+</script>