From 0dd869d59e4430c125c2c0a80acaedfe4b27c4d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 10 Sep 2019 14:59:08 +0200 Subject: [PATCH] MOBILE-3142 chat: Past sessions look and feel --- src/addon/mod/chat/chat.module.ts | 2 + src/addon/mod/chat/pages/chat/chat.ts | 63 ++----------- .../session-messages/session-messages.html | 73 +++++++++------ .../session-messages/session-messages.scss | 5 +- .../session-messages/session-messages.ts | 46 ++++++---- src/addon/mod/chat/providers/helper.ts | 88 +++++++++++++++++++ 6 files changed, 173 insertions(+), 104 deletions(-) create mode 100644 src/addon/mod/chat/providers/helper.ts diff --git a/src/addon/mod/chat/chat.module.ts b/src/addon/mod/chat/chat.module.ts index 7d90566e0..de0349837 100644 --- a/src/addon/mod/chat/chat.module.ts +++ b/src/addon/mod/chat/chat.module.ts @@ -18,6 +18,7 @@ import { CoreCourseModuleDelegate } from '@core/course/providers/module-delegate import { CoreCourseModulePrefetchDelegate } from '@core/course/providers/module-prefetch-delegate'; import { AddonModChatComponentsModule } from './components/components.module'; import { AddonModChatProvider } from './providers/chat'; +import { AddonModChatHelperProvider } from './providers/helper'; import { AddonModChatLinkHandler } from './providers/link-handler'; import { AddonModChatListLinkHandler } from './providers/list-link-handler'; import { AddonModChatModuleHandler } from './providers/module-handler'; @@ -36,6 +37,7 @@ export const ADDON_MOD_CHAT_PROVIDERS: any[] = [ ], providers: [ AddonModChatProvider, + AddonModChatHelperProvider, AddonModChatLinkHandler, AddonModChatListLinkHandler, AddonModChatModuleHandler, diff --git a/src/addon/mod/chat/pages/chat/chat.ts b/src/addon/mod/chat/pages/chat/chat.ts index feba43697..880d2cd2a 100644 --- a/src/addon/mod/chat/pages/chat/chat.ts +++ b/src/addon/mod/chat/pages/chat/chat.ts @@ -21,10 +21,10 @@ import { CoreSitesProvider } from '@providers/sites'; import { CoreDomUtilsProvider } from '@providers/utils/dom'; import { CoreTextUtilsProvider } from '@providers/utils/text'; import { AddonModChatProvider, AddonModChatMessageWithUserData } from '../../providers/chat'; +import { AddonModChatHelperProvider } from '../../providers/helper'; import { Network } from '@ionic-native/network'; import { coreSlideInOut } from '@classes/animations'; import { CoreSendMessageFormComponent } from '@components/send-message-form/send-message-form'; -import * as moment from 'moment'; /** * Page that displays a chat session. @@ -62,8 +62,8 @@ export class AddonModChatChatPage { constructor(navParams: NavParams, logger: CoreLoggerProvider, network: Network, zone: NgZone, private navCtrl: NavController, private chatProvider: AddonModChatProvider, private appProvider: CoreAppProvider, sitesProvider: CoreSitesProvider, - private modalCtrl: ModalController, private domUtils: CoreDomUtilsProvider, private textUtils: CoreTextUtilsProvider, - private eventsProvider: CoreEventsProvider) { + private modalCtrl: ModalController, private domUtils: CoreDomUtilsProvider, + private eventsProvider: CoreEventsProvider, private chatHelper: AddonModChatHelperProvider) { this.chatId = navParams.get('chatId'); this.courseId = navParams.get('courseId'); @@ -210,25 +210,13 @@ export class AddonModChatChatPage { const message = this.messages[index]; const prevMessage = index > 0 ? this.messages[index - 1] : null; - message.showDate = this.showDate(message, prevMessage); - message.beep = message.message.substr(0, 5) == 'beep ' && message.message.substr(5).trim(); + this.chatHelper.formatMessage(this.currentUserId, message, prevMessage); if (message.beep && message.beep != this.currentUserId) { this.getUserFullname(message.beep).then((fullname) => { message.beepwho = fullname; }); } - - message.special = message.system || !!message.beep; - - if (message.message.substr(0, 4) == '/me ') { - message.special = true; - message.message = message.message.substr(4).trim(); - } - - message.showUserData = this.showUserData(message, prevMessage); - prevMessage ? - prevMessage.showTail = this.showTail(prevMessage, message) : null; } this.messages[this.messages.length - 1].showTail = true; @@ -267,34 +255,10 @@ export class AddonModChatChatPage { } } - /** - * Check if the user info should be displayed for the current message. - * User data is only displayed if the previous message was from another user. - * - * @param message Current message where to show the user info. - * @param prevMessage Previous message. - * @return Whether user data should be shown. - */ - showUserData(message: any, prevMessage?: any): boolean { - return message.userid != this.currentUserId && - (!prevMessage || prevMessage.userid != message.userid || message.showDate || prevMessage.special); - } - - /** - * Check if a css tail should be shown. - * - * @param message Current message where to show the user info. - * @param nextMessage Next message. - * @return Whether user data should be shown. - */ - showTail(message: any, nextMessage?: any): boolean { - return !nextMessage || nextMessage.userid != message.userid || nextMessage.showDate || nextMessage.special; - } - /** * Convenience function to be called every certain time to fetch chat messages. * - * @return Promised resolved when done. + * @return Promise resolved when done. */ protected fetchMessagesInterval(): Promise { this.logger.debug('Polling for messages'); @@ -324,22 +288,6 @@ export class AddonModChatChatPage { }); } - /** - * Check if the date should be displayed between messages (when the day changes at midnight for example). - * - * @param message New message object. - * @param prevMessage Previous message object. - * @return True if messages are from diferent days, false othetwise. - */ - showDate(message: AddonModChatMessageWithUserData, prevMessage: AddonModChatMessageWithUserData): boolean { - if (!prevMessage) { - return true; - } - - // Check if day has changed. - return !moment(message.timestamp * 1000).isSame(prevMessage.timestamp * 1000, 'day'); - } - /** * Send a message to the chat. * @@ -371,7 +319,6 @@ export class AddonModChatChatPage { this.domUtils.showErrorModalDefault(error, 'addon.mod_chat.errorwhilesendingmessage', true); }).finally(() => { this.sending = false; - this.sendMessageForm.focus(); }); } diff --git a/src/addon/mod/chat/pages/session-messages/session-messages.html b/src/addon/mod/chat/pages/session-messages/session-messages.html index a315ebecf..1383e37e0 100644 --- a/src/addon/mod/chat/pages/session-messages/session-messages.html +++ b/src/addon/mod/chat/pages/session-messages/session-messages.html @@ -8,33 +8,56 @@ -
-
- - {{ message.timestamp * 1000 | coreFormatDate:"strftimedayshort" }} - -
+ + +
+ {{ message.timestamp * 1000 | coreFormatDate:"strftimedayshort" }} +
-
- - {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} {{ 'addon.mod_chat.messageenter' | translate:{$a: message.userfullname} }} - -
+
+ + {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} {{ 'addon.mod_chat.messageenter' | translate:{$a: message.userfullname} }} + -
- - {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} {{ 'addon.mod_chat.messageexit' | translate:{$a: message.userfullname} }} - -
+ + {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} {{ 'addon.mod_chat.messageexit' | translate:{$a: message.userfullname} }} + - - -

-

{{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}

- -

- - -
+ + {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} + {{ 'addon.mod_chat.messagebeepseveryone' | translate:{$a: message.userfullname} }} + + + + {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} + {{ 'addon.mod_chat.messagebeepsyou' | translate:{$a: message.userfullname} }} + + + + {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} + {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepwho} }} + + + + {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} + {{ message.userfullname }} + +
+ + + +

+ +
{{ message.userfullname }}
+ {{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }} +

+ +

+ +

+
+ + + diff --git a/src/addon/mod/chat/pages/session-messages/session-messages.scss b/src/addon/mod/chat/pages/session-messages/session-messages.scss index a8d1e96e8..ec4792983 100644 --- a/src/addon/mod/chat/pages/session-messages/session-messages.scss +++ b/src/addon/mod/chat/pages/session-messages/session-messages.scss @@ -1,9 +1,8 @@ ion-app.app-root page-addon-mod-chat-session-messages { + @include message-page(); + .addon-mod-chat-notice { margin-top: 10px; margin-bottom: 10px; } - .addon-mod-chat-message { - align-items: flex-start; - } } diff --git a/src/addon/mod/chat/pages/session-messages/session-messages.ts b/src/addon/mod/chat/pages/session-messages/session-messages.ts index 1a29a8365..3696a65c9 100644 --- a/src/addon/mod/chat/pages/session-messages/session-messages.ts +++ b/src/addon/mod/chat/pages/session-messages/session-messages.ts @@ -15,8 +15,10 @@ import { Component } from '@angular/core'; import { IonicPage, NavParams } from 'ionic-angular'; import { CoreDomUtilsProvider } from '@providers/utils/dom'; +import { CoreSitesProvider } from '@providers/sites'; +import { CoreUserProvider } from '@core/user/providers/user'; import { AddonModChatProvider, AddonModChatSessionMessageWithUserData } from '../../providers/chat'; -import * as moment from 'moment'; +import { AddonModChatHelperProvider } from '../../providers/helper'; /** * Page that displays list of chat session messages. @@ -28,6 +30,8 @@ import * as moment from 'moment'; }) export class AddonModChatSessionMessagesPage { + currentUserId: number; + protected courseId: number; protected chatId: number; protected sessionStart: number; @@ -36,12 +40,14 @@ export class AddonModChatSessionMessagesPage { protected loaded = false; protected messages: AddonModChatSessionMessageWithUserData[] = []; - constructor(navParams: NavParams, private domUtils: CoreDomUtilsProvider, private chatProvider: AddonModChatProvider) { + constructor(navParams: NavParams, private domUtils: CoreDomUtilsProvider, private chatProvider: AddonModChatProvider, + sitesProvider: CoreSitesProvider, private chatHelper: AddonModChatHelperProvider, private userProvider: CoreUserProvider) { this.courseId = navParams.get('courseId'); this.chatId = navParams.get('chatId'); this.groupId = navParams.get('groupId'); this.sessionStart = navParams.get('sessionStart'); this.sessionEnd = navParams.get('sessionEnd'); + this.currentUserId = sitesProvider.getCurrentSiteUserId(); this.fetchMessages(); } @@ -55,7 +61,7 @@ export class AddonModChatSessionMessagesPage { return this.chatProvider.getSessionMessages(this.chatId, this.sessionStart, this.sessionEnd, this.groupId) .then((messages) => { return this.chatProvider.getMessagesUserData(messages, this.courseId).then((messages) => { - this.messages = messages; + }); }).catch((error) => { this.domUtils.showErrorModalDefault(error, 'core.errorloadingcontent', true); @@ -64,6 +70,25 @@ export class AddonModChatSessionMessagesPage { }); } + /** + * Get the user fullname for a beep. + * + * @param id User Id before parsing. + * @return User fullname. + */ + protected getUserFullname(id: string): Promise { + if (isNaN(parseInt(id, 10))) { + return Promise.resolve(id); + } + + return this.userProvider.getProfile(parseInt(id, 10), this.courseId, true).then((user) => { + return user.fullname; + }).catch(() => { + // Error getting profile. + return id; + }); + } + /** * Refresh session messages. * @@ -77,19 +102,4 @@ export class AddonModChatSessionMessagesPage { }); } - /** - * Check if the date should be displayed between messages (when the day changes at midnight for example). - * - * @param message New message object. - * @param prevMessage Previous message object. - * @return True if messages are from diferent days, false othetwise. - */ - showDate(message: AddonModChatSessionMessageWithUserData, prevMessage: AddonModChatSessionMessageWithUserData): boolean { - if (!prevMessage) { - return true; - } - - // Check if day has changed. - return !moment(message.timestamp * 1000).isSame(prevMessage.timestamp * 1000, 'day'); - } } diff --git a/src/addon/mod/chat/providers/helper.ts b/src/addon/mod/chat/providers/helper.ts new file mode 100644 index 000000000..6e7b7fedf --- /dev/null +++ b/src/addon/mod/chat/providers/helper.ts @@ -0,0 +1,88 @@ +// (C) Copyright 2015 Martin Dougiamas +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { Injectable } from '@angular/core'; +import * as moment from 'moment'; +import AddonModChatMessageWithUserData from './chat'; + +/** + * Helper service that provides some features for quiz. + */ +@Injectable() +export class AddonModChatHelperProvider { + + /** + * Give some format info about messages. + * + * @param currentUserId User Id. + * @param message Message in a discussion. + * @param prevMessage Previous Message in a discussion (if any). + * @return Message with additional info. + */ + formatMessage(currentUserId: number, message: AddonModChatMessageWithUserData, prevMessage?: any): any { + message.showDate = this.showDate(message, prevMessage); + message.beep = message.message.substr(0, 5) == 'beep ' && message.message.substr(5).trim(); + + message.special = message.issystem || message.system || !!message.beep; + + if (message.message.substr(0, 4) == '/me ') { + message.special = true; + message.message = message.message.substr(4).trim(); + } + + message.showUserData = this.showUserData(currentUserId, message, prevMessage); + prevMessage ? + prevMessage.showTail = this.showTail(prevMessage, message) : null; + } + + /** + * Check if the user info should be displayed for the current message. + * User data is only displayed if the previous message was from another user. + * + * @param message Current message where to show the user info. + * @param prevMessage Previous message. + * @return Whether user data should be shown. + */ + protected showUserData(currentUserId: number, message: any, prevMessage?: any): boolean { + return message.userid != currentUserId && + (!prevMessage || prevMessage.userid != message.userid || message.showDate || prevMessage.special); + } + + /** + * Check if a css tail should be shown. + * + * @param message Current message where to show the user info. + * @param nextMessage Next message. + * @return Whether user data should be shown. + */ + protected showTail(message: AddonModChatMessageWithUserData, nextMessage?: AddonModChatMessageWithUserData): boolean { + return !nextMessage || nextMessage.userid != message.userid || nextMessage.showDate || nextMessage.special; + } + + /** + * Check if the date should be displayed between messages (when the day changes at midnight for example). + * + * @param message New message object. + * @param prevMessage Previous message object. + * @return True if messages are from diferent days, false othetwise. + */ + protected showDate(message: AddonModChatMessageWithUserData, prevMessage: AddonModChatMessageWithUserData): boolean { + if (!prevMessage) { + return true; + } + + // Check if day has changed. + return !moment(message.timestamp * 1000).isSame(prevMessage.timestamp * 1000, 'day'); + } +}