inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-4361] Review permission list (#6974)

Browse Source 
* [ACA-4361] permission ux review

* * fixed comments and lint

* * remove space
This commit is contained in:
Dharan
2021-05-05 18:43:34 +05:30
committed by GitHub
parent d65797763e
commit 884d646078
15 changed files with 190 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/content-services/src/lib/i18n/en.json
View File

@@ -386,11 +386,12 @@
}, },
"ADD-PERMISSION": { "ADD-PERMISSION": {
"SEARCH": "Search for users or groups to add", "SEARCH": "Search for users or groups to add",
"TITLE": "Add user or group to", "TITLE": "Add permission",
"TYPE-MESSAGE": "Type something to start searching groups or people", "TYPE-MESSAGE": "Type something to start searching groups or people",
"NO-RESULT": "No result found for this search", "NO-RESULT": "No result found for this search",
"SELECT-ACTION": "SELECT",
"ADD-ACTION": "ADD", "ADD-ACTION": "ADD",
"CLOSE-ACTION": "CLOSE", "CLOSE-ACTION": "CANCEL",
"BASE-DIALOG-TITLE": "Search a group or people to add...", "BASE-DIALOG-TITLE": "Search a group or people to add...",
"EVERYONE": "EVERYONE" "EVERYONE": "EVERYONE"
}, },
@@ -402,7 +403,7 @@
"LABELS": { "LABELS": {
"ON": "On", "ON": "On",
"OFF": "Off", "OFF": "Off",
"DIRECT-PERMISSIONS": "Direct Applied Permission", "DIRECT-PERMISSIONS": "Directly Applied Permission",
"INHERITED-PERMISSIONS": "Inherited Permission", "INHERITED-PERMISSIONS": "Inherited Permission",
"INHERITED-SUBTITLE": "{{count}} users or groups are inheriting permission from a parent folder", "INHERITED-SUBTITLE": "{{count}} users or groups are inheriting permission from a parent folder",
"SELECT-ROLE": "Select role" "SELECT-ROLE": "Select role"
@@ -414,7 +415,7 @@
"PERMISSION-BULK-UPDATE-SUCCESS": "Updated {{user}} user(s) {{group}} group(s)", "PERMISSION-BULK-UPDATE-SUCCESS": "Updated {{user}} user(s) {{group}} group(s)",
"PERMISSION-UPDATE-SUCCESS": "User/Group updated", "PERMISSION-UPDATE-SUCCESS": "User/Group updated",
"PERMISSION-UPDATE-FAIL": "Failed to update user/group", "PERMISSION-UPDATE-FAIL": "Failed to update user/group",
"PERMISSION-BULK-DELETE-SUCCESS": "Deleted {{user}} user(s_ {{group}} group(s)", "PERMISSION-BULK-DELETE-SUCCESS": "Deleted {{user}} user(s) {{group}} group(s)",
"PERMISSION-DELETE-SUCCESS": "User/Group deleted", "PERMISSION-DELETE-SUCCESS": "User/Group deleted",
"PERMISSION-DELETE-FAIL": "Failed to delete user/group", "PERMISSION-DELETE-FAIL": "Failed to delete user/group",
"PERMISSION-ADD-SUCCESS": "Added {{user}} user(s) {{group}} group(s)", "PERMISSION-ADD-SUCCESS": "Added {{user}} user(s) {{group}} group(s)",

112
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html
View File

@@ -10,64 +10,66 @@
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
<adf-datatable [rows]="selectedMembers" <div class="adf-new-permission-table">
selectionMode="none" <adf-datatable [rows]="selectedMembers"
stickyHeader="true" class="adf-datatable-permission"
data-automation-id="adf-user-role-selection-table" selectionMode="none"
*ngIf="selectedMembers.length"> stickyHeader="true"
<data-columns> data-automation-id="adf-user-role-selection-table"
<data-column class="adf-key-icon" key="icon" type="icon" [sortable]="false"> *ngIf="selectedMembers.length">
<ng-template let-context> <data-columns>
<adf-user-icon-column [context]="context"></adf-user-icon-column> <data-column class="adf-datatable-cell--image adf-authority-icon-column" key="$thumbunail" [sortable]="false">
</ng-template> <ng-template let-context>
</data-column> <adf-user-icon-column [context]="context"></adf-user-icon-column>
</ng-template>
</data-column>
<data-column class="adf-authorityId-label adf-ellipsis-cell adf-expand-cell-2" <data-column class="adf-ellipsis-cell adf-expand-cell-5 adf-authorityId-column"
[title]="'Users and Groups (' + selectedMembers.length + ')'" [title]="'PERMISSION_MANAGER.COLUMN.NAME' | translate:{count:selectedMembers.length}"
key="id"> key="id">
<ng-template let-context> <ng-template let-context>
<adf-user-name-column [context]="context"></adf-user-name-column> <adf-user-name-column [context]="context"></adf-user-name-column>
</ng-template> </ng-template>
</data-column> </data-column>
<data-column class="adf-ellipsis-cell adf-expand-cell-1" <data-column class="adf-ellipsis-cell adf-expand-cell-4"
title="PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE" title="PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE"
key="role"> key="role">
<ng-template let-entry="$implicit"> <ng-template let-entry="$implicit">
<adf-user-role-column [readonly]="entry.row.obj.readonly" <adf-user-role-column [readonly]="entry.row.obj.readonly"
[placeholder]="entry.data.getValue(entry.row, entry.col)" [value]="entry.data.getValue(entry.row, entry.col)"
[value]="entry.data.getValue(entry.row, entry.col)" [roles]="data.roles"
[roles]="data.roles" id="adf-select-role-permission"
id="adf-select-role-permission" (roleChanged)="onMemberUpdate($event, entry.row.obj)">
(roleChanged)="onMemberUpdate($event, entry.row.obj)">
</adf-user-role-column>
</ng-template>
<adf-data-column-header>
<ng-template>
<adf-user-role-column class="adf-permission-role-column-header"
placeholder="PERMISSION_MANAGER.COLUMN.BULK-ROLE"
[roles]="data.roles"
id="adf-bulk-select-role-permission"
(roleChanged)="onBulkUpdate($event)">
</adf-user-role-column> </adf-user-role-column>
</ng-template> </ng-template>
</adf-data-column-header>
</data-column>
<data-column class="adf-delete-permission" key="" sortable="false"> <adf-data-column-header>
<ng-template let-entry="$implicit"> <ng-template>
<button mat-icon-button <adf-user-role-column class="adf-permission-role-column-header"
class="adf-add-member-action" placeholder="PERMISSION_MANAGER.COLUMN.BULK-ROLE"
[style.display]="entry.row.obj.readonly ? 'none': 'block'" [roles]="data.roles"
(click)="onMemberDelete(entry.row.obj)" id="adf-bulk-select-role-permission"
data-automation-id="adf-delete-permission-button"> (roleChanged)="onBulkUpdate($event)">
<mat-icon>highlight_off</mat-icon> </adf-user-role-column>
</button> </ng-template>
</ng-template> </adf-data-column-header>
</data-column> </data-column>
</data-columns>
</adf-datatable> <data-column class="adf-datatable-cell adf-delete-permission-column" key="" sortable="false">
<ng-template let-entry="$implicit">
<button mat-icon-button
class="adf-add-member-action"
[style.display]="entry.row.obj.readonly ? 'none': 'block'"
(click)="onMemberDelete(entry.row.obj)"
data-automation-id="adf-delete-permission-button">
<mat-icon>highlight_off</mat-icon>
</button>
</ng-template>
</data-column>
</data-columns>
</adf-datatable>
</div>
</mat-dialog-content> </mat-dialog-content>
@@ -90,7 +92,7 @@
<ng-container *ngIf="isSearchActive"> <ng-container *ngIf="isSearchActive">
<mat-dialog-content> <mat-dialog-content>
<adf-add-permission-panel (select)="onSelect($event)"></adf-add-permission-panel> <adf-add-permission-panel class="adf-search-container" (select)="onSelect($event)"></adf-add-permission-panel>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>
@@ -103,7 +105,7 @@
data-automation-id="add-permission-dialog-confirm-button" data-automation-id="add-permission-dialog-confirm-button"
[disabled]="!currentSelection.length" [disabled]="!currentSelection.length"
(click)="onSearchAddClicked()"> (click)="onSearchAddClicked()">
{{ "PERMISSION_MANAGER.ADD-PERMISSION.ADD-ACTION" | translate }} {{ "PERMISSION_MANAGER.ADD-PERMISSION.SELECT-ACTION" | translate }}
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>
</ng-container> </ng-container>

14
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
View File

@@ -25,11 +25,21 @@
.mat-dialog-content { .mat-dialog-content {
margin: 0; margin: 0;
overflow: auto; overflow: hidden;
flex-grow: 1;
height: 80vh;
.adf-new-permission-table {
height: 90%;
}
.adf-search-container {
height: 100%;
}
} }
.mat-dialog-actions { .mat-dialog-actions {
padding: 8px; padding: 0 24px;
background-color: mat-color($background, background); background-color: mat-color($background, background);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

11
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
View File

@@ -23,8 +23,9 @@
</mat-form-field> </mat-form-field>
<div *ngIf="searchedWord?.length === 0" <div *ngIf="searchedWord?.length === 0"
class="adf-permission-start-message"
id="adf-add-permission-type-search"> id="adf-add-permission-type-search">
<span class="adf-permission-start-message">{{'PERMISSION_MANAGER.ADD-PERMISSION.TYPE-MESSAGE' | translate}}</span> <span>{{'PERMISSION_MANAGER.ADD-PERMISSION.TYPE-MESSAGE' | translate}}</span>
</div> </div>
<adf-search #search <adf-search #search
@@ -36,8 +37,9 @@
<mat-selection-list class="adf-permission-result-list-elements" (keydown.control.a)="selectAll( data?.list?.entries)"> <mat-selection-list class="adf-permission-result-list-elements" (keydown.control.a)="selectAll( data?.list?.entries)">
<mat-list-option id="adf-add-permission-group-everyone" <mat-list-option id="adf-add-permission-group-everyone"
class="adf-list-option-item" class="adf-list-option-item"
#eveyone
(click)="elementClicked(EVERYONE)"> (click)="elementClicked(EVERYONE)">
<adf-user-icon-column [node]="EVERYONE" id="add-group-icon"></adf-user-icon-column> <adf-user-icon-column [node]="EVERYONE" id="add-group-icon" [selected]="eveyone.selected"></adf-user-icon-column>
<p class="adf-result-name"> <p class="adf-result-name">
{{'PERMISSION_MANAGER.ADD-PERMISSION.EVERYONE' | translate}} {{'PERMISSION_MANAGER.ADD-PERMISSION.EVERYONE' | translate}}
</p> </p>
@@ -46,8 +48,9 @@
<mat-list-option *ngFor="let item of data?.list?.entries; let idx = index" <mat-list-option *ngFor="let item of data?.list?.entries; let idx = index"
(click)="elementClicked(item)" (click)="elementClicked(item)"
class="adf-list-option-item" class="adf-list-option-item"
id="result_option_{{idx}}"> id="result_option_{{idx}}"
<adf-user-icon-column [node]="item"></adf-user-icon-column> #option>
<adf-user-icon-column [node]="item" [selected]="option.selected"></adf-user-icon-column>
<p class="adf-result-name"> <p class="adf-result-name">
<ng-container *ngIf="item.entry?.properties['cm:authorityDisplayName']; else authorityName"> <ng-container *ngIf="item.entry?.properties['cm:authorityDisplayName']; else authorityName">
{{item.entry.properties['cm:authorityDisplayName']}} {{item.entry.properties['cm:authorityDisplayName']}}

23
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss
View File

@@ -5,12 +5,13 @@
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$mat-menu-border-radius: 2px !default; $mat-menu-border-radius: 2px !default;
$search-result-height: calc(100% - 75px);
.adf { .adf {
&-permission-result-list { &-permission-result-list {
display: flex; display: flex;
height: 300px; height: $search-result-height;
overflow: auto; overflow: auto;
border: 2px solid mat-color($foreground, base, 0.07); border: 2px solid mat-color($foreground, base, 0.07);
@@ -27,7 +28,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
height: 300px; height: $search-result-height;
overflow: auto; overflow: auto;
border: 2px solid mat-color($foreground, base, 0.07); border: 2px solid mat-color($foreground, base, 0.07);
} }
@@ -54,13 +55,19 @@
} }
} }
&-list-option-item .mat-list-text { &-list-option-item {
display: flex; mat-pseudo-checkbox {
flex-direction: row !important; display: none;
align-items: center; }
.adf-result-name { .mat-list-text {
padding-left: 16px !important; display: flex;
flex-direction: row !important;
align-items: center;
.adf-result-name {
padding-left: 16px !important;
}
} }
} }

17
lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.html
View File

@@ -2,27 +2,24 @@
id="adf-permission-display-container" id="adf-permission-display-container"
[rows]="permissions" [rows]="permissions"
stickyHeader="true" stickyHeader="true"
selectionMode="multiple"> [selectionMode]="selectionMode">
<data-columns> <data-columns>
<data-column class="adf-key-icon" <data-column class="adf-datatable-cell--image adf-authority-icon-column" key="$thumbunail" [sortable]="false">
key="icon"
type="icon"
[sortable]="false">
<ng-template let-context> <ng-template let-context>
<adf-user-icon-column [context]="context"></adf-user-icon-column> <adf-user-icon-column [context]="context"></adf-user-icon-column>
</ng-template> </ng-template>
</data-column> </data-column>
<data-column class="adf-authorityId-label adf-ellipsis-cell adf-expand-cell-2" <data-column class="adf-ellipsis-cell adf-expand-cell-5 adf-authorityId-column"
[title]="'PERMISSION_MANAGER.COLUMN.NAME' | translate:{count:permissions.length}" [title]="'PERMISSION_MANAGER.COLUMN.NAME' | translate:{count:permissions.length}"
key="authorityId"> key="authorityId">
<ng-template let-context> <ng-template let-context>
<adf-user-name-column [context]="context"></adf-user-name-column> <adf-user-name-column [context]="context"></adf-user-name-column>
</ng-template> </ng-template>
</data-column> </data-column>d
<data-column class="adf-authorityId-label adf-ellipsis-cell adf-expand-cell-2" <data-column class="adf-ellipsis-cell adf-expand-cell-5 adf-authorityId-column"
title="PERMISSION_MANAGER.COLUMN.LOCATION" title="PERMISSION_MANAGER.COLUMN.LOCATION"
key="location" key="location"
*ngIf="node && showLocation"> *ngIf="node && showLocation">
@@ -32,7 +29,7 @@
</data-column> </data-column>
<data-column <data-column
class="adf-ellipsis-cell adf-expand-cell-1" class="adf-ellipsis-cell adf-expand-cell-4"
title="PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE" title="PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE"
key="name" key="name"
sortable="false"> sortable="false">
@@ -59,7 +56,7 @@
</adf-data-column-header> </adf-data-column-header>
</data-column> </data-column>
<data-column class="adf-delete-permission" key="delete" *ngIf="!isReadOnly" sortable="false"> <data-column class="adf-datatable-cell adf-delete-permission-column" key="" *ngIf="!isReadOnly" [sortable]="false">
<ng-template let-entry="$implicit"> <ng-template let-entry="$implicit">
<button mat-icon-button <button mat-icon-button
(click)="removePermission($event, entry.row.obj)" (click)="removePermission($event, entry.row.obj)"

52
lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss
View File

@@ -1,44 +1,30 @@
@mixin adf-permission-container-theme($theme) { @mixin adf-permission-container-theme($theme) {
$adf-permission-list-width: 100% !default; $adf-permission-list-width: 100% !default;
.adf { .adf-datatable-permission {
&-permission-label { display: flex;
max-width: 130px; min-width: 450px;
min-width: 100px; width: $adf-permission-list-width;
margin-left: 50px;
}
&-delete-permission { &.adf-datatable {
max-width: 50px; overflow: hidden;
}
&-authorityId-label { .adf-delete-permission-column {
min-width: 100px; min-width: 80px;
}
&-key-icon { .adf-cell-value {
max-width: 50px; width: 80px;
} padding-right: 10px;
place-content: flex-end;
}
}
&-ellipsis-cell { .adf-authorityId-column {
position: sticky; flex: 40%;
text-overflow: ellipsis; }
white-space: nowrap;
}
&-display-permission-container { .adf-authority-icon-column {
display: flex; min-width: 40px;
justify-content: space-around;
flex: 1;
}
&-datatable-permission {
display: flex;
min-width: 450px;
width: $adf-permission-list-width;
&.adf-datatable {
overflow: hidden;
} }
} }
} }

8
lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
import { Node, PermissionElement } from '@alfresco/js-api'; import { Node, PermissionElement } from '@alfresco/js-api';
import { PermissionDisplayModel } from '../../models/permission.model'; import { PermissionDisplayModel } from '../../models/permission.model';
import { RoleModel } from '../../models/role.model'; import { RoleModel } from '../../models/role.model';
@@ -23,7 +23,8 @@ import { RoleModel } from '../../models/role.model';
@Component({ @Component({
selector: 'adf-permission-container', selector: 'adf-permission-container',
templateUrl: './permission-container.component.html', templateUrl: './permission-container.component.html',
styleUrls: ['./permission-container.component.scss'] styleUrls: ['./permission-container.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class PermissionContainerComponent implements OnChanges { export class PermissionContainerComponent implements OnChanges {
@@ -42,6 +43,9 @@ export class PermissionContainerComponent implements OnChanges {
@Input() @Input()
showLocation = false; showLocation = false;
@Input()
selectionMode = 'multiple'; // none|single|multiple
/** Emitted when the permission is updated. */ /** Emitted when the permission is updated. */
@Output() @Output()
update = new EventEmitter<{role: string, permission: PermissionDisplayModel}>(); update = new EventEmitter<{role: string, permission: PermissionDisplayModel}>();

21
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
View File

@@ -57,17 +57,26 @@
[node]="model.node" [node]="model.node"
[permissions]="model.inheritedPermissions" [permissions]="model.inheritedPermissions"
[showLocation]="true" [showLocation]="true"
[selectionMode]="'none'"
[roles]="model.roles"> [roles]="model.roles">
</adf-permission-container> </adf-permission-container>
</div> </div>
</ng-template> </ng-template>
<mat-card-content style="overflow: hidden"> <mat-card-content class="adf-local-permission-container">
<section class="adf-permission-content-header"> <section class="adf-permission-content-header">
<h3>{{'PERMISSION_MANAGER.LABELS.DIRECT-PERMISSIONS' | translate }}</h3> <h3>{{'PERMISSION_MANAGER.LABELS.DIRECT-PERMISSIONS' | translate }}</h3>
<div class="adf-toolbar--spacer"></div> <div class="adf-toolbar--spacer"></div>
<button
mat-button
[matTooltip]="'PERMISSION_MANAGER.ACTION.ADD-PERMISSION' | translate"
(click)="openAddPermissionDialog()"
data-automation-id="adf-add-permission-button">
<mat-icon>person_add_outline</mat-icon>
</button>
<button <button
mat-button mat-button
[matTooltip]="'PERMISSION_MANAGER.ACTION.DELETE' | translate" [matTooltip]="'PERMISSION_MANAGER.ACTION.DELETE' | translate"
@@ -76,16 +85,6 @@
data-automation-id="adf-delete-selected-permission"> data-automation-id="adf-delete-selected-permission">
<mat-icon>delete_outline</mat-icon> <mat-icon>delete_outline</mat-icon>
</button> </button>
<adf-toolbar-divider></adf-toolbar-divider>
<button
mat-button
[matTooltip]="'PERMISSION_MANAGER.ACTION.ADD-PERMISSION' | translate"
(click)="openAddPermissionDialog()"
data-automation-id="adf-add-permission-button">
<mat-icon>person_add_outline</mat-icon>
</button>
</section> </section>
<adf-permission-container <adf-permission-container

19
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
View File

@@ -25,7 +25,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid mat-color($foreground, divider); border: 1px solid mat-color($foreground, base, 0.07);
} }
&-inherit-container { &-inherit-container {
@@ -70,6 +70,18 @@
display: flex; display: flex;
height: calc(100% - 63px); height: calc(100% - 63px);
} }
&-local-permission-container {
overflow: hidden;
flex: 1 1 auto;
}
&-datatable-list {
.adf-datatable-selected > svg {
width: 40px;
height: 40px;
}
}
} }
@@ -79,14 +91,15 @@
padding-right: 10px; padding-right: 10px;
} }
.adf-permission-pop-over { .adf-permission-pop-over {
padding-right: 15px; padding-right: 15px;
width: 100%; width: 100%;
.adf-pop-over-card { .adf-pop-over-card {
width: 100%; width: 100%;
@include mat-elevation(16, mat-color($foreground, divider), 0.8); overflow: hidden;
box-shadow: 0 8px 9px -5px mat-color($foreground, divider),
0 15px 22px 2px mat-color($foreground, divider);
} }
} }
} }

2
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.service.ts
View File

@@ -102,7 +102,7 @@ export class PermissionListService {
updateNodePermissionByDialog() { updateNodePermissionByDialog() {
this.nodePermissionDialogService this.nodePermissionDialogService
.openAddPermissionDialog(this.node, this.roles) .openAddPermissionDialog(this.node, this.roles, 'PERMISSION_MANAGER.ADD-PERMISSION.TITLE')
.pipe( .pipe(
switchMap(selection => { switchMap(selection => {
const total = selection.length; const total = selection.length;

14
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss
View File

@@ -1,6 +1,6 @@
@mixin adf-user-icon-column-theme($theme) { @mixin adf-user-icon-column-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$foreground: map-get($theme, foreground); $document-list-selection-color: mat-color($accent) !default;
.adf { .adf {
&-people-initial { &-people-initial {
@@ -11,7 +11,7 @@
align-items: center; align-items: center;
width: 40px; width: 40px;
height: 40px; height: 40px;
color: mat-color($foreground, text); color: mat-color($primary, default-contrast) !important;
font-weight: bolder; font-weight: bolder;
font-size: 18px; font-size: 18px;
text-transform: uppercase; text-transform: uppercase;
@@ -23,12 +23,18 @@
background: mat-color($primary); background: mat-color($primary);
border-radius: 50%; border-radius: 50%;
padding: 10px; padding: 10px;
color: mat-color($foreground, text); color: mat-color($primary, default-contrast) !important;
font-weight: bolder; font-weight: bolder;
font-size: 20px; font-size: 20px;
} }
&-people-select-icon { &-people-select-icon {
padding: 10px; margin: 0 !important;
svg {
fill: $document-list-selection-color;
width: 40px;
height: 40px;
}
} }
} }
} }

7
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.spec.ts
View File

@@ -115,4 +115,11 @@ describe('UserIconColumnComponent', () => {
}); });
}); });
it('should render select icon', () => {
component.selected = true;
component.ngOnInit();
fixture.detectChanges();
expect(element.querySelector('mat-icon[svgIcon="selected"]')).toBeDefined();
expect(component.isSelected).toBe(true);
});
}); });

13
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts
View File

@@ -24,14 +24,14 @@ import { NodePermissionService } from '../../services/node-permission.service';
@Component({ @Component({
selector: 'adf-user-icon-column', selector: 'adf-user-icon-column',
template: ` template: `
<div class="adf-cell-value" [attr.id]="group ? 'group-icon' : 'person-icon'" *ngIf="!context?.row?.isSelected"> <div class="adf-cell-value" [attr.id]="group ? 'group-icon' : 'person-icon'" *ngIf="!isSelected">
<ng-container *ngIf="displayText$ | async as user"> <ng-container *ngIf="displayText$ | async as user">
<mat-icon *ngIf="group" class="adf-people-icon">people_alt_outline</mat-icon> <mat-icon *ngIf="group" class="adf-people-icon">people_alt_outline</mat-icon>
<div *ngIf="!group" [outerHTML]="user | usernameInitials: 'adf-people-initial'"></div> <div *ngIf="!group" [outerHTML]="user | usernameInitials: 'adf-people-initial'"></div>
</ng-container> </ng-container>
</div> </div>
<div class="adf-cell-value" *ngIf="context?.row?.isSelected"> <div class="adf-cell-value" *ngIf="isSelected">
<mat-icon class="adf-people-select-icon" svgIcon="selected"></mat-icon> <mat-icon class="adf-people-select-icon adf-datatable-selected" svgIcon="selected"></mat-icon>
</div> </div>
`, `,
styleUrls: ['./user-icon-column.component.scss'], styleUrls: ['./user-icon-column.component.scss'],
@@ -44,9 +44,16 @@ export class UserIconColumnComponent implements OnInit {
@Input() @Input()
node: NodeEntry; node: NodeEntry;
@Input()
selected: boolean = false;
displayText$ = new BehaviorSubject<User>(null); displayText$ = new BehaviorSubject<User>(null);
group = false; group = false;
get isSelected(): boolean {
return this.context?.row?.isSelected || this.selected;
}
constructor(private nodePermissionService: NodePermissionService) {} constructor(private nodePermissionService: NodePermissionService) {}
ngOnInit() { ngOnInit() {

9
lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
View File

@@ -33,7 +33,7 @@ import { RoleModel } from '../../models/role.model';
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<span class="adf-datatable-cell-value" [title]="value | adfLocalizedRole" *ngIf="readonly"> <span class="adf-datatable-cell-value adf-readonly-role" [title]="value | adfLocalizedRole" *ngIf="readonly">
{{value | adfLocalizedRole}} {{value | adfLocalizedRole}}
</span> </span>
`, `,
@@ -41,6 +41,13 @@ import { RoleModel } from '../../models/role.model';
styles: [ styles: [
`.adf-role-selector-field { `.adf-role-selector-field {
width: 100%; width: 100%;
.mat-form-field {
width: 100%;
max-width: 200px;
}
}
.adf-readonly-role {
padding-left: 0 !important;
} }
` `
] ]