feat(ui): generate feature for enum added

ui generate

Fixes #5

Author: sumitparakh

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

@@ -45,6 +45,7 @@ export class CliService {
           key !== 'component-name' &&
           key !== 'class-name' && 
           key !== 'directive-name' && 
+          key !== 'enum-name' && 
           key !== 'app'
       )
       .map(key => `--${key}=${values[key]}`)

packages/klingon-ui/src/app/cli/generate/directive/directive.component.ts

@@ -6,7 +6,7 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
   templateUrl: './directive.component.html',
   styleUrls: ['./directive.component.css']
 })
-export class DirectiveComponent implements OnInit {
+export class DirectiveComponent {
 
   @Input()
   public form: FormGroup;
@@ -36,11 +36,6 @@ export class DirectiveComponent implements OnInit {
     });
   }
 
-  constructor() { }
-
-  ngOnInit() {
-  }
-
   addNewDirective(event) {
     const formGroup = DirectiveComponent.buildDirectiveForm();
     this.form.controls.directives['controls'].push(formGroup);

packages/klingon-ui/src/app/cli/generate/enum/enum.component.css

@@ -0,0 +1,7 @@
+.enum-form mat-form-field {
+    width: 100%
+  }
+
+  mat-action-row {
+    border: none;
+  }

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

@@ -1,3 +1,49 @@
-<p>
-  enum works!
+<p *ngIf="form.get('enums').controls.length === 0">
+  Please add enum to continue
 </p>
+<app-drop-down *ngFor="let enum of form.get('enums').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ enum.value['enum-name'] ? enum.value['enum-name'] : 'Enum '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Enum</h6>
+  <main class="content" [formGroup]="enum">
+
+    <div class="enum-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="enum-name" matInput placeholder="The name of the new enum."
+            required>
+          <mat-hint align="start">The name of the new enum.</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-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="lint-fix">When true, applies lint fixes after generating the directive.</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeEnum(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)="addNewEnum($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>

packages/klingon-ui/src/app/cli/generate/enum/enum.component.ts

@@ -1,15 +1,44 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 @Component({
-  selector: 'app-enum',
+  selector: 'app-generate-enum',
   templateUrl: './enum.component.html',
   styleUrls: ['./enum.component.css']
 })
-export class EnumComponent implements OnInit {
+export class EnumComponent {
 
-  constructor() { }
+  @Input()
+  public form: FormGroup;
 
-  ngOnInit() {
+  @Input()
+  public index: number;
+
+  @Output()
+  onEnumAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onEnumRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  static buildEnumForm() {
+    return new FormGroup({
+      'enum-name': new FormControl('', Validators.required),
+      'project': new FormControl(''),
+      'lint-fix': new FormControl(false)
+    });
+  }
+  
+  addNewEnum(event) {
+    const formGroup = EnumComponent.buildEnumForm();
+    this.form.controls.enums['controls'].push(formGroup);
+    this.onEnumAdded.emit(formGroup);
+  }
+
+  removeEnum(index) {
+    this.form.controls.enums['controls'].splice(index, 1);
+    this.onEnumRemoved.emit(index);
   }
 
 }

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

@@ -83,10 +83,13 @@ <h6 class="sub-title">Configure other flags for the create command</h6>
   <app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
 
     <h3 class="title" style="padding-bottom:5px;">
-      <mat-checkbox [disabled]="false">&nbsp;Enum</mat-checkbox>
+      <mat-checkbox [disabled]="false" [checked]="generateConfig.enum">&nbsp;Enum</mat-checkbox>
     </h3>
     <!-- <mat-icon>settings</mat-icon> -->
     <h6 class="sub-title">Configure other flags for the create command</h6>
+    <main class="content">
+      <app-generate-enum [index]="i" [form]="form" (onEnumAdded)="addEnum($event)" (onEnumRemoved)="removeEnum($event,index)"></app-generate-enum>
+    </main>
   </app-drop-down>
 
   <!-- Generate a guard -->
@@ -181,10 +184,10 @@ <h6 class="sub-title">View command history and logs</h6>
 
   <section>
     <p class="button-container">
-      <button mat-raised-button color="warn" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive)" (click)="stop()">
+      <button mat-raised-button color="warn" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive && !generateConfig.enum)" (click)="stop()">
         <mat-icon>stop</mat-icon> Stop
       </button>
-      <button mat-raised-button color="primary" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive)" (click)="generate()">
+      <button mat-raised-button color="primary" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive && !generateConfig.enum)" (click)="generate()">
         <mat-icon>play_circle_outline</mat-icon> Generate
       </button>
     </p>

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

@@ -12,7 +12,7 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
 
   form: FormGroup;
 
-  generateConfig: any = { component: false, class: false, directive: false };
+  generateConfig: any = { component: false, class: false, directive: false, enum: false };
 
   constructor(public cli: CliService) {
     super();
@@ -62,6 +62,16 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
       this.form.controls.directives['controls'] = [];
       this.generateConfig.directive = false;
     }
+
+    // Generate enums if all required fields are entered.
+    if (this.isValid(this.form.controls.enums)) {
+      const enumFormGroups: FormGroup[] = this.form.controls.enums['controls'];
+      enumFormGroups.forEach(async enumGroup => {
+        await new Promise(resolve => setTimeout(resolve, 0, this.generateEnum(enumGroup)));
+      });
+      this.form.controls.enums['controls'] = [];
+      this.generateConfig.enum = false;
+    }
   }
 
   /**
@@ -120,7 +130,7 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
   }
 
   /**
-   * Generate Classes
+   * Generate Directives
    */
   generateDirective(directive: FormGroup) {
     return new Promise((resolve, reject) => {
@@ -147,6 +157,34 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
     });
   }
 
+  /**
+   * Generate Enums
+   */
+  generateEnum(directive: FormGroup) {
+    return new Promise((resolve, reject) => {
+      this.isWorking = true;
+      this.cli
+        .runNgCommand(
+          `generate enum ${directive.value['enum-name']} ${this.cli.serialize(
+            directive.value)}`,
+          this.form.value['root-dir'] + '/' + this.form.value['app-name'])
+        .subscribe((data: any) => {
+          this.isWorking = false;
+
+          if (data.stderr) {
+            this.onStdErr.next(data.stderr);
+            reject(data);
+          } else {
+            if (data.exit === 0) {
+              resolve(data);
+            } else {
+              this.onStdOut.next(data.stdout);
+            }
+          }
+        });
+    });
+  }
+
   /**
    * Event handler of onComponentAdded Event.
    *
@@ -172,6 +210,12 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
     });
   }
 
+  addEnum(_enum: FormGroup) {
+    _enum.valueChanges.subscribe((data: any) => {
+      this.generateConfig.enum = this.isValid(this.form.controls.enums);
+      console.log(this.generateConfig);
+    });
+  }
   /**
    * Event handler of onComponentRemoved Event.
    * It checks total number of valid components after a component is removed and enable generate form accordingly
@@ -192,6 +236,10 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
     this.generateConfig.directive = this.isValid(this.form.controls.directives);
   }
 
+  removeEnum(index) {
+    this.generateConfig.enum = this.isValid(this.form.controls.enums);
+  }
+
   /**
    * Check if required fields of all added components are filled and then check/uncheck checkbox accordingly
    */