Skip to content

Commit 1820da5

Browse files
OriginRingGyy
OriginRing
and
Gyy
authored
feat(module:cron-expression): Optimize cron result display & support custom rendering cron time (#7750)
* feat(module:cron-expression): brand new cron result display * feat(module:cron-expression): delete CollapseModule Co-authored-by: Gyy <wb-gyy965916@alibaba-inc.com>
1 parent ddd44d2 commit 1820da5

11 files changed

Lines changed: 193 additions & 87 deletions

‎components/cron-expression/cron-expression-input.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { CronChangeType, TimeType } from './typings';
1111
changeDetection: ChangeDetectionStrategy.OnPush,
1212
encapsulation: ViewEncapsulation.None,
1313
selector: 'nz-cron-expression-input',
14-
exportAs: 'nzCronExpression',
14+
exportAs: 'nzCronExpressionInput',
1515
template: `
1616
<div class="ant-cron-expression-input">
1717
<input

‎components/cron-expression/cron-expression-label.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { TimeType, TimeTypeError } from './typings';
1313
changeDetection: ChangeDetectionStrategy.OnPush,
1414
encapsulation: ViewEncapsulation.None,
1515
selector: 'nz-cron-expression-label',
16-
exportAs: 'nzCronExpression',
16+
exportAs: 'nzCronExpressionLabel',
1717
template: `
1818
<div
1919
class="ant-cron-expression-label"

‎components/cron-expression/cron-expression-preview.component.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/**
2+
* Use of this source code is governed by an MIT-style license that can be
3+
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
4+
*/
5+
6+
import {
7+
Component,
8+
ViewEncapsulation,
9+
ChangeDetectionStrategy,
10+
Input,
11+
Output,
12+
EventEmitter,
13+
ChangeDetectorRef,
14+
TemplateRef
15+
} from '@angular/core';
16+
17+
import { InputBoolean } from 'ng-zorro-antd/core/util';
18+
import { NzCronExpressionCronErrorI18n } from 'ng-zorro-antd/i18n';
19+
20+
@Component({
21+
changeDetection: ChangeDetectionStrategy.OnPush,
22+
encapsulation: ViewEncapsulation.None,
23+
selector: 'nz-cron-expression-preview',
24+
exportAs: 'nzCronExpressionPreview',
25+
template: `<div class="ant-collapse ant-collapse-borderless ant-cron-expression-preview">
26+
<div class="ant-cron-expression-preview-dateTime" [class.ant-cron-expression-preview-dateTime-center]="!isExpand">
27+
<ng-container *ngIf="visible; else cronError">
28+
<ng-container *ngIf="!nzSemantic; else semanticTemplate">
29+
{{ TimeList[0] | date: 'YYYY-MM-dd HH:mm:ss' }}
30+
</ng-container>
31+
<ng-template #semanticTemplate [ngTemplateOutlet]="nzSemantic"></ng-template>
32+
</ng-container>
33+
<ng-template #cronError>{{ locale.cronError }}</ng-template>
34+
</div>
35+
<div *ngIf="visible" class="ant-cron-expression-preview-content">
36+
<div class="ant-cron-expression-preview-content-date">
37+
<ng-container *ngIf="!isExpand">
38+
<ul class="ant-cron-expression-preview-list">
39+
<li *ngFor="let item of TimeList">
40+
{{ item | date: 'YYYY-MM-dd HH:mm:ss' }}
41+
</li>
42+
<li><a (click)="loadMorePreview.emit()">···</a></li>
43+
</ul>
44+
</ng-container>
45+
</div>
46+
<ul class="ant-cron-expression-preview-icon">
47+
<li *ngIf="isExpand"><span nz-icon nzType="down" nzTheme="outline" (click)="setExpand()"></span></li>
48+
<li *ngIf="!isExpand"><span nz-icon nzType="up" nzTheme="outline" (click)="setExpand()"></span></li>
49+
</ul>
50+
</div>
51+
</div>`
52+
})
53+
export class NzCronExpressionPreviewComponent {
54+
@Input() TimeList: Date[] = [];
55+
@Input() @InputBoolean() visible: boolean = true;
56+
@Input() locale!: NzCronExpressionCronErrorI18n;
57+
@Input() nzSemantic: TemplateRef<void> | null = null;
58+
@Output() readonly loadMorePreview = new EventEmitter<void>();
59+
60+
isExpand: boolean = true;
61+
62+
constructor(private cdr: ChangeDetectorRef) {}
63+
64+
setExpand(): void {
65+
this.isExpand = !this.isExpand;
66+
this.cdr.markForCheck();
67+
}
68+
}

‎components/cron-expression/cron-expression.component.ts‎

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
4545
<div class="ant-cron-expression">
4646
<div class="ant-cron-expression-content">
4747
<div
48-
class="ant-cron-expression-input-group"
49-
[class.ant-cron-expression-input-group-lg]="nzSize === 'large'"
50-
[class.ant-cron-expression-input-group-sm]="nzSize === 'small'"
48+
class="ant-input ant-cron-expression-input-group"
49+
[class.ant-input-lg]="nzSize === 'large'"
50+
[class.ant-input-sm]="nzSize === 'small'"
5151
[class.ant-cron-expression-input-group-focus]="focus"
5252
[class.ant-cron-expression-input-group-error]="!validateForm.valid"
5353
[class.ant-cron-expression-input-group-error-focus]="!validateForm.valid && focus"
@@ -62,7 +62,12 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
6262
></nz-cron-expression-input>
6363
</ng-container>
6464
</div>
65-
<div class="ant-cron-expression-label-group">
65+
<div
66+
class="ant-cron-expression-label-group"
67+
[class.ant-input-lg]="nzSize === 'large'"
68+
[class.ant-cron-expression-label-group-default]="nzSize === 'default'"
69+
[class.ant-input-sm]="nzSize === 'small'"
70+
>
6671
<ng-container *ngFor="let label of labels">
6772
<nz-cron-expression-label
6873
[type]="label"
@@ -72,29 +77,18 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
7277
></nz-cron-expression-label>
7378
</ng-container>
7479
</div>
75-
<nz-collapse *ngIf="!nzCollapseDisable" [nzBordered]="false">
76-
<nz-collapse-panel [nzHeader]="nextDate">
77-
<ng-container *ngIf="validateForm.valid">
78-
<ul class="ant-cron-expression-preview-date">
79-
<li *ngFor="let dateItem of nextTimeList">
80-
{{ dateItem | date: 'YYYY-MM-dd HH:mm:ss' }}
81-
</li>
82-
<li><a (click)="loadMorePreview()">···</a></li>
83-
</ul>
84-
</ng-container>
85-
<ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
86-
</nz-collapse-panel>
87-
</nz-collapse>
80+
<nz-cron-expression-preview
81+
*ngIf="!nzCollapseDisable"
82+
[TimeList]="nextTimeList"
83+
[visible]="validateForm.valid"
84+
[locale]="locale"
85+
[nzSemantic]="nzSemantic"
86+
(loadMorePreview)="loadMorePreview()"
87+
></nz-cron-expression-preview>
8888
</div>
8989
<div class="ant-cron-expression-map" *ngIf="nzExtra">
9090
<ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
9191
</div>
92-
<ng-template #nextDate>
93-
<ng-container *ngIf="validateForm.valid">
94-
{{ dateTime | date: 'YYYY-MM-dd HH:mm:ss' }}
95-
</ng-container>
96-
<ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
97-
</ng-template>
9892
</div>
9993
`,
10094
providers: [
@@ -115,6 +109,7 @@ export class NzCronExpressionComponent implements OnInit, ControlValueAccessor,
115109
@Input() nzType: 'linux' | 'spring' = 'linux';
116110
@Input() @InputBoolean() nzCollapseDisable: boolean = false;
117111
@Input() nzExtra?: TemplateRef<void> | null = null;
112+
@Input() nzSemantic: TemplateRef<void> | null = null;
118113

119114
locale!: NzCronExpressionI18nInterface;
120115
focus: boolean = false;
@@ -123,7 +118,6 @@ export class NzCronExpressionComponent implements OnInit, ControlValueAccessor,
123118
labels: TimeType[] = [];
124119
interval!: CronExpression<false>;
125120
nextTimeList: Date[] = [];
126-
dateTime: Date = new Date();
127121
private destroy$ = new Subject<void>();
128122

129123
validateForm!: UntypedFormGroup;
@@ -202,7 +196,6 @@ export class NzCronExpressionComponent implements OnInit, ControlValueAccessor,
202196
previewDate(value: CronType): void {
203197
try {
204198
this.interval = parseExpression(Object.values(value).join(' '));
205-
this.dateTime = this.interval.next().toDate();
206199
this.nextTimeList = [
207200
this.interval.next().toDate(),
208201
this.interval.next().toDate(),

‎components/cron-expression/cron-expression.module.ts‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,24 @@ import { CommonModule } from '@angular/common';
77
import { NgModule } from '@angular/core';
88
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
99

10-
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
1110
import { NzFormModule } from 'ng-zorro-antd/form';
1211
import { NzIconModule } from 'ng-zorro-antd/icon';
1312
import { NzInputModule } from 'ng-zorro-antd/input';
1413
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
1514

1615
import { NzCronExpressionInputComponent } from './cron-expression-input.component';
1716
import { NzCronExpressionLabelComponent } from './cron-expression-label.component';
17+
import { NzCronExpressionPreviewComponent } from './cron-expression-preview.component';
1818
import { NzCronExpressionComponent } from './cron-expression.component';
1919

2020
@NgModule({
21-
declarations: [NzCronExpressionComponent, NzCronExpressionLabelComponent, NzCronExpressionInputComponent],
22-
imports: [
23-
CommonModule,
24-
ReactiveFormsModule,
25-
NzToolTipModule,
26-
NzCollapseModule,
27-
NzFormModule,
28-
NzInputModule,
29-
NzIconModule,
30-
FormsModule
21+
declarations: [
22+
NzCronExpressionComponent,
23+
NzCronExpressionLabelComponent,
24+
NzCronExpressionInputComponent,
25+
NzCronExpressionPreviewComponent
3126
],
27+
imports: [CommonModule, ReactiveFormsModule, NzToolTipModule, NzFormModule, NzInputModule, NzIconModule, FormsModule],
3228
exports: [NzCronExpressionComponent]
3329
})
3430
export class NzCronExpressionModule {}

‎components/cron-expression/demo/semantic.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 5
3+
title:
4+
zh-CN: 自定义渲染 cron 时间
5+
en-US: Custom rendering cron time
6+
---
7+
8+
## zh-CN
9+
10+
自定义渲染下次执行时间
11+
12+
## en-US
13+
14+
Custom rendering next execution time.

‎components/cron-expression/demo/semantic.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component } from '@angular/core';
2+
3+
import { parseExpression } from 'cron-parser';
4+
5+
import { NzSafeAny } from 'ng-zorro-antd/core/types';
6+
7+
@Component({
8+
selector: 'nz-demo-cron-expression-semantic',
9+
template: ` <nz-cron-expression
10+
[nzSemantic]="semanticTemplate"
11+
[(ngModel)]="value"
12+
(ngModelChange)="getValue($event)"
13+
></nz-cron-expression>
14+
<ng-template #semanticTemplate>Next Time: {{ semantic | date: 'YYYY-MM-dd HH:mm:ss' }}</ng-template>`
15+
})
16+
export class NzDemoCronExpressionSemanticComponent {
17+
value: string = '10 * * * *';
18+
semantic?: Date;
19+
20+
getValue(value: string): void {
21+
try {
22+
const interval = parseExpression(value);
23+
this.semantic = interval.next().toDate();
24+
} catch (err: NzSafeAny) {
25+
return;
26+
}
27+
}
28+
}

‎components/cron-expression/demo/use.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 5
2+
order: 6
33
title:
44
zh-CN: 结合表单使用
55
en-US: Basic

‎components/cron-expression/doc/index.en-US.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,5 @@ npm install cron-parser
3737
| `[nzType]` | Cron rule type | `'linux'｜'spring'` | `linux` |
3838
| `[nzSize]` | The size of the input box. | `'large'｜'small'｜'default'` | `default` |
3939
| `[nzCollapseDisable]` | Hide collapse | `boolean` | `false` |
40-
| `[nzExtra]` | Render the content on the right | `TemplateRef<void>` | - |
40+
| `[nzExtra]` | Render the content on the right | `TemplateRef<void>` | - |
41+
| `[nzSemantic]` | Custom rendering next execution time | `TemplateRef<void>` | - |

‎components/cron-expression/doc/index.zh-CN.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,5 @@ npm install cron-parser
3737
| `[nzType]` | cron 规则类型 | `'linux'｜'spring'` | `linux` |
3838
| `[nzSize]` | 设置输入框大小 | `'large'｜'small'｜'default'` | `default` |
3939
| `[nzCollapseDisable]` | 隐藏折叠面板 | `boolean` | `false` |
40-
| `[nzExtra]` | 自定义渲染右侧的内容 | `TemplateRef<void>` | - |
40+
| `[nzExtra]` | 自定义渲染右侧的内容 | `TemplateRef<void>` | - |
41+
| `[nzSemantic]` | 自定义渲染下次执行时间 | `TemplateRef<void>` | - |

0 commit comments

Comments
 (0)