Add Match Page (#44)

* Add basic matching page

* Add multiselect for topic and programming language criteria

* Add user criteria model

* Add finding match dialog

* Add retry match dialog

* Add UI updates to matching page dialogs

* Remove programming language option from matching page

* Add loading of topics from question service for matching page

* Add match success state to finding match dialog

* Restrict user selected topics to a string array

* Add validation for match page

Includes check that at least one question exists for the given criteria.
Note that this does not handle offline question service.

Co-authored-by: Bryan <[email protected]>

* Fix finding match dialog

Pass selected topics and difficulty as input into dialog.
Remove check for empty topics and diffculty as it is guaranteed to be non-empty.

---------

Co-authored-by: Samuel Lim <[email protected]>

Author: McNaBry

frontend/src/app/app.routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '@angular/router';
 import { QuestionsComponent } from './questions/questions.component';
+import { MatchingComponent } from './matching/matching.component';
 import { AuthGuardService } from '../_services/auth.guard.service';
 
 const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
@@ -14,4 +15,8 @@ export const routes: Routes = [
         component: QuestionsComponent,
         canActivate: [AuthGuardService],
     },
+    {
+        path: 'matching',
+        component: MatchingComponent,
+    },
 ];

frontend/src/app/matching/_validators/has-questions.validator.ts

@@ -0,0 +1,20 @@
+import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';
+import { QuestionService } from '../../../_services/question.service';
+import { map, Observable, of } from 'rxjs';
+
+export const HAS_NO_QUESTIONS = 'hasNoQuestions';
+
+export function hasQuestionsValidator(questionService: QuestionService): AsyncValidatorFn {
+    return (formGroup: AbstractControl): Observable<ValidationErrors | null> => {
+        const topics = formGroup.get('topics')?.value;
+        const difficulty = formGroup.get('difficulty')?.value;
+
+        if (!(topics.length && difficulty)) {
+            return of({ [HAS_NO_QUESTIONS]: true });
+        }
+
+        return questionService
+            .getQuestionByParam(topics, difficulty)
+            .pipe(map(res => (res.data?.length ? null : { [HAS_NO_QUESTIONS]: true })));
+    };
+}

frontend/src/app/matching/finding-match/finding-match.component.css

@@ -0,0 +1,11 @@
+::ng-deep .easy-chip .p-chip {
+    background-color: var(--green-700);
+}
+
+::ng-deep .medium-chip .p-chip {
+    background-color: var(--orange-600);
+}
+
+::ng-deep .hard-chip .p-chip {
+    background-color: var(--red-700);
+}

frontend/src/app/matching/finding-match/finding-match.component.html

@@ -0,0 +1,58 @@
+<p-dialog
+    styleClass="w-11 sm:w-22rem"
+    [(visible)]="isVisible"
+    [modal]="true"
+    [draggable]="false"
+    [closeOnEscape]="false"
+    (onShow)="onDialogShow()"
+    [closable]="false">
+    <ng-template pTemplate="header">
+        <div class="flex flex-column w-full align-items-center justify-content-center gap-2">
+            @if (isFindingMatch) {
+                <p-progressSpinner styleClass="w-2rem h-2rem mt-0" strokeWidth="6" />
+                <h2 class="mt-0 mb-0">Finding a Match...</h2>
+            } @else {
+                <i class="pi pi-check text-4xl text-green-300"></i>
+                <h2 class="mt-0 mb-0">Match Found!</h2>
+            }
+        </div>
+    </ng-template>
+
+    <div class="flex flex-column gap-4">
+        <div class="flex flex-column gap-2 align-items-center">
+            <p class="m-0">Topics selected</p>
+            <div class="flex flex-wrap gap-2 justify-content-center">
+                @for (topic of userCriteria.topics; track topic) {
+                    <p-chip [label]="topic" styleClass="text-sm" />
+                }
+            </div>
+        </div>
+
+        <div class="flex flex-column gap-2 align-items-center">
+            <p class="m-0">Difficulty selected</p>
+            <p-chip
+                [label]="userCriteria.difficulty"
+                styleClass="text-sm"
+                [ngClass]="{
+                    'easy-chip': userCriteria.difficulty === 'Easy',
+                    'medium-chip': userCriteria.difficulty === 'Medium',
+                    'hard-chip': userCriteria.difficulty === 'Hard',
+                }" />
+        </div>
+    </div>
+
+    <ng-template pTemplate="footer">
+        <div class="flex w-full justify-content-center align-items-center">
+            @if (isFindingMatch) {
+                <p-button
+                    type="button"
+                    label="Cancel Match"
+                    severity="danger"
+                    [outlined]="true"
+                    (click)="closeDialog()" />
+            } @else {
+                <p class="mb-0 font-medium text-blue-300">Redirecting you to the workspace...</p>
+            }
+        </div>
+    </ng-template>
+</p-dialog>

frontend/src/app/matching/finding-match/finding-match.component.spec.ts

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

frontend/src/app/matching/finding-match/finding-match.component.ts

@@ -0,0 +1,50 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { UserCriteria } from '../user-criteria.model';
+import { DialogModule } from 'primeng/dialog';
+import { ButtonModule } from 'primeng/button';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { ChipModule } from 'primeng/chip';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'app-finding-match',
+    standalone: true,
+    imports: [ChipModule, DialogModule, ButtonModule, ProgressSpinnerModule, CommonModule],
+    templateUrl: './finding-match.component.html',
+    styleUrl: './finding-match.component.css',
+})
+export class FindingMatchComponent {
+    @Input() userCriteria!: UserCriteria;
+    @Input() isVisible = false;
+
+    @Output() dialogClose = new EventEmitter<void>();
+    @Output() matchFailed = new EventEmitter<void>();
+    @Output() matchSuccess = new EventEmitter<void>();
+
+    isFindingMatch = true;
+
+    closeDialog() {
+        this.dialogClose.emit();
+    }
+
+    onMatchFailed() {
+        this.matchFailed.emit();
+    }
+
+    onMatchSuccess() {
+        this.isFindingMatch = false;
+        this.matchSuccess.emit();
+        // Possible to handle routing to workspace here.
+    }
+
+    onDialogShow() {
+        // Simulate request to API and subsequent success/failure.
+        setTimeout(() => {
+            if (this.isVisible) {
+                // Toggle to simulate different situations.
+                // this.onMatchFailed();
+                this.onMatchSuccess();
+            }
+        }, 3000);
+    }
+}

frontend/src/app/matching/matching.component.css

@@ -0,0 +1,25 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+}
+
+.form-wrapper {
+    background-color: var(--surface-section);
+    padding: 2rem;
+    border-radius: 8px; 
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
+}
+
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.custom-multi .p-multiselect-panel {
+    height: 300px;
+}

frontend/src/app/matching/matching.component.html

@@ -0,0 +1,69 @@
+<div class="container">
+    <div class="form-wrapper w-full sm:w-30rem">
+        <h2 class="mt-0 mb-1">Matching Criteria</h2>
+        <p class="mt-0">Select any one criteria to start matching!</p>
+        <form [formGroup]="matchForm" class="flex flex-column gap-3">
+            <div class="form-field">
+                <label for="topic">Topic</label>
+                <p-multiSelect
+                    name="topic"
+                    [options]="availableTopics"
+                    formControlName="topics"
+                    placeholder="No Topic Selected"
+                    [loading]="isLoadingTopics"
+                    [showClear]="true"
+                    (onClear)="topicControl.reset([])"
+                    [maxSelectedLabels]="0"
+                    selectedItemsLabel="{{ topics.length }} topic{{ topics.length > 1 ? 's' : '' }} selected"
+                    class="p-fluid" />
+
+                @if (topics) {
+                    <div class="flex flex-wrap gap-2">
+                        @for (topic of topics; track topic) {
+                            <p-chip
+                                [label]="topic"
+                                removable="true"
+                                (onRemove)="removeTopic(topic)"
+                                styleClass="text-sm" />
+                        }
+                    </div>
+                }
+            </div>
+
+            <div class="form-field">
+                <label for="difficulty">Difficulty</label>
+                <p-dropdown
+                    name="difficulty"
+                    [options]="availableDifficulties"
+                    formControlName="difficulty"
+                    placeholder="No Difficulty Selected"
+                    [showClear]="true"
+                    class="p-fluid" />
+            </div>
+
+            @if (hasNoQuestions) {
+                <small class="text-red-300">
+                    No questions were found for the selected topics and difficulty. Please change your selection.
+                </small>
+            }
+
+            <p-button
+                type="submit"
+                [label]="isProcessingMatch ? '' : 'Start Matching'"
+                [loading]="isProcessingMatch"
+                [disabled]="!matchForm.valid"
+                (click)="onMatch()"
+                styleClass="w-full justify-content-center" />
+        </form>
+    </div>
+
+    <app-finding-match
+        [userCriteria]="{ topics: topics, difficulty: difficulty }"
+        [isVisible]="isProcessingMatch"
+        (matchFailed)="onMatchFailed()"
+        (dialogClose)="onMatchDialogClose()" />
+    <app-retry-matching
+        [isVisible]="isMatchFailed"
+        (retryMatch)="onRetryMatchRequest()"
+        (dialogClose)="onRetryMatchDialogClose()" />
+</div>

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

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