Small UI fixing

jambotron-ui/src/app/components/add-tutorial/add-tutorial.component.html

@@ -1,35 +1,56 @@
-<div>
-  <div class="submit-form">
-    <div *ngIf="!submitted">
-      <div class="form-group">
-        <label for="title">Title</label>
-        <input
-          type="text"
-          class="form-control"
-          id="title"
-          required
-          [(ngModel)]="tutorial.title"
-          name="title"
-        />
-      </div>
+<!--<div>-->
+<!--  <div class="submit-form">-->
+<!--    <div *ngIf="!submitted">-->
+<!--      <div class="form-group">-->
+<!--        <label for="title">Title</label>-->
+<!--        <input-->
+<!--          type="text"-->
+<!--          class="form-control"-->
+<!--          id="title"-->
+<!--          required-->
+<!--          [(ngModel)]="tutorial.title"-->
+<!--          name="title"-->
+<!--        />-->
+<!--      </div>-->
 
-      <div class="form-group">
-        <label for="description">Description</label>
-        <input
-          class="form-control"
-          id="description"
-          required
-          [(ngModel)]="tutorial.description"
-          name="description"
-        />
-      </div>
+<!--      <div class="form-group">-->
+<!--        <label for="description">Description</label>-->
+<!--        <input-->
+<!--          class="form-control"-->
+<!--          id="description"-->
+<!--          required-->
+<!--          [(ngModel)]="tutorial.description"-->
+<!--          name="description"-->
+<!--        />-->
+<!--      </div>-->
 
-      <button (click)="saveTutorial()" class="btn btn-success">Submit</button>
-    </div>
+<!--      <button (click)="saveTutorial()" class="btn btn-success">Submit</button>-->
+<!--    </div>-->
 
+<!--    <div *ngIf="submitted">-->
+<!--      <h4>Tutorial was submitted successfully!</h4>-->
+<!--      <button class="btn btn-success" (click)="newTutorial()">Add</button>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</div>-->
+
+<mat-card  appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>Add tutorial</mat-card-title>
+  </mat-card-header>
+   <mat-card-content *ngIf="!submitted">
+     <mat-form-field class="example-full-width">
+       <mat-label>Title</mat-label>
+       <input matInput required
+              [(ngModel)]="tutorial.title">
+     </mat-form-field>
+     <kendo-editor [(ngModel)]="tutorial.description" ></kendo-editor>
+  </mat-card-content>
+  <mat-card-actions>
+    <button matButton (click)="saveTutorial()" *ngIf="!submitted">Save</button>
     <div *ngIf="submitted">
       <h4>Tutorial was submitted successfully!</h4>
-      <button class="btn btn-success" (click)="newTutorial()">Add</button>
+      <button matButton (click)="newTutorial()">Add new tutorial</button>
     </div>
-  </div>
-</div>
+  </mat-card-actions>
+</mat-card>

jambotron-ui/src/app/components/add-tutorial/add-tutorial.component.scss

@@ -1,4 +1,21 @@
 .submit-form {
   max-width: 400px;
   margin: auto;
-}
+}
+
+mat-card{
+  margin: 20px;
+}
+mat-card-title{
+  color: cyan;
+}
+
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

jambotron-ui/src/app/components/add-tutorial/add-tutorial.component.ts

@@ -2,12 +2,11 @@ import { Component, OnInit } from '@angular/core';
 import {Tutorial} from '../../models/tutorial.model';
 import {TutorialService} from '../../services/tutorial.service';
 
-
 @Component({
-    selector: 'app-add-tutorial',
-    templateUrl: './add-tutorial.component.html',
-    styleUrls: ['./add-tutorial.component.scss'],
-    standalone: false
+  selector: 'app-add-tutorial',
+  templateUrl: './add-tutorial.component.html',
+  styleUrls: ['./add-tutorial.component.scss'],
+  standalone: false
 })
 export class AddTutorialComponent implements OnInit {
 

jambotron-ui/src/app/components/home/home.component.html

@@ -2,4 +2,21 @@
     <header class="jumbotron">
       <p>{{ content }}</p>
     </header>
-  </div>
+  </div>
+
+<mat-card  appearance="outlined" >
+  <mat-card-header>
+    <mat-card-title>Tutorials</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+
+
+    </mat-card-content>
+</mat-card>
+
+@for (tutorial of tutorials; track $index){
+  <mat-card appearance="outlined" class="tutorial-card">
+    <mat-card-content [innerHTML]="tutorial.description">
+    </mat-card-content>
+  </mat-card>
+}

jambotron-ui/src/app/components/home/home.component.scss

@@ -0,0 +1,9 @@
+mat-card{
+  margin: 20px;
+}
+mat-card-title{
+  color: cyan;
+}
+.tutorial-card{
+  color: white;
+}

jambotron-ui/src/app/components/home/home.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import {UserService} from '../../services/user.service';
+import {TutorialService} from '../../services/tutorial.service';
+
+import {Tutorial} from '../../models/tutorial.model';
 
 
 @Component({
@@ -11,16 +13,22 @@ import {UserService} from '../../services/user.service';
 export class HomeComponent implements OnInit {
   content?: string;
 
-  constructor(private userService: UserService) { }
+  tutorials?: Tutorial[];
+
+  constructor(private tutorialService: TutorialService) { }
 
   ngOnInit(): void {
-    // this.userService.getPublicContent().subscribe(
-    //   (data : any) => {
-    //     this.content = data;
-    //   },
-    //   (err : any) => {
-    //     this.content = JSON.parse(err.error).message;
-    //   }
-    // );
+    this.retrieveTutorials();
+  }
+  retrieveTutorials(): void {
+    this.tutorialService.getAll()
+      .subscribe(
+        data => {
+          this.tutorials = data;
+          console.log(data);
+        },
+        error => {
+          console.log(error);
+        });
   }
 }