MOBILE-2620 messages: Link to contacts and search from conversations

src/addon/messages/pages/group-conversations/group-conversations.html

@@ -2,8 +2,8 @@
     <ion-navbar core-back-button>
         <ion-title>{{ 'addon.messages.messages' | translate }}</ion-title>
         <ion-buttons end>
-            <button ion-button icon-only (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate">
+            <button ion-button icon-only (click)="gotoSearch()" [attr.aria-label]="'addon.messages.search' | translate">
-                <ion-icon name="person"></ion-icon> <!-- @todo: Display number of pending requests. -->
+                <ion-icon name="search"></ion-icon>
             </button>
             <button ion-button icon-only (click)="gotoSettings($event)" [attr.aria-label]="'addon.messages.messagepreferences' | translate">
                 <ion-icon name="cog"></ion-icon>
@@ -19,34 +19,13 @@
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
 
-        <core-search-box *ngIf="search.enabled" (onSubmit)="searchMessage($event)" (onClear)="clearSearch($event)" [placeholder]=" 'addon.messages.message' | translate" autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded"></core-search-box>
-
         <core-loading [hideUntil]="loaded" [message]="loadingMessage">
-
+            <a ion-item text-wrap (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate">
-            <!-- Search results. -->
+                <ion-icon name="person" item-start></ion-icon>
-            <ion-list *ngIf="search.showResults" no-margin>
+                <h2>{{ 'addon.messages.contacts' | translate }}</h2>
-                <ion-item-divider color="light">
+                <ion-badge *ngIf="contactRequestsCount > 0" item-end>{{contactRequestsCount}}</ion-badge>
-                    <h2>{{ 'core.searchresults' | translate }}</h2>
+            </a>
-                    <ion-note item-end>{{ search.results.length }}</ion-note>
+            <ion-list>
-                </ion-item-divider>
-
-                <a ion-item text-wrap *ngFor="let result of search.results" [title]="result.fullname" (click)="gotoConversation(result.conversationid, result.userid, result.messageid)" [class.core-split-item-selected]="(result.conversationid && result.conversationid == selectedConversationId) || (result.userid && result.userid == selectedUserId)" detail-none>
-                    <ion-avatar core-user-avatar [user]="result" [linkProfile]="false" item-start></ion-avatar>
-                    <h2>
-                        <p>
-                            <core-format-text [text]="result.fullname"></core-format-text>
-                            <core-icon name="fa-ban" *ngIf="result.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate"></core-icon>
-                        </p>
-                        <ion-note *ngIf="result.lastmessagedate > 0">
-                            {{result.lastmessagedate | coreDateDayOrTime}}
-                        </ion-note>
-                    </h2>
-                    <p><core-format-text clean="true" singleLine="true" [text]="result.lastmessage" class="addon-message-last-message"></core-format-text></p>
-                </a>
-            </ion-list>
-
-            <!-- Conversations. -->
-            <ion-list *ngIf="!search.showResults">
                 <!-- Favourite conversations. -->
                 <ion-item-divider color="light" text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)" class="core-expandable">
                     <core-icon *ngIf="!favourites.expanded" name="fa-caret-right" item-start></core-icon>
@@ -94,9 +73,6 @@
                     </ion-item>
                 </div>
             </ion-list>
-
-            <!-- Search didn't get any result. -->
-            <core-empty-box *ngIf="(!search.results || search.results.length <= 0) && search.showResults" icon="search" [message]="'core.noresults' | translate"></core-empty-box>
         </core-loading>
     </ion-content>
 </core-split-view>

src/addon/messages/pages/group-conversations/group-conversations.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
-import { IonicPage, Platform, NavParams, Content } from 'ionic-angular';
+import { IonicPage, Platform, NavController, NavParams, Content } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider } from '@providers/sites';
@@ -21,7 +21,6 @@ import { AddonMessagesProvider } from '../../providers/messages';
 import { AddonMessagesOfflineProvider } from '../../providers/messages-offline';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreUtilsProvider } from '@providers/utils/utils';
-import { CoreAppProvider } from '@providers/app';
 import { AddonPushNotificationsDelegate } from '@addon/pushnotifications/providers/delegate';
 import { CoreSplitViewComponent } from '@components/split-view/split-view';
 import { CoreUserProvider } from '@core/user/providers/user';
@@ -42,13 +41,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
     loadingMessage: string;
     selectedConversationId: number;
     selectedUserId: number;
-    search = {
+    contactRequestsCount = 0;
-        enabled: false,
-        showResults: false,
-        results: [],
-        loading: '',
-        text: ''
-    };
     favourites: any = {
         type: null,
         favourites: true
@@ -74,14 +67,14 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
     protected cronObserver: any;
     protected openConversationObserver: any;
     protected updateConversationListObserver: any;
+    protected contactRequestsCountObserver: any;
 
     constructor(private eventsProvider: CoreEventsProvider, sitesProvider: CoreSitesProvider, translate: TranslateService,
             private messagesProvider: AddonMessagesProvider, private domUtils: CoreDomUtilsProvider, navParams: NavParams,
-            private appProvider: CoreAppProvider, platform: Platform, utils: CoreUtilsProvider,
+            private navCtrl: NavController, platform: Platform, utils: CoreUtilsProvider,
             pushNotificationsDelegate: AddonPushNotificationsDelegate, private messagesOffline: AddonMessagesOfflineProvider,
             private userProvider: CoreUserProvider) {
 
-        this.search.loading =  translate.instant('core.searching');
         this.loadingString = translate.instant('core.loading');
         this.siteId = sitesProvider.getCurrentSiteId();
         this.currentUserId = sitesProvider.getCurrentSiteUserId();
@@ -166,6 +159,11 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
                 this.refreshData();
             }
         });
+
+        // Update the contact requests badge.
+        this.contactRequestsCountObserver = eventsProvider.on(AddonMessagesProvider.CONTACT_REQUESTS_COUNT_EVENT, (data) => {
+            this.contactRequestsCount = data.count;
+        }, this.siteId);
     }
 
     /**
@@ -195,6 +193,8 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
                 }
             }
         });
+
+        this.messagesProvider.getContactRequestsCount(this.siteId); // Badge is updated by the observer.
     }
 
     /**
@@ -204,7 +204,6 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
      */
     protected fetchData(): Promise<any> {
         this.loadingMessage = this.loadingString;
-        this.search.enabled = this.messagesProvider.isSearchMessagesEnabled();
 
         // Load the first conversations of each type.
         const promises = [];
@@ -481,6 +480,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
                 if (refresher) {
                     // Actions to take if refresh comes from the user.
                     this.eventsProvider.trigger(AddonMessagesProvider.READ_CHANGED_EVENT, undefined, this.siteId);
+                    this.messagesProvider.refreshContactRequestsCount(this.siteId);
                     refresher.complete();
                 }
             });
@@ -515,36 +515,10 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
     }
 
     /**
-     * Clear search and show conversations again.
+     * Navigate to the search page.
      */
-    clearSearch(): void {
+    gotoSearch(): void {
-        this.loaded = false;
+        this.navCtrl.push('AddonMessagesSearchPage');
-        this.search.showResults = false;
-        this.search.text = ''; // Reset searched string.
-        this.fetchData().finally(() => {
-            this.loaded = true;
-        });
-    }
-
-    /**
-     * Search messages cotaining text.
-     *
-     * @param  {string}       query Text to search for.
-     * @return {Promise<any>}       Resolved when done.
-     */
-    searchMessage(query: string): Promise<any> {
-        this.appProvider.closeKeyboard();
-        this.loaded = false;
-        this.loadingMessage = this.search.loading;
-
-        return this.messagesProvider.searchMessages(query).then((searchResults) => {
-            this.search.showResults = true;
-            this.search.results = searchResults;
-        }).catch((error) => {
-            this.domUtils.showErrorModalDefault(error, 'addon.messages.errorwhileretrievingmessages', true);
-        }).finally(() => {
-            this.loaded = true;
-        });
     }
 
     /**
@@ -558,5 +532,6 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
         this.cronObserver && this.cronObserver.off();
         this.openConversationObserver && this.openConversationObserver.off();
         this.updateConversationListObserver && this.updateConversationListObserver.off();
+        this.contactRequestsCountObserver && this.contactRequestsCountObserver.off();
     }
 }