Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-26 12:15:20 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #9137 from jwangyangls/fix-group-clarity-ui

Browse Source 
Supplement group ui
This commit is contained in:
jwangyangls 2019-09-18 17:45:24 +08:00 committed by GitHub
commit e226f0a258
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/portal/src/app/group/add-group-modal/add-group-modal.component.html
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>
<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>
<div class="form-group" *ngIf="isLdapMode">
<label for="type">{{'GROUP.TYPE' | translate}}</label>
<label id="type">LDAP</label>
</div>
<div class="form-group">
<clr-input-container *ngIf="isLdapMode">
<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>
</div>
<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>

3
src/portal/src/app/group/add-group-modal/add-group-modal.component.scss
View File

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

11
src/portal/src/app/group/add-group-modal/add-group-modal.component.ts
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;
}