client profile is ready

src/app/client-profile/client-profile.component.html

-<p>client-profile works!</p>
+
+<bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+<div class="vertical-spacer"></div>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-sm-12">
+      <h5> Edit : {{User.First + ' ' + User.Last}} </h5>
+
+      <div class="dropzone-wrapper">
+        <div class="fileselect-wrapper">
+          <div class="row justify-content-center">
+            <div #brokerPhoto class="broker-photo" [ngStyle]="{'background-image' : avatarUrl }" ></div>
+          </div>
+
+          <kendo-fileselect
+            #fileSelect
+            zoneId="myZone"
+            [restrictions]="myRestrictions"
+            [showFileList]="false"
+            (select)="onSelect($event)"
+          >
+          </kendo-fileselect>
+          only jpg and png are allowed
+
+        </div>
+      </div>
+      <div class="vertical-spacer"></div>
+
+      <form class="k-form" #userForm="ngForm" (submit)="save(userForm)">
+        <ng-container >
+          <fieldset class="k-form-fieldset">
+            <kendo-formfield>
+              <kendo-label [for]="First" text="First Name (only Admin can change)"></kendo-label>
+              <kendo-textbox kendoTextBox #First  name="First" [(ngModel)]="User.First"
+                             [showSuccessIcon]="User.Display.length >= 3 && User.Display.length <=44 "> </kendo-textbox>
+              <kendo-formerror>First name is required</kendo-formerror>
+            </kendo-formfield>
+            <div class="vertical-spacer"></div>
+
+            <kendo-formfield>
+              <kendo-label [for]="Last" text="Last Name (only Admin can change)"></kendo-label>
+              <kendo-textbox kendoTextBox #Last   name="Last" [(ngModel)]="User.Last"
+                             [showSuccessIcon]="User.Display.length >= 3 && User.Display.length <=44 "></kendo-textbox>
+              <kendo-formerror>Last Name is required</kendo-formerror>
+            </kendo-formfield>
+            <div class="vertical-spacer"></div>
+
+            <kendo-formfield>
+              <kendo-label [for]="Display" text="Display As"></kendo-label>
+              <kendo-textbox #Display  name="Display" [(ngModel)]="User.Display" required [minlength]="3" [maxlength]="120"
+                             [showSuccessIcon]="User.Display.length >= 3 && User.Display.length <=100 "> </kendo-textbox>
+              <kendo-formerror>Display name cannot empty</kendo-formerror>
+            </kendo-formfield>
+            <div class="vertical-spacer"></div>
+
+          </fieldset>
+        </ng-container>
+        <div class="k-form-buttons k-buttons-end">
+          <div>
+            <button kendoButton class="k-button k-primary" type="submit" icon="save"
+                    [disabled]="userForm.form.status !=='VALID'"> Save </button>
+          </div>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</div>
+<div class="vertical-spacer"></div>
+
+<kendo-dialog title="Message " *ngIf="opened" (close)="close('cancel')" [minWidth]="250" [width]="450">
+  <p style="margin: 30px; text-align: center;">{{ Message }}</p>
+  <kendo-dialog-actions>
+    <button kendoButton (click)="close('Ok, I got it')" primary="true">Yes</button>
+  </kendo-dialog-actions>
+</kendo-dialog>

src/app/client-profile/client-profile.component.scss

+div.container {
+  max-width: 500px;
+}
+
+div.vertical-spacer {
+  height:1px;
+  margin-bottom: 30px;
+}
+
+
+.dropzoneInvisible{
+  opacity:0.1;
+}
+
+.avatar {
+  width: 100%;
+}
+
+.broker-photo {
+  display: inline-block;
+  width: 256px;
+  height: 256px;
+  border-radius: 50%;
+  background-size: 256px 256px;
+  background-position: center center;
+  vertical-align: middle;
+  line-height: 132px;
+  box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
+  margin-left: 5px;
+  margin-bottom: 10px;
+  background-repeat: no-repeat;
+  box-shadow: 1px 1px 10px black;
+}

src/app/client-profile/client-profile.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {PeopleModel} from '../models/people.model';
+import {NgForm} from '@angular/forms';
+import {AuthService} from '../service/auth.service';
+import {PeopleService} from '../service/people.service';
+import {FileInfo, FileRestrictions, FileSelectComponent, SelectEvent} from '@progress/kendo-angular-upload';
+import {BrokerModel} from '../models/broker.model';
 
 @Component({
   selector: 'app-client-profile',
   styleUrls: ['./client-profile.component.scss']
 })
 export class ClientProfileComponent implements OnInit {
+  @Input() User: PeopleModel = PeopleModel.EmptyNew();
+  @ViewChild('fileSelect', {static: true}) fs: FileSelectComponent;
+  public avatarUrl = 'url(https://svr2021.lawipac.com:8080/api/v1/avatar/1000)' ;
+  public myRestrictions: FileRestrictions = {
+    allowedExtensions: ['.jpg', '.png', '.jpeg'],
+    maxFileSize: 2194304
+  };
+
+  public opened = false; // dialog box
+  public Message = '';   // dialog message
+
+  constructor(private auth: AuthService, private ps: PeopleService) { }
 
-  constructor() { }
 
   ngOnInit(): void {
+    this.User = this.auth.loggedIn.user;
+    this.avatarUrl = 'url(' + this.auth.getUrl('avatar/' + this.User.Id) + ')';
+  }
+
+
+  public save(brokerForm: NgForm): void{
+    if (! brokerForm.touched || brokerForm.form.pristine) {
+      return;
+    }
+    this.ps.saveUser(this.User).subscribe( () => {
+      this.showDialog('updated successfully ');
+      brokerForm.form.markAsPristine();
+    }, err => {
+      this.showDialog('Failed to Update: ' + err.toString());
+    });
   }
 
+  public onSelect(ev: SelectEvent): void {
+    if (ev.files) {
+      ev.files.every((file: FileInfo) => {
+        if (file.rawFile && !file.validationErrors) {
+          const reader  = new FileReader();
+
+          reader.onloadend = () => {
+            const str = reader.result as string;
+            this.ps.updateAvatar(str, this.User.Id).subscribe( resp => {
+              this.avatarUrl = 'url(' + str + ' )';
+            }, err => {
+              this.showDialog('Failed to Update Avatar: ' + err.toString());
+            });
+            this.fs.clearFiles();
+          };
+          reader.readAsDataURL(file.rawFile);
+        }else{
+          this.showDialog('Only jpg, and png are supported (max 2MB)');
+          setTimeout(() => { this.fs.clearFiles(); }, 10);
+        }
+        return false; // we only take first file
+      });
+    }
+  }
+
+  public showDialog(msg: string): void {
+    this.Message = msg;
+    this.opened = true; // open dialog
+  }
+
+  public close(status): void {
+    this.opened = false;
+  }
 }

src/app/service/people.service.ts

     return this.http.post<BrokerModel>(this.auth.getUrl('broker/' + broker.Id), broker);
   }
 
+  public saveUser(people: PeopleModel): Observable<BrokerModel>{
+    return this.http.post<BrokerModel>(this.auth.getUrl('people/' + people.Id), people);
+  }
 }