Skip to content

Commit df0b77c

Browse files
sumitparakhsumitparakh
committed
feat(ui): interface generate support added
ui generate Fixes #5
1 parent de08554 commit df0b77c

File tree

6 files changed

+166
-14
lines changed

6 files changed

+166
-14
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ export class CliService {
4646
key !== 'class-name' &&
4747
key !== 'directive-name' &&
4848
key !== 'enum-name' &&
49+
key !== 'interface-name' &&
50+
key !== 'interface-type' &&
4951
key !== 'app'
5052
)
5153
.map(key => `--${key}=${values[key]}`)

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,13 @@ <h6 class="sub-title">Configure other flags for the create command</h6>
106106
<app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
107107

108108
<h3 class="title" style="padding-bottom:5px;">
109-
<mat-checkbox [disabled]="false">&nbsp;Interface</mat-checkbox>
109+
<mat-checkbox [disabled]="false" [checked]="generateConfig.interface">&nbsp;Interface</mat-checkbox>
110110
</h3>
111111
<!-- <mat-icon>settings</mat-icon> -->
112112
<h6 class="sub-title">Configure other flags for the create command</h6>
113+
<main class="content">
114+
<app-generate-interface [index]="i" [form]="form" (onInterfaceAdded)="addInterface($event)" (onInterfaceRemoved)="removeInterface($event,index)"></app-generate-interface>
115+
</main>
113116
</app-drop-down>
114117

115118
<!-- Generate a module -->
@@ -184,10 +187,10 @@ <h6 class="sub-title">View command history and logs</h6>
184187

185188
<section>
186189
<p class="button-container">
187-
<button mat-raised-button color="warn" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive && !generateConfig.enum)" (click)="stop()">
190+
<button mat-raised-button color="warn" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive && !generateConfig.enum && !generateConfig.interface)" (click)="stop()">
188191
<mat-icon>stop</mat-icon> Stop
189192
</button>
190-
<button mat-raised-button color="primary" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive && !generateConfig.enum)" (click)="generate()">
193+
<button mat-raised-button color="primary" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive && !generateConfig.enum && !generateConfig.interface)" (click)="generate()">
191194
<mat-icon>play_circle_outline</mat-icon> Generate
192195
</button>
193196
</p>

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

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
1212

1313
form: FormGroup;
1414

15-
generateConfig: any = { component: false, class: false, directive: false, enum: false };
15+
generateConfig: any = { component: false, class: false, directive: false, enum: false, interface: false };
1616

1717
constructor(public cli: CliService) {
1818
super();
@@ -72,6 +72,16 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
7272
this.form.controls.enums['controls'] = [];
7373
this.generateConfig.enum = false;
7474
}
75+
76+
// Generate interfaces if all required fields are entered.
77+
if (this.isValid(this.form.controls.interfaces)) {
78+
const interfaceFormGroups: FormGroup[] = this.form.controls.interfaces['controls'];
79+
interfaceFormGroups.forEach(async interfaceGroup => {
80+
await new Promise(resolve => setTimeout(resolve, 0, this.generateInterface(interfaceGroup)));
81+
});
82+
this.form.controls.interfaces['controls'] = [];
83+
this.generateConfig.interface = false;
84+
}
7585
}
7686

7787
/**
@@ -160,13 +170,42 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
160170
/**
161171
* Generate Enums
162172
*/
163-
generateEnum(directive: FormGroup) {
173+
generateEnum(_enum: FormGroup) {
164174
return new Promise((resolve, reject) => {
165175
this.isWorking = true;
166176
this.cli
167177
.runNgCommand(
168-
`generate enum ${directive.value['enum-name']} ${this.cli.serialize(
169-
directive.value)}`,
178+
`generate enum ${_enum.value['enum-name']} ${this.cli.serialize(
179+
_enum.value)}`,
180+
this.form.value['root-dir'] + '/' + this.form.value['app-name'])
181+
.subscribe((data: any) => {
182+
this.isWorking = false;
183+
184+
if (data.stderr) {
185+
this.onStdErr.next(data.stderr);
186+
reject(data);
187+
} else {
188+
if (data.exit === 0) {
189+
resolve(data);
190+
} else {
191+
this.onStdOut.next(data.stdout);
192+
}
193+
}
194+
});
195+
});
196+
}
197+
198+
/**
199+
* Generate Interfaces
200+
*/
201+
generateInterface(_interface: FormGroup) {
202+
return new Promise((resolve, reject) => {
203+
this.isWorking = true;
204+
const interfaceType = _interface.value['interface-type'] ? _interface.value['interface-type'] : '';
205+
this.cli
206+
.runNgCommand(
207+
`generate interface ${_interface.value['interface-name']} ${interfaceType} ${this.cli.serialize(
208+
_interface.value)}`,
170209
this.form.value['root-dir'] + '/' + this.form.value['app-name'])
171210
.subscribe((data: any) => {
172211
this.isWorking = false;
@@ -216,6 +255,14 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
216255
console.log(this.generateConfig);
217256
});
218257
}
258+
259+
addInterface(_interface: FormGroup) {
260+
_interface.valueChanges.subscribe((data: any) => {
261+
this.generateConfig.interface = this.isValid(this.form.controls.interfaces);
262+
console.log(this.generateConfig);
263+
});
264+
}
265+
219266
/**
220267
* Event handler of onComponentRemoved Event.
221268
* It checks total number of valid components after a component is removed and enable generate form accordingly
@@ -240,6 +287,10 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
240287
this.generateConfig.enum = this.isValid(this.form.controls.enums);
241288
}
242289

290+
removeInterface(index) {
291+
this.generateConfig.interface = this.isValid(this.form.controls.interfaces);
292+
}
293+
243294
/**
244295
* Check if required fields of all added components are filled and then check/uncheck checkbox accordingly
245296
*/

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.interface-form mat-form-field {
2+
width: 100%
3+
}
4+
5+
mat-action-row {
6+
border: none;
7+
}

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

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,61 @@
1-
<p>
2-
interface works!
1+
<p *ngIf="form.get('interfaces').controls.length === 0">
2+
Please add interface to continue
33
</p>
4+
<app-drop-down *ngFor="let interface of form.get('interfaces').controls; let i = index">
5+
<h3 class="title component-title">
6+
<span>
7+
{{ interface.value['interface-name'] ? interface.value['interface-name'] : 'Interface '+(i+1) }}
8+
</span>
9+
</h3>
10+
<h6 class="sub-title">Interface</h6>
11+
<main class="content" [formGroup]="interface">
12+
13+
<div class="interface-form">
14+
<p>
15+
<mat-form-field>
16+
<input formControlName="interface-name" matInput placeholder="The name of the new interface."
17+
required>
18+
<mat-hint align="start">The name of the new interface.</mat-hint>
19+
</mat-form-field>
20+
</p>
21+
<p>
22+
<mat-form-field>
23+
<input formControlName="interface-type" matInput placeholder="Adds a developer-defined type to the filename, in the format 'name.type.ts'.">
24+
<mat-hint align="start">Adds a developer-defined type to the filename, in the format "name.type.ts".</mat-hint>
25+
</mat-form-field>
26+
</p>
27+
<p>
28+
<mat-form-field>
29+
<input formControlName="prefix" matInput placeholder="A prefix to apply to generated selectors.">
30+
<mat-hint align="start">A prefix to apply to generated selectors.</mat-hint>
31+
</mat-form-field>
32+
</p>
33+
<p>
34+
<mat-form-field>
35+
<input formControlName="project" matInput placeholder="The name of the project">
36+
<mat-hint align="start">The name of the project</mat-hint>
37+
</mat-form-field>
38+
</p>
39+
<p>
40+
<mat-list>
41+
<mat-list-item>
42+
<mat-checkbox formControlName="lint-fix">When true, applies lint fixes after generating the directive.</mat-checkbox>
43+
</mat-list-item>
44+
</mat-list>
45+
</p>
46+
</div>
47+
</main>
48+
<div class="action">
49+
<button mat-icon-button type="button" (click)="removeInterface(i);">
50+
<mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
51+
</button>
52+
</div>
53+
54+
</app-drop-down>
55+
<mat-action-row>
56+
<button mat-mini-fab color="primary" type="button" (click)="addNewInterface($event)">
57+
<i class="material-icons action">
58+
add
59+
</i>
60+
</button>
61+
</mat-action-row>

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

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,46 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
2+
import { FormGroup, FormControl, Validators } from '@angular/forms';
23

34
@Component({
4-
selector: 'app-interface',
5+
selector: 'app-generate-interface',
56
templateUrl: './interface.component.html',
67
styleUrls: ['./interface.component.css']
78
})
8-
export class InterfaceComponent implements OnInit {
9+
export class InterfaceComponent {
910

10-
constructor() { }
11+
@Input()
12+
public form: FormGroup;
1113

12-
ngOnInit() {
14+
@Input()
15+
public index: number;
16+
17+
@Output()
18+
onInterfaceAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
19+
20+
@Output()
21+
onInterfaceRemoved: EventEmitter<any> = new EventEmitter<any>();
22+
23+
formControls: FormControl[];
24+
25+
static buildInterfaceForm() {
26+
return new FormGroup({
27+
'interface-name': new FormControl('', Validators.required),
28+
'interface-type': new FormControl(''),
29+
'prefix': new FormControl(''),
30+
'project': new FormControl(''),
31+
'lint-fix': new FormControl(false)
32+
});
33+
}
34+
35+
addNewInterface(event) {
36+
const formGroup = InterfaceComponent.buildInterfaceForm();
37+
this.form.controls.interfaces['controls'].push(formGroup);
38+
this.onInterfaceAdded.emit(formGroup);
39+
}
40+
41+
removeInterface(index) {
42+
this.form.controls.interfaces['controls'].splice(index, 1);
43+
this.onInterfaceRemoved.emit(index);
1344
}
1445

1546
}

0 commit comments

Comments
 (0)