89 lines
4.9 KiB
HTML
89 lines
4.9 KiB
HTML
<ion-item-divider sticky="true">
|
|
<ion-label>
|
|
<h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
|
|
</ion-label>
|
|
<div slot="end" class="flex-row">
|
|
<!-- Download all courses. -->
|
|
<div *ngIf="downloadCoursesEnabled && filteredCourses.length > 1" class="core-button-spinner">
|
|
<ion-button *ngIf="!prefetchCoursesData.loading" fill="clear" color="dark" (click)="prefetchCourses()"
|
|
[attr.aria-label]="prefetchCoursesData.statusTranslatable | translate">
|
|
<ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true">
|
|
</ion-icon>
|
|
</ion-button>
|
|
<ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge" role="progressbar"
|
|
[attr.aria-valuemax]="prefetchCoursesData.total" [attr.aria-valuenow]="prefetchCoursesData.count"
|
|
[attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
|
|
{{prefetchCoursesData.badge}}
|
|
</ion-badge>
|
|
<ion-spinner *ngIf="prefetchCoursesData.loading" [attr.aria-label]="'core.loading' | translate">
|
|
</ion-spinner>
|
|
</div>
|
|
</div>
|
|
</ion-item-divider>
|
|
<core-loading [hideUntil]="loaded" [fullscreen]="false">
|
|
|
|
<ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center" *ngIf="hasCourses">
|
|
<ion-col size="auto" class="ion-no-padding" *ngIf="filters.enabled">
|
|
<core-combobox interface="modal" [label]="'core.courses.filtermycourses' | translate" (onChange)="filterOptionsChanged($event)"
|
|
icon="fas-filter" [badge]="filters.count" [modalOptions]="filterModalOptions">
|
|
</core-combobox>
|
|
</ion-col>
|
|
<ion-col class="ion-no-padding">
|
|
<!-- Filter courses. -->
|
|
<ion-searchbar class="ion-hide-md-down" [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
|
|
(ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">
|
|
</ion-searchbar>
|
|
</ion-col>
|
|
<ion-col size="auto" class="ion-no-padding" *ngIf="sort.enabled">
|
|
<core-combobox [label]="'core.sortby' | translate" [selection]="sort.selected" (onChange)="sortCourses($event)"
|
|
icon="fas-sort-amount-down-alt">
|
|
<ion-select-option class="ion-text-wrap" value="fullname">
|
|
{{'addon.block_myoverview.title' | translate}}
|
|
</ion-select-option>
|
|
<ion-select-option class="ion-text-wrap" value="shortname" *ngIf="sort.shortnameEnabled">
|
|
{{'addon.block_myoverview.shortname' | translate}}
|
|
</ion-select-option>
|
|
<ion-select-option class="ion-text-wrap" value="lastaccess">
|
|
{{'addon.block_myoverview.lastaccessed' | translate}}
|
|
</ion-select-option>
|
|
</core-combobox>
|
|
</ion-col>
|
|
<ion-col size="auto" class="ion-no-padding" *ngIf="isLayoutSwitcherAvailable">
|
|
<ion-button *ngIf="layout == 'card'" fill="outline" (click)="toggleLayout('list')"
|
|
[attr.aria-label]="'addon.block_myoverview.list' | translate">
|
|
<ion-icon slot="icon-only" name="fas-list"></ion-icon>
|
|
</ion-button>
|
|
<ion-button *ngIf="layout == 'list'" fill="outline" (click)="toggleLayout('card')"
|
|
[attr.aria-label]="'addon.block_myoverview.card' | translate">
|
|
<ion-icon slot="icon-only" name="fas-th"></ion-icon>
|
|
</ion-button>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row class="ion-no-padding ion-hide-md-up" *ngIf="hasCourses">
|
|
<ion-col class="ion-no-padding">
|
|
<!-- Filter courses. -->
|
|
<ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
|
|
(ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">
|
|
</ion-searchbar>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<core-empty-box *ngIf="filteredCourses.length == 0" image="assets/img/icons/courses.svg"
|
|
[message]="'addon.block_myoverview.nocourses' | translate" inline="true">
|
|
</core-empty-box>
|
|
|
|
<!-- List of courses. -->
|
|
<div class="safe-area-padding" *ngIf="hasCourses">
|
|
<ion-grid class="ion-no-padding" [class.core-no-grid]="layout != 'card'" [class.list-item-limited-width]="layout != 'card'">
|
|
<ion-row class="ion-no-padding">
|
|
<ion-col *ngFor="let course of filteredCourses" class="ion-no-padding" size="12" size-sm="6" size-md="6" size-lg="4"
|
|
size-xl="3">
|
|
<core-courses-course-list-item [course]="course" class="core-courseoverview" [showDownload]="downloadCourseEnabled"
|
|
[layout]="layout">
|
|
</core-courses-course-list-item>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div>
|
|
</core-loading>
|