MOBILE-2430 course: New section selector

src/app/app.scss

@@ -372,6 +372,12 @@ ion-col ion-select {
     }
 }
 
+.core-button-select {
+  ion-icon:last-child {
+    margin-left: 5px;
+  }
+}
+
 // File uploader.
 // -------------------------
 

src/core/course/components/format/core-course-format.html

@@ -16,10 +16,10 @@
         <!-- Section selector. -->
         <core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
             <div text-wrap *ngIf="displaySectionSelector && sections && sections.length" no-padding class="clearfix">
-                <!-- @todo: How to display availabilityinfo and not visible messages? -->
+                <button float-start ion-button (click)="showSectionSelector($event)" clear class="core-button-select">
-                <ion-select [ngModel]="selectedSection" (ngModelChange)="sectionChanged($event)" [compareWith]="compareSections" [selectOptions]="selectOptions" float-start interface="popover">
+                    {{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}
-                    <ion-option *ngFor="let section of sections" [value]="section">{{section.formattedName || section.name}}</ion-option>
+                    <ion-icon name="arrow-dropdown" ios="md-arrow-dropdown"></ion-icon>
-                </ion-select>
+                </button>
                 <!-- Section download. -->
                 <ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: selectedSection}"></ng-container>
             </div>

src/core/course/components/format/format.scss

@@ -23,3 +23,7 @@ core-course-format {
         }
     }
 }
+
+.core-section-select {
+    width: 100%;
+}

src/core/course/components/format/format.ts

@@ -15,7 +15,7 @@
 import {
     Component, Input, OnInit, OnChanges, OnDestroy, SimpleChange, Output, EventEmitter, ViewChildren, QueryList, Injector
 } from '@angular/core';
-import { Content } from 'ionic-angular';
+import { Content, ModalController } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider } from '@providers/sites';
@@ -72,7 +72,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
     constructor(private cfDelegate: CoreCourseFormatDelegate, translate: TranslateService, private injector: Injector,
             private courseHelper: CoreCourseHelperProvider, private domUtils: CoreDomUtilsProvider,
             eventsProvider: CoreEventsProvider, private sitesProvider: CoreSitesProvider, private content: Content,
-            prefetchDelegate: CoreCourseModulePrefetchDelegate) {
+            prefetchDelegate: CoreCourseModulePrefetchDelegate, private modalCtrl: ModalController) {
 
         this.selectOptions.title = translate.instant('core.course.sections');
         this.completionChanged = new EventEmitter();
@@ -221,6 +221,20 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
+    /**
+     * Display the section selector modal.
+     */
+    showSectionSelector(): void {
+        const modal = this.modalCtrl.create('CoreCourseSectionSelectorPage',
+            {sections: this.sections, selected: this.selectedSection});
+        modal.onDidDismiss((newSection) => {
+            if (newSection) {
+                this.sectionChanged(newSection);
+            }
+        });
+        modal.present();
+    }
+
     /**
      * Function called when selected section changes.
      *

src/core/course/pages/section-selector/section-selector.html

@@ -0,0 +1,19 @@
+<ion-header>
+    <ion-navbar>
+        <ion-title>{{ 'core.course.sections' | translate }}</ion-title>
+        <ion-buttons end>
+            <button ion-button icon-only (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon name="close"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-navbar>
+</ion-header>
+<ion-content>
+    <ng-container *ngFor="let section of sections">
+        <ion-item *ngIf="sectionHasContent(section)" text-wrap (click)="selectSection(section)" [class.core-primary-item]="selected.id == section.id" [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
+            <h2><core-format-text [text]="section.formattedName || section.name"></core-format-text></h2>
+            <ion-badge color="secondary" *ngIf="section.visible === 0">{{ 'core.course.nocontentavailable' | translate }}</ion-badge>
+            <ion-badge color="secondary" *ngIf="section.availabilityinfo"><core-format-text  [text]=" section.availabilityinfo"></core-format-text></ion-badge>
+        </ion-item>
+    </ng-container>
+</ion-content>

src/core/course/pages/section-selector/section-selector.module.ts

@@ -0,0 +1,33 @@
+// (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 { CoreCourseSectionSelectorPage } from './section-selector';
+
+@NgModule({
+    declarations: [
+        CoreCourseSectionSelectorPage,
+    ],
+    imports: [
+        CoreComponentsModule,
+        CoreDirectivesModule,
+        IonicPageModule.forChild(CoreCourseSectionSelectorPage),
+        TranslateModule.forChild()
+    ],
+})
+export class CoreCourseSectionSelectorPageModule {}

src/core/course/pages/section-selector/section-selector.ts

@@ -0,0 +1,57 @@
+// (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 } from '@angular/core';
+import { IonicPage, NavParams, ViewController } from 'ionic-angular';
+import { CoreCourseHelperProvider } from '../../providers/helper';
+
+/**
+ * Page that displays course section selector.
+ */
+@IonicPage({ segment: 'core-course-section-selector' })
+@Component({
+    selector: 'page-core-course-section-selector',
+    templateUrl: 'section-selector.html',
+})
+export class CoreCourseSectionSelectorPage {
+
+    sections: any;
+    selected: number;
+    sectionHasContent: any;
+
+    constructor(navParams: NavParams, courseHelper: CoreCourseHelperProvider, private viewCtrl: ViewController) {
+        this.sections = navParams.get('sections');
+        this.selected = navParams.get('selected');
+
+        this.sectionHasContent = courseHelper.sectionHasContent;
+    }
+
+    /**
+     * Close the modal.
+     */
+    closeModal(): void {
+        this.viewCtrl.dismiss();
+    }
+
+    /**
+     * Select a section.
+     *
+     * @param {any} section Selected section object.
+     */
+    selectSection(section: any): void {
+        if (!(section.visible === 0 || section.uservisible === false)) {
+            this.viewCtrl.dismiss(section);
+        }
+    }
+}