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

src/addon/notes/components/components.module.ts

@@ -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 {}

src/addon/notes/components/list/list.html

@@ -1,15 +1,9 @@
-<ion-header>
+<core-navbar-buttons end>
-    <ion-navbar>
+    <core-context-menu>
-        <ion-title>{{ 'addon.notes.notes' | translate }}</ion-title>
+        <core-context-menu-item [hidden]="!(notesLoaded && !hasOffline)" [priority]="100" [content]="'core.refresh' | translate" (action)="refreshNotes(false)" [iconAction]="refreshIcon" [closeOnClick]="true"></core-context-menu-item>
-        <ion-buttons end></ion-buttons>
+        <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>
-    </ion-navbar>
+    </core-context-menu>
-    <core-navbar-buttons end>
+</core-navbar-buttons>
-        <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>
 
 <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>

src/addon/notes/components/list/list.ts

@@ -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 { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { Content, IonicPage, NavController, NavParams } from 'ionic-angular';
+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,
+    constructor(private domUtils: CoreDomUtilsProvider, private textUtils: CoreTextUtilsProvider,
-            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.
      */

src/addon/notes/components/types/types.html

@@ -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>

src/addon/notes/components/types/types.ts

@@ -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});
-    }
-}

src/addon/notes/pages/list/list.module.ts

@@ -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 {}

src/addon/notes/providers/course-option-handler.ts

@@ -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,
         };
     }
 }