✨ Update app with new style and upgrade angular to v17

.github/workflows/node.js.yml

@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 20.x
           cache: "npm"
 
       - name: Build dist

.gitignore

@@ -6,6 +6,7 @@
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
+/.angular
 
 # dependencies
 /node_modules

README.md

@@ -1,6 +1,6 @@
 # RESTHeart-ng-demo
 
-An example Angular 12 webapp that uses [RESTHeart](https://restheart.org), the REST API for MongoDB.
+An example Angular Web App that uses [RESTHeart](https://restheart.org).
 
 This app is online at [https://ng-demo.restheart.org](https://ng-demo.restheart.org).
 

angular.json

@@ -51,18 +51,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo:build"
+            "buildTarget": "demo:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "buildTarget": "demo:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo:build"
+            "buildTarget": "demo:build"
           }
         },
         "test": {
@@ -119,7 +119,6 @@
       }
     }
   },
-  "defaultProject": "demo",
   "cli": {
     "analytics": false
   }

package.json

@@ -1,56 +1,44 @@
 {
-  "name": "restheart-ng-demo",
-  "version": "0.1.0",
-  "author": "SoftInstigate <[email protected]> (https://softinstigate.com)",
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "12.1.2",
-    "@angular/common": "12.1.2",
-    "@angular/core": "12.1.2",
-    "@angular/compiler": "12.1.2",
-    "@angular/forms": "12.1.2",
-    "@angular/platform-browser": "12.1.2",
-    "@angular/platform-browser-dynamic": "12.1.2",
-    "@angular/router": "12.1.2",
-    "bootstrap": "~4.1.1",
-    "core-js": "~2.5.5",
-    "jquery": "~3.3.1",
-    "popper.js": "^1.14.3",
-    "rxjs": "~6.6.7",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
-  },
-  "scripts": {
-    "ng": "./node_modules/@angular/cli/bin/ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "browserslist": [
-    "defaults",
-    "not IE 11",
-    "maintained node versions"
-  ],
-  "devDependencies": {
-    "@angular-devkit/build-angular": "12.1.2",
-    "@angular/cli": "12.1.2",
-    "@angular/compiler": "12.1.2",
-    "@angular/compiler-cli": "12.1.2",
-    "@types/jasmine": "~3.6.0",
-    "@types/node": "^12.20.16",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": ">=3.8",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.1.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.2.3"
-  }
-}
+    "name": "restheart-simple-angular-app",
+    "version": "0.0.0",
+    "private": true,
+    "license": "Apache-2.0",
+    "dependencies": {
+      "@angular/animations": "^17.0.8",
+      "@angular/common": "^17.0.8",
+      "@angular/compiler": "^17.0.8",
+      "@angular/core": "^17.0.8",
+      "@angular/forms": "^17.0.8",
+      "@angular/platform-browser": "^17.0.8",
+      "@angular/platform-browser-dynamic": "^17.0.8",
+      "@angular/router": "^17.0.8",
+      "@popperjs/core": "^2.11.8",
+      "@types/jasmine": "^5.1.4",
+      "@types/node": "^20.10.6",
+      "bootstrap": "^5.3.2",
+      "core-js": "^3.35.0",
+      "jquery": "^3.7.1",
+      "popper.js": "^1.16.1",
+      "rxjs": "^7.8.1",
+      "tslib": "^2.6.2",
+      "zone.js": "^0.14.2"
+    },
+    "scripts": {
+      "ng": "ng",
+      "start": "ng serve",
+      "build": "ng build",
+      "test": "ng test",
+      "lint": "ng lint",
+      "e2e": "ng e2e"
+    },
+    "devDependencies": {
+      "@angular-devkit/build-angular": "~17.0.9",
+      "@angular/cli": "~17.0.9",
+      "@angular/compiler-cli": "~17.0.8",
+      "@types/node": "^20.10.6",
+      "protractor": "~7.0.0",
+      "ts-node": "~10.9.2",
+      "tslint": "~6.1.3",
+      "typescript": "5.2"
+    }
+  }

src/app/app.component.css

@@ -1,3 +1,8 @@
 p {
-  font-family: Lato;
-}
+    font-family: Lato;
+  }
+
+  .mw-800 {
+    max-width: 800px;
+  }
+

src/app/app.component.html

@@ -1,46 +1,84 @@
-<div class="container" *ngIf="(data|async) as _data">
-    <strong>restheart @ https://demo.restheart.org/messages</strong>
-
-    <table class="table table-striped table-sm table-hover mt-4">
+<div class="container mt-2" *ngIf="data | async as _data">
+    <strong
+      >{{ (size | async)?._size }} messages posted to restheart &#64;
+      https://demo.restheart.org/messages so far...</strong
+    >
+
+    <form class="mt-2 row g-3 align-items-center mw-800 mx-auto">
+      <div class="col-12">
+        <label for="from">From</label>
+        <input
+          name="from"
+          id="from"
+          [(ngModel)]="newMsg.from"
+          class="form-control"
+          placeholder="Your nickname"
+        />
+      </div>
+      <div class="col-12">
+        <label for="message">Message</label>
+        <textarea
+          id="message"
+          name="message"
+          [(ngModel)]="newMsg.message"
+          class="form-control"
+          placeholder="RESTHeart rocks!"
+          rows="3"
+        ></textarea>
+      </div>
+      <div class="col-4 ms-auto">
+        <button
+          type="button"
+          class="btn btn-primary form-control"
+          (click)="postMessage()"
+          [disabled]="!newMsg.message || !newMsg.from"
+        >
+          Post message
+        </button>
+      </div>
+    </form>
+
+    <table class="table table-striped table-hover mt-4">
       <thead class="thead-inverse">
         <tr>
-          <th>{{(size|async)?._size}} messages</th>
-          <th>from</th>
-          <th>message</th>
-          <th>raw data</th>
+          <th>From</th>
+          <th>Message</th>
+          <th>Date</th>
+          <th>Raw document</th>
         </tr>
       </thead>
-      <tbody >
-        <tr>
-          <td><button type="button" class="btn btn-primary btn-sm" (click)="postMessage()">Post message</button></td>
-          <td><input [(ngModel)]="newMessage.from"></td>
-          <td><input [(ngModel)]="newMessage.message"></td>
-          <td class="small">{{newMessage|json}}</td>
-        </tr>
-
-        <tr *ngFor="let doc of _data; let idx = index;">
-          <th scope="row">{{(idx+1)+(page-1)*5}}</th>
-          <td *ngIf="doc.message else missingField">{{doc.from}}</td>
-          <td *ngIf="doc.message else missingField">{{doc.message}}</td>
+      <tbody>
+        <tr *ngFor="let doc of _data; let idx = index">
+          <td *ngIf="doc.from; else missingField">{{ doc.from }}</td>
+          <td *ngIf="doc.message; else missingField">{{ doc.message }}</td>
+          <td *ngIf="doc.timestamp; else missingField">
+            {{ doc.timestamp.$date | date: 'short' }}
+          </td>
           <ng-template #missingField>
-            <td class="table-danger">missing field</td>
+            <td class="text-danger">missing field</td>
           </ng-template>
-          <td class="small">{{doc|json}}</td>
+          <td class="small p-1">
+            <pre>{{ doc | json }}</pre>
+          </td>
         </tr>
       </tbody>
     </table>
     <nav>
       <ul class="pagination justify-content-center">
-        <li class="page-item" [class.disabled]="page<2">
-          <a class="page-link" href="#" tabindex="-1" (click)="pageDown()">Previous</a>
+        <li class="page-item" [class.disabled]="page < 2">
+          <a class="page-link" href="#" tabindex="-1" (click)="pageDown()"
+            >Previous</a
+          >
         </li>
         <li class="page-item active">
-          <a class="page-link" href="#">{{page}} <span class="sr-only">(current)</span></a>
+          <a class="page-link" href="#"
+            >{{ page }} <span class="sr-only">(current)</span></a
+          >
         </li>
-        <li class="page-item" [class.disabled]="page*5>=_data._size">
+        <li class="page-item" [class.disabled]="page * 5 >= _data._size">
           <a class="page-link" href="#" (click)="pageUp()">Next</a>
         </li>
       </ul>
     </nav>
-    
-  </div>
+  </div>
+

src/app/app.component.ts

@@ -1,47 +1,45 @@
 //our root app component
-import { Component, NgModule, OnInit, OnDestroy } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { Observable, tap } from 'rxjs';
 import { Service } from './service';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
   data: Observable<Array<any>>;
   size: Observable<any>;
   page: number = 1;
-
-  newMessage = { from: 'your nickname', message: 'RESTHeart rocks' };
-
-  constructor(private service: Service) { 
-  }
-
+
+  newMsg = { from: null, message: null };
+
+  constructor(private service: Service) {}
+
   load() {
-     this.size = this.service.size();
-     this.data = this.service.get(this.page);
+    this.size = this.service.size();
+    this.data = this.service.get(this.page);
   }
-  
+
   ngOnInit() {
     this.load();
   }
-  
+
   postMessage() {
-    this.service.post(this.newMessage)
-    .subscribe(resp => this.load());
+    this.service
+      .post(this.newMsg)
+      .pipe(tap(() => (this.newMsg = { from: null, message: null })))
+      .subscribe((resp) => this.load());
   }
-  
+
   pageUp() {
     this.page++;
     this.load();
   }
-  
+
   pageDown() {
     this.page--;
     this.load();
   }
-}
+}

src/index.html

@@ -1,12 +1,10 @@
 <html>
+  <head>
+    <title>RESTHeart - Angular Demo</title>
+    <link rel="icon" type="image/x-icon" href="favicon.ico?any=param" />
+  </head>
 
-<head>
-  <title>RESTHeart - Angular 12 Demo</title>
-  <link rel="icon" type="image/x-icon" href="favicon.ico?any=param">
-</head>
-
-<body>
-  <my-app>loading</my-app>
-</body>
-
-</html>
+  <body>
+    <my-app data-bs-theme="dark" class="mb-5">loading</my-app>
+  </body>
+</html>