Option and comment adding

Author: szuperaz

angular.json

@@ -219,7 +219,8 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "scss",
+          "changeDetection": "OnPush"
         },
         "@schematics/angular:application": {
           "strict": true

projects/stream-chat-angular/package.json

@@ -19,12 +19,16 @@
   "peerDependencies": {
     "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
     "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/forms": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
     "@breezystack/lamejs": "^1.2.7",
     "@ngx-translate/core": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "rxjs": "^7.4.0",
     "stream-chat": "^9.0.0"
   },
   "peerDependenciesMeta": {
+    "@angular/forms": {
+      "optional": true
+    },
     "@breezystack/lamejs": {
       "optional": true
     }

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

@@ -142,6 +142,7 @@ export const en = {
     'Add a comment': 'Add a comment',
     'Update your comment': 'Update your comment',
     'View {{count}} comments': 'View {{count}} comments',
+    'View {{count}} comment': 'View {{count}} comment',
     'View results': 'View results',
     'End vote': 'End vote',
     'After a poll is closed, no more votes can be cast':
@@ -153,5 +154,12 @@ export const en = {
     'Show all': 'Show all',
     'Poll results': 'Poll results',
     'Error loading votes': 'Error loading votes',
+    'Poll comments': 'Poll comments',
+    'Error loading answers': 'Error loading answers',
+    Comment: 'Comment',
+    'Failed to add comment': 'Failed to add comment',
+    'Failed to add option ({{ message }})':
+      'Failed to add option ({{ message }})',
+    'Option already exists': 'Option already exists',
   },
 };

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

@@ -10,7 +10,11 @@
   >
     <stream-icon-placeholder icon="close"></stream-icon-placeholder>
   </div>
-  <div #modalInner class="str-chat__modal__inner">
+  <div
+    #modalInner
+    class="str-chat__modal__inner"
+    (click)="$event.stopPropagation()"
+  >
     <ng-container *ngIf="content; else elseContent">
       <ng-container *ngTemplateOutlet="content"></ng-container>
     </ng-container>

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

@@ -0,0 +1,40 @@
+<div
+  class="str-chat__dialog str-chat__dialog--form str-chat__prompt-dialog str-chat__modal__suggest-poll-option"
+>
+  <div class="str-chat__dialog__body">
+    <div class="str-chat__dialog__title">
+      {{ "streamChat.Suggest an option" | translate }}
+    </div>
+    <form [formGroup]="formGroup" (ngSubmit)="addOption()">
+      <div class="str-chat__dialog__field">
+        <input formControlName="text" id="text" type="text" />
+        <div class="str-chat__form-field-error">
+          {{
+            formGroup.get("text")?.errors?.duplicate
+              ? ("streamChat.Option already exists" | translate)
+              : ""
+          }}
+        </div>
+      </div>
+      <div class="str-chat__dialog__controls">
+        <button
+          class="str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel"
+          onClick="{close}"
+          type="button"
+          translate
+          (click)="closeModal()"
+        >
+          {{ "streamChat.Cancel" | translate }}
+        </button>
+        <button
+          class="str-chat__dialog__controls-button str-chat__dialog__controls-button--submit"
+          type="submit"
+          translate
+          [disabled]="formGroup.invalid"
+        >
+          {{ "streamChat.Send" | translate }}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddOptionComponent } from './add-option.component';
+
+describe('AddOptionComponent', () => {
+  let component: AddOptionComponent;
+  let fixture: ComponentFixture<AddOptionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AddOptionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddOptionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,72 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+} from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+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',
+  styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddOptionComponent extends BasePollComponent {
+  @HostBinding('class') class = 'str-chat__dialog';
+  @Input() closeModal: () => void = () => {};
+  formGroup = new FormGroup({
+    text: new FormControl('', [
+      Validators.required,
+      createUniqueValidator((value) => {
+        return !this.options.some(
+          (option) =>
+            option.text.trim().toLowerCase() === value.trim().toLowerCase()
+        );
+      }),
+    ]),
+  });
+  options: PollOption[] = [];
+
+  async addOption() {
+    if (this.formGroup.invalid || !this.messageId) {
+      return;
+    }
+    try {
+      await this.poll?.createOption({
+        text: this.formGroup.value.text!,
+      });
+      this.closeModal();
+      this.markForCheck();
+    } catch (error) {
+      this.notificationService.addTemporaryNotification(
+        'streamChat.Failed to add option ({{ message }})',
+        'error',
+        undefined,
+        { message: error }
+      );
+      this.markForCheck();
+      throw error;
+    }
+  }
+
+  protected stateStoreSelector(
+    poll: Poll,
+    markForCheck: () => void
+  ): () => void {
+    const unsubscribe = poll.state.subscribeWithSelector(
+      (state) => ({
+        options: state.options,
+      }),
+      (state) => {
+        this.options = state.options;
+        markForCheck();
+      }
+    );
+
+    return unsubscribe;
+  }
+}

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

@@ -19,7 +19,7 @@
       class="str-chat__poll-action"
       (click)="modalOpened('suggestOption')"
     >
-      {{ "Suggest an option" | translate }}
+      {{ "streamChat.Suggest an option" | translate }}
     </button>
   </ng-container>
   <ng-container *ngIf="allowAnswers && canVote && !isClosed">
@@ -34,7 +34,8 @@
   </ng-container>
   <ng-container *ngIf="answerCount > 0 && canQueryVotes">
     <button class="str-chat__poll-action" (click)="modalOpened('viewComments')">
-      {{ "streamChat.View {{count}} comments" | translate:{count: answerCount}
+      {{ (answerCount === 1 ? "streamChat.View {{count}} comment" :
+      "streamChat.View {{ count }} comments") | translate:{count: answerCount}
       }}
     </button>
   </ng-container>
@@ -74,19 +75,14 @@
   </stream-modal>
 </ng-template>
 
-<!-- The modal components click outside logic can't identify clicks from subcomponents, so we stop event propagation -->
 <ng-template #allOptions>
-  <div
-    class="str-chat__modal__poll-option-list"
-    (click)="$event.stopPropagation()"
-  >
+  <div class="str-chat__modal__poll-option-list">
     <div class="str-chat__modal-header">
       <div class="str-chat__modal-header__title" translate>Poll options</div>
     </div>
     <div class="str-chat__modal__poll-option-list__body">
       <div class="str-chat__modal__poll-option-list__title">{{ name }}</div>
       <stream-poll-options-list
-        (click)="$event.stopPropagation()"
         [pollId]="pollId"
         [messageId]="messageId"
         [maxOptionsDisplayed]="undefined"
@@ -95,24 +91,39 @@
   </div>
 </ng-template>
 <ng-template #suggestOption>
-  <div>TODO: Suggest option</div>
+  <stream-add-option
+    [pollId]="pollId"
+    [messageId]="messageId"
+    [closeModal]="modalClosed"
+  ></stream-add-option>
+  <stream-notification-list></stream-notification-list>
 </ng-template>
 <ng-template #addAnswer>
-  <div>TODO: Add answer</div>
+  <stream-upsert-answer
+    [pollId]="pollId"
+    [messageId]="messageId"
+    [answer]="ownAnwer"
+    [closeModal]="modalClosed"
+  ></stream-upsert-answer>
+  <stream-notification-list></stream-notification-list>
 </ng-template>
 <ng-template #viewComments>
-  <div>TODO: View comments</div>
+  <stream-poll-answers-list
+    (upsertOwnAnswer)="modalOpened('addAnswer')"
+    [pollId]="pollId"
+    [messageId]="messageId"
+  ></stream-poll-answers-list>
+  <stream-notification-list></stream-notification-list>
 </ng-template>
 <ng-template #viewResults>
   <stream-poll-results-list
-    (click)="$event.stopPropagation()"
     [messageId]="messageId"
     [pollId]="pollId"
   ></stream-poll-results-list>
   <stream-notification-list></stream-notification-list>
 </ng-template>
 <ng-template #endVote>
-  <div class="str-chat__dialog" (click)="$event.stopPropagation()">
+  <div class="str-chat__dialog">
     <div class="str-chat__dialog__body str-chat-angular__dialog-body">
       <div class="str-chat__dialog__prompt" translate>
         After a poll is closed, no more votes can be cast

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

@@ -7,7 +7,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { BasePollComponent } from '../base-poll.component';
-import { Poll, PollOption, PollVote } from 'stream-chat';
+import { Poll, PollAnswer, PollOption } from 'stream-chat';
 import { ModalContext } from '../../types';
 import { CustomTemplatesService } from '../../custom-templates.service';
 import { ChatClientService } from '../../chat-client.service';
@@ -39,7 +39,7 @@ export class PollActionsComponent extends BasePollComponent {
   allowAnswers = false;
   answerCount = 0;
   isOwnPoll = false;
-  ownAnwer: PollVote | undefined;
+  ownAnwer: PollAnswer | undefined;
   selectedAction: Action | undefined = undefined;
   isModalOpen = false;
   @ViewChild('allOptions') allOptions!: TemplateRef<void>;
@@ -79,6 +79,7 @@ export class PollActionsComponent extends BasePollComponent {
         answer_count: state.answers_count,
         created_by: state.created_by,
         name: state.name,
+        own_answer: state.ownAnswer,
       }),
       (state) => {
         this.options = state.options;
@@ -88,24 +89,29 @@ export class PollActionsComponent extends BasePollComponent {
         this.answerCount = state.answer_count ?? 0;
         this.isOwnPoll = state.created_by?.id === this.currentUser?.id;
         this.name = state.name;
+        this.ownAnwer = state.own_answer ?? undefined;
         markForCheck();
       }
     );
 
     return unsubscribe;
   }
 
-  modalOpened(action: Action) {
+  modalOpened = (action: Action) => {
     this.selectedAction = action;
-    this.isModalOpen = true;
-    this.messageService.modalOpenedForMessage.next(this.messageId);
-  }
+    if (!this.isModalOpen) {
+      this.isModalOpen = true;
+      this.messageService.modalOpenedForMessage.next(this.messageId);
+    }
+  };
 
-  modalClosed() {
+  modalClosed = () => {
     this.selectedAction = undefined;
-    this.isModalOpen = false;
-    this.messageService.modalOpenedForMessage.next(undefined);
-  }
+    if (this.isModalOpen) {
+      this.isModalOpen = false;
+      this.messageService.modalOpenedForMessage.next(undefined);
+    }
+  };
 
   async closePoll() {
     try {

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

@@ -0,0 +1,38 @@
+<div class="str-chat__modal__poll-answer-list">
+  <div class="str-chat__modal-header">
+    <div class="str-chat__modal-header__title" translate>Poll comments</div>
+  </div>
+  <div class="str-chat__modal__poll-answer-list__body">
+    <div class="str-chat__poll-answer-list">
+      <stream-paginated-list
+        class="str-chat__poll-answer-list"
+        [items]="answers"
+        [hasMore]="next !== undefined"
+        [isLoading]="isLoading"
+        [trackBy]="trackByAnswerId"
+        (loadMore)="queryAnswers()"
+      >
+        <ng-template let-answer="item">
+          <div class="str-chat__poll-answer">
+            <p *ngIf="answer.answer_text" class="str-chat__poll-answer__text">
+              {{ answer.answer_text }}
+            </p>
+            <stream-poll-vote [vote]="answer"></stream-poll-vote>
+          </div>
+        </ng-template>
+      </stream-paginated-list>
+      <button
+        *ngIf="!isClosed"
+        class="str-chat__poll-action"
+        (click)="upsertOwnAnswer.emit()"
+      >
+        {{
+          (ownAnswer
+            ? "streamChat.Update your comment"
+            : "streamChat.Add a comment"
+          ) | translate
+        }}
+      </button>
+    </div>
+  </div>
+</div>