OMKR-1 | Topic added

src/app/app.module.ts

@@ -40,6 +40,9 @@ import { MatButtonModule } from '@angular/material/button';
 import { ConfirmDialogComponent } from './components/general/dialog/confirm-dialog/confirm-dialog.component';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { QuestionEditDialogComponent } from './components/general/dialog/topic/question-edit-dialog/question-edit-dialog.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatChipsModule } from '@angular/material/chips';
 
 // AOT compilation support
 export function HttpLoaderFactory(http: HttpClient) {
@@ -72,8 +75,11 @@ export function HttpLoaderFactory(http: HttpClient) {
     CelebrationCardDialogComponent,
     ConfettiComponent,
     FileUploadComponent,
-    ConfirmDialogComponent
+    ConfirmDialogComponent,
+    QuestionEditDialogComponent
   ],
+  // ...
+
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -96,7 +102,10 @@ export function HttpLoaderFactory(http: HttpClient) {
     MatInputModule,
     MatButtonModule,
     MatSnackBarModule,
-    MatProgressBarModule
+    MatFormFieldModule,
+    MatChipsModule, // Add this line
+    MatProgressBarModule,
+    MatChipsModule // Add this line
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/admin/admin-routing.module.ts

@@ -8,6 +8,7 @@ import { VisitorComponent } from './visitor/visitor.component';
 import { ChatComponent } from './chat/chat.component';
 import { MarkdownRendererComponent } from './markdown-renderer/markdown-renderer.component';
 import { FileUploadComponent } from '../general/file/file-upload/file-upload.component';
+import { CsharpInterviewQaComponent } from './topic/csharp-interview-qa/csharp-interview-qa.component';
 
 const routes: Routes = [{
   path: "", component: AdminComponent, children: [
@@ -17,7 +18,8 @@ const routes: Routes = [{
     { path: "visitor", component: VisitorComponent },
     { path: "chat", component: ChatComponent },
     { path: "markdown-renderer", component: MarkdownRendererComponent },
-    { path: "file", component: FileUploadComponent }
+    { path: "file", component: FileUploadComponent },
+    { path: "topic", component: CsharpInterviewQaComponent }
   ]
 }];
 

src/app/components/admin/admin.module.ts

@@ -37,6 +37,7 @@ import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.c
 import { VisitorComponent } from './visitor/visitor.component';
 import { ChatComponent } from './chat/chat.component';
 import { MarkdownRendererComponent } from './markdown-renderer/markdown-renderer.component';
+import { CsharpInterviewQaComponent } from './topic/csharp-interview-qa/csharp-interview-qa.component';
 
 @NgModule({
   declarations: [
@@ -56,6 +57,7 @@ import { MarkdownRendererComponent } from './markdown-renderer/markdown-renderer
     VisitorComponent,
     ChatComponent,
     MarkdownRendererComponent,
+    CsharpInterviewQaComponent,
   ],
   imports: [
     CommonModule,

src/app/components/admin/navigation/side-nav/side-nav.component.html

@@ -1,5 +1,5 @@
 <mat-sidenav-container class="example-container" [@indicatorRotate]>
-  <mat-sidenav #sidenav mode="side" opened class="sideNavbar">
+  <mat-sidenav #sidenav mode="push" opened class="sideNavbar">
     <!-- Sidenav content -->
     <mat-nav-list>
       <mat-accordion multi="false">

src/app/components/admin/topic/csharp-interview-qa/csharp-interview-qa.component.css

@@ -0,0 +1,27 @@
+.question-list {
+  float: left;
+  width: 50%;
+}
+
+.question-details {
+  float: right;
+  width: 50%;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  cursor: pointer;
+  padding: 8px;
+  border: 1px solid #ddd;
+  margin-top: -1px; /* Prevent double borders */
+  background-color: #f6f6f6;
+  text-align: left;
+}
+
+li:hover {
+  background-color: #ddd;
+}

src/app/components/admin/topic/csharp-interview-qa/csharp-interview-qa.component.html

@@ -0,0 +1,18 @@
+<button mat-raised-button color="primary" (click)="openEditDialog()">Add Question</button>
+<div class="question-list">
+  <h2>Questions</h2>
+  <ul>
+    <li *ngFor="let question of questions" (click)="selectQuestion(question)" (keyup)="handleKeyUp($event)"
+      tabindex="0">
+      {{ question.questionText }}
+    </li>
+  </ul>
+</div>
+<div class="question-details" *ngIf="selectedQuestion">
+  <h2>{{ selectedQuestion.questionText }}</h2>
+  <div [innerHTML]="selectedQuestion.answer"></div>
+  <!-- Add form for editing the selected question here -->
+  <button (click)="updateQuestion(selectedQuestion)">Update</button>
+  <button mat-button (click)="openEditDialog(selectedQuestion)">Edit</button>
+  <button (click)="deleteQuestion(selectedQuestion.questionId || '')">Delete</button>
+</div>

src/app/components/admin/topic/csharp-interview-qa/csharp-interview-qa.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CsharpInterviewQaComponent } from './csharp-interview-qa.component';
+
+describe('CsharpInterviewQaComponent', () => {
+  let component: CsharpInterviewQaComponent;
+  let fixture: ComponentFixture<CsharpInterviewQaComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CsharpInterviewQaComponent]
+    });
+    fixture = TestBed.createComponent(CsharpInterviewQaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/admin/topic/csharp-interview-qa/csharp-interview-qa.component.ts

@@ -0,0 +1,90 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { QuestionEditDialogComponent } from 'src/app/components/general/dialog/topic/question-edit-dialog/question-edit-dialog.component';
+import { Question } from 'src/app/models/topic/question';
+import { QaDataService } from 'src/app/services/general/qa-data/qa-data.service';
+
+@Component({
+  selector: 'app-csharp-interview-qa',
+  templateUrl: './csharp-interview-qa.component.html',
+  styleUrls: ['./csharp-interview-qa.component.css']
+})
+export class CsharpInterviewQaComponent implements
+
+  OnInit {
+  questions: Question[] = [];
+  selectedQuestion: Question | null = null;
+
+  constructor(private questionService: QaDataService,
+    public dialog: MatDialog, private snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    this.loadQuestions();
+  }
+
+  loadQuestions(): void {
+    this.questionService.getQuestions().subscribe(data => {
+      this.questions = data;
+    });
+  }
+
+  selectQuestion(question: Question): void {
+    this.selectedQuestion = question;
+  }
+
+  createQuestion(question: Question): void {
+    this.questionService.createQuestion(question).subscribe(() => {
+      this.loadQuestions();
+    });
+  }
+
+  updateQuestion(question: Question): void {
+    if (question.id) {
+      this.questionService.updateQuestion(question).subscribe(() => {
+        this.loadQuestions();
+      });
+    }
+  }
+
+  deleteQuestion(id: string): void {
+    this.questionService.deleteQuestion(id).subscribe(() => {
+      this.loadQuestions();
+    });
+  }
+
+  handleKeyUp(event: KeyboardEvent): void {
+    // Handle key up event here
+  }
+
+  openEditDialog(question?: Question): void {
+    // Create copies of tags and references as comma-separated strings
+    const editedQuestion = {
+      ...question,
+      tags: question?.tags.join(', '),
+      references: question?.references.join(', ')
+    };
+
+
+    const dialogRef = this.dialog.open(QuestionEditDialogComponent, {
+      width: '800px', // Set the desired width for the dialog
+      data: editedQuestion // Pass the edited question to the dialog
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        // Check if the result has an id to determine if it's a new or existing question
+        if (result.id) {
+          console.log("result.id: " + result.id);
+          // Split tags and references back into arrays before updating
+          result.tags = result.tags.split(',').map((tag: string) => tag.trim()).filter((tag: string) => tag);
+          result.references = result.references.split(',').map((ref: string) => ref.trim()).filter((ref: string) => ref);
+          this.updateQuestion(result); // Update the question with the result from the dialog
+        }
+        else {
+          this.createQuestion(result);
+        }
+      }
+    });
+  }
+}

src/app/components/general/dialog/topic/question-edit-dialog/question-edit-dialog.component.html

@@ -0,0 +1,31 @@
+<h1 mat-dialog-title>Edit Question</h1>
+<div mat-dialog-content>
+  <mat-form-field class="full-width">
+    <mat-label>Topic</mat-label>
+    <input matInput [(ngModel)]="data.topic">
+  </mat-form-field>
+  <mat-form-field class="full-width">
+    <mat-label>Subtopic</mat-label>
+    <input matInput [(ngModel)]="data.subtopic">
+  </mat-form-field>
+  <mat-form-field class="full-width">
+    <mat-label>Difficulty</mat-label>
+    <input matInput [(ngModel)]="data.difficulty">
+  </mat-form-field>
+  <mat-form-field class="full-width">
+    <mat-label>Tags</mat-label>
+    <input matInput placeholder="Comma-separated (e.g., tag1, tag2)" [(ngModel)]="data.tags">
+  </mat-form-field>
+  <mat-form-field class="full-width">
+    <mat-label>References</mat-label>
+    <input matInput placeholder="Comma-separated (e.g., ref1, ref2)" [(ngModel)]="data.references">
+  </mat-form-field>
+  <mat-form-field class="full-width">
+    <mat-label>Answer</mat-label>
+    <textarea matInput placeholder="HTML allowed" [(ngModel)]="data.answer"></textarea>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onCancelClick()">Cancel</button>
+  <button mat-button (click)="onSaveClick()">Save</button>
+</div>

src/app/components/general/dialog/topic/question-edit-dialog/question-edit-dialog.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionEditDialogComponent } from './question-edit-dialog.component';
+
+describe('QuestionEditDialogComponent', () => {
+  let component: QuestionEditDialogComponent;
+  let fixture: ComponentFixture<QuestionEditDialogComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionEditDialogComponent]
+    });
+    fixture = TestBed.createComponent(QuestionEditDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/general/dialog/topic/question-edit-dialog/question-edit-dialog.component.ts

@@ -0,0 +1,69 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Question } from 'src/app/models/topic/question';
+import { QaDataService } from 'src/app/services/general/qa-data/qa-data.service';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+
+@Component({
+  selector: 'app-question-edit-dialog',
+  templateUrl: './question-edit-dialog.component.html',
+  styleUrls: ['./question-edit-dialog.component.css']
+})
+export class QuestionEditDialogComponent implements OnInit {
+  readonly separatorKeysCodes = [ENTER, COMMA] as const;
+  constructor(
+    public dialogRef: MatDialogRef<QuestionEditDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: Question, private questionService: QaDataService) { }
+
+  ngOnInit() {
+  }
+
+  onCancelClick(): void {
+    this.dialogRef.close();
+  }
+
+  onSaveClick(): void {
+    // Add the logic to save the question
+    console.log(this.data);
+    // this.questionService.updateQuestion(this.data.questionId ?? '', this.data).subscribe();
+    // Then close the dialog
+    this.dialogRef.close(this.data);
+  }
+
+  addTag(event: MatChipInputEvent): void {
+    const input = event.input;
+    const value = (event.value || '').trim();
+
+    if (value) {
+      this.data.tags.push(value);
+    }
+
+    if (input) {
+      input.value = '';
+    }
+  }
+
+  removeTag(tag: string): void {
+    const index = this.data.tags.indexOf(tag);
+    if (index >= 0) {
+      this.data.tags.splice(index, 1);
+    }
+  }
+
+  addReference(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+    if (value) {
+      this.data.references.push(value);
+    }
+    // Clear the input value
+    event.chipInput!.clear();
+  }
+
+  removeReference(ref: string): void {
+    const index = this.data.references.indexOf(ref);
+    if (index >= 0) {
+      this.data.references.splice(index, 1);
+    }
+  }
+}

src/app/components/home/video/video.component.html

@@ -4,5 +4,10 @@
 
 <!-- Responsive Video Container -->
 <div class="responsive-video">
-  <iframe src="https://www.youtube.com/embed/SoGEFiaOoRs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <iframe loading="lazy"
+    src="https://www.youtube.com/embed/SoGEFiaOoRs"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen>
+  </iframe>
 </div>