Draft: Associate Item Frontend

src/app/app-routing.module.ts

@@ -221,6 +221,11 @@ import { RedirectService } from './redirect/redirect.service';
               .then((m) => m.EditItemModule),
             canActivate: [EndUserAgreementCurrentUserGuard]
           },
+          {
+            path: 'associate-item',
+            loadChildren: () => import('./associate-item/associate-item.module')
+              .then((m) => m.AssociateItemModule),
+          },
           {
             path: PROFILE_MODULE_PATH,
             loadChildren: () => import('./profile-page/profile-page.module')

src/app/app.reducer.ts

@@ -53,6 +53,10 @@ import {
   editItemRelationshipsReducer,
   EditItemRelationshipsState
 } from './edit-item-relationships/edit-item-relationships.reducer';
+import {
+  associateItemReducer,
+  AssociateItemState
+} from './associate-item/associate-item.reducer';
 
 export interface AppState {
   router: RouterReducerState;
@@ -76,6 +80,7 @@ export interface AppState {
   correlationId: string;
   contextHelp: ContextHelpState;
   editItemRelationships: EditItemRelationshipsState;
+  associateItem: AssociateItemState;
 }
 
 export const appReducers: ActionReducerMap<AppState> = {
@@ -99,7 +104,8 @@ export const appReducers: ActionReducerMap<AppState> = {
   correlationId: correlationIdReducer,
   contextHelp: contextHelpReducer,
   statistics: StatisticsReducer,
-  editItemRelationships: editItemRelationshipsReducer
+  editItemRelationships: editItemRelationshipsReducer,
+  associateItem: associateItemReducer,
 };
 
 export const routerStateSelector = (state: AppState) => state.router;

src/app/associate-item/associate-item-page.component.html

@@ -0,0 +1,41 @@
+<div class="container">
+    <div class="button-row bottom mb-3">
+      <button class="btn btn-outline-secondary" id="backButton"
+              (click)="onReturn()"><i class="fas fa-arrow-left"></i> {{'associate.item.page.button.return' | translate}}</button>
+    </div>
+  <div class="row">
+    <div class="col-md-12 mb-4 pl-4">
+      <h3>{{'associate.item.' + mode.modename | translate}}</h3>
+    </div>
+    <div  class="col-md-12 mb-4 pl-4" *ngIf="description" [innerHTML]="description"></div>
+  </div>
+  <div class="row">
+    <div class="col-md-12 mb-4 pl-4 btn-group">
+      <button class="btn btn-secondary p-1 btnsamesize" id="connectedButton"
+            (click)="onSearchConnected($event)">{{'associate.item.page.button.search.connected' | translate}}</button>
+      <button class="btn btn-secondary p-1 ml-4 btnsamesize" id="notconnectedButton"
+            (click)="onSearchnotConnected($event)">{{'associate.item.page.button.search.notconnected' | translate}}</button>
+      <button class="btn btn-secondary p-1 ml-4 btnsamesize" id="allButton"
+            (click)="onSearchAll($event)">{{'associate.item.page.button.search.all' | translate}}</button>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-12">
+      <ds-loading *ngIf="!isActive"></ds-loading>
+      <ds-configuration-search-page *ngIf="isActive"
+                                    [configuration]="configuration"
+                                    [context]="context"
+                                    [searchFormPlaceholder]="'associate.item.search.placeholder'"
+                                    [fixedFilterQuery]="searchFilter"
+                                    [collapseFilters]="true"
+                                    [showFilterToggle]="true"
+                                    [viewModeList]="viewModes"
+                                    [showViewModes]="false"
+                                    [showExport]="false"
+                                    [customData]="{updateStatusByItemId$: updateStatusByItemId$, metadatafield: metadatafield, targetid: item.id}"
+                                    [showScopeSelector]="false"
+                                    (customEvent)="manageAction($event)"></ds-configuration-search-page>
+    </div>
+  </div>
+</div>

src/app/associate-item/associate-item-page.component.scss

@@ -0,0 +1,3 @@
+.btnsamesize {
+    min-width: var(--ds-edit-item-button-min-width);
+}

src/app/associate-item/associate-item-page.component.spec.ts

@@ -0,0 +1,106 @@
+/* eslint-disable max-classes-per-file */
+import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute, ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { AssociateItemPageComponent } from './associate-item-page.component';
+import { Observable, of as observableOf } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { createSuccessfulRemoteDataObject } from '../shared/remote-data.utils';
+import { Item } from '../core/shared/item.model';
+
+describe('AssociateItemPageComponent', () => {
+  let comp: AssociateItemPageComponent;
+  let fixture: ComponentFixture<AssociateItemPageComponent>;
+
+  class AcceptAllGuard implements CanActivate {
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      return observableOf(true);
+    }
+  }
+
+  class AcceptNoneGuard implements CanActivate {
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      return observableOf(false);
+    }
+  }
+
+  const accesiblePages = ['accessible'];
+  const inaccesiblePages = ['inaccessible', 'inaccessibleDoubleGuard'];
+  const mockRoute = {
+    snapshot: {
+      firstChild: {
+        routeConfig: {
+          path: accesiblePages[0]
+        }
+      },
+      routerState: {
+        snapshot: undefined
+      }
+    },
+    routeConfig: {
+      children: [
+        {
+          path: accesiblePages[0],
+          canActivate: [AcceptAllGuard]
+        }, {
+          path: inaccesiblePages[0],
+          canActivate: [AcceptNoneGuard]
+        }, {
+          path: inaccesiblePages[1],
+          canActivate: [AcceptAllGuard, AcceptNoneGuard]
+        },
+      ]
+    },
+    data: observableOf({dso: createSuccessfulRemoteDataObject(new Item())})
+  };
+
+  const mockRouter = {
+    routerState: {
+      snapshot: undefined
+    },
+    events: observableOf(undefined)
+  };
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      declarations: [AssociateItemPageComponent],
+      providers: [
+        { provide: ActivatedRoute, useValue: mockRoute },
+        { provide: Router, useValue: mockRouter },
+        AcceptAllGuard,
+        AcceptNoneGuard,
+      ],
+
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(AssociateItemPageComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
+  }));
+
+  beforeEach(waitForAsync(() => {
+    fixture = TestBed.createComponent(AssociateItemPageComponent);
+    comp = fixture.componentInstance;
+    spyOn((comp as any).injector, 'get').and.callFake((a) => new a());
+    fixture.detectChanges();
+  }));
+
+  describe('ngOnInit', () => {
+    it('should enable tabs that the user can activate', fakeAsync(() => {
+      const enabledItems = fixture.debugElement.queryAll(By.css('a.nav-link'));
+      expect(enabledItems.length).toBe(accesiblePages.length);
+    }));
+
+    it('should disable tabs that the user can not activate', () => {
+      const disabledItems = fixture.debugElement.queryAll(By.css('button.nav-link.disabled'));
+      expect(disabledItems.length).toBe(inaccesiblePages.length);
+    });
+  });
+});