EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2430 course: New section selector

main
Pau Ferrer Ocaña 2018-06-11 12:50:08 +02:00
parent d1076eb794
commit 8292955fae
7 changed files with 140 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.scss
View File

@ -370,7 +370,13 @@ ion-col ion-select {
white-space: normal;
text-align: right;
}
}
.core-button-select {
ion-icon:last-child {
margin-left: 5px;
}
}
// File uploader.
// -------------------------

8
src/core/course/components/format/core-course-format.html
View File

@ -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? -->
<ion-select [ngModel]="selectedSection" (ngModelChange)="sectionChanged($event)" [compareWith]="compareSections" [selectOptions]="selectOptions" float-start interface="popover">
<ion-option *ngFor="let section of sections" [value]="section">{{section.formattedName || section.name}}</ion-option>
</ion-select>
<button float-start ion-button (click)="showSectionSelector($event)" clear class="core-button-select">
{{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}
<ion-icon name="arrow-dropdown" ios="md-arrow-dropdown"></ion-icon>
</button>
<!-- Section download. -->
<ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: selectedSection}"></ng-container>
</div>

6
src/core/course/components/format/format.scss
View File

@ -22,4 +22,8 @@ core-course-format {
width: 100%;
}
}
}
}
.core-section-select {
width: 100%;
}

18
src/core/course/components/format/format.ts
View File

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

19
src/core/course/pages/section-selector/section-selector.html 100644
View File

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

33
src/core/course/pages/section-selector/section-selector.module.ts 100644
View File

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

57
src/core/course/pages/section-selector/section-selector.ts 100644
View File

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