diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.html b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.html
index f5023a7013ca92621b217f5df7763d73034cedc7..6d9fa637c4af1f03d72f102e34c39d9d6ef6a3e1 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.html
@@ -1,52 +1,37 @@
-<div class="content">
- <h2 i18n="Set group title@@setGroupTitle">Attribution de groupe</h2>
+<div class="header">
+ <vitamui-common-progress-bar [index]="stepIndex" [count]="stepCount"></vitamui-common-progress-bar>
+</div>
+<div class="mt-3 content">
- <div class="header-informations">
- <div class="controls">
- <vitamui-common-search-bar
- placeholder="Filtrer par nom ou description"
- i18-placeholder="Filter group filter@@filterGroup"
- (search)="onSearch($event)">
- </vitamui-common-search-bar>
- </div>
+ <div classe="mt-4 text large bold" i18n="Set group title@@setGroupTitle">Attribution de groupe</div>
- <div class="actions" *ngIf="selectedGroupName">
- <div>Groupe attribué : </div> {{ selectedGroupName }}
- </div>
- </div>
+ <vitamui-common-search-bar class="my-3" i18n-placeholder="user create search group@@userCreateSearchGroup"
+ [placeholder]="'Filtrer par «nom», «id» ...'" (search)="onSearch($event)"></vitamui-common-search-bar>
- <div class="table-container">
- <table>
- <thead>
- <tr>
- <th i18n="Set group header@@setGroupHeader">Groupe</th>
- <th></th>
- </tr>
- </thead>
- <tbody vitamuiCommonCollapseContainer>
- <ng-container *ngFor="let group of activeGroups; let index = index">
+<div class="d-flex mt-4 mb-3" *ngIf="selectedGroupName">
+ <div class="text medium bold">Groupe attribué : </div> <span class="text medium">{{ selectedGroupName }}</span>
+</div>
- <tr class="profileGroup-row" *ngIf="!group.selected" [vitamuiCommonCollapseTriggerFor]="row">
- <td class="clickable" (click)="updateGroup(group?.id, group?.name, group?.level, row)">
- {{ group?.name }}
- </td>
- <td class="clickable">
- <span class="btn-link" *ngIf="row.state === 'collapsed';else hideDetail" i18n="Profile group showDetails@@profileGroupShowDetails">Voir détail</span>
- <ng-template #hideDetail><span class="btn-link" i18n="Profile group hideDetails@@profileGroupHideDetails">Masquer détail</span></ng-template>
- </td>
- </tr>
+<div class="vitamui-table">
+ <div class="vitamui-table-head p-0 py-3 d-flex align-items-center">
+ <div class="pl-4" i18n="Set group header@@setGroupHeader">Groupe</div>
+ </div>
- <tr class="sub-table">
- <td>
- <app-group-detail [group]="group" [vitamuiCommonCollapse] #row="vitamuiCommonCollapse" [@expansion]="row.state" class="collapsable"></app-group-detail>
- </td>
- <td></td>
- </tr>
- </ng-container>
- </tbody>
- </table>
+ <div class="vitamui-table-body">
+ <div class="vitamui-table-rows">
+ <ng-container *ngFor="let group of activeGroups; let index = index">
+ <div class="vitamui-row p-0 px-4" [class.no-hover]="row.state === 'expanded'" *ngIf="!group?.selected" [vitamuiCommonCollapse] #row="vitamuiCommonCollapse">
+ <div class="d-flex justify-content-between align-items-center clickable">
+ <div class="row-label d-flex align-items-center" (click)="updateGroup(group?.id,group?.name, row)">{{group?.name}}</div>
+ <button class="btn link underline" (click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
+ </div>
+ <app-group-detail *ngIf="row.state === 'expanded'" [group]="group" [@expansionAnimation]></app-group-detail>
+ </div>
+ </ng-container>
+ </div>
</div>
+</div>
<div class="actions">
<button type="button" class="btn primary" (click)="saveUserUpdate()" [disabled]="!selectedGroupName" i18n="group attribution edit@@groupAttributionEdit">Modifier</button>
diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.scss b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.scss
index 5c9f15d87e657412ae42ef8f35f3edee57f624b0..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.scss
@@ -1,197 +0,0 @@
-@import '~ui-frontend-common/sass/variables/colors';
-@import '~ui-frontend-common/sass/mixins/fonts';
-@import '~ui-frontend-common/sass/mixins/elevation';
-
-button.primary {
- margin-right: 20px;
-}
-
-.controls {
- display: flex;
- align-items: center;
- text-align: right;
- margin-bottom: 20px;
- justify-content: space-between;
-
- .btn {
- margin-left: 20px;
- }
-}
-
-.header-informations {
- margin-bottom: 20px;
- height: 140px;
-}
-
-.search {
- @include elevation-1;
- display: inline-block;
- position: relative;
- vertical-align: middle;
- height: 50px;
- flex-grow: 1;
- border-radius: 87px;
- background-color: $white;
- background-color: var(--white);
-
- &.disabled {
- opacity: 0.3;
- }
-
- input[type=search] {
- @include elevation-1;
- border: none;
- width: 100%;
- height: 50px;
- border-radius: 50px * 0.5;
- background-color: $white;
- border: none;
- padding: 10px 50px 10px 28.5px;
- display: flex;
- outline: none;
-
- &::placeholder {
- @include vitamui-input-placeholder;
- font-weight: normal;
- }
- }
-
- i {
- position: absolute;
- top: 10px;
- right: 10px;
- width: 30px;
- height: 30px;
- border-radius: 50%;
- background-color: var(--vitamui-primary);
- color: $white;
- line-height: 30px;
- text-align: center;
- font-size: 18px;
- }
-
-}
-
-.actions {
- display: flex;
- margin-top: 15px;
- margin-right: 60px;
- padding-left: 10px;
-
- div {
- color: #474d4a;
- font-size: 14px;
- font-weight: bold;
- }
-}
-
-.table-container {
- overflow: auto;
- max-height: 30vh;
-}
-
-table {
- color: var(--vitamui-grey-900);
- font-size: 14px;
- width: 95%;
- border-collapse: collapse;
- margin-bottom: 60px;
-
- th {
- text-align: left;
- height: 60px;
- padding-bottom: 15px;
- padding-left: 10px;
-
- &:last-child {
- width: 15%;
- }
- }
-
- td {
- padding: 5px 10px;
- vertical-align: middle;
- font-weight: 300;
-
- &:last-child {
- padding-right: 0px;
- }
- }
-
- .text-center {
- text-align: center;
- }
-
- tbody {
- tr:nth-child(odd) {
- border-top: 1px solid $white-three;
- }
-
- }
-}
-
-.collapsable {
- display: block;
- overflow: hidden;
-}
-
-.bg-white {
- background: $white;
-}
-
-.profileGroup-row {
- .actions {
- white-space: nowrap;
- visibility: hidden;
- text-align: right;
- }
-
- .actions {
- padding-right: 40px;
-
- button {
- box-shadow: 25px 25px 80px 0 rgba(121, 121, 121, 0.1);
- opacity: 0;
- transform: translateX(20%);
- transition: all 150ms ease-in;
- }
- }
-
- &:hover .actions {
- visibility: visible;
-
- button {
- opacity: 1;
- transform: translateX(0);
- transition-timing-function: ease-out;
- }
- }
-
-}
-
-input[type=radio] {
- position: absolute;
- visibility: hidden;
- display: none;
-}
-
-.radio-label {
- color: var(--vitamui-primary);
- display: inline-block;
- cursor: pointer;
- font-weight: bold;
- padding: 5px 20px;
-}
-
-input[type=radio]:checked + label{
- color: $white;
- background: var(--vitamui-primary);
-}
-
-.radio-group {
- border: solid 1px var(--vitamui-primary);
- display: inline-block;
- margin: 20px;
- border-radius: 5px;
- overflow: hidden;
-}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.ts b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.ts
index 727b8d292a0e91838d433715b01bfa63f7fc6033..5ad4e72c13b91e02848dee06b0657fd0cf201226 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.ts
@@ -72,6 +72,9 @@ export class GroupAttributionComponent implements OnInit {
selectedGroupName: string;
CUSTOMER_ACTIVE_PROFILE_GROUPS_INDEX = 2;
+ public stepIndex = 0;
+ public stepCount = 1;
+
public profileGroupChange(event: Group): void {
this.user.groupId = event.id;
this.selectedGroupName = event.name;
@@ -88,6 +91,7 @@ export class GroupAttributionComponent implements OnInit {
}
public resetActiveGroups(): void {
+
this.activeGroups = this.data[this.CUSTOMER_ACTIVE_PROFILE_GROUPS_INDEX];
this.activeGroups.sort((a, b) => a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1);
if (this.data[1]) {
diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.module.ts b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.module.ts
index 0fbf137e4e4ebb5e9b557b67bd570f66904e728e..d1e32535f5bd0615242e5cfea383d78a72eb3b08 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.module.ts
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.module.ts
@@ -37,6 +37,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatTooltipModule } from '@angular/material/tooltip';
+import { VitamUICommonModule } from 'ui-frontend-common';
import {CollapseDirectiveModule, SearchBarModule} from 'ui-frontend-common';
import { SharedModule } from '../../shared/shared.module';
@@ -50,6 +51,7 @@ import { GroupDetailComponent } from './group-detail/group-detail.component';
MatTooltipModule,
CollapseDirectiveModule,
SearchBarModule,
+ VitamUICommonModule,
],
declarations: [
GroupAttributionComponent,
diff --git a/ui/ui-frontend/projects/identity/src/app/user/user-create/user-create.component.html b/ui/ui-frontend/projects/identity/src/app/user/user-create/user-create.component.html
index 037a6e17796f220c6652a6a3b63504dbc75aeb79..d6129cb83ae1abf6ef2bd85f519c8e9e138b4819 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/user-create/user-create.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/user-create/user-create.component.html
@@ -125,7 +125,7 @@
<div class="vitamui-row p-0 px-4" [class.no-hover]="row.state === 'expanded'" *ngIf="!group?.selected" [vitamuiCommonCollapse] #row="vitamuiCommonCollapse">
<div class="d-flex justify-content-between align-items-center clickable">
<div class="row-label d-flex align-items-center" (click)="updateGroupe(group?.id,group?.name, row)">{{group?.name}}</div>
- <button class="btn tertiary link underline text-primary" (click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
+ <button class="btn link underline" (click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
</div>
<app-group-detail *ngIf="row.state === 'expanded'" [group]="findGroup(group.id)" [@expansionAnimation]></app-group-detail>
</div>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
index cc2bc939cd858ce26b2469b01547e6b7e98ea6ff..7ab598fbfcfbd48fdddcdb515960b9fc64c2c70e 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
@@ -169,7 +169,7 @@
<div class="d-flex justify-content-between align-items-center clickable">
<div class="row-label d-flex align-items-center" (click)="handleClick(group)">
{{group?.name}}</div>
- <button class="btn tertiary link underline text-primary"
+ <button class="btn link underline"
(click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
</div>
<div *ngIf="row.state === 'expanded' then dialogSubArray"></div>