feat(generate): implement UI for ng generate

packages/klingon-ui/src/app/_shared/drop-down/drop-down.component.ts

@@ -8,7 +8,7 @@ import {
   selector: 'app-drop-down',
   template: `
     <mat-accordion>
-      <mat-expansion-panel [expanded]="open" (opened)="open=true" (closed)="open=false">
+      <mat-expansion-panel [expanded]="open" [disabled]="disabled" (opened)="open=true" (closed)="open=false">
         <mat-expansion-panel-header>
           <mat-panel-title>
             <ng-content select="mat-icon"></ng-content>
@@ -17,6 +17,7 @@ import {
           <mat-panel-description *ngIf="!open">
             <ng-content select=".sub-title"></ng-content>
           </mat-panel-description>
+          <ng-content select=".action"></ng-content>
         </mat-expansion-panel-header>
         <ng-content select=".content"></ng-content>
       </mat-expansion-panel>
@@ -53,6 +54,9 @@ import {
         margin: 3px 0px 0px 0px;
         font-size: 1em;
       }
+      ::ng-deep .component-title {
+        margin: 9px 0px 0px 0px;
+      }
       ::ng-deep .sub-title {
         padding: 6px;
         margin: 0;
@@ -70,9 +74,13 @@ import {
   ]
 })
 export class DropDownComponent implements OnInit {
+
   @Input()
   open: boolean = false;
 
+  @Input()
+  disabled: boolean = false;
+
   ngOnInit() {
   }
 

packages/klingon-ui/src/app/app.component.html

@@ -35,8 +35,9 @@
         <ng-template mat-tab-label>New</ng-template>
         <app-cli-create #appCli (onStdOut)="onSuccess($event)" (onStdErr)="onError($event)"></app-cli-create>
     </mat-tab>
-    <mat-tab [disabled]="true">
+    <mat-tab [disabled]="!klingon.generate">
         <ng-template mat-tab-label>Generate</ng-template>
+        <app-cli-generate #appGenerate (onStdOut)="onSuccess($event)" (onStdErr)="onError($event)"></app-cli-generate>
     </mat-tab>
     <mat-tab>
         <ng-template mat-tab-label>Serve</ng-template>

packages/klingon-ui/src/app/app.component.ts

@@ -1,8 +1,11 @@
 import { Component, ViewChild } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
 import { CliCreateComponent } from './cli/create/create.component';
+import { CliService, CommandResult } from './cli/cli.service';
+import { Subject } from 'rxjs';
+import { flatMap } from 'rxjs/operators';
+import { CliGenerateComponent } from './cli/generate/generate.component';
 
 @Component({
   selector: 'app-snack-bar-error',
@@ -26,7 +29,7 @@ import { CliCreateComponent } from './cli/create/create.component';
   template:
     '<mat-icon>error</mat-icon><span>An error has occured. Check the logs tab.</span>'
 })
-export class SnackBarErrorComponent {}
+export class SnackBarErrorComponent { }
 
 @Component({
   selector: 'app-snack-bar-success',
@@ -50,7 +53,7 @@ export class SnackBarErrorComponent {}
   template:
     '<mat-icon>verified_user</mat-icon><span>Command executed successfully.</span>'
 })
-export class SnackBarSuccessComponent {}
+export class SnackBarSuccessComponent { }
 
 @Component({
   selector: 'app-root',
@@ -60,22 +63,51 @@ export class SnackBarSuccessComponent {}
 export class AppComponent implements OnInit {
   selectedIndex = 0;
 
+  // Enable/Disable generate tab
+  klingon = { generate: false };
+
   @ViewChild('appCli') appCli: CliCreateComponent;
+  @ViewChild('appGenerate') appGenerate: CliGenerateComponent;
 
   constructor(
     public snackBarError: MatSnackBar,
-    public snackBarSuccess: MatSnackBar
-  ) {}
+    public snackBarSuccess: MatSnackBar,
+    private cliService: CliService
+  ) { }
 
   ngOnInit() {
     this.selectedIndex = parseInt(
       localStorage.getItem('ui.selectedIndex') || '0',
       10
     );
     localStorage.setItem('ui.selectedIndex', `${this.selectedIndex}`);
+
+    this.subscribeToNgCreate();
+  }
+
+  subscribeToNgCreate() {
+    this.cliService.onNgCreate.asObservable()
+      .pipe(flatMap((data: Subject<CommandResult>) => data))
+      .subscribe((response: any) => {
+        /**
+        * exit event of ng command returns exit code (0/1). So if it returns 0, means ng command executed successfully. Only then
+        * we enable generate tab.
+        */
+        if (response.exit === 0) {
+          this.selectedIndex = 1;
+          this.klingon.generate = true;
+        }
+      });
+  }
+
+  onNgCreateEvent(response: any) {
   }
 
   storeIndex(index: number) {
+    // Set app-name from localStorage if generate tab is selected.
+    if (index === 1) {
+      this.appGenerate.form.patchValue({ 'app-name': localStorage.getItem('ui.appName') });
+    }
     localStorage.setItem('ui.selectedIndex', `${index}`);
   }
 

packages/klingon-ui/src/app/app.module.ts

@@ -24,6 +24,8 @@ import { LogComponent } from './_shared/log/log.component';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+import { CliGenerateComponent } from './cli/generate/generate.component';
+import { ComponentComponent } from './cli/generate/component/component.component';
 
 @NgModule({
   declarations: [
@@ -36,7 +38,9 @@ import { environment } from '../environments/environment';
     CliTestComponent,
     LogComponent,
     SnackBarSuccessComponent,
-    SnackBarErrorComponent
+    SnackBarErrorComponent,
+    CliGenerateComponent,
+    ComponentComponent
   ],
   entryComponents: [SnackBarSuccessComponent, SnackBarErrorComponent],
   imports: [

packages/klingon-ui/src/app/cli/cli.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, Output, EventEmitter } from '@angular/core';
 import { Subject } from 'rxjs';
 import { environment } from '../../environments/environment';
 
@@ -14,6 +14,8 @@ export class CliService {
   ws: WebSocket;
   isConnectionOn;
 
+  @Output() onNgCreate: EventEmitter<Subject<CommandResult>> = new EventEmitter<Subject<CommandResult>>();
+
   constructor() {
     this.response$ = new Subject();
     this.ws = new WebSocket(`ws://` + environment.host + `:` + environment.port + `/cli`);
@@ -40,6 +42,7 @@ export class CliService {
           key !== 'app-name' &&
           key !== 'root-dir' &&
           key !== 'dir' &&
+          key !== 'component-name' &&
           key !== 'app'
       )
       .map(key => `--${key}=${values[key]}`)
@@ -57,10 +60,29 @@ export class CliService {
   runNgCommand(stdin, dir = undefined) {
     if (this.isConnectionOn) {
       this._send(stdin, dir);
+      this.detectEvents(stdin, this.response$);
     }
     return this.response$;
   }
 
+  /**
+   * Detect ng operations such as new, serve, build, generate etc.
+   * @param stdin string
+   */
+  private detectEvents(stdin: string, response: Subject<CommandResult>) {
+    if (!stdin) {
+      return;
+    }
+
+    const commandArray = stdin.split(' ');
+
+    if (commandArray.length > 1) {
+      if (commandArray[0] === 'new') {
+        this.onNgCreate.emit(response);
+      }
+    }
+  }
+
   _send(stdin, dir) {
     console.log(stdin);
 

packages/klingon-ui/src/app/cli/create/create.component.ts

@@ -1,7 +1,5 @@
 import { FlagsComponent } from './../flags/flags.component';
 import { CliService } from './../cli.service';
-import { Validators } from '@angular/forms';
-import { FormControl } from '@angular/forms';
 import { FormGroup } from '@angular/forms';
 import { Component, OnInit } from '@angular/core';
 import { ImportService } from '../../_shared/utilities/import.service';
@@ -40,7 +38,9 @@ export class CliCreateComponent extends FlagsComponent implements OnInit {
     const rootDir = this.form.value['root-dir'];
     localStorage.setItem('ui.lastUsedRootDirectory', rootDir || '');
 
+    // save application name to local storage to reuse it in generate tab
     const appName = this.form.value['directory'] || this.form.value['app-name'];
+    localStorage.setItem('ui.appName', appName);
 
     this.isWorking = true;
     this.cli

packages/klingon-ui/src/app/cli/flags/flags.component.ts

@@ -1,4 +1,4 @@
-import { Validators } from '@angular/forms';
+import { Validators, FormArray } from '@angular/forms';
 import { FormControl } from '@angular/forms';
 import { FormGroup } from '@angular/forms';
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@@ -14,7 +14,8 @@ export class FlagsComponent implements OnInit {
     CREATE: 0,
     SERVE: 1,
     BUILD: 2,
-    TEST: 3
+    TEST: 3,
+    GENERATE: 4
   };
 
   @Output()
@@ -49,6 +50,8 @@ export class FlagsComponent implements OnInit {
       'ui.lastUsedRootDirectory'
     );
 
+    const appName = localStorage.getItem('ui.appName');
+
     if (flag === FlagsComponent.Flags.CREATE) {
       return new FormGroup({
         'app-name': new FormControl('', Validators.required),
@@ -138,6 +141,25 @@ export class FlagsComponent implements OnInit {
         sourcemap: new FormControl(true),
         watch: new FormControl(false)
       });
+    } else if (flag === FlagsComponent.Flags.GENERATE) {
+      return new FormGroup({
+        'app-name': new FormControl(appName, Validators.required),
+        'root-dir': new FormControl(lastUsedRootDirectory),
+        components: new FormArray([]),
+        serviceworkers: new FormArray([]),
+        applications: new FormArray([]),
+        classes: new FormArray([]),
+        directives: new FormArray([]),
+        enums: new FormArray([]),
+        guards: new FormArray([]),
+        interfaces: new FormArray([]),
+        modules: new FormArray([]),
+        pipes: new FormArray([]),
+        services: new FormArray([]),
+        universals: new FormArray([]),
+        appshells: new FormArray([]),
+        libraries: new FormArray([])
+      });
     }
   }
 }

packages/klingon-ui/src/app/cli/generate/component/component.component.html

@@ -0,0 +1,115 @@
+<p *ngIf="form.get('components').controls.length === 0">
+  Please add component to continue
+</p>
+<app-drop-down *ngFor="let component of form.get('components').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ component.value['component-name'] ? component.value['component-name'] : 'Component '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Application Component</h6>
+  <main class="content" [formGroup]="component">
+
+    <div class="component-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="component-name" matInput placeholder="Name of the component to create in the app"
+            required>
+          <mat-hint align="start">Name of the component to create in the app</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-select formControlName="change-detection" placeholder="Specify change detection strategy for component (-c)">
+            <mat-option *ngFor="let value of changeDetection" [value]="value">
+              {{value}}
+            </mat-option>
+          </mat-select>
+          <mat-hint align="start">Specify change detection strategy for component</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-select formControlName="styleext" placeholder="The file extension to be used for style files.">
+            <mat-option *ngFor="let style of styleExt" [value]="style">
+              {{ style }}
+            </mat-option>
+          </mat-select>
+          <mat-hint align="start">The file extension to be used for style files.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="module" matInput placeholder="Allows specification of the declaring module. (-m)">
+          <mat-hint align="start">Allows specification of the declaring module. (-m)</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="prefix" matInput placeholder="The prefix to apply to generated selectors. (-p)">
+          <mat-hint align="start">The prefix to apply to generated selectors. (-p)</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project">
+          <mat-hint align="start">The name of the project</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="selector" matInput placeholder="Selector">
+          <mat-hint align="start">The selector to use for the component.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="dryRun">Run through without making any changes. (-d)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="entry-component">Entry component</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="export">Specifies if declaring module exports the component.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="flat">Flag to indicate if a dir is created.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="force">Forces overwriting of files. (-f)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="inline-style">Specifies if the style will be in the ts file. (-s)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="inline-template">Specifies if the template will be in the ts file. (-t)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="lint-fix">Specifies whether to apply lint fixes after generating the
+              component.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="skip-import">Flag to skip the module import.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="spec">Specifies if a spec file is generated.</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeComponent(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewComponent($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>