-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui) module generate feature added
ui generate Fixes #5
- Loading branch information
1 parent
df0b77c
commit e9d202c
Showing
6 changed files
with
170 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .module-form mat-form-field { | ||
| width: 100% | ||
| } | ||
|
|
||
| mat-action-row { | ||
| border: none; | ||
| } |
69 changes: 67 additions & 2 deletions
69
packages/klingon-ui/src/app/cli/generate/module/module.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,68 @@ | ||
| <p> | ||
| module works! | ||
| <p *ngIf="form.get('modules').controls.length === 0"> | ||
| Please add module to continue | ||
| </p> | ||
| <app-drop-down *ngFor="let module of form.get('modules').controls; let i = index"> | ||
| <h3 class="title component-title"> | ||
| <span> | ||
| {{ module.value['module-name'] ? module.value['module-name'] : 'Module '+(i+1) }} | ||
| </span> | ||
| </h3> | ||
| <h6 class="sub-title">Application Module</h6> | ||
| <main class="content" [formGroup]="module"> | ||
|
|
||
| <div class="module-form"> | ||
| <p> | ||
| <mat-form-field> | ||
| <input formControlName="module-name" matInput placeholder="The name of the NgModule." | ||
| required> | ||
| <mat-hint align="start">The name of the NgModule.</mat-hint> | ||
| </mat-form-field> | ||
| </p> | ||
| <p> | ||
| <mat-form-field> | ||
| <input formControlName="module" matInput placeholder="The declaring NgModule. (-m)"> | ||
| <mat-hint align="start">The declaring NgModule.</mat-hint> | ||
| </mat-form-field> | ||
| </p> | ||
| <p> | ||
| <mat-form-field> | ||
| <input formControlName="project" matInput placeholder="The name of the project. (-m)"> | ||
| <mat-hint align="start">The name of the project.</mat-hint> | ||
| </mat-form-field> | ||
| </p> | ||
| <p> | ||
| <mat-form-field> | ||
| <mat-select formControlName="routing-scope" placeholder="The scope for the new routing module. (Default: Child)"> | ||
| <mat-option *ngFor="let value of routingScopes" [value]="value"> | ||
| {{value}} | ||
| </mat-option> | ||
| </mat-select> | ||
| <mat-hint align="start">The scope for the new routing module.</mat-hint> | ||
| </mat-form-field> | ||
| </p> | ||
| <p> | ||
| <mat-list> | ||
| <mat-list-item> | ||
| <mat-checkbox formControlName="routing">When true, creates a routing module (Default: false).</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> | ||
| </p> | ||
| </div> | ||
| </main> | ||
| <div class="action"> | ||
| <button mat-icon-button type="button" (click)="removeModule(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)="addNewModule($event)"> | ||
| <i class="material-icons action"> | ||
| add | ||
| </i> | ||
| </button> | ||
| </mat-action-row> |
43 changes: 38 additions & 5 deletions
43
packages/klingon-ui/src/app/cli/generate/module/module.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,48 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { Component, Input, EventEmitter, Output } from '@angular/core'; | ||
| import { FormGroup, FormControl, Validators } from '@angular/forms'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-module', | ||
| selector: 'app-generate-module', | ||
| templateUrl: './module.component.html', | ||
| styleUrls: ['./module.component.css'] | ||
| }) | ||
| export class ModuleComponent implements OnInit { | ||
| export class ModuleComponent { | ||
|
|
||
| constructor() { } | ||
| @Input() | ||
| public form: FormGroup; | ||
|
|
||
| ngOnInit() { | ||
| @Input() | ||
| public index: number; | ||
|
|
||
| @Output() | ||
| onModuleAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>(); | ||
|
|
||
| @Output() | ||
| onModuleRemoved: EventEmitter<any> = new EventEmitter<any>(); | ||
|
|
||
| formControls: FormControl[]; | ||
|
|
||
| routingScopes: string[] = ['Child', 'Root']; | ||
|
|
||
| static buildModuleForm() { | ||
| return new FormGroup({ | ||
| 'module-name': new FormControl('', Validators.required), | ||
| 'module': new FormControl(''), | ||
| 'project': new FormControl(''), | ||
| 'routing-scope': new FormControl(''), | ||
| 'routing': new FormControl(false), | ||
| 'flat': new FormControl(false) | ||
| }); | ||
| } | ||
|
|
||
| addNewModule(event) { | ||
| const formGroup = ModuleComponent.buildModuleForm(); | ||
| this.form.controls.modules['controls'].push(formGroup); | ||
| this.onModuleAdded.emit(formGroup); | ||
| } | ||
|
|
||
| removeModule(index) { | ||
| this.form.controls.modules['controls'].splice(index, 1); | ||
| this.onModuleRemoved.emit(index); | ||
| } | ||
| } |