fix(cli): fix invalid translate pipe when not i18n, close #217

- add class,directive,enum,interface,pipe,service tempaltes, close #218

src/core/cli/.gitignore

@@ -22,10 +22,6 @@ application/files/__sourcedir__/test.ts
 application/files/__sourcedir__/tsconfig.app.json
 application/files/__sourcedir__/tsconfig.spec.json
 application/files/__sourcedir__/typings.d.ts
-application/other-files/layout
-!application/other-files/layout/layout.module.ts
-!application/other-files/layout/default/default.component.html
-!application/other-files/layout/default/header/header.component.html
 application/other-files/core/i18n
 application/other-files/core/net
 application/other-files/core/module-import-guard.ts
@@ -35,3 +31,9 @@ application/other-files/routes/callback
 application/other-files/routes/exception
 application/other-files/routes/passport
 utility
+class
+directive
+enum
+interface
+pipe
+service

src/core/cli/application/other-files/layout/default/default.component.html

@@ -0,0 +1,8 @@
+<div class="wrapper">
+    <div class="router-progress-bar" *ngIf="isFetching"></div>
+    <app-header class="header"></app-header>
+    <app-sidebar class="aside"></app-sidebar>
+    <section class="content">
+        <router-outlet></router-outlet>
+    </section>
+</div>

src/core/cli/application/other-files/layout/default/default.component.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed, TestModuleMetadata } from '@angular/core/testing';
+
+import { setUpTestBed } from '@testing/common.spec';
+
+import { LayoutDefaultComponent } from './default.component';
+
+describe('Layout', () => {
+    setUpTestBed(<TestModuleMetadata>{
+        declarations: [LayoutDefaultComponent]
+    });
+
+    it('should create an instance', () => {
+        const fixture = TestBed.createComponent(LayoutDefaultComponent);
+        const comp = fixture.debugElement.componentInstance;
+        expect(comp).toBeTruthy();
+    });
+});

src/core/cli/application/other-files/layout/default/default.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { Router, NavigationEnd, RouteConfigLoadStart, NavigationError } from '@angular/router';
+import { NzMessageService } from 'ng-zorro-antd';
+import { ScrollService, MenuService, SettingsService } from '@delon/theme';
+
+@Component({
+    selector: 'layout-default',
+    templateUrl: './default.component.html'
+})
+export class LayoutDefaultComponent {
+    isFetching = false;
+
+    constructor(
+        router: Router,
+        scroll: ScrollService,
+        private _message: NzMessageService,
+        public menuSrv: MenuService,
+        public settings: SettingsService) {
+        // scroll to top in change page
+        router.events.subscribe(evt => {
+            if (!this.isFetching && evt instanceof RouteConfigLoadStart) {
+                this.isFetching = true;
+            }
+            if (evt instanceof NavigationError) {
+                this.isFetching = false;
+                _message.error(`无法加载${evt.url}路由`, { nzDuration: 1000 * 3 });
+                return;
+            }
+            if (!(evt instanceof NavigationEnd)) {
+                return;
+            }
+            setTimeout(() => {
+                scroll.scrollToTop();
+                this.isFetching = false;
+            }, 100);
+        });
+    }
+}

src/core/cli/application/other-files/layout/default/header/components/fullscreen.component.ts

@@ -0,0 +1,22 @@
+import { Component, HostListener } from '@angular/core';
+import * as screenfull from 'screenfull';
+
+@Component({
+    selector: 'header-fullscreen',
+    template: `
+    <i class="anticon anticon-{{status ? 'shrink' : 'arrows-alt'}}"></i>
+    <% if (!delonI18n) { %>{{ status ? '退出全屏' : '全屏' }}<% } %><% if (delonI18n) { %>{{(status ? 'fullscreen-exit' : 'fullscreen') | translate }}<% } %>
+    `
+})
+export class HeaderFullScreenComponent {
+
+    status = false;
+
+    @HostListener('click')
+    _click() {
+        if (screenfull.enabled) {
+            screenfull.toggle();
+        }
+        this.status = !screenfull.isFullscreen;
+    }
+}

src/core/cli/application/other-files/layout/default/header/components/icon.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'header-icon',
+    template: `
+    <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" (nzVisibleChange)="change()">
+        <div class="item" nz-dropdown>
+            <i class="anticon anticon-appstore-o"></i>
+        </div>
+        <div nz-menu class="wd-xl animated jello">
+            <nz-spin [nzSpinning]="loading" [nzTip]="'正在读取数据...'">
+                <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'" class="app-icons">
+                    <div nz-col [nzSpan]="6">
+                        <i class="anticon anticon-calendar bg-error text-white"></i>
+                        <small>Calendar</small>
+                    </div>
+                    <div nz-col [nzSpan]="6">
+                        <i class="anticon anticon-file bg-teal text-white"></i>
+                        <small>Files</small>
+                    </div>
+                    <div nz-col [nzSpan]="6">
+                        <i class="anticon anticon-cloud bg-success text-white"></i>
+                        <small>Cloud</small>
+                    </div>
+                    <div nz-col [nzSpan]="6">
+                        <i class="anticon anticon-star-o bg-pink text-white"></i>
+                        <small>Star</small>
+                    </div>
+                    <div nz-col [nzSpan]="6">
+                        <i class="anticon anticon-team bg-purple text-white"></i>
+                        <small>Team</small>
+                    </div>
+                    <div nz-col [nzSpan]="6">
+                        <i class="anticon anticon-scan bg-warning text-white"></i>
+                        <small>QR</small>
+                    </div>
+                    <div nz-col [nzSpan]="6">
+                        <i class="anticon anticon-pay-circle-o bg-cyan text-white"></i>
+                        <small>Pay</small>
+                    </div>
+                    <div nz-col [nzSpan]="6">
+                        <i class="anticon anticon-printer bg-grey text-white"></i>
+                        <small>Print</small>
+                    </div>
+                </div>
+            </nz-spin>
+        </div>
+    </nz-dropdown>
+    `
+})
+export class HeaderIconComponent {
+
+    loading = true;
+
+    change() {
+        setTimeout(() => this.loading = false, 500);
+    }
+
+}

src/core/cli/application/other-files/layout/default/header/components/langs.component.ts

@@ -0,0 +1,41 @@
+<% if (delonI18n) { %>import { Component } from '@angular/core';
+import { SettingsService, MenuService } from '@delon/theme';
+import { I18NService } from '@core/i18n/i18n.service';
+
+@Component({
+    selector: 'header-langs',
+    template: `
+    <nz-dropdown>
+        <div nz-dropdown>
+            <i class="anticon anticon-edit"></i>
+            {{ 'language' | translate}}
+            <i class="anticon anticon-down"></i>
+        </div>
+        <ul nz-menu>
+            <li nz-menu-item *ngFor="let item of langs"
+            [nzSelected]="item.code === settings.layout.lang"
+                (click)="change(item.code)">{{item.text}}</li>
+        </ul>
+    </nz-dropdown>
+    `
+})
+export class HeaderLangsComponent {
+
+    langs: any[];
+
+    constructor(
+        private menuService: MenuService,
+        public settings: SettingsService,
+        public tsServ: I18NService
+    ) {
+        this.langs = this.tsServ.getLangs();
+    }
+
+    change(lang: string) {
+        this.tsServ.use(lang, false).subscribe(() => {
+            this.menuService.resume();
+        });
+        this.settings.setLayout('lang', lang);
+    }
+}
+<% } %>

src/core/cli/application/other-files/layout/default/header/components/notify.component.ts

@@ -0,0 +1,163 @@
+import { NzMessageService } from 'ng-zorro-antd';
+import { Component, OnInit, Input } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { ArrayObservable } from 'rxjs/observable/ArrayObservable';
+import { map, groupBy, concatMap, mergeMap, flatMap, delay, tap, toArray } from 'rxjs/operators';
+import * as moment from 'moment';
+import { NoticeItem } from '@delon/abc';
+import { SettingsService } from '@delon/theme';
+
+/**
+ * 菜单通知
+ */
+@Component({
+    selector: 'header-notify',
+    template: `
+    <notice-icon
+        [data]="data"
+        [count]="count"
+        [loading]="loading"
+        (select)="select($event)"
+        (clear)="clear($event)"
+        (popupVisibleChange)="loadData($event)"></notice-icon>
+    `
+})
+export class HeaderNotifyComponent implements OnInit {
+
+    data: NoticeItem[] = [
+        { title: '通知', list: [], emptyText: '你已查看所有通知', emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg' },
+        { title: '消息', list: [], emptyText: '您已读完所有消息', emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg' },
+        { title: '待办', list: [], emptyText: '你已完成所有待办', emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg' }
+    ];
+    count = 0;
+    loading = false;
+
+    constructor(private msg: NzMessageService, private settings: SettingsService) {}
+
+    ngOnInit() {
+        // mock data
+        this.count = this.settings.user.notifyCount || 12;
+    }
+
+    private parseGroup(data: Observable<any[]>) {
+        console.log('parseGroup');
+        data.pipe(
+                concatMap((i: any) => i),
+                map((i: any) => {
+                    if (i.datetime) i.datetime = moment(i.datetime).fromNow();
+                    // change to color
+                    if (i.status) {
+                        i.color = ({
+                            todo: '',
+                            processing: 'blue',
+                            urgent: 'red',
+                            doing: 'gold',
+                        })[i.status];
+                    }
+                    return i;
+                }),
+                groupBy((x: any) => x.type),
+                mergeMap(g => g.pipe(toArray())),
+                tap((ls: any) => {
+                    this.data.find(w => w.title === ls[0].type).list = ls;
+                })
+            ).subscribe(res => this.loading = false);
+    }
+
+    loadData(res) {
+        if (!res || this.loading) return;
+        this.loading = true;
+        // region: mock http request
+        this.parseGroup(ArrayObservable.of([{
+            id: '000000001',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+            title: '你收到了 14 份新周报',
+            datetime: '2017-08-09',
+            type: '通知',
+          }, {
+            id: '000000002',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
+            title: '你推荐的 曲妮妮 已通过第三轮面试',
+            datetime: '2017-08-08',
+            type: '通知',
+          }, {
+            id: '000000003',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
+            title: '这种模板可以区分多种通知类型',
+            datetime: '2017-08-07',
+            read: true,
+            type: '通知',
+          }, {
+            id: '000000004',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+            title: '左侧图标用于区分不同的类型',
+            datetime: '2017-08-07',
+            type: '通知',
+          }, {
+            id: '000000005',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+            title: '内容不要超过两行字，超出时自动截断',
+            datetime: '2017-08-07',
+            type: '通知',
+          }, {
+            id: '000000006',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+            title: '曲丽丽 评论了你',
+            description: '描述信息描述信息描述信息',
+            datetime: '2017-08-07',
+            type: '消息',
+          }, {
+            id: '000000007',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+            title: '朱偏右 回复了你',
+            description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+            datetime: '2017-08-07',
+            type: '消息',
+          }, {
+            id: '000000008',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+            title: '标题',
+            description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+            datetime: '2017-08-07',
+            type: '消息',
+          }, {
+            id: '000000009',
+            title: '任务名称',
+            description: '任务需要在 2017-01-12 20:00 前启动',
+            extra: '未开始',
+            status: 'todo',
+            type: '待办',
+          }, {
+            id: '000000010',
+            title: '第三方紧急代码变更',
+            description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+            extra: '马上到期',
+            status: 'urgent',
+            type: '待办',
+          }, {
+            id: '000000011',
+            title: '信息安全考试',
+            description: '指派竹尔于 2017-01-09 前完成更新并发布',
+            extra: '已耗时 8 天',
+            status: 'doing',
+            type: '待办',
+          }, {
+            id: '000000012',
+            title: 'ABCD 版本发布',
+            description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+            extra: '进行中',
+            status: 'processing',
+            type: '待办',
+          }
+        ]).pipe(delay(1000)));
+        // endregion
+    }
+
+    clear(type: string) {
+        this.msg.success(`清空了 ${type}`);
+    }
+
+    select(res: any) {
+        this.msg.success(`点击了 ${res.title} 的 ${res.item.title}`);
+    }
+}