85 lines
3.3 KiB
TypeScript
85 lines
3.3 KiB
TypeScript
import { Component, inject, OnInit, signal } from '@angular/core';
|
|
import { DialogContainer } from '../../../../../../shared/components/dialog-container/dialog-container';
|
|
import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
|
|
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { ImageView } from '../../../../../../shared/models/ImageView.model';
|
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
|
import { MatButton } from '@angular/material/button';
|
|
import { ImageService } from '../../../../../../shared/services/ImageService';
|
|
import { notNullOrUndefined } from '../../../../../../shared/util';
|
|
import { Spinner } from '../../../../../../shared/components/spinner/spinner';
|
|
|
|
@Component({
|
|
selector: 'app-edit-image-dialog',
|
|
imports: [DialogContainer, MatFormField, MatLabel, MatInput, ReactiveFormsModule, MatButton, Spinner],
|
|
templateUrl: './edit-image-dialog.html',
|
|
styleUrl: './edit-image-dialog.css',
|
|
})
|
|
export class EditImageDialog implements OnInit {
|
|
private readonly usernameFilename: [username: string, filename: string] = inject(MAT_DIALOG_DATA);
|
|
private readonly dialogRef = inject(MatDialogRef);
|
|
private readonly imageService = inject(ImageService);
|
|
|
|
protected readonly loading = signal(false);
|
|
protected readonly loadError = signal<Error | null>(null);
|
|
protected readonly imageView = signal<ImageView | null>(null);
|
|
|
|
protected readonly submitting = signal(false);
|
|
protected readonly submitError = signal<Error | null>(null);
|
|
|
|
protected readonly imageForm = new FormGroup({
|
|
filename: new FormControl(
|
|
{
|
|
value: '',
|
|
disabled: true,
|
|
},
|
|
Validators.required,
|
|
),
|
|
alt: new FormControl(''),
|
|
caption: new FormControl(''),
|
|
});
|
|
|
|
public ngOnInit(): void {
|
|
this.loading.set(true);
|
|
this.imageService.getImageView2(this.usernameFilename[0], this.usernameFilename[1]).subscribe({
|
|
next: (imageView) => {
|
|
this.loading.set(false); // shouldn't need this
|
|
this.imageView.set(imageView);
|
|
this.imageForm.patchValue({
|
|
filename: imageView.filename,
|
|
alt: imageView.alt,
|
|
caption: imageView.caption,
|
|
});
|
|
},
|
|
error: (e) => {
|
|
this.loading.set(false);
|
|
this.loadError.set(e);
|
|
},
|
|
});
|
|
}
|
|
|
|
protected async onSubmit(event: SubmitEvent): Promise<void> {
|
|
event.preventDefault();
|
|
const imageView = this.imageView()!;
|
|
const formValue = this.imageForm.value;
|
|
if (notNullOrUndefined(formValue.alt)) {
|
|
imageView.alt = formValue.alt;
|
|
}
|
|
if (notNullOrUndefined(formValue.caption)) {
|
|
imageView.caption = formValue.caption;
|
|
}
|
|
this.submitting.set(true);
|
|
this.imageService.updateImage(imageView.owner.username, imageView.filename, imageView).subscribe({
|
|
next: (imageView) => {
|
|
this.submitting.set(false);
|
|
this.imageView.set(imageView);
|
|
this.dialogRef.close();
|
|
},
|
|
error: (e) => {
|
|
this.submitting.set(false);
|
|
this.submitError.set(e);
|
|
},
|
|
});
|
|
}
|
|
}
|