feat(experiments): added new example to showcase flex-layout with grid

.gitignore

@@ -44,4 +44,3 @@ Thumbs.db
 =======
 # Local
 todo
-backend

PLAYBOOK.md

@@ -108,8 +108,10 @@ ng update --all
 # generate webapp app
 ng g app webapp --routing --style=scss --prefix=ngx --unit-test-runner=jest --tags=app-module
 
-# generate api app
-ng g node-app api --framework=express --unit-test-runner=jest --tags=api-module --dry-run 
+# generate api app with nestjs
+ng g node-app api --framework=express --unit-test-runner=jest --tags=api-module --dry-run
+# generate backend app with express
+ng g node-app backend --framework=express --unit-test-runner=jest --tags=api-module --dry-run
 ```
 
 #### Dependencies
@@ -208,6 +210,8 @@ ng g lib grid           --routing --lazy --prefix=ngx --parent-module=libs/dashb
 ng g lib animations --module false -tags=utils --unit-test-runner=jest --dry-run 
 ng g lib Tree --module false  --publishable=true --tags=utils --unit-test-runner=jest --dry-run
 ng g lib utils --module false --tags=utils --unit-test-runner=jest --dry-run
+# system wide models
+ng g lib models --module false --tags=utils --unit-test-runner=jest --dry-run
 
 # add `core` module which will be only inported into root/app module.
 ng g lib core --prefix=ngx --tags=core-module --unit-test-runner=jest --dry-run
@@ -380,16 +384,19 @@ ng g component  containers/AccountsGridList --project=grid  --dry-run
 
 # generate containers, components for `experiments` Module
 ng g component containers/animations --project=experiments --dry-run
-ng g component containers/ContextMenu --project=experiments --dry-run
-ng g component containers/FileUpload --project=experiments --dry-run
 ng g component components/hammerCard --project=experiments --dry-run
 ng g directive components/Hammertime/Hammertime --project=experiments --dry-run
+ng g component containers/ContextMenu --project=experiments --dry-run
+ng g component containers/FileUpload --project=experiments --dry-run
 ng g component containers/virtualScroll --project=experiments --dry-run
 ng g component containers/StickyTable --project=experiments --dry-run
 ng g component containers/clapButton --project=experiments  -s  -t --spec=false  --dry-run
 ng g component containers/knobDemo --project=experiments --dry-run
 ng g component containers/ledDemo --project=experiments  --dry-run
 ng g component containers/ImageComp --project=experiments  --dry-run
+ng g component containers/layout --project=experiments --dry-run
+ng g component components/card --project=experiments --dry-run
+
 
 # generate components for `ImageComparison` Module
 ng g lib ImageComparison  --prefix=ngx --tags=public-module --spec=false --publishable=true --dry-run

apps/api/README.md

@@ -47,6 +47,9 @@ docker rm 82be5234c94a
 ```bash
 # start in watch mode
 npm run api:start:dev
+# to turn on logging for `request`
+NODE_DEBUG=request npm run api:start:dev
+DEBUG=typeorm:* npm run api:start:dev
 
 # start
 npm run api:start

apps/webapp/src/environments/environment.mock.ts

@@ -5,6 +5,7 @@ export const environment = {
   production: true,
   envName: 'mock',
 
+  DOCS_BASE_URL: 'http://localhost:8000',
   API_BASE_URL: 'http://localhost:3000/api',
   WS_EVENT_BUS_URL: 'ws://localhost:3000/eventbus',
   auth: {

apps/webapp/src/environments/environment.prod.ts

@@ -5,6 +5,7 @@ export const environment = {
   production: true,
   envName: 'prod',
 
+  DOCS_BASE_URL: 'http://localhost:8000',
   API_BASE_URL: 'http://localhost:3000/api',
   WS_EVENT_BUS_URL: 'ws://localhost:3000/eventbus',
   auth: {

apps/webapp/src/environments/environment.ts

@@ -8,6 +8,7 @@ export const environment = {
   production: false,
   envName: 'dev',
 
+  DOCS_BASE_URL: 'http://localhost:8000',
   API_BASE_URL: 'http://localhost:3000/api',
   WS_EVENT_BUS_URL: 'ws://localhost:3000/eventbus',
   auth: {

libs/core/src/lib/menu-data.ts

@@ -67,6 +67,11 @@ export const defaultMenu: MenuItem[] = [
         icon: 'directions',
         link: '/dashboard/experiments/knob',
       },
+      {
+        name: 'Layout',
+        icon: 'apps',
+        link: '/dashboard/experiments/layout',
+      },
       // {
       //   name: 'Microinteractions',
       //   icon: 'casino',

libs/experiments/src/lib/components/card/card.component.html

@@ -0,0 +1,24 @@
+<div
+  gdAreas="header header | side content | footer footer"
+  gdGap="16px"
+  gdRows="auto auto auto"
+  gdAreas.lt-md="header | side | content | footer"
+  gdRows.lt-md="auto auto auto auto"
+>
+
+  <div class="header" gdArea="header">
+    Header
+  </div>
+
+  <div class="side" gdArea="side">
+    Side
+  </div>
+
+  <div class="content" gdArea="content">
+    Content
+  </div>
+
+  <div class="footer" gdArea="footer">
+    Footer
+  </div>
+</div>

libs/experiments/src/lib/components/card/card.component.scss

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  padding: 32px;
+  border: 1px solid black;
+  border-radius: 8px;
+}
+.header {
+  background-color: #e3e3e3;
+}
+.side {
+  background-color: #e3e3ff;
+}
+.content {
+  background-color: #e3ffe3;
+}
+.footer {
+  background-color: #ffe3e3;
+}

libs/experiments/src/lib/components/card/card.component.spec.ts

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

libs/experiments/src/lib/components/card/card.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss']
+})
+export class CardComponent {
+
+  constructor() { }
+
+}

libs/experiments/src/lib/containers/clap-button/clap-button.component.ts

@@ -1,18 +1,27 @@
 import { Component, OnInit } from '@angular/core';
+import { Crumb } from '@ngx-starter-kit/breadcrumbs';
 
 @Component({
   selector: 'app-clap-button',
   template: `
-    <ngx-clap
-      [totalCounter]="totalCounter"
-      [userCounter]="userCounter"
-      (userCounterChange)="userCounter = userCounter + 1"
-    >
-    </ngx-clap>
+    <ngx-breadcrumbs title="Micro Interactions" [crumbs]="crumbs"></ngx-breadcrumbs>
+    <div class="container">
+      <ngx-clap
+        [totalCounter]="totalCounter"
+        [userCounter]="userCounter"
+        (userCounterChange)="userCounter = userCounter + 1"
+      >
+      </ngx-clap>
+    </div>
   `,
   styles: [
     `
       :host {
+        display: block;
+        padding: 1.5%;
+        position: relative;
+      }
+      .container {
         min-height: 100vh;
         display: flex;
         justify-content: center;
@@ -22,6 +31,11 @@ import { Component, OnInit } from '@angular/core';
   ],
 })
 export class ClapButtonComponent {
+  crumbs: ReadonlyArray<Crumb> = [
+    { name: 'Dashboard', link: '/dashboard' },
+    { name: 'Experiments', link: '/dashboard/experiments' },
+    { name: 'Clap Button' },
+  ];
   userCounter = 0;
 
   get totalCounter() {

libs/experiments/src/lib/containers/file-upload/file-upload.component.ts

@@ -1,11 +1,15 @@
 import { Component, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatSnackBar } from '@angular/material';
 import { Crumb } from '@ngx-starter-kit/breadcrumbs';
+import { FileUploadService } from './file-upload.service';
 
 @Component({
   selector: 'ngx-file-upload',
   templateUrl: './file-upload.component.html',
   styleUrls: ['./file-upload.component.scss'],
+  providers: [
+    FileUploadService
+  ]
 })
 export class FileUploadComponent {
   crumbs: ReadonlyArray<Crumb> = [
@@ -24,6 +28,21 @@ export class FileUploadComponent {
       const formData = new FormData();
       formData.append(fieldName, file, file.name);
       formData.append(fieldName, JSON.stringify(metadata));
+      this.uploadService.uploadFile(file, {}, 'tenant1').subscribe(
+        data => {
+          this.myPond.removeFiles();
+          this.snackBar.open(`Uploaded Successfully`, '', {
+            duration: 3000
+          });
+        },
+        err => {
+          console.error(`File Upload Error: ${err.message}`);
+          this.snackBar.open(`File Upload Error: ${err.message}`, '', {
+            duration: 3000
+          });
+        }
+      );
+
 
       // Progress indicator supported, set progress to 25% of 1
       progress(true, 0.25, 1);
@@ -102,7 +121,7 @@ export class FileUploadComponent {
     acceptedFileTypes: 'image/*, application/pdf, application/*, text/plain, text/csv, .vsd',
   };
 
-  constructor(public dialog: MatDialog) {}
+  constructor(public snackBar: MatSnackBar, private uploadService: FileUploadService) {}
 
   pondHandleInit() {
     console.log('FilePond has initialised', this.myPond);

libs/experiments/src/lib/containers/file-upload/file-upload.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { environment } from '@env/environment';
+
+
+@Injectable()
+export class FileUploadService {
+  baseUrl = environment.DOCS_BASE_URL;
+  constructor(private httpClient: HttpClient) {}
+
+  uploadFile(file, user, tenantId) {
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('tenant', tenantId);
+    formData.append('user', user);
+    const headers = new HttpHeaders();
+    return this.httpClient.post(`${this.baseUrl}/upload`, formData, { headers, responseType: 'text' });
+  }
+}

libs/experiments/src/lib/containers/image-comp/image-comp.component.html

@@ -1,3 +1,5 @@
+<ngx-breadcrumbs title="Micro Interactions" [crumbs]="crumbs"></ngx-breadcrumbs>
+
 <ngx-image-comparison startPosition="70">
   <img #comparisonImage src="assets/img/comp/1-before.jpg" alt="first image"  data-label="first">
   <img #comparisonImage src="assets/img/comp/1-after.jpg"  alt="second image" data-label="second">

libs/experiments/src/lib/containers/image-comp/image-comp.component.ts

@@ -1,11 +1,18 @@
 import { Component, OnInit } from '@angular/core';
+import { Crumb } from '@ngx-starter-kit/breadcrumbs';
 
 @Component({
   selector: 'ngx-image-comp',
   templateUrl: './image-comp.component.html',
   styleUrls: ['./image-comp.component.scss'],
 })
 export class ImageCompComponent implements OnInit {
+  crumbs: ReadonlyArray<Crumb> = [
+    { name: 'Dashboard', link: '/dashboard' },
+    { name: 'Experiments', link: '/dashboard/experiments' },
+    { name: 'Image Comp Demo' },
+  ];
+
   constructor() {}
 
   ngOnInit() {}

libs/experiments/src/lib/containers/knob-demo/knob-demo.component.html

@@ -1,3 +1,5 @@
+<ngx-breadcrumbs title="Experiments" [crumbs]="crumbs"></ngx-breadcrumbs>
+
 <div fxLayout="row wrap" fxLayout.md="column wrap" fxLayoutGap="0.5%" fxLayoutAlign="center">
 
   <div fxFlex="24%" class="card">

libs/experiments/src/lib/containers/knob-demo/knob-demo.component.ts

@@ -1,11 +1,19 @@
 import { Component, OnInit } from '@angular/core';
+import { Crumb } from '@ngx-starter-kit/breadcrumbs';
 
 @Component({
   selector: 'ngx-knob-demo',
   templateUrl: './knob-demo.component.html',
   styleUrls: ['./knob-demo.component.scss'],
 })
 export class KnobDemoComponent implements OnInit {
+
+  crumbs: ReadonlyArray<Crumb> = [
+    { name: 'Dashboard', link: '/dashboard' },
+    { name: 'Experiments', link: '/dashboard/experiments' },
+    { name: 'Knob Demo' },
+  ];
+
   value1 = 256;
   options1 = {
     startAngle: 30,

libs/experiments/src/lib/containers/layout/layout.component.html

@@ -0,0 +1,24 @@
+<ngx-breadcrumbs title="Experiments" [crumbs]="crumbs"></ngx-breadcrumbs>
+
+<div
+  fxLayout="row wrap"
+  fxLayout.lt-sm="column"
+  fxLayoutGap="32px grid">
+
+  <!-- dummy loop -->
+  <ng-container *ngFor="let _ of [1,2,3,4,5,6]">
+
+    <div fxFlex="0 1 calc(33.3% - 32px)"
+         fxFlex.lt-md="0 1 calc(50% - 32px)"
+         fxFlex.lt-sm="100%">
+      <ngx-card></ngx-card>
+      <!--TODO remove div and move fxXXX to ngx-card-->
+    </div>
+
+  </ng-container>
+</div>
+
+<br/><br/><br/>
+
+
+

libs/experiments/src/lib/containers/layout/layout.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  padding: 1.5%;
+  position: relative;
+}
+