meals-made-easy-app/src/app/pages/recipe-upload-page/steps/enter-recipe-data/image-select/edit-image-dialog/edit-image-dialog.ts

50 lines
1.9 KiB
TypeScript

import { Component, inject, OnInit } 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';
@Component({
selector: 'app-edit-image-dialog',
imports: [DialogContainer, MatFormField, MatLabel, MatInput, ReactiveFormsModule, MatButton],
templateUrl: './edit-image-dialog.html',
styleUrl: './edit-image-dialog.css',
})
export class EditImageDialog implements OnInit {
protected readonly imageView: ImageView = inject(MAT_DIALOG_DATA);
private readonly imageService = inject(ImageService);
private readonly dialogRef = inject(MatDialogRef);
protected readonly imageForm = new FormGroup({
filename: new FormControl(
{
value: '',
disabled: true,
},
Validators.required,
),
alt: new FormControl(''),
caption: new FormControl(''),
});
public ngOnInit(): void {
this.imageForm.patchValue({
filename: this.imageView.filename,
alt: this.imageView.alt,
caption: this.imageView.alt,
});
}
public async onSubmit(event: SubmitEvent): Promise<void> {
event.preventDefault();
await this.imageService.updateImage(this.imageView.owner.username, this.imageView.filename, {
alt: this.imageForm.value.alt,
caption: this.imageForm.value.caption,
});
this.dialogRef.close();
}
}