EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4565 messages: Use new Ionic accordion component on groups

main
Pau Ferrer Ocaña 2024-04-16 10:06:55 +02:00
parent 7dfb3c13df
commit 404cb9129a
6 changed files with 236 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/calendar/pages/index/index.ts
View File

@ -159,7 +159,7 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
}
/**
* View loaded.
* @inheritdoc
*/
ngOnInit(): void {
this.loadUpcoming = !!CoreNavigator.getRouteBooleanParam('upcoming');

7
src/addons/messages/pages/discussion/discussion.ts
View File

@ -25,6 +25,7 @@ import {
AddonMessages,
AddonMessagesConversationMessageFormatted,
AddonMessagesSendMessageResults,
AddonMessagesUpdateConversationAction,
} from '../../services/messages';
import { AddonMessagesOffline, AddonMessagesOfflineMessagesDBRecordFormatted } from '../../services/messages-offline';
import { AddonMessagesSync, AddonMessagesSyncProvider } from '../../services/messages-sync';
@ -1298,7 +1299,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
CoreEvents.trigger(AddonMessagesProvider.UPDATE_CONVERSATION_LIST_EVENT, {
conversationId: this.conversation.id,
action: 'favourite',
action: AddonMessagesUpdateConversationAction.FAVOURITE,
value: this.conversation.isfavourite,
}, this.siteId);
} catch (error) {
@ -1330,7 +1331,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
CoreEvents.trigger(AddonMessagesProvider.UPDATE_CONVERSATION_LIST_EVENT, {
conversationId: this.conversation.id,
action: 'mute',
action: AddonMessagesUpdateConversationAction.MUTE,
value: this.conversation.ismuted,
}, this.siteId);
@ -1446,7 +1447,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
AddonMessagesProvider.UPDATE_CONVERSATION_LIST_EVENT,
{
conversationId: this.conversation.id,
action: 'delete',
action: AddonMessagesUpdateConversationAction.DELETE,
},
this.siteId,
);

120
src/addons/messages/pages/group-conversations/group-conversations.html
View File

@ -21,7 +21,7 @@
</ion-header>
<ion-content>
<core-split-view>
<ion-refresher slot="fixed" [disabled]="!loaded || !currentListEl" (ionRefresh)="refreshData($event.target)">
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
</ion-refresher>
@ -30,110 +30,46 @@
<ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()" [detail]="true" button>
<ion-icon name="fas-address-book" slot="start" aria-hidden="true" />
<ion-label>
<h2>{{ 'addon.messages.contacts' | translate }}</h2>
<p class="item-heading">{{ 'addon.messages.contacts' | translate }}</p>
</ion-label>
<ion-badge *ngIf="contactRequestsCount > 0" slot="end" aria-hidden="true">{{contactRequestsCount}}</ion-badge>
<span *ngIf="contactRequestsCount > 0" class="sr-only">
{{ 'addon.messages.pendingcontactrequests' | translate:{$a: contactRequestsCount} }}
</span>
<ion-badge *ngIf="contactRequestsCount > 0" slot="end"
[attr.aria-label]="'addon.messages.pendingcontactrequests' | translate:{$a: contactRequestsCount}">
{{contactRequestsCount}}
</ion-badge>
</ion-item>
<!-- Favourite conversations. -->
<ion-item button class="ion-text-wrap divider" (click)="toggle(favourites)"
[attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
[attr.aria-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading"
[detail]="false">
<ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
[class.expandable-status-icon-expanded]="favourites.expanded" />
<ion-accordion-group (ionChange)="accordionGroupChange($event.detail)" #accordionGroup>
<ion-accordion *ngFor="let option of groupConversations" [value]="option.optionName" toggleIconSlot="start">
<ion-item slot="header" class="ion-text-wrap divider">
<ion-label>
<h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2>
<h2>{{ option.titleString | translate }} ({{ option.count }})</h2>
</ion-label>
<ion-badge slot="end" *ngIf="favourites.unread" aria-hidden="true">{{ favourites.unread }}</ion-badge>
<span *ngIf="favourites.unread" class="sr-only">
{{ 'addon.messages.unreadconversations' | translate:{$a: favourites.unread} }}
</span>
<ion-badge slot="end" *ngIf="option.unread"
[attr.aria-label]="'addon.messages.unreadconversations' | translate:{$a: option.unread}">
{{ option.unread }}
</ion-badge>
</ion-item>
<div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist
id="addon-messages-groupconversations-favourite">
<ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: favourites.conversations}" />
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="favourites.canLoadMore" (action)="loadMoreConversations(favourites, $event)"
[error]="favourites.loadMoreError" />
<ion-item class="ion-text-wrap" *ngIf="favourites.conversations && favourites.conversations.length === 0">
<div slot="content">
<ng-container *ngIf="!option.loading">
<ng-container *ngTemplateOutlet="conversationsTemplate;
context: {conversations: option.conversations}" />
<!-- The infinite loading cannot be inside the ng-template,
it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="option.canLoadMore" (action)="loadMoreConversations(option, $event)"
[error]="option.loadMoreError" />
<ion-item class="ion-text-wrap" *ngIf="option.conversations && option.conversations.length === 0">
<ion-label>
<p>{{ 'addon.messages.nofavourites' | translate }}</p>
<p>{{ option.emptyString| translate }}</p>
</ion-label>
</ion-item>
</div>
<ion-item class="ion-text-center" *ngIf="favourites.loading">
</ng-container>
<ion-item class="ion-text-center" *ngIf="option.loading">
<ion-label>
<ion-spinner [attr.aria-label]="'core.loading' | translate" />
</ion-label>
</ion-item>
<!-- Group conversations. -->
<ion-item button class="divider ion-text-wrap" (click)="toggle(group)"
[attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-expanded]="group.expanded"
aria-controls="addon-messages-groupconversations-group" role="heading" [detail]="false">
<ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
[class.expandable-status-icon-expanded]="group.expanded" />
<ion-label>
<h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2>
</ion-label>
<ion-badge slot="end" *ngIf="group.unread" aria-hidden="true">{{ group.unread }}</ion-badge>
<span *ngIf="group.unread" class="sr-only">
{{ 'addon.messages.unreadconversations' | translate:{$a: group.unread} }}
</span>
</ion-item>
<div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist
id="addon-messages-groupconversations-group">
<ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations}" />
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="group.canLoadMore" (action)="loadMoreConversations(group, $event)"
[error]="group.loadMoreError" />
<ion-item class="ion-text-wrap" *ngIf="group.conversations && group.conversations.length === 0">
<ion-label>
<p>{{ 'addon.messages.nogroupconversations' | translate }}</p>
</ion-label>
</ion-item>
</div>
<ion-item class="ion-text-center" *ngIf="group.loading">
<ion-label>
<ion-spinner [attr.aria-label]="'core.loading' | translate" />
</ion-label>
</ion-item>
<ion-item button class="divider ion-text-wrap" (click)="toggle(individual)"
[attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
[attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading"
[detail]="false">
<ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
[class.expandable-status-icon-expanded]="individual.expanded" />
<ion-label>
<h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
</ion-label>
<ion-badge slot="end" *ngIf="individual.unread" aria-hidden="true">{{ individual.unread }}</ion-badge>
<span *ngIf="individual.unread" class="sr-only">
{{ 'addon.messages.unreadconversations' | translate:{$a: individual.unread} }}
</span>
</ion-item>
<div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist
id="addon-messages-groupconversations-individual">
<ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: individual.conversations}" />
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="individual.canLoadMore" (action)="loadMoreConversations(individual, $event)"
[error]="individual.loadMoreError" />
<ion-item class="ion-text-wrap" *ngIf="individual.conversations && individual.conversations.length === 0">
<ion-label>
<p>{{ 'addon.messages.noindividualconversations' | translate }}</p>
</ion-label>
</ion-item>
</div>
<ion-item class="ion-text-center" *ngIf="individual.loading">
<ion-label>
<ion-spinner [attr.aria-label]="'core.loading' | translate" />
</ion-label>
</ion-item>
</ion-accordion>
</ion-accordion-group>
</ion-list>
</core-loading>
</core-split-view>

253
src/addons/messages/pages/group-conversations/group-conversations.ts
View File

@ -12,8 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { IonContent } from '@ionic/angular';
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { AccordionGroupChangeEventDetail, IonAccordionGroup, IonContent } from '@ionic/angular';
import { CoreEventObserver, CoreEvents } from '@singletons/events';
import { CoreSites } from '@services/sites';
import {
@ -21,6 +21,8 @@ import {
AddonMessagesConversationFormatted,
AddonMessages,
AddonMessagesNewMessagedEventData,
AddonMessagesUnreadConversationCountsEventData,
AddonMessagesUpdateConversationAction,
} from '../../services/messages';
import {
AddonMessagesOffline,
@ -40,6 +42,12 @@ import { CoreMainMenuDeepLinkManager } from '@features/mainmenu/classes/deep-lin
import { CorePlatform } from '@services/platform';
import { CoreSplitViewComponent } from '@components/split-view/split-view';
const enum AddonMessagesGroupConversationOptionNames {
FAVOURITES = 'favourites',
GROUP = 'group',
INDIVIDUAL = 'individual',
}
/**
* Page that displays the list of conversations, including group conversations.
*/
@ -51,43 +59,49 @@ import { CoreSplitViewComponent } from '@components/split-view/split-view';
export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
@ViewChild(CoreSplitViewComponent) splitView!: CoreSplitViewComponent;
@ViewChild(IonContent) content?: IonContent;
@ViewChild('favlist') favListEl?: ElementRef;
@ViewChild('grouplist') groupListEl?: ElementRef;
@ViewChild('indlist') indListEl?: ElementRef;
@ViewChild('accordionGroup', { static: true }) accordionGroup!: IonAccordionGroup;
loaded = false;
loadingMessage: string;
selectedConversationId?: number;
selectedUserId?: number;
contactRequestsCount = 0;
favourites: AddonMessagesGroupConversationOption = {
groupConversations: AddonMessagesGroupConversationOption[] = [
{
optionName: AddonMessagesGroupConversationOptionNames.FAVOURITES,
titleString: 'core.favourites',
emptyString: 'addon.messages.nofavourites',
type: undefined,
favourites: true,
count: 0,
unread: 0,
conversations: [],
};
group: AddonMessagesGroupConversationOption = {
},
{
optionName: AddonMessagesGroupConversationOptionNames.GROUP,
titleString: 'addon.messages.groupconversations',
emptyString: 'addon.messages.nogroupconversations',
type: AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_GROUP,
favourites: false,
count: 0,
unread: 0,
conversations: [],
};
individual: AddonMessagesGroupConversationOption = {
},
{
optionName: AddonMessagesGroupConversationOptionNames.INDIVIDUAL,
titleString: 'addon.messages.individualconversations',
emptyString: 'addon.messages.noindividualconversations',
type: AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_INDIVIDUAL,
favourites: false,
count: 0,
unread: 0,
conversations: [],
};
},
];
typeGroup = AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_GROUP;
currentListEl?: HTMLElement;
protected siteId: string;
protected currentUserId: number;
@ -100,6 +114,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
protected updateConversationListObserver: CoreEventObserver;
protected contactRequestsCountObserver: CoreEventObserver;
protected memberInfoObserver: CoreEventObserver;
protected firstExpand = false;
constructor(
protected route: ActivatedRoute,
@ -114,9 +129,9 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
(data) => {
// Check if the new message belongs to the option that is currently expanded.
const expandedOption = this.getExpandedOption();
const messageOption = this.getConversationOption(data);
const messageOptionName = this.getConversationOptionName(data);
if (expandedOption != messageOption) {
if (expandedOption?.optionName !== messageOptionName) {
return; // Message doesn't belong to current list, stop.
}
@ -155,8 +170,9 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
}
// Sort the affected list.
const option = this.getConversationOption(conversation);
option.conversations = AddonMessages.sortConversations(option.conversations || []);
const optionName = this.getConversationOptionName(conversation);
const option = this.getConversationGroupByName(optionName);
option.conversations = AddonMessages.sortConversations(option.conversations);
if (isNewer) {
// The last message is newer than the previous one, scroll to top to keep viewing the conversation.
@ -209,11 +225,11 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
this.updateConversationListObserver = CoreEvents.on(
AddonMessagesProvider.UPDATE_CONVERSATION_LIST_EVENT,
(data) => {
if (data && data.action == 'mute') {
if (data?.action === AddonMessagesUpdateConversationAction.MUTE) {
// If the conversation is displayed, change its muted value.
const expandedOption = this.getExpandedOption();
if (expandedOption && expandedOption.conversations) {
if (expandedOption?.conversations) {
const conversation = this.findConversation(data.conversationId, undefined, expandedOption);
if (conversation) {
conversation.ismuted = !!data.value;
@ -233,7 +249,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
this.pushObserver = CorePushNotificationsDelegate.on<CorePushNotificationsNotificationBasicData>('receive')
.subscribe((notification) => {
// New message received. If it's from current site, refresh the data.
if (CoreUtils.isFalseOrZero(notification.notif) && notification.site == this.siteId) {
if (CoreUtils.isFalseOrZero(notification.notif) && notification.site === this.siteId) {
// Don't refresh unread counts, it's refreshed from the main menu handler in this case.
this.refreshData(undefined, false);
}
@ -243,9 +259,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
this.cronObserver = CoreEvents.on(
AddonMessagesProvider.UNREAD_CONVERSATION_COUNTS_EVENT,
(data) => {
this.favourites.unread = data.favourites;
this.individual.unread = data.individual + data.self; // Self is only returned if it's not favourite.
this.group.unread = data.group;
this.setCounts(data, 'unread');
},
this.siteId,
);
@ -269,8 +283,8 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
}
const expandedOption = this.getExpandedOption();
if (expandedOption == this.individual || expandedOption == this.favourites) {
if (!expandedOption.conversations || expandedOption.conversations.length <= 0) {
if (expandedOption?.optionName === AddonMessagesGroupConversationOptionNames.GROUP ||
!expandedOption?.conversations.length) {
return;
}
@ -278,14 +292,13 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
if (conversation) {
conversation.isblocked = data.userBlocked;
}
}
},
this.siteId,
);
}
/**
* Component loaded.
* @inheritdoc
*/
async ngOnInit(): Promise<void> {
this.route.queryParams.subscribe(async (params) => {
@ -305,17 +318,13 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
if (!this.selectedConversationId && !this.selectedUserId && CoreScreen.isTablet) {
// Load the first conversation.
let conversation: AddonMessagesConversationForList;
const expandedOption = this.getExpandedOption();
if (expandedOption && expandedOption.conversations.length) {
conversation = expandedOption.conversations[0];
const conversation = expandedOption?.conversations[0];
if (conversation) {
await this.gotoConversation(conversation.id);
}
}
}
// Treat deep link now that the conversation route has been loaded if needed.
deepLinkManager.treatLink();
@ -341,22 +350,19 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
try {
await Promise.all(promises);
// The expanded status hasn't been initialized. Do it now.
if (this.favourites.expanded === undefined && (this.selectedConversationId || this.selectedUserId)) {
if (!this.firstExpand && (this.selectedConversationId || this.selectedUserId)) {
// A certain conversation should be opened.
// We don't know which option it belongs to, so we need to fetch the data for all of them.
const promises: Promise<void>[] = [];
promises.push(this.fetchDataForOption(this.favourites, false));
promises.push(this.fetchDataForOption(this.group, false));
promises.push(this.fetchDataForOption(this.individual, false));
const promises = this.groupConversations.map((option) =>
this.fetchDataForOption(option, false));
await Promise.all(promises);
// All conversations have been loaded, find the one we need to load and expand its option.
const conversation = this.findConversation(this.selectedConversationId, this.selectedUserId);
if (conversation) {
const option = this.getConversationOption(conversation);
const optionName = this.getConversationOptionName(conversation);
const option = this.getConversationGroupByName(optionName);
await this.expandOption(option);
@ -376,18 +382,24 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
/**
* Fetch data for the expanded option.
*
* @returns Promise resolved when done.
*/
protected async fetchDataForExpandedOption(): Promise<void> {
if (this.favourites.expanded === undefined) {
if (!this.firstExpand) {
// Calculate which option should be expanded initially.
this.favourites.expanded = this.favourites.count != 0 && !this.group.unread && !this.individual.unread;
this.group.expanded = !this.favourites.expanded && this.group.count != 0 && !this.individual.unread;
this.individual.expanded = !this.favourites.expanded && !this.group.expanded;
let expandOption = this.groupConversations.find((option) => option.unread);
if (!expandOption) {
expandOption = this.groupConversations.find((option) => option.count > 0);
}
this.loadCurrentListElement();
if (!expandOption) {
expandOption = this.getConversationGroupByName(AddonMessagesGroupConversationOptionNames.INDIVIDUAL);
}
this.accordionGroup.value = expandOption.optionName;
this.firstExpand = true;
}
const expandedOption = this.getExpandedOption();
@ -418,8 +430,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
conversations: <AddonMessagesConversationForList[]> [],
canLoadMore: false,
};
let offlineMessages:
AddonMessagesOfflineAnyMessagesFormatted[] = [];
let offlineMessages: AddonMessagesOfflineAnyMessagesFormatted[] = [];
// Get the conversations and, if needed, the offline messages. Always try to get the latest data.
promises.push(AddonMessages.invalidateConversations(this.siteId).then(async () => {
@ -469,9 +480,36 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
await AddonMessages.invalidateConversationCounts(this.siteId);
const counts = await AddonMessages.getConversationCounts(this.siteId);
this.favourites.count = counts.favourites;
this.individual.count = counts.individual + counts.self; // Self is only returned if it's not favourite.
this.group.count = counts.group;
this.setCounts(counts);
}
/**
* Set conversation counts.
*
* @param counts Counts to set.
* @param valueToSet Value to set count or unread.
*/
protected setCounts(
counts: AddonMessagesUnreadConversationCountsEventData,
valueToSet: 'count' | 'unread' = 'count',
): void {
this.getConversationGroupByName(AddonMessagesGroupConversationOptionNames.FAVOURITES)[valueToSet] = counts.favourites;
this.getConversationGroupByName(AddonMessagesGroupConversationOptionNames.INDIVIDUAL)[valueToSet] =
counts.individual + counts.self; // Self is only returned if it's not favourite.
this.getConversationGroupByName(AddonMessagesGroupConversationOptionNames.GROUP)[valueToSet] = counts.group;
}
/**
* Get a conversation group by its name.
*
* @param name Name of the group.
* @returns The conversation group.
*/
protected getConversationGroupByName(name: AddonMessagesGroupConversationOptionNames): AddonMessagesGroupConversationOption {
const option = this.groupConversations.find((group) => group.optionName === name);
// Option should always be defined.
return option ?? this.groupConversations[0];
}
/**
@ -491,16 +529,19 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
if (conversationId) {
const conversations: AddonMessagesConversationForList[] = option
? option.conversations
: (this.favourites.conversations.concat(this.group.conversations).concat(this.individual.conversations));
: this.groupConversations.flatMap((option) => option.conversations);
return conversations.find((conv) => conv.id == conversationId);
return conversations.find((conv) => conv.id === conversationId);
}
const conversations = option
? option.conversations
: this.favourites.conversations.concat(this.individual.conversations);
let conversations = option?.conversations;
if (!conversations) {
// Only check on favourites and individual conversations.
conversations = this.getConversationGroupByName(AddonMessagesGroupConversationOptionNames.FAVOURITES).conversations
.concat(this.getConversationGroupByName(AddonMessagesGroupConversationOptionNames.INDIVIDUAL).conversations);
}
return conversations.find((conv) => conv.userid == userId);
return conversations.find((conv) => conv.userid === userId);
}
/**
@ -509,12 +550,8 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
* @returns Option currently expanded.
*/
protected getExpandedOption(): AddonMessagesGroupConversationOption | undefined {
if (this.favourites.expanded) {
return this.favourites;
} else if (this.group.expanded) {
return this.group;
} else if (this.individual.expanded) {
return this.individual;
if (this.accordionGroup.value) {
return this.getConversationGroupByName(this.accordionGroup.value as AddonMessagesGroupConversationOptionNames);
}
}
@ -572,7 +609,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
option.loadMoreError = true;
}
infiniteComplete && infiniteComplete();
infiniteComplete?.();
}
/**
@ -617,13 +654,13 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
imageurl: message.conversation?.imageurl || '',
};
if (this.getConversationOption(conversation) == option) {
if (this.getConversationOptionName(conversation) === option.optionName) {
// Message belongs to current option, add the conversation.
this.addLastOfflineMessage(conversation, message);
this.addOfflineConversation(conversation);
this.addOfflineConversation(conversation, option);
}
}
} else if (option.type == AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_INDIVIDUAL) {
} else if (option.type === AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_INDIVIDUAL) {
// It's a new conversation. Check if we already created it (there is more than one message for the same user).
const conversation = this.findConversation(undefined, message.touserid, option);
@ -655,7 +692,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
};
this.addLastOfflineMessage(conversation, message);
this.addOfflineConversation(conversation);
this.addOfflineConversation(conversation, option);
return;
}));
@ -670,9 +707,12 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
* Add an offline conversation into the right list of conversations.
*
* @param conversation Offline conversation to add.
* @param option Option where to add the conversation.
*/
protected addOfflineConversation(conversation: AddonMessagesConversationForList): void {
const option = this.getConversationOption(conversation);
protected addOfflineConversation(
conversation: AddonMessagesConversationForList,
option: AddonMessagesGroupConversationOption,
): void {
option.conversations.unshift(conversation);
}
@ -693,23 +733,23 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
}
/**
* Given a conversation, return its option (favourites, group, individual).
* Given a conversation, return its option name.
*
* @param conversation Conversation to check.
* @returns Option object.
* @returns Option name.
*/
protected getConversationOption(
protected getConversationOptionName(
conversation: AddonMessagesConversationForList | AddonMessagesNewMessagedEventData,
): AddonMessagesGroupConversationOption {
): AddonMessagesGroupConversationOptionNames {
if (conversation.isfavourite) {
return this.favourites;
return AddonMessagesGroupConversationOptionNames.FAVOURITES;
}
if (conversation.type == AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_GROUP) {
return this.group;
if (conversation.type === AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_GROUP) {
return AddonMessagesGroupConversationOptionNames.GROUP;
}
return this.individual;
return AddonMessagesGroupConversationOptionNames.INDIVIDUAL;
}
/**
@ -727,30 +767,29 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
try {
await this.fetchData(refreshUnreadCounts);
} finally {
if (refresher) {
refresher?.complete();
}
}
}
}
/**
* Toogle the visibility of an option (expand/collapse).
*
* @param option The option to expand/collapse.
* @param ev The event of the accordion.
*/
toggle(option: AddonMessagesGroupConversationOption): void {
if (option.expanded) {
// Already expanded, close it.
option.expanded = false;
this.loadCurrentListElement();
} else {
accordionGroupChange(ev: AccordionGroupChangeEventDetail): void {
const optionName = ev.value as AddonMessagesGroupConversationOptionNames;
if (!optionName) {
return;
}
const option = this.getConversationGroupByName(optionName);
// Pass getCounts=true to update the counts everytime the user expands an option.
this.expandOption(option, true).catch((error) => {
CoreDomUtils.showErrorModalDefault(error, 'addon.messages.errorwhileretrievingdiscussions', true);
});
}
}
/**
* Expand a certain option.
@ -761,40 +800,18 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
*/
protected async expandOption(option: AddonMessagesGroupConversationOption, getCounts = false): Promise<void> {
// Collapse all and expand the right one.
this.favourites.expanded = false;
this.group.expanded = false;
this.individual.expanded = false;
option.expanded = true;
option.loading = true;
this.accordionGroup.value = option.optionName;
try {
await this.fetchDataForOption(option, false, getCounts);
this.loadCurrentListElement();
} catch (error) {
option.expanded = false;
this.accordionGroup.value = undefined;
throw error;
} finally {
option.loading = false;
}
}
/**
* Load the current list element based on the expanded list.
*/
protected loadCurrentListElement(): void {
if (this.favourites.expanded) {
this.currentListEl = this.favListEl && this.favListEl.nativeElement;
} else if (this.group.expanded) {
this.currentListEl = this.groupListEl && this.groupListEl.nativeElement;
} else if (this.individual.expanded) {
this.currentListEl = this.indListEl && this.indListEl.nativeElement;
} else {
this.currentListEl = undefined;
}
}
/**
@ -805,7 +822,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
}
/**
* Page destroyed.
* @inheritdoc
*/
ngOnDestroy(): void {
this.newMessagesObserver?.off();
@ -825,11 +842,13 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
* Conversation options.
*/
export type AddonMessagesGroupConversationOption = {
optionName: AddonMessagesGroupConversationOptionNames;
titleString: string;
emptyString: string;
type?: number; // Option type.
favourites: boolean; // Whether it contains favourites conversations.
count: number; // Number of conversations.
unread?: number; // Number of unread conversations.
expanded?: boolean; // Whether the option is currently expanded.
loading?: boolean; // Whether the option is being loaded.
canLoadMore?: boolean; // Whether it can load more data.
loadMoreError?: boolean; // Whether there was an error loading more conversations.

50
src/addons/messages/services/messages.ts
View File

@ -35,8 +35,6 @@ import { CoreWSError } from '@classes/errors/wserror';
import { AddonNotificationsPreferencesNotificationProcessorState } from '@addons/notifications/services/notifications';
import { CoreSiteWSPreSets } from '@classes/sites/authenticated-site';
const ROOT_CACHE_KEY = 'mmaMessages:';
declare module '@singletons/events' {
/**
@ -57,12 +55,20 @@ declare module '@singletons/events' {
}
export const enum AddonMessagesUpdateConversationAction {
MUTE = 'mute',
FAVOURITE = 'favourite',
DELETE = 'delete',
}
/**
* Service to handle messages.
*/
@Injectable({ providedIn: 'root' })
export class AddonMessagesProvider {
protected static readonly ROOT_CACHE_KEY = 'mmaMessages:';
static readonly NEW_MESSAGE_EVENT = 'addon_messages_new_message_event';
static readonly READ_CHANGED_EVENT = 'addon_messages_read_changed_event';
static readonly OPEN_CONVERSATION_EVENT = 'addon_messages_open_conversation_event'; // Notify a conversation should be opened.
@ -396,7 +402,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForBlockedContacts(userId: number): string {
return ROOT_CACHE_KEY + 'blockedContacts:' + userId;
return AddonMessagesProvider.ROOT_CACHE_KEY + 'blockedContacts:' + userId;
}
/**
@ -405,7 +411,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForContacts(): string {
return ROOT_CACHE_KEY + 'contacts';
return AddonMessagesProvider.ROOT_CACHE_KEY + 'contacts';
}
/**
@ -414,7 +420,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForUserContacts(): string {
return ROOT_CACHE_KEY + 'userContacts';
return AddonMessagesProvider.ROOT_CACHE_KEY + 'userContacts';
}
/**
@ -423,7 +429,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForContactRequests(): string {
return ROOT_CACHE_KEY + 'contactRequests';
return AddonMessagesProvider.ROOT_CACHE_KEY + 'contactRequests';
}
/**
@ -432,7 +438,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForContactRequestsCount(): string {
return ROOT_CACHE_KEY + 'contactRequestsCount';
return AddonMessagesProvider.ROOT_CACHE_KEY + 'contactRequestsCount';
}
/**
@ -442,7 +448,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
getCacheKeyForDiscussion(userId: number): string {
return ROOT_CACHE_KEY + 'discussion:' + userId;
return AddonMessagesProvider.ROOT_CACHE_KEY + 'discussion:' + userId;
}
/**
@ -452,7 +458,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForMessageCount(userId: number): string {
return ROOT_CACHE_KEY + 'count:' + userId;
return AddonMessagesProvider.ROOT_CACHE_KEY + 'count:' + userId;
}
/**
@ -461,7 +467,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForUnreadConversationCounts(): string {
return ROOT_CACHE_KEY + 'unreadConversationCounts';
return AddonMessagesProvider.ROOT_CACHE_KEY + 'unreadConversationCounts';
}
/**
@ -470,7 +476,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForDiscussions(): string {
return ROOT_CACHE_KEY + 'discussions';
return AddonMessagesProvider.ROOT_CACHE_KEY + 'discussions';
}
/**
@ -481,7 +487,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForConversation(userId: number, conversationId: number): string {
return ROOT_CACHE_KEY + 'conversation:' + userId + ':' + conversationId;
return AddonMessagesProvider.ROOT_CACHE_KEY + 'conversation:' + userId + ':' + conversationId;
}
/**
@ -492,7 +498,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForConversationBetweenUsers(userId: number, otherUserId: number): string {
return ROOT_CACHE_KEY + 'conversationBetweenUsers:' + userId + ':' + otherUserId;
return AddonMessagesProvider.ROOT_CACHE_KEY + 'conversationBetweenUsers:' + userId + ':' + otherUserId;
}
/**
@ -503,7 +509,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForConversationMembers(userId: number, conversationId: number): string {
return ROOT_CACHE_KEY + 'conversationMembers:' + userId + ':' + conversationId;
return AddonMessagesProvider.ROOT_CACHE_KEY + 'conversationMembers:' + userId + ':' + conversationId;
}
/**
@ -514,7 +520,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForConversationMessages(userId: number, conversationId: number): string {
return ROOT_CACHE_KEY + 'conversationMessages:' + userId + ':' + conversationId;
return AddonMessagesProvider.ROOT_CACHE_KEY + 'conversationMessages:' + userId + ':' + conversationId;
}
/**
@ -535,7 +541,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForConversationCounts(): string {
return ROOT_CACHE_KEY + 'conversationCounts';
return AddonMessagesProvider.ROOT_CACHE_KEY + 'conversationCounts';
}
/**
@ -546,7 +552,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForMemberInfo(userId: number, otherUserId: number): string {
return ROOT_CACHE_KEY + 'memberInfo:' + userId + ':' + otherUserId;
return AddonMessagesProvider.ROOT_CACHE_KEY + 'memberInfo:' + userId + ':' + otherUserId;
}
/**
@ -556,7 +562,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getCacheKeyForSelfConversation(userId: number): string {
return ROOT_CACHE_KEY + 'selfconversation:' + userId;
return AddonMessagesProvider.ROOT_CACHE_KEY + 'selfconversation:' + userId;
}
/**
@ -575,7 +581,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getRootCacheKeyForConversations(): string {
return ROOT_CACHE_KEY + 'conversations:';
return AddonMessagesProvider.ROOT_CACHE_KEY + 'conversations:';
}
/**
@ -1388,7 +1394,7 @@ export class AddonMessagesProvider {
* @returns Cache key.
*/
protected getMessagePreferencesCacheKey(): string {
return ROOT_CACHE_KEY + 'messagePreferences';
return AddonMessagesProvider.ROOT_CACHE_KEY + 'messagePreferences';
}
/**
@ -2706,7 +2712,7 @@ export class AddonMessagesProvider {
* @param conversations Array of conversations.
* @returns Conversations sorted with most recent last.
*/
sortConversations(conversations: AddonMessagesConversationFormatted[]): AddonMessagesConversationFormatted[] {
sortConversations(conversations: AddonMessagesConversationFormatted[] = []): AddonMessagesConversationFormatted[] {
return conversations.sort((a, b) => {
const timeA = Number(a.lastmessagedate);
const timeB = Number(b.lastmessagedate);
@ -3684,7 +3690,7 @@ export type AddonMessagesNewMessagedEventData = {
*/
export type AddonMessagesUpdateConversationListEventData = {
conversationId: number;
action: string;
action: AddonMessagesUpdateConversationAction;
value?: boolean;
};

BIN
src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB