image size validation

ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html

@@ -70,7 +70,7 @@
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
                          <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                           <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>  
+                           <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a>  
                         </mat-cell>
                       </ng-container>
                   

ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.scss

@@ -50,13 +50,16 @@ tr.mat-header-row {
   font-size: 14px;
 }
 .edit-color{
-  color: rgba(0, 0, 0, 0.54);
+  color: #178a78;
+}
+.edit-color2{
+  color: #e12929ba;
 }
 .edit-color:hover {
   color: #4caf50;
 }
 .delete:hover {
-  color:#ff0000;
+  color:#ff000085;
 }
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;

ng-seed/src/app/appoinment/business/add-business/add-business.component.html

@@ -49,9 +49,18 @@
       <mat-error *ngIf="myError('workingHrsJson', 'required')">Working Hrs is required</mat-error>
       <mat-error *ngIf="myError('workingHrsJson', 'maxlength')">Limit exceed</mat-error>
     </mat-form-field>  -->
-    <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="50" width="50"><br />
+    <div fxLayout="row wrap">
-    <input type='file'accept="image/*" data-max-size="2048" style="    width: 35%;" (change)="onSelectFile($event)" formControlName="logo">  
+      <div fxFlex.xs="70" fxFlex.sm="70" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70">
-    <mat-checkbox class="example-margin mt-2" formControlName="admin_checked" (change)="showOptions($event)">Add Admin</mat-checkbox> 
+        <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
+        <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
+        <input type='file'accept="image/*" data-max-size="2048" style="width: 50%;" (change)="onSelectFile($event)" formControlName="logo"><br>
+        <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB </span>
+      </div>
+      <div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" fxLayoutAlign="start end">
+        <mat-checkbox *ngIf="action != 'Update'" class="example-margin mt-2" formControlName="admin_checked" (change)="showOptions($event)">Add Admin</mat-checkbox>
+      </div>
+    </div>
+    
   
   </div>
     </ng-scrollbar>
@@ -63,7 +72,7 @@
       <button mat-button (click)="closeDialog()" >Cancel</button>
     </div>
   </form>
-  
+  <notifier-container></notifier-container>
   <!-- </mat-card> -->
   
   

ng-seed/src/app/appoinment/business/add-business/add-business.component.scss

@@ -76,3 +76,10 @@ input[type=file]::file-selector-button {
   input[type=file]::file-selector-button:hover {
     background: #0d45a5;
   }
+  .image{
+    border: 7px solid #16c1a636;
+  }
+  .imgSizeValidation{
+    color: red;
+    font-family: ui-serif;
+  }

ng-seed/src/app/appoinment/business/add-business/add-business.component.ts

@@ -3,6 +3,8 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { NotifierService } from 'angular-notifier';
+import { environment } from 'environments/environment';
 export interface UsersData {
   name: string;
   id: number;
@@ -25,7 +27,8 @@ export class AddBusinessComponent implements OnInit {
   formData: any=[];
   selectedFiles: any;
   currentFileUpload: any;
-  constructor(private router: Router,private formBuilder: FormBuilder,
+  private apiUrl = environment.apiEndpoint;
+  constructor(private notifierService: NotifierService,private router: Router,private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<AddBusinessComponent>,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
     console.log(data);
@@ -46,13 +49,15 @@ export class AddBusinessComponent implements OnInit {
     this.dialogRef.close({event:'Cancel'});
   }
   onSelectFile(event) {
+    console.log(event)
     console.log(event.target.files[0])
+    if(event.target.files[0].size > 2097152){
+      this.notifierService.notify('warning', 'Image size is too Larger');
+    }else {
     const file = event.target.files[0]; 
- 
     if(event != null){
       this.imageViewStatus = true
     }    
-    
     this.form['value'].logo = [event.target.files[0]]
     if (event.target.files && event.target.files[0]) {
       var reader = new FileReader();
@@ -64,10 +69,8 @@ export class AddBusinessComponent implements OnInit {
     }
     // this.formData=[];
     this.formData.append('image', file, file.name);   
-   
     console.log(this.currentFileUpload)   
-   
+  }
-
    
     // this.formData.append('file', file, file.name);
   }
@@ -126,4 +129,9 @@ export class AddBusinessComponent implements OnInit {
         // console.log(this.action,this.local_data)
     }
 
+    image_view(image){
+    
+      return this.apiUrl+'imageViewer?img_name='+image;
+    }
+
 }

ng-seed/src/app/appoinment/business/business-list/business-list.component.html

@@ -59,7 +59,7 @@
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
                           <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>   
+                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a>   
                         </mat-cell>
                       </ng-container>
                   

ng-seed/src/app/appoinment/business/business-list/business-list.component.scss

@@ -50,14 +50,17 @@ img {
     font-size: 14px;
 }
 .edit-color{
-    color: rgba(0, 0, 0, 0.54);
+  color: #178a78;
+}
+.edit-color2{
+  color: #e12929ba;
 }
 .edit-color:hover {
   color: #4caf50;
-  }
+}
-  .delete:hover {
+.delete:hover {
-    color:#ff0000;
+  color:#ff000085;
-  }
+}
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;
 // }

ng-seed/src/app/appoinment/business/business-list/business-list.component.ts

@@ -186,11 +186,11 @@ export class BusinessListComponent implements OnInit {
      //console.log(formData)
      this._bus.addFormDetails(formValue[0]).subscribe(res => {
       if (res.status == 200) {
-        // this.customersList = res.data;
+        let getData = res.data;
         this.getBusinessList()
         if(result.event == 'Add' && result.admincheck == true){
           localStorage.setItem('go_admin','0')
-          localStorage.setItem('busName',row_obj.busName)
+          localStorage.setItem('busNameID',getData.busId)
           this.router.navigate(['/users',])
         }
         if(result.event == 'Add'){

ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html

@@ -58,7 +58,7 @@
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
                          <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                           <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>  
+                           <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a>  
                         </mat-cell>
                       </ng-container>
                   

ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.scss

@@ -48,13 +48,16 @@ img {
     font-size: 14px;
 }
 .edit-color{
-    color: rgba(0, 0, 0, 0.54);
+    color: #178a78;
-}
+  }
-.edit-color:hover {
+  .edit-color2{
+    color: #e12929ba;
+  }
+  .edit-color:hover {
     color: #4caf50;
   }
   .delete:hover {
-    color:#ff0000;
+    color:#ff000085;
   }
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;

ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html

@@ -46,7 +46,7 @@
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
                           <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>   
+                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a>   
                         </mat-cell>
                       </ng-container>
                   

ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss

@@ -50,13 +50,16 @@ img {
     font-size: 14px;
 }
 .edit-color{
-    color: rgba(0, 0, 0, 0.54);
+    color: #178a78;
-}
+  }
-.edit-color:hover {
+  .edit-color2{
+    color: #e12929ba;
+  }
+  .edit-color:hover {
     color: #4caf50;
   }
   .delete:hover {
-    color:#ff0000;
+    color:#ff000085;
   }
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;

ng-seed/src/app/appoinment/user/add-user/add-user.component.html

@@ -64,9 +64,11 @@
         <mat-error *ngIf="myError('password', 'required')">Password is required</mat-error>
         <mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error>
       </mat-form-field>  
-      <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="50" width="50">
-      <input type='file'accept="image/*" data-max-size="2048" style="    width: 35%;"  (change)="onSelectFile($event)" formControlName="logo">  
 
+      <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
+      <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
+      <input type='file'accept="image/*" data-max-size="2048" style="width: 33%;" (change)="onSelectFile($event)" formControlName="logo"><br>
+      <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB </span>
       <!-- <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
         <input placeholder="ConfirmPassword" matInput  formControlName="confirmPassword">
         <mat-error *ngIf="myError('confirmPassword', 'required')">confirmPassword is required</mat-error>
@@ -85,5 +87,5 @@
     </ng-template><br>
    
   </mat-card>
-    
+  <notifier-container></notifier-container>
     

ng-seed/src/app/appoinment/user/add-user/add-user.component.scss

@@ -52,3 +52,11 @@ input[type=file]::file-selector-button {
   input[type=file]::file-selector-button:hover {
     background: #0d45a5;
   }
+
+  .image{
+    border: 7px solid #16c1a636;
+  }
+  .imgSizeValidation{
+    color: red;
+    font-family: ui-serif;
+  }

ng-seed/src/app/appoinment/user/add-user/add-user.component.ts

@@ -2,7 +2,9 @@ import { Component, Inject, OnInit, Optional } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { NotifierService } from 'angular-notifier';
 import { BusinessService } from 'app/appoinment/business/business-service/business.service';
+import { environment } from 'environments/environment';
  
 export interface UsersData {
   userName: string;
@@ -27,7 +29,8 @@ export class AddUserComponent implements OnInit {
   public role = [{'name':'BADMIN'},{'name':'PRACTITIONER'},{'name':'FRONTDESK'}]
   imageViewStatus: boolean;
   formData:any=[];
-  constructor(private router: Router,private formBuilder: FormBuilder,
+  private apiUrl = environment.apiEndpoint;
+  constructor(private notifierService: NotifierService,private router: Router,private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<AddUserComponent>,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData,public _bus:BusinessService) {
     console.log(data);
@@ -38,6 +41,60 @@ export class AddUserComponent implements OnInit {
     this.getBusinessList()
   }
 
+ 
+  ngOnInit() {
+    let userrole = localStorage.getItem('user_role')
+    this.form = new FormGroup({
+    businessselect: new FormControl('',[Validators.required]),
+    role: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+    userName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+    // contactNo: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+    contactNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10),  Validators.pattern('^[0-9]{10}$')]),
+    // lastName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+    email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
+      '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
+    ),]),
+    password: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    logo: new FormControl('', null),
+    // confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    createdBy:new FormControl(userrole,null),
+    });
+    console.log(this.local_data);
+    if(this.action == 'Update'){
+      this.local_data.businessselect = this.local_data.busId
+    }    
+ 
+    this.form.patchValue(this.local_data)
+    setTimeout(() => {
+      this.form.patchValue(this.local_data)
+    }, 500);
+    }
+    public myError = (controlName: string, errorName: string) =>{
+      return this.form.controls[controlName].hasError(errorName);
+      }
+      // doAction(){
+      //   let tmp = this.form.value
+      //       tmp.id = this.local_data.id
+      //      console.log(this.formData.getAll('image'));
+      //       if(this.action == 'Update'){
+      //         this.formData.append('id', tmp.id);
+      //         this.formData.append('busId', this.local_data.busId);
+      //       }
+           
+         
+      //       this.formData.append('userName', tmp.userName);
+      //       this.formData.append('password', tmp.password);
+      //       this.formData.append('role', tmp.role);
+      //       this.formData.append('email', tmp.email);
+      //       this.formData.append('contactNo', tmp.contactNo);
+            
+      //       this.formData.append('confirmPassword', tmp.password);
+      //       // tmp.confirmPassword = this.local_data.confirmPassword
+      //   this.dialogRef.close({event:this.action,data: this.formData});
+      //   console.log(   this.formData,this.form.value);
+      //   console.log(this.action,this.local_data)
+      // }
+
       getBusinessList() {
         //this._pd.getTabStatusPdDetails(this.tabStatus)
         this._bus.getBusinessListDetails().subscribe(res => {
@@ -72,57 +129,8 @@ export class AddUserComponent implements OnInit {
       
       close() {
         this.dialogRef.close();
-}
-  ngOnInit() {
-    let userrole = localStorage.getItem('user_role')
-    this.form = new FormGroup({
-    businessselect: new FormControl('',[Validators.required]),
-    role: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-    userName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-    // contactNo: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-    contactNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10),  Validators.pattern('^[0-9]{10}$')]),
-    // lastName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-    email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
-      '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
-    ),]),
-    password: new FormControl('', [Validators.required, Validators.minLength(6)]),
-    logo: new FormControl('', null),
-    // confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
-    createdBy:new FormControl(userrole,[Validators.required]),
-    });
-    console.log(this.local_data);
-    this.local_data.businessselect =   this.local_data.busId
- 
-    this.form.patchValue(this.local_data)
-    setTimeout(() => {
-      this.form.patchValue(this.local_data)
-    }, 500);
-    }
-    public myError = (controlName: string, errorName: string) =>{
-      return this.form.controls[controlName].hasError(errorName);
-      }
-      doAction(){
-        let tmp = this.form.value
-            tmp.id = this.local_data.id
-           console.log(this.formData.getAll('image'));
-            if(this.action == 'Update'){
-              this.formData.append('id', tmp.id);
-              this.formData.append('busId', this.local_data.busId);
     }
     
-         
-            this.formData.append('userName', tmp.userName);
-            this.formData.append('password', tmp.password);
-            this.formData.append('role', tmp.role);
-            this.formData.append('email', tmp.email);
-            this.formData.append('contactNo', tmp.contactNo);
-            
-            this.formData.append('confirmPassword', tmp.password);
-            // tmp.confirmPassword = this.local_data.confirmPassword
-        this.dialogRef.close({event:this.action,data: this.formData});
-        console.log(   this.formData,this.form.value);
-        console.log(this.action,this.local_data)
-      }
       submit(){
         console.log(this.form.value);
         if (!this.form.valid) {
@@ -135,14 +143,11 @@ export class AddUserComponent implements OnInit {
               this.formData.append('id', tmp.id);
               this.formData.append('busId', this.local_data.busId);
             }    
-           
-         
             this.formData.append('userName', tmp.userName);
             this.formData.append('password', tmp.password);
             this.formData.append('role', tmp.role);
             this.formData.append('email', tmp.email);
             this.formData.append('contactNo', tmp.contactNo);            
-            
             this.formData.append('confirmPassword', tmp.password);
             // tmp.confirmPassword = this.local_data.confirmPassword
         this.dialogRef.close({event:this.action,data: this.formData});
@@ -153,12 +158,12 @@ export class AddUserComponent implements OnInit {
       onSelectFile(event) {
         console.log(event.target.files[0])
         const file = event.target.files[0];
-     
+        if(event.target.files[0].size > 2097152){
+          this.notifierService.notify('warning', 'Image size is too Larger');
+        }else {
           if(event != null){
             this.imageViewStatus = true
           }       
-        
-       
           if (event.target.files && event.target.files[0]) {
             var reader = new FileReader();
             reader.readAsDataURL(event.target.files[0]); 
@@ -170,12 +175,13 @@ export class AddUserComponent implements OnInit {
           // this.formData= new FormData();
         //  this.formData=[];
           this.formData.append('image', file, file.name);    
-       
-       
-       
-    
-       
           // this.formData.append('file', file, file.name);
         }
         
+      }
+
+      image_view(image){    
+        return this.apiUrl+'imageViewer?img_name='+image;
+      }
+
 }

ng-seed/src/app/appoinment/user/user-list/user-list.component.html

@@ -100,7 +100,7 @@
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
                         <td mat-cell *matCellDef="let element" class="action-link"> 
                           <a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a> 
-                          <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> 
+                          <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color2 delete">delete</span></a> 
                         </td>
                       </ng-container>
                       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

ng-seed/src/app/appoinment/user/user-list/user-list.component.scss

@@ -50,14 +50,17 @@ img {
     font-size: 14px;
 }
 .edit-color{
-    color: rgba(0, 0, 0, 0.54);
+  color: #178a78;
+}
+.edit-color2{
+  color: #e12929ba;
 }
 .edit-color:hover {
   color: #4caf50;
-  }
+}
-  .delete:hover {
+.delete:hover {
-    color:#ff0000;
+  color:#ff000085;
-  }
+}
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;
 // }

ng-seed/src/environments/environment.ts

@@ -8,9 +8,9 @@ export const environment = {
   environmentName: 'Testing Environment',//Localhost Environment.
 // apiEndpoint:'http://venbainfotech.com:5000/api/', 
 // apiEndpoint:'http://192.168.1.20:8080/api/',
-apiEndpoint:'https://api.venbait.in/api/', 
+// apiEndpoint:'https://api.venbait.in/api/', 
   // apiEndpoint:'http://venbainfotech.com:5000/api/', 
-  // apiEndpoint:'http://192.168.1.17:8080/api/',
+  apiEndpoint:'http://192.168.1.17:8080/api/',
   // apiEndpoint:'https://api.venbait.in/api/',
   
   //EndUser URL