MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Restyles admin page "Users"

This commit is contained in:
apapachristou 2020-12-04 18:26:20 +02:00
parent c18e3f8e3c
commit c62cc1068a
13 changed files with 280 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.html
View File

@ -1,14 +1,18 @@
<form class="user-roles-criteria" [formGroup]="formGroup"> <form class="user-roles-criteria" [formGroup]="formGroup">
<mat-card class="mat-card"> <div class="container-fluid p-0">
<div class="row"> <div class="row">
<mat-form-field class="col-sm-6 col-md-8"> <span class="d-flex col-auto align-items-center pr-0 show">{{'CRITERIA.USERS.SHOW' | translate}}:</span>
<input matInput placeholder="{{'CRITERIA.USERS.LABEL'| translate}}" formControlName="like"> <mat-form-field appearance="outline" class="sort-form col-auto">
</mat-form-field>
<mat-form-field class="col-sm-6 col-md-4">
<mat-select placeholder="{{'CRITERIA.USERS.ROLE' | translate}}" formControlName="appRoles" multiple> <mat-select placeholder="{{'CRITERIA.USERS.ROLE' | translate}}" formControlName="appRoles" multiple>
<mat-option *ngFor="let role of rolesEnum" [value]="role">{{enumUtils.convertFromPrincipalAppRole(role)}}</mat-option> <mat-option *ngFor="let role of rolesEnum" [value]="role">{{enumUtils.convertFromPrincipalAppRole(role)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.USERS.LABEL'| translate}}" formControlName="like">
<!-- <mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error> -->
</mat-form-field>
</div> </div>
</mat-card> </div>
</form> </form>

31
dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.scss
View File

@ -1,2 +1,33 @@
.user-roles-criteria { .user-roles-criteria {
.container-fluid {
margin-top: 5rem;
}
.show {
color: #A8A8A8;
}
.search-form {
text-align: left;
width: 20rem;
}
.search-form mat-icon {
color: #129d99;
}
}
::ng-deep .search-form .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .sort-form .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
} }

13
dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html
View File

@ -1,5 +1,10 @@
<form class="d-flex user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()"> <form class="d-flex user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
<mat-form-field class="roles-width-80"> <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}">
{{getPrincipalAppRoleWithLanguage(role)}}
</div>
</div>
<mat-form-field *ngIf="this.nowEditing" class="select-role roles-width-180">
<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>
@ -7,9 +12,11 @@
</mat-form-field> </mat-form-field>
<button *ngIf="!this.nowEditing" mat-icon-button color="primary" type="button" (click)="editItem()"> <button *ngIf="!this.nowEditing" 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>
</button> </button>
<button *ngIf="this.nowEditing" mat-icon-button color="primary" type="submit"> <button *ngIf="this.nowEditing" 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>
</button> </button>
</form> </form>

80
dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
View File

@ -0,0 +1,80 @@
.user-role-editor {
align-items: center;
margin-top: 1.125rem;
.select-role {
// margin-top: 1rem;
}
.roles {
min-width: 90px;
margin-right: 6rem;
}
.roles-width-180 {
width: 180px;
margin-right: 8px;
}
.row-action {
color: #129d99;
cursor: pointer;
}
.user {
display: flex;
justify-content: center;
align-items: center;
width: 67px;
height: 28px;
color: #00c4ff;
background: #d3f5ff 0% 0% no-repeat padding-box;
border-radius: 44px;
letter-spacing: 0.11px;
font-weight: 400;
opacity: 1;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.manager {
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 28px;
color: #568b5a;
background: #9dd1a1 0% 0% no-repeat padding-box;
border-radius: 44px;
letter-spacing: 0.11px;
font-weight: 400;
opacity: 1;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.admin {
display: flex;
justify-content: center;
align-items: center;
width: 77px;
height: 28px;
color: #ff3d33;
background: #ffd5d3 0% 0% no-repeat padding-box;
border-radius: 44px;
letter-spacing: 0.11px;
font-weight: 400;
opacity: 1;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
}
::ng-deep .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}

28
dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
View File

@ -3,19 +3,29 @@
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3> <h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
<div class="col-auto ml-auto"> <div class="col-auto ml-auto">
<button mat-raised-button type="button" class="export-btn" (click)="exportUsers()"> <button mat-raised-button type="button" class="export-btn" (click)="exportUsers()">{{'USERS.LISTING.EXPORT' | translate}}</button>
<mat-icon class="mr-2 export-icon">save_alt</mat-icon>{{'USERS.LISTING.EXPORT' | translate}}
</button>
</div> </div>
</div> </div>
<app-user-criteria-component></app-user-criteria-component> <app-user-criteria-component></app-user-criteria-component>
<mat-card class="mat-card"> <!-- <mat-card class="mat-card"> -->
<div class="mat-elevation-z6">
<mat-table [dataSource]="dataSource" matSort> <mat-table [dataSource]="dataSource" matSort>
<!-- Column Definition: Label --> <!-- Column Definition: Label -->
<ng-container cdkColumnDef="avatar">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row">
<img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl">
<img mat-card-avatar *ngIf="!row.avatarUrl" class="my-mat-card-avatar" [src]="'assets/images/profile-placeholder.png'">
</mat-cell>
</ng-container>
<ng-container cdkColumnDef="name"> <ng-container cdkColumnDef="name">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell> <mat-cell *matCellDef="let row">
<!-- <img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl"> -->
{{row.name}}
</mat-cell>
</ng-container> </ng-container>
<ng-container cdkColumnDef="email"> <ng-container cdkColumnDef="email">
@ -40,8 +50,8 @@
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table> </mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]"> <mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
</mat-paginator> <!-- </mat-card> -->
</mat-card> </div>
</div> </div>
</div> </div>

116
dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss
View File

@ -1,61 +1,91 @@
.mat-table { .mat-table {
margin: 24px; margin-top: 47px;
margin-bottom: 20px;
background: #fafafa 0% 0% no-repeat padding-box;
// box-shadow: 0px 5px 12px #00000038;
border-radius: 4px;
.mat-header-row {
background: #f3f5f8;
}
mat-header-cell:first-of-type {
padding-left: 46px;
max-width: 120px;
}
mat-cell:first-of-type {
padding-left: 46px;
max-width: 120px;
}
.my-mat-card-avatar {
height: 40px;
width: 40px;
border-radius: 50%;
flex-shrink: 0;
margin-right: 2.5rem;
}
} }
.user-listing { .user-listing {
margin-top: 1rem; margin-top: 2rem;
margin-left: 1rem;
margin-right: 2rem;
.mat-card { .mat-card {
margin: 1em 0; margin: 1em 0;
} }
mat-row:hover { mat-row:hover {
// background-color: lightgray; background-color: #eef5f6;
} }
mat-row:nth-child(odd) { mat-row:nth-child(odd) {
background-color: #0c748914; // background-color: #0c748914;
// background-color: #eef0fb; // background-color: #eef0fb;
} }
.export-btn { .export-btn {
background: #129D99 0% 0% no-repeat padding-box; background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 30px; border-radius: 30px;
color: #ffffff; width: 145px;
} color: #129d99;
border: 1px solid #129d99;
}
.export-icon { .export-icon {
font-size: 20px; font-size: 20px;
} }
} }
::ng-deep .mat-paginator-container { ::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important; // flex-direction: row-reverse !important;
justify-content: space-between !important; // justify-content: space-between !important;
background-color: #f6f6f6; // height: 30px;
height: 30px; // min-height: 30px !important;
min-height: 30px !important; background-color: #f6f6f6;
} }
::ng-deep .mat-paginator-page-size { // ::ng-deep .mat-paginator-page-size {
height: 43px; // height: 43px;
} // }
::ng-deep .mat-paginator-range-label { // ::ng-deep .mat-paginator-range-label {
margin: 15px 32px 0 24px !important; // margin: 15px 32px 0 24px !important;
} // }
::ng-deep .mat-paginator-range-actions { // ::ng-deep .mat-paginator-range-actions {
width: 55% !important; // width: 55% !important;
min-height: 43px !important; // min-height: 43px !important;
justify-content: space-between; // justify-content: space-between;
} // }
::ng-deep .mat-paginator-navigation-previous { // ::ng-deep .mat-paginator-navigation-previous {
margin-left: auto !important; // margin-left: auto !important;
} // }
::ng-deep .mat-icon-button { // ::ng-deep .mat-icon-button {
height: 30px !important; // height: 30px !important;
font-size: 12px !important; // font-size: 12px !important;
} // }

22
dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts
View File

@ -88,6 +88,15 @@ export class UsersDataSource extends DataSource<UserListingModel> {
disconnect() { disconnect() {
// No-op // No-op
} }
// getSort(): MatSort {
// return this._sort;
// }
// setSort(sort: MatSort) {
// console.log(this._sort);
// console.log(sort);
// this._sort = sort;
// }
} }
@Component({ @Component({
@ -103,7 +112,7 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
breadCrumbs: Observable<BreadcrumbItem[]>; breadCrumbs: Observable<BreadcrumbItem[]>;
dataSource: UsersDataSource | null; dataSource: UsersDataSource | null;
displayedColumns: String[] = ['name', 'email', 'lastloggedin', 'roles']; displayedColumns: String[] = ['avatar', 'name', 'email', 'lastloggedin', 'roles'];
constructor( constructor(
private userService: UserService, private userService: UserService,
@ -128,6 +137,9 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
this.criteria.setCriteria(this.getDefaultCriteria()); this.criteria.setCriteria(this.getDefaultCriteria());
this.criteria.controlModified(); this.criteria.controlModified();
}); });
// if (this.dataSource) {
// this.dataSource.setSort(this.sort);
// }
} }
refresh() { refresh() {
@ -169,4 +181,12 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
} }
return filename; return filename;
} }
// public principalHasAvatar(): boolean {
// return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0;
// }
// public getPrincipalAvatar(): string {
// return this.authentication.current().avatarUrl;
// }
} }

7
dmp-frontend/src/assets/i18n/de.json
View File

@ -993,7 +993,8 @@
}, },
"USERS": { "USERS": {
"LABEL": "Suche", "LABEL": "Suche",
"ROLE": "Rolle" "ROLE": "Rolle",
"SHOW": "Show"
}, },
"SELECT": "Option wählen", "SELECT": "Option wählen",
"LIKE": "Search" "LIKE": "Search"
@ -1076,6 +1077,10 @@
"NAME": "Name", "NAME": "Name",
"PERMISSIONS": "Berechtigungen", "PERMISSIONS": "Berechtigungen",
"EXPORT": "Export users" "EXPORT": "Export users"
},
"ACTIONS": {
"EDIT": "Edit",
"SAVE": "Save"
} }
}, },
"TYPES": { "TYPES": {

7
dmp-frontend/src/assets/i18n/en.json
View File

@ -993,7 +993,8 @@
}, },
"USERS": { "USERS": {
"LABEL": "Search", "LABEL": "Search",
"ROLE": "Role" "ROLE": "Role",
"SHOW": "Show"
}, },
"SELECT": "Select an option", "SELECT": "Select an option",
"LIKE": "Search" "LIKE": "Search"
@ -1076,6 +1077,10 @@
"NAME": "Name", "NAME": "Name",
"PERMISSIONS": "Permissions", "PERMISSIONS": "Permissions",
"EXPORT": "Export users" "EXPORT": "Export users"
},
"ACTIONS": {
"EDIT": "Edit",
"SAVE": "Save"
} }
}, },
"TYPES": { "TYPES": {

7
dmp-frontend/src/assets/i18n/es.json
View File

@ -993,7 +993,8 @@
}, },
"USERS": { "USERS": {
"LABEL": "Búsqueda", "LABEL": "Búsqueda",
"ROLE": "Función" "ROLE": "Función",
"SHOW": "Show"
}, },
"SELECT": "Seleccionar una opción", "SELECT": "Seleccionar una opción",
"LIKE": "Buscar" "LIKE": "Buscar"
@ -1076,6 +1077,10 @@
"NAME": "Nombre", "NAME": "Nombre",
"PERMISSIONS": "Permisos", "PERMISSIONS": "Permisos",
"EXPORT": "Export users" "EXPORT": "Export users"
},
"ACTIONS": {
"EDIT": "Edit",
"SAVE": "Save"
} }
}, },
"TYPES": { "TYPES": {

7
dmp-frontend/src/assets/i18n/gr.json
View File

@ -993,7 +993,8 @@
}, },
"USERS": { "USERS": {
"LABEL": "Αναζήτηση", "LABEL": "Αναζήτηση",
"ROLE": "Ρόλος" "ROLE": "Ρόλος",
"SHOW": "Show"
}, },
"SELECT": "Επιλογή", "SELECT": "Επιλογή",
"LIKE": "Αναζήτηση" "LIKE": "Αναζήτηση"
@ -1076,6 +1077,10 @@
"NAME": "Όνομα", "NAME": "Όνομα",
"PERMISSIONS": "Άδειες", "PERMISSIONS": "Άδειες",
"EXPORT": "Εξαγωγή χρηστών" "EXPORT": "Εξαγωγή χρηστών"
},
"ACTIONS": {
"EDIT": "Edit",
"SAVE": "Save"
} }
}, },
"TYPES": { "TYPES": {

7
dmp-frontend/src/assets/i18n/sk.json
View File

@ -993,7 +993,8 @@
}, },
"USERS": { "USERS": {
"LABEL": "Hľadať", "LABEL": "Hľadať",
"ROLE": "Rola" "ROLE": "Rola",
"SHOW": "Show"
}, },
"SELECT": "Vybrať možnosť", "SELECT": "Vybrať možnosť",
"LIKE": "Hľadať" "LIKE": "Hľadať"
@ -1076,6 +1077,10 @@
"NAME": "Meno", "NAME": "Meno",
"PERMISSIONS": "Povolenia", "PERMISSIONS": "Povolenia",
"EXPORT": "Export users" "EXPORT": "Export users"
},
"ACTIONS": {
"EDIT": "Edit",
"SAVE": "Save"
} }
}, },
"TYPES": { "TYPES": {

7
dmp-frontend/src/assets/i18n/tr.json
View File

@ -993,7 +993,8 @@
}, },
"USERS": { "USERS": {
"LABEL": "Arama", "LABEL": "Arama",
"ROLE": "Görev" "ROLE": "Görev",
"SHOW": "Show"
}, },
"SELECT": "Bir seçenek seçin", "SELECT": "Bir seçenek seçin",
"LIKE": "Ara" "LIKE": "Ara"
@ -1076,6 +1077,10 @@
"NAME": "İsim", "NAME": "İsim",
"PERMISSIONS": "İzinler", "PERMISSIONS": "İzinler",
"EXPORT": "Export users" "EXPORT": "Export users"
},
"ACTIONS": {
"EDIT": "Edit",
"SAVE": "Save"
} }
}, },
"TYPES": { "TYPES": {