Merge pull request #242 from joie:build-snackbar

feat(snackbar): global settings for snackbar
joie · Nov 28, 2020 · 86df15b · 86df15b
2 parents e743002 + 914d7d9
commit 86df15b
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 30 deletions.
diff --git a/apps/joie/src/app/core/material.module.ts b/apps/joie/src/app/core/material.module.ts
@@ -26,13 +26,16 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
+import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
+const snackBarOptions = { duration: 4000, horizontalPosition: 'end', verticalPosition: 'top' };
 @NgModule({
   imports: [
     OverlayModule,
@@ -67,6 +70,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatStepperModule,
     MatSidenavModule,
     MatIconModule,
+    MatSnackBarModule,
     CdkStepperModule,
   ],
   exports: [
@@ -102,8 +106,9 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatStepperModule,
     MatSidenavModule,
     MatIconModule,
-
+    MatSnackBarModule,
     CdkStepperModule,
   ],
+  providers: [{ provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: snackBarOptions }],
 })
 export class MaterialModule {}
diff --git a/apps/joie/src/app/session-form/containers/session-form/session-form.component.ts b/apps/joie/src/app/session-form/containers/session-form/session-form.component.ts
@@ -103,15 +103,8 @@ export class SessionFormComponent extends DynaFormBaseComponent implements OnIni
           .subscribe(
             (res) => {
               this.showLoader = false;
-              this.snackBar.open(
-                `Session ${get(this.data, 'sessionId', false) ? 'updated' : 'created'} successfully`,
-                'View',
-                {
-                  duration: 4000,
-                  horizontalPosition: 'end',
-                  verticalPosition: 'bottom',
-                },
-              );
+              const sessionId = get(this.data, 'sessionId', false);
+              this.snackBar.open(`Session ${sessionId ? 'updated' : 'created'} successfully`, 'View');
               if (!get(this.data, 'session', false)) {
                 this.form.reset();
               }

diff --git a/apps/joie/src/app/session-form/session-form.module.ts b/apps/joie/src/app/session-form/session-form.module.ts
@@ -20,7 +20,6 @@ import { SessionFormDateTimeComponent } from './components/session-form-date-tim
 import { SessionFormComponent } from './containers/session-form/session-form.component';
 import { KalturaPlayerModule } from '../kaltura-player/kaltura-player.module';
 import { SessionFormRepetitionsComponent } from './components/session-form-repetitions/session-form-repetitions.component';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { SessionFormDurationComponent } from './components/session-form-duration/session-form-duration.component';
 
 @NgModule({
@@ -44,7 +43,6 @@ import { SessionFormDurationComponent } from './components/session-form-duration
     MatSelectModule,
     MatInputModule,
     MatNativeDateModule,
-    MatSnackBarModule,
     DynaFormModule,
     KalturaPlayerModule,
   ],

diff --git a/apps/joie/src/app/session-list/components/session-list/session-list.component.html b/apps/joie/src/app/session-list/components/session-list/session-list.component.html
@@ -1,3 +1,3 @@
 <ng-container *ngIf="sessionsSnapshots$ | async as snapshots">
-  <app-session-card *ngFor="let snapshot of snapshots" [session]="snapshot.data()"></app-session-card>
+  <app-session-card *ngFor="let snapshot of snapshots" [session]="getData(snapshot)"></app-session-card>
 </ng-container>
diff --git a/apps/joie/src/app/session-list/components/session-list/session-list.component.ts b/apps/joie/src/app/session-list/components/session-list/session-list.component.ts
@@ -29,6 +29,11 @@ export class SessionListComponent implements OnInit {
     );
   }
 
+  getData(snapshot: QueryDocumentSnapshot<Session>) {
+    const { id } = snapshot;
+    return { ...snapshot.data(), id };
+  }
+
   private initListQuery() {
     queryFn$.next(
       (ref: CollectionReference): firebase.firestore.Query<firebase.firestore.DocumentData> =>
@@ -45,7 +50,6 @@ export class SessionListComponent implements OnInit {
     queryFn$.next(
       (ref: CollectionReference): firebase.firestore.Query<firebase.firestore.DocumentData> =>
         this.optionalQueryFn(ref)
-
           .where('status', '==', Status.Public)
           .orderBy(this.#field)
           .startAfter(last)

diff --git a/...joie/src/app/sessions/components/session-enroll-dialog/session-enroll-dialog.component.ts b/...joie/src/app/sessions/components/session-enroll-dialog/session-enroll-dialog.component.ts
@@ -25,17 +25,9 @@ export class SessionEnrollDialogComponent {
     const resp = await this.paymentService.sessionCharge(this.sessionId).toPromise();
     this.dialogRef.close();
     if (resp && resp.type === 'success') {
-      this.snackBar.open(`Session Enrolment sucessful`, 'Close', {
-        duration: 4000,
-        horizontalPosition: 'end',
-        verticalPosition: 'bottom',
-      });
+      this.snackBar.open(`Session Enrolment sucessful`, 'Close');
       return;
     }
-    this.snackBar.open(`Session Enrolment failed`, 'Close', {
-      duration: 4000,
-      horizontalPosition: 'end',
-      verticalPosition: 'bottom',
-    });
+    this.snackBar.open(`Session Enrolment failed`, 'Close');
   }
 }
diff --git a/apps/joie/src/app/sessions/components/session-owner-links/session-owner-links.component.ts b/apps/joie/src/app/sessions/components/session-owner-links/session-owner-links.component.ts
@@ -44,11 +44,7 @@ export class SessionOwnerLinksComponent {
     if (type === 'success') {
       this.router.navigate(['/account', 'sessions']);
     }
-    this.snackBar.open(message, undefined, {
-      duration: 8000,
-      horizontalPosition: 'end',
-      verticalPosition: 'bottom',
-    });
+    this.snackBar.open(message, undefined);
   }
 
   @Confirmable(

diff --git a/apps/joie/src/app/sessions/containers/session-details/session-details.component.ts b/apps/joie/src/app/sessions/containers/session-details/session-details.component.ts
@@ -14,7 +14,7 @@ import { Pillar, PillarsIconsMap } from '../../../../../../../libs/schemes/src';
 })
 export class SessionDetailsComponent {
   sessionId$: Observable<string> = this.activatedRoute.params.pipe(pluck('sessionId'));
-  session$ = this.sessionId$.pipe(switchMap(this.sessionsFacade.getSession), shareReplay(1));
+  session$ = this.sessionId$.pipe(switchMap(this.sessionsFacade.getSession.bind(this.sessionsFacade)), shareReplay(1));
   owner$ = this.session$.pipe(pluck('owner'), shareReplay(1));
   sessionOwnerId$ = this.owner$.pipe(pluck('uid'), shareReplay(1));
   isOwner$ = this.sessionOwnerId$.pipe(