Ported:

Guest Book

Chore:
  Added New Day Offset and Timezone Offset in settings so that they can be shared consistently and also set in runtime.

bookie/src/app/app.module.ts

@@ -25,7 +25,7 @@ import { CoreModule } from './core/core.module';
 import { ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from './shared/shared.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
 
 registerLocaleData(enIN);

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html

@@ -43,6 +43,12 @@
         <mat-cell *matCellDef="let row">{{row.pax}}</mat-cell>
       </ng-container>
 
+      <!-- Time Column -->
+      <ng-container matColumnDef="date">
+        <mat-header-cell *matHeaderCellDef>Time</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{row.date | localTime}}</mat-cell>
+      </ng-container>
+
       <!-- Action Column -->
       <ng-container matColumnDef="action">
         <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
@@ -53,7 +59,7 @@
           <button mat-icon-button [routerLink]="['/guest-book/', row.id]">
             <mat-icon>edit</mat-icon>
           </button>
-          <button mat-icon-button color="warn" (click)="deleteRow(row)">
+          <button mat-icon-button color="warn" (click)="confirmDelete(row.id)">
             <mat-icon>delete</mat-icon>
           </button>
         </mat-cell>

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import * as moment from 'moment';
-import {GuestBook, GuestBookList} from '../guest-book';
+import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ToasterService } from '../../core/toaster.service';
+import { GuestBook, GuestBookList } from '../guest-book';
 import { GuestBookService } from '../guest-book.service';
 import { GuestBookListDataSource } from './guest-book-list-datasource';
 
@@ -18,9 +21,16 @@ export class GuestBookListComponent implements OnInit {
   form: FormGroup;
   data: BehaviorSubject<GuestBook[]>;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['sno', 'name', 'phone', 'pax', 'action'];
+  displayedColumns = ['sno', 'name', 'phone', 'pax', 'date', 'action'];
 
-  constructor(private route: ActivatedRoute, private fb: FormBuilder, private ser: GuestBookService) {
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private fb: FormBuilder,
+    private dialog: MatDialog,
+    private toaster: ToasterService,
+    private ser: GuestBookService
+  ) {
     this.createForm();
     this.data = new BehaviorSubject([]);
     this.listenToDateChange();
@@ -51,4 +61,32 @@ export class GuestBookListComponent implements OnInit {
       });
     this.dataSource = new GuestBookListDataSource(this.data);
   }
+
+  delete(id: string) {
+    this.ser.delete(id)
+      .subscribe(
+        (result) => {
+          this.toaster.show('Success', '');
+          this.router.navigateByUrl('/guest-book');
+        },
+        (error) => {
+          this.toaster.show('Danger', error);
+        }
+      );
+  }
+
+  confirmDelete(id: string): void {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '250px',
+      data: {title: 'Delete Guest Book Entry?', content: 'Are you sure? This cannot be undone.'}
+    });
+
+    dialogRef.afterClosed().subscribe((result: boolean) => {
+      if (result) {
+        this.delete(id);
+      }
+    });
+  }
+
+
 }

bookie/src/app/guest-book/guest-book-routing.module.ts

@@ -16,7 +16,8 @@ const routes: Routes = [
     },
     resolve: {
       list: GuestBookListResolver
-    }
+    },
+    runGuardsAndResolvers: 'always'
   },
   {
     path: 'new',

bookie/src/app/guest-book/guest-book.module.ts

@@ -15,6 +15,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { GuestBookDetailComponent } from './guest-book-detail/guest-book-detail.component';
 import { GuestBookListComponent } from './guest-book-list/guest-book-list.component';
 import { GuestBookRoutingModule } from './guest-book-routing.module';
+import { SharedModule } from '../shared/shared.module';
 
 export const MY_FORMATS = {
   parse: {
@@ -43,7 +44,8 @@ export const MY_FORMATS = {
     MatNativeDateModule,
     ReactiveFormsModule,
     FlexLayoutModule,
-    GuestBookRoutingModule
+    GuestBookRoutingModule,
+    SharedModule
   ],
     providers: [
     {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},

bookie/src/app/guest-book/guest-book.service.ts

@@ -9,7 +9,7 @@ const httpOptions = {
   headers: new HttpHeaders({'Content-Type': 'application/json'})
 };
 
-const url = '/v1/guest-book';
+const url = '/api/guest-book';
 const serviceName = 'GuestBookService';
 
 @Injectable({providedIn: 'root'})
@@ -19,7 +19,7 @@ export class GuestBookService {
   }
 
   get(id: string): Observable<GuestBook> {
-    const getUrl: string = (id === null) ? `${url}/new` : `${url}/${id}`;
+    const getUrl: string = (id === null) ? url : `${url}/${id}`;
     return <Observable<GuestBook>>this.http.get<GuestBook>(getUrl)
       .pipe(
         catchError(this.log.handleError(serviceName, `get id=${id}`))
@@ -28,22 +28,21 @@ export class GuestBookService {
 
   list(date: string): Observable<GuestBookList> {
     const options = {params: new HttpParams().set('q', (date === null) ? '' : date)};
-    const listUrl: string = url;
-    return <Observable<GuestBookList>>this.http.get<GuestBookList>(listUrl, options)
+    return <Observable<GuestBookList>>this.http.get<GuestBookList>(`${url}/list`, options)
       .pipe(
         catchError(this.log.handleError(serviceName, 'list'))
       );
   }
 
   save(guestBook: GuestBook): Observable<GuestBook> {
-    return <Observable<GuestBook>>this.http.put<GuestBook>(`${url}/new`, guestBook, httpOptions)
+    return <Observable<GuestBook>>this.http.post<GuestBook>(url, guestBook, httpOptions)
       .pipe(
         catchError(this.log.handleError(serviceName, 'save'))
       );
   }
 
   update(guestBook: GuestBook): Observable<GuestBook> {
-    return <Observable<GuestBook>>this.http.post<GuestBook>(`${url}/${guestBook.id}`, guestBook, httpOptions)
+    return <Observable<GuestBook>>this.http.put<GuestBook>(`${url}/${guestBook.id}`, guestBook, httpOptions)
       .pipe(
         catchError(this.log.handleError(serviceName, 'update'))
       );

bookie/src/app/guest-book/guest-book.ts

@@ -6,6 +6,7 @@ export class GuestBook {
   phone: string;
   pax: number;
   address: string;
+  date: string;
 
   public constructor(init?: Partial<GuestBook>) {
     Object.assign(this, init);

bookie/src/app/shared/shared.module.ts

@@ -1,12 +1,12 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {ConfirmDialogComponent} from './confirm-dialog/confirm-dialog.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
-import {LocalTimePipe} from './local-time.pipe';
-import {ClearPipe} from './clear.pipe';
-import {AccountingPipe} from './accounting.pipe';
-import {ImageDialogComponent} from './image-dialog/image-dialog.component';
+import { LocalTimePipe } from './local-time.pipe';
+import { ClearPipe } from './clear.pipe';
+import { AccountingPipe } from './accounting.pipe';
+import { ImageDialogComponent } from './image-dialog/image-dialog.component';
 
 @NgModule({
   imports: [