devextreme-schematics 1.2.20 → 1.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-schematics",
-  "version": "1.2.20",
+  "version": "1.2.24",
   "description": "DevExtreme schematics",
   "scripts": {
     "build": "tsc -p tsconfig.json",
@@ -34,5 +34,5 @@
     "jasmine": "^2.8.0",
     "tslint": "^5.15.0"
   },
-  "gitHead": "6dfd3ce0b9afad59591edb5c1fd630225f8b89b0"
+  "gitHead": "f39338167ff94e75f44ab05f31db71a20d5e0d30"
 }

package/src/add-app-template/index.ts

@@ -0,0 +1,30 @@
+import {
+  Rule,
+  chain,
+  schematic,
+} from '@angular-devkit/schematics';
+
+export default function(options: any): Rule {
+  const rules = [
+    schematic('install', {
+      dxversion: options.dxversion,
+      project: options.project
+    }),
+    schematic('add-layout', {
+      layout: options.layout,
+      resolveConflicts: options.resolveConflicts,
+      project: options.project,
+      skipInstall: true,
+      updateBudgets: options.updateBudgets,
+      globalNgCliVersion: options.globalNgCliVersion
+    })
+  ];
+
+  if (!options.empty) {
+    rules.push(schematic('add-sample-views', {
+      project: options.project
+    }));
+  }
+
+  return chain(rules);
+}

package/src/add-app-template/index_spec.ts

@@ -0,0 +1,73 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { Schema as WorkspaceOptions } from '@schematics/angular/workspace/schema';
+import * as path from 'path';
+
+const collectionPath = path.join(__dirname, '../collection.json');
+
+const appOptions: any = {
+  name: 'testApp',
+  projectRoot: '',
+  inlineStyle: false,
+  inlineTemplate: false,
+  routing: true,
+  style: 'css',
+  skipTests: false,
+  skipPackageJson: false
+};
+
+const workspaceOptions: WorkspaceOptions = {
+  name: 'workspace',
+  version: '6.0.0'
+};
+
+const angularSchematicsCollection = require.resolve('../../node_modules/@schematics/angular/collection.json');
+const schematicRunner = new SchematicTestRunner('@schematics/angular', angularSchematicsCollection);
+let appTree: UnitTestTree;
+
+beforeEach(async () => {
+  appTree = await schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
+  appTree = await schematicRunner.runSchematicAsync('application', appOptions, appTree).toPromise();
+});
+
+describe('add-app-template', () => {
+  it('should add DevExtreme', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('add-app-template', { }, appTree).toPromise();
+    const packageConfig = JSON.parse(tree.readContent('package.json'));
+
+    expect('devextreme' in packageConfig.dependencies).toBe(true);
+  });
+
+  it('should consider the `project` option', async () => {
+    appTree = await schematicRunner.runSchematicAsync('application', {
+      name: 'testApp2',
+      inlineStyle: false,
+      inlineTemplate: false,
+      routing: true,
+      style: 'scss',
+      projectRoot: 'projects/testApp2'
+    }, appTree).toPromise();
+
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('add-app-template', {
+      project: 'testApp2'
+    }, appTree).toPromise();
+
+    expect(tree.files)
+      .toContain('/devextreme.json');
+    expect(tree.files)
+      .toContain('/projects/testApp2/src/themes/metadata.base.json');
+    expect(tree.files)
+      .toContain('/projects/testApp2/src/app/pages/home/home.component.ts');
+  });
+
+  it('should consider the `updateBudgets` option', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('add-app-template', { updateBudgets: true }, appTree).toPromise();
+
+    const angularContent = JSON.parse(tree.readContent('/angular.json'));
+    const budgets = angularContent.projects.testApp.architect.build.configurations.production.budgets;
+
+    expect(budgets[0].maximumWarning).toEqual('4mb');
+  });
+});

package/src/add-layout/files/e2e/src/app.e2e-spec.ts

@@ -1,14 +1,14 @@
-import { AppPage } from './app.po';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to <%= title %>!');
-  });
-});
+import { AppPage } from './app.po';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to <%= title %>!');
+  });
+});

package/src/add-layout/files/e2e/src/app.po.ts

@@ -1,11 +1,11 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo() {
-    return browser.get('/');
-  }
-
-  getParagraphText() {
-    return element(by.css('app-root .dx-drawer-content .dx-card p:nth-child(2)')).getText();
-  }
-}
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root .dx-drawer-content .dx-card p:nth-child(2)')).getText();
+  }
+}

package/src/add-layout/files/src/app/app-navigation.ts

@@ -1 +1 @@
-export const navigation = [];
+export const navigation = [];

package/src/add-layout/files/src/app/layouts/index.ts

@@ -1,3 +1,3 @@
-export * from './side-nav-outer-toolbar/side-nav-outer-toolbar.component';
-export * from './side-nav-inner-toolbar/side-nav-inner-toolbar.component';
-export * from './single-card/single-card.component';
+export * from './side-nav-outer-toolbar/side-nav-outer-toolbar.component';
+export * from './side-nav-inner-toolbar/side-nav-inner-toolbar.component';
+export * from './single-card/single-card.component';

package/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.ts

@@ -70,7 +70,7 @@ export class SideNavInnerToolbarComponent implements OnInit {
   }
 
   navigationChanged(event: TreeViewItemClickEvent) {
-    const path = event.itemData.path;
+    const path = (event.itemData as any).path;
     const pointerEvent = event.event;
 
     if (path && this.menuOpened) {

package/src/add-layout/files/src/app/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.component.ts

@@ -63,7 +63,7 @@ export class SideNavOuterToolbarComponent implements OnInit {
   }
 
   navigationChanged(event: ItemClickEvent) {
-    const path = event.itemData.path;
+    const path = (event.itemData as any).path;
     const pointerEvent = event.event;
 
     if (path && this.menuOpened) {

package/src/add-layout/files/src/app/shared/components/change-password-form/change-password-form.component.html

@@ -21,12 +21,14 @@
     </dxi-item>
 
     <ng-container *dxTemplate="let item of 'changePasswordTemplate'">
-      <span class="dx-button-text">
-        <ng-container *ngIf="loading; else notLoading">
-          <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
-        </ng-container>
-        <ng-template #notLoading>Continue</ng-template>
-      </span>
+      <div>
+        <span class="dx-button-text">
+          <ng-container *ngIf="loading; else notLoading">
+            <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
+          </ng-container>
+          <ng-template #notLoading>Continue</ng-template>
+        </span>
+      </div>
     </ng-container>
 
   </dx-form>

package/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.html

@@ -41,13 +41,15 @@
     </dxi-item>
 
     <ng-container *dxTemplate="let item of 'createAccountTemplate'">
-      <span class="dx-button-text">
-        <ng-container *ngIf="loading; else notLoading">
-          <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
-        </ng-container>
-
-        <ng-template #notLoading>Create a new account</ng-template>
-      </span>
+      <div>
+        <span class="dx-button-text">
+          <ng-container *ngIf="loading; else notLoading">
+            <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
+          </ng-container>
+  
+          <ng-template #notLoading>Create a new account</ng-template>
+        </span>
+      </div>
     </ng-container>
 
   </dx-form>

package/src/add-layout/files/src/app/shared/components/footer/footer.component.ts

@@ -1,19 +1,19 @@
-import { Component, NgModule } from '@angular/core';
-
-@Component({
-  selector: 'app-footer',
-  template: `
-    <footer><ng-content></ng-content></footer>
-  `,
-  styleUrls: ['./footer.component.scss']
-})
-
-export class FooterComponent {
-
-}
-
-@NgModule({
-  declarations: [ FooterComponent ],
-  exports: [ FooterComponent ]
-})
-export class FooterModule { }
+import { Component, NgModule } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  template: `
+    <footer><ng-content></ng-content></footer>
+  `,
+  styleUrls: ['./footer.component.scss']
+})
+
+export class FooterComponent {
+
+}
+
+@NgModule({
+  declarations: [ FooterComponent ],
+  exports: [ FooterComponent ]
+})
+export class FooterModule { }

package/src/add-layout/files/src/app/shared/components/login-form/login-form.component.html

@@ -35,12 +35,14 @@
     </dxi-item>
 
     <ng-container *dxTemplate="let item of 'signInTemplate'">
-      <span class="dx-button-text">
-        <ng-container *ngIf="loading; else notLoading">
-          <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
-        </ng-container>
-        <ng-template #notLoading>Sign In</ng-template>
-      </span>
+      <div>
+        <span class="dx-button-text">
+          <ng-container *ngIf="loading; else notLoading">
+            <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
+          </ng-container>
+          <ng-template #notLoading>Sign In</ng-template>
+        </span>
+      </div>
     </ng-container>
 
   </dx-form>

package/src/add-layout/files/src/app/shared/components/reset-password-form/reset-password-form.component.html

@@ -20,12 +20,14 @@
     </dxi-item>
 
     <ng-container *dxTemplate="let item of 'resetPasswordTemplate'">
-      <span class="dx-button-text">
-        <ng-container *ngIf="loading; else notLoading">
-          <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
-        </ng-container>
-        <ng-template #notLoading>Reset my password</ng-template>
-      </span>
+      <div>
+        <span class="dx-button-text">
+          <ng-container *ngIf="loading; else notLoading">
+            <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
+          </ng-container>
+          <ng-template #notLoading>Reset my password</ng-template>
+        </span>
+      </div>>
     </ng-container>
 
   </dx-form>

package/src/add-layout/files/src/dx-styles.scss

@@ -18,6 +18,10 @@ html, body {
   }
 }
 
+.side-nav-outer-toolbar .dx-drawer {
+  height: calc(100% - 56px)
+}
+
 .content-block {
   margin-left: 40px;
   margin-right: 40px;