MOBILE-2329 notes: Split view changed to a combo box.

main
Albert Gasset 2018-03-22 15:46:30 +01:00
parent 2c643fb842
commit 53fe0d899c
7 changed files with 46 additions and 157 deletions

View File

@ -17,25 +17,29 @@ import { CommonModule } from '@angular/common';
import { IonicModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { CoreComponentsModule } from '@components/components.module';
import { AddonNotesTypesComponent } from './types/types';
import { CoreDirectivesModule } from '@directives/directives.module';
import { CorePipesModule } from '@pipes/pipes.module';
import { AddonNotesListComponent } from './list/list';
@NgModule({
declarations: [
AddonNotesTypesComponent
AddonNotesListComponent
],
imports: [
CommonModule,
IonicModule,
TranslateModule.forChild(),
CoreComponentsModule,
CoreDirectivesModule,
CorePipesModule
],
providers: [
],
exports: [
AddonNotesTypesComponent
AddonNotesListComponent
],
entryComponents: [
AddonNotesTypesComponent
AddonNotesListComponent
]
})
export class AddonNotesComponentsModule {}

View File

@ -1,15 +1,9 @@
<ion-header>
<ion-navbar>
<ion-title>{{ 'addon.notes.notes' | translate }}</ion-title>
<ion-buttons end></ion-buttons>
</ion-navbar>
<core-navbar-buttons end>
<core-context-menu>
<core-context-menu-item [hidden]="!(notesLoaded && !hasOffline)" [priority]="100" [content]="'core.refresh' | translate" (action)="refreshNotes(false)" [iconAction]="refreshIcon" [closeOnClick]="true"></core-context-menu-item>
<core-context-menu-item [hidden]="!(notesLoaded && hasOffline)" [priority]="100" [content]="'core.settings.synchronizenow' | translate" (action)="refreshNotes(true)" [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
</core-context-menu>
</core-navbar-buttons>
</ion-header>
<core-navbar-buttons end>
<core-context-menu>
<core-context-menu-item [hidden]="!(notesLoaded && !hasOffline)" [priority]="100" [content]="'core.refresh' | translate" (action)="refreshNotes(false)" [iconAction]="refreshIcon" [closeOnClick]="true"></core-context-menu-item>
<core-context-menu-item [hidden]="!(notesLoaded && hasOffline)" [priority]="100" [content]="'core.settings.synchronizenow' | translate" (action)="refreshNotes(true)" [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
</core-context-menu>
</core-navbar-buttons>
<ion-content>
<ion-refresher [enabled]="notesLoaded" (ionRefresh)="refreshNotes(false, $event)">
@ -17,6 +11,12 @@
</ion-refresher>
<core-loading [hideUntil]="notesLoaded" class="core-loading-center">
<ion-select [(ngModel)]="type" (ngModelChange)="typeChanged()" interface="popover">
<ion-option value="site">{{ 'addon.notes.sitenotes' | translate }}</ion-option>
<ion-option value="course">{{ 'addon.notes.coursenotes' | translate }}</ion-option>
<ion-option value="personal">{{ 'addon.notes.personalnotes' | translate }}</ion-option>
</ion-select>
<div class="core-warning-card" icon-start *ngIf="hasOffline">
<ion-icon name="warning"></ion-icon>
{{ 'core.thereisdatatosync' | translate:{$a: 'addon.notes.notes' | translate | lowercase } }}
@ -28,7 +28,7 @@
<ion-card *ngFor="let note of notes">
<ion-item text-wrap>
<ion-avatar item-start>
<img [src]="note.userprofileimageurl || 'assets/img/user-avatar.png'" core-external-content (click)="openUserProfile(note.userid)" [alt]="'core.pictureof' | translate:{$a: note.userfullname}" role="presentation">
<img [src]="note.userprofileimageurl || 'assets/img/user-avatar.png'" core-external-content core-user-link [userId]="note.userid" [courseId]="note.courseid" [alt]="'core.pictureof' | translate:{$a: note.userfullname}" role="presentation">
</ion-avatar>
<h2>{{note.userfullname}}</h2>
<p *ngIf="!note.offline" item-end>{{note.lastmodified | coreDateDayOrTime}}</p>

View File

@ -12,43 +12,39 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnDestroy, Optional, ViewChild } from '@angular/core';
import { Content, IonicPage, NavController, NavParams } from 'ionic-angular';
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
import { CoreEventsProvider } from '@providers/events';
import { CoreSitesProvider } from '@providers/sites';
import { CoreTextUtilsProvider } from '@providers/utils/text';
import { CoreSplitViewComponent } from '@components/split-view/split-view';
import { AddonNotesProvider } from '../../providers/notes';
import { AddonNotesSyncProvider } from '../../providers/notes-sync';
/**
* Page that displays the list of notes.
* Component that displays the notes of a course.
*/
@IonicPage({ segment: 'addon-notes-list' })
@Component({
selector: 'page-addon-notes-list',
selector: 'addon-notes-list',
templateUrl: 'list.html',
})
export class AddonNotesListPage implements OnDestroy {
export class AddonNotesListComponent implements OnInit, OnDestroy {
@Input() courseId: number;
@ViewChild(Content) content: Content;
protected courseId = 0;
protected syncObserver: any;
type = '';
type = 'course';
refreshIcon = 'spinner';
syncIcon = 'spinner';
notes: any[];
hasOffline = false;
notesLoaded = false;
constructor(navParams: NavParams, private navCtrl: NavController, @Optional() private svComponent: CoreSplitViewComponent,
private domUtils: CoreDomUtilsProvider, private textUtils: CoreTextUtilsProvider,
constructor(private domUtils: CoreDomUtilsProvider, private textUtils: CoreTextUtilsProvider,
sitesProvider: CoreSitesProvider, eventsProvider: CoreEventsProvider,
private notesProvider: AddonNotesProvider, private notesSync: AddonNotesSyncProvider) {
this.courseId = navParams.get('courseId') || sitesProvider.getCurrentSiteHomeId();
this.type = navParams.get('type');
// Refresh data if notes are synchronized automatically.
this.syncObserver = eventsProvider.on(AddonNotesSyncProvider.AUTO_SYNCED, (data) => {
if (data.courseId == this.courseId) {
@ -67,9 +63,9 @@ export class AddonNotesListPage implements OnDestroy {
}
/**
* View loaded.
* Component being initialized.
*/
ionViewDidLoad(): void {
ngOnInit(): void {
this.fetchNotes(true).then(() => {
this.notesProvider.logView(this.courseId);
});
@ -124,6 +120,18 @@ export class AddonNotesListPage implements OnDestroy {
});
}
/**
* Function called when the type has changed.
*/
typeChanged(): void {
this.notesLoaded = false;
this.refreshIcon = 'spinner';
this.syncIcon = 'spinner';
this.fetchNotes(true).then(() => {
this.notesProvider.logView(this.courseId);
});
}
/**
* Tries to synchronize course notes.
*
@ -154,17 +162,6 @@ export class AddonNotesListPage implements OnDestroy {
}
}
/**
* Opens the profile of a user.
*
* @param {number} userId
*/
openUserProfile(userId: number): void {
// Decide which navCtrl to use. If this page is inside a split view, use the split view's master nav.
const navCtrl = this.svComponent ? this.svComponent.getMasterNav() : this.navCtrl;
navCtrl.push('CoreUserProfilePage', {userId, courseId: this.courseId});
}
/**
* Page destroyed.
*/

View File

@ -1,15 +0,0 @@
<core-split-view>
<ion-content>
<ion-list>
<a ion-item (click)="openList('site')" [title]="'addon.notes.sitenotes' | translate" [class.core-split-item-selected]="type == 'site'">
{{ 'addon.notes.sitenotes' | translate }}
</a>
<a ion-item (click)="openList('course')" [title]="'addon.notes.coursenotes' | translate" [class.core-split-item-selected]="type == 'course'">
{{ 'addon.notes.coursenotes' | translate }}
</a>
<a ion-item (click)="openList('personal')" [title]="'addon.notes.personalnotes' | translate" [class.core-split-item-selected]="type == 'personal'">
{{ 'addon.notes.personalnotes' | translate }}
</a>
</ion-list>
</ion-content>
</core-split-view>

View File

@ -1,62 +0,0 @@
// (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 { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { CoreSplitViewComponent } from '@components/split-view/split-view';
import { CoreSitesProvider } from '@providers/sites';
/**
* Component that displays the competencies of a course.
*/
@Component({
selector: 'addon-notes-types',
templateUrl: 'types.html',
})
export class AddonNotesTypesComponent implements AfterViewInit, OnInit {
@ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
@Input() courseId: number;
protected type: string;
constructor(private sitesProvider: CoreSitesProvider) {
}
/**
* Properties initialized.
*/
ngOnInit(): void {
const siteHomeId = this.sitesProvider.getCurrentSite().getSiteHomeId();
this.type = (this.courseId == siteHomeId ? 'site' : 'course');
}
/**
* View loaded.
*/
ngAfterViewInit(): void {
if (this.splitviewCtrl.isOn()) {
this.openList(this.type);
}
}
/**
* Opens a list of notes.
*
* @param {string} type
*/
openList(type: string): void {
this.type = type;
this.splitviewCtrl.push('AddonNotesListPage', {courseId: this.courseId, type: type});
}
}

View File

@ -1,35 +0,0 @@
// (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 { CoreComponentsModule } from '@components/components.module';
import { CoreDirectivesModule } from '@directives/directives.module';
import { CorePipesModule } from '@pipes/pipes.module';
import { AddonNotesListPage } from './list';
@NgModule({
declarations: [
AddonNotesListPage,
],
imports: [
CoreComponentsModule,
CoreDirectivesModule,
CorePipesModule,
IonicPageModule.forChild(AddonNotesListPage),
TranslateModule.forChild()
],
})
export class AddonNotesListPageModule {}

View File

@ -16,7 +16,7 @@ import { Injectable, Injector } from '@angular/core';
import { AddonNotesProvider } from './notes';
import { CoreCourseProvider } from '@core/course/providers/course';
import { CoreCourseOptionsHandler, CoreCourseOptionsHandlerData } from '@core/course/providers/options-delegate';
import { AddonNotesTypesComponent } from '../components/types/types';
import { AddonNotesListComponent } from '../components/list/list';
/**
* Handler to inject an option into the course main menu.
@ -68,7 +68,7 @@ export class AddonNotesCourseOptionHandler implements CoreCourseOptionsHandler {
return {
title: 'addon.notes.notes',
class: 'addon-notes-course-handler',
component: AddonNotesTypesComponent,
component: AddonNotesListComponent,
};
}
}