fix(admin): WB-3183 remove position addconfirmation + call user update

Author: Romu-C

admin/src/main/resources/i18n/fr.json

@@ -189,6 +189,8 @@
   "user-position.input-name": "Nom de la fonction",
   "user-position.input-name-placeholder": "Saisissez le nom de la fonction",
   "user-position.input-name.not-found": "Cette fonction n’est pas répertoriée, souhaitez-vous l’ajouter ?",
+  "user-position.confirm.remove.title": "Enlever la fonction",
+  "user-position.confirm.remove.text": "Êtes vous sûr de vouloir enlever la fonction {{name}} ?",
 
   "management.message.flash": "Message Flash",
   "management.message.flash.edit": "Éditer un message flash",
@@ -1053,6 +1055,8 @@
   "notify.user-position.assign.success.content": "Les fonctions ont été assignées.",
   "notify.user-position.assign.error.content": "Les fonctions n'ont pas pu être assignées.",
   "notify.user-position.assign.error.title": "Erreur lors de la sauvegarde",
+  "notify.user-position.remove.error.content": "La fonction n'a pas pu être enlevée.",
+  "notify.user-position.remove.success.content": "La fonction a été enlevée.",
   "notify.user-position.create.success.content": "La fonction a été créée.",
   "notify.user-position.create.error.title": "Erreur lors de la création",
   "notify.user-position.create.error.content": "La fonction {{position}} n'a pas pu être créée.",

admin/src/main/ts/src/app/users/details/sections/user-positions/user-positions-section.component.html

@@ -9,9 +9,15 @@
 
   <ul class="actions-list">
     <li *ngFor="let userPosition of userPositions">
-      <span>{{ userPosition.name }} - <s5l>user-position.source.{{ userPosition.source }}</s5l></span>
-      <i class="fa fa-times action" (click)="removeUserPosition(userPosition)"
-        [title]="'user-position.remove' | translate"></i>
+      <span
+        >{{ userPosition.name }} -
+        <s5l>user-position.source.{{ userPosition.source }}</s5l></span
+      >
+      <i
+        class="fa fa-times action"
+        (click)="removeUserPosition(userPosition)"
+        [title]="'user-position.remove' | translate"
+      ></i>
     </li>
   </ul>
 
@@ -30,13 +36,16 @@ <h3><s5l>user-position.select</s5l></h3>
         (filteredListChange)="filteredListChange($event)"
       ></ode-user-position-list>
       <div *ngIf="showEmptyScreen" class="empty-screen">
-        <img height="100" src="/admin/public/img/user-position-empty-screen.svg" />
+        <img
+          height="100"
+          src="/admin/public/img/user-position-empty-screen.svg"
+        />
         <s5l>user-position.input-name.not-found</s5l>
         <button (click)="openUserPositionCreationModal()">
           <s5l>user-position.add</s5l>
           <i class="fa fa-plus-circle is-size-5"></i>
         </button>
-      </div>        
+      </div>
     </div>
   </ode-lightbox>
 
@@ -47,4 +56,18 @@ <h3><s5l>user-position.select</s5l></h3>
     (onClose)="addUserPositionToList($event)"
   >
   </ode-user-position-modal>
+
+  <ode-lightbox-confirm
+    *ngIf="positionToRemove"
+    [show]="showConfirmRemovePosition"
+    lightboxTitle="user-position.confirm.remove.title"
+    (onCancel)="removeUserPositionCancel()"
+    (onConfirm)="removeUserPositionConfirmed()"
+  >
+    <p>
+      <s5l [s5l-params]="{ name: positionToRemove.name }"
+        >user-position.confirm.remove.text</s5l
+      >
+    </p>
+  </ode-lightbox-confirm>
 </ode-panel-section>

admin/src/main/ts/src/app/users/details/sections/user-positions/user-positions-section.component.ts

@@ -32,6 +32,9 @@ export class UserPositionsSectionComponent
   showUserPositionCreationLightbox: boolean = false;
   showEmptyScreen: boolean = false;
 
+  showConfirmRemovePosition: boolean = false;
+  positionToRemove: UserPosition;
+
   /** Truthy when detecting user's positions changes */
   get hasUserPositionsChanged(): boolean {
     return (!this.details.userPositions && this.userPositions.length > 0) || 
@@ -134,7 +137,18 @@ export class UserPositionsSectionComponent
   }
 
   removeUserPosition(position: UserPosition) {
-    this.userPositions = this.userPositions.filter((p) => p.id !== position.id);
+    this.positionToRemove = position;
+    this.showConfirmRemovePosition = true;
+  }
+
+  removeUserPositionCancel() {
+    this.showConfirmRemovePosition = false;
+  }
+
+  removeUserPositionConfirmed() {
+    this.userPositions = this.userPositions.filter((p) => p.id !== this.positionToRemove.id);
+    this.saveUpdate(true);
+    this.showConfirmRemovePosition = false;
   }
 
   openUserPositionCreationModal() {
@@ -150,7 +164,7 @@ export class UserPositionsSectionComponent
     this.showUserPositionCreationLightbox = false;
   }
 
-  saveUpdate() {
+  saveUpdate(removePosition = false) {
     if( this.userPositions && this.userPositions.length>0) {
       this.details.userPositions = [...this.userPositions];
     } else {
@@ -160,14 +174,14 @@ export class UserPositionsSectionComponent
       .perform('portal-content', this.details.updateUserPositions())
       .then(() => {
         this.ns.success(
-          'notify.user-position.assign.success.content',
+          removePosition ? 'notify.user-position.remove.success.content' :'notify.user-position.assign.success.content',
           'notify.user-position.success.title'
         );
         this.userInfoService.setState(this.details);
       })
       .catch(err => {
         this.ns.error(
-          'notify.user-position.assign.error.content',
+          removePosition ? 'notify.user-position.remove.error.content':  'notify.user-position.assign.error.content',
           'notify.user-position.assign.error.title', 
           err
         );