change profile Image
parent
ad56814966
commit
c52ee53b99
@ -0,0 +1,18 @@
|
||||
<div class="centerDiv changeImgBtn">
|
||||
<ion-button class="btnImge" color="customnavy" ion-button (click)="openFile()" expand="block" fill="outline">
|
||||
<!-- <ion-icon class="changeIcon" name="camera" ></ion-icon> -->
|
||||
{{'userProfile,changeImg' | translate}}
|
||||
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div *ngIf="data" class="uploader-icons">
|
||||
<ion-item lines="none">
|
||||
|
||||
<p slot="start"> <img [src]="attachmentImg" /> {{data.name}}</p>
|
||||
<p slot="end"><img [src]="deleteImg" (click)="deleteFiles(i)"></p>
|
||||
</ion-item>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
//test
|
||||
.changeImgBtn{
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 53%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.btnImge{
|
||||
button{
|
||||
border-color:transparent !important;
|
||||
}
|
||||
}
|
||||
//test
|
||||
.changeIcon{
|
||||
background: #19a163;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FileUploderProfileComponent } from './file-uploder-profile.component';
|
||||
|
||||
describe('FileUploderProfileComponent', () => {
|
||||
let component: FileUploderProfileComponent;
|
||||
let fixture: ComponentFixture<FileUploderProfileComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ FileUploderProfileComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FileUploderProfileComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,169 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { ActionSheetController,Events, NavController } from '@ionic/angular';
|
||||
import {CameraOptions,Camera,PictureSourceType} from '@ionic-native/Camera/ngx';
|
||||
// import { FileChooser } from '@ionic-native/file-chooser';
|
||||
import { FilePath } from "@ionic-native/file-path/ngx";
|
||||
import { File } from "@ionic-native/file/ngx";
|
||||
import { TranslatorService } from '../../services/translator/translator.service';
|
||||
import { Base64 } from "@ionic-native/base64/ngx";
|
||||
// import { Chooser } from '@ionic-native/chooser';
|
||||
|
||||
@Component({
|
||||
selector: 'app-file-uploder-profile',
|
||||
templateUrl: './file-uploder-profile.component.html',
|
||||
styleUrls: ['./file-uploder-profile.component.scss'],
|
||||
})
|
||||
export class FileUploderProfileComponent implements OnInit {
|
||||
|
||||
@Input() multiupload = false;
|
||||
@Input() attachmentname = 'attachment-loader';
|
||||
public attachmentData: string;
|
||||
@Input() maxFileSize = 10 * 1024 * 1024;
|
||||
@Output() fileSelected = new EventEmitter();
|
||||
@Output() onimgLoad = new EventEmitter();
|
||||
public image: string;
|
||||
public attachmentImg = 'assets/icon/attachment.png';
|
||||
public deleteImg = 'assets/icon/delete.png';
|
||||
public selectedImage:any;
|
||||
public nativePath: any;
|
||||
public errorMsg:any;
|
||||
public allowdType: any = ["jpg", "jpeg", "png"];
|
||||
|
||||
constructor(
|
||||
public cameraController:Camera,
|
||||
public actionSheetCtrl:ActionSheetController,
|
||||
public event:Events,
|
||||
public nav: NavController,
|
||||
private filePath: FilePath,
|
||||
// public FileChooser:FileChooser,
|
||||
private file: File,
|
||||
public ts: TranslatorService,
|
||||
public base64:Base64,
|
||||
// private chooser: Chooser
|
||||
|
||||
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
@Input() set src(src: string) {
|
||||
this.image = src;
|
||||
}
|
||||
get src(): string {
|
||||
return this.image;
|
||||
}
|
||||
|
||||
//open the presentsheet
|
||||
//selected attach
|
||||
//need convert
|
||||
//insert or display
|
||||
async openFile(){
|
||||
const actionSheet = await this.actionSheetCtrl.create({
|
||||
header: 'Change Profile Photo',
|
||||
buttons: [{
|
||||
text: 'Delete Current Image',
|
||||
role: 'destructive',
|
||||
icon: 'trash',
|
||||
handler: () => {
|
||||
console.log('Delete clicked');
|
||||
}
|
||||
}, {
|
||||
text: 'Take Photo',
|
||||
icon: 'camera',
|
||||
handler: () => {
|
||||
console.log('Take Photo');
|
||||
this.takePicture(this.cameraController.PictureSourceType.CAMERA);
|
||||
|
||||
}
|
||||
}, {
|
||||
|
||||
text: 'Choose from Library',
|
||||
icon: 'images',
|
||||
handler: () => {
|
||||
console.log('Favorite clicked');
|
||||
this.takePicture(this.cameraController.PictureSourceType.PHOTOLIBRARY);
|
||||
|
||||
}
|
||||
}, {
|
||||
text: 'Cancel',
|
||||
icon: 'close',
|
||||
role: 'cancel',
|
||||
handler: () => {
|
||||
console.log('Cancel clicked');
|
||||
}
|
||||
}]
|
||||
});
|
||||
await actionSheet.present();
|
||||
}
|
||||
|
||||
public takePicture(sourceType: PictureSourceType) {
|
||||
console.log("sourceType: "+sourceType);
|
||||
const options: CameraOptions = {
|
||||
quality: 50,
|
||||
destinationType: this.cameraController.DestinationType.DATA_URL,
|
||||
encodingType: this.cameraController.EncodingType.JPEG,
|
||||
sourceType: sourceType,
|
||||
correctOrientation:true,
|
||||
targetWidth: 512,
|
||||
targetHeight: 512
|
||||
};
|
||||
|
||||
|
||||
this.cameraController.getPicture(options).then(imageData => {
|
||||
const data = "data:image/jpeg;base64," + imageData;
|
||||
this.event.publish('Image', {message:"hello"});
|
||||
this.selectedImage = "data:image/jpeg;base64, " + imageData;
|
||||
this.onimgLoad.emit(this.selectedImage);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
public deleteCurrent(){
|
||||
// send empty image
|
||||
//this.onimgLoad.emit("");
|
||||
|
||||
}
|
||||
|
||||
readFile(fileUrl: any) {
|
||||
this.filePath.resolveNativePath(fileUrl).then(filePathResult => {
|
||||
this.nativePath = filePathResult;
|
||||
this.file.resolveLocalFilesystemUrl(this.nativePath).then(entry => {
|
||||
entry.getMetadata(metadata => {
|
||||
if (metadata.size <= this.maxFileSize) {
|
||||
this.errorMsg = null;
|
||||
this.encodeFiles(entry);
|
||||
} else {
|
||||
this.errorMsg = this.ts.trPK("general", "large-file");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
encodeFiles(entry) {
|
||||
|
||||
this.base64.encodeFile(this.nativePath).then(
|
||||
(base64File: string) => {
|
||||
|
||||
const type = this.nativePath.substr(
|
||||
this.nativePath.lastIndexOf(".") + 1
|
||||
);
|
||||
|
||||
console.log("base64File 1" + base64File);
|
||||
|
||||
if (this.allowdType.includes(type.toLowerCase())) {
|
||||
} else {
|
||||
this.attachmentData = null;
|
||||
this.errorMsg = this.ts.trPK("general", "not-supported");
|
||||
}
|
||||
},
|
||||
err => {
|
||||
console.log(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title color="light" > {{ts.trPK('userProfile','title')}}</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<button style="color: white !important;" class="headerBtn" *ngIf="saveChange != ''" (click)="updateImageProfile();" >
|
||||
{{ts.trPK('general','save')}}
|
||||
</button>
|
||||
</ion-buttons>
|
||||
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<div class="profileDiv">
|
||||
<!-- <ion-img class="imgCircle" src="{{src}}"></ion-img> -->
|
||||
<!-- <ion-img class="imgCircle" src="../assets/imgs/HMG.png"></ion-img> -->
|
||||
<ion-img style="width: 60%" [src]="src" class="imgCircle" ></ion-img>
|
||||
|
||||
|
||||
</div>
|
||||
<page-trailer [small]="true"></page-trailer>
|
||||
|
||||
<!-- <ion-footer> -->
|
||||
<div class="centerDiv">
|
||||
<app-file-uploder-profile (onimgLoad)="showImg($event)"></app-file-uploder-profile>
|
||||
</div>
|
||||
<!-- </ion-footer> -->
|
||||
|
||||
</ion-content>
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
// .imgCircle{
|
||||
// height: 30vh;
|
||||
// width: 30vh;
|
||||
// margin: auto;
|
||||
// display: block;
|
||||
// // background: red;
|
||||
// overflow: hidden;
|
||||
// background: transparent;
|
||||
// border-radius: 50% !important;
|
||||
// }
|
||||
|
||||
|
||||
.imgCircle{
|
||||
// width: 90px;
|
||||
// height: 90px;
|
||||
// display: inline-flex;
|
||||
// overflow: hidden;
|
||||
// background: transparent;
|
||||
// -webkit-border-radius:50% !important;
|
||||
// -moz-border-radius:50% !important;
|
||||
// border-radius: 50% !important;
|
||||
// // margin:0 auto 40px;
|
||||
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
margin: auto;
|
||||
display: block;
|
||||
// background: red;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-radius: 50% !important;
|
||||
color:#fff;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
|
||||
img{
|
||||
-webkit-border-radius:50% !important;
|
||||
-moz-border-radius:50% !important;
|
||||
border-radius: 50% !important;
|
||||
height: auto !important;
|
||||
width: 70% !important;
|
||||
}
|
||||
//box-shadow: 0px 0px 0px 10px #8c8c8c;
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProfileImageComponent } from './profile-image.component';
|
||||
|
||||
describe('ProfileImageComponent', () => {
|
||||
let component: ProfileImageComponent;
|
||||
let fixture: ComponentFixture<ProfileImageComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ProfileImageComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ProfileImageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,87 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/models/authenticated-user";
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
import { Events } from '@ionic/angular';
|
||||
import {ProfileService} from '../service/profile.service'
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
@Component({
|
||||
selector: 'app-profile-image',
|
||||
templateUrl: './profile-image.component.html',
|
||||
styleUrls: ['./profile-image.component.scss'],
|
||||
})
|
||||
export class ProfileImageComponent implements OnInit {
|
||||
public userData:AuthenticatedUser;
|
||||
//public src ="../assets/imgs/HMG.png";
|
||||
public src :any ="";
|
||||
public oldImage="";
|
||||
public displayImg="";
|
||||
public saveChange:any="";
|
||||
public setImage:any;
|
||||
// public Imge:"C:\Users\ashwaq.jaafar\Desktop\mohemmionic5\Mohem\src\assets\imgs\HMG.png";
|
||||
constructor(
|
||||
public common:CommonService,
|
||||
public ts: TranslatorService,
|
||||
public event:Events,
|
||||
public profileService:ProfileService,
|
||||
private sanitizer: DomSanitizer,
|
||||
|
||||
) {
|
||||
|
||||
this.userData =this.common.sharedService.getSharedData(AuthenticatedUser.SHARED_DATA,false);
|
||||
|
||||
|
||||
this.event.subscribe("img-change", displayImg => {
|
||||
// this.user_image = "data:image/jpeg;base64"+displayImg;
|
||||
console.log("change profile photo" +displayImg);
|
||||
this.src = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);
|
||||
});
|
||||
}
|
||||
showImg(event){
|
||||
console.log("selected profile "+event);
|
||||
this.saveChange=event;
|
||||
this.src=event;
|
||||
}
|
||||
ngOnInit() {
|
||||
// get passing image
|
||||
console.log("ngOnInit change profile");
|
||||
if(this.common.getUpdateImage().status){
|
||||
// this.imageSrc = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+this.cs.getUpdateImage().img);
|
||||
this.src = "data:image/png;base64,"+this.common.getUpdateImage().img;
|
||||
console.log("this.imageSrc"+ this.src);
|
||||
}else{
|
||||
|
||||
this.src= "data:image/png;base64," + this.userData.EMPLOYEE_IMAGE;
|
||||
this.oldImage =this.src;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
updateImageProfile(){
|
||||
console.log("update");
|
||||
const srcImge=this.src.split(',')[1];
|
||||
this.displayImg=srcImge
|
||||
console.log("gallery srcImge" + srcImge);
|
||||
const body = {
|
||||
P_IMAGE: srcImge,
|
||||
};
|
||||
this.profileService.updateImageProfile(body).subscribe((result:any) =>
|
||||
{ this.handleUpdateImageProfileResult(result);
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
||||
handleUpdateImageProfileResult(result) {
|
||||
if (this.common.validResponse(result)) {
|
||||
this.common.setUpdateImage(this.displayImg);
|
||||
this.event.publish('img-change', this.displayImg);
|
||||
let msg: string = this.ts.trPK("userProfile", "successChange");
|
||||
this.common.presentAlert(msg);
|
||||
this.common.back();
|
||||
|
||||
} // valid it
|
||||
}// End handleWorkListButtonsResult
|
||||
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from "rxjs";
|
||||
import { ConnectorService } from 'src/app/hmg-common/services/connector/connector.service';
|
||||
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ProfileService {
|
||||
public static updateEmpImage ="Services/ERP.svc/REST/UPDATE_EMPLOYEE_IMAGE";
|
||||
constructor(
|
||||
public api: ConnectorService,
|
||||
public authService: AuthenticationService
|
||||
) {}
|
||||
|
||||
public updateImageProfile( updateImgRequest: any,onError?: any,errorLabel?: string
|
||||
): Observable<any> {
|
||||
console.log("services");
|
||||
const request = updateImgRequest;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.api.post(
|
||||
ProfileService.updateEmpImage,
|
||||
request,
|
||||
onError,
|
||||
errorLabel
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue