Verified Commit 3bcfc2d3 authored by Alex ORLUC's avatar Alex ORLUC

FEAT #10730 TIME 1:10 add sidebar-admin

parent 42dd73f1
<mat-sidenav-container autosize>
<mat-sidenav #snav [disableClose]="!signaturesService.mobileMode" [mode]="signaturesService.mobileMode ? 'over': 'side'" fixedInViewport="true"
[opened]="!signaturesService.mobileMode" [style.width.px]="350">
<app-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-sidebar>
<app-admin-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-admin-sidebar>
</mat-sidenav>
<mat-sidenav-content class="mainView">
<header class="header">
......
......@@ -5,8 +5,7 @@ import { HttpClient } from '@angular/common/http';
import { map, tap, finalize } from 'rxjs/operators';
export interface Privilege {
title: string;
description: string;
id: string;
icon: string;
route: string;
}
......
<mat-sidenav-container autosize>
<mat-sidenav #snav [disableClose]="!signaturesService.mobileMode" [mode]="signaturesService.mobileMode ? 'over': 'side'" fixedInViewport="true"
[opened]="!signaturesService.mobileMode" [style.width.px]="350">
<app-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-sidebar>
<app-admin-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-admin-sidebar>
</mat-sidenav>
<mat-sidenav-content class="mainView">
<header class="header">
......
......@@ -42,7 +42,6 @@ export class UserComponent implements OnInit {
this.http.get('../rest/users/' + params['id'])
.pipe(
map((data: any) => data.user),
tap(() => this.loading = true),
finalize(() => this.loading = false)
)
.subscribe({
......@@ -65,9 +64,9 @@ export class UserComponent implements OnInit {
}
onSubmit() {
this.loading = true;
this.http.put('../rest/users/' + this.user.id, this.user)
.pipe(
tap(() => this.loading = true),
finalize(() => this.loading = false)
)
.subscribe({
......@@ -87,7 +86,6 @@ export class UserComponent implements OnInit {
this.loading = true;
this.http.delete('../rest/users/' + this.user.id)
.pipe(
tap(() => this.loading = true),
finalize(() => this.loading = false)
)
.subscribe({
......
<mat-sidenav-container autosize>
<mat-sidenav #snav [disableClose]="!signaturesService.mobileMode" [mode]="signaturesService.mobileMode ? 'over': 'side'" fixedInViewport="true"
[opened]="!signaturesService.mobileMode" [style.width.px]="350">
<app-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-sidebar>
<app-admin-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-admin-sidebar>
</mat-sidenav>
<mat-sidenav-content class="mainView">
<header class="header">
......
......@@ -74,7 +74,6 @@ export class UsersListComponent implements OnInit {
this.http.get('../rest/users')
.pipe(
map((data: any) => data.users),
tap(() => this.loading = true),
finalize(() => this.loading = false)
)
.subscribe({
......@@ -95,7 +94,6 @@ export class UsersListComponent implements OnInit {
this.loading = true;
this.http.delete('../rest/users/' + userToDelete.id)
.pipe(
tap(() => this.loading = true),
finalize(() => this.loading = false)
)
.subscribe({
......
......@@ -50,6 +50,8 @@ import { MainDocumentDetailComponent } from './document/main-document-detail/mai
import { UpdatePasswordComponent } from './login/updatePassword/updatePassword.component';
// ADMINISTRATION
import { AdminSidebarComponent } from './sidebar/administration/admin-sidebar.component';
import { AdministrationComponent } from './administration/administration.component';
import { UsersListComponent } from './administration/user/users-list.component';
import { UserComponent } from './administration/user/user.component';
......@@ -93,7 +95,8 @@ import { ConfirmComponent } from './plugins/confirm.component';
AdministrationComponent,
UsersListComponent,
UserComponent,
ConfirmComponent
ConfirmComponent,
AdminSidebarComponent
],
imports: [
FormsModule,
......
<nav class="sidebar" *ngIf="snavLeftComponent.opened">
<div class="main-header">
<header class="profile-header">
<button class="logout-button" mat-icon-button (click)="logout()">
<mat-icon fontSet="fas" fontIcon="fa-power-off"></mat-icon>
</button>
<button class="home-button" mat-icon-button (click)="openHome()">
<mat-icon fontSet="fas" fontIcon="fa-home"></mat-icon>
</button>
<button *ngIf="checkClose()" class="closePanel" mat-icon-button type="button" (tap)="snavLeftComponent.close();">
<mat-icon fontSet="fas" fontIcon="fa-arrow-left fa-2x"></mat-icon>
</button>
<div class="user" style="color: #F99830">
{{signaturesService.userLogged.firstname}} {{signaturesService.userLogged.lastname}}
</div>
<div *ngIf="signaturesService.userLogged.picture" class="avatar"
[ngStyle]="{'background': 'url(' + signaturesService.userLogged.picture + ') no-repeat scroll center center / cover'}"
(click)="openProfile()">
</div>
</header>
<header class="sidebar-header">
<div routerLink="/administration" style="cursor: pointer;">
{{'lang.administration' | translate}}
</div>
</header>
</div>
<mat-nav-list class="admin-list">
<mat-list-item *ngFor="let privilege of privileges" [routerLink]="privilege.route" [class.item-active]="('/' + route.routeConfig.path).indexOf(privilege.route) !== -1">
<mat-icon matListIcon [class]="privilege.icon" color="primary"></mat-icon>
<p matLine>
{{'lang.' + privilege.id | translate}}
</p>
<mat-divider></mat-divider>
</mat-list-item>
</mat-nav-list>
</nav>
\ No newline at end of file
@import '../../../css/vars.scss';
.sidebar {
position: relative;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
&-header {
background: #F1F4F4;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
padding-top: 10px;
}
.nav {
flex: 1;
overflow-y: scroll;
margin-top: 0px;
overflow-x: hidden;
margin-bottom: 0px;
padding: 0px;
}
}
.profile-header {
background: $primary;
height: 95px;
display: flex;
justify-content: center;
position: relative;
}
.avatar {
cursor: pointer;
position: absolute;
width: 65px;
height: 65px;
border-radius: 40px;
bottom: -20px;
border: solid 3px #F99830;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: all 0.2s;
}
.avatar:hover {
box-shadow: 0px 0px 5px 0px #656565;
}
.user {
color: white;
padding-top: 10px;
font-weight: bold;
font-size: 20px;
}
.logout-button {
font-size: 24px;
color: white;
position: absolute;
left: 10px;
}
.home-button {
font-size: 24px;
color: white;
position: absolute;
left: 50px;
}
.closePanel {
color: white;
position: absolute;
right: 10px;
font-size: 24px;
}
.admin-list {
padding-top: 0;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
color: #666;
}
.item-active {
border-left: solid 5px $primary;
background: rgba($primary, 0.14);
color: $primary;
font-weight: bold;
}
\ No newline at end of file
import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';
import { MatSidenav } from '@angular/material';
import { SignaturesContentService } from '../../service/signatures.service';
import { NotificationService } from '../../service/notification.service';
import { TranslateService } from '@ngx-translate/core';
import { tap, map, finalize } from 'rxjs/operators';
export interface Privilege {
id: string;
icon: string;
route: string;
}
@Component({
selector: 'app-admin-sidebar',
templateUrl: 'admin-sidebar.component.html',
styleUrls: ['admin-sidebar.component.scss']
})
export class AdminSidebarComponent implements OnInit {
// tslint:disable-next-line:no-input-rename
@Input('snavRightComponent') snavRightComponent: MatSidenav;
// tslint:disable-next-line:no-input-rename
@Input('snavLeftComponent') snavLeftComponent: MatSidenav;
loading: boolean = true;
privileges: Privilege[] = [];
constructor(private translate: TranslateService, public http: HttpClient, public signaturesService: SignaturesContentService, private sidenav: MatSidenav, private route: ActivatedRoute, private router: Router, public notificationService: NotificationService) {
}
ngOnInit() {
$('.avatar').css({'background': 'url(data:image/png;base64,' + this.signaturesService.userLogged.picture + ') no-repeat #135F7F'}).css({'background-size': 'cover'}).css({'background-position': 'center'});
this.http.get('../rest/administrativePrivileges')
.pipe(
map((data: any) => data.privileges),
tap(() => this.loading = true),
finalize(() => this.loading = false)
)
.subscribe({
next: data => this.privileges = data,
error: err => this.notificationService.handleErrors(err)
});
}
openProfile() {
this.signaturesService.sideNavRigtDatas = {
mode : 'profile',
width : '650px',
locked : true,
};
if (this.signaturesService.mobileMode) {
this.snavLeftComponent.close();
this.snavRightComponent.open();
}
}
openHome() {
this.router.navigate(['/documents/']);
if (this.signaturesService.mobileMode) {
this.snavLeftComponent.close();
}
}
logout() {
this.http.get('../rest/logout')
.subscribe(() => {
this.router.navigate(['/login']);
}, (err: any) => {
this.notificationService.handleErrors(err);
});
}
checkClose() {
if ((this.route.routeConfig.path.indexOf('administration') !== -1 || this.signaturesService.mainDocumentId > 0) && this.signaturesService.mobileMode) {
return true;
} else {
return false;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment