Added proofs gallery in the app

src/app/components/gallery/gallery.component.html

@@ -0,0 +1,26 @@
+@if (!modal) {
+    <div class="bg-white rounded-lg p-2 shadow-sm border border-gray-200 overflow-scroll max-h-full">
+        <div class="grid grid-cols-4 gap-3">
+            @for (p of proofs(); track p) {
+                <img [src]="'data:image/jpeg;base64,' + p.proof"
+                     class="w-20 h-20 object-cover"
+                     alt=""
+                     (click)="openProof(p.proof)"
+                />
+            }
+        </div>
+    </div>
+} @else {
+    <div class="fixed inset-0 flex items-center justify-center z-50" (click)="closeProof()">
+        <button class="absolute top-15 right-1 text-gray-300 text-4xl font-bold p-5 bg-transparent"
+                (click)="closeProof()">
+            <ion-icon name="close-circle-outline"></ion-icon>
+        </button>
+
+        <img [src]="'data:image/jpeg;base64,' + selectedProof()"
+             class="w-[90%] h-[90%] object-cover rounded-md mt-10"
+             alt=""
+        />
+
+    </div>
+}

src/app/components/gallery/gallery.component.ts

@@ -0,0 +1,69 @@
+import {Component, inject, OnInit, signal} from '@angular/core';
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {GetUserProofDto, UsersService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {addIcons} from "ionicons";
+import {closeCircleOutline} from "ionicons/icons";
+
+addIcons({
+    'close-circle-outline': closeCircleOutline
+})
+
+@Component({
+    selector: 'app-gallery',
+    templateUrl: './gallery.component.html',
+    styleUrls: ['./gallery.component.scss'],
+    imports: [
+        IonicModule
+    ]
+})
+export class GalleryComponent implements OnInit {
+    private loadCtrl = inject(LoadingController);
+    private usersService = inject(UsersService);
+    private toastCtrl = inject(ToastController);
+
+    proofs = signal<GetUserProofDto[]>([]);
+    selectedProof = signal<string>("");
+
+    modal = false;
+
+    async ngOnInit() {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            const proofs = await firstValueFrom(this.usersService.getAllUserProofsEndpoint());
+            this.proofs.set(proofs);
+
+            await loading.dismiss();
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de charger la galerie photos',
+                duration: 2000,
+                color: 'danger'
+            });
+            await loading.dismiss();
+            await toast.present();
+        }
+    }
+
+    async openProof(proof: string) {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        this.selectedProof.set(proof);
+        this.modal = true;
+
+        await loading.dismiss();
+    }
+
+    closeProof() {
+        this.modal = false;
+    }
+}

src/app/pages/home/home.component.html

@@ -109,9 +109,7 @@
                 }
                 @case ('gallery') {
                     <app-modal>
-                        <div class="p-4">
+                        <app-gallery></app-gallery>
-                            <p>Photos</p>
-                        </div>
                     </app-modal>
                 }
             }

src/app/pages/home/home.component.ts

@@ -24,6 +24,7 @@ import {ModalComponent} from "../../components/modal/modal.component";
 import {ProfilFormComponent} from "../../components/profil-form/profil-form.component";
 import {PasswordFormComponent} from "../../components/password-form/password-form.component";
 import {DesignationFormComponent} from "../../components/designation-form/designation-form.component";
+import {GalleryComponent} from "../../components/gallery/gallery.component";
 
 addIcons({
     'profile': personOutline,
@@ -49,7 +50,8 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery';
         ProfilFormComponent,
         PasswordFormComponent,
         PasswordFormComponent,
-        DesignationFormComponent
+        DesignationFormComponent,
+        GalleryComponent
     ]
 })
 export class HomeComponent implements OnInit {

src/app/services/api/model/get-user-proof-dto.ts

@@ -10,7 +10,6 @@
 
 
 export interface GetUserProofDto {
-    id?: number;
     proof?: string | null;
 }