Skip to content
Snippets Groups Projects
Commit e14f9468 authored by Fadil's avatar Fadil Committed by bouhaddouzay
Browse files

[US TRTL-446] Redesign hierarchy create & fix group create popups

parent b229f479
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 92 additions and 153 deletions
ui/ui-frontend/projects/identity/src/app/customer/customer.component.scss
+ 0
− 4
View file @ e14f9468
.vitamui-header {
background-image: url('/assets/customer-header-bg.jpg');
}
.mat-drawer-content {
overflow: hidden;
}
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.html
+ 23
− 24
View file @ e14f9468
......@@ -2,9 +2,9 @@
<div class="header">
<vitamui-common-progress-bar [index]="stepIndex" [count]="stepCount"></vitamui-common-progress-bar>
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<vitamui-common-stepper (selectionChange)="stepIndex=$event.selectedIndex">
<cdk-step>
<div class="content">
<div class="text large bold" i18n="Profile Group Creation@@profileGroupCreateTitle">Création d'un groupe de profils</div>
......@@ -26,36 +26,35 @@
</vitamui-common-input>
</div>
<div class="d-flex">
<div class="mr-4 p-2">
<div class="text normal light">Niveau</div>
<div class="text medium bold">{{authService.user.level}}</div>
</div>
<div class="d-flex">
<div class="mr-4 p-2">
<div class="text normal light">Niveau</div>
<div class="text medium bold">{{authService.user.level}}</div>
</div>
<div class="col-3 p-0">
<vitamui-common-level-input [prefix]="authService.user.level" formControlName="level">
<ng-container *ngIf="form.get('level')?.touched">
<vitamui-common-input-error *ngIf="form?.get('level')?.hasError('required')" i18n="Required field error hint@@formErrorRequiredField">Champ
requis</vitamui-common-input-error>
<vitamui-common-input-error *ngIf="form?.get('level')?.touched && form?.get('level')?.hasError('pattern')" i18n="Pattern field error hint@@formErrorPatternField">Format
incorrect (caractères alphanumériques
séparés par le caractères .)
</vitamui-common-input-error>
</ng-container>
</vitamui-common-level-input>
<div class="col-3 p-0">
<vitamui-common-level-input [prefix]="authService.user.level" formControlName="level">
<ng-container *ngIf="form.get('level')?.touched">
<vitamui-common-input-error *ngIf="form?.get('level')?.hasError('required')" i18n="Required field error hint@@formErrorRequiredField">Champ
requis</vitamui-common-input-error>
<vitamui-common-input-error *ngIf="form?.get('level')?.touched && form?.get('level')?.hasError('pattern')" i18n="Pattern field error hint@@formErrorPatternField">Format
incorrect (caractères alphanumériques séparés par le caractères .)
</vitamui-common-input-error>
</ng-container>
</vitamui-common-level-input>
</div>
</div>
</div>
<div class="actions">
<button type="button" class="btn primary" cdkStepperNext [disabled]="firstStepInvalid()" i18n="Next@@profileGroupCreateNextButton">Suivant</button>
<button type="button" class="btn cancel link" (click)="onCancel()" i18n="Cancel customer creation@@profileGroupCreateCancelButton">Annuler</button>
<div class="actions">
<button type="button" class="btn primary" cdkStepperNext [disabled]="firstStepInvalid()" i18n="Next@@profileGroupCreateNextButton">Suivant</button>
<button type="button" class="btn cancel link" (click)="onCancel()" i18n="Cancel customer creation@@profileGroupCreateCancelButton">Annuler</button>
</div>
</div>
</div>
</cdk-step>
</cdk-step>
<cdk-step>
<div class="content">
<div class="text large bold" i18n="Group Provisioning@@profileGroupCreateTitle2">Provisionnement du groupe “{{ form.get('name').value }}”</div>
<div class="text large bold" [ngClass]="{'mb-0': form.get('level').value}" i18n="Group Provisioning@@profileGroupCreateTitle2">Provisionnement du groupe “{{ form.get('name').value }}”</div>
<div class="text medium bold mb-4" *ngIf="form.get('level').value" i18n="@@groupLevel">Niveau : {{ form.get('level').value }}</div>
<app-profiles-form formControlName="profileIds" [level]="form.get('level').value"></app-profiles-form>
......
ui/ui-frontend/projects/identity/src/app/group/group.component.scss
+ 0
− 3
View file @ e14f9468
.vitamui-header {
background-image: url('/assets/user-header-bg.jpg');
}
ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.html
+ 23
− 26
View file @ e14f9468
<div class="header">
<mat-progress-bar mode="determinate" [value]="100" class="stepper-progress-bar"></mat-progress-bar>
<vitamui-common-progress-bar [index]="stepIndex" [count]="1"></vitamui-common-progress-bar>
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="content">
<h2 i18n="Profile Group Creation@@hierarchyCreateTitle">Duplication de profil</h2>
<div class="text large bold" i18n="Profile Group Creation@@hierarchyCreateTitle">Duplication de profil</div>
<div class="row">
<div class="col-4">
<vitamui-common-slide-toggle formControlName="enabled">Profils <span *ngIf="!form.get('enabled').value">in</span>actif</vitamui-common-slide-toggle>
<div class="d-flex justify-content-between">
<div class="mt-2">
<vitamui-common-slide-toggle formControlName="enabled">Profil <span *ngIf="!form.get('enabled').value">in</span>actif</vitamui-common-slide-toggle>
</div>
<div class="col-8">
<div class="profil-level d-flex">
<div class="level-label">
<label class="">Niveau du profil</label>
<div>{{authService.user.level}}</div>
</div>
<vitamui-common-level-input [prefix]="authService.user.level" prefixLabel="Niveau du profil" i18n-prefixLabel="@@prefixLabelHiearchyCreateComponent"
formControlName="level">
<vitamui-common-input-error *ngIf="form?.get('level')?.touched && form?.get('level')?.hasError('required')" i18n="Required field error hint@@formErrorRequiredField">Champ
requis</vitamui-common-input-error>
<vitamui-common-input-error *ngIf="form?.get('level')?.touched && form?.get('level')?.hasError('pattern')" i18n="Pattern field error hint@@formErrorPatternField">Format incorrect (caractères alphanumériques en majuscule séparés par le caractères .)</vitamui-common-input-error>
</vitamui-common-level-input>
<div class="d-flex">
<div class="mr-4 mt-2">
<div class="text normal light">Niveau du profil</div>
<div class="text medium bold">{{authService.user.level}}</div>
</div>
<vitamui-common-level-input [prefix]="authService.user.level" prefixLabel="Niveau du profil" i18n-prefixLabel="@@prefixLabelHiearchyCreateComponent" formControlName="level">
<vitamui-common-input-error *ngIf="form?.get('level')?.touched && form?.get('level')?.hasError('required')" i18n="Required field error hint@@formErrorRequiredField">
Champ requis
</vitamui-common-input-error>
<vitamui-common-input-error *ngIf="form?.get('level')?.touched && form?.get('level')?.hasError('pattern')" i18n="Pattern field error hint@@formErrorPatternField">
Format incorrect (caractères alphanumériques en majuscule séparés par le caractères .)
</vitamui-common-input-error>
</vitamui-common-level-input>
</div>
</div>
<h2 i18n="Group Provisioning@@hierarchyCreateTitle2">Profil à dupliquer</h2>
<div class="form-group">
<app-profiles-form formControlName="profileIds" showLevel="true" [tenantIdentifier]="data.tenantId" [applicationNameExclude]="['USERS_APP','ARCHIVE_APP']"></app-profiles-form>
</div>
<div class="text medium bold mb-3" i18n="Group Provisioning@@hierarchyCreateTitle2">Profil à dupliquer</div>
<app-profiles-form formControlName="profileIds" showLevel="true" [tenantIdentifier]="data.tenantId" [applicationNameExclude]="['USERS_APP','ARCHIVE_APP']"></app-profiles-form>
<div class="actions">
<button type="submit" class="btn primary" [disabled]="formValid()" i18n="Done@@hierarchyCreateSubmitButton">Terminer</button>
<button type="button" class="btn cancel link" (click)="onCancel()" i18n="Cancel@@hierarchyGroupCreateCancelButton">Annuler</button>
</div>
<button type="button" class="btn link">
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
<ng-container i18n="Previous step button label@@hierarchyGroupCreateBackButton">Retour</ng-container>
</button>
</div>
</form>
ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.scss
+ 0
− 21
View file @ e14f9468
.form-group {
padding-bottom: 30px;
}
// STEP 1
.field-name {
width: 300px;
}
.field-description {
width: 630px;
}
label {
color: var(--vitamui-grey-600);
font-size: 14px;
font-weight: bold;
}
.level-label {
margin-right: 20px;
}
ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy.component.scss
+ 0
− 7
View file @ e14f9468
:host {
h5 {
font-size: 24px;
font-weight:800;
line-height:32px;;
}
}
ui/ui-frontend/projects/identity/src/app/shared/profiles-form/profiles-form.component.html
+ 36
− 42
View file @ e14f9468
<div class="mb-4 row">
<vitamui-common-vitamui-autocomplete class="col-8" [options]="applications" [formControl]="appSelect"
placeholder="Application" i18n-placeholder="Application@@profilesFormApplicationPlaceholder">
</vitamui-common-vitamui-autocomplete>
</div>
<div class="mb-4 row" *ngIf="!tenantIdentifier">
<vitamui-common-vitamui-autocomplete class="col-8" [options]="filteredTenants" [formControl]="tenantSelect"
#tenantInput placeholder="Coffre" i18n-placeholder="Tenant@@profilesFormTenantPlaceholder">
</vitamui-common-vitamui-autocomplete>
<button type="button" class="btn primary ml-5" (click)="add()" [disabled]="!canAddProfile"
i18n="Add@@profilesFormAddButton" #addButton>Ajouter</button>
</div>
<div class="d-flex align-items-center">
<div>
<div class="mb-3">
<vitamui-common-vitamui-autocomplete [options]="applications" [formControl]="appSelect"
placeholder="Application" i18n-placeholder="Application@@profilesFormApplicationPlaceholder">
</vitamui-common-vitamui-autocomplete>
</div>
<div class="mb-3" *ngIf="!tenantIdentifier" >
<vitamui-common-vitamui-autocomplete [options]="filteredTenants" [formControl]="tenantSelect"
#tenantInput placeholder="Coffre" i18n-placeholder="Tenant@@profilesFormTenantPlaceholder">
</vitamui-common-vitamui-autocomplete>
</div>
<div class="mb-3">
<vitamui-common-vitamui-autocomplete [options]="filteredProfiles" [formControl]="profileSelect"
placeholder="Profil" i18n-placeholder="Profile@@profilesFormProfilePlaceholder" #profileInput>
</vitamui-common-vitamui-autocomplete>
</div>
</div>
<div class="mb-4 row">
<vitamui-common-vitamui-autocomplete class="col-8" [options]="filteredProfiles" [formControl]="profileSelect"
placeholder="Profil" i18n-placeholder="Profile@@profilesFormProfilePlaceholder" #profileInput>
</vitamui-common-vitamui-autocomplete>
<button type="button" class="btn-link ml-5 col-2" (click)="resetTree()">
<i class="material-icons">replay</i>
</button>
<div>
<div class="d-flex flex-column align-items-center justify-content-center">
<button type="button" class="btn primary" (click)="add()" [disabled]="!canAddProfile" i18n="Add@@profilesFormAddButton" #addButton>Ajouter</button>
<button type="button" class="btn link" (click)="resetTree()">
<i class="material-icons">replay</i>
</button>
</div>
</div>
</div>
<div class="vitamui-table">
<div class="vitamui-table mt-2">
<div class="vitamui-table-head">
<div class="col-3" i18n="Application@@profilesFormColumnHeaderApplication">Application</div>
<div class="col-3" *ngIf="!tenantIdentifier" i18n="Tenant@@profilesFormColumnHeaderTenant"><span>Coffre</span>
</div>
<div class="col-3" i18n="Profile@@profilesFormColumnHeaderProfile"><span>Profil</span>
</div>
<div *ngIf="!tenantIdentifier" class="col-3" i18n="Tenant@@profilesFormColumnHeaderTenant">Coffre</div>
<div class="col-5" i18n="Profile@@profilesFormColumnHeaderProfile">Profil</div>
</div>
<div class="vitamui-table-body">
<div class="vitamui-table-rows" *ngFor="let id of profileIds; let index=index">
<div class="vitamui-row d-flex align-items-center">
<div class="col-3
">{{ getApplicationFromId(id)?.name }}</div>
<div class="col-3
" *ngIf="!tenantIdentifier">{{ getProfileFromId(id)?.tenantName }}</div>
<div class="col-3
">{{ getProfileFromId(id)?.name }}</div>
<div class="col-3
">
<div class="hide">
<button class="btn-link" (click)="remove(index)">
<i class="material-icons">clear</i>
</button>
</div>
<div class="col-3">{{ getApplicationFromId(id)?.name }}</div>
<div *ngIf="!tenantIdentifier" class="col-3">{{ getProfileFromId(id)?.tenantName }}</div>
<div class="col-5">{{ getProfileFromId(id)?.name }}</div>
<div class="d-flex justify-content-end" [ngClass]="{'col-1': !tenantIdentifier, 'col-4': tenantIdentifier}">
<button class="btn link" (click)="remove(index)">
<i class="material-icons">clear</i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="table-container">
</div>
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/shared/profiles-form/profiles-form.component.scss
+ 9
− 25
View file @ e14f9468
.vitamui-row {
&:hover {
.hide {
visibility: visible;
.btn-link {
transform: rotate(0deg);
}
.d-flex {
> div:first-of-type {
width: 65%;
> div {
height: 50px;
}
}
}
.vitamui-table-rows i {
color: var(--vitamui-primary);
}
.hide {
white-space: nowrap;
visibility: hidden;
text-align: right;
}
.btn-link {
background: none;
border: none;
color: var(--vitamui-primary);
cursor: pointer;
&.i {
transform: rotate(-60deg);
> div:last-of-type {
width: 25%;
}
}
}
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/shared/profiles-form/profiles-form.component.ts
+ 1
− 1
View file @ e14f9468
......@@ -181,7 +181,7 @@ export class ProfilesFormComponent implements ControlValueAccessor, OnInit {
if (profileToDisplay) {
return this.applicationsDetails.find((app) => app.identifier === profileToDisplay.applicationName);
} else {
return 'Non défini';
return { name: 'Non défini'};
}
}
......
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