Update topics dropdown to allow addition of new topics

Author: limcaaarl

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

@@ -32,10 +32,24 @@
                     required="true"
                     [style]="{ width: '100%' }"
                     [options]="topics"
+                    (onFilter)="onFilterTopics($event)"
                     formControlName="topics"
                     optionLabel="label"
                     optionValue="value"
-                    placeholder="Select Topics" />
+                    placeholder="Select Topics">
+                    <ng-template let-option pTemplate="item">
+                        <span>{{ option.label }}</span>
+                    </ng-template>
+
+                    <ng-template pTemplate="footer">
+                        <p-button
+                            *ngIf="isNoResultsFound"
+                            type="button"
+                            label="Add as New Topic"
+                            icon="pi pi-plus"
+                            (click)="addNewTopic()" />
+                    </ng-template>
+                </p-multiSelect>
                 @if (isTopicsInvalid) {
                     <small class="text-red-300">Topic(s) is required.</small>
                 }

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

@@ -10,6 +10,7 @@ import { QuestionService } from '../../_services/question.service';
 import { Difficulty } from './difficulty.model';
 import { Topic } from './topic.model';
 import { HttpErrorResponse } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'app-question-dialog',
@@ -22,6 +23,7 @@ import { HttpErrorResponse } from '@angular/common/http';
         MultiSelectModule,
         DropdownModule,
         QuestionDialogComponent,
+        CommonModule,
     ],
     providers: [QuestionService, ConfirmationService, MessageService],
     templateUrl: './question-dialog.component.html',
@@ -45,6 +47,12 @@ export class QuestionDialogComponent implements OnInit {
 
     questions: Question[] = [];
 
+    topicSearchValue = '';
+
+    isNoResultsFound = false;
+
+    filteredTopics: Topic[] = [];
+
     constructor(private questionService: QuestionService) {}
 
     ngOnInit(): void {
@@ -153,4 +161,31 @@ export class QuestionDialogComponent implements OnInit {
             description: '',
         });
     }
+
+    onFilterTopics(event: { filter: string }) {
+        this.topicSearchValue = event.filter;
+
+        this.filteredTopics = this.topics.filter(topic =>
+            topic.label.toLowerCase().includes(this.topicSearchValue.toLowerCase()),
+        );
+
+        this.isNoResultsFound = this.filteredTopics.length == 0;
+    }
+
+    addNewTopic() {
+        const newValue: Topic = {
+            label: this.topicSearchValue,
+            value: this.topicSearchValue,
+        };
+
+        const topicExists = this.topics.some(
+            topic =>
+                topic.label.toLowerCase() === newValue.label.toLowerCase() ||
+                topic.value.toLowerCase() === newValue.value.toLowerCase(),
+        );
+
+        if (!topicExists) {
+            this.topics = [...this.topics, newValue];
+        }
+    }
 }

frontend/src/app/questions/questions.component.ts

@@ -92,7 +92,6 @@ export class QuestionsComponent implements OnInit {
         this.question = {} as Question;
         this.submitted = false;
         this.isDialogVisible = true;
-        console.log('isDialogVisible: ' + this.isDialogVisible);
     }
 
     editQuestion(question: Question) {