Restyles admin page "Users"
This commit is contained in:
apapachristou
parent
c18e3f8e3c
commit
c62cc1068a
|
|
@ -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>
|
||||
</mat-card>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,91 @@
|
|||
.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-card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
mat-row:hover {
|
||||
// background-color: lightgray;
|
||||
}
|
||||
mat-row:hover {
|
||||
background-color: #eef5f6;
|
||||
}
|
||||
|
||||
mat-row:nth-child(odd) {
|
||||
background-color: #0c748914;
|
||||
// background-color: #eef0fb;
|
||||
}
|
||||
mat-row:nth-child(odd) {
|
||||
// background-color: #0c748914;
|
||||
// background-color: #eef0fb;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
background: #129D99 0% 0% no-repeat padding-box;
|
||||
border-radius: 30px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.export-btn {
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
border-radius: 30px;
|
||||
width: 145px;
|
||||
color: #129d99;
|
||||
border: 1px solid #129d99;
|
||||
}
|
||||
|
||||
.export-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
.export-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-container {
|
||||
flex-direction: row-reverse !important;
|
||||
justify-content: space-between !important;
|
||||
background-color: #f6f6f6;
|
||||
height: 30px;
|
||||
min-height: 30px !important;
|
||||
// flex-direction: row-reverse !important;
|
||||
// justify-content: space-between !important;
|
||||
// height: 30px;
|
||||
// min-height: 30px !important;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
::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;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue