Implement user-specific tutorial retrieval and enhance authentication details

jambotron-ui/src/app/main-module/main.component/main.component.ts

@@ -142,6 +142,7 @@ export class MainComponent implements OnInit{
 
         //window.location.reload();
         this.router.navigate([environment.default_page]);
+        window.location.reload();
       },
       error: err => {
         console.log(err);

jambotron-ui/src/app/services/tutorial.service.ts

@@ -17,6 +17,8 @@ export class TutorialService {
     return this.http.get<Tutorial[]>(baseUrl);
   }
 
+
+
   get(id: any): Observable<Tutorial> {
     return this.http.get(`${baseUrl}/${id}`);
   }

jambotron-ui/src/app/user-module/tutorials-list.component/tutorials-list.component.html

@@ -1,6 +1,26 @@
 <p>tutorials-list.component works!</p>
 <mat-list role="list">
-  <mat-list-item role="listitem">Item 1</mat-list-item>
-  <mat-list-item role="listitem">Item 2</mat-list-item>
-  <mat-list-item role="listitem">Item 3</mat-list-item>
+  @for (tutorial of tutorials; track tutorial) {
+<!--
+    <mat-list-item role="listitem">
+      {{tutorial.title}}
+
+
+      <span class="spacer"></span>
+      <button mat-button>
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button mat-button>
+        <mat-icon>delete</mat-icon>
+      </button>
+    </mat-list-item>-->
+    <mat-option >
+      <div style="display:flex; justify-content: space-between">
+        <span>{{tutorial.title}}</span>
+        <span></span>
+        <span (click)="deleteOption($event, tutorial)">X</span>
+      </div>
+    </mat-option>
+  }
+
 </mat-list>

jambotron-ui/src/app/user-module/tutorials-list.component/tutorials-list.component.scss

@@ -0,0 +1,3 @@
+.spacer{
+  flex: 1 1 auto;
+}

jambotron-ui/src/app/user-module/tutorials-list.component/tutorials-list.component.ts

@@ -1,15 +1,46 @@
-import { Component } from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {MatList, MatListItem} from '@angular/material/list';
+import {Tutorial} from '../../models/tutorial.model';
+import {TutorialService} from '../../services/tutorial.service';
+import {UserApiService} from '../user-api.service';
+import {MatButton} from '@angular/material/button';
+import {MatLine, MatOption} from '@angular/material/core';
+import {MatIcon} from '@angular/material/icon';
 
 @Component({
   selector: 'app-tutorials-list.component',
   imports: [
     MatList,
-    MatListItem
+    MatListItem,
+    MatLine,
+    MatButton,
+    MatIcon,
+    MatOption
   ],
+  schemas:[CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './tutorials-list.component.html',
   styleUrl: './tutorials-list.component.scss'
 })
 export class TutorialsListComponent {
+  tutorials?: Tutorial[];
 
+  constructor(private userApiService: UserApiService) {
+    this.retrieveTutorials();
+  }
+
+  retrieveTutorials(): void {
+    this.userApiService.getUserAllTutorials()
+      .subscribe(
+        data => {
+          this.tutorials = data;
+          console.log(data);
+        },
+        error => {
+          console.log(error);
+        });
+  }
+
+  deleteOption($event: MouseEvent, option: any) {
+    
+  }
 }

jambotron-ui/src/app/user-module/user-api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserApiService } from './user-api.service';
+
+describe('UserApiService', () => {
+  let service: UserApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

jambotron-ui/src/app/user-module/user-api.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import {Observable} from 'rxjs';
+import {Tutorial} from '../models/tutorial.model';
+import {HttpClient} from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserApiService {
+  baseUrl = 'http://localhost:8080/api/user';
+
+  constructor(private http: HttpClient) {
+
+  }
+
+  getUserAllTutorials(): Observable<Tutorial[]> {
+    return this.http.get<Tutorial[]>(`${this.baseUrl}/tutorials`);
+  }
+}