fix(event): bloqueia no frontend a confirmação de presença quando limite for atingido

closed #132

Author: nestorhugo

packages/event/feature-page/src/lib/containers/event-page/event-page.container.html

@@ -36,13 +36,17 @@ <h3>
 </header>
 
 <section class="event-page-content">
+  @if (rsvpFacade.response$ | async; as presences){
   <form class="rsvp-button" [formGroup]="form">
     <devmx-rsvp-button
       class="rsvp-button"
       formControlName="status"
       (statusChange)="onStatusChange()"
+      [maxAttendees]="event.maxAttendees ?? 0"
+      [attendees]="presences.length"
     />
   </form>
+  }
 
   <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
     <mat-tab label="Descrição">

packages/event/feature-shell/src/lib/containers/event-details/event-defails.container.html

@@ -67,7 +67,6 @@
     </a>
   </mat-card-content>
 
-
   @if (event.presentations.length) {
   <mat-list>
     <h3 mat-subheader>Apresentações</h3>
@@ -98,12 +97,16 @@ <h3 mat-subheader>Organizadores</h3>
     <devmx-rsvp-button
       formControlName="status"
       (statusChange)="onStatusChange()"
+      [attendees]="presences.length"
+      [maxAttendees]="event.maxAttendees ?? 0"
     />
   </form>
 
   <mat-list>
-    <h3 mat-subheader>Presenças</h3>
-
+    <div class="presences">
+      <h3 mat-subheader>Presenças</h3>
+      <p>{{ presences.length }} / {{ event.maxAttendees }}</p>
+    </div>
     @for (rsvp of presences; track rsvp) {
     <mat-list-item>
       <img

packages/event/feature-shell/src/lib/containers/event-details/event-defails.container.scss

@@ -36,6 +36,13 @@
     }
   }
 
+  .presences {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding-right: 1rem;
+  }
+
   .rsvp-button {
     padding: 1em;
   }

packages/event/ui-shared/src/lib/components/rsvp-button/rsvp-button.component.html

@@ -3,8 +3,15 @@
   (change)="statusChange.emit()"
   aria-label="Presença"
   class="button-group"
+  [matTooltip]="'O evento chegou ao limite de participantes'"
+  [matTooltipDisabled]="attendees() < maxAttendees()"
 >
-  <mat-button-toggle value="confirmed">Vou!</mat-button-toggle>
+  <mat-button-toggle
+    [disabled]="attendees() >= maxAttendees()"
+    value="confirmed"
+  >
+    Vou!
+  </mat-button-toggle>
   <mat-button-toggle value="declined">Não vou</mat-button-toggle>
   <mat-button-toggle value="maybe">Talvez</mat-button-toggle>
 </mat-button-toggle-group>

packages/event/ui-shared/src/lib/components/rsvp-button/rsvp-button.component.ts

@@ -7,7 +7,9 @@ import {
   Renderer2,
   ElementRef,
   ChangeDetectionStrategy,
+  input,
 } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import {
   NgControl,
   FormControl,
@@ -20,9 +22,11 @@ import {
   templateUrl: './rsvp-button.component.html',
   styleUrl: './rsvp-button.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ReactiveFormsModule, MatButtonToggleModule],
+  imports: [ReactiveFormsModule, MatButtonToggleModule, MatTooltipModule],
 })
 export class RSVPButtonComponent extends DefaultValueAccessor {
+  attendees = input<number>(0);
+  maxAttendees = input<number>(0);
   statusChange = output<void>();
 
   get control() {