Create List of Questions page with pop-up functionality

peer-prep-fe/package.json

@@ -15,6 +15,7 @@
     "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/forms": "^18.2.0",
+    "@angular/material": "^18.2.6",
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",

peer-prep-fe/src/app/app.component.css

@@ -0,0 +1,16 @@
+#container {
+  width: 100vw;                
+  height: 100vh;                   
+  background-image: url('../assets/bg.jpg');
+  background-size: cover;         
+  position: fixed;
+  top: 0;
+  z-index: -1;     
+}
+
+* {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+} 

peer-prep-fe/src/app/app.component.spec.ts

@@ -24,6 +24,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, peer-prep-fe');
+    expect(compiled.querySelector('h1')?.textContent).toContain('List of Questions');
   });
 });

peer-prep-fe/src/app/app.component.ts

@@ -1,10 +1,14 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { QuestionListComponent } from '../components/question-list/question-list.component';
+import { CommonModule } from '@angular/common';
+
+
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, QuestionListComponent, CommonModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

peer-prep-fe/src/app/models/question.model.ts

@@ -0,0 +1,4 @@
+export interface Question {
+    title: string;
+    difficulty: string;
+  }

peer-prep-fe/src/components/question-box/question-box.component.css

@@ -0,0 +1,50 @@
+.question-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #2a2a2a; 
+    padding: 10px 15px; 
+    border-radius: 10px;
+    margin-bottom: 10px;
+    width: 750px;
+}
+
+.question-title {
+    font-family: "Signika Negative", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 300;
+    font-style: normal;
+    font-size: 24px;
+    color: white;
+    text-align: start;
+    align-items: start;
+    background-color: transparent;
+    cursor: pointer;
+    border: none;
+
+  }
+
+.difficulty {
+    padding: 8px 12px;
+    border-radius: 15px;
+    font-size: 14px;
+    font-family: Arial, Helvetica, sans-serif;
+    margin-left: 50px;
+
+}
+
+  .difficulty.Easy {
+    background-color: #159200;
+    color: white;
+  }
+
+  .difficulty.Medium {
+    background-color: #CEC600;
+    color: white;
+  }
+
+  .difficulty.Hard {
+    background-color: #A80000;
+    color: white;
+  }

peer-prep-fe/src/components/question-box/question-box.component.html

@@ -0,0 +1,6 @@
+<div class="question-box">
+  <button class="question-title" (click)="openModal()">
+    {{ index + 1 }}. {{ question.title.toUpperCase() }}
+  </button>
+  <span class="difficulty" [ngClass]="question.difficulty">{{ question.difficulty }}</span>
+</div>

peer-prep-fe/src/components/question-box/question-box.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { QuestionBoxComponent } from './question-box.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Question } from '../../app/models/question.model';
+
+describe('QuestionBoxComponent', () => {
+  let component: QuestionBoxComponent;
+  let fixture: ComponentFixture<QuestionBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [QuestionBoxComponent],
+      providers: [
+        { 
+          provide: MAT_DIALOG_DATA, 
+          useValue: { questionTitle: 'Mock Title', questionDifficulty: 'easy' } 
+        },
+        { provide: MatDialogRef, useValue: {} }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(QuestionBoxComponent);
+    component = fixture.componentInstance;
+
+    component.question = { title: 'Mock Title', difficulty: 'easy' } as Question; 
+    component.index = 0; 
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

peer-prep-fe/src/components/question-box/question-box.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { Question } from '../../app/models/question.model';  
+import { CommonModule } from '@angular/common';
+import { QuestionDescriptionComponent } from '../question-description/question-description.component';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-question-box',
+  standalone: true,
+  imports: [CommonModule, QuestionDescriptionComponent, MatDialogModule],
+  templateUrl: './question-box.component.html',
+  styleUrls: ['./question-box.component.css'],
+})
+
+export class QuestionBoxComponent {
+  @Input() question!: Question; 
+  @Input() index!: number; 
+
+ constructor(private dialog: MatDialog) {}
+
+  openModal() {
+    this.dialog.open(QuestionDescriptionComponent, {
+      data: {
+        questionTitle: this.question.title,
+        questionDifficulty: this.question.difficulty
+      },
+      panelClass: 'custom-modalbox',
+      width: '400px'
+
+    });
+  }
+}
+

peer-prep-fe/src/components/question-categories/question-categories.component.css

@@ -0,0 +1,13 @@
+.question-categories {
+    width: auto; 
+    height: 20px; 
+    background-color: #C0C0C0;
+    display: flex;
+    justify-content: center; 
+    align-items: center;
+    padding: 2px 2px; 
+    border-radius: 10px;
+    margin-bottom: 10px;
+    color: black;
+    text-align: center; 
+}

peer-prep-fe/src/components/question-categories/question-categories.component.html

@@ -0,0 +1,5 @@
+<div class = "question-categories">
+    <p>
+        Queue
+    </p>
+</div>

peer-prep-fe/src/components/question-categories/question-categories.component.spec.ts

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

peer-prep-fe/src/components/question-categories/question-categories.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-question-categories',
+  standalone: true,
+  imports: [],
+  templateUrl: './question-categories.component.html',
+  styleUrl: './question-categories.component.css'
+})
+export class QuestionCategoriesComponent {
+
+}

peer-prep-fe/src/components/question-description/question-description.component.css

@@ -0,0 +1,21 @@
+/* ::ng-deep .custom-modalbox {
+    background-color: rgb(167, 55, 55); 
+    border-radius: 8px; 
+}
+
+::ng-deep .custom-modalbox mat-dialog-content {
+    padding: 16px; 
+    background-color: black; 
+    font-family: "Signika Negative", sans-serif;
+    color: red;
+}
+
+::ng-deep .custom-modalbox question-title {
+    background-color: black; 
+    color: white; 
+    padding: 16px; 
+    font-size: 1.5rem; 
+    font-family: "Signika Negative", sans-serif;;
+}
+
+ */

peer-prep-fe/src/components/question-description/question-description.component.html

@@ -0,0 +1,24 @@
+<div class="mat-dialog-content">
+    <div class = "upper-half">
+        <div class="mat-dialog-actions">
+            <button class="close-button" mat-button mat-dialog-close><i class="fa-solid fa-x"></i></button>
+          </div>
+    <p class = "question-title">{{ data.questionTitle }}</p>
+    <p class="difficulty" [ngClass]="data.questionDifficulty">{{ data.questionDifficulty }}</p>
+
+      </div>
+<div>
+    <p>
+    QUESTION DESCRIPTION
+    </p>
+<app-question-explanation-box></app-question-explanation-box>
+</div>
+<div>
+    <p>
+CATEGORIES
+    </p>
+<app-question-categories></app-question-categories>
+</div>
+</div>
+
+

peer-prep-fe/src/components/question-description/question-description.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { QuestionDescriptionComponent } from './question-description.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+describe('QuestionDescriptionComponent', () => {
+  let component: QuestionDescriptionComponent;
+  let fixture: ComponentFixture<QuestionDescriptionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [QuestionDescriptionComponent], 
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: {} }, 
+        { provide: MatDialogRef, useValue: {} }     
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(QuestionDescriptionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});