Skip to content
Snippets Groups Projects
Commit 88d5bed8 authored by Delphine's avatar Delphine Committed by pybelecalo
Browse files

[US TRTL-524] Add new sidenav header component 

[US TRTL-524] Update redesigned apps with the new sidenav header


[US TRTL-524] Fix user group tab profiles list


[US TRTL-524] Fix side panel long title display
parent 5c8b48fe
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 271 additions and 329 deletions
ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html 0 → 100644
+ 27
− 0
View file @ 88d5bed8
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
<div class="d-flex justify-content-end">
<button class="btn link xx-large" (click)="onclose.emit()"><i class="material-icons">close</i></button>
</div>
<!-- if we have a one line title (25 chars), then apply a top margin -->
<div class="title" [class.mt-3]="title?.length < 26">
<i class="vitamui-icon {{icon}}"
[ngClass]="{
'status-badge-green': badge === 'green',
'status-badge-grey': badge === 'grey',
'status-badge-orange': badge === 'orange'
}">
</i>
<div>
<h2>{{title}}</h2>
<p>{{subtitle}}</p>
</div>
<div class="d-flex align-items-end actions">
<ng-content></ng-content>
</div>
</div>
</div>
</div>
ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.ts 0 → 100644
+ 23
− 0
View file @ 88d5bed8
import { EventEmitter, Input } from '@angular/core';
import { Component, Output } from '@angular/core';
@Component({
selector: 'vitamui-common-sidenav-header',
templateUrl: './vitamui-sidenav-header.component.html',
styleUrls: ['./vitamui-sidenav-header.component.scss']
})
export class VitamuiSidenavHeaderComponent {
@Input() icon: string;
@Input() badge: 'green' | 'grey' | 'orange';
@Input() title: string;
@Input() subtitle: string;
@Output() onclose = new EventEmitter<undefined>();
constructor() { }
}
ui/ui-frontend/projects/identity/src/app/user/user-preview/user-preview.component.spec.ts → ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.module.ts
+ 50
− 0
View file @ 88d5bed8
......@@ -34,117 +34,17 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
/* tslint:disable:max-classes-per-file */
// import { Component, Input } from '@angular/core';
// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
// import { ReactiveFormsModule } from '@angular/forms';
// import { MatMenuModule } from '@angular/material/menu';
// import { MatTabsModule } from '@angular/material/tabs';
// import { NoopAnimationsModule } from '@angular/platform-browser/animations';
// import { ActivatedRoute, Router } from '@angular/router';
// import { of, Subject } from 'rxjs';
// import { EditableFieldModule } from '../../common';
// import { SlideToggleComponent } from '../../common/slide-toggle/slide-toggle.component';
// import { PanelService } from '../../panel.service';
// import { User } from '../models';
// import { UserCreateValidators } from '../user-create/user-create.validators';
// import { UserService } from '../user.service';
// import { UserInfoTabComponent } from './user-information-tab/user-information-tab.component';
// import { UserPreviewComponent } from './user-preview.component';
// @Component({ selector: 'app-user-info-tab', template: '' })
// export class UserInfoTabStubComponent {
// @Input() user: User;
// @Input() readOnly: boolean;
// }
// @Component({ selector: 'app-user-group-tab', template: '' })
// export class UserGroupTabStubComponent {
// @Input() user: User;
// @Input() readOnly: boolean;
// }
// describe('UserPreviewComponent', () => {
// let component: UserPreviewComponent;
// let fixture: ComponentFixture<UserPreviewComponent>;
// beforeEach(async(() => {
// const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
// const userServiceSpy = {
// update: of({}),
// updated: new Subject()
// };
// const userCreateValidatorsSpy = jasmine.createSpyObj(
// 'UserCreateValidators',
// { uniqueEmail: (email: string) => of(null)
// });
// TestBed.configureTestingModule({
// imports: [
// MatMenuModule,
// MatTabsModule,
// NoopAnimationsModule,
// ReactiveFormsModule,
// EditableFieldModule,
// VitamUICommonModule,
// ],
// declarations: [ UserPreviewComponent, UserInfoTabComponent, UserGroupTabStubComponent, SlideToggleComponent ],
// providers: [
// { provide: Router, useValue: routerSpy },
// { provide: ActivatedRoute, useValue: { data: of({ customer: { id: '11' } }) } },
// { provide: PanelService, useValue: { previewOpen: false } },
// { provide: UserService, useValue: userServiceSpy },
// { provide: UserCreateValidators, useValue: userCreateValidatorsSpy },
// ]
// })
// .compileComponents();
// }));
// beforeEach(() => {
// fixture = TestBed.createComponent(UserPreviewComponent);
// component = fixture.componentInstance;
// fixture.detectChanges();
// });
// it('should create', () => {
// expect(component).toBeTruthy();
// });
// it('should set open to true', () => {
// const panelService = TestBed.get(PanelService);
// expect(panelService.open).toBeTruthy();
// });
// it('should set open to false', () => {
// const panelService = TestBed.get(PanelService);
// component.ngOnDestroy();
// expect(panelService.open).toBeFalsy();
// });
// it('should set the preview outlet to null', () => {
// const routerSpy = TestBed.get(Router);
// component.closePreview();
// expect(routerSpy.navigate).toHaveBeenCalledWith([{ outlets: { sidenav: null }}]);
// });
// it('should call window.open', () => {
// const openSpy = spyOn(window, 'open');
// openSpy.and.stub();
// component.openPopup();
// expect(openSpy).toHaveBeenCalledWith(
// '/customer/11',
// 'detailPopup',
// 'width=584, height=713, resizable=no, location=no'
// );
// });
// it('should call window.close', () => {
// const closeSpy = spyOn(window, 'close');
// closeSpy.and.stub();
// component.closePopup();
// expect(closeSpy).toHaveBeenCalled();
// });
// });
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { VitamuiSidenavHeaderComponent } from './vitamui-sidenav-header.component';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule
],
declarations: [VitamuiSidenavHeaderComponent],
exports: [VitamuiSidenavHeaderComponent]
})
export class VitamuiSidenavHeaderModule { }
ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts
+ 4
− 1
View file @ 88d5bed8
......@@ -80,6 +80,7 @@ import { VitamUIInputModule } from './components/vitamui-input/vitamui-input.mod
import { VitamUIListInputModule } from './components/vitamui-list-input/vitamui-list-input.module';
import { VitamuiMenuButtonModule } from './components/vitamui-menu-button/vitamui-menu-button.module';
import { VitamUIMenuTileModule } from './components/vitamui-menu-tile/vitamui-menu-tile.module';
import { VitamuiSidenavHeaderModule } from './components/vitamui-sidenav-header/vitamui-sidenav-header.module';
import { VitamUISnackBarModule } from './components/vitamui-snack-bar/vitamui-snack-bar.module';
import { VitamUITenantSelectModule } from './components/vitamui-tenant-select/vitamui-tenant-select.module';
import { CollapseDirectiveModule } from './directives/collapse/collapse.directive.module';
......@@ -160,7 +161,8 @@ export function startupServiceFactory(startupService: StartupService) {
VitamuiContentBreadcrumbModule,
VitamuiCommonBannerModule,
UserPhotoModule,
VitamuiMenuButtonModule
VitamuiMenuButtonModule,
VitamuiSidenavHeaderModule
],
entryComponents: [
ErrorDialogComponent
......@@ -212,6 +214,7 @@ export function startupServiceFactory(startupService: StartupService) {
UserPhotoModule,
CommonProgressBarModule,
CommonTooltipModule,
VitamuiSidenavHeaderModule,
VitamuiMenuButtonModule
],
providers: [
......
ui/ui-frontend-common/src/sass/_button.scss
+ 8
− 0
View file @ 88d5bed8
......@@ -164,6 +164,14 @@
inline-size: initial!important;
}
&.xx-large {
font-size: xx-large;
> i {
font-size: xx-large!important;
}
}
&:hover {
span {
text-decoration: underline;
......
ui/ui-frontend-common/src/sass/_sidepanel.scss
+ 36
− 69
View file @ 88d5bed8
.vitamui-sidepanel {
background: white;
width: 584px;
height: 100vh;
background: white;
}
.vitamui-sidepanel-header {
padding: 10px;
height: 200px;
background-color: var(--vitamui-primary);
.btn-popup {
font-size: 32px;
background: none;
border: none;
padding: 0;
color: white;
}
.btn-close {
background: none;
border: none;
padding: 0;
float: right;
opacity: 0.5;
color: white;
text-decoration: none;
i {
font-size: 38px;
line-height: 22px;
width: 30px;
}
}
background-color: white;
padding: 10px 15px 10px 10px;
height: 204px;
.title {
display: flex;
align-items: center;
margin-top: 30px;
padding: 0 30px;
> i {
color: white;
margin-right: 20px;
font-size: 38px;
color: var(--vitamui-grey-900);
font-size: 45px;
}
.vitamui-sidepanel-title-icon {
margin-right: 10px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
&:before {
color: white;
}
}
h2 {
color: white;
font-size: 24px;
// DEPREACTED : REMOVE THIS H2 CSS AT THE END OF THE REDESIGN
> h2 {
color: var(--vitamui-grey-900);
padding-left: 1.5rem;
line-height: 24px;
font-weight: 700;
margin: 0;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 71%;
}
small {
display: block;
font-weight: 300;
font-size: 18px;
line-height: 24px;
> div:first-of-type {
width: 66%;
padding-left: 1.5rem;
> h2 {
color: var(--vitamui-grey-900);
margin: 0;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
}
.btn-circle {
width: 50px;
height: 50px;
line-height: 50px;
margin-left: 40px;
> p {
color: var(--vitamui-grey-900);
margin: 0;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
}
}
.spinner-white {
.mat-progress-spinner circle, .mat-spinner circle {
stroke: white
> .actions {
width: 25%;
}
}
}
......@@ -99,7 +66,7 @@
bottom: 0;
right: 0;
left: 0;
top: 163px;
top: 165px;
}
.mat-drawer-content {
......
ui/ui-frontend-common/src/sass/_spinner.scss
+ 0
− 1
View file @ 88d5bed8
.vitamui-spinner {
&.mat-progress-spinner circle, .mat-spinner circle {
stroke: var(--vitamui-grey-600);
......
ui/ui-frontend-common/src/sass/material/_preview-tab.scss
+ 23
− 37
View file @ 88d5bed8
.preview-tab-group.mat-tab-group {
height: 100%;
.mat-tab-header {
border-bottom: none;
margin-left: 40px;
margin-right: 40px;
}
.mat-tab-label {
opacity: 1;
min-width: auto;
height: 37px;
background-color: var(--vitamui-primary-700);
margin: 0 1px;
padding: 0 14px;
font-size: 14px;
font-weight: 500;
color: white;
transition: background-color 200ms ease-out, color 200ms ease-out;
color: var(--vitamui-grey-900);
&:hover {
background-color:var(--vitamui-primary-400);
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
background-color: var(--vitamui-grey-300);
}
&:not(.mat-tab-disabled):focus {
background-color: var(--vitamui-grey-300);
}
&.mat-tab-label-active,
&.mat-tab-label-active:not(.mat-tab-disabled):focus {
background-color: $white;
font-weight: bold;
color: var(--vitamui-grey-800);
}
}
.mat-ink-bar {
opacity: 0;
.mat-tab-header {
border-top: 1px solid var(--vitamui-grey-400);
border-bottom: 1px solid var(--vitamui-grey-400);
}
.mat-tab-body-content {
padding: 30px 55px 30px 40px;
padding: 35px 30px;
overflow: visible;
}
}
.mat-ink-bar {
background-color: transparent!important;
&::before {
content: '';
display: block;
width: 50%;
background-color: var(--vitamui-primary);
height: 6px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
left: 25%;
position: relative;
}
}
}
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
+ 3
− 13
View file @ 88d5bed8
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
<div class="d-flex justify-content-between">
<button *ngIf="!isPopup" class="btn btn-circle primary large" role="button" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
<button class="btn btn-circle primary large" role="button" (click)="emitClose()"><i class="material-icons">close</i></button>
</div>
<div class="title">
<i class="vitamui-icon vitamui-icon-bank"></i>
<h2>{{customer?.name}} <small>({{customer?.code}})</small></h2>
</div>
</div>
<vitamui-common-sidenav-header [title]="customer?.name" [subtitle]="'(' + customer?.code + ')'" [icon]="'vitamui-icon-bank'"
(onclose)="emitClose()"></vitamui-common-sidenav-header>
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
......@@ -24,9 +14,9 @@
<mat-tab label="ID. graphique" i18n-label="Visual identity tab@@customerPreviewTabVisualIdentity">
<app-graphic-identity-tab [customer]="customer" [readOnly]="isPopup || customer?.readonly"></app-graphic-identity-tab>
</mat-tab>
<mat-tab label="Historique" i18n-label="History tab@@customerPreviewTabHistory">
<vitamui-common-operation-history-tab [id]="customer?.id" [identifier]="customer?.identifier" collectionName="customers" [filter]="filterEvents"></vitamui-common-operation-history-tab>
</mat-tab>
</mat-tab-group>
</div>
</div>
ui/ui-frontend/projects/identity/src/app/customer/owner-preview/owner-preview.component.html
+ 16
− 25
View file @ 88d5bed8
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
<div class="d-flex justify-content-between">
<button *ngIf="!isPopup" class="btn btn-circle primary large" role="button" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
<button class="btn btn-circle primary large" role="button" (click)="emitClose()"><i class="material-icons">close</i></button>
</div>
<vitamui-common-sidenav-header
[title]="owner?.name"
[subtitle]="'(' + owner?.code + ')'"
[icon]="tenant ? 'vitamui-icon-safe' : 'vitamui-icon-key'"
(onclose)="emitClose()">
</vitamui-common-sidenav-header>
<div class="title">
<i *ngIf="tenant" class="vitamui-icon vitamui-icon-safe"></i>
<i *ngIf="!tenant" class="vitamui-icon vitamui-icon-key"></i>
<h2>{{owner?.name}} <small>({{owner?.code}})</small></h2>
</div>
</div>
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
<mat-tab label="Propriétaire" i18n-label="Owner tab@@ownerPreviewTabOwner">
<app-information-tab [owner]="owner" [tenant]="tenant" [readOnly]="isPopup || tenant?.readonly || owner?.readonly"></app-information-tab>
</mat-tab>
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
<mat-tab label="Propriétaire" i18n-label="Owner tab@@ownerPreviewTabOwner">
<app-information-tab [owner]="owner" [tenant]="tenant" [readOnly]="isPopup || tenant?.readonly || owner?.readonly"></app-information-tab>
</mat-tab>
<mat-tab label="Historique" i18n-label="History tab@@ownerPreviewTabHistory">
<app-owner-operation-history-tab [id]="owner?.id" [externalParamId]="tenant?.id" [filter]="filterEvents" ></app-owner-operation-history-tab>
</mat-tab>
</mat-tab-group>
</div>
</div>
<mat-tab label="Historique" i18n-label="History tab@@ownerPreviewTabHistory">
<app-owner-operation-history-tab [id]="owner?.id" [externalParamId]="tenant?.id" [filter]="filterEvents" ></app-owner-operation-history-tab>
</mat-tab>
</mat-tab-group>
</div>
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/group/group-preview/group-preview.component.html
+ 19
− 27
View file @ 88d5bed8
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
<div class="d-flex justify-content-between">
<button *ngIf="!isPopup" class="btn btn-circle primary large" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
<button class="btn btn-circle primary large" (click)="emitClose()"><i class="material-icons">close</i></button>
</div>
<vitamui-common-sidenav-header
[title]="group?.name"
[icon]="'vitamui-icon-keys'"
[badge]="group?.enabled ? 'green' : 'grey'"
(onclose)="emitClose()">
</vitamui-common-sidenav-header>
<div class="title">
<i class="vitamui-icon vitamui-icon-keys vitamui-row-icon status-badge"
[class.status-badge-green]="group?.enabled"
[class.status-badge-red]="!group?.enabled"
></i>
<h2>{{ group?.name }}</h2>
</div>
</div>
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
<mat-tab label="Informations" i18n-label="Information tab@@profileGroupPreviewTabInformation">
<app-information-tab [group]="group" [readOnly]="isPopup || group?.readonly || levelNotAllowed()"></app-information-tab>
</mat-tab>
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
<mat-tab label="Informations" i18n-label="Information tab@@profileGroupPreviewTabInformation">
<app-information-tab [group]="group" [readOnly]="isPopup || group?.readonly || levelNotAllowed()"></app-information-tab>
</mat-tab>
<mat-tab label="Profils" i18n-label="Profiles@@profileGroupPreviewTabProfiles">
<app-profiles-tab [group]="group" [readOnly]="isPopup || group?.readonly || levelNotAllowed()"></app-profiles-tab>
</mat-tab>
<mat-tab label="Historique" i18n-label="History tab@@profileGroupPreviewTabHistory">
<vitamui-common-operation-history-tab [id]="group?.id" [identifier]="group?.identifier" collectionName="groups" [filter]="filterEvents"></vitamui-common-operation-history-tab>
</mat-tab>
</mat-tab-group>
</div>
<mat-tab label="Profils" i18n-label="Profiles@@profileGroupPreviewTabProfiles">
<app-profiles-tab [group]="group" [readOnly]="isPopup || group?.readonly || levelNotAllowed()"></app-profiles-tab>
</mat-tab>
<mat-tab label="Historique" i18n-label="History tab@@profileGroupPreviewTabHistory">
<vitamui-common-operation-history-tab [id]="group?.id" [identifier]="group?.identifier" collectionName="groups" [filter]="filterEvents"></vitamui-common-operation-history-tab>
</mat-tab>
</mat-tab-group>
</div>
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/profile/profile-detail/profile-detail.component.html
+ 17
− 28
View file @ 88d5bed8
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
<div class="d-flex justify-content-between">
<button *ngIf="!isPopup" class="btn btn-circle primary large" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
<button class="btn btn-circle primary large" (click)="emitClose()"><i class="material-icons">close</i></button>
</div>
<vitamui-common-sidenav-header
[title]="profile?.name"
[icon]="'vitamui-icon-gestion-de-profil'"
[badge]="profile?.enabled ? 'green' : 'grey'"
(onclose)="emitClose()">
</vitamui-common-sidenav-header>
<div class="title">
<i class="vitamui-icon vitamui-icon-gestion-de-profil"
[ngClass]=" profile?.enabled ? 'status-badge-green' : 'status-badge-grey'"
[style.fontSize.px]="35">
</i>
<h2 class="ml-2">{{profile?.name}}</h2>
</div>
</div>
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
<mat-tab label="Informations" i18n-label="Information tab@@profileDetailTabInformation">
<app-information-tab [profile]="profile" [readOnly]="isPopup || profile?.readonly || levelNotAllowed() ">
</app-information-tab>
</mat-tab>
<mat-tab label="Historique" i18n-label="History tab@@profileDetailTabHistory">
<vitamui-common-operation-history-tab [id]="profile?.id" [identifier]="profile?.identifier"
collectionName="profiles" [filter]="filterEvents"></vitamui-common-operation-history-tab>
</mat-tab>
</mat-tab-group>
</div>
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
<mat-tab label="Informations" i18n-label="Information tab@@profileDetailTabInformation">
<app-information-tab [profile]="profile" [readOnly]="isPopup || profile?.readonly || levelNotAllowed()"></app-information-tab>
</mat-tab>
<mat-tab label="Historique" i18n-label="History tab@@profileDetailTabHistory">
<vitamui-common-operation-history-tab [id]="profile?.id" [identifier]="profile?.identifier"
collectionName="profiles" [filter]="filterEvents"></vitamui-common-operation-history-tab>
</mat-tab>
</mat-tab-group>
</div>
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.html
+ 18
− 22
View file @ 88d5bed8
<button class="btn secondary mb-20" (click)="openAttributionGroupe()" *ngIf="showUpdateButton" [disabled]="userInfo.type === 'NONE'">
<button class="btn secondary mb-3" (click)="openAttributionGroupe()" *ngIf="showUpdateButton" [disabled]="userInfo.type === 'NONE'">
<div i18n="user group tab edit@@userGroupTabEditButton">
Modifier
</div>
</button>
<div *ngIf="userGroup">
<div class="group-name">
<h3>Groupe attribué :</h3>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ userGroup?.name }}</span>
<div class="d-flex align-items-center mb-3">
<h3 class="m-0">Groupe attribué :</h3>
<span class="ml-3">{{ userGroup?.name }}</span>
</div>
<h3 i18n="user group tab level@@userGroupTabLevel">Niveau</h3>
<p>{{ userGroup.level }}</p>
<h3 i18n="user group tab description@@userGroupTabDescription">Description</h3>
<p>{{ userGroup.description }}</p>
<h3 class="mb-1" i18n="user group tab level@@userGroupTabLevel">Niveau</h3>
<p class="m-0">{{ userGroup.level }}</p>
<h3 class="mb-1" i18n="user group tab description@@userGroupTabDescription">Description</h3>
<p class="m-0">{{ userGroup.description }}</p>
</div>
<h3 i18n="user group tab profiles@@userGroupTabProfiles">Profils du groupe</h3>
<div class="row">
<ul class="profile-list">
<li *ngFor="let profile of userGroup?.profiles">
<div class="profile-details">
<span>{{ profile?.name }}</span>
<i class="material-icons" matTooltip="{{ profile?.description }}" matTooltipClass="vitamui-tooltip">info</i>
</div>
</li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-center p-3 mb-2 vitamui-profile-list" *ngFor="let profile of userGroup?.profiles">
<div>
<div class="profile-value">{{ profile?.name }}</div>
</div>
<div>
<div class="material-icons clickable text-primary" [matTooltip]="profile?.description" matTooltipClass="vitamui-tooltip">
info_outline
</div>
</div>
</div>
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.scss
+ 0
− 66
View file @ 88d5bed8
@import '~ui-frontend-common/sass/variables/colors';
$field-spacing: 15px;
h3 {
margin-bottom: 10px;
}
.actions {
margin-top: 20px;
display: flex;
}
.form-group {
padding-bottom: 30px;
}
button:last-child {
margin-top: 20px;
}
.group-name {
display: flex;
h3 {
margin-top: 0px;
}
}
.mb-20 {
margin-bottom: 20px;
}
ul.profile-list {
margin: 0;
padding: 0;
list-style: none;
> li {
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 3px;
background-color: #f8f8f8;
flex-grow: 1;
display: flex;
justify-content: space-between;
padding: 10px 14px;
}
> li:not(:last-child) {
margin-bottom: 15px;
}
.profile-details {
> span {
vertical-align: middle;
}
> i {
margin-left: 10px;
color: var(--vitamui-secondary);
}
}
}
ui/ui-frontend/projects/identity/src/app/user/user-preview/user-preview.component.html
+ 27
− 37
View file @ 88d5bed8
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
<div class="d-flex justify-content-between">
<button *ngIf="!isPopup" class="btn btn-circle primary large" role="button" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
<button class="btn btn-circle primary large" role="button" (click)="emitClose()"><i class="material-icons">close</i></button>
</div>
<vitamui-common-sidenav-header
[badge]="user?.status === 'ENABLED' ? 'green' : (user?.status === 'DISABLED' || user?.status === 'ANONYM' ? 'grey' : orange)"
[title]="user?.lastname.toUpperCase() + ' ' + user?.firstname"
[subtitle]="'(' + user?.identifier + ')'"
[icon]="'vitamui-icon-user'"
(onclose)="emitClose()">
<vitamui-common-menu-button [overlayPos]="'end'" [icon]="'more_horiz'">
<button mat-menu-item i18n="@@userPreviewEnabled" (click)="updateStatus('ENABLED')" [disabled]="user?.status === 'ENABLED'">Activer </button>
<button mat-menu-item i18n="@@userPreviewDisabled" (click)="updateStatus('DISABLED')" [disabled]="user?.status === 'DISABLED'">Désactiver</button>
</vitamui-common-menu-button>
</vitamui-common-sidenav-header>
<div class="title">
<i class="vitamui-icon vitamui-icon-user vitamui-row-icon status-badge status-badge-green close" *ngIf="user?.status === 'ENABLED'"></i>
<i class="vitamui-icon vitamui-icon-user vitamui-row-icon status-badge status-badge-gray" *ngIf="user?.status === 'DISABLED'"></i>
<i class="vitamui-icon vitamui-icon-user vitamui-row-icon status-badge status-badge-orange" *ngIf="user?.status === 'BLOCKED'"></i>
<div *ngIf="user?.status === 'ANONYM'"><i class="vitamui-icon vitamui-icon-user vitamui-row-icon parent"></i><span class="status-badge-anonym">x</span></div>
<h2>{{ user?.lastname | uppercase }} {{ user?.firstname }} <small>({{user?.identifier}})</small></h2>
<ng-container *ngIf="!isPopup">
<vitamui-common-menu-button [overlayPos]="'end'" [icon]="'more_horiz'">
<button mat-menu-item i18n="@@userPreviewEnabled" (click)="updateStatus('ENABLED')" [disabled]="user?.status === 'ENABLED'">Activer </button>
<button mat-menu-item i18n="@@userPreviewDisabled" (click)="updateStatus('DISABLED')" [disabled]="user?.status === 'DISABLED'">Désactiver</button>
</vitamui-common-menu-button>
</ng-container>
</div>
</div>
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
<mat-tab label="Informations" i18n-label="Information tab@@customerPreviewTabInformation">
<app-user-info-tab [user]="user" [customer]="customer" [readOnly]="isPopup || user?.readonly || levelNotAllowed()" [userInfo]="connectedUserInfo"></app-user-info-tab>
</mat-tab>
<mat-tab label="Informations" i18n-label="Information tab@@customerPreviewTabInformation">
<app-user-info-tab [user]="user" [customer]="customer" [readOnly]="isPopup || user?.readonly || levelNotAllowed()" [userInfo]="connectedUserInfo"></app-user-info-tab>
</mat-tab>
<mat-tab label="Groupe" i18n-label="Groupe tab@@userPreviewTabGroupe" class="no-padding">
<app-user-group-tab [user]="user" [readOnly]="isPopup || user?.readonly || levelNotAllowed()" [userInfo]="connectedUserInfo"></app-user-group-tab>
</mat-tab>
<mat-tab label="Groupe" i18n-label="Groupe tab@@userPreviewTabGroupe" class="no-padding">
<app-user-group-tab [user]="user" [readOnly]="isPopup || user?.readonly || levelNotAllowed()" [userInfo]="connectedUserInfo"></app-user-group-tab>
</mat-tab>
<mat-tab label="Historique" i18n-label="History tab@@userPreviewTabHistory">
<vitamui-common-operation-history-tab [id]="user?.id" [identifier]="user?.identifier" collectionName="users" [filter]="filterAuthenticationEvents"></vitamui-common-operation-history-tab>
</mat-tab>
</mat-tab-group>
</div>
<mat-tab label="Historique" i18n-label="History tab@@userPreviewTabHistory">
<vitamui-common-operation-history-tab [id]="user?.id" [identifier]="user?.identifier" collectionName="users" [filter]="filterAuthenticationEvents"></vitamui-common-operation-history-tab>
</mat-tab>
</mat-tab-group>
</div>
<ng-template #confirmDisabledUserDialog>
<mat-dialog-content>
<p i18n="@@disabledUserConfirm">Êtes vous sur de vouloir désactiver l'utilisateur {{user?.firstname}} {{user?.lastname}} - {{user?.email}} ?</p>
</mat-dialog-content>
<mat-dialog-actions>
<button [matDialogClose]="true" class="btn primary btn-confirm-dialog" i18n="@@confirmDialogConfirmButton">Confirmer</button>
<button [matDialogClose]="true" class="btn primary mr-2" i18n="@@confirmDialogConfirmButton">Confirmer</button>
<button matDialogClose class="btn link cancel" i18n="@@confirmDialogCancelButton">Retour</button>
</mat-dialog-actions>
</ng-template>
......@@ -52,8 +41,9 @@
<mat-dialog-content>
<p i18n="@@EnabledUserConfirm">Êtes vous sur de vouloir réactiver l'utilisateur {{user?.firstname}} {{user?.lastname}} - {{user?.email}} ?</p>
</mat-dialog-content>
<mat-dialog-actions>
<button [matDialogClose]="true" class="btn primary btn-confirm-dialog" i18n="@@confirmDialogConfirmButton">Confirmer</button>
<button [matDialogClose]="true" class="btn primary mr-2" i18n="@@confirmDialogConfirmButton">Confirmer</button>
<button matDialogClose class="btn link cancel" i18n="@@confirmDialogCancelButton">Retour</button>
</mat-dialog-actions>
</ng-template>
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/user/user-preview/user-preview.component.scss
+ 0
− 3
View file @ 88d5bed8
.btn-confirm-dialog{
margin-right : 20px;
}
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