Merge pull request #20 from CS3219-AY2425S1/Aiden_EditQuestion

Aiden add/edit question
CS3219-AY2425S1 · Sep 28, 2024 · 2832c6e · 2832c6e
2 parents 90e4b8e + 4c97391
commit 2832c6e
Show file tree

Hide file tree

Showing 19 changed files with 976 additions and 34 deletions.
diff --git a/peer-prep-be/src/routes/question_route.go b/peer-prep-be/src/routes/question_route.go
@@ -9,7 +9,7 @@ func QuestionRoute(e *echo.Echo) {
 	e.GET("/questions/:questionId", controllers.GetQuestion)
 	e.GET("/questions", controllers.GetQuestions) 
 	e.GET("/questions/search", controllers.SearchQuestion)
-	e.POST("/question", controllers.CreateQuestion)
+	e.POST("/questions", controllers.CreateQuestion)
 	e.PUT("/questions/:questionId", controllers.UpdateQuestion)
 	e.DELETE("/questions/:questionId", controllers.DeleteQuestion)
 }
diff --git a/peer-prep-be/src/server.go b/peer-prep-be/src/server.go
@@ -28,5 +28,5 @@ func main() {
 	e.GET("/", func(c echo.Context) error {
 		return c.String(http.StatusOK, "Hello, World!")
 	})
-	e.Logger.Fatal(e.Start(":1323"))
+	e.Logger.Fatal(e.Start(":8080"))
 }
diff --git a/peer-prep-fe/src/add-page/add-page.component.css b/peer-prep-fe/src/add-page/add-page.component.css
@@ -0,0 +1,228 @@
+.add-question-container {
+  background-color: darkgrey;
+  color: white;
+  width: 800px;
+  padding: 20px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  font-family: "Signika", sans-serif;
+  height: 700px;
+}
+
+.question-title {
+  margin-top: -20px;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 470px;
+}
+
+.back-button {
+  background-color: transparent;
+  border: none;
+  color: #333;
+  font-size: 50px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  transition: transform 0.2s, color 0.2s;
+}
+
+.back-button:hover {
+  color: mediumvioletred;
+  transform: scale(2.1);
+}
+
+.description-box {
+  width: 100%;
+  max-width: 100%;
+  height: 80px;
+  margin-bottom: 10px;
+}
+
+.editable-box {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  resize: none;
+  overflow-y: auto;
+  background-color: #333;
+  color: white;
+  font-size: 15px;
+  margin-top: -15px;
+}
+
+.editable-box::-webkit-scrollbar {
+  width: 6px;
+}
+
+.editable-box::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 10px;
+}
+
+.selection {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.dropdown-toggle {
+  width: 80%;
+  padding: 10px;
+  background-color: #444;
+  color: white;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 15px;
+  margin-top: -15px;
+}
+
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  width: 80%;
+  border: 1px solid #ccc;
+  max-height: 100px;
+  overflow-y: auto;
+  box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
+  z-index: 1;
+  border-radius: 3px;
+  background-color: #333333;
+  font-family: "Signika", sans-serif;
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+.dropdown-item {
+  padding: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.dropdown-label {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+}
+
+.dropdown-label input[type="checkbox"] {
+  margin-left: auto;
+  cursor: pointer;
+}
+
+.dropdown-item:hover {
+  background-color: grey;
+}
+
+.dropdown-label input[type="checkbox"]:checked {
+  accent-color: #dddddd;
+}
+
+input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+.difficulty-buttons {
+  display: flex;
+  justify-content: center;
+  margin-top: -10px;
+}
+
+.diff-butt {
+  flex: 1;
+  padding: 10px 0;
+  background-color: #444;
+  border: 1px solid #ccc;
+  color: white;
+  cursor: pointer;
+  border-radius: 0;
+  font-size: 16px;
+  transition: background-color 0.3s;
+  width: 80px;
+}
+
+.diff-butt:not(:last-child) {
+  border-right: none;
+}
+
+.diff-butt:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.diff-butt:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.diff-butt.selected {
+  background-color: steelblue;
+}
+
+.diff-butt:hover {
+  background-color: lightsteelblue;
+  color: black;
+  transform: scale(1.1);
+}
+
+.save-button {
+  font-size: 16px;
+  position: relative;
+  left: 680px;
+  width: 80px;
+  height: 30px;
+  border-radius: 10px;
+  margin-top: 20px;
+  font-family: "Signika", sans-serif;
+  background-color: white;
+  color: black;
+}
+
+.save-button:hover {
+  background-color: darkgreen;
+  color: white;
+  transform: scale(1.1);
+}
+
+.error-message-title {
+  color: red;
+  font-size: 15px;
+}
+
+.error-message-description {
+  color: red;
+  font-size: 15px;
+  margin-top: -15px;
+}
+
+.error-message-difficulty {
+  margin-top: 5px;
+  margin-left: 570px;
+  color: red;
+}
+
+
diff --git a/peer-prep-fe/src/add-page/add-page.component.html b/peer-prep-fe/src/add-page/add-page.component.html
@@ -0,0 +1,58 @@
+<div class="add-question-container">
+  <div class = header>
+    <h1>ADD QUESTION</h1>
+    <button class="back-button" (click)="navigateBack()">&#10005;</button>
+  </div>
+
+  <form [formGroup]="questionForm" (ngSubmit)="saveQuestion()">
+   <div class="question-title">
+    <h2>QUESTION TITLE</h2>
+    <div class="title-box">
+      <textarea [(ngModel)]="question_title" class="editable-box" placeholder="Enter question title here..." formControlName="question_title"></textarea>
+    </div>
+     <div *ngIf="questionForm.get('question_title')?.touched && questionForm.get('question_title')?.invalid" class="error-message-title">
+       Title is required.
+     </div>
+  </div>
+
+    <div class="question-description">
+      <h2>QUESTION DESCRIPTION</h2>
+      <div class="description-box">
+        <textarea [(ngModel)]="question_description" class="editable-box" placeholder="Enter question description here..." formControlName="question_description"></textarea>
+      </div>
+      <div *ngIf="questionForm.get('question_description')?.touched && questionForm.get('question_description')?.invalid" class="error-message-description">
+        Description is required.
+      </div>
+    </div>
+  </form>
+
+  <div class="question-category">
+    <h2>CATEGORY</h2>
+    <div class="selection">
+      <div class="dropdown">
+        <button class="dropdown-toggle" type="button" (click)="toggleDropdown()">
+          Select all that applies
+        </button>
+        <div class="dropdown-menu" [class.show]="dropdownOpen">
+          <div *ngFor="let category of question_categories" class="dropdown-item">
+            <label class="dropdown-label">
+              {{category.name}}
+              <input type="checkbox" [(ngModel)]="category.selected"/>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="difficulty-buttons">
+        <button class="diff-butt" type="button" [ngClass]="{'selected': question_complexity === 'Easy'}" (click)="setDifficulty('Easy')">Easy</button>
+        <button class="diff-butt" type="button" [ngClass]="{'selected': question_complexity === 'Medium'}" (click)="setDifficulty('Medium')">Medium</button>
+        <button class="diff-butt" type="button" [ngClass]="{'selected': question_complexity === 'Hard'}" (click)="setDifficulty('Hard')">Hard</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="saving-button">
+    <button class="save-button" (click)="saveQuestion()">SAVE</button>
+  </div>
+
+</div>
diff --git a/peer-prep-fe/src/add-page/add-page.component.spec.ts b/peer-prep-fe/src/add-page/add-page.component.spec.ts
@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AddPageComponent } from './add-page.component';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+class MatDialogRefMock {
+  close() {}
+}
+
+const mockDialogData = {
+  someProperty: 'someValue'
+};
+
+describe('AddPageComponent', () => {
+  let component: AddPageComponent;
+  let fixture: ComponentFixture<AddPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddPageComponent],
+      providers: [
+        { provide: MatDialogRef, useClass: MatDialogRefMock },
+        { provide: MAT_DIALOG_DATA, useValue: mockDialogData }
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AddPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});