Custom Notification

ng6-seed/src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpModule, Http } from '@angular/http';
 import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS} from '@angular/common/http';
 
@@ -64,6 +64,9 @@ import { VideoChatComponent } from './video-chat/video-chat.component'
 import { PushNotifyService } from './shared/push-notify.service';
 import { MatVideoModule } from 'mat-video';
 import { ReqTokenInterceptor } from './_guard/req-token.interceptor';
+import { DynamicNotifyComponent } from './layouts/dynamic-notify/dynamic-notify.component';
+import { SelectAllComponent } from './select-all/select-all.component';
+import { CustomNotificationComponent } from './layouts/custom-notification/custom-notification.component';
 //import { OtpComponent } from './session/otp/otp.component';
 
 
@@ -87,9 +90,10 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     AdminLayoutComponent,
     AuthLayoutComponent,
     NewPasswordDialog,ForgotPass,ChangePasswordDialog, RoleMenuItemsPipe, HttpLoaderComponent,
-     IncomingCallComponent, VideoChatComponent 
+     IncomingCallComponent, VideoChatComponent, DynamicNotifyComponent, SelectAllComponent, CustomNotificationComponent 
   ],
   imports: [
+    ReactiveFormsModule,
     MatDialogModule,
     BrowserModule,
     BrowserAnimationsModule,
@@ -116,6 +120,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     MatFormFieldModule,
     HttpClientModule,
     ResizableModule,
+    
     TranslateModule.forRoot({
         loader: {
             provide: TranslateLoader,
@@ -151,7 +156,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     },
     MessagingService, AsyncPipe,LoaderService
   ],
-  entryComponents: [NewPasswordDialog,ForgotPass,ChangePasswordDialog]
+  entryComponents: [NewPasswordDialog,ForgotPass,ChangePasswordDialog,DynamicNotifyComponent]
     // IncomingCallComponent,VideoChatComponent,],
   ,bootstrap: [AppComponent]
 })

ng6-seed/src/app/layouts/admin/admin-layout.component.html

@@ -230,6 +230,13 @@
                  <!-- <span class="notification-label">2</span> -->
                  <span *ngIf="alertCount != 0" style = "width:23px" class="notification-label">{{alertCount}}</span>
               </button>
+              <button  (click)="openDialog()" matTooltip="Notifications" matTooltipPosition="below" mat-icon-button class="ml-xs overflow-visible">
+               <!-- <button mat-raised-button (click)="openDdialog()">Pick one</button> -->
+               <!-- <mat-icon>schedule</mat-icon> -->
+               <mat-icon> email</mat-icon>
+               <!-- <span class="notification-label">2</span> -->
+              
+            </button>
               <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
                  <mat-icon>person</mat-icon>
               </button>

ng6-seed/src/app/layouts/admin/admin-layout.component.ts

@@ -20,6 +20,8 @@ import { Socket } from 'ngx-socket-io';
 import { MatDialog } from '@angular/material';
 // import { VideoChatComponent } from 'app/video-chat/video-chat.component';
 import { PushNotifyService } from 'app/shared/push-notify.service';
+import { DynamicNotifyComponent } from '../dynamic-notify/dynamic-notify.component';
+import { CustomNotificationComponent } from '../custom-notification/custom-notification.component';
 
 
 
@@ -65,10 +67,13 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
   alertTAT: any;
   countTAT: number;
   incomingDialogOpened:boolean = false
-  dialogRef: any;
+  //dialogRef: any;
+  matDialog: any;
   constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public aws:AwsService,public users:UserService,private _dashboardService: DashboardService,private messagingService:MessagingService
     // ,private socket:Socket,private matDialog:MatDialog
-    ,private _notificationService:PushNotifyService) {
+    ,private _notificationService:PushNotifyService,private dialogRef : MatDialog) {
+
+    
    
     const browserLang: string = translate.getBrowserLang();
     translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
@@ -104,6 +109,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
       
     }
     });
+  
 
     /** 3) Getting PD Details For Alert Message */
     this._dashboardService.getAlertDetail().subscribe(data => {
@@ -122,8 +128,34 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
         // this.alertForTAT();
         this._notificationService.requestPermission();
         console.log("constructor called")
+
+
+        
   }
 
+  openDialog(): void {
+        const dialogRef = this.dialogRef.open(DynamicNotifyComponent, {
+          width: '450px'
+        });
+    
+        dialogRef.afterClosed().subscribe(result => {
+          console.log('The dialog was closed');
+       
+        });
+      }
+  // openDialog(): void {
+  //   const dialogRef = this.dialogRef.open(CustomNotificationComponent, {
+  //     width: '450px'
+  //   });
+
+  //   dialogRef.afterClosed().subscribe(result => {
+  //     console.log('The dialog was closed');
+   
+  //   });
+  // }
+
+
+
   ngOnInit(): void {
     this.userRoleType=localStorage.getItem('user_role');
     // alert(this.userRoleType)
@@ -241,6 +273,8 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
     }
   }
   
+
+ 
   onSelectSidebarImage(selectedClass, event)
   {
     this.selectedSidebarImage = selectedClass;
@@ -416,3 +450,4 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
 //     this._notificationService.generateNotificationWithTitle(data);
 // }
 }
+

ng6-seed/src/app/layouts/dynamic-notify/dynamic-notify.component.html

@@ -0,0 +1,74 @@
+
+<!-- <div class="custom-notify" >
+<h4>Custom Notification</h4>
+<mat-form-field appearance="fill">
+  <mat-label>Select PD Manager</mat-label>
+       <select matNativeControl required  [(ngModel)]="pdofficer">  
+        <option *ngFor="let val of pdofficerlist"  >{{val.first_name}} </option>
+  </select>
+
+</mat-form-field>
+<mat-form-field appearance="fill" >
+  <mat-label>Input</mat-label>
+  <input matInput [(ngModel)]="msg" >
+</mat-form-field>
+
+ <button mat-raised-button  type="submit"  >Submit</button> 
+
+</div> -->
+
+
+
+
+ <h2 mat-dialog-title class="paragraph_change"> 
+  <div fxFlex="70" align="left" style="padding: 10px !important;">
+    Custom Notification
+  </div>
+  <div fxFlex="30" align="end" style="padding: 10px !important;">
+          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+  
+  </div>
+</h2>
+
+  <form [formGroup]="customnotifyform">
+    <mat-dialog-content>
+      <div 
+        fxLayoutWrap
+        fxLayoutGap="3.5%"
+        layout-margin>
+      <mat-form-field fxFlex="100%" appearance="outline">
+        <mat-label>Select PD Officer</mat-label>
+      <mat-select formControlName="pdofficer" multiple>
+               <!-- <mat-option #allSelected (click)="selectAll('pdofficer')" [value]="0">Select All</mat-option> -->
+        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">Select All</mat-option>
+          <span *ngFor="let option of pdofficerlist; let p_i=index">
+    <mat-option [value]="option.fk_user_id">{{option.first_name}}</mat-option>
+  </span>
+</mat-select>
+
+</mat-form-field>
+             
+        </div>
+
+        <div 
+        fxLayoutWrap
+        fxLayoutGap="3.5%"
+        layout-margin>
+
+      <mat-form-field  fxFlex="100%" appearance="outline">
+        <mat-label>Enter Text</mat-label>
+        <textarea matInput type="text" formControlName="msg" ></textarea>
+      </mat-form-field>
+             
+        </div>
+
+        </mat-dialog-content>
+        <mat-dialog-actions align="end" >
+        <button mat-raised-button mat-dialog-close (click)="onSubmitUserDetails(customnotifyform.value)"><strong> Send</strong></button>
+       </mat-dialog-actions>
+  </form>
+
+
+
+
+

ng6-seed/src/app/layouts/dynamic-notify/dynamic-notify.component.scss

@@ -0,0 +1,53 @@
+custom-notify {
+    color: #fff;
+    height: 100px;
+    width: 125px;
+    text-align: center;
+    margin: 1px;
+}
+
+.paragraph_change {
+    color:  #fff !important;
+    background-color: #e00201 !important;
+  }
+  ::ng-deep { .no-padding > mat-dialog-container {
+    // background: black;
+    padding: 0;
+    // overflow-y: scroll !important;
+  }
+  }
+  .example-full-width {
+    width: 100%;
+  }
+  .mat-dialog-content{
+  margin:0px !important;
+  }
+  // mat-placeholder{
+  //   margin-top: 20px;
+  //   word-wrap: break-word;
+  // }
+  //   input{
+  //     height:40px;
+  //   }
+  
+  .mat-form-field-label {
+    white-space: normal;
+  }
+  
+  textarea.mat-input-element {
+    padding: 0px 0;
+    margin: 5px 0;
+  }
+  
+  .mat-input-placeholder {
+    white-space: normal;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+.paragraph_change {
+  color:  #fff !important;
+  background-color: #e00201 !important;
+}
+  

ng6-seed/src/app/layouts/dynamic-notify/dynamic-notify.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicNotifyComponent } from './dynamic-notify.component';
+
+describe('DynamicNotifyComponent', () => {
+  let component: DynamicNotifyComponent;
+  let fixture: ComponentFixture<DynamicNotifyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DynamicNotifyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamicNotifyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng6-seed/src/app/layouts/dynamic-notify/dynamic-notify.component.ts

@@ -0,0 +1,129 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatOption } from '@angular/material';
+
+import { UserService } from 'app/settings/service/user.service';
+
+
+@Component({
+  selector: 'app-dynamic-notify',
+  templateUrl: './dynamic-notify.component.html',
+  styleUrls: ['./dynamic-notify.component.scss']
+})
+export class DynamicNotifyComponent implements OnInit {
+  selectedAll:any={pdofficer:false}
+  pdofficer: any;
+  msg: any;
+  pdofficerlist: any = [];
+  selectedItems:any=[];
+  dropdownSettings:any={};
+  showFilter=false;
+  customnotifyform: FormGroup;
+  @ViewChild('allSelected') private allSelected: MatOption;
+
+  constructor( public users:UserService,private _fb:FormBuilder) {
+ 
+     
+   }
+
+   ngOnInit() {
+
+     this.customnotifyform = this._fb.group({
+      pdofficer:[''],
+      msg:[''],
+   
+     })
+    this.getPdofficersList()
+  }
+
+   getPdofficersList(){
+      this.users.getListPDOfficersForNotification().subscribe(res=>{
+        // console.log(res)
+
+        if(res['status'] == 200)
+        {
+        
+          this.pdofficerlist = res['records'].pdofficers
+        
+          console.log(this.pdofficerlist)
+        }
+      })
+  }
+
+
+//    selectAll(pdofficer){
+//     console.log(pdofficer)
+//     console.log(this.selectedAll[pdofficer])
+//     console.log (this.allSelected.selected)
+//    if(this.selectedAll[pdofficer] == false){
+//        this.selectedAll[pdofficer] = true
+//       // if(pdofficer == 'pdofficer'){
+//       //console.log(this.productList.map(item=>item.product_id))
+//         this.customnotifyform.controls['pdofficer'].patchValue(this.pdofficerlist.map(item=>item.fk_user_id))
+//       // }
+//      }
+//      else {
+     
+//       this.selectedAll[pdofficer] = false
+//       this.customnotifyform.controls['pdofficer'].patchValue([]);
+//     }
+
+//  }
+
+selectAll(pdofficer){
+  console.log(pdofficer)
+  console.log(this.selectedAll[pdofficer])
+  console.log (this.allSelected.selected)
+ if(this.selectedAll[pdofficer] == false){
+     this.selectedAll[pdofficer] = true
+    // if(pdofficer == 'pdofficer'){
+    //console.log(this.productList.map(item=>item.product_id))
+      this.customnotifyform.controls['pdofficer'].patchValue(this.pdofficerlist.map(item=>item.fk_user_id))
+    // }
+   }
+   else {
+   
+    this.selectedAll[pdofficer] = false
+    this.customnotifyform.controls['pdofficer'].patchValue([]);
+  }
+
+}
+
+toggleAllSelection() {
+  if (this.allSelected.selected) {
+    this.customnotifyform.controls.pdofficer
+      .patchValue([...this.pdofficerlist.map(item => item.fk_user_id), 0]);
+  } else {
+    this.customnotifyform.controls.pdofficer.patchValue([]);
+  }
+}
+
+
+
+   onSubmitUserDetails(param) {
+     console.log(param)
+     let configdata;
+     param.pdofficer.shift()
+     console.log(param.pdofficer.length -1 + ' '+ this.pdofficerlist.length)
+     if ((param.pdofficer.length) == this.pdofficerlist.length){
+       configdata =  { "records":{ "user_id":0,"msg":param.msg} }
+     }
+     else{
+       configdata =  { "records":{ "user_id":param.pdofficer,"msg":param.msg} }
+     }
+
+    // let configdata =  { "records":{ "user_id":this.pdofficer,"msg":this.msg} }
+    
+    console.log(configdata)
+    console.log(this.pdofficer + " " +this.msg)
+    this.users.sendNotificationToOfficers(configdata).subscribe(res => {
+    console.log(res)
+    })
+
+
+   }
+ 
+
+}
+
+

ng6-seed/src/app/settings/service/user.service.ts

@@ -252,5 +252,16 @@ getvendorlist(){
   return this.http.get<any[]>(apiurl+'getSMCVendorList')
 }
 
+
+
+
+getListPDOfficersForNotification(){
+  return this.http.get(apiurl+'getListPDOfficersForNotification/')
+}
+sendNotificationToOfficers(configdata){
+  
+  return this.http.post(apiurl + "sendNotificationToOfficers",configdata);
+}
+
 }