Vmeda.Online/src/core/courses/pages/my-overview/my-overview.html

<ion-header>
    <ion-navbar>
        <ion-title>{{ 'core.courses.courseoverview' | translate }}</ion-title>

        <ion-buttons end>
            <button *ngIf="searchEnabled" ion-button icon-only (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
                <ion-icon name="search"></ion-icon>
            </button>
            <button *ngIf="tabShown == 'courses' && courses[courses.selected] && courses[courses.selected].length > 5" ion-button icon-only (click)="switchFilter()" [attr.aria-label]="'core.courses.filtermycourses' | translate">
                <ion-icon name="funnel"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

    <!-- @todo: Use a component to render the tabs. -->
    <div class="tabs tabs-striped tabs-free mm-tabs-color">
        <a ion-button class="tab-item" [class.active]="tabShown == 'timeline'" (click)="switchTab('timeline')">{{ 'core.courses.timeline' | translate }}</a>
        <a ion-button class="tab-item" [class.active]="tabShown == 'courses'" (click)="switchTab('courses')">{{ 'core.courses.courses' | translate }}</a>
    </div>

    <div padding>
        <ion-item class="mm-full-width-centered mm-timelinesort" [hidden]="tabShown != 'timeline' || !(timeline.loaded || timelineCourses.loaded)">
            <ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()">
                <ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option>
                <ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option>
            </ion-select>
        </ion-item>
        <core-loading [hideUntil]="timeline.loaded" [hidden]="tabShown != 'timeline' || timeline.sort != 'sortbydates'" class="mm-loading-center">
            <core-courses-overview-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMoreTimeline()"></core-courses-overview-events>
        </core-loading>
        <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="tabShown != 'timeline' || timeline.sort != 'sortbycourses'" class="block mm-loading-center">
            <div class="block mm-course-grid">
                <core-courses-course-progress *ngFor="let course of timelineCourses.courses" [course]="course" showSummary="true">
                    <core-courses-overview-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)"></core-courses-overview-events>
                </core-courses-course-progress>
            </div>
            <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesoverview' | translate"></core-empty-box>
        </core-loading>
        <core-loading [hideUntil]="courses.loaded" [hidden]="tabShown != 'courses'" class="mm-loading-center">
            <ion-row class="row-no-padding padding-bottom" [hidden]="showFilter">
                <ion-col col-11>
                    <ion-item class="mm-full-width-centered">
                        <ion-select [(ngModel)]="courses.selected">
                            <ion-option value="inprogress">{{ 'core.courses.inprogress' | translate }}</ion-option>
                            <ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option>
                            <ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option>
                        </ion-select>
                    </ion-item>
                </ion-col>
                <ion-col col-1 class="text-right" [hidden]="!courses[courses.selected] || !courses[courses.selected].length">
                    <!-- @todo: Download button. -->
                </ion-col>
            </ion-row>
            <div [hidden]="!showFilter" class="mm-filter-box">
                <button ion-button icon-only clear color="dark" (click)="switchFilter()">
                    <ion-icon name="close-circle"></ion-icon>
                </button>
                <ion-item>
                    <ion-input type="text" name="filter" [(ngModel)]="courses.filter" (ngModelChange)="filterChanged($event)" [placeholder]="'core.courses.filtermycourses' | translate"></ion-input>
                    <ion-icon name="funnel" class="placeholder-icon"></ion-icon>
                </ion-item>
            </div>

            <div [class.mm-course-grid]="showGrid">
                <core-courses-course-progress *ngFor="let course of filteredCourses" [course]="course" [showSummary]="showGrid"></core-courses-course-progress>
            </div>

            <core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'inprogress'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesinprogress' | translate"></core-empty-box>
            <core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'future'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesfuture' | translate"></core-empty-box>
            <core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'past'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursespast' | translate"></core-empty-box>
        </core-loading>
    </div>
</ion-content>