Improve add new topic behaviour

Upon adding a new topic,
* Immediately adds the topic instead of the user having to press the new topic checkbox
* Clear the search filter box since there would be no other results

Author: samuelim01

frontend/src/app/questions/question-dialog.component.html

@@ -29,6 +29,7 @@
             <label for="questionTopics">Topics</label>
 
             <p-multiSelect
+                #topicSelector
                 required="true"
                 class="w-12"
                 [style]="{ width: '100%' }"
@@ -45,7 +46,7 @@
                 <ng-template pTemplate="footer" class="w-12 p-fluid">
                     <p-button
                         class="w-12 p-fluid"
-                        *ngIf="isNoResultsFound"
+                        *ngIf="hasNoResultsFound"
                         type="button"
                         label="Add as New Topic"
                         icon="pi pi-plus"

frontend/src/app/questions/question-dialog.component.ts

@@ -1,8 +1,8 @@
-import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnInit, ViewChild } from '@angular/core';
 import { Question, QuestionBody, SingleQuestionResponse } from './question.model';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { DialogModule } from 'primeng/dialog';
-import { MultiSelectModule } from 'primeng/multiselect';
+import { MultiSelect, MultiSelectModule } from 'primeng/multiselect';
 import { DropdownModule } from 'primeng/dropdown';
 import { ButtonModule } from 'primeng/button';
 import { ConfirmationService, MessageService } from 'primeng/api';
@@ -30,6 +30,7 @@ import { CommonModule } from '@angular/common';
     styleUrl: './question-dialog.component.css',
 })
 export class QuestionDialogComponent implements OnInit {
+    @ViewChild('topicSelector') topicSelector!: MultiSelect;
     @Input() question!: Question;
     @Input() headerMessage!: string;
     @Input() isDialogVisible = false;
@@ -42,23 +43,22 @@ export class QuestionDialogComponent implements OnInit {
     @Output() successfulRequest = new EventEmitter<string>();
 
     questionFormGroup!: FormGroup;
-
     submitted = false;
 
     questions: Question[] = [];
-
     topicSearchValue = '';
-
-    isNoResultsFound = false;
-
-    filteredTopics: Topic[] = [];
+    hasNoResultsFound = false;
 
     constructor(private questionService: QuestionService) {}
 
     ngOnInit(): void {
         this.initFormGroup();
     }
 
+    get topicControl(): FormControl {
+        return this.questionFormGroup.controls['topics'] as FormControl;
+    }
+
     get isTitleInvalid(): boolean {
         const titleControl = this.questionFormGroup.controls['title'];
         return titleControl.dirty && titleControl.invalid;
@@ -164,28 +164,29 @@ export class QuestionDialogComponent implements OnInit {
 
     onFilterTopics(event: { filter: string }) {
         this.topicSearchValue = event.filter;
-
-        this.filteredTopics = this.topics.filter(topic =>
+        this.hasNoResultsFound = !this.topics.some(topic =>
             topic.label.toLowerCase().includes(this.topicSearchValue.toLowerCase()),
         );
-
-        this.isNoResultsFound = this.filteredTopics.length == 0;
     }
 
     addNewTopic() {
+        const newTopic = this.topicSearchValue;
         const newValue: Topic = {
-            label: this.topicSearchValue,
-            value: this.topicSearchValue,
+            label: newTopic,
+            value: newTopic,
         };
 
-        const topicExists = this.topics.some(
-            topic =>
-                topic.label.toLowerCase() === newValue.label.toLowerCase() ||
-                topic.value.toLowerCase() === newValue.value.toLowerCase(),
-        );
+        const topicExists = this.topics.map(t => t.label).some(l => l.toLowerCase() === newTopic.toLowerCase());
 
-        if (!topicExists) {
-            this.topics = [...this.topics, newValue];
+        if (topicExists) {
+            return;
         }
+
+        this.topics.push(newValue);
+
+        // Immediately add the new topic, and clear the search filter
+        this.topicControl.setValue(this.topicControl.value?.concat([newTopic]) ?? [newTopic]);
+        this.topicSelector.resetFilter();
+        this.hasNoResultsFound = false;
     }
 }