FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix thumbnail editing, add blobtodataurl method
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma
2021-08-05 16:33:31 +02:00
parent 1daa8e257f
commit eb1157d608
3 changed files with 53 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
projects/common/src/fm/components/thumbnail/thumbnail.component.ts
View File

@@ -1,7 +1,8 @@
import { Component,Input ,ViewChild,ElementRef,ChangeDetectorRef} from '@angular/core';
import { Component,Input ,ViewChild,ElementRef,ChangeDetectorRef, Output,EventEmitter} from '@angular/core';
import { Store } from '@ngrx/store';
import { IListItem } from '../../models/list.item';
import { ImageService } from '../../services/image.service';
import { commonReducers,ItemTypeService } from '../../../public-api'
import { EditImageModalComponent} from '../edit-image-modal/edit-image-modal.component';
import { AppConfig } from "../../shared/app.config";
@@ -16,14 +17,25 @@ import { AppConfig } from "../../shared/app.config";
export class ThumbnailComponent {
@Input() public item: IListItem;
@Input() public edit: boolean = false;
@Input() public save: boolean = true;
@Output() changed = new EventEmitter();
@ViewChild('thumbnail') el:ElementRef;
@ViewChild('modal') modal:EditImageModalComponent;
constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService,public appConfig: AppConfig,private changeDetector:ChangeDetectorRef) {
public image = null;
private endpoint = "";
public thumnailUrl = "";
constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService,public appConfig: AppConfig,private changeDetector:ChangeDetectorRef,public imageService:ImageService) {
}
getThumbnailUrl(item:IListItem):string {
return this.appConfig.getConfig("apiEndPoint")+item.url+'/thumbnail?v=' + Date.parse(item.updated);
if(this.image == null && this.item.thumbnail) {
this.thumnailUrl = this.appConfig.getConfig("apiEndPoint")+item.url+'/thumbnail?v=' + Date.parse(item.updated);
} else if (this.image == null) {
this.thumnailUrl = "";
}
return this.thumnailUrl;
}
getFontSize():string {
@@ -47,15 +59,28 @@ import { AppConfig } from "../../shared/app.config";
return this.edit && this.item != null;
}
onEditClick() {
var endpoint = `${this.appConfig.getConfig("apiEndPoint")}/api/v1/items/${this.item.code}/thumbnail`;
this.modal.open(endpoint,4/3);
hasThumbnail():boolean {
return (this.item && this.item.thumbnail) || this.image != null;
}
onChanged() {
if(this.item) {
this.item.updated = new Date(new Date().getTime()).toISOString();
this.changeDetector.detectChanges();
}
onEditClick() {
this.endpoint = `${this.appConfig.getConfig("apiEndPoint")}/api/v1/items/${this.item.code}/thumbnail`;
this.modal.open(this.endpoint,4/3,false,200,false);
}
onChanged(event:any) {
this.image = event.croppedImage;
this.imageService.blobToDataUrl(event.croppedImage).then(url => {
this.thumnailUrl = url
this.changeDetector.detectChanges();
if(this.save) this.saveImage();
this.changed.emit(event.croppedImage);
});
}
saveImage() {
if(this.image) {
this.imageService.putImage(this.endpoint,this.image).subscribe(() => {});
}
}
}