Verified Commit c5947aa4 authored by Alex ORLUC's avatar Alex ORLUC

FEAT #10730 TIME 1:30 add front user modif admin

parent 4b380198
<mat-sidenav-container autosize>
<mat-sidenav #snav disableClose [mode]="signaturesService.mobileMode ? 'over': 'side'" fixedInViewport="true"
<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>
</mat-sidenav>
......
<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>
</mat-sidenav>
<mat-sidenav-content class="mainView">
<header class="header">
<div class="header-title">
<button *ngIf="signaturesService.mobileMode" mat-icon-button (click)="this.snav.toggle();">
<mat-icon fontSet="fas" fontIcon="fa-bars" style="font-size: 24px;"></mat-icon>
</button>
<span *ngIf="!loading">{{user.firstname}} {{user.lastname}}</span>
</div>
<div style="padding-right: 10px;">
<div *ngIf="!loading" class="avatarProfile"
[ngStyle]="{'background': 'url(' + user.picture + ') no-repeat scroll center center / cover'}">
</div>
</div>
</header>
<div class="container">
<div *ngIf="loading" class="loader">
<mat-spinner></mat-spinner>
</div>
<form class="admin-form" *ngIf="!loading" (ngSubmit)="onSubmit()" #adminForm="ngForm">
<mat-form-field class="input-row">
<input name="login" matInput placeholder="{{'lang.login' | translate}}" type="text" [(ngModel)]="user.login"
(keyup)="newLogin.login=newLogin.login.toLowerCase()" disabled required>
</mat-form-field>
<mat-form-field class="input-row">
<input name="email" matInput placeholder="{{'lang.email' | translate}}" type="mail" [(ngModel)]="user.email"
pattern="(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$)" required>
</mat-form-field>
<mat-form-field class="input-row">
<input name="firstname" matInput placeholder="{{'lang.firstname' | translate}}" [(ngModel)]="user.firstname"
required>
</mat-form-field>
<mat-form-field class="input-row">
<input name="nom" matInput placeholder="{{'lang.lastname' | translate}}" [(ngModel)]="user.lastname" required>
</mat-form-field>
<div class="actions-form">
<button mat-stroked-button type="submit" class="btn blue" [disabled]="!adminForm.form.valid || !canValidate()">{{'lang.validate' | translate}}</button>
<button mat-stroked-button type="button" class="btn red" (click)="delete()">{{'lang.delete' | translate}}</button>
</div>
</form>
</div>
</mat-sidenav-content>
<mat-sidenav #snavRight disableClose [mode]="signaturesService.mobileMode ? 'over': 'side'" [opened]="false"
fixedInViewport="true" position='end'>
</mat-sidenav>
</mat-sidenav-container>
\ No newline at end of file
@import '../../../css/vars.scss';
.header {
background: $primary;
height: 95px;
color: white;
display: flex;
align-items: center;
padding-left: 10px;
font-size: 25px;
&-title {
flex: 1;
align-items: center;
display: flex;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
b {
color: #F99830;
}
span {
overflow: hidden;
text-overflow: ellipsis;
}
}
.mainView {
display: flex;
flex-direction: column;
}
.container {
flex: 1;
overflow: auto;
}
.loader {
position: absolute;
z-index: 2;
display: flex;
background: #fffc;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
top: 0;
margin: 0;
padding: 0;
}
.admin-form {
display: flex;
flex-direction: column;
padding: 20px;
}
.avatarProfile {
width: 65px;
height: 65px;
border-radius: 40px;
border: solid 3px #F99830;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: all 0.2s;
}
.actions-form {
display: flex;
justify-content: center;
button {
margin: 10px;
width: 150px;
}
}
\ No newline at end of file
import { Component, OnInit, ViewChild } from '@angular/core';
import { SignaturesContentService } from '../../service/signatures.service';
import { NotificationService } from '../../service/notification.service';
import { HttpClient } from '@angular/common/http';
import { MatDialog } from '@angular/material';
import { map, tap, finalize } from 'rxjs/operators';
import { ActivatedRoute, Router } from '@angular/router';
import { ConfirmComponent } from '../../plugins/confirm.component';
export interface User {
id: string;
firstname: string;
lastname: string;
login: string;
email: string;
picture: string;
}
@Component({
selector: 'app-administration-user',
templateUrl: 'user.component.html',
styleUrls: ['user.component.scss'],
})
export class UserComponent implements OnInit {
creationMode: boolean = true;
loading: boolean = true;
user: User;
userClone: User;
constructor(public http: HttpClient, private route: ActivatedRoute, private router: Router, public signaturesService: SignaturesContentService, public notificationService: NotificationService, public dialog: MatDialog) {
}
ngOnInit(): void {
this.route.params.subscribe((params: any) => {
if (params['id'] === undefined) {
this.creationMode = true;
} else {
this.creationMode = false;
this.http.get('../rest/users/' + params['id'])
.pipe(
map((data: any) => data.user),
tap(() => this.loading = true),
finalize(() => this.loading = false)
)
.subscribe({
next: data => {
this.user = data;
this.userClone = JSON.parse(JSON.stringify(this.user));
},
error: err => this.notificationService.handleErrors(err)
});
}
});
}
canValidate() {
if (JSON.stringify(this.user) === JSON.stringify(this.userClone)) {
return false;
} else {
return true;
}
}
onSubmit() {
this.http.put('../rest/users/' + this.user.id, this.user)
.pipe(
tap(() => this.loading = true),
finalize(() => this.loading = false)
)
.subscribe({
next: () => {
this.router.navigate(['/administration/users']);
this.notificationService.success('lang.userUpdated');
},
error: err => this.notificationService.handleErrors(err)
});
}
delete() {
const dialogRef = this.dialog.open(ConfirmComponent, { autoFocus: false });
dialogRef.afterClosed().subscribe(result => {
if (result === 'yes') {
this.loading = true;
this.http.delete('../rest/users/' + this.user.id)
.pipe(
tap(() => this.loading = true),
finalize(() => this.loading = false)
)
.subscribe({
next: () => {
this.router.navigate(['/administration/users']);
this.notificationService.success('lang.userDeleted');
},
error: err => this.notificationService.handleErrors(err)
});
}
});
}
}
<mat-sidenav-container autosize>
<mat-sidenav #snav disableClose [mode]="signaturesService.mobileMode ? 'over': 'side'" fixedInViewport="true"
<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>
</mat-sidenav>
......@@ -46,7 +46,7 @@
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" routerLink="/administration/users/{{row.id}}"
<mat-row matRipple *matRowDef="let row; columns: displayedColumns;" routerLink="/administration/users/{{row.id}}"
style="cursor:pointer;"></mat-row>
</mat-table>
<div class="noResult" *ngIf="dataSource.filteredData.length === 0">
......
......@@ -52,6 +52,7 @@ import { UpdatePasswordComponent } from './login/updatePassword/updatePassword.c
// ADMINISTRATION
import { AdministrationComponent } from './administration/administration.component';
import { UsersListComponent } from './administration/user/users-list.component';
import { UserComponent } from './administration/user/user.component';
// SERVICES
......@@ -91,6 +92,7 @@ import { ConfirmComponent } from './plugins/confirm.component';
MainDocumentDetailComponent,
AdministrationComponent,
UsersListComponent,
UserComponent,
ConfirmComponent
],
imports: [
......@@ -116,6 +118,8 @@ import { ConfirmComponent } from './plugins/confirm.component';
RouterModule.forRoot([
{ path: 'administration', component: AdministrationComponent },
{ path: 'administration/users', component: UsersListComponent },
{ path: 'administration/users/new', component: UserComponent },
{ path: 'administration/users/:id', component: UserComponent },
{ path: 'documents/:id', component: DocumentComponent },
{ path: 'documents', component: DocumentComponent },
{ path: 'login', component: LoginComponent },
......
......@@ -60,7 +60,7 @@ button:disabled {
border: 1px solid black;
background-color: #fff;
padding: 0 25px;
border-radius: 25px;
border-radius: 25px !important;
cursor: pointer;
outline: none;
&.btn-xs {
......
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