date parsing

Author: aboudard

src/angular/angular.json

@@ -4,7 +4,7 @@
   "newProjectRoot": "projects",
   "projects": {
     "ngrxdata": {
-      "root": "",
+      "root": "src",
       "sourceRoot": "src",
       "projectType": "application",
       "architect": {
@@ -96,8 +96,8 @@
       }
     },
     "ngrxdata-e2e": {
-      "root": "",
-      "sourceRoot": "",
+      "root": "e2e",
+      "sourceRoot": "e2e",
       "projectType": "application",
       "architect": {
         "e2e": {
@@ -131,4 +131,4 @@
       "prefix": "app"
     }
   }
-}
+}

src/angular/package-lock.json

@@ -34,11 +34,11 @@
     "@ngrx/store": "^8.6.0",
     "@ngrx/store-devtools": "^8.6.0",
     "bootstrap": "^4.4.1",
-    "core-js": "^2.5.6",
+    "core-js": "^2.6.11",
     "ngx-spinner": "^8.1.0",
     "ngx-toastr": "^11.3.3",
     "rxjs": "^6.5.4",
-    "rxjs-compat": "^6.1.0",
+    "rxjs-compat": "^6.5.4",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {

src/angular/package.json

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { TodoComponent } from '../todo/todo.component';
-import { AdminModule } from '../admin/admin.module';
 import { TodoEditComponent } from '../todo/todo-edit/todo-edit.component';
 
 const routes: Routes = [
@@ -13,7 +12,7 @@ const routes: Routes = [
   },
   {
     path: 'adminpage',
-    loadChildren: () => AdminModule
+    loadChildren: () => import('../admin/admin.module').then(m => m.AdminModule),
   },
   {
     path: 'todopage',
@@ -27,4 +26,4 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }

src/angular/src/app/app-routing/app-routing.module.ts

@@ -6,7 +6,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { AppStoreModule } from './store/app-store.module';
 import { ServicesModule } from './services/services.module';
-import { NgbModule, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule, NgbDateAdapter, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CompModule } from './comp/comp.module';
@@ -15,6 +15,7 @@ import { TodoModule } from './todo/todo.module';
 import { AppRoutingModule } from './app-routing/app-routing.module';
 import { AdminModule } from './admin/admin.module';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { CustomDateParser } from './shared/custom-date-parser';
 
 @NgModule({
   declarations: [AppComponent],
@@ -37,8 +38,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
   providers: [
     {
       provide: NgbDateAdapter, useClass: CustomAdapter
+    },
+    {
+      provide: NgbDateParserFormatter, useClass: CustomDateParser
     }
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }

src/angular/src/app/app.module.ts

@@ -2,8 +2,8 @@
   <a class="navbar-brand py-0 px-3" href="#" style="">
     <img height="50px" src="assets/img/logo-ngrx.png" />
   </a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
-    aria-expanded="false" aria-label="Toggle navigation">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
+    aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
@@ -13,10 +13,10 @@
         <a class="nav-link" href="#">NgRx Data / SpringBoot</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="'todopage'">Todo</a>
+        <a class="nav-link" [routerLinkActive]="['active']" routerLink="todopage">Todo</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="'adminpage'">Admin</a>
+        <a class="nav-link" [routerLinkActive]="['active']" routerLink="adminpage">Admin</a>
       </li>
     </ul>
     <div class="float-right pr-3">

src/angular/src/app/comp/navbar/navbar.component.html

@@ -1,16 +1,19 @@
 import { Injectable } from '@angular/core';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faCheck, faBurn, faCommentAlt, faEdit, faTrash, faCheckSquare, faSquare, faUpload } from '@fortawesome/free-solid-svg-icons';
+import {
+  faCheck, faBurn, faCommentAlt, faEdit, faTrash,
+  faCheckSquare, faSquare, faUpload, faCalendar
+} from '@fortawesome/free-solid-svg-icons';
 
 @Injectable({
   providedIn: 'root'
 })
 export class UtilsService {
-  constructor(private library: FaIconLibrary) {}
+  constructor(private library: FaIconLibrary) { }
 
   initIcons(): void {
     this.library.addIcons(
-      faCheck, faBurn, faCommentAlt, faEdit, faTrash, faCheckSquare, faSquare, faUpload
+      faCheck, faBurn, faCommentAlt, faEdit, faTrash, faCheckSquare, faSquare, faUpload, faCalendar
     );
   }
 }

src/angular/src/app/services/utils.service.ts

@@ -0,0 +1,28 @@
+import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+
+export class CustomDateParser extends NgbDateParserFormatter {
+
+  readonly DELIMITER = '-';
+
+  parse(value: string): NgbDateStruct {
+    let result: NgbDateStruct = null;
+    if (value) {
+      const date = value.split(this.DELIMITER);
+      result = {
+        day: parseInt(date[0], 10),
+        month: parseInt(date[1], 10),
+        year: parseInt(date[2], 10)
+      };
+    }
+    return result;
+  }
+
+  format(date: NgbDateStruct): string {
+    let result: string = null;
+    if (date) {
+      result = date.day + this.DELIMITER + date.month + this.DELIMITER + date.year;
+    }
+    return result;
+  }
+
+}

src/angular/src/app/shared/custom-date-parser.ts

@@ -2,22 +2,25 @@
   <form (ngSubmit)="saveTodo()" novalidate [formGroup]="todoForm">
     <div class="form-group">
       <label for="todoTitle">Todo title</label>
-      <input type="text" class="form-control" id="todoTitle" formControlName="title" aria-describedby="titleHelp" placeholder="Enter title">
+      <input type="text" class="form-control" id="todoTitle" formControlName="title" aria-describedby="titleHelp"
+        placeholder="Enter title">
       <small id="titleHelp" class="form-text text-muted">This is the sound of C.</small>
       <input type="hidden" formControlName="id">
     </div>
     <div class="form-group">
       <label for="todoDescription">Todo description</label>
-      <input type="text" class="form-control" id="todoDescription" formControlName="description" placeholder="Enter description">
+      <input type="text" class="form-control" id="todoDescription" formControlName="description"
+        placeholder="Enter description">
     </div>
     <div class="form-group">
       <label for="">Date due</label>
       <div class="input-group">
-
-        <input class="form-control" placeholder="yyyy-mm-dd"
-               name="dp" formControlName="dateTodo" ngbDatepicker #d="ngbDatepicker">
+        <input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="dateTodo" ngbDatepicker
+          #d="ngbDatepicker">
         <div class="input-group-append">
-          <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
+          <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button">
+            <fa-icon icon="calendar"></fa-icon>
+          </button>
         </div>
       </div>
     </div>
@@ -34,6 +37,7 @@
     </div>
 
     <button type="submit" class="btn btn-primary" [disabled]="todoForm.invalid || todoForm.pristine">
-      <fa-icon icon="check"></fa-icon> Submit</button>
+      <fa-icon icon="check"></fa-icon> Submit
+    </button>
   </form>
 </div>