Question SPA

frontend/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
     "primeflex": "^3.3.1",
+    "primeicons": "^7.0.0",
     "primeng": "^17.18.10",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

frontend/src/app/app.component.html

@@ -1,10 +1 @@
-<main class="main">
-  <div class="content">
-    <p class="mt-0">Hello, this is a paragraph!</p>
-    <p-button label="Click me!"/>
-    <label class="mt-4" for="password">I am a label.</label>
-    <p-password class="mt-2" id="password"/>
-  </div>
-</main>
-
 <router-outlet />

frontend/src/app/app.config.ts

@@ -1,6 +1,5 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 

frontend/src/app/app.routes.ts

@@ -1,3 +1,9 @@
 import { Routes } from '@angular/router';
+import { QuestionsComponent } from './questions/questions.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+        path: 'questions',
+        component: QuestionsComponent,
+    },
+];

frontend/src/app/questions/difficulty-levels.enum.ts

@@ -0,0 +1,5 @@
+export enum DifficultyLevels {
+    EASY = 'Easy',
+    MEDIUM = 'Medium',
+    HARD = 'Hard',
+}

frontend/src/app/questions/question.model.ts

@@ -0,0 +1,22 @@
+export interface Question {
+    id?: number;
+    title?: string;
+    description?: string;
+    topics?: string[];
+    difficulty?: string;
+}
+
+export interface Column {
+    field: string;
+    header: string;
+}
+
+export interface Topic {
+    label: string;
+    value: string;
+}
+
+export interface Difficulty {
+    label: string;
+    value: string;
+}

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

@@ -0,0 +1,158 @@
+<div class="card mx-8">
+    <p-toast />
+    <p-toolbar styleClass="mb-2 gap-2">
+        <div class="p-justify-end">
+                <p-button
+                    icon="pi pi-plus" 
+                    severity="primary" 
+                    [outlined]="true" 
+                    label="New" 
+                    class="mr-2" 
+                    (onClick)="openNewQuestion()" />
+                <p-button
+                    icon="pi pi-trash" 
+                    severity="danger" 
+                    label="Delete" 
+                    (onClick)="deleteSelectedQuestions()" 
+                    [disabled]="!selectedQuestions || !selectedQuestions.length" />
+        </div>
+    </p-toolbar>
+    <p-table 
+    [columns]="cols" 
+    [value]="questions"
+    [(selection)]="selectedQuestions"
+    datakey="id"
+    [tableStyle]="{ 'min-width': '50rem' }"
+    [paginator]="true"
+    [rows]="5"
+    [rowsPerPageOptions]="[5, 10, 20]"
+    styleClass="p-datatable-gridlines-striped">
+        <ng-template pTemplate="caption">
+            <div class="flex">
+                <h3 class="m-0">Manage Questions</h3>
+            </div>
+        </ng-template>
+        <ng-template pTemplate="header" let-columns>
+            <tr>
+                <th style="width: 4rem"><p-tableHeaderCheckbox /></th>
+                <th>Id</th>
+                <th>Title</th>
+                <th>Description</th>
+                <th>Topics</th>
+                <th>Difficulty</th>
+                <th></th>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-question>
+            <tr>
+                <td>
+                    <p-tableCheckbox [value]="question" />
+                </td>
+                <td>{{question.id}}</td>
+                <td>{{question.title}}</td>
+                <td>{{question.description}}</td>
+                <td>{{question.topics}}</td>
+                <td>{{question.difficulty}}</td>
+                <td>
+                    <p-button 
+                    label="Edit"
+                    severity="primary" 
+                    icon="pi pi-file-edit" 
+                    class="mr-2" 
+                    [text]="true"
+                    (onClick)="editQuestion(question)" />
+                </td>
+            </tr>
+        </ng-template>
+    </p-table>
+
+    <p-dialog 
+    header="Header" 
+    [(visible)]="isDialogVisible" 
+    [modal]="true" 
+    [style]="{ width: '25rem' }">
+        <ng-template pTemplate="header">
+            <div class="inline-flex align-items-center justify-content-center gap-2">
+                <span class="font-bold white-space-nowrap">
+                    Create new question
+                </span>
+            </div>
+        </ng-template>
+
+        <form [formGroup]="questionFormGroup">
+            <div class="field grid col-12">
+                <label for="title">Title</label>
+                <input
+                    formControlName="textTitle"
+                    type="text" 
+                    pInputText 
+                    id="title" 
+                    required 
+
+                    class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
+                <small class="p-error" *ngIf="submitted && (question.title === undefined || !question.title)">
+                    Title is required.
+                </small>
+            </div>
+            <div class="formgrid grid field">
+                <div class="field col-12 md:col-6">
+                    <label for="questionTopics">Topics</label>
+                    <p-multiSelect
+                        required="true"
+                        [style]="{'width':'100%'}"
+                        [options]="topics" 
+                        formControlName="selectedTopics"
+                        optionLabel="label"
+                        optionValue="value" 
+                        placeholder="Select Topics"/>
+                    <small class="p-error" *ngIf="submitted && (question.topics === undefined || question.topics.length === 0)">
+                        Topic is required.
+                    </small>
+                </div>
+                <div class="field col-12 md:col-6">
+                    <label for="questionTopics">Difficulty</label>
+                    <p-dropdown 
+                        [required]="true"
+                        [style]="{'width':'100%'}"
+                        [options]="difficulties" 
+                        formControlName="selectedDifficulty"
+                        optionLabel="label"
+                        optionValue="value"
+                        placeholder="Select Difficulty" />
+                    <small class="p-error" *ngIf="submitted && (question.difficulty === undefined || !question.difficulty)">
+                        Difficulty is required.
+                    </small>
+                </div>
+            </div>
+            <div class="field grid col-12" field>
+                <label for="questionDescription">Description</label>
+                <textarea
+                    formControlName="textDescription"
+                    [required]="true"
+                    id="questionDescription" 
+                    type="text" 
+                    rows="6" 
+                    class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
+                </textarea>
+                <small class="p-error" *ngIf="submitted && (question.description === undefined || !question.description)">
+                    Description is required.
+                </small>
+            </div>
+        </form>
+
+        <ng-template pTemplate="footer">
+            <p-button 
+                label="Cancel" 
+                [text]="true" 
+                severity="secondary" 
+                (onClick)="isDialogVisible = false" />
+            <p-button 
+                label="Save" 
+                class="p-button-success"
+                (onClick)="saveQuestion()" 
+              />
+        </ng-template>
+    </p-dialog>
+
+    <p-confirmDialog [style]="{ width: '450px' }" />
+</div>

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

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