feat(@multi-frontend/calendar): visualisation alternative pour le widget

CHANGELOG.md

@@ -12,6 +12,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **(widgets)**: les widgets tiennent désormais compte de l'Ionicon ou bien des icônes SVG renseignées du côté du CMS et les affichent à côté du titre de la Widget
 
 #### New features
+* **(calendar)** : Il est désormais possible de choisir entre 2 affichages pour la widget des évènements du calendrier :
+  * Liste verticale (list)
+  * Slider horizontal (slider)
 * **(schedule)** : Il est désormais possible de choisir entre 2 affichages pour la widget des prochains cours à venir :
   * Liste verticale (list)
   * Slider horizontal (slider)

dev/user-frontend-ionic/projects/calendar/README.md

@@ -1,22 +1,19 @@
 # Calendar
 Module permettant d'afficher un calendrier avec les prochains événements sur la page d'accueil.
 
-## Widget
-- `calendar` : Widget qui affiche les prochains évènements de l'agenda de l'utilisateur.
-
 ## Configuration
-Exemple dans `app.module.ts` :
+Exemple dans `environment.ts` :
 
 ```typescript
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    CalendarModule.forRoot({
-      numberOfEventsLimit: 3
-    })
-  ]
+CalendarModule.forRoot({
+  numberOfEventsLimit: 3,
+  display: 'slider'
 })
 ```
 
+## Widget
+- `calendar` : Widget qui affiche les prochains évènements de l'agenda de l'utilisateur.
+
 ### Configuration du widget
 - `numberOfEventsLimit` : nombre maximum des prochains évènements à afficher.
+- `display` : ("list" | "slider") : choix de la vue, en liste ou en ligne

dev/user-frontend-ionic/projects/calendar/src/lib/calendar.config.ts

@@ -41,6 +41,7 @@ import { InjectionToken } from '@angular/core';
 
 export interface CalendarModuleConfig {
   numberOfEventsLimit: number;
+  display: "list" | "slider";
 }
 
 export const CALENDAR_CONFIG =

dev/user-frontend-ionic/projects/calendar/src/lib/calendar.module.ts

@@ -38,11 +38,12 @@
  */
 
 import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
-import { ProjectModuleService } from '@multi/shared';
+import { LocalHourPipe, ProjectModuleService, SharedPipeModule } from '@multi/shared';
 import { CalendarComponent } from './widget/calendar/calendar.component';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
+import { CompleteLocalDatePipe } from '@multi/shared';
 import { LocalDatePipe } from './common/pipe/local-date.pipe';
 import { LocalTimePipe } from './common/pipe/local-time.pipe';
 import { CALENDAR_CONFIG, CalendarModuleConfig } from './calendar.config';
@@ -66,14 +67,18 @@ const initModule = (projectModuleService: ProjectModuleService) =>
   imports: [
     CommonModule,
     IonicModule,
-    TranslateModule
+    TranslateModule,
+    SharedPipeModule
   ],
   providers: [{
     provide: APP_INITIALIZER,
     useFactory: initModule,
     deps:[ProjectModuleService],
     multi: true
-  }],
+  },
+    CompleteLocalDatePipe,
+    LocalHourPipe
+  ],
 })
 export class CalendarModule {
   static forRoot(config: CalendarModuleConfig): ModuleWithProviders<CalendarModule> {

dev/user-frontend-ionic/projects/calendar/src/lib/widget/calendar/calendar.component.html

@@ -37,26 +37,77 @@
   ~ termes.
   -->
 
-<ion-row *ngIf="isLoading">
-  <ion-spinner class="ion-margin safe-area-lr-ionic-margin" name="dots"></ion-spinner>
-</ion-row>
-<ng-container *ngIf='!isLoading'>
-  <ng-container *ngIf='(nextEvents$ | async) as events'>
-    <ion-row *ngIf='events.length === 0' class="ion-padding">
-      <ion-text [ngClass]="fontColor()" class='app-text-4 safe-area-padding-lr'>{{'CALENDAR.NO_EVENTS' | translate}}</ion-text>
+<ng-container *ngTemplateOutlet="getTemplateRef()"></ng-container>
+
+<ng-template #list>
+  <ion-row class="calendar-list-style">
+
+    <ion-row *ngIf="isLoading">
+      <ion-spinner class="ion-margin safe-area-lr-ionic-margin" name="dots"></ion-spinner>
     </ion-row>
-    <ion-col [ngClass]="fontColor()" *ngFor='let event of events let i = index' class='events-container'>
-      <ion-row class='event'>
-        <ion-col class='event-part event-part-date safe-area-padding-lr'>
-          <ion-text [ngClass]="fontColor()" class='app-text-1'>{{event.startDateTime | localDate}}</ion-text>
-          <ion-text [ngClass]="fontColor()" class='app-text-6'>{{event.startDateTime | localTime}}-{{event.endDateTime | localTime}}</ion-text>
-        </ion-col>
-        <ion-col class='event-part event-part-info safe-area-padding-lr'>
-          <ion-text [ngClass]="fontColor()" class='app-text-4 strong'>{{event.label}}</ion-text>
-          <ion-text [ngClass]="fontColor()" class='app-text-4'>{{event.location}}</ion-text>
+    <ng-container *ngIf='!isLoading'>
+      <ng-container *ngIf='(nextEvents$ | async) as events'>
+        <ion-row *ngIf='events.length === 0' class="ion-padding">
+          <ion-text [ngClass]="fontColor()" class='app-text-4 safe-area-padding-lr'>{{'CALENDAR.NO_EVENTS' | translate}}</ion-text>
+        </ion-row>
+        <ion-col [ngClass]="fontColor()" *ngFor='let event of events let i = index' class='events-container'>
+          <ion-row class='event'>
+            <ion-col class='event-part event-part-date safe-area-padding-lr'>
+              <ion-text [ngClass]="fontColor()" class='app-text-1'>{{event.startDateTime | localDate}}</ion-text>
+              <ion-text [ngClass]="fontColor()" class='app-text-6'>{{event.startDateTime | localTime}}-{{event.endDateTime | localTime}}</ion-text>
+            </ion-col>
+            <ion-col class='event-part event-part-info safe-area-padding-lr'>
+              <ion-text [ngClass]="fontColor()" class='app-text-4 strong'>{{event.label}}</ion-text>
+              <ion-text [ngClass]="fontColor()" class='app-text-4'>{{event.location}}</ion-text>
+            </ion-col>
+          </ion-row>
+          <hr  *ngIf='i !== events.length - 1'>
         </ion-col>
-      </ion-row>
-      <hr  *ngIf='i !== events.length - 1'>
-    </ion-col>
-  </ng-container>
-</ng-container>
+      </ng-container>
+    </ng-container>
+
+  </ion-row>
+</ng-template>
+
+
+<ng-template #slider>
+  <ion-row class="calendar-slider-style">
+
+    <ion-row *ngIf="isLoading">
+      <ion-spinner class="ion-margin safe-area-lr-ionic-margin" name="dots"></ion-spinner>
+    </ion-row>
+
+    <ng-container *ngIf='!isLoading'>
+      <ng-container *ngIf='(nextEvents$ | async) as events'>
+        <ion-row *ngIf='events.length === 0; else sliderInnerContainer' class="ion-padding">
+          <ion-text [ngClass]="fontColor()" class='app-text-4 safe-area-padding-lr'>{{'CALENDAR.NO_EVENTS' | translate}}</ion-text>
+        </ion-row>
+        <ng-template #sliderInnerContainer>
+          <ion-row class="events-container">
+            <ion-card *ngFor="let event of events" class="ion-no-margin slider-theme-color">
+              <ion-card-content>
+                <ion-row class="event-day-hour">
+                  <ion-text class="hour app-title-2 slider-font-color">{{event.startDateTime | localHour}} - {{event.endDateTime | localHour}}</ion-text>
+                  <ng-container *ngIf="(event.startDateTime | completeLocalDate) as completeLocalDate">
+                    <ion-row class="day app-text-4 slider-font-color">
+                      <ion-text>{{completeLocalDate | slice: 0:completeLocalDate.indexOf(' ')}}</ion-text>
+                      <ion-text>{{completeLocalDate | slice: completeLocalDate.indexOf(' ')}}</ion-text>
+                    </ion-row>
+                  </ng-container>
+                </ion-row>
+                <ion-text class="app-title-5 event-label slider-font-color">{{event.label}}</ion-text>
+                <ion-row *ngIf="event.location" class="event-additional">
+                  <ion-row class="ion-align-items-center card-labels">
+                    <ion-icon class="card-labels-icons slider-font-color" name="business-outline" aria-label=""></ion-icon>
+                    <ion-text class="app-title-6 light slider-font-color">{{event.location}}</ion-text>
+                  </ion-row>
+                </ion-row>
+              </ion-card-content>
+            </ion-card>
+          </ion-row>
+        </ng-template>
+      </ng-container>
+    </ng-container>
+
+  </ion-row>
+</ng-template>

dev/user-frontend-ionic/projects/calendar/src/lib/widget/calendar/calendar.component.ts

@@ -37,12 +37,13 @@
  * termes.
  */
 
-import { AfterViewInit, ChangeDetectorRef, Component, Input } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, Inject, Input, TemplateRef, ViewChild } from '@angular/core';
 import { ThemeService } from '@multi/shared';
 import { Observable } from 'rxjs';
 import { finalize, take } from 'rxjs/operators';
 import { MailCalendarEvents } from '../../calendar.repository';
 import { CalendarService } from '../../calendar.service';
+import { CALENDAR_CONFIG, CalendarModuleConfig } from '../../calendar.config';
 
 @Component({
   selector: 'app-calendar-widget',
@@ -52,13 +53,16 @@ import { CalendarService } from '../../calendar.service';
 export class CalendarComponent implements AfterViewInit{
 
   @Input() widgetColor: string;
+  @ViewChild('list') list!: TemplateRef<any>;
+  @ViewChild('slider') slider!: TemplateRef<any>;
 
   public isLoading = false;
   public nextEvents$: Observable<MailCalendarEvents>;
 
   constructor(private calendarService: CalendarService,
     private themeService: ThemeService,
-    private changeDetectorRef: ChangeDetectorRef) {
+    private changeDetectorRef: ChangeDetectorRef,
+    @Inject(CALENDAR_CONFIG) private config: CalendarModuleConfig) {
     this.nextEvents$ = this.calendarService.getNextEvents$();
   }
 
@@ -80,4 +84,8 @@ export class CalendarComponent implements AfterViewInit{
     return this.themeService.isBackgroundFromCmsDarkOrIsDarkTheme(this.widgetColor) ?
       'light-font-color' : 'dark-font-color';
   }
+
+  getTemplateRef(): TemplateRef<any> {
+    return this[this?.config.display];
+  }
 }

dev/user-frontend-ionic/projects/schedule/src/lib/schedule.module.ts

@@ -44,9 +44,8 @@ import { FullCalendarModule } from '@fullcalendar/angular'; // must go before pl
 import { IonicModule } from '@ionic/angular';
 import { EffectsNgModule } from '@ngneat/effects-ng';
 import { TranslateModule } from '@ngx-translate/core';
-import { CompleteLocalDatePipe, ProjectModuleService, SharedComponentsModule, SharedPipeModule } from '@multi/shared';
+import { CompleteLocalDatePipe, LocalHourPipe, ProjectModuleService, SharedComponentsModule, SharedPipeModule } from '@multi/shared';
 import { EventDetailComponent } from './common/event-detail/event-detail.component';
-import { LocalHourPipe } from './common/pipe/local-hour.pipe';
 import { ShortenedDatePipe } from './common/pipe/shortened-date.pipe';
 import { HiddenCourseComponent } from './common/select-planning/hidden-course/hidden-course.component';
 import { SelectPlanningComponent } from './common/select-planning/select-planning.component';
@@ -81,7 +80,6 @@ const initModule = (projectModuleService: ProjectModuleService) =>
     SchedulePage,
     ScheduleListPage,
     ScheduleCalendarComponent,
-    LocalHourPipe,
     ShortenedDatePipe,
     EventDetailComponent,
     SelectPlanningComponent,
@@ -108,7 +106,8 @@ const initModule = (projectModuleService: ProjectModuleService) =>
     deps: [ProjectModuleService],
     multi: true
   },
-    CompleteLocalDatePipe
+    CompleteLocalDatePipe,
+    LocalHourPipe
   ],
 })
 export class ScheduleModule {

dev/user-frontend-ionic/projects/shared/src/lib/pipe/shared-pipe.module.ts

@@ -44,17 +44,20 @@ import { TranslateModule } from '@ngx-translate/core';
 import { CompleteLocalDatePipe } from './complete-local-date-pipe';
 import { RelativeTimePipe } from './relative-time-pipe';
 import { TruncatePipe } from './truncate-pipe';
+import { LocalHourPipe } from './local-hour.pipe';
 
 @NgModule({
   declarations: [
     RelativeTimePipe,
     TruncatePipe,
-    CompleteLocalDatePipe
+    CompleteLocalDatePipe,
+    LocalHourPipe
   ],
   exports: [
     RelativeTimePipe,
     TruncatePipe,
-    CompleteLocalDatePipe
+    CompleteLocalDatePipe,
+    LocalHourPipe
   ],
   imports: [
     CommonModule,

dev/user-frontend-ionic/projects/shared/src/public-api.ts

@@ -70,6 +70,7 @@ export * from './lib/network/network.service';
 export * from './lib/notifications/notifications.repository';
 export * from './lib/notifications/notifications.service';
 export * from './lib/pipe/complete-local-date-pipe';
+export * from './lib/pipe/local-hour.pipe';
 export * from './lib/pipe/relative-time-pipe';
 export * from './lib/pipe/shared-pipe.module';
 export * from './lib/pipe/truncate-pipe';

dev/user-frontend-ionic/src/environments/environment.ts.dist

@@ -75,7 +75,10 @@ export const environment: any = {
   appVersion: '1.0.0',
   enabledModules: [
     AuthModule,
-    CalendarModule.forRoot({ numberOfEventsLimit: 3 }),
+    CalendarModule.forRoot({
+      numberOfEventsLimit: 3,
+      display: 'list',
+    }),
     CardsPageModule.forRoot({ knownErrors: ['NO_PHOTO', 'NO_ACTIVE_CARD', 'UNPAID_FEES'] }),
     ChatbotModule.forRoot({ chatbotLogoRegex: /_chacha5/i }),
     ClockingModule,