feat: cleanup profile page

.changeset/forty-eagles-cough.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': patch
+---
+
+Add a way to hide action chips on list items

.changeset/pretty-wombats-double.md

@@ -0,0 +1,13 @@
+---
+'@openstapps/app': minor
+---
+
+Revamp "My Courses" section on profile page
+
+The "My Courses" section on the profile page has been improved
+
+- It will now show the upcoming courses for the next five days
+- The section header is now consistent with the other sections
+- The section now uses standard list items instead of the custom solution
+
+Additionally, the profile page component has been cleaned up.

.changeset/wet-houses-provide.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': minor
+---
+
+Use event title for date series instead of the generic date series title

frontend/app/src/app/modules/data/list/data-list-item.component.ts

@@ -38,6 +38,8 @@ export class DataListItemComponent {
 
   @Input() listItemEndInteraction = true;
 
+  @Input() listItemChipInteraction = true;
+
   @Input() lines = 'inset';
 
   @Input() forceHeight = false;

frontend/app/src/app/modules/data/list/data-list-item.html

@@ -43,7 +43,7 @@
     <div>
       <ng-template [dataListItemHost]="item"></ng-template>
       <stapps-action-chip-list
-        *ngIf="appearance !== 'square'"
+        *ngIf="listItemChipInteraction && appearance !== 'square'"
         slot="end"
         [item]="item"
       ></stapps-action-chip-list>

frontend/app/src/app/modules/data/types/date-series/date-series-list-item.html

@@ -17,7 +17,7 @@
   <ion-row>
     <ion-col>
       <div class="ion-text-wrap">
-        <ion-label class="title">{{ 'name' | thingTranslate : item }}</ion-label>
+        <ion-label class="title">{{ 'event.name' | thingTranslate : item }}</ion-label>
         <p>
           <ion-icon name="calendar_today"></ion-icon>
           <span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">

frontend/app/src/app/modules/profile/page/my-courses.component.ts

@@ -0,0 +1,70 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {mergeMap, ReplaySubject} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {SCDateSeries, SCISO8601Date} from '@openstapps/core';
+import moment from 'moment/moment';
+import {ScheduleProvider} from '../../calendar/schedule.provider';
+
+interface MyCoursesTodayInterface {
+  startTime: string;
+  endTime: string;
+  course: SCDateSeries;
+}
+
+type MyCoursesGroup = [SCISO8601Date, MyCoursesTodayInterface[]][];
+
+/**
+ * Groups date series into a list of events happening in the next days
+ * @param dateSeries the date series to group
+ * @param visibleDays the number of days ahead to group
+ */
+function groupDays(dateSeries: SCDateSeries[], visibleDays: number): MyCoursesGroup {
+  const courses: [SCISO8601Date, MyCoursesTodayInterface[]][] = [];
+  const dates = Array.from({length: visibleDays}, (_, i) => moment().startOf('day').add(i, 'days'));
+
+  for (const day of dates) {
+    const dayCourses: MyCoursesTodayInterface[] = [];
+    for (const course of dateSeries) {
+      for (const date of course.dates) {
+        if (moment(date).isSame(day, 'day')) {
+          dayCourses.push({
+            startTime: moment(date).toISOString(),
+            endTime: moment(date).add(course.duration).toISOString(),
+            course,
+          });
+        }
+      }
+    }
+    courses.push([day.toISOString(), dayCourses]);
+  }
+
+  return courses;
+}
+
+@Component({
+  selector: 'my-courses',
+  templateUrl: 'my-courses.html',
+  styleUrls: ['my-courses.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyCoursesComponent {
+  /**
+   * The number of days from today to display
+   */
+  @Input({required: true}) set visibleDays(value: number) {
+    this.visibleDays$.next(value);
+  }
+
+  readonly visibleDays$ = new ReplaySubject<number>();
+
+  myCourses = this.visibleDays$.pipe(
+    mergeMap(visibleDays =>
+      this.scheduleProvider.uuids$.pipe(
+        mergeMap(uuids => this.scheduleProvider.getDateSeries(uuids)),
+        map(dateSeries => groupDays(dateSeries.dates, visibleDays)),
+      ),
+    ),
+  );
+
+  constructor(private scheduleProvider: ScheduleProvider) {}
+}

frontend/app/src/app/modules/profile/page/my-courses.html

@@ -0,0 +1,35 @@
+<ion-accordion-group *ngIf="myCourses | async as myCourses" [value]="myCourses[0][0]">
+  <ion-accordion
+    *ngFor="let myCoursesDay of myCourses"
+    [value]="myCoursesDay[0]"
+    [disabled]="myCoursesDay[1].length === 0"
+  >
+    <ion-item slot="header">
+      <!-- TODO: when using date-fns, use https://date-fns.org/v2.30.0/docs/formatRelative -->
+      <ion-label
+        >{{ myCoursesDay[0] | amDateFormat: 'dddd, ll' }} - {{ ('profile.courses.' + (myCoursesDay[1].length
+        === 0 ? 'NO' : myCoursesDay[1].length === 1 ? 'ONE' : 'MANY' ) + '_EVENT') | translate: {count:
+        myCoursesDay[1].length} }}</ion-label
+      >
+      <ion-icon class="ion-accordion-toggle-icon" name="expand_more"></ion-icon>
+    </ion-item>
+    <ion-list class="ion-padding" slot="content">
+      <ng-container *ngIf="myCoursesDay[1].length === 0">
+        <div class="no-course">{{ 'profile.courses.no_courses' | translate }}</div>
+      </ng-container>
+      <ng-container *ngFor="let myCourse of myCoursesDay[1]">
+        <ion-item-group>
+          <ion-item-divider
+            >{{myCourse.startTime | amDateFormat: 'LT'}} - {{myCourse.endTime | amDateFormat:
+            'LT'}}</ion-item-divider
+          >
+          <stapps-data-list-item
+            [listItemChipInteraction]="false"
+            [hideThumbnail]="true"
+            [item]="myCourse.course"
+          ></stapps-data-list-item>
+        </ion-item-group>
+      </ng-container>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>

frontend/app/src/app/modules/profile/page/my-courses.scss

@@ -0,0 +1,9 @@
+ion-accordion-group {
+  overflow: hidden;
+  border-radius: var(--border-radius-default);
+}
+
+ion-item-divider {
+  --background: transparent;
+  --color: inherit;
+}

frontend/app/src/app/modules/profile/page/profile-page.component.ts

@@ -12,41 +12,20 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
-import {firstValueFrom, Observable, of, Subscription} from 'rxjs';
 import {AuthHelperService} from '../../auth/auth-helper.service';
-import {SCAuthorizationProviderType, SCDateSeries, SCUserConfiguration} from '@openstapps/core';
+import {SCAuthorizationProviderType, SCUserConfiguration} from '@openstapps/core';
 import {ActivatedRoute} from '@angular/router';
 import {ScheduleProvider} from '../../calendar/schedule.provider';
-import moment from 'moment';
-import {SCIcon} from '../../../util/ion-icon/icon';
 import {profilePageSections} from '../../../../config/profile-page-sections';
 import {filter, map} from 'rxjs/operators';
 
-const CourseCard = {
-  collapsed: SCIcon`expand_more`,
-  expanded: SCIcon`expand_less`,
-};
-
-interface MyCoursesTodayInterface {
-  startTime: string;
-  endTime: string;
-  course: SCDateSeries;
-}
-
 @Component({
   selector: 'app-home',
   templateUrl: 'profile-page.html',
   styleUrls: ['profile-page.scss'],
 })
-export class ProfilePageComponent implements OnInit {
+export class ProfilePageComponent {
-  data: {
-    [key in SCAuthorizationProviderType]: {loggedIn$: Observable<boolean>};
-  } = {
-    default: {loggedIn$: of(false)},
-    paia: {loggedIn$: of(false)},
-  };
-
   user$ = this.authHelper.getProvider('default').user$.pipe(
     filter(user => user !== undefined),
     map(userInfo => {
@@ -58,59 +37,18 @@ export class ProfilePageComponent implements OnInit {
 
   logins: SCAuthorizationProviderType[] = [];
 
-  originPath: string | null;
-
   userInfo?: SCUserConfiguration;
 
-  courseCardEnum = CourseCard;
-
-  courseCardState = CourseCard.expanded;
-
-  todayDate = moment().startOf('day').add(0, 'day').format(); // moment().startOf('day').format(); '2022-05-03T00:00:00+02:00'
-
-  myCoursesToday: MyCoursesTodayInterface[] = [];
-
-  subscriptions: Subscription[] = [];
-
   constructor(
-    private authHelper: AuthHelperService,
+    readonly authHelper: AuthHelperService,
-    private route: ActivatedRoute,
+    readonly activatedRoute: ActivatedRoute,
-    protected readonly scheduleProvider: ScheduleProvider,
+    readonly scheduleProvider: ScheduleProvider,
   ) {}
 
-  ngOnInit() {
-    this.data.default.loggedIn$ = this.authHelper.getProvider('default').isAuthenticated$;
-    this.data.paia.loggedIn$ = this.authHelper.getProvider('paia').isAuthenticated$;
-
-    this.subscriptions.push(
-      this.route.queryParamMap.subscribe(queryParameters => {
-        this.originPath = queryParameters.get('origin_path');
-      }),
-    );
-
-    this.getMyCourses();
-  }
-
-  async getMyCourses() {
-    const result = await firstValueFrom(this.scheduleProvider.uuids$);
-    const courses = await this.scheduleProvider.getDateSeries(result);
-
-    for (const course of courses.dates) {
-      for (const date of course.dates) {
-        if (moment(date).startOf('day').format() === this.todayDate) {
-          this.myCoursesToday[this.myCoursesToday.length] = {
-            startTime: moment(date).format('LT'),
-            endTime: moment(date).add(course.duration).format('LT'),
-            course,
-          };
-        }
-      }
-    }
-  }
-
   async signIn(providerType: SCAuthorizationProviderType) {
-    await this.handleOriginPath();
+    const originPath = this.activatedRoute.snapshot.queryParamMap.get('origin_path');
-    this.authHelper.getProvider(providerType).signIn();
+    await (originPath ? this.authHelper.setOriginPath(originPath) : this.authHelper.deleteOriginPath());
+    await this.authHelper.getProvider(providerType).signIn();
   }
 
   async signOut(providerType: SCAuthorizationProviderType) {
@@ -118,25 +56,6 @@ export class ProfilePageComponent implements OnInit {
     this.userInfo = undefined;
   }
 
-  toggleCourseCardState() {
-    if (this.courseCardState === CourseCard.expanded) {
-      const card: HTMLElement | null = document.querySelector('.course-card');
-      const height = card?.scrollHeight;
-      if (card && height) {
-        card.style.setProperty('--max-height', height + 'px');
-      }
-    }
-
-    this.courseCardState =
-      this.courseCardState === CourseCard.expanded ? CourseCard.collapsed : CourseCard.expanded;
-  }
-
-  private async handleOriginPath() {
-    this.originPath
-      ? await this.authHelper.setOriginPath(this.originPath)
-      : await this.authHelper.deleteOriginPath();
-  }
-
   ionViewWillEnter() {
     this.authHelper
       .getProvider('default')

frontend/app/src/app/modules/profile/page/profile-page.html

@@ -23,76 +23,53 @@
 </ion-header>
 
 <ion-content color="light" parallax [parallaxSize]="130">
-  <section class="user-card-wrapper">
+  <ion-card class="user-card">
-    <ion-card class="user-card">
+    <ion-card-header>
-      <ion-card-header>
+      <ion-img src="assets/imgs/header.svg"></ion-img>
-        <ion-img src="assets/imgs/header.svg"></ion-img>
+      <span *ngIf="user$ | async as userInfo">
-        <span *ngIf="user$ | async as userInfo">
+        {{ userInfo.role ? (userInfo?.role | titlecase) : ('profile.role_guest' | translate | titlecase) }}
-          {{ userInfo.role ? (userInfo?.role | titlecase) : ('profile.role_guest' | translate | titlecase) }}
+      </span>
-        </span>
+    </ion-card-header>
-      </ion-card-header>
+    <ion-card-content>
-      <ion-card-content>
+      <ion-img class="profile-card-img" src="assets/imgs/profile-card-head.svg"></ion-img>
-        <ion-img class="profile-card-img" src="assets/imgs/profile-card-head.svg"></ion-img>
+      <ion-grid>
-        <ion-grid>
+        <ion-row>
-          <ion-row>
+          <ion-col size="3"></ion-col>
-            <ion-col size="3"></ion-col>
+          <ion-col
-            <ion-col
+            *ngIf="authHelper.getProvider('default').isAuthenticated$ | async as loggedIn; else logInPrompt"
-              *ngIf="data.default.loggedIn$ | async as loggedIn; else logInPrompt"
+            size="9"
-              size="9"
+            class="main-info"
-              class="main-info"
+          >
-            >
+            <ng-container *ngIf="user$ | async as userInfo">
-              <ng-container *ngIf="user$ | async as userInfo">
+              <ion-text class="full-name"> {{ userInfo?.name }} </ion-text>
-                <ion-text class="full-name"> {{ userInfo?.name }} </ion-text>
+              <div class="matriculation-number">
-                <div class="matriculation-number">
+                <ion-label> {{ 'profile.userInfo.studentId' | translate | uppercase }} </ion-label>
-                  <ion-label> {{ 'profile.userInfo.studentId' | translate | uppercase }} </ion-label>
+                <ion-text> {{ userInfo?.studentId }} </ion-text>
-                  <ion-text> {{ userInfo?.studentId }} </ion-text>
+              </div>
-                </div>
+              <div class="user-name">
-                <div class="user-name">
+                <ion-label> {{ 'profile.userInfo.username' | translate | uppercase }} </ion-label>
-                  <ion-label> {{ 'profile.userInfo.username' | translate | uppercase }} </ion-label>
+                <ion-text>{{ userInfo?.id }}</ion-text>
-                  <ion-text>{{ userInfo?.id }}</ion-text>
+              </div>
-                </div>
+              <div class="email">
-                <div class="email">
+                <ion-label> {{ 'profile.userInfo.email' | translate | uppercase }} </ion-label>
-                  <ion-label> {{ 'profile.userInfo.email' | translate | uppercase }} </ion-label>
+                <ion-text> {{ userInfo?.email }} </ion-text>
-                  <ion-text> {{ userInfo?.email }} </ion-text>
+              </div>
-                </div>
+            </ng-container>
-              </ng-container>
+          </ion-col>
+          <ng-template #logInPrompt>
+            <ion-col size="9">
+              <ion-text class="log-in-prompt"> {{ 'profile.userInfo.logInPrompt' | translate }} </ion-text>
             </ion-col>
-            <ng-template #logInPrompt>
+          </ng-template>
-              <ion-col size="9">
+        </ion-row>
-                <ion-text class="log-in-prompt"> {{ 'profile.userInfo.logInPrompt' | translate }} </ion-text>
+      </ion-grid>
-              </ion-col>
+    </ion-card-content>
-            </ng-template>
+  </ion-card>
-          </ion-row>
-        </ion-grid>
-      </ion-card-content>
-    </ion-card>
-  </section>
   <stapps-profile-page-section
     *ngFor="let section of sections"
     [item]="section"
   ></stapps-profile-page-section>
-  <section class="courses">
+  <stapps-section [title]="'profile.titleCourses' | translate">
-    <ion-label class="section-headline"> {{ 'profile.titleCourses' | translate | uppercase }} </ion-label>
+    <my-courses [visibleDays]="5"></my-courses>
-    <ion-card class="courses-card">
+  </stapps-section>
-      <ion-card-header (click)="toggleCourseCardState()">
-        <span>{{ 'profile.courses.today' | translate | uppercase }}</span>
-        <ion-icon [name]="courseCardState" color="dark" size="20"></ion-icon>
-      </ion-card-header>
-      <ion-card-content class="course-card" [class.show-card]="courseCardState === courseCardEnum.expanded">
-        <ng-container *ngIf="myCoursesToday.length === 0">
-          <div class="no-course">{{ 'profile.courses.no_courses' | translate }}</div>
-        </ng-container>
-        <ng-container *ngFor="let myCourse of myCoursesToday">
-          <div class="clickable" [routerLink]="['/data-detail', myCourse.course.event.uid]">
-            <div>{{ myCourse?.startTime }} - {{ myCourse?.endTime }}</div>
-            <div>{{ myCourse?.course.event?.originalCategory }}</div>
-            <div [class.last]="!myCourse?.course.inPlace?.name">{{ myCourse.course?.event?.name }}</div>
-            <div *ngIf="myCourse.course?.inPlace?.name" [class.last]="myCourse.course?.inPlace?.name">
-              {{ myCourse.course?.inPlace.name }}
-            </div>
-          </div>
-        </ng-container>
-      </ion-card-content>
-    </ion-card>
-  </section>
 </ion-content>

frontend/app/src/app/modules/profile/page/profile-page.scss

@@ -12,216 +12,106 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-:host {
+// TODO: clean up this mess
-  section {
+.user-card {
-    margin-bottom: calc(2 * var(--spacing-lg) - var(--spacing-md));
+  position: relative;
-    padding: var(--spacing-md);
 
-    &:last-of-type {
+  max-width: 400px;
-      margin-bottom: 0;
+  margin: var(--spacing-xl);
-    }
-  }
 
-  .section-headline {
+  border-radius: var(--border-radius-default);
-    margin-bottom: var(--spacing-md);
+  box-shadow: var(--shadow-profile-card);
-  }
 
-  .user-card-wrapper {
+  ion-card-header {
-    margin-bottom: 0;
+    --background: var(--ion-color-tertiary);
 
-    .user-card {
+    display: flex;
-      position: relative;
-
-      max-width: 400px;
-      margin: 0;
-
-      border-radius: var(--border-radius-default);
-      box-shadow: var(--shadow-profile-card);
-
-      ion-card-header {
-        --background: var(--ion-color-tertiary);
-
-        display: flex;
-        align-items: center;
-        padding-top: var(--spacing-sm);
-        padding-bottom: var(--spacing-sm);
-
-        ion-img {
-          display: block;
-          height: 36px;
-          margin-right: auto;
-          object-position: left 50%;
-        }
-
-        span {
-          padding-top: 3px;
-
-          font-size: var(--font-size-lg);
-          font-weight: var(--font-weight-bold);
-          line-height: 1;
-          color: var(--ion-color-light);
-        }
-      }
-
-      ion-card-content {
-        min-height: 15vh;
-
-        .profile-card-img {
-          position: absolute;
-
-          width: 50%;
-          height: 100%;
-          margin-left: calc(var(--spacing-md) * -4);
-
-          opacity: 0.13;
-          object-position: left bottom;
-        }
-
-        .main-info {
-          display: grid;
-          grid-template-areas:
-            'fullName fullName'
-            'matriculationNumber userName'
-            'email email';
-
-          ion-label {
-            display: block;
-            font-size: var(--font-size-sm);
-            font-weight: var(--font-weight-bold);
-            color: var(--ion-color-medium-shade);
-          }
-
-          ion-text {
-            display: block;
-            font-size: var(--font-size-md);
-            font-weight: var(--font-weight-bold);
-            color: var(--ion-color-text);
-          }
-
-          .full-name {
-            display: block;
-            grid-area: fullName;
-
-            margin-bottom: var(--spacing-sm);
-
-            font-size: var(--font-size-lg);
-            font-weight: var(--font-weight-bold);
-          }
-
-          .matriculation-number {
-            grid-area: matriculationNumber;
-            margin-bottom: var(--spacing-sm);
-          }
-
-          .user-name {
-            grid-area: userName;
-            margin-bottom: var(--spacing-sm);
-          }
-
-          .email {
-            grid-area: email;
-          }
-        }
-
-        .log-in-prompt {
-          margin: auto 0;
-          font-size: var(--font-size-lg);
-          font-weight: var(--font-weight-semi-bold);
-          color: var(--ion-color-text);
-        }
-      }
-    }
-  }
-
-  ion-thumbnail {
     align-items: center;
+    padding-top: var(--spacing-sm);
+    padding-bottom: var(--spacing-sm);
 
-    width: 80%;
+    ion-img {
-    height: 80%;
-    margin: 0;
-    padding: 10px;
-
-    background: var(--placeholder-gray);
-    border-radius: var(--border-radius-default);
-
-    ion-icon {
       display: block;
-      width: 100%;
+      height: 36px;
-      height: 100%;
+      margin-right: auto;
-      color: white;
+      object-position: left 50%;
+    }
+
+    span {
+      padding-top: 3px;
+
+      font-size: var(--font-size-lg);
+      font-weight: var(--font-weight-bold);
+      line-height: 1;
+      color: var(--ion-color-light);
     }
   }
 
-  ion-row.main-info {
+  ion-card-content {
-    margin-bottom: 2px;
+    min-height: 15vh;
-    font-weight: bold;
-  }
 
-  .courses {
+    .profile-card-img {
-    .courses-card {
+      position: absolute;
-      max-width: 800px;
-      margin: 0;
 
-      background-color: unset;
+      width: 50%;
-      border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+      height: 100%;
-      box-shadow: none;
+      margin-left: calc(var(--spacing-md) * -4);
 
-      ion-card-header {
+      opacity: 0.13;
-        display: flex;
+      object-position: left bottom;
-        align-items: center;
+    }
-        justify-content: space-between;
 
-        background-color: var(--ion-item-background);
+    .main-info {
-        border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+      display: grid;
+      grid-template-areas:
+        'fullName fullName'
+        'matriculationNumber userName'
+        'email email';
 
-        span {
+      ion-label {
-          font-size: var(--font-size-lg);
+        display: block;
-          font-weight: var(--font-weight-bold);
+        font-size: var(--font-size-sm);
-          color: var(--ion-item-background-color-contrast);
+        font-weight: var(--font-weight-bold);
-        }
+        color: var(--ion-color-medium-shade);
-
-        ion-icon {
-          cursor: pointer;
-          color: var(--ion-color-light);
-        }
       }
 
-      ion-card-content {
+      ion-text {
-        overflow: hidden;
+        display: block;
-
+        font-size: var(--font-size-md);
-        max-height: 0;
+        font-weight: var(--font-weight-bold);
-        margin: 0;
+        color: var(--ion-color-text);
-        padding: 0;
-
-        background-color: var(--ion-item-background);
-        border-radius: var(--border-radius-default);
-
-        transition: max-height 250ms ease-in-out, padding 250ms ease-in-out, margin 250ms ease-in-out;
-
-        &.show-card {
-          display: block;
-
-          height: 100%;
-          max-height: var(--max-height);
-          margin: var(--spacing-xxl);
-          padding: var(--spacing-md);
-        }
-
-        div {
-          font-size: var(--font-size-md);
-          font-weight: var(--font-weight-black);
-          color: var(--ion-item-background-color-contrast);
-          text-align: center;
-
-          &.no-course {
-            padding: var(--spacing-xxl) var(--spacing-lg);
-          }
-
-          &.last {
-            margin-bottom: var(--spacing-xl);
-          }
-        }
       }
+
+      .full-name {
+        display: block;
+        grid-area: fullName;
+
+        margin-bottom: var(--spacing-sm);
+
+        font-size: var(--font-size-lg);
+        font-weight: var(--font-weight-bold);
+      }
+
+      .matriculation-number {
+        grid-area: matriculationNumber;
+        margin-bottom: var(--spacing-sm);
+      }
+
+      .user-name {
+        grid-area: userName;
+        margin-bottom: var(--spacing-sm);
+      }
+
+      .email {
+        grid-area: email;
+      }
+    }
+
+    .log-in-prompt {
+      margin: auto 0;
+      font-size: var(--font-size-lg);
+      font-weight: var(--font-weight-semi-bold);
+      color: var(--ion-color-text);
     }
   }
 }

frontend/app/src/app/modules/profile/profile.module.ts

@@ -12,7 +12,6 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
@@ -25,6 +24,9 @@ import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {ProfilePageSectionComponent} from './page/profile-page-section.component';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
+import {DataModule} from '../data/data.module';
+import {MyCoursesComponent} from './page/my-courses.component';
+import {MomentModule} from 'ngx-moment';
 
 const routes: Routes = [
   {
@@ -34,7 +36,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [ProfilePageComponent, ProfilePageSectionComponent],
+  declarations: [MyCoursesComponent, ProfilePageComponent, ProfilePageSectionComponent],
   imports: [
     CommonModule,
     FormsModule,
@@ -45,6 +47,8 @@ const routes: Routes = [
     SwiperModule,
     UtilModule,
     ThingTranslateModule,
+    DataModule,
+    MomentModule,
   ],
 })
 export class ProfilePageModule {}

frontend/app/src/assets/i18n/de.json

@@ -501,8 +501,10 @@
       "logInPrompt": "Bitte loggen Sie sich ein, um Ihre Nutzerdaten sehen zu können."
     },
     "courses": {
-      "today": "Heute",
+      "no_courses": "Heute stehen keine Termine mehr an.",
-      "no_courses": "Heute stehen keine Termine mehr an."
+      "NO_EVENT": "Keine Termine",
+      "ONE_EVENT": "Ein Termin",
+      "MANY_EVENT": "{{count}} Termine"
     }
   },
   "settings": {

frontend/app/src/assets/i18n/en.json

@@ -501,8 +501,10 @@
       "logInPrompt": "Please log in to view your user data."
     },
     "courses": {
-      "today": "Today",
+      "no_courses": "There are no more appointments scheduled today.",
-      "no_courses": "There are no more appointments scheduled today."
+      "NO_EVENT": "no events",
+      "ONE_EVENT": "one event",
+      "MANY_EVENT": "{{count}} events"
     }
   },
   "settings": {