florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Rework picture selector to use signals.

Browse Source
This commit is contained in:
Florian THIERRY
2026-02-02 17:29:49 +01:00
parent 987d187c44
commit a3637faafa
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html
View File

@@ -10,7 +10,7 @@
<h1 i18n>Select an illustration</h1> <h1 i18n>Select an illustration</h1>
</header> </header>
<div class="picture-container"> <div class="picture-container">
@if (isLoading) { @if (isLoading()) {
<h2 i18n>Pictures loading...</h2> <h2 i18n>Pictures loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
} @else { } @else {
@@ -40,4 +40,4 @@
Add new picture Add new picture
</button> </button>
<input type="file" (change)="uploadPicture($event)" #fileUpload/> <input type="file" (change)="uploadPicture($event)" #fileUpload/>
</footer> </footer>

22
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts
View File

@@ -1,11 +1,11 @@
import { Component, inject, OnInit } from "@angular/core"; import {Component, inject, OnInit, signal} from "@angular/core";
import { Picture } from "../../../core/rest-services/picture/model/picture"; import { Picture } from "../../../core/rest-services/picture/model/picture";
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatSnackBar } from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service"; import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
import { MatIcon } from "@angular/material/icon"; import { MatIcon } from "@angular/material/icon";
import { MatDialogRef } from "@angular/material/dialog"; import { MatDialogRef } from "@angular/material/dialog";
import {MatRippleModule} from '@angular/material/core'; import {MatRippleModule} from '@angular/material/core';
import { MatTooltip } from "@angular/material/tooltip"; import { MatTooltip } from "@angular/material/tooltip";
@Component({ @Component({
@@ -24,12 +24,12 @@ export class PictureSelectionDialog implements OnInit {
private readonly snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>); private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
isLoading: boolean = false; isLoading = signal(false);
isLoaded: boolean = false; isLoaded = signal(false);
pictures: Picture[] = []; pictures: Picture[] = [];
ngOnInit(): void { ngOnInit(): void {
this.isLoading = true; this.isLoading.set(true);
this.pictureRestService.getAllOfCurrentUser() this.pictureRestService.getAllOfCurrentUser()
.then(pictures => { .then(pictures => {
this.pictures = pictures; this.pictures = pictures;
@@ -38,14 +38,14 @@ export class PictureSelectionDialog implements OnInit {
if (error.status === 401) { if (error.status === 401) {
this.dialogRef.close(); this.dialogRef.close();
} else { } else {
const errorMessage = $localize`An error occured while loading pictures.`; const errorMessage = $localize`An error occurred while loading pictures.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
} }
}) })
.finally(() => { .finally(() => {
this.isLoading = false; this.isLoading.set(false);
this.isLoaded = true; this.isLoaded.set(true);
}); });
} }
@@ -65,10 +65,10 @@ export class PictureSelectionDialog implements OnInit {
this.dialogRef.close(pictureId); this.dialogRef.close(pictureId);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`A technical error occured while uploading your picture.`; const errorMessage = $localize`A technical error occurred while uploading your picture.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
}); });
} }
} }
} }