55693: Tabset

resources/i18n/en.json

@@ -18,6 +18,10 @@
       "head": "Item Mapper - Map Items from Other Collections",
       "collection": "Collection: \"<b>{{name}}</b>\"",
       "description": "This is the item mapper tool that allows collection administrators to map items from other collections into this collection. You can search for items from other collections and map them, or browse the list of currently mapped items.",
+      "tabs": {
+        "browse": "Browse",
+        "map": "Map"
+      },
       "return": "Return"
     }
   },

src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.html

@@ -14,30 +14,23 @@
           </ds-search-form>
         </div>
       </div>
-      <ul class="nav nav-tabs mb-2">
-        <li class="nav-item">
-          <span class="tab nav-link" id="tab-browse-content" (click)="activeTab = 0" [ngClass]="(activeTab == 0)?'active':''">Browse</span>
-        </li>
-        <li class="nav-item">
-          <span class="tab nav-link" id="tab-map-content" (click)="activeTab = 1" [ngClass]="(activeTab == 1)?'active':''">Map</span>
-        </li>
-      </ul>
 
-      <div class="tab-content">
-        <!-- Browse Tab -->
-        <div *ngIf="activeTab == 0" id="tab-browse">
-          <ds-viewable-collection
-            [config]="(searchOptions$ | async)?.pagination"
-            [sortConfig]="(searchOptions$ | async)?.sort"
-            [objects]="collectionItemsRD$ | async">
-          </ds-viewable-collection>
-        </div>
-
-        <!-- Map Tab -->
-        <div *ngIf="activeTab == 1" id="tab-map">
-          <ds-item-select [itemsRD$]="mappingItemsRD$" [paginationOptions]="(searchOptions$ | async)?.pagination"></ds-item-select>
-        </div>
-      </div>
+      <ngb-tabset>
+        <ngb-tab title="{{'collection.item-mapper.tabs.browse' | translate}}">
+          <ng-template ngbTabContent>
+            <ds-viewable-collection
+              [config]="(searchOptions$ | async)?.pagination"
+              [sortConfig]="(searchOptions$ | async)?.sort"
+              [objects]="collectionItemsRD$ | async">
+            </ds-viewable-collection>
+          </ng-template>
+        </ngb-tab>
+        <ngb-tab title="{{'collection.item-mapper.tabs.map' | translate}}">
+          <ng-template ngbTabContent>
+            <ds-item-select [itemsRD$]="mappingItemsRD$" [paginationOptions]="(searchOptions$ | async)?.pagination"></ds-item-select>
+          </ng-template>
+        </ngb-tab>
+      </ngb-tabset>
 
       <button [routerLink]="['/collections/', (collectionRD$ | async)?.payload?.id]" class="btn btn-outline-secondary">{{'collection.item-mapper.return' | translate}}</button>
     </div>

src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.scss

@@ -1,5 +1 @@
 @import '../../../styles/variables.scss';
-
-.tab:hover {
-  cursor: pointer;
-}

src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.ts

@@ -32,8 +32,6 @@ export class CollectionItemMapperComponent implements OnInit {
   collectionItemsRD$: Observable<RemoteData<PaginatedList<DSpaceObject>>>;
   mappingItemsRD$: Observable<RemoteData<PaginatedList<DSpaceObject>>>;
 
-  activeTab = 0;
-
   constructor(private collectionDataService: CollectionDataService,
               private route: ActivatedRoute,
               private router: Router,