Merge pull request #30 from CS3219-AY2425S1/question-spa-frontend

Implement Question SPA

Author: limcaaarl

frontend/angular.json

@@ -36,8 +36,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "2MB",
+                  "maximumError": "3MB"
                 },
                 {
                   "type": "anyComponentStyle",

frontend/package-lock.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/package.json

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QuestionService } from './question.service';
+
+describe('QuestionService', () => {
+    let service: QuestionService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(QuestionService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});

frontend/src/_services/question.service.spec.ts

@@ -0,0 +1,87 @@
+import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { API_CONFIG } from '../app/api.config';
+import { catchError, Observable, throwError } from 'rxjs';
+import { SingleQuestionResponse, QuestionResponse, QuestionBody } from '../app/questions/question.model';
+import { TopicResponse } from '../app/questions/topic.model';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class QuestionService {
+    private baseUrl = API_CONFIG.baseUrl;
+
+    private httpOptions = {
+        headers: new HttpHeaders({
+            'Content-Type': 'application/json',
+        }),
+    };
+
+    constructor(private http: HttpClient) {}
+
+    getQuestions(
+        title?: string,
+        description?: string,
+        topics?: string[],
+        difficulty?: string,
+    ): Observable<QuestionResponse> {
+        let params = new HttpParams();
+
+        if (title) {
+            params = params.append('title', title);
+        }
+        if (description) {
+            params = params.append('description', description);
+        }
+        if (topics && topics.length > 0) {
+            params = params.append('topics', topics.join(','));
+        }
+        if (difficulty) {
+            params = params.append('difficulty', difficulty);
+        }
+
+        // send request
+        return this.http.get<QuestionResponse>(this.baseUrl + '/questions', { params });
+    }
+
+    getQuestionByID(id: number): Observable<QuestionResponse> {
+        return this.http.get<QuestionResponse>(this.baseUrl + '/questions/' + id);
+    }
+
+    getQuestionByParam(topics: string[], difficulty: string, limit?: number): Observable<QuestionResponse> {
+        let params = new HttpParams();
+
+        if (limit) {
+            params = params.append('limit', limit);
+        }
+        params = params.append('topics', topics.join(',')).append('difficulty', difficulty);
+
+        return this.http.get<QuestionResponse>(this.baseUrl + '/questions/search', { params });
+    }
+
+    getTopics(): Observable<TopicResponse> {
+        return this.http.get<TopicResponse>(this.baseUrl + '/questions/topics');
+    }
+
+    addQuestion(question: QuestionBody): Observable<SingleQuestionResponse> {
+        return this.http
+            .post<SingleQuestionResponse>(this.baseUrl + '/questions', question, this.httpOptions)
+            .pipe(catchError(this.handleError));
+    }
+
+    updateQuestion(id: number, question: QuestionBody): Observable<SingleQuestionResponse> {
+        return this.http
+            .put<SingleQuestionResponse>(this.baseUrl + '/questions/' + id, question, this.httpOptions)
+            .pipe(catchError(this.handleError));
+    }
+
+    deleteQuestion(id: number): Observable<SingleQuestionResponse> {
+        return this.http
+            .delete<SingleQuestionResponse>(this.baseUrl + '/questions/' + id)
+            .pipe(catchError(this.handleError));
+    }
+
+    handleError(error: HttpErrorResponse) {
+        return throwError(error);
+    }
+}

frontend/src/_services/question.service.ts

@@ -0,0 +1,3 @@
+export const API_CONFIG = {
+    baseUrl: 'http://localhost:8081',
+};

frontend/src/app/api.config.ts

@@ -1,9 +1,14 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-    providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync()],
+    providers: [
+        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideRouter(routes),
+        provideAnimationsAsync(),
+        provideHttpClient(),
+    ],
 };

frontend/src/app/app.config.ts

@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+import { QuestionsComponent } from './questions/questions.component';
 
 const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
 
@@ -7,4 +8,8 @@ export const routes: Routes = [
         path: 'account',
         loadChildren: accountModule,
     },
+    {
+        path: 'questions',
+        component: QuestionsComponent,
+    },
 ];

frontend/src/app/app.routes.ts

@@ -0,0 +1,4 @@
+export interface Column {
+    field: string;
+    header: string;
+}

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

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