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">
<mat-card class="mat-card">
<div class="container-fluid p-0">
<div class="row">
<mat-form-field class="col-sm-6 col-md-8">
<input matInput placeholder="{{'CRITERIA.USERS.LABEL'| translate}}" formControlName="like">
</mat-form-field>
<mat-form-field class="col-sm-6 col-md-4">
<span class="d-flex col-auto align-items-center pr-0 show">{{'CRITERIA.USERS.SHOW' | translate}}:</span>
<mat-form-field appearance="outline" class="sort-form col-auto">
<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-select>
</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>
</form>

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

@ -1,2 +1,33 @@
.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()">
<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-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option>
</mat-select>
@ -7,9 +12,11 @@
</mat-form-field>
<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 *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>
</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">
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
<div class="col-auto ml-auto">
<button mat-raised-button type="button" class="export-btn" (click)="exportUsers()">
<mat-icon class="mr-2 export-icon">save_alt</mat-icon>{{'USERS.LISTING.EXPORT' | translate}}
</button>
<button mat-raised-button type="button" class="export-btn" (click)="exportUsers()">{{'USERS.LISTING.EXPORT' | translate}}</button>
</div>
</div>
<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>
<!-- 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">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.NAME' | translate}}</mat-header-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 cdkColumnDef="email">
@ -40,8 +50,8 @@
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
<!-- </mat-card> -->
</div>
</div>
</div>

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

@ -1,27 +1,57 @@
.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 {
margin-top: 1rem;
margin-top: 2rem;
margin-left: 1rem;
margin-right: 2rem;
.mat-card {
margin: 1em 0;
}
mat-row:hover {
// background-color: lightgray;
background-color: #eef5f6;
}
mat-row:nth-child(odd) {
background-color: #0c748914;
// background-color: #0c748914;
// background-color: #eef0fb;
}
.export-btn {
background: #129D99 0% 0% no-repeat padding-box;
background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 30px;
color: #ffffff;
width: 145px;
color: #129d99;
border: 1px solid #129d99;
}
.export-icon {
@ -30,32 +60,32 @@
}
::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important;
justify-content: space-between !important;
// flex-direction: row-reverse !important;
// justify-content: space-between !important;
// height: 30px;
// min-height: 30px !important;
background-color: #f6f6f6;
height: 30px;
min-height: 30px !important;
}
::ng-deep .mat-paginator-page-size {
height: 43px;
}
// ::ng-deep .mat-paginator-page-size {
// height: 43px;
// }
::ng-deep .mat-paginator-range-label {
margin: 15px 32px 0 24px !important;
}
// ::ng-deep .mat-paginator-range-label {
// margin: 15px 32px 0 24px !important;
// }
::ng-deep .mat-paginator-range-actions {
width: 55% !important;
min-height: 43px !important;
justify-content: space-between;
}
// ::ng-deep .mat-paginator-range-actions {
// width: 55% !important;
// min-height: 43px !important;
// justify-content: space-between;
// }
::ng-deep .mat-paginator-navigation-previous {
margin-left: auto !important;
}
// ::ng-deep .mat-paginator-navigation-previous {
// margin-left: auto !important;
// }
::ng-deep .mat-icon-button {
height: 30px !important;
font-size: 12px !important;
}
// ::ng-deep .mat-icon-button {
// height: 30px !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() {
// No-op
}
// getSort(): MatSort {
// return this._sort;
// }
// setSort(sort: MatSort) {
// console.log(this._sort);
// console.log(sort);
// this._sort = sort;
// }
}
@Component({
@ -103,7 +112,7 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
breadCrumbs: Observable<BreadcrumbItem[]>;
dataSource: UsersDataSource | null;
displayedColumns: String[] = ['name', 'email', 'lastloggedin', 'roles'];
displayedColumns: String[] = ['avatar', 'name', 'email', 'lastloggedin', 'roles'];
constructor(
private userService: UserService,
@ -128,6 +137,9 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
this.criteria.setCriteria(this.getDefaultCriteria());
this.criteria.controlModified();
});
// if (this.dataSource) {
// this.dataSource.setSort(this.sort);
// }
}
refresh() {
@ -169,4 +181,12 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
}
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": {
"LABEL": "Suche",
"ROLE": "Rolle"
"ROLE": "Rolle",
"SHOW": "Show"
},
"SELECT": "Option wählen",
"LIKE": "Search"
@ -1076,6 +1077,10 @@
"NAME": "Name",
"PERMISSIONS": "Berechtigungen",
"EXPORT": "Export users"
},
"ACTIONS": {
"EDIT": "Edit",
"SAVE": "Save"
}
},
"TYPES": {

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

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

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

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

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

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

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

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

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

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