86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
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";
|
|
|
|
@Component({
|
|
selector: 'fm-thumbnail',
|
|
templateUrl: 'thumbnail.component.html',
|
|
styleUrls: ['thumbnail.component.scss']
|
|
})
|
|
|
|
|
|
export class ThumbnailComponent {
|
|
@Input() public item: IListItem;
|
|
@Input() public edit = false;
|
|
@Input() public save = true;
|
|
@Output() changed = new EventEmitter();
|
|
@ViewChild('thumbnail') el:ElementRef;
|
|
@ViewChild('modal') modal:EditImageModalComponent;
|
|
|
|
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 {
|
|
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 {
|
|
if(this.el) {
|
|
const h = this.el.nativeElement.offsetHeight - (this.el.nativeElement.offsetHeight / 5 )
|
|
return h + "px";
|
|
} else {
|
|
return "1em";
|
|
}
|
|
}
|
|
|
|
getLineHeight():string {
|
|
if(this.el) {
|
|
return this.el.nativeElement.offsetHeight + "px";
|
|
} else {
|
|
return "1em";
|
|
}
|
|
}
|
|
|
|
canEdit():boolean {
|
|
return this.edit && this.item != null;
|
|
}
|
|
|
|
hasThumbnail():boolean {
|
|
return (this.item && this.item.thumbnail) || this.image != null;
|
|
}
|
|
|
|
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(() => {});
|
|
}
|
|
}
|
|
} |