Merged in DSC-983-counters-component-main (pull request DSpace#1318)

DSC-983 counters component main

Author: Davide Negretti

src/app/core/core.module.ts

@@ -237,6 +237,7 @@ import {
 } from './metadata/schema-json-ld/schema-types/product/product-creative-work-schema-type';
 import { ProductDatasetSchemaType } from './metadata/schema-json-ld/schema-types/product/product-dataset-schema-type';
 import { PersonSchemaType } from './metadata/schema-json-ld/schema-types/Person/person-schema-type';
+import { InternalLinkService } from './services/internal-link.service';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -270,6 +271,7 @@ const PROVIDERS = [
   { provide: DspaceRestService, useFactory: restServiceFactory, deps: [MOCK_RESPONSE_MAP, HttpClient] },
   EPersonDataService,
   LinkHeadService,
+  InternalLinkService,
   HALEndpointService,
   HostWindowService,
   ItemDataService,

src/app/item-page/full/field-components/file-section/full-file-section.component.html

@@ -33,7 +33,7 @@ <h5 class="simple-view-element-header">{{"item.page.filesection.original.bundle"
                           </ng-container>
                         </dl>
                     </div>
-                    <div class="col-2">
+                    <div *ngIf="!hasNoDownload(file)" class="col-2">
                         <ds-themed-file-download-link [bitstream]="file" [item]="item">
                             {{"item.page.filesection.download" | translate}}
                         </ds-themed-file-download-link>

src/app/item-page/full/field-components/file-section/full-file-section.component.ts

@@ -108,6 +108,10 @@ export class FullFileSectionComponent extends FileSectionComponent implements On
     return hasValue(bundle) && !isEmpty(bundle.page);
   }
 
+  hasNoDownload(bitstream: Bitstream) {
+    return bitstream?.allMetadataValues('bitstream.viewer.provider').includes('nodownload');
+  }
+
   ngOnDestroy(): void {
     this.paginationService.clearPagination(this.originalOptions.id);
     this.paginationService.clearPagination(this.licenseOptions.id);

src/app/shared/explore/section-component/counters-section/counters-section.component.html

@@ -1,27 +1,30 @@
 <div>
-  <div class="card">
-    <div class = "row d-flex justify-content-center">
+  <div class="card p-3">
+    <div class="d-flex flex-wrap flex-row justify-content-around gap-4">
       <div *ngIf="isLoading$ | async">
         <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
       </div>
-     <div *ngFor="let counter of (counterData$ | async)"
-        class="px-4 py-1 d-flex flex-column" style="flex: 1 0 100px">
-          <div (click)="goToLink(counter.link)"
-            [ngStyle]="{'cursor': counter.link? 'pointer' : 'inherit'}"
-            class="col d-flex justify-content-center text-center align-items-center">
-              <i [ngClass]="counter.icon"></i>
+      <ng-container *ngFor="let counter of (counterData$ | async)">
+        <ng-container *ngIf="counter.link; else countersSectionContent">
+          <a class="text-decoration-none" *ngIf="internalLinkService.isLinkInternal(counter.link)" [routerLink]="internalLinkService.getRelativePath(counter.link)">
+            <ng-container *ngTemplateOutlet="countersSectionContent"></ng-container>
+          </a>
+          <a class="text-decoration-none" *ngIf="!internalLinkService.isLinkInternal(counter.link)" [href]="counter.link" [target]="'_blank'">
+            <ng-container *ngTemplateOutlet="countersSectionContent"></ng-container>
+          </a>
+        </ng-container>
+        <ng-template #countersSectionContent>
+          <div class="d-flex flex-wrap flex-column justify-content-between align-items-center gapy-1 counters-section">
+            <i class="d-block mb-2" [ngClass]="counter.icon"></i>
+            <div class="counters-label text-center">
+              {{ 'explore.counters-section.' + counter.label | translate }}
+            </div>
+            <div class="text-center font-weight-bold">
+              <b>{{ counter.count }}</b>
+            </div>
           </div>
-          <div (click)="goToLink(counter.link)"
-            [ngStyle]="{'cursor': counter.link? 'pointer' : 'inherit'}"
-            class="col d-flex justify-content-center text-center align-items-center">
-              {{'explore.counters-section.' + counter.label | translate}}
-          </div>
-          <div (click)="goToLink(counter.link)"
-            [ngStyle]="{'cursor': counter.link? 'pointer' : 'inherit'}"
-            class="col d-flex justify-content-center text-center align-items-center">
-              <b>{{counter.count}}</b>
-           </div>
-      </div>
+        </ng-template>
+      </ng-container>
     </div>
   </div>
 </div>

src/app/shared/explore/section-component/counters-section/counters-section.component.scss

@@ -0,0 +1,13 @@
+.counters-section {
+    min-width: 120px;
+    max-width: 140px;
+    color: var(--bs-gray-800);
+
+    &:hover {
+        color: #{darken($gray-800, 20%)};
+    }
+}
+
+.counters-label {
+    line-height: 1.25;
+}

src/app/shared/explore/section-component/counters-section/counters-section.component.ts

@@ -4,19 +4,19 @@ import { isPlatformServer } from '@angular/common';
 import { BehaviorSubject, forkJoin, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { NativeWindowRef, NativeWindowService } from '../../../../core/services/window.service';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
 import { SearchObjects } from '../../../search/models/search-objects.model';
 import { getFirstSucceededRemoteDataPayload } from '../../../../core/shared/operators';
 import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
 import { SectionComponent } from '../../../../core/layout/models/section.model';
 import { SearchService } from '../../../../core/shared/search/search.service';
 import { PaginatedSearchOptions } from '../../../search/models/paginated-search-options.model';
-import { hasValue } from '../../../empty.util';
 import { UUIDService } from '../../../../core/shared/uuid.service';
+import { InternalLinkService } from 'src/app/core/services/internal-link.service';
 
 @Component({
   selector: 'ds-counters-section',
+  styleUrls: ['./counters-section.component.scss'],
   templateUrl: './counters-section.component.html'
 })
 export class CountersSectionComponent implements OnInit {
@@ -38,10 +38,12 @@ export class CountersSectionComponent implements OnInit {
   });
 
 
-  constructor(private searchService: SearchService,
+  constructor(
+              public internalLinkService: InternalLinkService,
+              private searchService: SearchService,
               private uuidService: UUIDService,
               @Inject(PLATFORM_ID) private platformId: Object,
-              @Inject(NativeWindowService) protected _window: NativeWindowRef,) {
+  ) {
 
   }
 
@@ -69,12 +71,6 @@ export class CountersSectionComponent implements OnInit {
         )));
     this.counterData$.subscribe(() => this.isLoading$.next(false));
   }
-
-  goToLink(link: string) {
-    if (hasValue(link)) {
-      this._window.nativeWindow.location.href = link;
-    }
-  }
 }