Supplement group ui

Signed-off-by: Yogi_Wang <yawang@vmware.com>
This commit is contained in:
Yogi_Wang 2019-09-18 15:13:44 +08:00
parent 6dd2ae90a0
commit 069f884a7c
4 changed files with 25 additions and 50 deletions

View File

@ -4,50 +4,31 @@
<h3 class="modal-title" *ngIf="mode !== 'create'">{{'GROUP.EDIT' | translate}}</h3>
<div class="modal-body">
<form class="form" #groupForm="ngForm">
<section class="form-block">
<div class="form-group" *ngIf="isLdapMode">
<form class="clr-form clr-form-horizontal" #groupForm="ngForm">
<section>
<clr-input-container *ngIf="isLdapMode">
<label for="ldap_group_dn" class="required">{{ 'GROUP.GROUP_DN' | translate}}</label>
<label for="ldap_group_dn"
aria-haspopup="true"
role="tooltip"
class="tooltip tooltip-validation tooltip-sm tooltip-right"
[class.invalid]="isDNInvalid">
<input type="text" id="ldap_group_dn" name="ldap_group_dn"
required
[disabled]="mode !== 'create'"
[(ngModel)]="group.ldap_group_dn"
#groupDN="ngModel">
<span class="tooltip-content">
{{dnTooltip | translate}}
</span>
</label>
</div>
<div class="form-group" *ngIf="isLdapMode">
<label for="type">{{'GROUP.TYPE' | translate}}</label>
<label id="type">LDAP</label>
</div>
<div class="form-group">
<label for="group_name" class="required">{{'GROUP.NAME' | translate}}</label>
<label for="group_name"
aria-haspopup="true"
role="tooltip"
class="tooltip tooltip-validation tooltip-sm tooltip-right"
[class.invalid]="isNameInvalid">
<input type="text" id="group_name" name="group_name"
required
[(ngModel)]="group.group_name"
#groupName="ngModel">
<span class="tooltip-content">
{{dnTooltip | translate}}
</span>
</label>
<input clrInput type="text" id="ldap_group_dn" name="ldap_group_dn" required
[disabled]="mode !== 'create'" [(ngModel)]="group.ldap_group_dn" #groupDN="ngModel" />
<clr-control-error>{{dnTooltip | translate}}</clr-control-error>
</clr-input-container>
<div class="clr-form-control" *ngIf="isLdapMode">
<label class="clr-control-label" for="type">{{'GROUP.TYPE' | translate}}</label>
<label class="padding-left-6" id="type">{{'GROUP.LDAP_TYPE' | translate}}</label>
</div>
<clr-input-container *ngIf="isLdapMode">
<label for="group_name" class="required">{{ 'GROUP.NAME' | translate}}</label>
<input clrInput type="text" id="group_name" name="group_name" required
[(ngModel)]="group.group_name" #groupName="ngModel" />
<clr-control-error>{{dnTooltip | translate}}</clr-control-error>
</clr-input-container>
</section>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="close()">{{'BUTTON.CANCEL' | translate | translate}}</button>
<button type="button" class="btn btn-primary" [disabled]="!isFormValid" (click)="save()">{{'BUTTON.SAVE' | translate | translate}}</button>
<button type="button" class="btn btn-outline"
(click)="close()">{{'BUTTON.CANCEL' | translate | translate}}</button>
<button type="button" class="btn btn-primary" [disabled]="!isFormValid"
(click)="save()">{{'BUTTON.SAVE' | translate | translate}}</button>
</div>
</clr-modal>

View File

@ -0,0 +1,3 @@
.padding-left-6 {
padding-left: 6px;
}

View File

@ -25,7 +25,7 @@ export class AddGroupModalComponent implements OnInit, OnDestroy {
formChangeSubscription: Subscription;
@ViewChild('groupForm', {static: false})
@ViewChild('groupForm', { static: true })
groupForm: NgForm;
submitted = false;
@ -55,15 +55,6 @@ export class AddGroupModalComponent implements OnInit, OnDestroy {
ngOnDestroy() { }
public get isDNInvalid(): boolean {
let dnControl = this.groupForm.controls['ldap_group_dn'];
return dnControl && dnControl.invalid && (dnControl.dirty || dnControl.touched);
}
public get isNameInvalid(): boolean {
let dnControl = this.groupForm.controls['group_name'];
return dnControl && dnControl.invalid && (dnControl.dirty || dnControl.touched);
}
public get isFormValid(): boolean {
return this.groupForm.valid;
}

View File

@ -41,7 +41,7 @@ export class AddGroupComponent implements OnInit {
@Input() memberList: Member[] = [];
@Output() added = new EventEmitter<boolean>();
@ViewChild('groupForm', {static: false})
@ViewChild('groupForm', { static: false })
groupForm: NgForm;
constructor(