Poll display complete (i18n needs to be checked)

Author: szuperaz

projects/stream-chat-angular/src/assets/i18n/en.ts

@@ -161,5 +161,7 @@ export const en = {
     'Failed to add option ({{ message }})':
       'Failed to add option ({{ message }})',
     'Option already exists': 'Option already exists',
+    'You have reached the maximum number of votes allowed':
+      'You have reached the maximum number of votes allowed',
   },
 };

projects/stream-chat-angular/src/lib/modal/modal.component.html

@@ -14,6 +14,7 @@
     #modalInner
     class="str-chat__modal__inner"
     (click)="$event.stopPropagation()"
+    (keyup.enter)="$event.stopPropagation()"
   >
     <ng-container *ngIf="content; else elseContent">
       <ng-container *ngTemplateOutlet="content"></ng-container>

projects/stream-chat-angular/src/lib/polls/base-poll.component.ts

@@ -15,6 +15,9 @@ import { Subscription } from 'rxjs';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { NotificationService } from '../notification.service';
 
+/**
+ *
+ */
 @Component({
   selector: 'stream-base-poll',
   template: '',
@@ -30,6 +33,7 @@ export abstract class BasePollComponent
   private pollStateUnsubscribe?: () => void;
   private isViewInited = false;
   private capabilitySubscription?: Subscription;
+  protected dismissNotificationFn: (() => void) | undefined;
 
   constructor(
     public customTemplatesService: CustomTemplatesService,
@@ -56,6 +60,7 @@ export abstract class BasePollComponent
       } else {
         this.pollStateUnsubscribe?.();
       }
+      this.dismissNotificationFn?.();
     }
   }
 
@@ -65,6 +70,8 @@ export abstract class BasePollComponent
 
   ngOnDestroy(): void {
     this.pollStateUnsubscribe?.();
+    this.dismissNotificationFn?.();
+    this.capabilitySubscription?.unsubscribe();
   }
 
   protected get poll(): Poll | undefined {
@@ -83,6 +90,16 @@ export abstract class BasePollComponent
     }
   }
 
+  protected addNotification(
+    ...args: Parameters<
+      typeof this.notificationService.addTemporaryNotification
+    >
+  ) {
+    this.dismissNotificationFn?.();
+    this.dismissNotificationFn =
+      this.notificationService.addTemporaryNotification(...args);
+  }
+
   protected abstract stateStoreSelector(
     poll: Poll,
     markForCheck: () => void

projects/stream-chat-angular/src/lib/polls/poll-actions/add-option/add-option.component.spec.ts

@@ -9,6 +9,9 @@ import { BasePollComponent } from '../../base-poll.component';
 import { Poll, PollOption } from 'stream-chat';
 import { createUniqueValidator } from '../../unique.validator';
 
+/**
+ *
+ */
 @Component({
   selector: 'stream-add-option',
   templateUrl: './add-option.component.html',

projects/stream-chat-angular/src/lib/polls/poll-actions/add-option/add-option.component.ts

@@ -76,7 +76,7 @@
 </ng-template>
 
 <ng-template #allOptions>
-  <div class="str-chat__modal__poll-option-list">
+  <div class="str-chat__modal__poll-option-list str-chat-angular__poll-actions">
     <div class="str-chat__modal-header">
       <div class="str-chat__modal-header__title" translate>Poll options</div>
     </div>
@@ -87,6 +87,7 @@
         [messageId]="messageId"
         [maxOptionsDisplayed]="undefined"
       ></stream-poll-options-list>
+      <stream-notification-list></stream-notification-list>
     </div>
   </div>
 </ng-template>

projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.html

@@ -23,6 +23,9 @@ type Action =
   | 'viewResults'
   | 'endVote';
 
+/**
+ *
+ */
 @Component({
   selector: 'stream-poll-actions',
   templateUrl: './poll-actions.component.html',
@@ -80,6 +83,8 @@ export class PollActionsComponent extends BasePollComponent {
         created_by: state.created_by,
         name: state.name,
         own_answer: state.ownAnswer,
+        max_votes_allowed: state.max_votes_allowed,
+        own_votes_by_option_id: state.ownVotesByOptionId,
       }),
       (state) => {
         this.options = state.options;

projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.spec.ts

@@ -3,19 +3,26 @@ import {
   Component,
   EventEmitter,
   HostBinding,
+  OnChanges,
   Output,
   SimpleChanges,
 } from '@angular/core';
 import { BasePollComponent } from '../../base-poll.component';
 import { Poll, PollAnswer } from 'stream-chat';
 
+/**
+ *
+ */
 @Component({
   selector: 'stream-poll-answers-list',
   templateUrl: './poll-answers-list.component.html',
   styles: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PollAnswersListComponent extends BasePollComponent {
+export class PollAnswersListComponent
+  extends BasePollComponent
+  implements OnChanges
+{
   @HostBinding('class') class = 'str-chat__modal__poll-answer-list';
   @Output() upsertOwnAnswer = new EventEmitter<void>();
   isLoading = false;
@@ -27,7 +34,7 @@ export class PollAnswersListComponent extends BasePollComponent {
   ngOnChanges(changes: SimpleChanges): void {
     super.ngOnChanges(changes);
     if (changes['pollId']) {
-      this.queryAnswers();
+      void this.queryAnswers();
     }
   }