Skip to content

Commit e9d202c

Browse files
sumitparakhsumitparakh
committed
feat(ui) module generate feature added
ui generate Fixes #5
1 parent df0b77c commit e9d202c

File tree

6 files changed

+170
-11
lines changed

6 files changed

+170
-11
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export class CliService {
4848
key !== 'enum-name' &&
4949
key !== 'interface-name' &&
5050
key !== 'interface-type' &&
51+
key !== 'module-name' &&
5152
key !== 'app'
5253
)
5354
.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
@@ -119,10 +119,13 @@ <h6 class="sub-title">Configure other flags for the create command</h6>
119119
<app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
120120

121121
<h3 class="title" style="padding-bottom:5px;">
122-
<mat-checkbox [disabled]="false">&nbsp;Module</mat-checkbox>
122+
<mat-checkbox [disabled]="false" [checked]="generateConfig.module">&nbsp;Module</mat-checkbox>
123123
</h3>
124124
<!-- <mat-icon>settings</mat-icon> -->
125125
<h6 class="sub-title">Configure other flags for the create command</h6>
126+
<main class="content">
127+
<app-generate-module [index]="i" [form]="form" (onModuleAdded)="addModule($event)" (onModuleRemoved)="removeModule($event,index)"></app-generate-module>
128+
</main>
126129
</app-drop-down>
127130

128131
<!-- Generate a pipe -->
@@ -187,10 +190,10 @@ <h6 class="sub-title">View command history and logs</h6>
187190

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

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

Lines changed: 51 additions & 1 deletion
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, interface: false };
15+
generateConfig: any = { component: false, class: false, directive: false, enum: false, interface: false, module: false };
1616

1717
constructor(public cli: CliService) {
1818
super();
@@ -82,6 +82,17 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
8282
this.form.controls.interfaces['controls'] = [];
8383
this.generateConfig.interface = false;
8484
}
85+
86+
// Generate modules if all required fields are entered.
87+
if (this.isValid(this.form.controls.modules)) {
88+
const moduleFormGroups: FormGroup[] = this.form.controls.modules['controls'];
89+
moduleFormGroups.forEach(async moduleGroup => {
90+
await new Promise(resolve => setTimeout(resolve, 0, this.generateModule(moduleGroup)));
91+
});
92+
this.form.controls.modules['controls'] = [];
93+
this.generateConfig.module = false;
94+
}
95+
8596
}
8697

8798
/**
@@ -224,6 +235,34 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
224235
});
225236
}
226237

238+
/**
239+
* Generate Modules
240+
*/
241+
generateModule(module: FormGroup) {
242+
return new Promise((resolve, reject) => {
243+
this.isWorking = true;
244+
this.cli
245+
.runNgCommand(
246+
`generate module ${module.value['module-name']} ${this.cli.serialize(
247+
module.value)}`,
248+
this.form.value['root-dir'] + '/' + this.form.value['app-name'])
249+
.subscribe((data: any) => {
250+
this.isWorking = false;
251+
252+
if (data.stderr) {
253+
this.onStdErr.next(data.stderr);
254+
reject(data);
255+
} else {
256+
if (data.exit === 0) {
257+
resolve(data);
258+
} else {
259+
this.onStdOut.next(data.stdout);
260+
}
261+
}
262+
});
263+
});
264+
}
265+
227266
/**
228267
* Event handler of onComponentAdded Event.
229268
*
@@ -263,6 +302,13 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
263302
});
264303
}
265304

305+
addModule(module: FormGroup) {
306+
module.valueChanges.subscribe((data: any) => {
307+
this.generateConfig.module = this.isValid(this.form.controls.modules);
308+
console.log(this.generateConfig);
309+
});
310+
}
311+
266312
/**
267313
* Event handler of onComponentRemoved Event.
268314
* It checks total number of valid components after a component is removed and enable generate form accordingly
@@ -291,6 +337,10 @@ export class CliGenerateComponent extends FlagsComponent implements OnInit {
291337
this.generateConfig.interface = this.isValid(this.form.controls.interfaces);
292338
}
293339

340+
removeModule(index) {
341+
this.generateConfig.module = this.isValid(this.form.controls.modules);
342+
}
343+
294344
/**
295345
* Check if required fields of all added components are filled and then check/uncheck checkbox accordingly
296346
*/

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

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

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

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,68 @@
1-
<p>
2-
module works!
1+
<p *ngIf="form.get('modules').controls.length === 0">
2+
Please add module to continue
33
</p>
4+
<app-drop-down *ngFor="let module of form.get('modules').controls; let i = index">
5+
<h3 class="title component-title">
6+
<span>
7+
{{ module.value['module-name'] ? module.value['module-name'] : 'Module '+(i+1) }}
8+
</span>
9+
</h3>
10+
<h6 class="sub-title">Application Module</h6>
11+
<main class="content" [formGroup]="module">
12+
13+
<div class="module-form">
14+
<p>
15+
<mat-form-field>
16+
<input formControlName="module-name" matInput placeholder="The name of the NgModule."
17+
required>
18+
<mat-hint align="start">The name of the NgModule.</mat-hint>
19+
</mat-form-field>
20+
</p>
21+
<p>
22+
<mat-form-field>
23+
<input formControlName="module" matInput placeholder="The declaring NgModule. (-m)">
24+
<mat-hint align="start">The declaring NgModule.</mat-hint>
25+
</mat-form-field>
26+
</p>
27+
<p>
28+
<mat-form-field>
29+
<input formControlName="project" matInput placeholder="The name of the project. (-m)">
30+
<mat-hint align="start">The name of the project.</mat-hint>
31+
</mat-form-field>
32+
</p>
33+
<p>
34+
<mat-form-field>
35+
<mat-select formControlName="routing-scope" placeholder="The scope for the new routing module. (Default: Child)">
36+
<mat-option *ngFor="let value of routingScopes" [value]="value">
37+
{{value}}
38+
</mat-option>
39+
</mat-select>
40+
<mat-hint align="start">The scope for the new routing module.</mat-hint>
41+
</mat-form-field>
42+
</p>
43+
<p>
44+
<mat-list>
45+
<mat-list-item>
46+
<mat-checkbox formControlName="routing">When true, creates a routing module (Default: false).</mat-checkbox>
47+
</mat-list-item>
48+
<mat-list-item>
49+
<mat-checkbox formControlName="flat">Flag to indicate if a dir is created.</mat-checkbox>
50+
</mat-list-item>
51+
</mat-list>
52+
</p>
53+
</div>
54+
</main>
55+
<div class="action">
56+
<button mat-icon-button type="button" (click)="removeModule(i);">
57+
<mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
58+
</button>
59+
</div>
60+
61+
</app-drop-down>
62+
<mat-action-row>
63+
<button mat-mini-fab color="primary" type="button" (click)="addNewModule($event)">
64+
<i class="material-icons action">
65+
add
66+
</i>
67+
</button>
68+
</mat-action-row>

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

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

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

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

12-
ngOnInit() {
14+
@Input()
15+
public index: number;
16+
17+
@Output()
18+
onModuleAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
19+
20+
@Output()
21+
onModuleRemoved: EventEmitter<any> = new EventEmitter<any>();
22+
23+
formControls: FormControl[];
24+
25+
routingScopes: string[] = ['Child', 'Root'];
26+
27+
static buildModuleForm() {
28+
return new FormGroup({
29+
'module-name': new FormControl('', Validators.required),
30+
'module': new FormControl(''),
31+
'project': new FormControl(''),
32+
'routing-scope': new FormControl(''),
33+
'routing': new FormControl(false),
34+
'flat': new FormControl(false)
35+
});
36+
}
37+
38+
addNewModule(event) {
39+
const formGroup = ModuleComponent.buildModuleForm();
40+
this.form.controls.modules['controls'].push(formGroup);
41+
this.onModuleAdded.emit(formGroup);
1342
}
1443

44+
removeModule(index) {
45+
this.form.controls.modules['controls'].splice(index, 1);
46+
this.onModuleRemoved.emit(index);
47+
}
1548
}

0 commit comments

Comments
 (0)