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>
@@ -70,9 +70,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 (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

@@ -3,6 +3,8 @@ 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';
 
 @Component({
   selector: 'app-snack-bar-error',
@@ -26,7 +28,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 +52,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,19 +62,42 @@ export class SnackBarSuccessComponent {}
 export class AppComponent implements OnInit {
   selectedIndex = 0;
 
+  klingon = { generate: false };
+
   @ViewChild('appCli') appCli: CliCreateComponent;
 
   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.subscribe((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) {
+          console.log('onNgCreate event fired', response);
+          this.klingon.generate = true;
+        }
+      });
+    });
+  }
+
+  onNgCreateEvent(response: any) {
   }
 
   storeIndex(index: number) {

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

@@ -24,6 +24,7 @@ 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';
 
 @NgModule({
   declarations: [
@@ -36,7 +37,8 @@ import { environment } from '../environments/environment';
     CliTestComponent,
     LogComponent,
     SnackBarSuccessComponent,
-    SnackBarErrorComponent
+    SnackBarErrorComponent,
+    CliGenerateComponent
   ],
   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/flags/flags.component.ts

@@ -14,7 +14,8 @@ export class FlagsComponent implements OnInit {
     CREATE: 0,
     SERVE: 1,
     BUILD: 2,
-    TEST: 3
+    TEST: 3,
+    GENERATE: 4
   };
 
   @Output()
@@ -138,6 +139,28 @@ 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('', Validators.required),
+        'root-dir': new FormControl(lastUsedRootDirectory),
+        'component-name': new FormControl(''),
+        'change-detection': new FormControl(''),
+        'dryRun': new FormControl(false),
+        'entry-component': new FormControl(false),
+        'export': new FormControl(false),
+        'flat': new FormControl(false),
+        'force': new FormControl(false),
+        'module': new FormControl(''),
+        'prefix': new FormControl(''),
+        'project': new FormControl(''),
+        'selector': new FormControl(''),
+        'styleext': new FormControl(''),
+        'inline-style': new FormControl(false),
+        'inline-template': new FormControl(false),
+        'lint-fix': new FormControl(false),
+        'skip-import': new FormControl(false),
+        'spec': new FormControl(false)
+      });
     }
   }
 }