Improve adding replication rule page

Signed-off-by: sshijun <sshijun@vmware.com>
This commit is contained in:
sshijun 2020-11-12 18:17:26 +08:00
parent 83c07d6680
commit 3d526e220c
4 changed files with 24 additions and 14 deletions

View File

@ -1,7 +1,7 @@
<clr-modal [(clrModalOpen)]="createEditRuleOpened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
<h3 class="modal-title">{{headerTitle | translate}}</h3>
<hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
<div class="modal-body modal-body-height">
<hbr-inline-alert (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
<form [formGroup]="ruleForm" novalidate class="clr-form clr-form-horizontal">
<div class="clr-form-control" [class.clr-error]="(ruleForm.controls.name.touched && ruleForm.controls.name.invalid) || !isRuleNameValid">
<label class="clr-control-label required">{{'REPLICATION.NAME' | translate}}</label>
@ -171,7 +171,7 @@
<div formGroupName="trigger">
<!--on trigger-->
<div class="select width-115 clr-select-wrapper">
<select id="ruleTrigger" formControlName="type" class="clr-select">
<select (change)="changeTrigger($event)" id="ruleTrigger" formControlName="type" class="clr-select">
<option *ngFor="let trigger of supportedTriggers" [value]="trigger">{{'REPLICATION.' + trigger.toUpperCase() | translate }}</option>
</select>
</div>
@ -180,7 +180,7 @@
<label class="required">Cron String</label>
<label for="targetCron" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-sm tooltip-top-right"
[class.invalid]="!isNotSchedule() && cronTouched && !cronInputValid(ruleForm.value.trigger?.trigger_settings?.cron || '')">
<input type="text" name=targetCron id="targetCron" required class="form-control cron-input clr-input" formControlName="cron">
<input (input)="inputInvalid($event)" type="text" name=targetCron id="targetCron" required class="form-control cron-input clr-input" formControlName="cron">
<span class="tooltip-content">
{{'TOOLTIP.CRON_REQUIRED' | translate }}
</span>

View File

@ -283,13 +283,4 @@ clr-modal {
.select-width {
min-width:11rem;
}
::ng-deep {
.modal-title {
padding-bottom: 0;
}
.modal-header {
.modal-title {
padding: 0;
}
}
}

View File

@ -34,7 +34,7 @@ import { EndpointService } from "../../services/endpoint.service";
import { cronRegex } from "../../utils/utils";
import { FilterType } from "../../entities/shared.const";
const PREFIX: string = '0 ';
@Component({
selector: "hbr-create-edit-rule",
templateUrl: "./create-edit-rule.component.html",
@ -576,4 +576,22 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
fromIndex.setControl('value', this.fb.array(labelValue));
}
// set prefix '0 ', so user can not set item of 'seconds'
inputInvalid(e: any) {
if (this.headerTitle === 'REPLICATION.ADD_POLICY') { // adding model
if (e && e.target) {
if (!e.target.value || (e.target.value && e.target.value.indexOf(PREFIX)) !== 0) {
e.target.value = PREFIX;
}
}
}
}
// when trigger type is scheduled, should set cron prefix to '0 '
changeTrigger(e: any) {
if (this.headerTitle === 'REPLICATION.ADD_POLICY') { // adding model
if (e && e.target && e.target.value === this.TRIGGER_TYPES.SCHEDULED) {
this.ruleForm.get('trigger').get('trigger_settings').get('cron').setValue(PREFIX);
}
}
}
}

View File

@ -8,6 +8,7 @@
}
.alert-item {
text-align: center;
align-items: center;
}
:host >>> .alert-icon-wrapper{
display: inline;