Fix merge conflicts

Author: limcaaarl

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%' }"
@@ -43,8 +44,13 @@
                 </ng-template>
 
                 <ng-template pTemplate="footer" class="w-12 p-fluid">
-                    @if (isNoResultsFound) {
-                        <p-button type="button" label="Add as New Topic" icon="pi pi-plus" (click)="addNewTopic()" />
+                    @if (hasNoResultsFound) {
+                        <p-button
+                            class="w-12 p-fluid"
+                            type="button"
+                            label="Add as New Topic"
+                            icon="pi pi-plus"
+                            (click)="addNewTopic()" />
                     }
                 </ng-template>
             </p-multiSelect>

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';
@@ -29,6 +29,7 @@ import { DifficultyLevels } from './difficulty-levels.enum';
     styleUrl: './question-dialog.component.css',
 })
 export class QuestionDialogComponent implements OnInit {
+    @ViewChild('topicSelector') topicSelector!: MultiSelect;
     @Input() question!: Question;
     @Input() isDialogVisible = false;
     @Output() dialogClose = new EventEmitter<void>();
@@ -38,7 +39,6 @@ export class QuestionDialogComponent implements OnInit {
     @Output() successfulRequest = new EventEmitter<string>();
 
     questionFormGroup!: FormGroup;
-
     submitted = false;
 
     topicSearchValue = '';
@@ -49,10 +49,10 @@ export class QuestionDialogComponent implements OnInit {
 
     difficulties!: Difficulty[];
 
-    isNoResultsFound = false;
-
     filteredTopics: Topic[] = [];
 
+    hasNoResultsFound = false;
+
     constructor(private questionService: QuestionService) {}
 
     ngOnInit(): void {
@@ -63,6 +63,10 @@ export class QuestionDialogComponent implements OnInit {
         this.initTopics();
     }
 
+    get topicControl(): FormControl {
+        return this.questionFormGroup.controls['topics'] as FormControl;
+    }
+
     get isTitleInvalid(): boolean {
         const titleControl = this.questionFormGroup.controls['title'];
         return titleControl.dirty && titleControl.invalid;
@@ -202,28 +206,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;
     }
 }

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

@@ -17,6 +17,7 @@ import { QuestionService } from '../../_services/question.service';
 import { forkJoin } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
 import { QuestionDialogComponent } from './question-dialog.component';
+import { Column } from './column.model';
 
 @Component({
     selector: 'app-questions',
@@ -47,6 +48,8 @@ export class QuestionsComponent implements OnInit {
 
     questions: Question[] = [];
 
+    cols: Column[] = [];
+
     question!: Question;
 
     selectedQuestions!: Question[] | null;