Changed SPA

Now, SPA will look different for admin and normal user. Also changed how
it looks a little bit to make it look more tidy.

Author: LimZiJia

frontend/package-lock.json

@@ -22,7 +22,7 @@
     "@angular/router": "^18.2.0",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primeng": "^17.18.10",
+    "primeng": "^17.18.11",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"

frontend/package.json

@@ -17,8 +17,7 @@ export class JwtInterceptor implements HttpInterceptor {
     intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
         // add auth header with jwt if user is logged in and request is to the api url
         const isLoggedIn = this.currentUser?.accessToken;
-        const isApiUrl = request.url.startsWith(environment.UserServiceApiUrl);
-        if (isLoggedIn && isApiUrl) {
+        if (isLoggedIn) {
             request = request.clone({
                 headers: request.headers.set('Authorization', `Bearer ${this.currentUser!.accessToken}`),
             });

frontend/src/_helpers/interceptors/jwt.interceptor.ts

@@ -72,4 +72,31 @@ export class AuthenticationService {
         this.userSubject.next(null);
         this.router.navigate(['/account/login']);
     }
+
+    // get user details from user service for authentication
+    getUserDetails() {
+        return this.http
+            .get<UServRes>(`${environment.UserServiceApiUrl}/users/${this.userValue?.id}`, { observe: 'response' })
+            .pipe(
+                map(response => {
+                    if (response.status === 200) {
+                        let user: User = {};
+                        if (response.body) {
+                            const body: UServRes = response.body;
+                            const data = body.data;
+                            user = {
+                                id: data.id,
+                                username: data.username,
+                                email: data.email,
+                                accessToken: data.accessToken,
+                                isAdmin: data.isAdmin,
+                                createdAt: data.createdAt,
+                            };
+                        }
+                        return user;
+                    }
+                    return null;
+                }),
+            );
+    }
 }

frontend/src/_services/authentication.service.ts

@@ -4,4 +4,40 @@
 
 .p-sortable-column:not(.p-highlight):hover {
     background-color: #181818 !important;
+}
+
+.sliding-panel {
+    position: fixed;
+    top: 0;
+    right: -600px; /* Adjust the width as needed */
+    width: 600px;
+    height: 100%;
+    background-color: #181818 !important;
+    color: var(--text-color); /* Use theme variable */
+    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
+    transition: right 0.3s ease;
+    z-index: 1000;
+}
+
+.sliding-panel.open {
+    right: 0;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background-color: #181818 !important;
+    border-bottom: 1px solid #000000; /* Use theme variable */
+}
+
+.panel-content {
+    padding: 1rem;
+    line-height: 1.6; /* Adjust line height for better readability */
+    color: #ffffff; /* Ensure text color is readable */
+}
+
+.panel-content p {
+    margin-bottom: 1rem; /* Add margin to paragraphs for spacing */
 }

frontend/src/app/questions/questions.component.css

@@ -7,7 +7,7 @@
         animationDuration=".5s" />
     <p-toast />
     <ng-container *ngIf="!loading">
-        <p-toolbar styleClass="mb-2 gap-2">
+        <p-toolbar *ngIf="isAdmin" styleClass="mb-2 gap-2">
             <div class="p-justify-end">
                 <p-button
                     icon="pi pi-plus"
@@ -24,56 +24,56 @@
                     [disabled]="!selectedQuestions || !selectedQuestions.length" />
             </div>
         </p-toolbar>
-        <p-table
-            sortField="id"
-            [sortOrder]="1"
-            [columns]="cols"
-            [value]="questions"
-            [(selection)]="selectedQuestions"
-            datakey="id"
-            [tableStyle]="{ 'table-layout': 'fixed' }"
-            [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: 10%"><p-tableHeaderCheckbox /></th>
-                    <th pSortableColumn="id" style="width: 10%">Id <p-sortIcon field="id" /></th>
-                    <th style="width: 10%">Title</th>
-                    <th style="width: 40%">Description</th>
-                    <th style="width: 10%">Topics</th>
-                    <th style="width: 10%">Difficulty</th>
-                    <th style="width: 10%"></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 style="white-space: pre-wrap">{{ question.description }}</td>
-                    <td>{{ question.topics.join(', ') }}</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>
+        <div class="table-container" style="max-width: 1000px; margin: 0 auto;">
+            <p-table
+                sortField="id"
+                [sortOrder]="1"
+                [columns]="cols"
+                [value]="questions"
+                [(selection)]="selectedQuestions"
+                datakey="id"
+                [tableStyle]="{ 'table-layout': 'fixed', 'width': '100%', 'text-align': 'center' }"
+                [paginator]="true"
+                [rows]="10"
+                [rowsPerPageOptions]="[10, 25, 50]"
+                styleClass="p-datatable-gridlines-striped">
+                <ng-template pTemplate="caption">
+                    <div class="flex">
+                        <h3 class="m-0">Questions</h3>
+                    </div>
+                </ng-template>
+                <ng-template pTemplate="header" let-columns>
+                    <tr>
+                        <th *ngIf="isAdmin" style="width: 5%"><p-tableHeaderCheckbox /></th>
+                        <th pSortableColumn="id" style="width: 5%">Id <p-sortIcon field="id" /></th>
+                        <th style="width: 20%">Title</th>
+                        <th style="width: 20%">Topics</th>
+                        <th style="width: 7%">Difficulty</th>
+                        <th *ngIf="isAdmin" style="width: 6%"></th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-question>
+                    <tr (click)="onRowSelect(question)">
+                        <td *ngIf="isAdmin">
+                            <p-tableCheckbox [value]="question" />
+                        </td>
+                        <td>{{ question.id }}</td>
+                        <td>{{ question.title }}</td>
+                        <td>{{ question.topics.join(', ') }}</td>
+                        <td>{{ question.difficulty }}</td>
+                        <td *ngIf="isAdmin">
+                            <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>
+        </div>
     </ng-container>
     <app-question-dialog
         [isDialogVisible]="isDialogVisible"
@@ -85,4 +85,18 @@ <h3 class="m-0">Manage Questions</h3>
         (successfulRequest)="onSuccessfulRequest($event)">
     </app-question-dialog>
     <p-confirmDialog [style]="{ width: '450px' }" />
+    <div class="sliding-panel" [class.open]="isPanelVisible">
+        <div class="panel-header">
+            <h4>{{ clickedOnQuestion?.title }}</h4>
+            <p-button
+                icon="pi pi-times"
+                severity="secondary"
+                label="Close"
+                (onClick)="closePanel()"
+                class="p-button-text" />
+        </div>
+        <div class="panel-content">
+            <p style="white-space: pre-wrap">{{ clickedOnQuestion?.description }}</p>
+        </div>
+    </div>
 </div>

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

@@ -18,6 +18,9 @@ import { forkJoin } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
 import { QuestionDialogComponent } from './question-dialog.component';
 import { Column } from './column.model';
+import { AuthenticationService } from '../../_services/authentication.service';
+import { UServRes } from '../../_models/user.service.response.interface';
+import { User } from '../../_models/user.model';
 
 @Component({
     selector: 'app-questions',
@@ -45,21 +48,20 @@ import { Column } from './column.model';
 })
 export class QuestionsComponent implements OnInit {
     loading = true;
-
     questions: Question[] = [];
-
     cols: Column[] = [];
-
     question!: Question;
-
     selectedQuestions!: Question[] | null;
-
     isDialogVisible = false;
+    isAdmin = false;
+    isPanelVisible = false;
+    clickedOnQuestion: Question | null = null;
 
     constructor(
         private questionService: QuestionService,
         private messageService: MessageService,
         private confirmationService: ConfirmationService,
+        private AuthenticationService: AuthenticationService,
     ) {}
 
     ngOnInit() {
@@ -68,6 +70,9 @@ export class QuestionsComponent implements OnInit {
 
         // fetch data from API call
         this.handleInitData();
+
+        // check if user is admin
+        this.checkIfAdmin();
     }
 
     openNewQuestion() {
@@ -138,6 +143,16 @@ export class QuestionsComponent implements OnInit {
         this.isDialogVisible = false;
     }
 
+    onRowSelect(question: Question) {
+        this.clickedOnQuestion = question;
+        this.isPanelVisible = true;
+    }
+
+    closePanel() {
+        this.isPanelVisible = false;
+        this.clickedOnQuestion = null;
+    }
+
     onQuestionUpdate(question: Question) {
         this.questions[this.questions.findIndex(x => x.id == question.id)] = question;
         this.questions = [...this.questions];
@@ -164,4 +179,10 @@ export class QuestionsComponent implements OnInit {
             life: 3000,
         });
     }
+
+    checkIfAdmin() {
+        this.AuthenticationService.getUserDetails().subscribe((userData: User | null) => {
+            this.isAdmin = userData?.isAdmin ?? false;
+        });
+    }
 }