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.
This commit is contained in:
Paolo Arena
1
src/views/messages/index.ts
Normal file
1
src/views/messages/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export {default as Messages} from './messages'
|
||||
33
src/views/messages/messages.scss
Normal file
33
src/views/messages/messages.scss
Normal file
@@ -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{
|
||||
|
||||
}
|
||||
103
src/views/messages/messages.ts
Normal file
103
src/views/messages/messages.ts
Normal file
@@ -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()
|
||||
}
|
||||
|
||||
}
|
||||
136
src/views/messages/messages.vue
Normal file
136
src/views/messages/messages.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user