image-cropper component, drag & drop bilder
This commit is contained in:
@@ -32,69 +32,64 @@ import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
|
||||
import { ImageService } from '../../../services/image.service';
|
||||
import { DialogModule } from 'primeng/dialog';
|
||||
import { SelectButtonModule } from 'primeng/selectbutton';
|
||||
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
|
||||
import { ImageCropperComponent, stateOptions } from '../../../components/image-cropper/image-cropper.component';
|
||||
import Quill from 'quill'
|
||||
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
|
||||
@Component({
|
||||
selector: 'app-account',
|
||||
standalone: true,
|
||||
imports: [SharedModule,FileUploadModule,EditorModule,AngularCropperjsModule,DialogModule,SelectButtonModule],
|
||||
providers:[MessageService],
|
||||
imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule],
|
||||
providers: [MessageService, DialogService],
|
||||
templateUrl: './account.component.html',
|
||||
styleUrl: './account.component.scss'
|
||||
})
|
||||
export class AccountComponent {
|
||||
@ViewChild(CropperComponent) public angularCropper: CropperComponent;
|
||||
@ViewChild('companyUpload') public companyUpload: FileUpload;
|
||||
@ViewChild('profileUpload') public profileUpload: FileUpload;
|
||||
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
|
||||
user:User;
|
||||
subscriptions:Array<Subscription>;
|
||||
userSubscriptions:Array<Subscription>=[];
|
||||
maxFileSize=1000000;
|
||||
companyLogoUrl:string;
|
||||
profileUrl:string;
|
||||
imageUrl;
|
||||
type:'company'|'profile'
|
||||
stateOptions:KeyValueRatio[]=[
|
||||
{label:'16/9',value:16/9},
|
||||
{label:'1/1',value:1},
|
||||
{label:'2/3',value:2/3},
|
||||
]
|
||||
value:number = this.stateOptions[0].value;
|
||||
config={aspectRatio: this.value}
|
||||
environment=environment
|
||||
constructor(public userService: UserService,
|
||||
private subscriptionService: SubscriptionsService,
|
||||
private messageService: MessageService,
|
||||
private geoService:GeoService,
|
||||
public selectOptions:SelectOptionsService,
|
||||
private cdref:ChangeDetectorRef,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private loadingService:LoadingService,
|
||||
private imageUploadService: ImageService) {
|
||||
|
||||
}
|
||||
async ngOnInit(){
|
||||
this.user=await this.userService.getById(this.id);
|
||||
this.userSubscriptions=await lastValueFrom(this.subscriptionService.getAllSubscriptions());
|
||||
if (!this.user.licensedIn || this.user.licensedIn?.length===0){
|
||||
this.user.licensedIn = [{name:'',value:''}]
|
||||
user: User;
|
||||
subscriptions: Array<Subscription>;
|
||||
userSubscriptions: Array<Subscription> = [];
|
||||
maxFileSize = 1000000;
|
||||
companyLogoUrl: string;
|
||||
profileUrl: string;
|
||||
type: 'company' | 'profile'
|
||||
dialogRef: DynamicDialogRef | undefined;
|
||||
environment = environment
|
||||
editorModules = TOOLBAR_OPTIONS
|
||||
constructor(public userService: UserService,
|
||||
private subscriptionService: SubscriptionsService,
|
||||
private messageService: MessageService,
|
||||
private geoService: GeoService,
|
||||
public selectOptions: SelectOptionsService,
|
||||
private cdref: ChangeDetectorRef,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private loadingService: LoadingService,
|
||||
private imageUploadService: ImageService,
|
||||
public dialogService: DialogService) {}
|
||||
async ngOnInit() {
|
||||
this.user = await this.userService.getById(this.id);
|
||||
this.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions());
|
||||
if (!this.user.licensedIn || this.user.licensedIn?.length === 0) {
|
||||
this.user.licensedIn = [{ name: '', value: '' }]
|
||||
}
|
||||
this.user=await this.userService.getById(this.user.id);
|
||||
this.profileUrl = this.user.hasProfile?`${environment.apiBaseUrl}/profile/${this.user.id}.avif`:`/assets/images/placeholder.png`
|
||||
this.companyLogoUrl = this.user.hasCompanyLogo?`${environment.apiBaseUrl}/logo/${this.user.id}.avif`:`/assets/images/placeholder.png`
|
||||
this.user = await this.userService.getById(this.user.id);
|
||||
this.profileUrl = this.user.hasProfile ? `${environment.apiBaseUrl}/profile/${this.user.id}.avif` : `/assets/images/placeholder.png`
|
||||
this.companyLogoUrl = this.user.hasCompanyLogo ? `${environment.apiBaseUrl}/logo/${this.user.id}.avif` : `/assets/images/placeholder.png`
|
||||
}
|
||||
printInvoice(invoice:Invoice){}
|
||||
printInvoice(invoice: Invoice) { }
|
||||
|
||||
async updateProfile(user:User){
|
||||
//this.messageService.add({ severity: 'warn', summary: 'Information', detail: 'This function is not yet available, please send an email to info@bizmatch.net for changes to your customer data', life: 15000 });
|
||||
async updateProfile(user: User) {
|
||||
await this.userService.save(this.user);
|
||||
}
|
||||
|
||||
|
||||
onUploadCompanyLogo(event:any){
|
||||
onUploadCompanyLogo(event: any) {
|
||||
const uniqueSuffix = '?_ts=' + new Date().getTime();
|
||||
this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
|
||||
}
|
||||
onUploadProfilePicture(event:any){
|
||||
onUploadProfilePicture(event: any) {
|
||||
const uniqueSuffix = '?_ts=' + new Date().getTime();
|
||||
this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
|
||||
}
|
||||
@@ -102,73 +97,63 @@ export class AccountComponent {
|
||||
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
|
||||
}
|
||||
|
||||
|
||||
|
||||
suggestions: string[] | undefined;
|
||||
|
||||
async search(event: AutoCompleteCompleteEvent) {
|
||||
const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query))
|
||||
this.suggestions = result.map(r=>`${r.city} - ${r.state_code}`).slice(0,5);
|
||||
const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query))
|
||||
this.suggestions = result.map(r => `${r.city} - ${r.state_code}`).slice(0, 5);
|
||||
}
|
||||
addLicence(){
|
||||
this.user.licensedIn.push({name:'',value:''});
|
||||
addLicence() {
|
||||
this.user.licensedIn.push({ name: '', value: '' });
|
||||
}
|
||||
removeLicence(){
|
||||
this.user.licensedIn.splice(this.user.licensedIn.length-2,1);
|
||||
removeLicence() {
|
||||
this.user.licensedIn.splice(this.user.licensedIn.length - 2, 1);
|
||||
}
|
||||
|
||||
select(event:any,type:'company'|'profile'){
|
||||
this.imageUrl = URL.createObjectURL(event.files[0]);
|
||||
this.type=type
|
||||
this.config={aspectRatio: type==='company'?this.stateOptions[0].value:this.stateOptions[2].value}
|
||||
}
|
||||
sendImage(){
|
||||
this.imageUrl=null
|
||||
this.loadingService.startLoading('uploadImage');
|
||||
this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
|
||||
if (this.type==='company'){
|
||||
this.imageUploadService.uploadCompanyLogo(blob,this.user.id).subscribe(async(event) => {
|
||||
select(event: any, type: 'company' | 'profile') {
|
||||
const imageUrl = URL.createObjectURL(event.files[0]);
|
||||
this.type = type
|
||||
const config = { aspectRatio: type === 'company' ? stateOptions[0].value : stateOptions[2].value }
|
||||
this.dialogRef = this.dialogService.open(ImageCropperComponent, {
|
||||
data: {
|
||||
imageUrl: imageUrl,
|
||||
fileUpload: type === 'company' ? this.companyUpload : this.profileUpload,
|
||||
config: config,
|
||||
ratioVariable: type === 'company' ? true : false
|
||||
},
|
||||
header: 'Edit Image',
|
||||
width: '50vw',
|
||||
modal: true,
|
||||
closeOnEscape: true,
|
||||
keepInViewport: true,
|
||||
closable: false,
|
||||
breakpoints: {
|
||||
'960px': '75vw',
|
||||
'640px': '90vw'
|
||||
},
|
||||
});
|
||||
this.dialogRef.onClose.subscribe(blob => {
|
||||
if (blob) {
|
||||
this.imageUploadService.uploadImage(blob, type==='company'?'uploadCompanyLogo':'uploadProfile',this.user.id).subscribe(async(event) => {
|
||||
if (event.type === HttpEventType.UploadProgress) {
|
||||
// Berechne und zeige den Fortschritt basierend auf event.loaded und event.total
|
||||
const progress = event.total ? event.loaded / event.total : 0;
|
||||
console.log(`Upload-Fortschritt: ${progress * 100}%`);
|
||||
// Hier könntest du beispielsweise eine Fortschrittsanzeige aktualisieren
|
||||
} else if (event.type === HttpEventType.Response) {
|
||||
console.log('Upload abgeschlossen', event.body);
|
||||
this.companyUpload.clear();
|
||||
this.loadingService.stopLoading('uploadImage');
|
||||
this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`
|
||||
}
|
||||
}, error => console.error('Fehler beim Upload:', error));
|
||||
} else {
|
||||
this.imageUploadService.uploadProfileImage(blob,this.user.id).subscribe(async(event) => {
|
||||
if (event.type === HttpEventType.UploadProgress) {
|
||||
// Berechne und zeige den Fortschritt basierend auf event.loaded und event.total
|
||||
const progress = event.total ? event.loaded / event.total : 0;
|
||||
console.log(`Upload-Fortschritt: ${progress * 100}%`);
|
||||
// Hier könntest du beispielsweise eine Fortschrittsanzeige aktualisieren
|
||||
} else if (event.type === HttpEventType.Response) {
|
||||
console.log('Upload abgeschlossen', event.body);
|
||||
this.profileUpload.clear();
|
||||
this.loadingService.stopLoading('uploadImage');
|
||||
this.profileUrl=`${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`
|
||||
if (this.type==='company'){
|
||||
this.user.hasCompanyLogo=true;
|
||||
this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`
|
||||
} else {
|
||||
this.user.hasProfile=true;
|
||||
this.profileUrl=`${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`
|
||||
}
|
||||
}
|
||||
}, error => console.error('Fehler beim Upload:', error));
|
||||
}
|
||||
|
||||
|
||||
// this.fileUpload.upload();
|
||||
}, 'image/png');
|
||||
}
|
||||
cancelUpload(){
|
||||
this.imageUrl=null
|
||||
if (this.type==='company'){
|
||||
this.companyUpload.clear();
|
||||
} else {
|
||||
this.profileUpload.clear();
|
||||
}
|
||||
}
|
||||
changeAspectRation(ratio:number){
|
||||
this.config={aspectRatio: ratio}
|
||||
this.angularCropper.cropper.setAspectRatio(ratio);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user