surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Paolo Arena
2019-10-27 00:37:00 +02:00
parent 878ae96813
commit 4f895bdbe2
19 changed files with 407 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/common/shared_vuejs.ts
View File

@@ -6,8 +6,13 @@ export const shared_consts = {
Manager: 2,
},
MessageOptions: {
Notify_ByEmail: 2,
Notify_ByPushNotification: 4
},
fieldsUserToChange() {
return ['username', 'email', 'name', 'surname', 'perm', 'date_reg', 'verified_email', 'img', 'ipaddr']
return ['username', 'email', 'name', 'surname', 'perm', 'date_reg', 'verified_email', 'img', 'ipaddr', 'lasttimeonline']
}
}

38
src/components/CEventsCalendar/CEventsCalendar.ts
View File

@@ -28,10 +28,12 @@ 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'
import { GlobalStore, MessageStore } from '../../store/Modules'
import { IMessagePage, IMessage, IIdentity, MsgDefault } from '../../model'
import MixinUsers from '../../mixins/mixin-users'
@Component({
mixins: [MixinUsers],
name: 'CEventsCalendar',
components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor }
})
@@ -370,10 +372,6 @@ export default class CEventsCalendar extends Vue {
}
}
get mythis() {
return this
}
public $refs: {
calendar: any
}
@@ -666,26 +664,17 @@ export default class CEventsCalendar extends Vue {
const data: IMessage = {
source: {
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
},
read: false,
deleted: false,
message: this.askInfoForm.message,
datemsg: tools.getDateNow()
message: this.askInfoForm.message
}
this.SendMsgEvent(data).then((ris) => {
MessageStore.actions.SendMsgEvent(data).then((ris) => {
self.contextDay = null
if (ris)
tools.showPositiveNotif(self.$q, self.$t('cal.sendmsg_sent'))
@@ -841,10 +830,6 @@ export default class CEventsCalendar extends Vue {
return await CalendarStore.actions.BookEvent(eventparam)
}
public async SendMsgEvent(param: IMessage) {
return await UserStore.actions.SendMsgEvent(param)
}
public isAlreadyBooked(eventparam: IEvents) {
return CalendarStore.getters.findEventBooked(eventparam, true)
}
@@ -880,7 +865,7 @@ export default class CEventsCalendar extends Vue {
public createContribType(value) {
console.log('createContribType', value)
tools.createNewRecord(this, 'contribtype', { label: value }).then((myrec) => {
console.log('myrec')
// console.log('myrec')
CalendarStore.state.contribtype.push(myrec)
})
}
@@ -901,10 +886,6 @@ export default class CEventsCalendar extends Vue {
return myprice
}
public getTeacherName(teacherusername) {
return CalendarStore.getters.getTeacherName(teacherusername)
}
public getWhereIcon(where) {
const whererec = CalendarStore.getters.getWhereRec(where)
return (whererec) ? whererec.whereicon : ''
@@ -915,11 +896,6 @@ export default class CEventsCalendar extends Vue {
return (whererec) ? whererec.placename : ''
}
public getTeacherImg(teacherusername) {
const teacher = CalendarStore.getters.getTeacher(teacherusername)
return (teacher) ? teacher.img : ''
}
public badgeClasses(eventparam, type) {
const cssColor = tools.isCssColor(eventparam.bgcolor)
const isHeader = type === 'header'

34
src/components/CEventsCalendar/CEventsCalendar.vue
View File

@@ -39,17 +39,17 @@
<span class="cal__teacher-content">
<q-chip>
<q-avatar>
<img :src="`../../statics/images/` + getTeacherImg(myevent.teacher)">
<img :src="`../../statics/images/` + getImgByUsername(myevent.teacher)">
</q-avatar>
<span class="cal__teacher-content">{{getTeacherName(myevent.teacher)}}</span>
<span class="cal__teacher-content">{{getUserByUsername(myevent.teacher)}}</span>
</q-chip>
<span v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2"
<span v-if="getImgByUsername(myevent.teacher2) && myevent.teacher2"
class="margin_avatar2"></span>
<q-chip v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2">
<q-chip v-if="getImgByUsername(myevent.teacher2) && myevent.teacher2">
<q-avatar>
<img :src="`../../statics/images/` + getTeacherImg(myevent.teacher2)">
<img :src="`../../statics/images/` + getImgByUsername(myevent.teacher2)">
</q-avatar>
<span class="cal__teacher-content">{{getTeacherName(myevent.teacher2)}}</span>
<span class="cal__teacher-content">{{getUserByUsername(myevent.teacher2)}}</span>
</q-chip>
</span>
</div>
@@ -75,7 +75,7 @@
</div>
<div v-if="myevent.dateTimeStart" class="cal__when">
<span class="cal__where-title">{{$t('cal.when')}}:
<span v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
<span v-html="tools.getstrDateTimeEvent(mythis(), myevent, true)"></span>
</span>
</div>
<p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
@@ -294,7 +294,7 @@
</q-chip>
<div v-if="myevent.dateTimeStart" class="cal__when">
<span class="cal__where-title">{{$t('cal.when')}}:
<span v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
<span v-html="tools.getstrDateTimeEvent(mythis(), myevent, true)"></span>
</span>
</div>
<div class="q-pa-xs">
@@ -334,7 +334,7 @@
<q-card-actions align="right">
<q-btn v-if="bookEventpage.state === EState.Modifying" flat :label="$t('cal.cancelbooking')"
color="negative"
@click="tools.CancelBookingEvent(mythis, myevent, bookEventForm._id, true)"></q-btn>
@click="tools.CancelBookingEvent(mythis(), myevent, bookEventForm._id, true)"></q-btn>
<q-btn v-if="checkseinviaMsg" flat :label="$t('dialog.sendonlymsg')" color="primary"
@click="sendMsg(myevent)"></q-btn>
<q-btn v-else flat :label="getTitleBtnBooking" color="primary" @click="saveBookEvent(myevent)"
@@ -370,7 +370,7 @@
</q-chip>
<div v-if="myevent.dateTimeStart" class="cal__when">
<span class="cal__where-title">{{$t('cal.when')}}:
<span v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
<span v-html="tools.getstrDateTimeEvent(mythis(), myevent, true)"></span>
</span>
</div>
<div class="q-pa-xs">
@@ -560,7 +560,7 @@
</p>
<div class="listaev__date listaev__align_center_mobile">
<span v-html="tools.getstrDateTimeEvent(mythis, event, true)"></span>
<span v-html="tools.getstrDateTimeEvent(mythis(), event, true)"></span>
</div>
<div class="listaev__align_center_mobile">
@@ -600,16 +600,16 @@
<q-chip>
<q-avatar>
<img :src="`../../statics/images/` + getTeacherImg(event.teacher)">
<img :src="`../../statics/images/` + getImgByUsername(event.teacher)">
</q-avatar>
<span class="cal__teacher-content">{{getTeacherName(event.teacher)}}</span>
<span class="cal__teacher-content">{{getUserByUsername(event.teacher)}}</span>
</q-chip>
<span v-if="getTeacherImg(event.teacher2)" class="margin_avatar2"></span>
<q-chip v-if="getTeacherImg(event.teacher2) && event.teacher2">
<span v-if="getImgByUsername(event.teacher2)" class="margin_avatar2"></span>
<q-chip v-if="getImgByUsername(event.teacher2) && event.teacher2">
<q-avatar>
<img :src="`../../statics/images/` + getTeacherImg(event.teacher2)">
<img :src="`../../statics/images/` + getImgByUsername(event.teacher2)">
</q-avatar>
<span class="cal__teacher-content">{{getTeacherName(event.teacher2)}}</span>
<span class="cal__teacher-content">{{getUserByUsername(event.teacher2)}}</span>
</q-chip>
<span v-if="event.wherecode" class="">

4
src/components/CGridTableRec/CGridTableRec.vue
View File

@@ -39,7 +39,7 @@
:label="$t('grid.editvalues')"></q-toggle>
<q-btn v-if="mytable" label="Refresh" color="primary" @click="refresh" class="q-mx-sm"></q-btn>
<q-btn v-if="mytable" flat dense color="primary" :disable="loading" label="Add Record"
<q-btn v-if="mytable" flat dense color="primary" :disable="loading || !canEdit" :label="$t('grid.addrecord')"
@click="createNewRecord"></q-btn>
<q-space/>
@@ -77,7 +77,7 @@
<q-inner-loading :showing="spinner_visible">
<q-spinner-gears size="50px" color="primary"/>
<q-spinner-tail size="2em" color="primary"/>
</q-inner-loading>
</template>

4
src/components/CMySelect/CMySelect.ts
View File

@@ -39,7 +39,7 @@ export default class CMySelect extends Vue {
public mounted() {
const rec = this.options.find((myrec) => myrec[`${this.optval}`] === this.value)
console.log('rec', rec)
// console.log('rec', rec)
if (!this.useinput) {
this.myvalue = this.value
} else {
@@ -49,7 +49,7 @@ export default class CMySelect extends Vue {
else
this.myvalue = rec[`${this.optlab}`]
console.log('this.myvalue', this.myvalue, 'this.optval', this.optval, 'rec', rec[`${this.optval}`])
// console.log('this.myvalue', this.myvalue, 'this.optval', this.optval, 'rec', rec[`${this.optval}`])
}
}
}

1
src/components/projects/SingleProject/SingleProject.vue
View File

@@ -9,6 +9,7 @@
v-model.trim="precDescr"
autogrow
borderless
debounce="1000"
:label="getlabeltext"
dense
@focus="getFocus($event)"

6
src/components/todos/CTodo/CTodo.vue
View File

@@ -54,6 +54,7 @@
<q-input v-if="viewtaskTop" ref="insertTask" color="blue-12" v-model="todotop" :label="$t('todo.inserttop')"
style="margin-left: 6px;"
debounce="1000"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="dbInsert(true)">
<template v-slot:prepend>
@@ -116,9 +117,12 @@
<q-input v-if="(TodosCount > 0 || !viewtaskTop) && CanIModifyTodo" ref="insertTaskBottom" v-model="todobottom"
style="margin-left: 6px;"
color="blue-12"
debounce="1000"
:label="$t('todo.insertbottom')"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="dbInsert(false)"/>
v-on:keyup.enter="dbInsert(false)">
</q-input>
<br>

1
src/components/todos/SingleTodo/SingleTodo.vue
View File

@@ -13,6 +13,7 @@
<div class="flex-item donotdrag divdescrTot">
<q-input v-if="sel && inEdit && itemtodo.statustodo !== tools.Status.COMPLETED" hide-underline type="textarea" ref="inputdescr"
v-model.trim="precDescr"
debounce="1000"
autogrow
borderless
:readonly="!CanIModifyTodo"

8
src/layouts/toolbar/messagePopover/messagePopover.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<q-btn flat round dense icon="fas fa-comment" class="q-mx-xs" >
<q-badge floating color="red">{{getNumMsgUnread}}</q-badge>
<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>
@@ -19,14 +19,14 @@
<q-item-section avatar>
<q-avatar>
<img :src="getImgByUsername(msg.dest.username)">
<img :src="getImgByMsg(msg)">
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label lines="1">{{getUserByUsername(msg.dest.username)}}</q-item-label>
<q-item-label lines="1">{{getUsernameChatByMsg(msg)}}</q-item-label>
<q-item-label caption lines="2">
{{msg.message}}
{{getMsgText(msg, false)}}
</q-item-label>
</q-item-section>

42
src/mixins/mixin-users.ts
View File

@@ -5,6 +5,7 @@ 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'
import { IMessage } from '@src/model'
// You can declare a mixin as the same style as components.
@Component
@@ -12,43 +13,71 @@ 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)
}
public getImgByUsername(username) {
return `statics/` + UserStore.getters.getImgByUsername(username)
}
public getMyUsername() {
return UserStore.state.my.username
}
public getUsernameChatByMsg(msg: IMessage) {
if (msg) {
if (msg.dest.username !== this.getMyUsername())
return msg.dest.username
else
return msg.origin.username
} else {
return ''
}
}
public getImgByMsg(msg: IMessage) {
return `statics/` + UserStore.getters.getImgByUsername(this.getUsernameChatByMsg(msg))
}
get getMyImg() {
return 'statics/' + 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
}
get getNumMsg() {
return MessageStore.getters.getlasts_messages().length
}
@@ -58,4 +87,17 @@ export default class MixinUsers extends Vue {
return MessageStore.getters.getnumMsgUnread()
}
public getMsgText(msg: IMessage, inarray: boolean) {
let add = ''
if (msg.origin.username === this.getMyUsername())
add = 'Tu: '
const ris = add + msg.message
if (inarray)
return [ris]
else
return ris
}
}

3
src/model/Calendar.ts
View File

@@ -43,9 +43,6 @@ export interface IBookedEvent {
export interface IOperators {
username: string
name: string
surname: string
email: string
cell: string
webpage?: string
img: string

1
src/model/UserStore.ts
View File

@@ -20,6 +20,7 @@ export interface IUserFields {
img?: string
verified_email?: boolean
tokens?: IToken[]
lasttimeonline?: Date
}
/*

5
src/statics/i18n.js
View File

@@ -4,6 +4,7 @@ const msgglobal = {
it: {
grid: {
editvalues: 'Modifica Valori',
addrecord: 'Aggiungi Riga',
showprevedit: 'Mostra Eventi Passati',
columns: 'Colonne',
tableslist: 'Tabelle',
@@ -289,6 +290,7 @@ const msgglobal = {
es: {
grid: {
editvalues: 'Cambiar valores',
addrecord: 'Agregar fila',
showprevedit: 'Mostrar eventos pasados',
columns: 'Columnas',
tableslist: 'Tablas'
@@ -565,6 +567,7 @@ const msgglobal = {
fr: {
grid: {
editvalues: 'Changer les valeurs',
addrecord: 'Ajouter une ligne',
showprevedit: 'Afficher les événements passés',
columns: 'Colonnes',
tableslist: 'Tables',
@@ -840,6 +843,7 @@ const msgglobal = {
enUs: {
grid: {
editvalues: 'Edit Values',
addrecord: 'Add Row',
showprevedit: 'Show Past Events',
columns: 'Columns',
tableslist: 'Tables',
@@ -1114,6 +1118,7 @@ const msgglobal = {
de: {
grid: {
editvalues: 'Edit Values',
addrecord: 'Add Row',
showprevedit: 'Show Past Events',
columns: 'Columns',
tableslist: 'Tables',

19
src/store/Modules/Store/calendar/CalendarStore.ts
View File

@@ -65,18 +65,6 @@ namespace Getters {
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) => {
const op = mystate.operators.find((myop) => myop.username === teacherusername)
return (op) ? `${op.name} ${op.surname}` : ''
}, 'getTeacherName')
const getTeacher = b.read((mystate: ICalendarState) => (teacherusername) => {
const op = mystate.operators.find((myop) => myop.username === teacherusername)
return (op)
}, 'getTeacher')
const getWhereRec = b.read((mystate: ICalendarState) => (wherecode) => {
const whererec = mystate.wheres.find((mywhere) => mywhere.code === wherecode)
return (whererec)
@@ -110,9 +98,6 @@ namespace Getters {
get getEventsBookedByIdEvent() {
return getEventsBookedByIdEvent()
},
get getTeacher() {
return getTeacher()
},
get getWhereRec() {
return getWhereRec()
},
@@ -124,12 +109,8 @@ namespace Getters {
},
get getContribtypeRecByLabel() {
return getContribtypeRecByLabel()
},
get getTeacherName() {
return getTeacherName()
}
}
}
namespace Mutations {

4
src/store/Modules/UserStore.ts
View File

@@ -138,9 +138,11 @@ namespace Getters {
}, 'getUserByUsername')
const getImgByUsername = b.read((mystate: IUserState) => (username): string => {
if (username === '')
return 'images/avatar/avatar3_small.png'
// Check if is this User!
const myrec = UserStore.getters.getUserByUsername(username)
if (myrec && !!myrec.img) {
if (myrec && !!myrec.img && myrec.img !== '' && myrec.img !== 'undefined') {
return myrec.img
} else {
return 'images/avatar/avatar3_small.png'

30
src/store/Modules/tools.ts
View File

@@ -27,6 +27,7 @@ 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 {
@@ -2470,12 +2471,41 @@ export const tools = {
// return height()
return mythis.$q.screen.height
},
getwidth(mythis) {
// return height()
return mythis.$q.screen.width
},
isIsoDate(str) {
if (!/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(str)) return false
const d = new Date(str)
return d.toISOString() === str
},
getLastDateReadReset() {
return new Date(1999, 1, 1, 0, 0, 0)
},
isBitActive(bit, whattofind) {
return ((bit & whattofind) === whattofind)
},
SetBit(myval, bit) {
myval = myval | bit
return myval
},
getUnique(arr, comp) {
const unique = arr
.map(e => e[comp])
// store the keys of the unique objects
.map((e, i, final) => final.indexOf(e) === i && i)
// eliminate the dead keys & store unique objects
.filter(e => arr[e]).map(e => arr[e])
return unique
}
// getLocale() {

18
src/views/messages/messages.scss
View File

@@ -25,9 +25,23 @@
}
.chat_dest{
display: flex;
flex: 1;
justify-content: flex-start;
}
.chat_my{
display: flex;
flex: 1;
justify-content: flex-end;
}
.bottomfixed {
// right: 0;
// position: fixed;
z-index: 9999;
// box-sizing: border-box;
margin-right: 0;
margin-left: auto;
// bottom: 0;
}

187
src/views/messages/messages.ts
View File

@@ -4,10 +4,15 @@ 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 { IChat, IMessage, IUserState, MsgDefault, StatusMessage } from '../../model'
import { Getter } from 'vuex-class'
import { IMsgUsers } from '../../model/MessageStore'
import MixinUsers from '../../mixins/mixin-users'
import { scroll } from 'quasar'
const { getScrollTarget, setScrollPosition } = scroll
// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
@@ -24,18 +29,97 @@ export default class Messages extends Vue {
public $q
public mydrawer = true
public miniState = false
public usernameloading: string = ''
public widthdrawer = 300
public chatsel: IChat = {
username: '',
lasttimeActive: new Date()
}
public mytexttosend: string = ''
public loading: boolean = false
// public users_msg_saved: IMsgUsers[] = []
@Getter('getlasts_messages', { namespace })
public lasts_messages: (state: IUserState) => IMessage[]
@Watch('$route.params.un')
public changeusername() {
if (this.$route.params.un === undefined || this.$route.params.un === ':un') {
this.usernameloading = this.getLastUserChatted()
} else {
this.usernameloading = this.$route.params.un
}
if (!this.miniState && tools.isMobile()) {
this.miniState = true
}
if (this.usernameloading) {
// Retrieve last msgs data from the server
this.refreshdata(this.usernameloading)
}
}
get styletextbar() {
let mystr = ''
if (this.mydrawer) {
if (!this.miniState)
mystr = `left: ${this.widthdrawer}px;`
else
mystr = `left: 57px;`
} else {
mystr = 'left: 0;'
}
// console.log('tools.getwidth', tools.getwidth)
mystr += ` width: ${tools.getwidth(this) - this.widthdrawer - 40 - 300}px; `
return mystr
}
public scrollToElement(el) {
const target = getScrollTarget(el)
const offset = el.offsetTop
const duration = 1000
// console.log('target', target, 'offset', offset, 'duration', duration)
setScrollPosition(target, offset, duration)
}
public refreshdata(username: string) {
this.loading = true
this.chatsel.username = ''
return MessageStore.actions.updateMsgDataFromServer({
username,
lastdataread: this.getlastdataread(username)
}).then((ris) => {
this.usernameloading = username
this.chatsel.username = username
this.loading = false
const element = document.getElementById('last')
this.scrollToElement(element)
// this.changemsgs('', '')
}).catch((err) => {
this.loading = false
})
}
public showNotif(msgcode) {
tools.showNotif(this.$q, this.$t(msgcode))
}
public getMyUsername() {
return UserStore.state.my.username
}
public drawerClick(e) {
// if in "mini" state and user
// click on drawer, we switch it to "normal" mode
@@ -58,41 +142,106 @@ export default class Messages extends Vue {
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
public getLastUserChatted() {
const lastmsg: IMessage = MessageStore.getters.getlasts_messages().slice(-1)[0]
console.log('lastmsg', lastmsg)
if (lastmsg) {
return (lastmsg.origin.username !== this.getMyUsername()) ? lastmsg.origin.username : lastmsg.origin.username
} else {
return ''
}
// Retrieve last msgs data from the server
MessageStore.actions.updateMsgDataFromServer({username: this.chatsel.username, lastdataread: this.getlastdataread() } )
}
public selChat(mymsg: IMessage) {
if (this.chatsel.username !== mymsg.dest.username)
this.$router.replace('/messages/' + mymsg.dest.username)
else {
// refresh
this.refreshdata(this.chatsel.username)
}
}
public msgchat(): IMsgUsers {
// @Watch('MessageStore.state.users_msg', { immediate: false, deep: true })
// public changemsgs(value: string, oldValue: string) {
// console.log('changemsgs')
//
// const myrec = MessageStore.state.users_msg.find((rec) => rec.username === this.usernameloading)
//
// console.log('myrec', myrec)
//
// if (this.users_msg_saved.length < 0)
// this.users_msg_saved = []
//
// this.users_msg_saved[this.usernameloading] = {...myrec}
// console.log('this.users_msg_saved', this.users_msg_saved[this.usernameloading])
// }
public msgchat(username): IMsgUsers {
// Get msg for this chat
return MessageStore.state.users_msg.find((rec) => rec.username === this.chatsel.username)
return MessageStore.state.users_msg.find((rec) => rec.username === username)
// return this.users_msg_saved[username]
}
public msgchat_records(): IMessage[] {
const myrec = this.msgchat()
console.log('myrec', myrec)
const myrec = this.msgchat(this.chatsel.username)
// console.log('msgchat_records', myrec)
// Get msg for this chat
return (myrec) ? myrec.msgs : []
}
public getlastdataread(): Date {
const myrec = this.msgchat()
public getlastdataread(username): any {
const myrec = this.msgchat(username)
// Get msg for this chat
return (myrec) ? tools.gettimestampByDate(myrec.lastdataread) : tools.getLastDateReadReset()
const lastdata = (myrec) ? myrec.lastdataread : tools.getLastDateReadReset()
console.table(myrec)
let mydate = ''
if (!tools.isIsoDate(lastdata))
mydate = lastdata.toISOString()
else
return lastdata
// console.log('getlastdataread', mydate)
return mydate
}
public getMsgText(msg: IMessage) {
return [msg.message]
public sendMsg() {
const self = this
const data: IMessage = {
dest: {
idapp: process.env.APP_ID,
username: this.chatsel.username
},
message: this.mytexttosend
}
data.dest.username = this.chatsel.username
data.message = this.mytexttosend
this.mytexttosend = ''
MessageStore.actions.SendMsgEvent(data).then((ris) => {
data.status = StatusMessage.Sending
const element = document.getElementById('last')
this.scrollToElement(element)
if (!ris)
tools.showNegativeNotif(self.$q, self.$t('cal.sendmsg_error'))
// tools.showPositiveNotif(self.$q, self.$t('cal.sendmsg_sent'))
// else
})
}
public loadMorePosts() {
console.log('loadMorePosts')
}
public myonScroll({ target: { scrollTop, clientHeight, scrollHeight }}) {
if (scrollTop + clientHeight >= scrollHeight) {
this.loadMorePosts()
}
}
public created() {

66
src/views/messages/messages.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="q-pr-md">
<q-layout view="hHh Lpr lff" container :style="`height: ` + getheight + `px`"
class="shadow-2 rounded-borders messages_page">
<q-drawer
@@ -8,7 +8,7 @@
:mini="!mydrawer || miniState"
@click.capture="drawerClick"
:width="300"
:width="widthdrawer"
:breakpoint="300"
bordered
content-class="bg-grey-3">
@@ -36,14 +36,14 @@
<q-item-section avatar>
<q-avatar>
<img :src="getImgByUsername(msg.dest.username)">
<img :src="getImgByMsg(msg)">
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label lines="1">{{getUserByUsername(msg.dest.username)}}</q-item-label>
<q-item-label lines="1">{{getUsernameChatByMsg(msg)}}</q-item-label>
<q-item-label caption lines="2">
{{msg.message}}
{{getMsgText(msg, false)}}
</q-item-label>
</q-item-section>
@@ -68,10 +68,12 @@
</div>
</q-drawer>
<q-page-container>
<div class="row column">
<div>
<q-page-container style="">
<q-page class="q-px-lg q-py-md">
<div>
<q-item clickable v-if="!!chatsel.username">
<q-item clickable v-if="!!chatsel.username" @scroll="myonScroll">
<q-item-section avatar>
<q-avatar>
@@ -88,18 +90,20 @@
</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="q-pa-md">
<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)"
:name="getUsernameChatByMsg(msg)"
:text="getMsgText(msg, true)"
: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)">
<img :src="getImgByMsg(msg)">
</q-avatar>
</template>
</q-chat-message>
@@ -107,7 +111,7 @@
<div class="chat_my" v-else>
<q-chat-message
name="me"
:text="getMsgText(msg)"
:text="getMsgText(msg, true)"
:stamp="tools.getstrDateTimeShort(msg.datemsg)"
sent
bg-color="blue-2">
@@ -121,9 +125,45 @@
</div>
</q-item>
<div id="last"></div>
<q-inner-loading id="spinner" :showing="loading">
<q-spinner-tail
color="primary"
size="4em">
</q-spinner-tail>
</q-inner-loading>
</div>
</q-page>
</q-page-container>
</div>
<div class="bottomfixed row" :style="styletextbar">
<div class="" style="max-width: 50px; align-self: center; order: 1;">
<q-btn rounded
size="sm"
icon="fas fa-smile">
</q-btn>
</div>
<div class="" style="max-height: 100px; flex-grow:1; order: 2;">
<q-input
bordered
rounded
v-model="mytexttosend"
debounce="1000"
filled
autogrow
input-style="max-height: 95px;">
</q-input>
</div>
<div class="" style="max-width: 50px; align-self: center; order: 3;">
<q-btn push
rounded
size="sm"
icon="send"
@click="sendMsg">
</q-btn>
</div>
</div>
</div>
</q-layout>
</div>
</template>