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> <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> </td>
</tr> </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> </tbody>
</table> </table>
</div> </div>

View File

@ -1,21 +1,25 @@
<form class="d-flex user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()"> <form class="row user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
<div *ngIf="!this.nowEditing"class="roles"> <div *ngIf="!this.nowEditing"class="roles col">
<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}"> <ng-container *ngFor="let role of this.formGroup.get('appRoles').value">
{{getPrincipalAppRoleWithLanguage(role)}} <div>
</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> </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-select formControlName="appRoles" multiple required>
<mat-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option> <mat-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="getFormControl('appRoles').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="getFormControl('appRoles').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </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> --> <!-- <mat-icon class="mat-24">edit</mat-icon> -->
<span class="row-action">{{'USERS.ACTIONS.EDIT' | translate}}</span> <span class="row-action">{{'USERS.ACTIONS.EDIT' | translate}}</span>
</button> </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> --> <!-- <mat-icon class="mat-24">save</mat-icon> -->
<span class="row-action">{{'USERS.ACTIONS.SAVE' | translate}}</span> <span class="row-action">{{'USERS.ACTIONS.SAVE' | translate}}</span>
</button> </button>

View File

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

View File

@ -42,7 +42,7 @@
<ng-container cdkColumnDef="roles"> <ng-container cdkColumnDef="roles">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> <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> </mat-cell>
</ng-container> </ng-container>

View File

@ -291,6 +291,7 @@
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language", "DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users", "DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User", "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-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description", "DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
"UNTITLED": "Untitled", "UNTITLED": "Untitled",

View File

@ -291,6 +291,7 @@
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language", "DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Users", "DATASET-TEMPLATE-USERS": "Users",
"DATASET-TEMPLATE-REMOVE-USER": "Remove User", "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-VALIDATE-AND-ADD-USER": "Validate and Add User",
"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description", "DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
"UNTITLED": "Untitled", "UNTITLED": "Untitled",

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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