62589: Review 03-10-2019 Changes and fixes

src/app/shared/object-select/collection-select/collection-select.component.html

@@ -7,7 +7,7 @@
     [collectionSize]="collectionsRD?.payload?.totalElements"
     [hidePagerWhenSinglePage]="true"
     [hideGear]="true">
-    <div class="table-responsive">
+    <div class="table-responsive mt-2">
       <table id="collection-select" class="table table-striped table-hover">
         <thead>
           <tr>
@@ -24,11 +24,18 @@
       </table>
     </div>
   </ds-pagination>
+  <div *ngIf="collectionsRD?.payload?.totalElements === 0 || collectionsRD?.payload?.page?.length === 0" class="alert alert-info w-100" role="alert">
+    {{'collection.select.empty' | translate}}
+  </div>
   <ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error>
   <ds-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-loading>
-  <div>
+  <div *ngVar="(selectedIds$ | async) as selectedIds">
     <button class="btn btn-outline-secondary collection-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
-    <button *ngIf="dangerConfirm" class="btn btn-danger collection-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>
-    <button *ngIf="!dangerConfirm" class="btn btn-primary collection-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>
+    <button class="btn collection-confirm float-right"
+            [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
+            [disabled]="selectedIds?.length === 0"
+            (click)="confirmSelected()">
+      {{confirmButton | translate}}
+    </button>
   </div>
 </ng-container>

src/app/shared/object-select/collection-select/collection-select.component.spec.ts

@@ -16,7 +16,7 @@ import { CollectionSelectComponent } from './collection-select.component';
 import { Collection } from '../../../core/shared/collection.model';
 import { of } from 'rxjs/internal/observable/of';
 
-describe('ItemSelectComponent', () => {
+describe('CollectionSelectComponent', () => {
   let comp: CollectionSelectComponent;
   let fixture: ComponentFixture<CollectionSelectComponent>;
   let objectSelectService: ObjectSelectService;
@@ -43,7 +43,7 @@ describe('ItemSelectComponent', () => {
       imports: [TranslateModule.forRoot(), SharedModule, RouterTestingModule.withRoutes([])],
       declarations: [],
       providers: [
-        { provide: ObjectSelectService, useValue: new ObjectSelectServiceStub() },
+        { provide: ObjectSelectService, useValue: new ObjectSelectServiceStub([mockCollectionList[1].id]) },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) }
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/shared/object-select/item-select/item-select.component.html

@@ -7,7 +7,7 @@
     [collectionSize]="itemsRD?.payload?.totalElements"
     [hidePagerWhenSinglePage]="true"
     [hideGear]="true">
-    <div class="table-responsive">
+    <div class="table-responsive mt-2">
       <table id="item-select" class="table table-striped table-hover">
         <thead>
         <tr>
@@ -20,19 +20,30 @@
         <tbody>
         <tr *ngFor="let item of itemsRD?.payload?.page">
           <td><input class="item-checkbox" [ngModel]="getSelected(item.id) | async" (change)="switch(item.id)" type="checkbox" name="{{item.id}}"></td>
-          <td *ngIf="!hideCollection"><a [routerLink]="['/items', item.id]">{{(item.owningCollection | async)?.payload?.name}}</a></td>
-          <td><a *ngIf="item.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])" [routerLink]="['/items', item.id]">{{item.firstMetadataValue(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])}}</a></td>
+          <td *ngIf="!hideCollection">
+            <span *ngVar="(item.owningCollection | async)?.payload as collection">
+              <a *ngIf="collection" [routerLink]="['/collections', collection?.id]">{{collection?.name}}</a>
+            </span>
+          </td>
+          <td><span *ngIf="item.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])">{{item.firstMetadataValue(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])}}</span></td>
           <td><a [routerLink]="['/items', item.id]">{{item.firstMetadataValue("dc.title")}}</a></td>
         </tr>
         </tbody>
       </table>
     </div>
   </ds-pagination>
+  <div *ngIf="itemsRD?.payload?.totalElements === 0 || itemsRD?.payload?.page?.length === 0" class="alert alert-info w-100" role="alert">
+    {{'item.select.empty' | translate}}
+  </div>
   <ds-error *ngIf="itemsRD?.hasFailed" message="{{'error.items' | translate}}"></ds-error>
   <ds-loading *ngIf="!itemsRD || itemsRD?.isLoading" message="{{'loading.items' | translate}}"></ds-loading>
-  <div>
+  <div *ngVar="(selectedIds$ | async) as selectedIds">
     <button class="btn btn-outline-secondary item-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
-    <button *ngIf="dangerConfirm" class="btn btn-danger item-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>
-    <button *ngIf="!dangerConfirm" class="btn btn-primary item-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>
+    <button class="btn item-confirm float-right"
+            [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
+            [disabled]="selectedIds?.length === 0"
+            (click)="confirmSelected()">
+      {{confirmButton | translate}}
+    </button>
   </div>
 </ng-container>

src/app/shared/object-select/item-select/item-select.component.spec.ts

@@ -65,7 +65,7 @@ describe('ItemSelectComponent', () => {
       imports: [TranslateModule.forRoot(), SharedModule, RouterTestingModule.withRoutes([])],
       declarations: [],
       providers: [
-        { provide: ObjectSelectService, useValue: new ObjectSelectServiceStub() },
+        { provide: ObjectSelectService, useValue: new ObjectSelectServiceStub([mockItemList[1].id]) },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) }
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/shared/object-select/object-select.service.ts

@@ -51,7 +51,13 @@ export class ObjectSelectService {
    */
   getAllSelected(key: string): Observable<string[]> {
     return this.appStore.select(objectSelectionListStateSelector).pipe(
-      map((state: ObjectSelectionListState) => Object.keys(state[key]).filter((id) => state[key][id].checked))
+      map((state: ObjectSelectionListState) => {
+        if (hasValue(state[key])) {
+          return Object.keys(state[key]).filter((id) => state[key][id].checked);
+        } else {
+          return [];
+        }
+      })
     );
   }