Fix minor issues

- Removed some of the @input in question-dialog
- Updated ngIf to @if
- Updated dialog box cancel button to use EventEmitter instead

Author: limcaaarl

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

@@ -43,13 +43,9 @@
                 </ng-template>
 
                 <ng-template pTemplate="footer" class="w-12 p-fluid">
-                    <p-button
-                        class="w-12 p-fluid"
-                        *ngIf="isNoResultsFound"
-                        type="button"
-                        label="Add as New Topic"
-                        icon="pi pi-plus"
-                        (click)="addNewTopic()" />
+                    @if (isNoResultsFound) {
+                        <p-button type="button" label="Add as New Topic" icon="pi pi-plus" (click)="addNewTopic()" />
+                    }
                 </ng-template>
             </p-multiSelect>
             @if (isTopicsInvalid) {
@@ -90,7 +86,7 @@
     </form>
 
     <ng-template pTemplate="footer">
-        <p-button label="Cancel" [text]="true" severity="secondary" (onClick)="isDialogVisible = false" />
+        <p-button label="Cancel" [text]="true" severity="secondary" (onClick)="dialogClose.emit()" />
         <p-button
             label="Save"
             class="p-button-success"

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

@@ -10,7 +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';
+import { DifficultyLevels } from './difficulty-levels.enum';
 
 @Component({
     selector: 'app-question-dialog',
@@ -23,18 +23,14 @@ import { CommonModule } from '@angular/common';
         MultiSelectModule,
         DropdownModule,
         QuestionDialogComponent,
-        CommonModule,
     ],
     providers: [QuestionService, ConfirmationService, MessageService],
     templateUrl: './question-dialog.component.html',
     styleUrl: './question-dialog.component.css',
 })
 export class QuestionDialogComponent implements OnInit {
     @Input() question!: Question;
-    @Input() headerMessage!: string;
     @Input() isDialogVisible = false;
-    @Input() topics!: Topic[];
-    @Input() difficulties!: Difficulty[];
     @Output() dialogClose = new EventEmitter<void>();
     @Output() questionUpdate = new EventEmitter<Question>();
     @Output() questionAdd = new EventEmitter<Question>();
@@ -45,10 +41,14 @@ export class QuestionDialogComponent implements OnInit {
 
     submitted = false;
 
-    questions: Question[] = [];
-
     topicSearchValue = '';
 
+    headerMessage = '';
+
+    topics!: Topic[];
+
+    difficulties!: Difficulty[];
+
     isNoResultsFound = false;
 
     filteredTopics: Topic[] = [];
@@ -57,6 +57,10 @@ export class QuestionDialogComponent implements OnInit {
 
     ngOnInit(): void {
         this.initFormGroup();
+
+        this.initDifficulties();
+
+        this.initTopics();
     }
 
     get isTitleInvalid(): boolean {
@@ -105,6 +109,16 @@ export class QuestionDialogComponent implements OnInit {
 
     show() {
         this.setFormValue();
+        this.setHeaderMessage();
+    }
+
+    setHeaderMessage() {
+        if (this.question.id) {
+            this.headerMessage = 'Edit Question';
+        } else {
+            this.submitted = false;
+            this.headerMessage = 'Create new question';
+        }
     }
 
     handleEditQuestionResponse(id: number, question: QuestionBody) {
@@ -144,6 +158,30 @@ export class QuestionDialogComponent implements OnInit {
         });
     }
 
+    initDifficulties() {
+        this.difficulties = [
+            { label: DifficultyLevels.EASY, value: DifficultyLevels.EASY },
+            { label: DifficultyLevels.MEDIUM, value: DifficultyLevels.MEDIUM },
+            { label: DifficultyLevels.HARD, value: DifficultyLevels.HARD },
+        ];
+    }
+
+    initTopics() {
+        this.questionService.getTopics().subscribe({
+            next: response => {
+                this.topics =
+                    response.data?.map(topic => ({
+                        label: topic,
+                        value: topic,
+                    })) || [];
+            },
+            error: (error: HttpErrorResponse) => {
+                this.topics = [];
+                this.errorReceive.emit('Failed to load topics. ' + error.error.message);
+            },
+        });
+    }
+
     setFormValue() {
         this.questionFormGroup.patchValue({
             title: this.question.title,

frontend/src/app/questions/questions.component.html

@@ -77,9 +77,6 @@ <h3 class="m-0">Manage Questions</h3>
     </ng-container>
     <app-question-dialog
         [isDialogVisible]="isDialogVisible"
-        [headerMessage]="dialogHeader"
-        [topics]="topics"
-        [difficulties]="difficulties"
         [question]="question"
         (dialogClose)="onDialogClose()"
         (questionUpdate)="onQuestionUpdate($event)"

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

@@ -9,14 +9,10 @@ import { ConfirmationService, MessageService } from 'primeng/api';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DialogModule } from 'primeng/dialog';
 import { MultiSelectModule } from 'primeng/multiselect';
-import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { DropdownModule } from 'primeng/dropdown';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { Question } from './question.model';
-import { Column } from './column.model';
-import { Topic } from './topic.model';
-import { Difficulty } from './difficulty.model';
-import { DifficultyLevels } from './difficulty-levels.enum';
 import { QuestionService } from '../../_services/question.service';
 import { forkJoin } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -51,26 +47,12 @@ export class QuestionsComponent implements OnInit {
 
     questions: Question[] = [];
 
-    topics!: Topic[];
-
-    difficulties!: Difficulty[];
-
-    questionFormGroup!: FormGroup;
-
-    difficulty!: string;
-
     question!: Question;
 
     selectedQuestions!: Question[] | null;
 
-    submitted = false;
-
     isDialogVisible = false;
 
-    cols: Column[] = [];
-
-    dialogHeader = '';
-
     constructor(
         private questionService: QuestionService,
         private messageService: MessageService,
@@ -83,19 +65,14 @@ export class QuestionsComponent implements OnInit {
 
         // fetch data from API call
         this.handleInitData();
-
-        this.initDifficulties();
     }
 
     openNewQuestion() {
-        this.dialogHeader = 'Create new question';
         this.question = {} as Question;
-        this.submitted = false;
         this.isDialogVisible = true;
     }
 
     editQuestion(question: Question) {
-        this.dialogHeader = 'Edit Question';
         this.question = question;
         this.isDialogVisible = true;
     }
@@ -111,14 +88,6 @@ export class QuestionsComponent implements OnInit {
         });
     }
 
-    initDifficulties() {
-        this.difficulties = [
-            { label: DifficultyLevels.EASY, value: DifficultyLevels.EASY },
-            { label: DifficultyLevels.MEDIUM, value: DifficultyLevels.MEDIUM },
-            { label: DifficultyLevels.HARD, value: DifficultyLevels.HARD },
-        ];
-    }
-
     initQuestion() {
         this.question = {
             id: -1,
@@ -148,21 +117,12 @@ export class QuestionsComponent implements OnInit {
     }
 
     handleInitData() {
-        forkJoin({
-            questions: this.questionService.getQuestions(),
-            topics: this.questionService.getTopics(),
-        }).subscribe({
-            next: results => {
-                this.questions = results.questions.data || [];
-                this.topics =
-                    results.topics.data?.map(topic => ({
-                        label: topic,
-                        value: topic,
-                    })) || [];
+        this.questionService.getQuestions().subscribe({
+            next: response => {
+                this.questions = response.data || [];
             },
             error: () => {
                 this.questions = [];
-                this.topics = [];
                 this.onErrorReceive('Failed to load data. Please try again later.');
             },
             complete: () => {