jessebrault/meals-made-easy-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MME-8 Add basic editing action for image data to main image select grid, WIP.

Browse Source
This commit is contained in:
Jesse Brault 2026-02-06 13:57:06 -06:00
parent 9b90e1033e
commit 76ed65a144
8 changed files with 178 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/pages/recipe-upload-page/steps/enter-recipe-data/image-select/edit-image-dialog/edit-image-dialog.css Normal file
View File

@ -0,0 +1,5 @@
form {
display: flex;
flex-direction: column;
row-gap: 10px;
}

17
src/app/pages/recipe-upload-page/steps/enter-recipe-data/image-select/edit-image-dialog/edit-image-dialog.html Normal file
View File

@ -0,0 +1,17 @@
<app-dialog-container title="Edit Image">
<form (submit)="onSubmit($event)">
<mat-form-field>
<mat-label>Filename</mat-label>
<input matInput [formControl]="imageForm.controls.filename" />
</mat-form-field>
<mat-form-field>
<mat-label>Alt</mat-label>
<input matInput [formControl]="imageForm.controls.alt" />
</mat-form-field>
<mat-form-field>
<mat-label>Caption</mat-label>
<input matInput [formControl]="imageForm.controls.caption" />
</mat-form-field>
<button type="submit" matButton="filled">Submit</button>
</form>
</app-dialog-container>

22
src/app/pages/recipe-upload-page/steps/enter-recipe-data/image-select/edit-image-dialog/edit-image-dialog.spec.ts Normal file
View File

@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EditImageDialog } from './edit-image-dialog';
describe('EditImageDialog', () => {
let component: EditImageDialog;
let fixture: ComponentFixture<EditImageDialog>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EditImageDialog],
}).compileComponents();
fixture = TestBed.createComponent(EditImageDialog);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

54
src/app/pages/recipe-upload-page/steps/enter-recipe-data/image-select/edit-image-dialog/edit-image-dialog.ts Normal file
View File

@ -0,0 +1,54 @@
import { Component, inject, input, 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';
import { QueryClient } from '@tanstack/angular-query-experimental';
@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 queryClient = inject(QueryClient);
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,
});
await this.queryClient.invalidateQueries({
queryKey: ['image-views'],
});
this.dialogRef.close();
}
}

5
src/app/pages/recipe-upload-page/steps/enter-recipe-data/image-select/image-select.css
View File

@ -13,3 +13,8 @@
mat-card-content p {
overflow-wrap: anywhere;
}
mat-card-actions {
display: flex;
justify-content: space-between;
}

12
src/app/pages/recipe-upload-page/steps/enter-recipe-data/image-select/image-select.html
View File

@ -26,7 +26,17 @@
<mat-checkbox
[checked]="isSelected(imageData!.imageView)"
(click)="onImageClick(imageData!.imageView)"
>Main image</mat-checkbox>
>Main?</mat-checkbox
>
<button matButton="text" type="button" [matMenuTriggerFor]="imageActionsMenu">
<fa-icon [icon]="faEllipsis"></fa-icon>
</button>
<mat-menu #imageActionsMenu>
<button mat-menu-item type="button" (click)="editImage(imageData!.imageView)">Edit</button>
<button mat-menu-item type="button" (click)="deleteImage(imageData!.imageView)">
Delete
</button>
</mat-menu>
</mat-card-actions>
</mat-card>
}

43
src/app/pages/recipe-upload-page/steps/enter-recipe-data/image-select/image-select.ts
View File

@ -1,16 +1,35 @@
import { Component, computed, inject, input, output, signal } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { ImageService } from '../../../../../shared/services/ImageService';
import { injectQuery, keepPreviousData } from '@tanstack/angular-query-experimental';
import { injectQuery, keepPreviousData, QueryClient } from '@tanstack/angular-query-experimental';
import { Spinner } from '../../../../../shared/components/spinner/spinner';
import { ImageView } from '../../../../../shared/models/ImageView.model';
import { injectQueries } from '@tanstack/angular-query-experimental/inject-queries-experimental';
import { MatCard, MatCardActions, MatCardContent, MatCardImage } from '@angular/material/card';
import { MatCheckbox } from '@angular/material/checkbox';
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
import { MatButton } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { EditImageDialog } from './edit-image-dialog/edit-image-dialog';
@Component({
selector: 'app-image-select',
imports: [MatPaginator, Spinner, MatCard, MatCardImage, MatCardContent, MatCardActions, MatCheckbox],
imports: [
MatPaginator,
Spinner,
MatCard,
MatCardImage,
MatCardContent,
MatCardActions,
MatCheckbox,
MatMenuTrigger,
MatMenu,
FaIconComponent,
MatButton,
MatMenuItem,
],
templateUrl: './image-select.html',
styleUrl: './image-select.css',
})
@ -22,6 +41,8 @@ export class ImageSelect {
protected readonly pageSize = signal(9);
private readonly imageService = inject(ImageService);
private readonly dialog = inject(MatDialog);
private readonly queryClient = inject(QueryClient);
protected readonly imageViewsQuery = injectQuery(() => ({
queryKey: ['image-views', this.currentPage(), this.pageSize()],
@ -90,4 +111,22 @@ export class ImageSelect {
}
return false;
}
protected editImage(imageView: ImageView): void {
this.dialog.open(EditImageDialog, {
data: imageView,
});
}
protected async deleteImage(imageView: ImageView): Promise<void> {
await this.imageService.deleteImage(imageView.owner.username, imageView.filename);
await this.queryClient.invalidateQueries({
queryKey: ['image-views'],
});
await this.queryClient.invalidateQueries({
queryKey: ['images'],
});
}
protected readonly faEllipsis = faEllipsis;
}

23
src/app/shared/services/ImageService.ts
View File

@ -81,4 +81,27 @@ export class ImageService {
.pipe(map((view) => view.exists)),
);
}
public deleteImage(username: string, filename: string): Promise<void> {
return firstValueFrom(
this.httpClient.delete<void>(this.endpointService.getUrl('images', [username, filename])),
);
}
public updateImage(
username: string,
filename: string,
data: {
alt?: string | null;
caption?: string | null;
isPublic?: boolean | null;
viewersToAdd?: string[] | null;
viewersToRemove?: string[] | null;
clearAllViewers?: boolean | null;
},
): Promise<ImageView> {
return firstValueFrom(
this.httpClient.put<ImageView>(this.endpointService.getUrl('images', [username, filename]), data),
);
}
}