Added vue from groups

This commit is contained in:
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();
}
}
+149
View File
@@ -0,0 +1,149 @@
/**
* BeReadyBackend
*
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
/* tslint:disable:no-unused-variable member-ordering */
import { Inject, Injectable, Optional } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams,
HttpResponse, HttpEvent, HttpContext
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { OpenApiHttpParams, QueryParamStyle } from '../query.params';
// @ts-ignore
import { GetPostDto } from '../model/get-post-dto';
// @ts-ignore
import { BASE_PATH, COLLECTION_FORMATS } from '../variables';
import { Configuration } from '../configuration';
import { BaseService } from '../api.base.service';
@Injectable({
providedIn: 'root'
})
export class PostsService extends BaseService {
constructor(protected httpClient: HttpClient, @Optional() @Inject(BASE_PATH) basePath: string|string[], @Optional() configuration?: Configuration) {
super(basePath, configuration);
}
/**
* @endpoint get /API/Posts
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
* @param options additional options
*/
public getAllPostsEndpoint(observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Array<GetPostDto>>;
public getAllPostsEndpoint(observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Array<GetPostDto>>>;
public getAllPostsEndpoint(observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Array<GetPostDto>>>;
public getAllPostsEndpoint(observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
let localVarHeaders = this.defaultHeaders;
// authentication (JWTBearerAuth) required
localVarHeaders = this.configuration.addCredentialToHeaders('JWTBearerAuth', 'Authorization', localVarHeaders, 'Bearer ');
const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
'application/json'
]);
if (localVarHttpHeaderAcceptSelected !== undefined) {
localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
}
const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
const localVarTransferCache: boolean = options?.transferCache ?? true;
let responseType_: 'text' | 'json' | 'blob' = 'json';
if (localVarHttpHeaderAcceptSelected) {
if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
responseType_ = 'text';
} else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
responseType_ = 'json';
} else {
responseType_ = 'blob';
}
}
let localVarPath = `/API/Posts`;
const { basePath, withCredentials } = this.configuration;
return this.httpClient.request<Array<GetPostDto>>('get', `${basePath}${localVarPath}`,
{
context: localVarHttpContext,
responseType: <any>responseType_,
...(withCredentials ? { withCredentials } : {}),
headers: localVarHeaders,
observe: observe,
...(localVarTransferCache !== undefined ? { transferCache: localVarTransferCache } : {}),
reportProgress: reportProgress
}
);
}
/**
* @endpoint patch /API/Posts/{postId}/Like
* @param postId
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
* @param options additional options
*/
public patchLikeEndpoint(postId: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any>;
public patchLikeEndpoint(postId: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<any>>;
public patchLikeEndpoint(postId: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<any>>;
public patchLikeEndpoint(postId: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any> {
if (postId === null || postId === undefined) {
throw new Error('Required parameter postId was null or undefined when calling patchLikeEndpoint.');
}
let localVarHeaders = this.defaultHeaders;
// authentication (JWTBearerAuth) required
localVarHeaders = this.configuration.addCredentialToHeaders('JWTBearerAuth', 'Authorization', localVarHeaders, 'Bearer ');
const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
]);
if (localVarHttpHeaderAcceptSelected !== undefined) {
localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
}
const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
const localVarTransferCache: boolean = options?.transferCache ?? true;
let responseType_: 'text' | 'json' | 'blob' = 'json';
if (localVarHttpHeaderAcceptSelected) {
if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
responseType_ = 'text';
} else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
responseType_ = 'json';
} else {
responseType_ = 'blob';
}
}
let localVarPath = `/API/Posts/${this.configuration.encodeParam({name: "postId", value: postId, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int32"})}/Like`;
const { basePath, withCredentials } = this.configuration;
return this.httpClient.request<any>('patch', `${basePath}${localVarPath}`,
{
context: localVarHttpContext,
responseType: <any>responseType_,
...(withCredentials ? { withCredentials } : {}),
headers: localVarHeaders,
observe: observe,
...(localVarTransferCache !== undefined ? { transferCache: localVarTransferCache } : {}),
reportProgress: reportProgress
}
);
}
}
@@ -0,0 +1,21 @@
/**
* BeReadyBackend
*
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
export interface GetPostDto {
id?: number;
libelle?: string | null;
creationDate?: string;
likes?: number;
isLiked?: boolean;
userId?: number;
username?: string | null;
}