Added vue from groups

2026-04-25 16:12:24 +01:00
parent a1446f39ca
commit 3e6aae68d2
5 changed files with 254 additions and 0 deletions
@@ -0,0 +1,31 @@
+<div class="rounded-lg m-3 bg-white border border-gray-200 items-center overflow-scroll">
+    <ion-list>
+        @if (groups().length) {
+            @for (group of groups(); track group.id; let i = $index) {
+                @if (i == groups().length) {
+                    <ion-item lines="none" class="transition-all duration-200 active:[--background:#DBD8D7]">
+                        <p class="text-sm text-red-800">{{ group.label }}</p>
+                        <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
+                    </ion-item>
+                } @else {
+                    <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]">
+                        <p class="text-sm text-red-800">{{ group.label }}</p>
+                        <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
+                    </ion-item>
+                }
+            }
+        } @else {
+            <ion-item lines="none" class="border border-stone-200 rounded-xl m-3" style="--background: #fafaf8;">
+                <div class="flex flex-col items-center w-full px-10 py-20 gap-3">
+                    <div class="w-10 h-10 rounded-full bg-stone-100 border border-stone-200 flex items-center justify-center">
+                        <ion-icon name="group" style="color:#a8a090; font-size:20px;"></ion-icon>
+                    </div>
+                    <div class="text-center">
+                        <p class="m-0 text-sm font-medium text-stone-400">Pas encore de groupes</p>
+                        <p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Vos groupes apparaîtront ici</p>
+                    </div>
+                </div>
+            </ion-item>
+        }
+    </ion-list>
+</div>
@@ -0,0 +1,53 @@
+import {Component, inject, OnInit, signal} from '@angular/core';
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {GetGroupDto, GroupsService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {addIcons} from "ionicons";
+import {chatbubblesOutline, chevronForwardOutline} from "ionicons/icons";
+
+addIcons({
+    'group': chatbubblesOutline,
+    'chevron': chevronForwardOutline,
+});
+
+@Component({
+    selector: 'app-groups',
+    templateUrl: './groups.component.html',
+    styleUrls: ['./groups.component.scss'],
+    imports: [
+        IonicModule
+    ]
+})
+export class GroupsComponent implements OnInit {
+    private groupsService = inject(GroupsService);
+    private toastCtrl = inject(ToastController);
+    private loadCtrl = inject(LoadingController);
+
+    groups = signal<GetGroupDto[]>([]);
+
+    async ngOnInit() {
+        await this.fetchGroups();
+    }
+
+    async fetchGroups() {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            const groups = await firstValueFrom(this.groupsService.getAllGroupsEndpoint());
+            this.groups.set(groups);
+        }
+        catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de charger les groupes du joueur',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
+}