Update history page styles

frontend/src/_services/history.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { historyResponse, MatchingHistory } from '../app/account/history/history.model';
+import { historyResponse, MatchingHistory } from '../app/history/history.model';
 import { ApiService } from './api.service';
 
 @Injectable({

frontend/src/app/account/account.component.ts

@@ -5,7 +5,6 @@ import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 import { LayoutComponent } from './layout.component';
 import { ProfileComponent } from './profile/profile.component';
-import { HistoryComponent } from './history/history.component';
 
 const routes: Routes = [
     {
@@ -16,7 +15,6 @@ const routes: Routes = [
             { path: 'login', component: LoginComponent },
             { path: 'register', component: RegisterComponent },
             { path: 'profile', component: ProfileComponent },
-            { path: 'history', component: HistoryComponent },
         ],
     },
 ];

frontend/src/app/account/account.module.ts

@@ -7,7 +7,6 @@ import { RegisterComponent } from './register/register.component';
 import { LayoutComponent } from './layout.component';
 import { AccountRoutingModule } from './account.component';
 import { ProfileComponent } from './profile/profile.component';
-import { HistoryComponent } from './history/history.component';
 
 @NgModule({
     imports: [
@@ -18,7 +17,6 @@ import { HistoryComponent } from './history/history.component';
         LoginComponent,
         RegisterComponent,
         ProfileComponent,
-        HistoryComponent,
     ],
 })
 export class AccountModule {}

frontend/src/app/app.routes.ts

@@ -5,6 +5,7 @@ import { MatchingComponent } from './matching/matching.component';
 import { HomeComponent } from './home/home.component';
 import { AuthGuardService } from '../_services/auth.guard.service';
 import { CollabGuardService } from '../_services/collab.guard.service';
+import { HistoryComponent } from './history/history.component';
 
 const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
 
@@ -33,6 +34,11 @@ export const routes: Routes = [
         component: HomeComponent,
         canActivate: [AuthGuardService],
     },
+    {
+        path: 'history',
+        component: HistoryComponent,
+        canActivate: [AuthGuardService],
+    },
     {
         path: '**',
         redirectTo: '/home',

frontend/src/app/account/history/history.component.css → frontend/src/app/history/history.component.css

@@ -1,3 +1,12 @@
+.container {
+    min-height: calc(100dvh - 160px); 
+    width: 100%;
+    justify-content: center; 
+    align-items: center; 
+    padding: 1rem;
+    margin-top: auto;
+}
+
 .sliding-panel {
     position: fixed;
     top: 0;
@@ -9,6 +18,7 @@
     box-shadow: -2px 0 5px rgba(0,0,0,0.5);
     transition: right 0.3s ease;
     z-index: 1000;
+    max-width: 90%;
 }
 
 .sliding-panel.open {

frontend/src/app/history/history.component.html

@@ -0,0 +1,83 @@
+<div class="container">
+    <div class="table-container" style="max-width: 1150px; margin: 100px auto">
+        <p-table
+            #dt
+            sortField="time"
+            [sortOrder]="1"
+            [value]="histories"
+            datakey="id"
+            [tableStyle]="{ 'table-layout': 'auto', width: '100%', 'min-width': '50rem', 'text-align': 'center' }"
+            [paginator]="true"
+            [rows]="10"
+            [rowsPerPageOptions]="[10, 25, 50]"
+            [globalFilterFields]="['question', 'difficulty', 'topics', 'collaborator', 'status', 'time']"
+            styleClass="p-datatable-gridlines-striped">
+            <ng-template pTemplate="caption">
+                <div class="flex flex-wrap align-items-center justify-content-between">
+                    <h3 class="">Matching History</h3>
+                    <p-iconField iconPosition="left">
+                        <p-inputIcon>
+                            <i class="pi pi-search"></i>
+                        </p-inputIcon>
+                        <input
+                            pInputText
+                            type="text"
+                            (input)="dt.filterGlobal($any($event.target).value, 'contains')"
+                            placeholder="Search keyword" />
+                    </p-iconField>
+                </div>
+            </ng-template>
+            <ng-template pTemplate="header" let-columns>
+                <tr>
+                    <th pSortableColumn="question" style="width: 20%">
+                        Question<p-sortIcon field="question"></p-sortIcon>
+                    </th>
+                    <th pSortableColumn="difficulty" style="width: 15%">
+                        Difficulty<p-sortIcon field="difficulty"></p-sortIcon>
+                    </th>
+                    <th pSortableColumn="topics" style="width: 24%">Topics<p-sortIcon field="topics"></p-sortIcon></th>
+                    <th pSortableColumn="collaborator" style="width: 17%">
+                        Collaborator<p-sortIcon field="collaborator"></p-sortIcon>
+                    </th>
+                    <th pSortableColumn="status" style="width: 12%">Status<p-sortIcon field="status"></p-sortIcon></th>
+                    <th pSortableColumn="time" style="width: 12%">Time<p-sortIcon field="time"></p-sortIcon></th>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-history>
+                <tr (click)="onRowSelect(history)">
+                    <td>{{ history.question.title }}</td>
+                    <td>{{ history.difficulty }}</td>
+                    <td>{{ history.topics.join(', ') }}</td>
+                    <td>{{ history.collaborator }}</td>
+                    <td>
+                        @if (history.status === 'COMPLETED') {
+                            <i class="pi pi-check" style="color: green; font-size: large"></i>
+                        } @else if (history.status === 'FORFEITED') {
+                            <i class="pi pi-times" style="color: red; font-size: large"></i>
+                        } @else if (history.status === 'IN_PROGRESS') {
+                            <i class="pi pi-spin pi-spinner" style="color: white; font-size: large"></i>
+                        }
+                    </td>
+                    <td>{{ history.time }}</td>
+                </tr>
+            </ng-template>
+        </p-table>
+    </div>
+    <div class="sliding-panel" [class.open]="isPanelVisible">
+        <div class="panel-header">
+            <h3>{{ panelHistory?.question?.title }}</h3>
+            <p-button
+                icon="pi pi-times"
+                severity="secondary"
+                label="Close"
+                (onClick)="closePanel()"
+                class="p-button-text" />
+        </div>
+        <div class="panel-content">
+            <p class="white-space: pre-wrap">{{ panelHistory?.question?.description }}</p>
+            <h4>Submitted Solution</h4>
+            <div #editor class="editor-content text-lg"></div>
+        </div>
+    </div>
+    <p-toast position="bottom-right" [breakpoints]="{ '920px': { width: '90%' } }" />
+</div>

frontend/src/app/account/history/history.component.ts → frontend/src/app/history/history.component.ts

@@ -2,16 +2,16 @@ import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { TableModule } from 'primeng/table';
 import { CommonModule, DatePipe } from '@angular/common';
 import { HistoryStatus, MatchingHistory } from './history.model';
-import { HistoryService } from '../../../_services/history.service';
+import { HistoryService } from '../../_services/history.service';
 import { MessageService } from 'primeng/api';
 import { InputTextModule } from 'primeng/inputtext';
 import { ButtonModule } from 'primeng/button';
 import { IconFieldModule } from 'primeng/iconfield';
 import { InputIconModule } from 'primeng/inputicon';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { EditorState } from '@codemirror/state';
+import { EditorState, Extension } from '@codemirror/state';
 import { EditorView, basicSetup } from 'codemirror';
-import { languageMap } from '../../collaboration/editor/languages';
+import { languageMap } from '../collaboration/editor/languages';
 import { ToastModule } from 'primeng/toast';
 import { Router } from '@angular/router';
 
@@ -30,6 +30,7 @@ export class HistoryComponent implements OnInit {
     isPanelVisible = false;
     panelHistory: MatchingHistory | null = null;
     editorView: EditorView | null = null;
+    customTheme!: Extension;
 
     constructor(
         private historyService: HistoryService,
@@ -80,10 +81,29 @@ export class HistoryComponent implements OnInit {
             this.editorView.destroy();
         }
 
+        const customTheme = EditorView.theme(
+            {
+                '&': {
+                    backgroundColor: 'var(--surface-section)',
+                },
+                '.cm-gutters': {
+                    backgroundColor: 'var(--surface-section)',
+                },
+            },
+            { dark: true },
+        );
+
         const languageExtension = languageMap[language] || languageMap['java'];
         const state = EditorState.create({
             doc: code,
-            extensions: [basicSetup, languageExtension, oneDark, EditorView.editable.of(false)],
+            extensions: [
+                basicSetup,
+                languageExtension,
+                customTheme,
+                oneDark,
+                EditorView.lineWrapping,
+                EditorView.editable.of(false),
+            ],
         });
 
         this.editorView = new EditorView({

frontend/src/app/account/history/history.model.ts → frontend/src/app/history/history.model.ts

@@ -1,4 +1,4 @@
-import { DifficultyLevels } from '../../questions/difficulty-levels.enum';
+import { DifficultyLevels } from '../questions/difficulty-levels.enum';
 
 export enum HistoryStatus {
     COMPLETED = 'COMPLETED',

frontend/src/app/navigation-bar/navigation-bar.component.ts

@@ -71,7 +71,7 @@ export class NavigationBarComponent implements OnInit {
                 {
                     label: 'Match History',
                     icon: 'pi pi-trophy',
-                    routerLink: '/account/history',
+                    routerLink: '/history',
                     class: 'p-submenu-list',
                 },
                 {