[chandu] Implemented snackbar

chandru415 · Nov 14, 2019 · 6b51bd5 · 6b51bd5
1 parent ffe82f2
commit 6b51bd5
Show file tree

Hide file tree

Showing 11 changed files with 216 additions and 38 deletions.
diff --git a/angular-ngrx-material-snackbar/package-lock.json b/angular-ngrx-material-snackbar/package-lock.json
diff --git a/angular-ngrx-material-snackbar/package.json b/angular-ngrx-material-snackbar/package.json
@@ -23,6 +23,7 @@
     "@angular/router": "~8.2.13",
     "@ngrx/effects": "^8.5.1",
     "@ngrx/store": "^8.5.1",
+    "@ngrx/store-devtools": "^8.5.1",
     "hammerjs": "^2.0.8",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",

diff --git a/angular-ngrx-material-snackbar/src/app/app.module.ts b/angular-ngrx-material-snackbar/src/app/app.module.ts
@@ -10,13 +10,20 @@ import { AppEffects } from './store/effects/app.effects';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SnackbarDemoComponent } from './components/snackbar-demo/snackbar-demo.component';
 import { SnackbarEffects } from './store/effects/snackbar.effects';
-import { MatSnackBarModule, MatButtonModule } from '@angular/material';
+import {
+  MatSnackBarModule,
+  MatButtonModule,
+  MatIconModule
+} from '@angular/material';
+import {
+  snackbarFeatureKey,
+  snackbarReducer
+} from './store/reducers/snackbar.reducer';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { environment } from '../environments/environment';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    SnackbarDemoComponent
-  ],
+  declarations: [AppComponent, SnackbarDemoComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
@@ -28,12 +35,18 @@ import { MatSnackBarModule, MatButtonModule } from '@angular/material';
         strictActionImmutability: true
       }
     }),
+    // StoreModule.forFeature(snackbarFeatureKey, snackbarReducer),
     EffectsModule.forRoot([AppEffects]),
     EffectsModule.forFeature([SnackbarEffects]),
+    StoreDevtoolsModule.instrument({
+      maxAge: 25,
+      logOnly: environment.production
+    }),
     MatSnackBarModule,
-    MatButtonModule
+    MatButtonModule,
+    MatIconModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/angular-ngrx-material-snackbar/src/app/components/snackbar-demo/snackbar-demo.component.html b/angular-ngrx-material-snackbar/src/app/components/snackbar-demo/snackbar-demo.component.html
@@ -1,5 +1,5 @@
 <div class="main">
-  <label>Angular Material Snackbar - Using NGRX Demo</label>
+  <label style="font-size: 1.5rem;">Angular Material Snackbar - Using NGRX Demo</label>
   <!-- Snackbar buttons -->
   <div class="button-row">
     <button mat-raised-button color="primary" (click)="openSuccess($event)">
@@ -15,7 +15,9 @@
   <!-- End of Snackbar buttons -->
   <!-- Snackbar buttons -->
   <div class="button-row">
-    <button mat-raised-button (click)="openEffect($event)">Via NGRX Effect</button>
+    <button mat-raised-button (click)="openEffect($event)">
+      Via NGRX Effect
+    </button>
   </div>
   <!-- End of Snackbar buttons -->
   <!-- link to the angular material snackbar -->
@@ -29,4 +31,19 @@
     >.</label
   >
   <!-- end link to the angular material snackbar -->
+  <footer class="footer">
+    <div class="footer-flex">
+      <a
+        href="https://github.com/chandru415/angular-ngrx-material-snackbar"
+        target="_blank"
+        title="View Source Code"
+      >
+        <i class="fa fa-github" aria-hidden="true"></i
+      ></a>
+      <p>
+        chandru415 <i class="fa fa-copyright" aria-hidden="true"></i> 2019 -
+        {{ copyright$ | async | date:'yyyy'}} MIT.
+      </p>
+    </div>
+  </footer>
 </div>
diff --git a/angular-ngrx-material-snackbar/src/app/components/snackbar-demo/snackbar-demo.component.scss b/angular-ngrx-material-snackbar/src/app/components/snackbar-demo/snackbar-demo.component.scss
@@ -135,6 +135,13 @@ $red: #ff0000; // red
       rgba(57, 57, 57, 0.01) 100%
     ),
     linear-gradient(90deg, hsl(237, 0%, 13%), hsl(237, 0%, 13%));
+
+    label {
+        color: $white;
+        text-align: center;
+        padding: 5%;
+        display: block;
+    }
 }
 
 label {
@@ -174,14 +181,23 @@ label {
   color: $white;
 }
 
-::ng-deep .sanckbar-info,
-.sanckbar-error,
-.sanckbar-success {
-  & button {
-    background-color: $transparent;
-    color: $white;
-    border: 1px solid;
-  }
+::ng-deep .mat-simple-snackbar-action {
+  background-color: $transparent;
+  color: $white !important;
+  border: 1px solid !important;
+  border-radius: 0.25rem;
+}
+
+::ng-deep .mat-simple-snackbar {
+  font-size: 10px;
+}
+
+::ng-deep .mat-button,
+.mat-flat-button,
+.mat-icon-button,
+.mat-stroked-button {
+  font-size: 10px;
+  line-height: 20px !important;
 }
 
 ::ng-deep .sanckbar-error {
@@ -194,3 +210,33 @@ label {
   color: $white;
 }
 /** End of Snack bar styles */
+
+.footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  color: $white;
+  text-align: center;
+  padding: 2%;
+  opacity: 0.6;
+
+  & a {
+    color: $white;
+  }
+
+  .footer-flex {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    a {
+      padding-top: 2px;
+      margin-right: 5px;
+    }
+
+    p {
+      font-size: 8px;
+    }
+  }
+}
diff --git a/angular-ngrx-material-snackbar/src/app/components/snackbar-demo/snackbar-demo.component.ts b/angular-ngrx-material-snackbar/src/app/components/snackbar-demo/snackbar-demo.component.ts
@@ -1,17 +1,74 @@
 import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { SnackbarState } from 'src/app/store/reducers/snackbar.reducer';
+import {
+  OpenSnackbars,
+  OpenSnackbarsFromEffect
+} from 'src/app/store/actions/snackbar.actions';
+import {
+  snackbarSUCCESS,
+  snackbarERROR,
+  snackbarINFO
+} from 'src/app/constants';
+import { of, Observable } from 'rxjs';
 
 @Component({
   selector: 'app-snackbar-demo',
   templateUrl: './snackbar-demo.component.html',
   styleUrls: ['./snackbar-demo.component.scss']
 })
 export class SnackbarDemoComponent implements OnInit {
-  constructor() {}
+  copyright$: Observable<Date> = of(new Date());
+
+  constructor(private sbStore: Store<SnackbarState>) {}
 
   ngOnInit() {}
 
-  openSuccess(event: any) {}
-  openInfo(event: any) {}
-  openError(event: any) {}
-  openEffect(event: any) {}
+  openSuccess(event: any) {
+    this.sbStore.dispatch(
+      OpenSnackbars({
+        config: {
+          message: 'You opened Success',
+          action: 'Close',
+          config: snackbarSUCCESS
+        }
+      })
+    );
+  }
+
+  openInfo(event: any) {
+    this.sbStore.dispatch(
+      OpenSnackbars({
+        config: {
+          message: 'You opened Info',
+          action: 'Close',
+          config: snackbarINFO
+        }
+      })
+    );
+  }
+
+  openError(event: any) {
+    this.sbStore.dispatch(
+      OpenSnackbars({
+        config: {
+          message: 'You opened Error',
+          action: 'Close',
+          config: snackbarERROR
+        }
+      })
+    );
+  }
+
+  openEffect(event: any) {
+    this.sbStore.dispatch(
+      OpenSnackbarsFromEffect({
+        config: {
+          message: 'You opened Snackar from effect',
+          action: 'Yep!',
+          config: snackbarSUCCESS
+        }
+      })
+    );
+  }
 }
diff --git a/angular-ngrx-material-snackbar/src/app/store/actions/snackbar.actions.ts b/angular-ngrx-material-snackbar/src/app/store/actions/snackbar.actions.ts
@@ -13,3 +13,20 @@ export const OpenSnackbars = createAction(
 );
 
 export const CloseSnackbars = createAction('[Snackbar] Close Snackbars');
+
+
+
+/** This is the example action - to trigger snackbar from effect
+ *  not related to the main confirguration
+ */
+export const OpenSnackbarsFromEffect = createAction(
+  '[Snackbar] Open Snackbars From Effect',
+  props<{
+    config: {
+      message: string;
+      action?: string;
+      config?: MatSnackBarConfig;
+    };
+  }>()
+);
+ /** End of example action */
diff --git a/angular-ngrx-material-snackbar/src/app/store/effects/snackbar.effects.ts b/angular-ngrx-material-snackbar/src/app/store/effects/snackbar.effects.ts
@@ -4,7 +4,7 @@ import { map, tap, delay } from 'rxjs/operators';
 
 import * as SnackbarActions from '../actions/snackbar.actions';
 import { MatSnackBar } from '@angular/material';
-import { CloseSnackbars } from '../actions/snackbar.actions';
+import { CloseSnackbars, OpenSnackbars } from '../actions/snackbar.actions';
 import { environment } from 'src/environments/environment';
 
 @Injectable()
@@ -30,5 +30,18 @@ export class SnackbarEffects {
     )
   );
 
+  /** This is the example effect - to trigger snackbar from effect
+   *  not related to the main confirguration
+   */
+
+  openSnackbarsFromEffect$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(SnackbarActions.OpenSnackbarsFromEffect),
+      map(action => OpenSnackbars({ config: action.config }))
+    )
+  );
+
+  /** End of example effect */
+
   constructor(private actions$: Actions, private matSnackBar: MatSnackBar) {}
 }
diff --git a/angular-ngrx-material-snackbar/src/app/store/reducers/snackbar.reducer.ts b/angular-ngrx-material-snackbar/src/app/store/reducers/snackbar.reducer.ts
@@ -1,8 +1,9 @@
 import { Action, createReducer, on } from '@ngrx/store';
 import * as SnackbarActions from '../actions/snackbar.actions';
+import * as fromRoot from '../../store/reducers';
 
 export const snackbarFeatureKey = 'snackbar';
-import * as fromRoot from '../../store/reducers';
+
 
 export interface State extends fromRoot.State {
   snackbarState: SnackbarState;

diff --git a/angular-ngrx-material-snackbar/src/environments/environment.ts b/angular-ngrx-material-snackbar/src/environments/environment.ts
@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  snackbarDelayTime: 10000
+  snackbarDelayTime: 3000
 };
 
 /*

diff --git a/angular-ngrx-material-snackbar/src/index.html b/angular-ngrx-material-snackbar/src/index.html
@@ -1,15 +1,23 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>AngularNgrxMaterialSnackbar</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularNgrxMaterialSnackbar</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700"
+      rel="stylesheet"
+    />
+    <link
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+      rel="stylesheet"
+      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>