[feat] Add event voting on event info page

src/app/home/events/event-info/event-info-view/event-info-view.component.html

@@ -3,8 +3,20 @@
     <b>{{ 'EVENTS_ADMINISTRATION_INFO_EVENT' | translate }}</b> {{ event.name }}
     <span style="color: gray" *ngIf="objectLoaded">({{ event.getUntil() }})</span>
   </h1>
-  <div fxLayout="row" style="margin-bottom: 15px">
+  <div fxLayout="row break" fxLayoutAlign="space-between" style="margin-bottom: 15px">
     <app-go-back-button></app-go-back-button>
+    <button mat-flat-button color="accent" *ngIf="!event?.alreadyVotedFor" (click)="onEventVote(event)">
+      {{ 'EVENTS_ADMINISTRATION_USER_MANAGEMENT_FOR_EVENT_VOTE' | translate }}
+    </button>
+    <button
+      mat-flat-button
+      [style.background-color]="event?.decisionColor"
+      *ngIf="event?.alreadyVotedFor"
+      (click)="cancelEventVoting(event)"
+    >
+      <mat-icon>delete</mat-icon>
+      {{ 'EVENTS_VIEW_EVENT_CARD_VOTED_FOR' | translate }} {{ event?.userDecision }}
+    </button>
   </div>
   <app-event-info [eventId]="event.id" (eventLoaded)="eventLoaded($event)"></app-event-info>
 </div>

src/app/home/events/event-info/event-info-view/event-info-view.component.ts

@@ -3,6 +3,11 @@ import {ActivatedRoute} from '@angular/router';
 
 import {Event} from '../../models/event.model';
 import {UIHelper} from '../../../../utils/helper/UIHelper';
+import {EventsVoteForDecisionModalComponent} from '../../events-view/events-vote-for-decision-modal/events-vote-for-decision-modal.component';
+import {QuestionDialogComponent} from '../../../../utils/shared-components/question-dialog/question-dialog.component';
+import {MatBottomSheet} from '@angular/material/bottom-sheet';
+import {EventsUserService} from '../../services/events-user.service';
+import {NotificationService} from '../../../../utils/notification.service';
 
 @Component({
   selector: 'app-event-info-view',
@@ -13,7 +18,12 @@ export class EventInfoViewComponent {
   event: Event;
   objectLoaded = false;
 
-  constructor(private route: ActivatedRoute) {
+  constructor(
+    private route: ActivatedRoute,
+    private bottomSheet: MatBottomSheet,
+    private eventsUserService: EventsUserService,
+    private notificationService: NotificationService
+  ) {
     this.route.paramMap.subscribe((params) => {
       const id = params.get('id');
 
@@ -48,4 +58,48 @@ export class EventInfoViewComponent {
     this.event = event;
     this.objectLoaded = true;
   }
+
+  public onEventVote(event: Event) {
+    const bottomSheetRef = this.bottomSheet.open(EventsVoteForDecisionModalComponent, {
+      data: {event},
+    });
+
+    bottomSheetRef.afterDismissed().subscribe((dto) => {
+      if (dto != null) {
+        this.eventsUserService.voteForDecision(event.id, dto.decision, dto.additionalInformation).subscribe(
+          (response: any) => {
+            console.log(response);
+            this.eventsUserService.getEvent(this.event.id);
+            this.notificationService.info('EVENTS_VIEW_EVENT_SUCCESSFULLY_VOTED');
+          },
+          (error) => console.log(error)
+        );
+      } else {
+        console.log('events-view | Closed bottom sheet, voted for nohting');
+      }
+    });
+  }
+
+  public cancelEventVoting(event: Event) {
+    const bottomSheetRef = this.bottomSheet.open(QuestionDialogComponent, {
+      data: {
+        question: 'EVENTS_CANCEL_VOTING',
+      },
+    });
+
+    bottomSheetRef.afterDismissed().subscribe((value: string) => {
+      if (value?.includes(QuestionDialogComponent.YES_VALUE)) {
+        this.eventsUserService.removeDecision(event.id).subscribe(
+          (response: any) => {
+            console.log(response);
+            this.eventsUserService.getEvent(this.event.id);
+            this.notificationService.info('EVENTS_VIEW_EVENT_SUCCESSFULLY_REMOVED_VOTING');
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+      }
+    });
+  }
 }

src/app/home/events/services/events-user.service.ts

@@ -161,6 +161,14 @@ export class EventsUserService {
         }
 
         event.setResultGroups(resultGroups);
+
+        event.alreadyVotedFor = response.already_voted;
+        if (event.alreadyVotedFor) {
+          event.userDecision = response.user_decision.decision;
+          event.additionalInformation = response.user_decision.additional_information;
+          event.decisionColor = response.user_decision.color;
+        }
+
         this.setEvent(event);
       },
       (error) => console.log(error)