Tables headings updated to include resourceTypeId which then generates route to the resource

docker/local.cfg

@@ -1,3 +1,4 @@
 # This is a sample config file for backend.
 # Replace with production local.cfg.
 # It will be mounted to docker container.
+rest.cors.allowed-origins = ${dspace.ui.url}, http://localhost:3000/, http://127.0.0.1:3000, http://127.0.0.1:4000

src/app/community-page/community-page-routing-paths.ts

@@ -9,6 +9,7 @@ export function getCommunityModuleRoute() {
   return `/${COMMUNITY_MODULE_PATH}`;
 }
 
+
 export function getCommunityPageRoute(communityId: string) {
   return new URLCombiner(getCommunityModuleRoute(), communityId).toString();
 }
@@ -25,6 +26,13 @@ export function getCommunityEditRolesRoute(id) {
   return new URLCombiner(getCollectionPageRoute(id), COMMUNITY_EDIT_PATH, COMMUNITY_EDIT_ROLES_PATH).toString();
 }
 
+export function getHandlePageRoute(input: string): string {
+  const source_array = ['Community', 'Collection', 'Item', 'Site'];
+  const results_options = ['communities', 'collections', 'items', 'sites'];
+  const index = source_array.indexOf(input);
+  return new URLCombiner(results_options[index] || 'pending').toString();
+}
+
 export const COMMUNITY_CREATE_PATH = 'create';
 export const COMMUNITY_EDIT_PATH = 'edit';
 export const COMMUNITY_EDIT_ROLES_PATH = 'roles';

src/app/core/handle/handle.model.ts

@@ -41,6 +41,9 @@ export class Handle extends ListableObject implements HALResource {
   @autoserialize
   url: string;
 
+  @autoserialize
+  resourceId: string;
+
   /**
    * The element of this metadata field
    */

src/app/handle-page/handle-table/handle-table.component.html

@@ -5,24 +5,24 @@ <h5 class="card-header">{{ 'handle-table.title' | translate }}</h5>
 
       <!-- The search panel -->
       <div class="input-group mb-3">
-      <div ngbDropdown class="input-group-prepend">
-        <button id="resultdropdown" type="button"
-                ngbDropdownToggle
-                class="btn btn-outline-secondary dropdown-toggle"
-                data-bs-toggle="dropdown" aria-haspopup="true"
-                aria-expanded="false">
-          <span *ngIf="searchOption != null" [ngModel]="searchOption" name="searchOption" ngDefaultControl>{{searchOption}}</span>
-          <span *ngIf="searchOption == null" >{{'handle-table.dropdown.search-option' | translate}}</span>
-        </button>
-        <div ngbDropdownMenu aria-labelledby="resultdropdown">
-          <button class="dropdown-item" (click)="setSearchOption($event)">{{"handle-table.table.handle" | translate}}</button>
-          <button class="dropdown-item" (click)="setSearchOption($event)">{{"handle-table.table.internal" | translate}}</button>
-          <button class="dropdown-item" (click)="setSearchOption($event)">{{"handle-table.table.resource-type" | translate}}</button>
+        <div ngbDropdown class="input-group-prepend">
+          <button id="resultdropdown" type="button" ngbDropdownToggle class="btn btn-outline-secondary dropdown-toggle"
+            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span *ngIf="searchOption != null" [ngModel]="searchOption" name="searchOption"
+              ngDefaultControl>{{searchOption}}</span>
+            <span *ngIf="searchOption == null">{{'handle-table.dropdown.search-option' | translate}}</span>
+          </button>
+          <div ngbDropdownMenu aria-labelledby="resultdropdown">
+            <button class="dropdown-item" (click)="setSearchOption($event)">{{"handle-table.table.handle" |
+              translate}}</button>
+            <button class="dropdown-item" (click)="setSearchOption($event)">{{"handle-table.table.internal" |
+              translate}}</button>
+            <button class="dropdown-item" (click)="setSearchOption($event)">{{"handle-table.table.resource-type" |
+              translate}}</button>
+          </div>
         </div>
-      </div>
         <input type="text" id="clarin-dc-search-box" class="form-control" aria-label="Text input with dropdown button"
-               [value]="searchQuery"
-               #searchInput>
+          [value]="searchQuery" #searchInput>
         <span class="input-group-append" (click)="searchHandles(searchInput.value)">
           <button type="submit" class="btn btn-primary search-button">
             <i class="fas fa-search"></i>{{'handle-table.dropdown.search-button' | translate}}</button>
@@ -32,73 +32,80 @@ <h5 class="card-header">{{ 'handle-table.title' | translate }}</h5>
       <!-- The table with pagination -->
       <div *ngVar="(handlesRD$ | async)?.payload as handles">
         <div class="mb-2">
-          <ds-pagination (paginationChange)="onPageChange()"
-                         [sortOptions]="sortConfiguration"
-                         [hideGear]="true"
-                         [hidePagerWhenSinglePage]="true"
-                         [paginationOptions]="options"
-                         [pageInfoState]="handles?.pageInfo"
-                         [collectionSize]="handles?.totalElements"
-                         [retainScrollPosition]="true">
+          <ds-pagination (paginationChange)="onPageChange()" [sortOptions]="sortConfiguration" [hideGear]="true"
+            [hidePagerWhenSinglePage]="true" [paginationOptions]="options" [pageInfoState]="handles?.pageInfo"
+            [collectionSize]="handles?.totalElements" [retainScrollPosition]="true">
             <table class="table table-striped table-bordered align-middle my-2">
               <thead>
-              <tr>
-                <th scope="col"></th>
-                <th scope="col">{{"handle-table.table.handle" | translate}}</th>
-                <th scope="col">{{"handle-table.table.internal" | translate}}</th>
-                <th scope="col">{{"handle-table.table.url" | translate}}</th>
-                <th scope="col">{{"handle-table.table.resource-type" | translate}}</th>
-                <th scope="col">{{"handle-table.table.resource-id" | translate}}</th>
-              </tr>
+                <tr>
+                  <th scope="col"></th>
+                  <th scope="col">{{"handle-table.table.handle" | translate}}</th>
+                  <th scope="col">{{"handle-table.table.internal" | translate}}</th>
+                  <th scope="col">{{"handle-table.table.url" | translate}}</th>
+                  <!-- <th scope="col">{{"handle-table.table.resource-type" | translate}}</th> -->
+                  <th scope="col">{{"handle-table.table.resource-type-id" | translate}}</th>
+                  <th scope="col">{{"handle-table.table.resource-id" | translate}}</th>
+                </tr>
               </thead>
               <tbody>
-              <tr *ngFor="let handle of handles?.page" [id]="'handle-row-' + handle.id">
-                <td><input class="collection-checkbox" [ngModel]="selectedHandle === handle.id" (change)="switchSelectedHandle(handle.id)" type="checkbox" name="{{handle.id}}"></td>
-                <td class="version-row-element-version">
-                  {{handle?.handle}}
-                </td>
-                <td class="version-row-element-editor">
-                  <span *ngIf="handle?.resourceTypeID == null">
-                    {{ 'handle-table.table.not-internal' | translate }}
-                  </span>
-                  <span *ngIf="handle?.resourceTypeID != null">
-                    {{ 'handle-table.table.is-internal' | translate }}
-                  </span>
-                </td>
-                <td class="version-row-element-editor">
-                  {{handle?.url}}
-                </td>
-                <td class="version-row-element-editor">
-                  {{handle?.resourceTypeID}}
-                </td>
-                <td class="version-row-element-editor">
-                  <span *ngIf="handle?.resourceTypeID != null">
-                     {{handle?.id}}
-                  </span>
-                </td>
-              </tr>
+                <tr *ngFor="let handle of handles?.page" [id]="'handle-row-' + handle.id">
+
+                  <td><input class="collection-checkbox" [ngModel]="selectedHandle === handle.id"
+                      (change)="switchSelectedHandle(handle.id)" type="checkbox" name="{{handle.id}}"></td>
+
+                  <td class="version-row-element-version">
+                    {{handle?.handle}} 
+                  </td>
+
+                  <td class="version-row-element-editor">
+                    <span *ngIf="handle?.resourceTypeID == null">
+                      {{ 'handle-table.table.not-internal' | translate }}
+                    </span>
+                    <span *ngIf="handle?.resourceTypeID != null">
+                      {{ 'handle-table.table.is-internal' | translate }}
+                    </span> 
+                  </td>
+
+                  <td class="version-row-element-editor">
+                    <a *ngIf="handle?.url" [href]="handle?.url" target="_blank" rel="noopener noreferrer">
+                      {{handle?.url}} 
+
+                    </a>
+                  </td>
+
+                  <td class="version-row-element-editor">
+                    {{handle?.resourceTypeID}}
+                  </td>
+
+                  <td class="version-row-element-editor">
+                    <span *ngIf="handle?.resourceId != null">
+                      <a [href]="getHandlePageRoute(handle?.resourceTypeID)+'/' + handle?.resourceId" target="_blank"
+                        rel="noopener noreferrer">
+                        {{handle?.resourceId}}
+                      </a>
+                    </span>
+                  </td>
+
+                </tr>
               </tbody>
             </table>
             <ds-loading *ngIf="isLoading" class="text-center"></ds-loading>
           </ds-pagination>
           <div class="mt-2">
             <div class="btn-group pr-1">
-              <button type="button" class="btn btn-success"
-                      (click)="redirectWithCurrentPage()">
+              <button type="button" class="btn btn-success" (click)="redirectWithCurrentPage()">
                 {{'handle-table.button.new-handle' | translate}}
               </button>
             </div>
             <div class="btn-group pr-1">
-              <button type="button" class="btn btn-warning"
-                      (click)="redirectWithHandleParams()"
-                      [disabled]="selectedHandle === null">
+              <button type="button" class="btn btn-warning" (click)="redirectWithHandleParams()"
+                [disabled]="selectedHandle === null">
                 {{'handle-table.button.edit-handle' | translate}}
               </button>
             </div>
             <div class="btn-group pr-1">
-              <button type="button" class="btn btn-danger"
-                      (click)="deleteHandles()"
-                      [disabled]="selectedHandle === null">
+              <button type="button" class="btn btn-danger" (click)="deleteHandles()"
+                [disabled]="selectedHandle === null">
                 {{'handle-table.button.delete-handle' | translate}}
               </button>
             </div>
@@ -107,4 +114,4 @@ <h5 class="card-header">{{ 'handle-table.title' | translate }}</h5>
       </div>
     </div>
   </div>
-</div>
+</div>

src/app/handle-page/handle-table/handle-table.component.ts

@@ -28,6 +28,8 @@
   SITE,
   SUCCESSFUL_RESPONSE_START_CHAR
 } from '../../core/handle/handle.resource-type';
+import { getHandlePageRoute } from 'src/app/community-page/community-page-routing-paths';
+
 
 /**
  * Constants for converting the searchQuery for the server
@@ -46,65 +48,69 @@
 })
 export class HandleTableComponent implements OnInit {
 
+  getHandlePageRoute(resourceId: string | undefined): string {
+    return getHandlePageRoute(resourceId ?? '');
+  }
+
   constructor(private handleDataService: HandleDataService,
-              private paginationService: PaginationService,
-              public router: Router,
-              private requestService: RequestService,
-              private cdr: ChangeDetectorRef,
-              private translateService: TranslateService,
-              private notificationsService: NotificationsService,) {
+    private paginationService: PaginationService,
+    public router: Router,
+    private requestService: RequestService,
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService,
+    private notificationsService: NotificationsService,) {
   }
 
   /**
    * The reference for the input html element
    */
-  @ViewChild('searchInput', {static: true}) searchInput: ElementRef;
+  @ViewChild('searchInput', { static: true }) searchInput: ElementRef;
 
   /**
    * The list of Handle object as BehaviorSubject object
    */
   handlesRD$: BehaviorSubject<RemoteData<PaginatedList<Handle>>> = new BehaviorSubject<RemoteData<PaginatedList<Handle>>>(null);
 
   /**
    * The amount of versions to display per page
    */
   pageSize = 10;
 
   /**
    * The page options to use for fetching the versions
    * Start at page 1 and always use the set page size
    */
   options: PaginationComponentOptions;
 
   /**
    * The configuration which is send to the server with search request.
    */
   sortConfiguration: SortOptions;
 
   /**
    * The value typed in the search panel.
    */
   searchQuery = '';
 
   /**
    * Filter the handles based on this column.
    */
   searchOption: string;
 
   /**
    * String value of the `Handle` search option. This value is loaded from the `en.json5`.
    */
   handleOption: string;
 
   /**
    * String value of the `Internal` search option. This value is loaded from the `en.json5`.
    */
   internalOption: string;
 
   /**
    * String value of the `Resource type` search option. This value is loaded from the `en.json5`.
    */
   resourceTypeOption: string;
 
   /**
    * If the request isn't processed show to loading bar.
@@ -131,6 +137,7 @@
    */
   selectedHandle = null;
 
+
   ngOnInit(): void {
     this.handleRoute = getHandleTableModulePath();
     this.initializePaginationOptions();
@@ -156,17 +163,19 @@
     observableCombineLatest([currentPagination$, currentSort$]).pipe(
       switchMap(([currentPagination, currentSort]) => {
         return this.handleDataService.findAll({
-            currentPage: currentPagination.currentPage,
-            elementsPerPage: currentPagination.pageSize,
-            sort: {field: currentSort.field, direction: currentSort.direction}
-          }, false
+          currentPage: currentPagination.currentPage,
+          elementsPerPage: currentPagination.pageSize,
+          sort: { field: currentSort.field, direction: currentSort.direction }
+        }, false
         );
       }),
       getFirstSucceededRemoteData()
     ).subscribe((res: RemoteData<PaginatedList<Handle>>) => {
       this.handlesRD$.next(res);
       this.isLoading = false;
     });
+
+
   }
 
   /**
@@ -215,9 +224,13 @@
         if (handle.id === this.selectedHandle) {
           this.switchSelectedHandle(this.selectedHandle);
           this.router.navigate([this.handleRoute, this.editHandlePath],
-            { queryParams: { id: handle.id, _selflink: handle._links.self.href, handle: handle.handle,
+            {
+              queryParams: {
+                id: handle.id, _selflink: handle._links.self.href, handle: handle.handle,
                 url: handle.url, resourceType: handle.resourceTypeID, resourceId: handle.id,
-                currentPage: this.options.currentPage } },
+                currentPage: this.options.currentPage
+              }
+            },
           );
         }
       });
@@ -269,7 +282,7 @@
           let errorMessage = '';
           this.translateService.get('handle-table.delete-handle.notify.error').pipe(
             take(1)
-          ).subscribe( message => {
+          ).subscribe(message => {
             errorMessage = message + ': ' + info.response.errorMessage;
           });
 
@@ -290,13 +303,13 @@
     const refreshTimeout = 20;
 
     this.isLoading = true;
-    const interval = setInterval( () => {
+    const interval = setInterval(() => {
       let isHandleInTable = false;
       // Load handle from the DB
-      this.handleDataService.findAll( {
-          currentPage: this.options.currentPage,
-          elementsPerPage: this.options.pageSize,
-        }, false
+      this.handleDataService.findAll({
+        currentPage: this.options.currentPage,
+        elementsPerPage: this.options.pageSize,
+      }, false
       ).pipe(
         getFirstSucceededRemoteData(),
         getRemoteDataPayload()
@@ -316,13 +329,13 @@
       });
 
       // Clear interval after 20s timeout
-      if (counter === ( refreshTimeout * 1000 ) / 250) {
+      if (counter === (refreshTimeout * 1000) / 250) {
         this.isLoading = false;
         this.cdr.detectChanges();
         clearInterval(interval);
       }
       counter++;
-    }, 250 );
+    }, 250);
   }
 
   /**
@@ -333,12 +346,12 @@
       return;
     }
 
-    fromEvent(this.searchInput.nativeElement,'keyup')
+    fromEvent(this.searchInput.nativeElement, 'keyup')
       .pipe(
         debounceTime(300),
         distinctUntilChanged()
       )
-      .subscribe( cc => {
+      .subscribe(cc => {
         this.searchHandles(this.searchInput.nativeElement.value);
         setTimeout(() => {
           // click to refresh table data because without click it still shows wrong data