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

MOBILE-3814 course: Style course summary page

main
Pau Ferrer Ocaña 2022-03-10 11:25:05 +01:00
parent f2798ec817
commit 115ba52984
3 changed files with 192 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/core/features/course/pages/course-summary/course-summary.html
View File

@ -1,12 +1,9 @@
<ion-header>
<ion-header class="no-title">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button [text]="'core.back' | translate"></ion-back-button>
</ion-buttons>
<ion-title>
<h1>
{{'core.course.coursesummary' | translate}}
</h1>
</ion-title>
<ion-buttons slot="end" *ngIf="isModal">
<ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
@ -15,27 +12,29 @@
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content [fullscreen]="true">
<ion-refresher slot="fixed" [disabled]="!dataLoaded" (ionRefresh)="refreshData($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="dataLoaded">
<div *ngIf="courseImageUrl" class="core-course-thumb">
<img [src]="courseImageUrl" core-external-content alt="" />
<div *ngIf="course" class="core-course-thumb" #courseThumb>
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
</ion-icon>
</div>
<ng-container *ngIf="course">
<ion-item class="ion-text-wrap">
<div *ngIf="course" class="course-container">
<ion-item class="ion-text-wrap course-name">
<ion-label>
<p *ngIf="course.displayname && course.shortname && course.fullname != course.displayname"
class="core-course-shortname">
<core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</p>
<h2>
<h1>
<span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</h2>
</h1>
<ion-chip color="primary" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
<span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
<ion-label>
@ -43,7 +42,14 @@
</core-format-text>
</ion-label>
</ion-chip>
</ion-label>
<ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
[attr.aria-label]="'core.openinbrowser' | translate" slot="end">
<ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="progress !== undefined || course.startdate || course.enddate">
<ion-label>
<div class="core-course-progress" *ngIf="progress !== undefined">
<core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
</core-progress-bar>
@ -51,26 +57,22 @@
<div *ngIf="course.startdate || course.enddate" class="core-course-dates">
<p *ngIf="course.startdate">
<ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
<strong>{{ 'core.course.startdate' | translate }}: </strong> {{ course.startdate * 1000 |
coreFormatDate:'strftimedatefullshort' }}
<strong>{{ 'core.course.startdate' | translate }}</strong><br>
{{ course.startdate * 1000 | coreFormatDate:'strftimedaydatetime' }}
</p>
<p *ngIf="course.enddate">
<ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
<strong>{{ 'core.course.enddate' | translate }}: </strong> {{ course.enddate * 1000 |
coreFormatDate:'strftimedatefullshort' }}
<strong>{{ 'core.course.enddate' | translate }}</strong><br>
{{ course.enddate * 1000 | coreFormatDate:'strftimedaydatetime' }}
</p>
</div>
</ion-label>
<ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
[attr.aria-label]="'core.openinbrowser' | translate" slot="end">
<ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="course.summary" detail="false">
<ion-label>
<p class="item-heading">
{{'core.summary' | translate}}
{{'core.course.coursesummary' | translate}}
</p>
<core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
@ -78,19 +80,28 @@
</ion-item>
<ion-list *ngIf="course.contacts && course.contacts.length">
<ion-item-divider class="ion-text-wrap">
<ion-item [button]="course.contacts.length >= 5" class="ion-text-wrap" (click)="toggleContacts()"
[attr.aria-label]="(contactsExpanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
<ion-icon *ngIf="course.contacts.length >= 5" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
class="expandable-status-icon" [class.expandable-status-icon-expanded]="contactsExpanded">
</ion-icon>
<ion-label>
<p class="item-heading">{{ 'core.teachers' | translate }}</p>
</ion-label>
</ion-item-divider>
<ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
[courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
<core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null">
</core-user-avatar>
<ion-label>
<p class="item-heading">{{contact.fullname}}</p>
<p class="item-heading">
{{ 'core.teachers' | translate }}
</p>
</ion-label>
</ion-item>
<ng-container *ngIf="contactsExpanded || course.contacts.length < 5">
<ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
[courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
<core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"
[linkProfile]="false">
</core-user-avatar>
<ion-label>
<p class="item-heading">{{contact.fullname}}</p>
</ion-label>
</ion-item>
</ng-container>
<core-spacer></core-spacer>
</ion-list>
@ -102,23 +113,31 @@
<span class="core-customfieldname">
<core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</span><span class="core-customfieldseparator">: </span>
<span class="core-customfieldseparator">: </span>
</span>
<span class="core-customfieldvalue">
<core-format-text [text]="field.value" collapsible-item contextLevel="course"
[contextInstanceId]="course.id">
<core-format-text [text]="field.value" [collapsible-item]="field.type == 'textarea' ? '' : null"
contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</span>
</div>
</ng-container>
</ion-label>
</ion-item>
</ng-container>
</div>
</core-loading>
</ion-content>
<ion-footer *ngIf="course && dataLoaded">
<ng-container *ngIf="canAccessCourse">
<ion-button *ngFor="let item of courseMenuHandlers" (click)="openMenuItem(item)" [class]="item.data.class" expand="block">
<ion-icon *ngIf="item.data.icon" [name]="item.data.icon" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{item.data.title | translate }}</ion-label>
</ion-button>
</ng-container>
<!-- Enrol -->
<ion-card *ngIf="!isEnrolled">
<ion-card *ngIf="!isEnrolled && (selfEnrolInstances.length > 0 || paypalEnabled)">
<ion-item class="ion-text-wrap" *ngFor="let instance of selfEnrolInstances">
<ion-label>
<p class="item-heading">{{ instance.name }}</p>
@ -135,22 +154,16 @@
</ion-button>
</ion-label>
</ion-item>
<ion-item *ngIf="!selfEnrolInstances.length && !paypalEnabled">
<ion-label>
<p class="item-heading">{{ 'core.courses.notenrollable' | translate }}</p>
</ion-label>
</ion-card>
<ion-card class="core-info-card" *ngIf="!isEnrolled && !selfEnrolInstances.length && !paypalEnabled">
<ion-item>
<ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.courses.notenrollable' | translate }}</ion-label>
</ion-item>
</ion-card>
<ng-container *ngIf="canAccessCourse">
<ion-button *ngFor="let item of courseMenuHandlers" (click)="openMenuItem(item)" [class]="'ion-margin' + item.data.class"
expand="block">
<ion-icon *ngIf="item.data.icon" [name]="item.data.icon" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{item.data.title | translate }}</ion-label>
</ion-button>
</ng-container>
<ion-button class="ion-margin" (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block">
<ion-button (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block">
<ion-icon name="fas-briefcase" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
{{ 'core.course' | translate }}

89
src/core/features/course/pages/course-summary/course-summary.scss
View File

@ -1,28 +1,99 @@
@import '~theme/globals.scss';
:host {
.core-course-thumb {
overflow: hidden;
text-align: center;
max-height: 35vh;
z-index: -1;
overflow: hidden;
border-bottom: 1px solid var(--stroke);
--thumb-height: 180px;
ion-content {
position: absolute;
}
.core-course-thumb {
background: var(--course-color, white);
overflow: hidden;
text-align: center;
height: var(--thumb-height);
position: fixed;
z-index: -1;
width: 100%;
.core-customfieldvalue core-format-text {
display: inline;
@for $i from 0 to length($core-course-image-background) {
&.course-color-#{$i} {
--course-color: var(--core-course-color-#{$i});
--course-color-tint: var(--core-course-color-#{$i}-tint);
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
ion-icon.course-icon {
padding: 24px;
font-size: calc(var(--thumb-height) - 48px);
color: var(--course-color-tint);
}
}
.course-container {
position: relative;
top: calc(var(--thumb-height) - var(--big-radius));
}
.course-name {
border-radius: var(--big-radius) var(--big-radius) 0 0;
box-shadow: var(--drop-shadow-top);
ion-label {
margin-bottom: 0px;
}
}
h1 {
font-size: 20px;
}
.core-course-category {
margin-left: 0;
margin-right: 0;
}
.core-course-dates {
background: var(--light);
border-radius: var(--small-radius);
padding: 8px;
width: 100%;
p {
margin-bottom: 8px;
}
p:last-child {
margin-bottom: 0px;
}
ion-icon {
@include margin-horizontal(null, 8px);
}
}
.core-customfield {
margin-bottom: 8px;
&.core-customfield_textarea {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
.core-customfieldname {
@include margin-horizontal(null, 4px);
font-weight: bold;
display: inline;
}
.core-customfieldvalue {
display: inline;
}
}
}

84
src/core/features/course/pages/course-summary/course-summary.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Component, OnDestroy, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { IonRefresher } from '@ionic/angular';
import { CoreEventObserver, CoreEvents } from '@singletons/events';
import { CoreSites } from '@services/sites';
@ -35,8 +35,9 @@ import { ModalController, NgZone, Platform, Translate } from '@singletons';
import { CoreCoursesSelfEnrolPasswordComponent } from '../../../courses/components/self-enrol-password/self-enrol-password';
import { CoreNavigator } from '@services/navigator';
import { CoreUtils } from '@services/utils/utils';
import { CoreCourseWithImageAndColor } from '@features/courses/services/courses-helper';
import { CoreCoursesHelper, CoreCourseWithImageAndColor } from '@features/courses/services/courses-helper';
import { Subscription } from 'rxjs';
import { CoreColors } from '@singletons/colors';
/**
* Page that shows the summary of a course including buttons to enrol and other available options.
@ -51,23 +52,23 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
@Input() course?: CoreCourseSummaryData;
@Input() courseId = 0;
@ViewChild('courseThumb') courseThumb?: ElementRef;
isEnrolled = false;
canAccessCourse = true;
selfEnrolInstances: CoreCourseEnrolmentMethod[] = [];
paypalEnabled = false;
dataLoaded = false;
isModal = false;
contactsExpanded = false;
courseUrl = '';
courseImageUrl?: string;
progress?: number;
courseMenuHandlers: CoreCourseOptionsMenuHandlerToDisplay[] = [];
protected isGuestEnabled = false;
protected useGuestAccess = false;
protected guestInstanceId?: number;
protected enrolmentMethods: CoreCourseEnrolmentMethod[] = [];
protected waitStart = 0;
protected enrolUrl = '';
protected pageDestroyed = false;
@ -127,25 +128,14 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
* password is required for guest access.
*/
protected async canAccessAsGuest(): Promise<boolean> {
if (!this.isGuestEnabled) {
throw Error('Guest access is not enabled.');
if (this.guestInstanceId === undefined) {
return false;
}
// Search instance ID of guest enrolment method.
const method = this.enrolmentMethods.find((method) => method.type == 'guest');
this.guestInstanceId = method?.id;
const info = await CoreCourses.getCourseGuestEnrolmentInfo(this.guestInstanceId);
if (this.guestInstanceId) {
const info = await CoreCourses.getCourseGuestEnrolmentInfo(this.guestInstanceId);
if (!info.status) {
// Not active, reject.
throw Error('Guest access is not enabled.');
}
return info.passwordrequired;
}
throw Error('Guest enrollment method not found.');
// Guest access with password is not supported by the app.
return !!info.status && !info.passwordrequired;
}
/**
@ -158,13 +148,14 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
this.selfEnrolInstances = [];
try {
this.enrolmentMethods = await CoreCourses.getCourseEnrolmentMethods(this.courseId);
const enrolmentMethods = await CoreCourses.getCourseEnrolmentMethods(this.courseId);
this.guestInstanceId = undefined;
this.enrolmentMethods.forEach((method) => {
enrolmentMethods.forEach((method) => {
if (method.type === 'self') {
this.selfEnrolInstances.push(method);
} else if (method.type === 'guest') {
this.isGuestEnabled = true;
this.guestInstanceId = method.id;
} else if (method.type === 'paypal') {
this.paypalEnabled = true;
}
@ -189,16 +180,8 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
this.useGuestAccess = false;
} catch {
// The user is not an admin/manager. Check if we can provide guest access to the course.
try {
this.canAccessCourse = !(await this.canAccessAsGuest());
this.useGuestAccess = this.canAccessCourse;
} catch {
this.canAccessCourse = false;
}
}
if (this.course && 'overviewfiles' in this.course && this.course.overviewfiles?.length) {
this.courseImageUrl = this.course.overviewfiles[0].fileurl;
this.canAccessCourse = await this.canAccessAsGuest();
this.useGuestAccess = this.canAccessCourse;
}
try {
@ -219,6 +202,8 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
// Ignore errors.
}
await this.setCourseColor();
if (!this.course ||
!('progress' in this.course) ||
typeof this.course.progress !== 'number' ||
@ -433,6 +418,37 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
CoreNavigator.navigateToSitePath(item.data.page, { params });
}
/**
* Set course color.
*/
protected async setCourseColor(): Promise<void> {
if (!this.course) {
return;
}
await CoreCoursesHelper.loadCourseColorAndImage(this.course);
if (!this.courseThumb) {
return;
}
if (this.course.color) {
this.courseThumb.nativeElement.style.setProperty('--course-color', this.course.color);
const tint = CoreColors.lighter(this.course.color, 50);
this.courseThumb.nativeElement.style.setProperty('--course-color-tint', tint);
} else if(this.course.colorNumber !== undefined) {
this.courseThumb.nativeElement.classList.add('course-color-' + this.course.colorNumber);
}
}
/**
* Toggle list of contacts.
*/
toggleContacts(): void {
this.contactsExpanded = !this.contactsExpanded;
}
/**
* Close the modal.
*/