Skip to content

refactor(schematics): no longer duplicate files for inline flags #12273

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -2,142 +2,18 @@ import { Component, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<
import { FormBuilder, Validators } from '@angular/forms';

@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
selector: '<%= selector %>',
<% if(inlineTemplate) { %>
template: `
<form [formGroup]="addressForm" novalidate>
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Shipping Information</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number" formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
<%= resolvedFiles.template %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: [
`
.full-width {
width: 100%;
}

.shipping-card {
min-width: 120px;
margin: 20px auto;
}

.mat-radio-button {
display: block;
margin: 5px 0;
}

.row {
display: flex;
flex-direction: row;
}

.col {
flex: 1;
margin-right: 20px;
}

.col:last-child {
margin-right: 0;
}
styles: [
`
]<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
<%= resolvedFiles.stylesheet %>
`
],<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
})
Expand Down
7 changes: 6 additions & 1 deletion src/lib/schematics/address-form/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@ import {buildComponent} from '../utils/devkit-utils/component';
*/
export default function(options: Schema): Rule {
return chain([
buildComponent({...options}),
buildComponent({...options}, {
template: options.inlineTemplate &&
'./__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html',
stylesheet: options.inlineStyle &&
'./__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__',
}),
options.skipImport ? noop() : addFormModulesToModule(options)
]);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,62 +1,19 @@
import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointState, BreakpointObserver } from '@angular/cdk/layout';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';

@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
template: `
<div class="grid-container">
<h1 class="mat-h1">Dashboard</h1>
<mat-grid-list cols="2" rowHeight="350px">
<mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
<mat-card class="dashboard-card">
<mat-card-header>
<mat-card-title>
{{card.title}}
<button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="before">
<button mat-menu-item>Expand</button>
<button mat-menu-item>Remove</button>
</mat-menu>
</mat-card-title>
</mat-card-header>
<mat-card-content class="dashboard-card-content">
<div>Card Content Here</div>
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</div>
<%= resolvedFiles.template %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: [
`
.grid-container {
margin: 20px;
}

.dashboard-card {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
}

.more-button {
position: absolute;
top: 5px;
right: 10px;
}

.dashboard-card-content {
text-align: center;
}
`
]<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
<%= resolvedFiles.stylesheet %>
`
],<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
})
Expand Down
7 changes: 6 additions & 1 deletion src/lib/schematics/dashboard/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@ import {buildComponent} from '../utils/devkit-utils/component';
*/
export default function(options: Schema): Rule {
return chain([
buildComponent({ ...options }),
buildComponent({...options}, {
template: options.inlineTemplate &&
'./__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html',
stylesheet: options.inlineStyle &&
'./__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__',
}),
options.skipImport ? noop() : addNavModulesToModule(options)
]);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,15 @@ import { map } from 'rxjs/operators';
@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
template: `
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar color="primary">Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span><%= project %></span>
</mat-toolbar>
<!-- Add Content Here -->
</mat-sidenav-content>
</mat-sidenav-container>
<%= resolvedFiles.template %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: [
`
.sidenav-container {
height: 100%;
}

.sidenav {
width: 200px;
}

.mat-toolbar.mat-primary {
position: sticky;
top: 0;
}
`
]<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
<%= resolvedFiles.stylesheet %>
`
],<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
})
Expand Down
7 changes: 6 additions & 1 deletion src/lib/schematics/nav/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@ import {buildComponent} from '../utils/devkit-utils/component';
*/
export default function(options: Schema): Rule {
return chain([
buildComponent({ ...options }),
buildComponent({...options}, {
template: options.inlineTemplate &&
'./__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html',
stylesheet: options.inlineStyle &&
'./__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__',
}),
options.skipImport ? noop() : addNavModulesToModule(options)
]);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,7 @@ import { <%= classify(name) %>DataSource } from './<%= dasherize(name) %>-dataso
@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
template: `
<div class="mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">

<!-- Id Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="10"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
<%= resolvedFiles.template %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: []<% } else { %>
Expand Down
5 changes: 4 additions & 1 deletion src/lib/schematics/table/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ import {buildComponent} from '../utils/devkit-utils/component';
*/
export default function(options: Schema): Rule {
return chain([
buildComponent({...options}),
buildComponent({...options}, {
template: options.inlineTemplate &&
'./__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html'
}),
options.skipImport ? noop() : addTableModulesToModule(options)
]);
}
Expand Down
Loading