bootstrap + fontawesome + logger + components

Author: Alain BOUDARD

angular.json

@@ -26,7 +26,10 @@
               "apps/todosws/src/favicon.ico",
               "apps/todosws/src/assets"
             ],
-            "styles": ["apps/todosws/src/styles.scss"],
+            "styles": [
+              "apps/todosws/src/assets/vendor.scss",
+              "apps/todosws/src/assets/main.scss"
+            ],
             "scripts": []
           },
           "configurations": {

apps/api/src/app/app.module.ts

@@ -1,12 +1,16 @@
-import { Module } from '@nestjs/common';
+import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { TodoModule } from './todo/todo.module';
-
+import { LoggerMiddleware } from './common/logger.middleware';
 
 @Module({
   imports: [TodoModule],
   controllers: [AppController],
   providers: [AppService]
 })
-export class AppModule {}
+export class AppModule implements NestModule {
+  configure(consumer: MiddlewareConsumer) {
+    consumer.apply(LoggerMiddleware).forRoutes('todo');
+  }
+}

apps/api/src/app/common/logger.middleware.spec.ts

@@ -0,0 +1,7 @@
+import { LoggerMiddleware } from './logger.middleware';
+
+describe('LoggerMiddleware', () => {
+  it('should be defined', () => {
+    expect(new LoggerMiddleware()).toBeDefined();
+  });
+});

apps/api/src/app/common/logger.middleware.ts

@@ -0,0 +1,9 @@
+import { Injectable, NestMiddleware } from '@nestjs/common';
+
+@Injectable()
+export class LoggerMiddleware implements NestMiddleware {
+  use(req: Request, res: Response, next: Function) {
+    console.log('request : ' + req.method + ' - ' + req.url);
+    next();
+  }
+}

apps/api/src/main.ts

@@ -4,13 +4,25 @@
  **/
 
 import { NestFactory } from '@nestjs/core';
-
+import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
 import { AppModule } from './app/app.module';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   const globalPrefix = 'api';
   app.setGlobalPrefix(globalPrefix);
+
+  // define setBasePath() so swagger UI can run tests against /api
+  const options = new DocumentBuilder()
+    .setTitle('Todo API')
+    .setDescription('The todo API description')
+    .setVersion('1.0')
+    .addTag('todo')
+    .setBasePath('api')
+    .build();
+  const document = SwaggerModule.createDocument(app, options);
+  SwaggerModule.setup('swagger', app, document);
+
   const port = process.env.port || 3333;
   await app.listen(port, () => {
     console.log('Listening at http://localhost:' + port + '/' + globalPrefix);

apps/todosws/src/app/app.component.html

@@ -1,7 +1,24 @@
-<div style="text-align:center">
+<todosws-navbar></todosws-navbar>
+<div class="container">
   <h1>Welcome to todosws!</h1>
-  <div>
-    <span [innerText]="counter$ | async"></span>
+  <div class="row">
+    <div class="col-sm-3">
+      <todosws-counter></todosws-counter>
+    </div>
+    <div class="col-sm-9">
+      <img
+        src="../assets/img/ngrx-data-nestjs.png"
+        height="130px"
+        alt="NgRx Data & NestJS"
+      />
+      <p>
+        This is an Angular app built with <a href="https://nx.dev">Nx</a>,
+        <a href="https://docs.nestjs.com/">Nest Server</a> and
+        <a href="https://ngrx.io/guide/data">NgRx Data</a> in monorepo.
+      </p>
+      <todosws-todo-list></todosws-todo-list>
+
+      <div>Message: {{ hello$ | async | json }}</div>
+    </div>
   </div>
 </div>
-<div>Message: {{ hello$ | async | json }}</div>

apps/todosws/src/app/app.component.ts

@@ -11,10 +11,8 @@ import { Observable } from 'rxjs';
 })
 export class AppComponent implements OnInit {
   hello$ = this.http.get<Message>('/api/hello');
-  counter$: Observable<number>;
-  constructor(private http: HttpClient, private todoService: TodoService) {
-    this.counter$ = todoService.count$;
-  }
+
+  constructor(private http: HttpClient, private todoService: TodoService) {}
   ngOnInit(): void {
     this.todoService.getAll();
   }

apps/todosws/src/app/app.module.ts

@@ -8,10 +8,24 @@ import { EntityDataModule } from '@ngrx/data';
 import { entityConfig } from './store/entity-metadata';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
+import { NavbarComponent } from './comp/navbar/navbar.component';
+import { CounterComponent } from './comp/counter/counter.component';
+import { TodoListComponent } from './comp/todo-list/todo-list.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { UtilsService } from './services/utils.service';
+
+// font awesome icons
+UtilsService.initFaIcons();
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent,
+    NavbarComponent,
+    CounterComponent,
+    TodoListComponent
+  ],
   imports: [
+    FontAwesomeModule,
     BrowserModule,
     HttpClientModule,
     StoreModule.forRoot([]),

apps/todosws/src/app/comp/counter/counter.component.css

@@ -0,0 +1,5 @@
+<p>Counter value from NgRx Data Store :</p>
+<div class="alert alert-primary" role="alert">
+  Todo counter
+  <span class="badge badge-secondary" [innerText]="counter$ | async"></span>
+</div>

apps/todosws/src/app/comp/counter/counter.component.html

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

apps/todosws/src/app/comp/counter/counter.component.spec.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { TodoService } from '../../services/todo.service';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'todosws-counter',
+  templateUrl: './counter.component.html',
+  styleUrls: ['./counter.component.css']
+})
+export class CounterComponent implements OnInit {
+  counter$: Observable<number>;
+  constructor(private todosService: TodoService) {
+    this.counter$ = this.todosService.count$;
+  }
+
+  ngOnInit() {}
+}

apps/todosws/src/app/comp/counter/counter.component.ts

@@ -0,0 +1,21 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+  <a class="navbar-brand py-0 px-3" href="#" style="">
+    <img height="50px" src="assets/img/nx-logo-50.png" />
+  </a>
+
+  <button class="navbar-toggler" type="button" (click)="toggleNavbar()">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" [ngClass]="{ show: navbarOpen }">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="#">Item 1</a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link" href="#">Item 2</a>
+      </li>
+    </ul>
+  </div>
+</nav>

apps/todosws/src/app/comp/navbar/navbar.component.css

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

apps/todosws/src/app/comp/navbar/navbar.component.html

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'todosws-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+
+  navbarOpen = false;
+
+  constructor() { }
+  
+  toggleNavbar() {
+    this.navbarOpen = !this.navbarOpen;
+  }
+
+  ngOnInit() {
+  }
+
+}

apps/todosws/src/app/comp/navbar/navbar.component.spec.ts

@@ -0,0 +1,57 @@
+<table class="table table-hover table-bordered">
+  <thead class="thead-light">
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">Title</th>
+      <th scope="col">Description</th>
+      <th>&nbsp;</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let todo of (todos$ | async); let i = index">
+      <th scope="row">
+        <span [innerText]="todo.id"></span>
+      </th>
+      <td>
+        <span [innerText]="todo.title"></span>
+      </td>
+      <td><span [innerText]="todo.description"></span></td>
+      <td>
+        <div class="btn-group" role="group" aria-label="Actions">
+          <button
+            title="edit"
+            type="button"
+            class="btn btn-outline-secondary"
+            (click)="editTodo(todo.id)"
+          >
+            <fa-icon icon="edit"></fa-icon>
+          </button>
+          <button
+            title="delete"
+            type="button"
+            class="btn btn-outline-secondary"
+            (click)="deleteTodo(todo.id)"
+          >
+            <fa-icon icon="trash-alt"></fa-icon>
+          </button>
+          <button
+            title="active"
+            type="button"
+            class="btn btn-outline-secondary"
+          >
+            <fa-icon
+              *ngIf="todo.active"
+              (click)="updateTodo(todo)"
+              icon="check-square"
+            ></fa-icon>
+            <fa-icon
+              *ngIf="!todo.active"
+              (click)="updateTodo(todo)"
+              icon="square"
+            ></fa-icon>
+          </button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>

apps/todosws/src/app/comp/navbar/navbar.component.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoListComponent } from './todo-list.component';
+
+describe('TodoListComponent', () => {
+  let component: TodoListComponent;
+  let fixture: ComponentFixture<TodoListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/todosws/src/app/comp/todo-list/todo-list.component.css

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { TodoService } from '../../services/todo.service';
+import { Todo } from '@todosws/api-interface';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'todosws-todo-list',
+  templateUrl: './todo-list.component.html',
+  styleUrls: ['./todo-list.component.css']
+})
+export class TodoListComponent implements OnInit {
+  todos$: Observable<Todo[]>;
+  constructor(private todoService: TodoService) {
+    this.todos$ = todoService.entities$;
+  }
+
+  ngOnInit() {
+    this.getTodos();
+  }
+  getTodos() {
+    this.todoService.getAll();
+  }
+  deleteTodo(todoId: number) {
+    this.todoService.delete(todoId);
+  }
+
+  updateTodo(todo: Todo) {
+    todo.active = !todo.active;
+    this.todoService.update(todo);
+  }
+
+  editTodo(id: number) {
+    alert('not implemented yet');
+  }
+}

apps/todosws/src/app/comp/todo-list/todo-list.component.html

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UtilsService } from './utils.service';
+
+describe('UtilsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UtilsService = TestBed.get(UtilsService);
+    expect(service).toBeTruthy();
+  });
+});