Feature: Lazy loading

Lazy loaded everything
TODO: The cash flow module when clicking on sub-links, it reloads the whole page, it needs to be diagnosed and fixed, this problem also exists in the other modules
TODO: Rename folders and modules such as account to accounts to match the url

overlord/src/app/employee/employee-detail/employee-detail.component.ts

@@ -8,7 +8,7 @@ import * as moment from 'moment';
 import {ToasterService} from '../../core/toaster.service';
 import {EmployeeService} from '../employee.service';
 import {Employee} from '../employee';
-import {CostCentre} from '../../cost-centre/cost-centre';
+import {CostCentre} from '../../core/cost-centre';
 import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
 
 @Component({
@@ -87,7 +87,7 @@ export class EmployeeDetailComponent implements OnInit, AfterViewInit {
       .subscribe(
         (result) => {
           this.toaster.show('Success', '');
-          this.router.navigateByUrl('/Employees');
+          this.router.navigateByUrl('/employees');
         },
         (error) => {
           this.toaster.show('Danger', error.error);
@@ -100,7 +100,7 @@ export class EmployeeDetailComponent implements OnInit, AfterViewInit {
       .subscribe(
         (result) => {
           this.toaster.show('Success', '');
-          this.router.navigateByUrl('/Employees');
+          this.router.navigateByUrl('/employees');
         },
         (error) => {
           this.toaster.show('Danger', error.error);

overlord/src/app/employee/employee-list/employee-list.component.html

@@ -4,7 +4,7 @@
     <button mat-button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
       <mat-icon>save_alt</mat-icon>
     </button>
-    <a mat-button [routerLink]="['/Employee']">
+    <a mat-button [routerLink]="['/employees', 'new']">
       <mat-icon>add_box</mat-icon>
       Add
     </a>
@@ -29,7 +29,7 @@
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"><a [routerLink]="['/Employee', row.id]">{{row.name}}</a></mat-cell>
+        <mat-cell *matCellDef="let row"><a [routerLink]="['/employees', row.id]">{{row.name}}</a></mat-cell>
       </ng-container>
 
       <!-- Designation Column -->

overlord/src/app/employee/employee-routing.module.ts

@@ -12,7 +12,7 @@ import {CostCentreListResolver} from '../cost-centre/cost-centre-list-resolver.s
 
 const employeeRoutes: Routes = [
   {
-    path: 'Employees',
+    path: '',
     component: EmployeeListComponent,
     canActivate: [AuthGuard],
     data: {
@@ -23,7 +23,7 @@ const employeeRoutes: Routes = [
     }
   },
   {
-    path: 'Employee',
+    path: 'new',
     component: EmployeeDetailComponent,
     canActivate: [AuthGuard],
     data: {
@@ -35,7 +35,7 @@ const employeeRoutes: Routes = [
     }
   },
   {
-    path: 'Employee/:id',
+    path: ':id',
     component: EmployeeDetailComponent,
     canActivate: [AuthGuard],
     data: {

overlord/src/app/employee/employee.module.ts

@@ -7,7 +7,7 @@ import {EmployeeRoutingModule} from './employee-routing.module';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatOptionModule } from '@angular/material/core';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatOptionModule} from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
@@ -20,6 +20,19 @@ import { MatTableModule } from '@angular/material/table';
 import {CdkTableModule} from '@angular/cdk/table';
 import {ReactiveFormsModule} from '@angular/forms';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {MomentDateAdapter} from "@angular/material-moment-adapter";
+
+export const MY_FORMATS = {
+  parse: {
+    dateInput: 'DD-MMM-YYYY',
+  },
+  display: {
+    dateInput: 'DD-MMM-YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'DD-MMM-YYYY',
+    monthYearA11yLabel: 'MMM YYYY',
+  },
+};
 
 @NgModule({
   imports: [
@@ -45,6 +58,10 @@ import {FlexLayoutModule} from '@angular/flex-layout';
   declarations: [
     EmployeeListComponent,
     EmployeeDetailComponent
+  ],
+  providers: [
+    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
+    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
   ]
 })
 export class EmployeeModule {

overlord/src/app/employee/employee.service.ts

@@ -9,7 +9,7 @@ const httpOptions = {
   headers: new HttpHeaders({'Content-Type': 'application/json'})
 };
 
-const url = '/api/Employee';
+const url = '/api/employees';
 const serviceName = 'EmployeeService';
 
 @Injectable({providedIn: 'root'})
@@ -19,7 +19,7 @@ export class EmployeeService {
   }
 
   get(id: string): Observable<Employee> {
-    const getUrl: string = (id === null) ? url : `${url}/${id}`;
+    const getUrl: string = (id === null) ? `${url}/new` : `${url}/${id}`;
     return <Observable<Employee>>this.http.get<Employee>(getUrl)
       .pipe(
         catchError(this.log.handleError(serviceName, `get id=${id}`))
@@ -35,7 +35,7 @@ export class EmployeeService {
   }
 
   save(employee: Employee): Observable<Employee> {
-    return <Observable<Employee>>this.http.post<Employee>(url, employee, httpOptions)
+    return <Observable<Employee>>this.http.post<Employee>(`${url}/new`, employee, httpOptions)
       .pipe(
         catchError(this.log.handleError(serviceName, 'save'))
       );

overlord/src/app/employee/employee.ts

@@ -1,4 +1,4 @@
-import {CostCentre} from '../cost-centre/cost-centre';
+import {CostCentre} from '../core/cost-centre';
 
 export class Employee {
   id: string;