MOBILE-2620 messages: Combined search page
This commit is contained in:
Albert Gasset
parent
c5e4c403c6
commit
481351c682
56
src/addon/messages/pages/search/search.html
Normal file
56
src/addon/messages/pages/search/search.html
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<ion-header>
|
||||||
|
<ion-navbar core-back-button>
|
||||||
|
<ion-title>{{ 'addon.messages.searchcombined' | translate }}</ion-title>
|
||||||
|
<ion-buttons end>
|
||||||
|
<!-- Add an empty context menu so discussion page can add items in split view, otherwise the menu disappears in some cases. -->
|
||||||
|
<core-context-menu></core-context-menu>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-navbar>
|
||||||
|
</ion-header>
|
||||||
|
<core-split-view>
|
||||||
|
<ion-content>
|
||||||
|
<core-search-box (onSubmit)="search($event)" (onClear)="clearSearch($event)" [disabled]="disableSearch" autocorrect="off" [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1"></core-search-box>
|
||||||
|
<core-loading [hideUntil]="!displaySearching" [message]="'core.searching' | translate">
|
||||||
|
<ion-list *ngIf="displayResults">
|
||||||
|
<ng-container *ngTemplateOutlet="resultsTemplate; context: {item: contacts}"></ng-container>
|
||||||
|
<ng-container *ngTemplateOutlet="resultsTemplate; context: {item: nonContacts}"></ng-container>
|
||||||
|
<ng-container *ngTemplateOutlet="resultsTemplate; context: {item: messages}"></ng-container>
|
||||||
|
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
|
||||||
|
<core-infinite-loading [enabled]="messages.canLoadMore" (action)="search(query, 'messages', $event)" [error]="messages.loadMoreError"></core-infinite-loading>
|
||||||
|
</ion-list>
|
||||||
|
</core-loading>
|
||||||
|
</ion-content>
|
||||||
|
</core-split-view>
|
||||||
|
|
||||||
|
<!-- Template to render a list of results -->
|
||||||
|
<ng-template #resultsTemplate let-item="item">
|
||||||
|
<ion-item-divider color="light" text-wrap>{{ item.titleString | translate }}</ion-item-divider>
|
||||||
|
<ion-item text-wrap *ngIf="item.results.length == 0">
|
||||||
|
{{ item.emptyString | translate }}
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<!-- List of results -->
|
||||||
|
<a ion-item text-wrap *ngFor="let result of item.results" [title]="result.fullname" (click)="openDiscussion(result.id)" [class.core-split-item-selected]="result.id == selectedUserId" detail-none>
|
||||||
|
<ion-avatar item-start core-user-avatar [user]="result" [checkOnline]="true" [linkProfile]="false"></ion-avatar>
|
||||||
|
<h2>
|
||||||
|
<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>
|
||||||
|
</h2>
|
||||||
|
<ion-note *ngIf="result.lastmessagedate > 0">
|
||||||
|
{{result.lastmessagedate | coreDateDayOrTime}}
|
||||||
|
</ion-note>
|
||||||
|
<core-format-text *ngIf="result.lastmessage" clean="true" singleLine="true" [text]="result.lastmessage"></core-format-text>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Load more button for contacts and non-contacts -->
|
||||||
|
<ng-container *ngIf="item.type != 'messages'">
|
||||||
|
<div padding-horizontal *ngIf="item.canLoadMore && !item.loadingMore">
|
||||||
|
<button ion-button block color="light" (click)="search(query, item.type)">
|
||||||
|
{{ 'core.loadmore' | translate }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="item.loadingMore" padding text-center>
|
||||||
|
<ion-spinner></ion-spinner>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
||||||
37
src/addon/messages/pages/search/search.module.ts
Normal file
37
src/addon/messages/pages/search/search.module.ts
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
// (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 { NgModule } from '@angular/core';
|
||||||
|
import { IonicPageModule } from 'ionic-angular';
|
||||||
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
|
import { AddonMessagesSearchPage } from './search';
|
||||||
|
import { CoreComponentsModule } from '@components/components.module';
|
||||||
|
import { CoreDirectivesModule } from '@directives/directives.module';
|
||||||
|
import { CorePipesModule } from '@pipes/pipes.module';
|
||||||
|
import { AddonMessagesComponentsModule } from '../../components/components.module';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
AddonMessagesSearchPage,
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
CoreComponentsModule,
|
||||||
|
CoreDirectivesModule,
|
||||||
|
CorePipesModule,
|
||||||
|
AddonMessagesComponentsModule,
|
||||||
|
IonicPageModule.forChild(AddonMessagesSearchPage),
|
||||||
|
TranslateModule.forChild()
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class AddonMessagesSearchPageModule {}
|
||||||
244
src/addon/messages/pages/search/search.ts
Normal file
244
src/addon/messages/pages/search/search.ts
Normal file
@ -0,0 +1,244 @@
|
|||||||
|
// (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 { Component, OnDestroy, ViewChild } from '@angular/core';
|
||||||
|
import { IonicPage } from 'ionic-angular';
|
||||||
|
import { CoreEventsProvider } from '@providers/events';
|
||||||
|
import { CoreSitesProvider } from '@providers/sites';
|
||||||
|
import { AddonMessagesProvider } from '../../providers/messages';
|
||||||
|
import { CoreSplitViewComponent } from '@components/split-view/split-view';
|
||||||
|
import { CoreDomUtilsProvider } from '@providers/utils/dom';
|
||||||
|
import { CoreAppProvider } from '@providers/app';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Page for searching users.
|
||||||
|
*/
|
||||||
|
@IonicPage({ segment: 'addon-messages-search' })
|
||||||
|
@Component({
|
||||||
|
selector: 'page-addon-messages-search',
|
||||||
|
templateUrl: 'search.html',
|
||||||
|
})
|
||||||
|
export class AddonMessagesSearchPage implements OnDestroy {
|
||||||
|
|
||||||
|
disableSearch = false;
|
||||||
|
displaySearching = false;
|
||||||
|
displayResults = false;
|
||||||
|
query = '';
|
||||||
|
contacts = {
|
||||||
|
type: 'contacts',
|
||||||
|
titleString: 'addon.messages.contacts',
|
||||||
|
emptyString: 'addon.messages.searchnocontactsfound',
|
||||||
|
results: [],
|
||||||
|
canLoadMore: false,
|
||||||
|
loadingMore: false
|
||||||
|
};
|
||||||
|
nonContacts = {
|
||||||
|
type: 'noncontacts',
|
||||||
|
titleString: 'addon.messages.noncontacts',
|
||||||
|
emptyString: 'addon.messages.searchnononcontactsfound',
|
||||||
|
results: [],
|
||||||
|
canLoadMore: false,
|
||||||
|
loadingMore: false
|
||||||
|
};
|
||||||
|
messages = {
|
||||||
|
type: 'messages',
|
||||||
|
titleString: 'addon.messages.messages',
|
||||||
|
emptyString: 'addon.messages.searchnomessagesfound',
|
||||||
|
results: [],
|
||||||
|
canLoadMore: false,
|
||||||
|
loadingMore: false,
|
||||||
|
loadMoreError: false
|
||||||
|
};
|
||||||
|
selectedUserId = null;
|
||||||
|
|
||||||
|
protected memberInfoObserver;
|
||||||
|
|
||||||
|
@ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
|
||||||
|
|
||||||
|
constructor(private appProvider: CoreAppProvider, private domUtils: CoreDomUtilsProvider, eventsProvider: CoreEventsProvider,
|
||||||
|
sitesProvider: CoreSitesProvider, private messagesProvider: AddonMessagesProvider) {
|
||||||
|
|
||||||
|
// Update block status of a user.
|
||||||
|
this.memberInfoObserver = eventsProvider.on(AddonMessagesProvider.MEMBER_INFO_CHANGED_EVENT, (data) => {
|
||||||
|
if (!data.userBlocked && !data.userUnblocked) {
|
||||||
|
// The block status has not changed, ignore.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const contact = this.contacts.results.find((user) => user.id == data.userId);
|
||||||
|
if (contact) {
|
||||||
|
contact.isblocked = data.userBlocked;
|
||||||
|
} else {
|
||||||
|
const nonContact = this.nonContacts.results.find((user) => user.id == data.userId);
|
||||||
|
if (nonContact) {
|
||||||
|
nonContact.isblocked = data.userBlocked;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.messages.results.forEach((message: any): void => {
|
||||||
|
if (message.userid == data.userId) {
|
||||||
|
message.isblocked = data.userBlocked;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, sitesProvider.getCurrentSiteId());
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear search.
|
||||||
|
*/
|
||||||
|
clearSearch(): void {
|
||||||
|
this.query = '';
|
||||||
|
this.displayResults = false;
|
||||||
|
this.splitviewCtrl.emptyDetails();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start a new search or load more results.
|
||||||
|
*
|
||||||
|
* @param {string} query Text to search for.
|
||||||
|
* @param {strings} loadMore Load more contacts, noncontacts or messages. If undefined, start a new search.
|
||||||
|
* @param {any} [infiniteComplete] Infinite scroll complete function. Only used from core-infinite-loading.
|
||||||
|
* @return {Promise<any>} Resolved when done.
|
||||||
|
*/
|
||||||
|
search(query: string, loadMore?: 'contacts' | 'noncontacts' | 'messages', infiniteComplete?: any): Promise<any> {
|
||||||
|
this.appProvider.closeKeyboard();
|
||||||
|
|
||||||
|
this.query = query;
|
||||||
|
this.disableSearch = true;
|
||||||
|
this.displaySearching = !loadMore;
|
||||||
|
|
||||||
|
const promises = [];
|
||||||
|
let newContacts = [];
|
||||||
|
let newNonContacts = [];
|
||||||
|
let newMessages = [];
|
||||||
|
let canLoadMoreContacts = false;
|
||||||
|
let canLoadMoreNonContacts = false;
|
||||||
|
let canLoadMoreMessages = false;
|
||||||
|
|
||||||
|
if (!loadMore || loadMore == 'contacts' || loadMore == 'noncontacts') {
|
||||||
|
const limitNum = loadMore ? AddonMessagesProvider.LIMIT_SEARCH : AddonMessagesProvider.LIMIT_INITIAL_USER_SEARCH;
|
||||||
|
let limitFrom = 0;
|
||||||
|
if (loadMore == 'contacts') {
|
||||||
|
limitFrom = this.contacts.results.length;
|
||||||
|
this.contacts.loadingMore = true;
|
||||||
|
} else if (loadMore == 'noncontacts') {
|
||||||
|
limitFrom = this.nonContacts.results.length;
|
||||||
|
this.nonContacts.loadingMore = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
promises.push(
|
||||||
|
this.messagesProvider.searchUsers(query, limitFrom, limitNum).then((result) => {
|
||||||
|
if (!loadMore || loadMore == 'contacts') {
|
||||||
|
newContacts = result.contacts;
|
||||||
|
canLoadMoreContacts = result.canLoadMoreContacts;
|
||||||
|
}
|
||||||
|
if (!loadMore || loadMore == 'noncontacts') {
|
||||||
|
newNonContacts = result.nonContacts;
|
||||||
|
canLoadMoreNonContacts = result.canLoadMoreNonContacts;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!loadMore || loadMore == 'messages') {
|
||||||
|
let limitFrom = 0;
|
||||||
|
if (loadMore == 'messages') {
|
||||||
|
limitFrom = this.messages.results.length;
|
||||||
|
this.messages.loadingMore = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
promises.push(
|
||||||
|
this.messagesProvider.searchMessages(query, undefined, limitFrom).then((result) => {
|
||||||
|
newMessages = result.messages;
|
||||||
|
canLoadMoreMessages = result.canLoadMore;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.all(promises).then(() => {
|
||||||
|
if (!loadMore) {
|
||||||
|
this.contacts.results = [];
|
||||||
|
this.nonContacts.results = [];
|
||||||
|
this.messages.results = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
this.displayResults = true;
|
||||||
|
|
||||||
|
if (!loadMore || loadMore == 'contacts') {
|
||||||
|
this.contacts.results.push(...newContacts);
|
||||||
|
this.contacts.canLoadMore = canLoadMoreContacts;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!loadMore || loadMore == 'noncontacts') {
|
||||||
|
this.nonContacts.results.push(...newNonContacts);
|
||||||
|
this.nonContacts.canLoadMore = canLoadMoreNonContacts;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!loadMore || loadMore == 'messages') {
|
||||||
|
this.messages.results.push(...newMessages);
|
||||||
|
this.messages.canLoadMore = canLoadMoreMessages;
|
||||||
|
this.messages.loadMoreError = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!loadMore) {
|
||||||
|
if (this.contacts.results.length > 0) {
|
||||||
|
this.openDiscussion(this.contacts.results[0].id, true);
|
||||||
|
} else if (this.nonContacts.results.length > 0) {
|
||||||
|
this.openDiscussion(this.nonContacts.results[0].id, true);
|
||||||
|
} else if (this.messages.results.length > 0) {
|
||||||
|
this.openDiscussion(this.messages.results[0].userid, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
this.domUtils.showErrorModalDefault(error, 'addon.messages.errorwhileretrievingusers', true);
|
||||||
|
|
||||||
|
if (loadMore == 'messages') {
|
||||||
|
this.messages.loadMoreError = true;
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
this.disableSearch = false;
|
||||||
|
this.displaySearching = false;
|
||||||
|
|
||||||
|
if (loadMore == 'contacts') {
|
||||||
|
this.contacts.loadingMore = false;
|
||||||
|
} else if (loadMore == 'noncontacts') {
|
||||||
|
this.nonContacts.loadingMore = false;
|
||||||
|
} else if (loadMore == 'messages') {
|
||||||
|
this.messages.loadingMore = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
infiniteComplete && infiniteComplete();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open a discussion in the split view.
|
||||||
|
*
|
||||||
|
* @param {number} userId User id.
|
||||||
|
* @param {boolean} [onInit=false] Whether the tser was selected on initial load.
|
||||||
|
*/
|
||||||
|
openDiscussion(userId: number, onInit: boolean = false): void {
|
||||||
|
if (!onInit || this.splitviewCtrl.isOn()) {
|
||||||
|
this.selectedUserId = userId;
|
||||||
|
this.splitviewCtrl.push('AddonMessagesDiscussionPage', { userId });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Component destroyed.
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
this.memberInfoObserver && this.memberInfoObserver.off();
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user