[DSC-1542] improve select button behavior, disable field, add translations

Author: FrancescoMolinaro

src/app/shared/eperson-group-list/eperson-group-list.component.html

@@ -23,9 +23,12 @@
           <td>{{entry.id}}</td>
           <td>{{dsoNameService.getName(entry)}}</td>
           <td class="text-center">
-            <button class="btn btn-sm btn-outline-primary" (click)="emitSelect(entry)">
+            <button class="btn btn-sm btn-outline-primary" *ngIf="!(isSelected(entry) | async)" (click)="emitSelect(entry)">
               {{'resource-policies.form.eperson-group-list.select.btn' | translate}}
             </button>
+            <button class="btn btn-sm btn-primary" *ngIf="isSelected(entry) | async" (click)="emitDeselect(entry)">
+              {{'resource-policies.form.eperson-group-list.deselect.btn' | translate}}
+            </button>
           </td>
         </tr>
         </tbody>

src/app/shared/eperson-group-list/eperson-group-list.component.ts

@@ -55,6 +55,12 @@ export class EpersonGroupListComponent implements OnInit, OnDestroy {
    */
   @Output() select: EventEmitter<DSpaceObject> = new EventEmitter<DSpaceObject>();
 
+  /**
+   * An event fired when a eperson or group is deselected.
+   * Event's payload equals to DSpaceObject.
+   */
+  @Output() deselect: EventEmitter<DSpaceObject> = new EventEmitter<DSpaceObject>();
+
   /**
    * Current search query
    */
@@ -204,5 +210,14 @@ export class EpersonGroupListComponent implements OnInit, OnDestroy {
     this.paginationService.clearPagination(this.paginationOptions.id);
   }
 
-
+  /**
+   * Method called when an entry is deselected.
+   * Emit a new select Event
+   *
+   * @param entry The eperson or group selected
+   */
+  emitDeselect(entry: DSpaceObject) {
+    this.deselect.emit(entry);
+    this.entrySelectedId.next(null);
+  }
 }

src/app/shared/resource-policies/form/resource-policy-form.component.html

@@ -7,18 +7,19 @@
            [displayCancel]="false"></ds-form>
   <div class="container-fluid">
     <label for="ResourcePolicyObject">{{'resource-policies.form.eperson-group-list.label' | translate}}</label>
-    <input id="ResourcePolicyObject" class="form-control mb-3" type="text" [value]="resourcePolicyTargetName$ | async">
+    <input id="ResourcePolicyObject" class="form-control mb-3" type="text" [value]="resourcePolicyTargetName$ | async" disabled>
     <ul ngbNav #nav="ngbNav" class="nav-pills" [(activeId)]="navActiveId" (navChange)="onNavChange($event)">
       <li [ngbNavItem]="'eperson'">
         <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.eperson' | translate}}</a>
         <ng-template ngbNavContent>
-          <ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
+          <ds-eperson-group-list (deselect)="updateObjectSelected($event, false, true)" (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
         </ng-template>
       </li>
       <li [ngbNavItem]="'group'">
         <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.group' | translate}}</a>
         <ng-template ngbNavContent>
           <ds-eperson-group-list [isListOfEPerson]="false"
+                                 (deselect)="updateObjectSelected($event, false, true)"
                                  (select)="updateObjectSelected($event, false)"></ds-eperson-group-list>
         </ng-template>
       </li>

src/app/shared/resource-policies/form/resource-policy-form.component.ts

@@ -275,11 +275,17 @@ export class ResourcePolicyFormComponent implements OnInit, OnDestroy {
   /**
    * Update reference to the eperson or group that will be granted the permission
    */
-  updateObjectSelected(object: DSpaceObject, isEPerson: boolean): void {
+  updateObjectSelected(object: DSpaceObject, isEPerson: boolean, deselect = false): void {
     this.resourcePolicyTargetUpdated = true;
-    this.resourcePolicyGrant = object;
     this.resourcePolicyGrantType = isEPerson ? 'eperson' : 'group';
-    this.resourcePolicyTargetName$.next(this.getResourcePolicyTargetName());
+
+    if (deselect) {
+      this.resourcePolicyGrant = null;
+      this.resourcePolicyTargetName$.next(null);
+    } else {
+      this.resourcePolicyGrant = object;
+      this.resourcePolicyTargetName$.next(this.getResourcePolicyTargetName());
+    }
   }
 
   /**