Add select-all and unselect-all for robot permissions (#15962)

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
孙世军 2021-11-08 14:38:26 +08:00 committed by GitHub
parent ab037c35cc
commit d5a4f0b8bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 88 additions and 0 deletions

View File

@ -6,6 +6,12 @@
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu [style.height.px]="230" clrPosition="bottom-left" *clrIfOpen>
<div>
<button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllPermissionOrUnselectAll(defaultAccesses);resetAccess(defaultAccesses)">
<span *ngIf="isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
<span *ngIf="!isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
</button>
</div>
<div clrDropdownItem *ngFor="let item of defaultAccesses" (click)="chooseDefaultAccess(item)">
<clr-icon class="check" shape="check" [style.visibility]="item.checked ? 'visible' : 'hidden'"></clr-icon>
<span>{{i18nMap[item.action] | translate}} {{i18nMap[item.resource] | translate}}</span>
@ -33,6 +39,12 @@
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu [style.height.px]="140" clrPosition="bottom-left" *clrIfOpen>
<div>
<button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllPermissionOrUnselectAll(p.permissions[0].access)">
<span *ngIf="isSelectAll(p.permissions[0].access)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
<span *ngIf="!isSelectAll(p.permissions[0].access)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
</button>
</div>
<div clrDropdownItem *ngFor="let item of p.permissions[0].access" (click)="chooseAccess(item)">
<clr-icon class="check" shape="check" [style.visibility]="item.checked ? 'visible' : 'hidden'"></clr-icon>
<span>{{i18nMap[item.action] | translate}} {{i18nMap[item.resource] | translate}}</span>

View File

@ -107,4 +107,23 @@ export class ListAllProjectsComponent implements OnInit {
}
this.showSelectAll = !this.showSelectAll;
}
isSelectAll(permissions: FrontAccess[]): boolean {
if (permissions?.length) {
return permissions.filter(item => item.checked).length < permissions.length / 2;
}
return false;
}
selectAllPermissionOrUnselectAll(permissions: FrontAccess[]) {
if (permissions?.length) {
if (this.isSelectAll(permissions)) {
permissions.forEach(item => {
item.checked = true;
});
} else {
permissions.forEach(item => {
item.checked = false;
});
}
}
}
}

View File

@ -115,6 +115,12 @@
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu class="dropdown-menu" [style.height.px]="230" clrPosition="bottom-left" *clrIfOpen>
<div>
<button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllOrUnselectAll(defaultAccesses)">
<span *ngIf="isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
<span *ngIf="!isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
</button>
</div>
<div clrDropdownItem *ngFor="let item of defaultAccesses" (click)="chooseAccess(item)">
<clr-icon class="check" shape="check" [style.visibility]="item.checked ? 'visible' : 'hidden'"></clr-icon>
<span>{{i18nMap[item.action] | translate}} {{i18nMap[item.resource] | translate}}</span>

View File

@ -457,4 +457,24 @@ export class NewRobotComponent implements OnInit, OnDestroy {
shouldShowWarning(): boolean {
return new Date() >= this.calculateExpiresAt();
}
isSelectAll(permissions: FrontAccess[]): boolean {
if (permissions?.length) {
return permissions.filter(item => item.checked).length < permissions.length / 2;
}
return false;
}
selectAllOrUnselectAll(permissions: FrontAccess[]) {
if (permissions?.length) {
if (this.isSelectAll(permissions)) {
permissions.forEach(item => {
item.checked = true;
});
} else {
permissions.forEach(item => {
item.checked = false;
});
}
}
}
}

View File

@ -96,6 +96,12 @@
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu class="overflow-y-scroll" [style.height.px]="230" clrPosition="bottom-left" *clrIfOpen>
<div>
<button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllOrUnselectAll(defaultAccesses)">
<span *ngIf="isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
<span *ngIf="!isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
</button>
</div>
<div clrDropdownItem *ngFor="let item of defaultAccesses" (click)="chooseAccess(item)">
<clr-icon class="check" shape="check" [style.visibility]="item.checked ? 'visible' : 'hidden'"></clr-icon>
<span>{{i18nMap[item.action] | translate}} {{i18nMap[item.resource] | translate}}</span>

View File

@ -295,4 +295,23 @@ export class AddRobotComponent implements OnInit, OnDestroy {
shouldShowWarning(): boolean {
return new Date() >= this.calculateExpiresAt();
}
isSelectAll(permissions: FrontAccess[]): boolean {
if (permissions?.length) {
return permissions.filter(item => item.checked).length < permissions.length / 2;
}
return false;
}
selectAllOrUnselectAll(permissions: FrontAccess[]) {
if (permissions?.length) {
if (this.isSelectAll(permissions)) {
permissions.forEach(item => {
item.checked = true;
});
} else {
permissions.forEach(item => {
item.checked = false;
});
}
}
}
}

View File

@ -290,3 +290,7 @@ hbr-copy-input {
color: $pull-command-icon-hover-color;
}
}
.select-all-for-dropdown {
color: $select-all-for-dropdown-color !important;
}

View File

@ -47,4 +47,5 @@ $input-autofill-bg-color: #1b2a32;
$input-autofill-color: #eaedf0;
$pull-command-icon-color: #4aaed9;
$pull-command-icon-hover-color: #007CBB;
$select-all-for-dropdown-color: #4aaed9;
@import "./common.scss";

View File

@ -49,4 +49,5 @@ $input-autofill-bg-color: #fafafa;
$input-autofill-color: #000;
$pull-command-icon-color: #007CBB;
$pull-command-icon-hover-color: #4aaed9;
$select-all-for-dropdown-color: #0072a3;
@import "./common.scss";