Create todo module (#11)

* fix logout issue by redirecting user to login page

* add todo create component

* finish todo components

* add task create and task list

* don't allow deleting a todo if it has existing tasks

* refresh todo after a delete

* add error interceptor

* fix active route css class

* add route active class to each li

* cleanup code

todo-client/projects/todo/src/lib/components/todo-list/todo-list.component.ts

@@ -25,7 +25,7 @@ import { DoAction } from 'projects/app-common/src/public-api';
             <a
               href="#"
               [routerLink]="['tasks', todo.id]"
-              routerLinkActive="list-group-item-light"
+              routerLinkActive="list-group-item-primary"
               class="list-group-item list-group-item-action"
             >
               ({{ i + 1 }}) {{ todo?.name }}

todo-client/projects/todo/src/lib/services/todo.service.ts

@@ -10,8 +10,7 @@ import { catchError, map } from 'rxjs/operators';
 
 const httpOptions = {
 	headers: new HttpHeaders({
-		'Content-Type': 'application/json',
-		Authorization: 'my-auth-token'
+		'Content-Type': 'application/json'
 	})
 };
 

todo-client/src/app/shared/home/home.component.ts

@@ -1,15 +1,19 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+	selector: 'app-home',
+	template: `
+    <div class="row text-center">
+      <div class="col-md-12">
+        <h2 class="">Welcome to Todozz App!</h2>
+
+        <p>Here you can manage your Todo Lists in a breeze!</p>
+      </div>
+    </div>
+  `
 })
 export class HomeComponent implements OnInit {
+	constructor() {}
 
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+	ngOnInit() {}
 }

todo-client/src/app/shared/master/master.component.ts

@@ -4,8 +4,57 @@ import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-master',
-	templateUrl: './master.component.html',
-	styleUrls: ['./master.component.scss']
+	template: `
+    <div class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top">
+      <div class="container">
+        <a class="navbar-brand" href="#">
+          <i class="fas fa-tasks"></i>&nbsp;Todozz</a
+        >
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#navbarResponsive"
+          aria-controls="navbarResponsive"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                [routerLink]="['/']"
+                [routerLinkActiveOptions]="{ exact: true }"
+                routerLinkActive="active"
+              >
+                Home
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                [routerLink]="['/todo']"
+                [routerLinkActiveOptions]="{ exact: true }"
+                routerLinkActive="active"
+                >Todo</a
+              >
+            </li>
+            <li *ngIf="loggedIn" class="nav-item">
+              <a class="nav-link" (click)="logout()" href="">Logout</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <section class="py-5 mt-5">
+      <div class="container">
+        <router-outlet></router-outlet>
+      </div>
+    </section>
+  `
 })
 export class MasterComponent implements OnInit {
 	public loggedIn = false;