[US TRTL-350] Redesign subrogation app

ui/ui-frontend-common/src/sass/_button.scss

@@ -102,7 +102,6 @@
 }
 
 .btn.contrast-outline {
-
     @include btn(transparent, transparent, $white, $white, $white, $white);
 
     &.contrast-outline-primary {
@@ -117,7 +116,6 @@
         @include disabled(transparent, $white, $white);
         opacity: .4;
     }
-
 }
 
 .btn-circle {

ui/ui-frontend-common/src/sass/_table.scss

@@ -299,6 +299,10 @@ $row-padding: 0.8rem;
                 background-color: transparent!important;
             }
         }
+
+        button {
+            max-height: 40px;
+        }
     }
 
     .actions {

ui/ui-frontend-common/src/sass/_theme.scss

@@ -63,6 +63,10 @@ body {
     color: var(--vitamui-secondary)!important;
 }
 
+.text-red {
+    color: $red!important;
+}
+
 .bg-primary {
     background-color: var(--vitamui-primary)!important;
 }

ui/ui-frontend/projects/identity/src/app/subrogation/subrogate-user/subrogate-user-list/subrogate-user-list.component.html

-<table
-  class="vitamui-table"
-  vitamuiCommonInfiniteScroll
-  (vitamuiScroll)="onScroll()"
->
-  <thead>
-    <tr>
-      <th><i class="vitamui-icon vitamui-icon-user vitamui-row-icon"></i></th>
-      <th i18n="Subrogation name column header@@subrogationListNameHeader">Nom / Prénom</th>
-      <th i18n="Subrogation id column header@@subrogationListIDHeader">ID</th>
-      <th i18n="Subrogation criticity column header@@subrogationListCriticityHeader">Criticité</th>
-      <th i18n="Subrogation group column header@@subrogationListGroupHeader">Groupe</th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody *ngIf="loaded">
-    <tr class="user-row" *ngFor="let subrogableUser of dataSource; let index = index">
-      <td>
-        <i class="vitamui-icon vitamui-icon-user vitamui-row-icon status-badge status-badge-green close" *ngIf="subrogableUser?.status === 'ENABLED'"></i>
-        <i class="vitamui-icon vitamui-icon-user vitamui-row-icon status-badge status-badge-gray" *ngIf="subrogableUser?.status === 'DISABLED'"></i>
-        <i class="vitamui-icon vitamui-icon-user vitamui-row-icon status-badge status-badge-orange" *ngIf="subrogableUser?.status === 'BLOCKED'"></i>
-        <div *ngIf="subrogableUser?.status === 'ANONYM'"><i class="vitamui-icon vitamui-icon-user vitamui-row-icon parent"></i><span class="status-badge-anonym">x</span></div>
+<div vitamuiCommonInfiniteScroll (vitamuiScroll)="onScroll()">
+  <div class="vitamui-table">
+    <div class="vitamui-table-head">
+      <div class="col-1"><i class="vitamui-icon vitamui-icon-user" [style.fontSize.px]="30"></i></div>
+      <div class="col-2" i18n="Subrogation name column header@@subrogationListNameHeader">Nom / Prénom</div>
+      <div class="col-2" i18n="Subrogation id column header@@subrogationListIDHeader">Criticité</div>
+      <div class="col-2" i18n="Subrogation group column header@@subrogationListGroupHeader">Groupe</div>
+      <div class="col-1" i18n="Subrogation criticity column header@@subrogationListCriticityHeader">ID</div>
+      <div class="col-4"></div>
+    </div>
 
-      </td>
-      <td>
-        {{ subrogableUser?.lastname | uppercase }} {{ subrogableUser?.firstname }}
-      </td>
-      <td>{{ subrogableUser?.identifier }}</td>
-      <td class="criticity-column" *ngIf="subrogableUser?.criticality === 0">
-        <div id="rectangle-criticity-high"></div>
-        <div id="rectangle-criticity-low"></div>
-        <div id="rectangle-criticity-low"></div>
-      </td>
-      <td class="criticity-column" *ngIf="subrogableUser?.criticality === 1">
-        <div id="rectangle-criticity-high"></div>
-        <div id="rectangle-criticity-high"></div>
-        <div id="rectangle-criticity-low"></div>
-      </td>
-      <td class="criticity-column" *ngIf="subrogableUser?.criticality === 2">
-        <div id="rectangle-criticity-high"></div>
-        <div id="rectangle-criticity-high"></div>
-        <div id="rectangle-criticity-high"></div>
-      </td>
+    <div class="vitamui-table-body">
+      <div class="vitamui-table-rows" *ngFor="let subrogableUser of dataSource">
+        <div class="vitamui-row d-flex align-items-center">
+          <div class="col-1">
+            <i class="vitamui-icon vitamui-icon-user"
+              [ngClass]="subrogableUser?.status === 'ENABLED' ? 'status-badge-green' :
+              (subrogableUser?.status === 'DISABLED' || subrogableUser?.status === 'ANONYM' ? 'status-badge-grey' : 'status-badge-orange')"
+              [style.fontSize.px]="30"
+            ></i>
+          </div>
+          <div class="col-2">{{ subrogableUser?.lastname }} {{ subrogableUser?.firstname }}</div>
+          <div class="col-2">
+            <ng-container [ngSwitch]="subrogableUser?.criticality">
+              <div *ngSwitchCase="0" class="d-flex">
+                <div id="rectangle-criticity-high"></div>
+                <div id="rectangle-criticity-high"></div>
+                <div id="rectangle-criticity-low"></div>
+              </div>
+              <div *ngSwitchCase="1" class="d-flex">
+                <div id="rectangle-criticity-high"></div>
+                <div id="rectangle-criticity-low"></div>
+                <div id="rectangle-criticity-low"></div>
+              </div>
+              <div *ngSwitchCase="2" class="d-flex">
+                <div id="rectangle-criticity-high"></div>
+                <div id="rectangle-criticity-high"></div>
+                <div id="rectangle-criticity-high"></div>
+              </div>
+            </ng-container>
+          </div>
+          <div class="col-2">{{ getGroup(subrogableUser)?.name }}</div>
+          <div class="col-1">{{ subrogableUser?.identifier }}</div>
+          <div class="col-2 d-flex justify-content-end"> 
+            <div *ngIf="subrogableUser.superUserEmail">
+              <span *ngIf="subrogableUser.superUserEmail === currenteUser.email"
+                class="text normal bold text-red" i18n="@@SubrogateCurrentUserInSubroLabel">En cours</span>
+      
+              <span *ngIf="subrogableUser.superUserEmail !== currenteUser.email"
+                class="text normal bold text-red" i18n="@@SubrogateUserInSubroLabel">Subrogé par {{subrogableUser.superUserEmail}}</span>
+            </div>
+          </div>
 
-      <td>{{ getGroup(subrogableUser)?.name }}</td>
-      <td>
-        <button *ngIf="!subrogableUser.superUserEmail || subrogableUser.superUserEmail == currenteUser.email" type="button" class="btn outline-primary" (click)="openUserSubrogationDialog(subrogableUser)"
-                [disabled]="subrogableUser.status !== 'ENABLED' || !subrogableUser.subrogeable"
-                i18n="Subrogate subrogate@@SubrogateButton">
-          Subroger
-        </button>
+          <div class="col-2 d-flex justify-content-end">
+            <button
+              *ngIf="!subrogableUser.superUserEmail || subrogableUser.superUserEmail == currenteUser.email" 
+              class="btn outline-primary"
+              i18n="Subrogate subrogate@@SubrogateButton"
+              (click)="openUserSubrogationDialog(subrogableUser)"
+              [disabled]="subrogableUser.status !== 'ENABLED' || !subrogableUser.subrogeable">
+                Subroger
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
+  <div *ngIf="!dataSource || pending then loadingSpinner"></div>
+  <div *ngIf="!pending && dataSource?.length ===  0 then noResults"></div>
+  <div *ngIf="infiniteScrollDisabled && subrogationService.canLoadMore && !pending then loadMore"></div>
+</div>
 
-        <span *ngIf="subrogableUser.superUserEmail && subrogableUser.superUserEmail == currenteUser.email"
-        class="user-current-in-subrogation-label" i18n="@@SubrogateCurrentUserInSubroLabel">En cours</span>
+<ng-template #noResults>
+  <div class="vitamui-min-content vitamui-table-message">Aucun resultat</div>
+ </ng-template>
 
-        <span *ngIf="subrogableUser.superUserEmail && subrogableUser.superUserEmail != currenteUser.email"
-        class="user-in-subrogation-label" i18n="@@SubrogateUserInSubroLabel">Subrogé par {{subrogableUser.superUserEmail}}</span>
-      </td>
-    </tr>
-  </tbody>
-</table>
+ <ng-template #loadMore>
+  <div class="vitamui-min-content vitamui-table-message" (click)="subrogationService.loadMore()">
+    <span class="clickable">Afficher plus de résultats...</span>
+  </div>
+</ng-template>
 
-<div class="vitamui-table-footer">
-  <mat-spinner *ngIf="pending" class="vitamui-spinner medium"></mat-spinner>
-  <button *ngIf="!pending && infiniteScrollDisabled && subrogationService.canLoadMore" (click)="loadMore()" class="btn" i18n="Show more results@@tableMoreResultButton">
-    Afficher plus de résultats...
-  </button>
-</div>
+<ng-template #loadingSpinner>
+  <div class="vitamui-min-content">
+    <mat-spinner class="vitamui-spinner medium"></mat-spinner>
+  </div>
+</ng-template>
\ No newline at end of file

ui/ui-frontend/projects/identity/src/app/subrogation/subrogate-user/subrogate-user-list/subrogate-user-list.component.scss

@@ -9,7 +9,7 @@
     width: 20px;
     height: 10px;
     border-radius: 3px;
-    background: #919191;
+    background: var(--vitamui-grey);
     margin-right: 5px;
 }
 
@@ -17,7 +17,7 @@
     width: 20px;
     height: 10px;
     border-radius: 3px;
-    background: #dedcdc;
+    background: var(--vitamui-grey-300);
     margin-right: 5px;
 }
 

ui/ui-frontend/projects/identity/src/app/subrogation/subrogate-user/subrogate-user.component.html

-<div class="vitamui-header">
-  <div class="vitamui-container">
-    <h2 i18n="Search for subrogate user@@SubrogationUserSearchTitle">
-      <img src="assets/mini-logo-vitam.png">Rechercher <strong>un Utilisateur permanent</strong> à subroger
-    </h2>
+<mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
+  <mat-sidenav-content class="vitamui-body">
+    <vitamui-common-title-breadcrumb>
+      Subroger un utilisateur
+    </vitamui-common-title-breadcrumb>
 
-    <div class="controls">
-      <vitamui-common-search-bar
-          name="user-search"
-          (search)="onSearchSubmit($event)"
-          i18n-placeholder="subrogation profileSearch@@SearchSubrogationProfile" placeholder="Saisissez le nom du profil de subrogation">
-      </vitamui-common-search-bar>
-
-      <div class="actions">
-        <button class="btn primary" (click)="openUserSubrogationDialog()">
-          <i class="vitamui-icon vitamui-icon-link"></i> <span i18n="subrogate user subrogate@@SubrogateUserButton">Subroger un utilisateur client</span>
+    <vitamui-common-banner
+      [searchbarPlaceholder]="'Nom de Profil de Subrogation'"
+      (search)="onSearchSubmit($event)">
+        <button class="btn primary ml-5">
+          Subroger un utilisateur client
         </button>
-      </div>
-    </div>
-  </div>
-</div>
+    </vitamui-common-banner>
 
-<div class="vitamui-body">
-  <app-subrogate-user-list [search]="search" [emailDomains]="customer?.emailDomains"></app-subrogate-user-list>
-</div>
\ No newline at end of file
+    <app-subrogate-user-list [search]="search" [emailDomains]="customer?.emailDomains"></app-subrogate-user-list>
+  </mat-sidenav-content>
+</mat-sidenav-container>

ui/ui-frontend/projects/identity/src/app/subrogation/subrogation.module.ts

@@ -37,6 +37,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatSidenavModule } from '@angular/material';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -56,6 +57,7 @@ import { SubrogationService } from './subrogation.service';
     VitamUICommonModule,
     SharedModule,
     MatDialogModule,
+    MatSidenavModule,
     MatSelectModule,
     MatProgressSpinnerModule,
     MatProgressBarModule,