Users listing component. Fix user roles chips

This commit is contained in:
Kristian Ntavidi 2021-04-12 12:05:12 +03:00
parent 27bf69268e
commit d038f42021
12 changed files with 55 additions and 27 deletions

View File

@ -183,6 +183,12 @@
<button mat-button class="delete-btn" (click)="verifyAndRemoveUser(user)" [matTooltip]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
</td>
</tr>
<tr *ngIf="!userChipList || !userChipList.length">
<td style="text-align: end; line-height: 3em;" colspan="2" >
<!-- ...No users yet -->
{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NO-USERS-YET' | translate}}
</td>
</tr>
</tbody>
</table>
</div>

View File

@ -1,21 +1,25 @@
<form class="d-flex user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
<div *ngIf="!this.nowEditing"class="roles">
<div *ngFor="let role of this.formGroup.get('appRoles').value" [ngClass]="{'user': role == 0, 'manager': role == 1, 'admin': role == 2, 'dataset-template-editor': role == 3}">
{{getPrincipalAppRoleWithLanguage(role)}}
</div>
<form class="row user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
<div *ngIf="!this.nowEditing"class="roles col">
<ng-container *ngFor="let role of this.formGroup.get('appRoles').value">
<div>
<span class="user-role" [ngClass]="{'user': role == 0, 'manager': role == 1, 'admin': role == 2, 'dataset-template-editor': role == 3}">
{{getPrincipalAppRoleWithLanguage(role)}}
</span>
</div>
</ng-container>
</div>
<mat-form-field *ngIf="this.nowEditing" class="select-role roles-width-180">
<mat-form-field *ngIf="this.nowEditing" class="select-role roles-width-180 col-auto">
<mat-select formControlName="appRoles" multiple required>
<mat-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option>
</mat-select>
<mat-error *ngIf="getFormControl('appRoles').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<button *ngIf="!this.nowEditing" mat-icon-button color="primary" type="button" (click)="editItem()">
<button *ngIf="!this.nowEditing" class="col-auto" mat-icon-button color="primary" type="button" (click)="editItem()">
<!-- <mat-icon class="mat-24">edit</mat-icon> -->
<span class="row-action">{{'USERS.ACTIONS.EDIT' | translate}}</span>
</button>
<button *ngIf="this.nowEditing" mat-icon-button color="primary" type="submit">
<button *ngIf="this.nowEditing" class="col-auto" mat-icon-button color="primary" type="submit">
<!-- <mat-icon class="mat-24">save</mat-icon> -->
<span class="row-action">{{'USERS.ACTIONS.SAVE' | translate}}</span>
</button>

View File

@ -1,14 +1,17 @@
.user-role-editor {
align-items: center;
margin-top: 1.125rem;
justify-content: space-between;
padding-left: 15px;
padding-right: 15px;
.select-role {
// margin-top: 1rem;
}
.roles {
min-width: 90px;
margin-right: 6rem;
display: flex;
flex-direction: column;
}
.roles-width-180 {
@ -20,13 +23,20 @@
color: #129d99;
cursor: pointer;
}
.user-role{
text-align: center;
width: auto;
padding-top: 0.2em;
padding-left: 1em;
padding-right: 1em;
display: inline-block;
}
.user {
display: flex;
justify-content: center;
align-items: center;
// display: flex;
// justify-content: center;
// align-items: center;
min-width: 67px;
height: 28px;
min-height: 28px;
color: #00c4ff;
background: #d3f5ff 0% 0% no-repeat padding-box;
border-radius: 44px;
@ -40,9 +50,9 @@
}
.manager {
display: flex;
justify-content: center;
align-items: center;
// display: flex;
// justify-content: center;
// align-items: center;
min-width: 90px;
height: 28px;
color: #568b5a;
@ -58,11 +68,11 @@
}
.admin {
display: flex;
justify-content: center;
align-items: center;
// display: flex;
// justify-content: center;
// align-items: center;
min-width: 77px;
height: 28px;
min-height: 28px;
color: #ff3d33;
background: #ffd5d3 0% 0% no-repeat padding-box;
border-radius: 44px;
@ -76,11 +86,11 @@
}
.dataset-template-editor {
display: flex;
justify-content: center;
align-items: center;
// display: flex;
// justify-content: center;
// align-items: center;
min-width: 77px;
height: 28px;
min-height: 28px;
color: #d633ff;
background: #fad3ff 0% 0% no-repeat padding-box;
border-radius: 44px;

View File

@ -42,7 +42,7 @@
<ng-container cdkColumnDef="roles">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<app-user-role-editor-component [item]="row"></app-user-role-editor-component>
<app-user-role-editor-component style="width: 100%;" [item]="row"></app-user-role-editor-component>
</mat-cell>
</ng-container>

View File

@ -291,6 +291,7 @@
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
"UNTITLED": "Untitled",

View File

@ -291,6 +291,7 @@
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
"UNTITLED": "Untitled",

View File

@ -290,6 +290,7 @@
"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",

View File

@ -290,6 +290,7 @@
"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",

View File

@ -290,6 +290,7 @@
"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",

View File

@ -290,6 +290,7 @@
"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",

View File

@ -290,6 +290,7 @@
"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",

View File

@ -290,6 +290,7 @@
"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",