diff --git a/src/app/core/chat/discussion.service.ts b/src/app/core/chat/discussion.service.ts index 8dcf16a..d2c4f85 100644 --- a/src/app/core/chat/discussion.service.ts +++ b/src/app/core/chat/discussion.service.ts @@ -28,4 +28,8 @@ export class discussionsService { createPrivateDiscussion(username: string): Observable { return this.http.post(`${this.apiUrl}/discussions/private`, { username }); } + + createGroupDiscussion(groupName: string, usernames: string[]): Observable { + return this.http.post(`${this.apiUrl}/discussions/group`, { groupName, usernames }); + } } \ No newline at end of file diff --git a/src/app/pages/menu/menu-nav/menu-nav.component.css b/src/app/pages/menu/menu-nav/menu-nav.component.css index c24a21a..7a4309c 100644 --- a/src/app/pages/menu/menu-nav/menu-nav.component.css +++ b/src/app/pages/menu/menu-nav/menu-nav.component.css @@ -107,4 +107,159 @@ transform: scale(0.97); box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1); } +} + +.mode-switch { + margin-top: auto; + + display: flex; + align-items: center; + justify-content: space-between; + + padding: 14px 16px; + + background: rgba(255, 255, 255, 0.2); + border-radius: 16px; + + backdrop-filter: blur(8px); + box-shadow: 0 2px 12px rgba(122, 46, 46, 0.08); +} + +.switch-label { + color: #7a2e2e; + font-weight: 600; + font-size: 0.95rem; +} + +/* SWITCH */ + +.switch { + position: relative; + width: 58px; + height: 32px; +} + +.switch input { + display: none; +} + +.slider { + position: absolute; + inset: 0; + + cursor: pointer; + + background: rgba(255, 255, 255, 0.6); + border-radius: 999px; + + transition: all 0.25s ease; + + box-shadow: + inset 0 1px 3px rgba(0,0,0,0.08), + 0 2px 8px rgba(0,0,0,0.05); +} + +.slider::before { + content: ""; + + position: absolute; + top: 4px; + left: 4px; + + width: 24px; + height: 24px; + + border-radius: 50%; + background: white; + + transition: all 0.25s ease; + + box-shadow: + 0 2px 8px rgba(0,0,0,0.15); +} + +.switch input:checked + .slider { + background: #bd5a5a; +} + +.switch input:checked + .slider::before { + transform: translateX(26px); +} + +.mode-switch:hover .slider { + transform: scale(1.03); +} + +.add-member-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + + width: 100%; + + padding: 12px 16px; + + border: 2px dashed rgba(189, 90, 90, 0.35); + border-radius: 14px; + + background: rgba(255, 255, 255, 0.55); + + color: #bd5a5a; + font-size: 0.95rem; + font-weight: 600; + + cursor: pointer; + + transition: all 0.2s ease; + + ion-icon { + font-size: 1.2rem; + } + + &:hover { + background: rgba(255, 255, 255, 0.8); + border-color: #bd5a5a; + transform: translateY(-1px); + } + + &:active { + transform: scale(0.98); + } +} + +.remove-btn { + width: 26px; + height: 26px; + + flex-shrink: 0; + + display: flex; + align-items: center; + justify-content: center; + + border: none; + border-radius: 50%; + + background: white; + color: #bd5a5a; + + cursor: pointer; + + box-shadow: 0 2px 8px rgba(180, 80, 80, 0.12); + + transition: all 0.2s ease; + + ion-icon { + font-size: 1.1rem; + } + + &:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(180, 80, 80, 0.18); + } + + &:active { + transform: scale(0.92); + } } \ No newline at end of file diff --git a/src/app/pages/menu/menu-nav/menu-nav.component.html b/src/app/pages/menu/menu-nav/menu-nav.component.html index cda9904..d46da27 100644 --- a/src/app/pages/menu/menu-nav/menu-nav.component.html +++ b/src/app/pages/menu/menu-nav/menu-nav.component.html @@ -11,30 +11,91 @@
-

Nouvelle conversation

- +

{{ isGroup() ? 'Nouveau groupe' : 'Nouvelle conversation' }}

+
+ +
-
- - - + + + +
+ + + +

{{ errorMsg() }}

+
+ + + + + +
+ + + +
+ +
+
+ + + + +
+
+ + +

{{ errorMsg() }}

+ + + + +
+ + {{ isGroup() ? 'Mode groupe' : 'Conversation privée' }} + + +
-
-
\ No newline at end of file diff --git a/src/app/pages/menu/menu-nav/menu-nav.component.ts b/src/app/pages/menu/menu-nav/menu-nav.component.ts index ac9f664..3678ffe 100644 --- a/src/app/pages/menu/menu-nav/menu-nav.component.ts +++ b/src/app/pages/menu/menu-nav/menu-nav.component.ts @@ -2,14 +2,14 @@ import { Component, inject, signal } from '@angular/core'; import { Router } from "@angular/router"; import { ReactiveFormsModule, FormControl } from "@angular/forms"; import { addIcons } from "ionicons"; -import { closeOutline } from "ionicons/icons"; import { IonIcon, IonInput, IonItem, IonModal } from "@ionic/angular/standalone"; +import { closeOutline, addOutline } from "ionicons/icons"; import { discussionsService } from "../../../core/chat/discussion.service"; -import { CommonModule } from "@angular/common"; +import {CommonModule} from "@angular/common"; @Component({ selector: 'app-menu-nav', - imports: [CommonModule, IonModal, IonItem, IonInput, IonIcon, ReactiveFormsModule], + imports: [IonModal, IonItem, IonInput, IonIcon, ReactiveFormsModule, CommonModule], templateUrl: './menu-nav.component.html', styleUrl: './menu-nav.component.css' }) @@ -21,11 +21,17 @@ export class MenuNav { isModalOpen = signal(false); isLoading = signal(false); errorMsg = signal(null); + isGroup = signal(false); + // Mode privé username = new FormControl(''); + // Mode groupe + groupName = new FormControl(''); + groupMembers: FormControl[] = [new FormControl('')]; + constructor() { - addIcons({ closeOutline }); + addIcons({ closeOutline, addOutline }); } openNav() { this.isModalOpen.set(true); } @@ -33,7 +39,25 @@ export class MenuNav { closeNav() { this.isModalOpen.set(false); this.username.reset(); + this.groupName.reset(); + this.groupMembers = [new FormControl('')]; this.errorMsg.set(null); + this.isGroup.set(false); + } + + toggleMode() { + this.isGroup.update(v => !v); + this.errorMsg.set(null); + } + + addMember() { + if (this.groupMembers.length < 10) { + this.groupMembers.push(new FormControl('')); + } + } + + removeMember(index: number) { + this.groupMembers.splice(index, 1); } startConversation() { @@ -57,4 +81,30 @@ export class MenuNav { } }); } + + startGroupConversation() { + const name = this.groupName.value?.trim(); + const usernames = this.groupMembers + .map(c => c.value?.trim()) + .filter(v => !!v); + + if (!name || usernames.length === 0 || this.isLoading()) return; + + this.isLoading.set(true); + this.errorMsg.set(null); + + this.discussionService.createGroupDiscussion(name, usernames).subscribe({ + next: (discussion) => { + this.isLoading.set(false); + this.closeNav(); + this.router.navigate(['/main/messages', discussion.id]); + }, + error: (err) => { + this.isLoading.set(false); + this.errorMsg.set( + err.status === 404 ? 'Un ou plusieurs utilisateurs introuvables.' : 'Une erreur est survenue.' + ); + } + }); + } } \ No newline at end of file diff --git a/src/app/pages/messages/messages-infouser/messages-infouser.component.html b/src/app/pages/messages/messages-infouser/messages-infouser.component.html index 49255bc..4477fe4 100644 --- a/src/app/pages/messages/messages-infouser/messages-infouser.component.html +++ b/src/app/pages/messages/messages-infouser/messages-infouser.component.html @@ -2,5 +2,5 @@
user
- Nom User + {{ name || 'Utilisateur' }} \ No newline at end of file diff --git a/src/app/pages/messages/messages-infouser/messages-infouser.component.ts b/src/app/pages/messages/messages-infouser/messages-infouser.component.ts index 701f4e9..8bbbe6f 100644 --- a/src/app/pages/messages/messages-infouser/messages-infouser.component.ts +++ b/src/app/pages/messages/messages-infouser/messages-infouser.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import {Component, inject, Input} from '@angular/core'; +import {AuthService} from "../../../core/auth/auth.service"; @Component({ selector: 'app-messages-infouser', @@ -7,5 +8,8 @@ import { Component } from '@angular/core'; styleUrl: './messages-infouser.component.css' }) export class MessagesInfoUser { + @Input() name: string = ''; + private authService = inject(AuthService); + user = this.authService.currentUser; } diff --git a/src/app/pages/messages/messages-main/messages-main.component.html b/src/app/pages/messages/messages-main/messages-main.component.html index d6dae06..f25738b 100644 --- a/src/app/pages/messages/messages-main/messages-main.component.html +++ b/src/app/pages/messages/messages-main/messages-main.component.html @@ -2,7 +2,7 @@
- +
diff --git a/src/app/pages/messages/messages-main/messages-main.component.ts b/src/app/pages/messages/messages-main/messages-main.component.ts index 9c06923..1c0954e 100644 --- a/src/app/pages/messages/messages-main/messages-main.component.ts +++ b/src/app/pages/messages/messages-main/messages-main.component.ts @@ -24,11 +24,19 @@ export class MessagesMain implements OnInit { currentDiscussionId!: string; currentUserId!: number; messages: Message[] = []; + discussionName: string = ''; async ngOnInit() { this.currentDiscussionId = this.route.snapshot.paramMap.get('discussionId')!; this.currentUserId = this.authService.getCurrentUserId(); + this.discussionService.getDiscussions().subscribe({ + next: (discussions) => { + const discussion = discussions.find(d => d.id === +this.currentDiscussionId); + this.discussionName = discussion?.name ?? ''; + } + }); + this.discussionService.getMessages(this.currentDiscussionId).subscribe({ next: (messages) => this.messages = messages, error: (err) => console.error('Impossible de charger les messages', err) diff --git a/src/app/services/api/.openapi-generator/FILES b/src/app/services/api/.openapi-generator/FILES index a031b31..7cacb3a 100644 --- a/src/app/services/api/.openapi-generator/FILES +++ b/src/app/services/api/.openapi-generator/FILES @@ -39,6 +39,7 @@ model/knots-dto-user-update-user-description-dto.ts model/knots-dto-user-update-user-password-dto.ts model/knots-dto-user-update-user-profile-picture-dto.ts model/knots-dto-user-update-username-dto.ts +model/knots-endpoints-discussion-create-group-discussion-request.ts model/knots-endpoints-discussion-create-private-discussion-request.ts model/models.ts param.ts diff --git a/src/app/services/api/api/discussions.service.ts b/src/app/services/api/api/discussions.service.ts index 5f6594c..250b1dc 100644 --- a/src/app/services/api/api/discussions.service.ts +++ b/src/app/services/api/api/discussions.service.ts @@ -25,6 +25,8 @@ import { KnotsDTODiscussionDeleteDiscussionDto } from '../model/knots-dto-discus // @ts-ignore import { KnotsDTOMessageGetMessageDetailsDto } from '../model/knots-dto-message-get-message-details-dto'; // @ts-ignore +import { KnotsEndpointsDiscussionCreateGroupDiscussionRequest } from '../model/knots-endpoints-discussion-create-group-discussion-request'; +// @ts-ignore import { KnotsEndpointsDiscussionCreatePrivateDiscussionRequest } from '../model/knots-endpoints-discussion-create-private-discussion-request'; // @ts-ignore @@ -108,6 +110,74 @@ export class DiscussionsService extends BaseService { ); } + /** + * @endpoint post /API/discussions/group + * @param knotsEndpointsDiscussionCreateGroupDiscussionRequest + * @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 createGroupDiscussionEndpoint(knotsEndpointsDiscussionCreateGroupDiscussionRequest: KnotsEndpointsDiscussionCreateGroupDiscussionRequest, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable; + public createGroupDiscussionEndpoint(knotsEndpointsDiscussionCreateGroupDiscussionRequest: KnotsEndpointsDiscussionCreateGroupDiscussionRequest, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable>; + public createGroupDiscussionEndpoint(knotsEndpointsDiscussionCreateGroupDiscussionRequest: KnotsEndpointsDiscussionCreateGroupDiscussionRequest, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable>; + public createGroupDiscussionEndpoint(knotsEndpointsDiscussionCreateGroupDiscussionRequest: KnotsEndpointsDiscussionCreateGroupDiscussionRequest, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable { + if (knotsEndpointsDiscussionCreateGroupDiscussionRequest === null || knotsEndpointsDiscussionCreateGroupDiscussionRequest === undefined) { + throw new Error('Required parameter knotsEndpointsDiscussionCreateGroupDiscussionRequest was null or undefined when calling createGroupDiscussionEndpoint.'); + } + + 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; + + + // to determine the Content-Type header + const consumes: string[] = [ + 'application/json' + ]; + const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes); + if (httpContentTypeSelected !== undefined) { + localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected); + } + + 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/discussions/group`; + const { basePath, withCredentials } = this.configuration; + return this.httpClient.request('post', `${basePath}${localVarPath}`, + { + context: localVarHttpContext, + body: knotsEndpointsDiscussionCreateGroupDiscussionRequest, + responseType: responseType_, + ...(withCredentials ? { withCredentials } : {}), + headers: localVarHeaders, + observe: observe, + ...(localVarTransferCache !== undefined ? { transferCache: localVarTransferCache } : {}), + reportProgress: reportProgress + } + ); + } + /** * @endpoint post /API/discussions/private * @param knotsEndpointsDiscussionCreatePrivateDiscussionRequest diff --git a/src/app/services/api/model/knots-endpoints-discussion-create-group-discussion-request.ts b/src/app/services/api/model/knots-endpoints-discussion-create-group-discussion-request.ts new file mode 100644 index 0000000..7232d71 --- /dev/null +++ b/src/app/services/api/model/knots-endpoints-discussion-create-group-discussion-request.ts @@ -0,0 +1,16 @@ +/** + * Knots + * + * + * + * 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 KnotsEndpointsDiscussionCreateGroupDiscussionRequest { + groupName?: string; + usernames?: Array; +} + diff --git a/src/app/services/api/model/models.ts b/src/app/services/api/model/models.ts index 5872591..5a273ba 100644 --- a/src/app/services/api/model/models.ts +++ b/src/app/services/api/model/models.ts @@ -23,4 +23,5 @@ export * from './knots-dto-user-update-user-description-dto'; export * from './knots-dto-user-update-user-password-dto'; export * from './knots-dto-user-update-user-profile-picture-dto'; export * from './knots-dto-user-update-username-dto'; +export * from './knots-endpoints-discussion-create-group-discussion-request'; export * from './knots-endpoints-discussion-create-private-discussion-request';