Fixed all mistakes in the Item View page

src/app/item-page/clarin-files-section/clarin-files-section.component.html

@@ -0,0 +1,25 @@
+<ng-container>
+  <ds-clarin-license-info class="mt-3 d-block" [item]="item"></ds-clarin-license-info>
+  <h6><i class="fa fa-paperclip">&nbsp;</i>{{'item.page.files.head' | translate}}</h6>
+  <div class="pb-3">
+    <span class="pr-1">
+      <a class="btn btn-download" (click)="setCommandline()" style="text-decoration: none"
+         *ngIf="canShowCurlDownload">
+        <i class="fa fa-download fa-3x" style="display: block">&nbsp;</i>
+        {{'item.page.download.button.command.line' | translate}}
+      </a>
+    </span>
+    <div id="command-div" *ngIf="isCommandLineVisible">
+      <button class="repo-copy-btn pull-right" data-clipboard-target="#command-div"></button>
+      <pre style="background-color: #d9edf7; color: #3a87ad">{{ command }}</pre>
+    </div>
+    <span>
+      <a *ngIf="canDownloadAllFiles" class="btn btn-download" id="download-all-button" (click)="downloadFiles()"
+         style="visibility: visible">
+        <i style="display: block" class="fa fa-download fa-3x">&nbsp;</i>
+        {{'item.page.download.button.all.files.zip' | translate}} ({{ totalFileSizes }})
+      </a>
+    </span>
+  </div>
+  <ds-preview-section [item]="item"></ds-preview-section>
+</ng-container>

src/app/item-page/clarin-files-section/clarin-files-section.component.scss

@@ -0,0 +1,16 @@
+/**
+The styling file for the `clarin-files-section.component`
+ */
+
+.btn-download{
+  color: #fff !important;
+  background-color: #428bca;
+  border-color: #357ebd;
+  cursor: pointer;
+}
+
+.btn-download:hover {
+  color: #fff;
+  background-color: #3276b1;
+  border-color: #285e8e;
+}

src/app/item-page/clarin-files-section/clarin-files-section.component.spec.ts

@@ -0,0 +1,69 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ClarinFilesSectionComponent } from './clarin-files-section.component';
+import { RegistryService } from '../../core/registry/registry.service';
+import { Router } from '@angular/router';
+import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+import { RouterMock } from '../../shared/mocks/router.mock';
+import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
+import { TranslateModule } from '@ngx-translate/core';
+import { MetadataBitstream } from '../../core/metadata/metadata-bitstream.model';
+import { ResourceType } from '../../core/shared/resource-type';
+import { HALLink } from '../../core/shared/hal-link.model';
+import { BehaviorSubject , of} from 'rxjs';
+
+describe('ClarinFilesSectionComponent', () => {
+  let component: ClarinFilesSectionComponent;
+  let fixture: ComponentFixture<ClarinFilesSectionComponent>;
+
+  let mockRegistryService: any;
+  let halService: HALEndpointService;
+  // Set up the mock service's getMetadataBitstream method to return a simple stream
+  const metadatabitstream = new MetadataBitstream();
+  metadatabitstream.id = 123;
+  metadatabitstream.name = 'test';
+  metadatabitstream.description = 'test';
+  metadatabitstream.fileSize = '1MB';
+  metadatabitstream.checksum = 'abc';
+  metadatabitstream.type = new ResourceType('item');
+  metadatabitstream.fileInfo = [];
+  metadatabitstream.format = 'text';
+  metadatabitstream.canPreview = false;
+  metadatabitstream._links = {
+    self: new HALLink(),
+    schema: new HALLink(),
+  };
+
+  metadatabitstream._links.self.href = '';
+  metadatabitstream._links.schema.href = '';
+  const metadataBitstreams: MetadataBitstream[] = [metadatabitstream];
+  const bitstreamStream = new BehaviorSubject(metadataBitstreams);
+
+  beforeEach(async () => {
+    mockRegistryService = jasmine.createSpyObj('RegistryService', {
+      'getMetadataBitstream': of(bitstreamStream)
+    }
+    );
+    halService = Object.assign(new HALEndpointServiceStub('some url'));
+
+    await TestBed.configureTestingModule({
+      declarations: [ ClarinFilesSectionComponent ],
+      imports: [
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        { provide: RegistryService, useValue: mockRegistryService },
+        { provide: Router, useValue: new RouterMock() },
+        { provide: HALEndpointService, useValue: halService }
+      ],
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ClarinFilesSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/item-page/clarin-files-section/clarin-files-section.component.ts

@@ -0,0 +1,125 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Item } from '../../core/shared/item.model';
+import { getAllSucceededRemoteListPayload } from '../../core/shared/operators';
+import { getItemPageRoute } from '../item-page-routing-paths';
+import { MetadataBitstream } from '../../core/metadata/metadata-bitstream.model';
+import { RegistryService } from '../../core/registry/registry.service';
+import { Router } from '@angular/router';
+import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+
+@Component({
+  selector: 'ds-clarin-files-section',
+  templateUrl: './clarin-files-section.component.html',
+  styleUrls: ['./clarin-files-section.component.scss']
+})
+export class ClarinFilesSectionComponent implements OnInit {
+
+  /**
+   * The item to display files for
+   */
+  @Input() item: Item;
+
+  /**
+   * handle of the current item
+   */
+  @Input() itemHandle: string;
+
+  canShowCurlDownload = false;
+
+  /**
+   * If download by command button is click, the command line will be shown
+   */
+  isCommandLineVisible = false;
+
+  /**
+   * command for the download command feature
+   */
+  command: string;
+
+  /**
+   * determine to show download all zip button or not
+   */
+  canDownloadAllFiles = false;
+
+  /**
+   * total size of list of files uploaded by users to this item
+   */
+  totalFileSizes: string;
+
+  /**
+   * list of files uploaded by users to this item
+   */
+  listOfFiles: MetadataBitstream[];
+
+
+  constructor(protected registryService: RegistryService,
+              protected router: Router,
+              protected halService: HALEndpointService) {
+  }
+
+  ngOnInit(): void {
+    this.registryService
+      .getMetadataBitstream(this.itemHandle, 'ORIGINAL,TEXT,THUMBNAIL')
+      .pipe(getAllSucceededRemoteListPayload())
+      .subscribe((data: MetadataBitstream[]) => {
+        this.listOfFiles = data;
+        this.generateCurlCommand();
+        this.sumFileSizes();
+      });
+  }
+
+  setCommandline() {
+    this.isCommandLineVisible = !this.isCommandLineVisible;
+  }
+
+  downloadFiles() {
+    void this.router.navigate([getItemPageRoute(this.item), 'download']);
+  }
+
+  generateCurlCommand() {
+    const fileNames = this.listOfFiles.map((file: MetadataBitstream) => {
+      // Show `Download All Files` only if there are more files.
+      if (this.listOfFiles.length > 1) {
+        this.canDownloadAllFiles = true;
+      }
+
+      if (file.canPreview) {
+        this.canShowCurlDownload = true;
+      }
+
+      return file.name;
+    });
+
+    this.command = `curl --remote-name-all ` + this.halService.getRootHref() + `/core/bitstreams/handle/${
+      this.itemHandle
+    }/{${fileNames.join(',')}}`;
+  }
+
+  sumFileSizes() {
+    const sizeUnits = {
+      B: 1,
+      KB: 1000,
+      MB: 1000 * 1000,
+      GB: 1000 * 1000 * 1000,
+      TB: 1000 * 1000 * 1000 * 1000,
+    };
+
+    let totalBytes = this.listOfFiles.reduce((total, file) => {
+      const [valueStr, unit] = file.fileSize.split(' ');
+      const value = parseFloat(valueStr);
+      const bytes = value * sizeUnits[unit.toUpperCase()];
+      return total + bytes;
+    }, 0);
+
+    let finalUnit = 'B';
+    for (const unit of ['KB', 'MB', 'GB', 'TB']) {
+      if (totalBytes < 1000) {
+        break;
+      }
+      totalBytes /= 1000;
+      finalUnit = unit;
+    }
+
+    this.totalFileSizes = totalBytes.toFixed(2) + ' ' + finalUnit;
+  }
+}

src/app/item-page/clarin-license-info/clarin-license-info.component.html

@@ -1,14 +1,14 @@
 <div class="container alert alert-dismissible alert-info fade show w-100">
   <div class="text-center">
-    <div>
+    <div [ngClass]="isCsLocale() ? '': 'd-inline-flex'">
       <span class="pr-1">{{'item.page.license.message.0' | translate}}</span>
-      <span [ngClass]="'label ' + ' label-' + licenseLabel + ' rounded'">
-        {{licenseType}}
-      </span>
+      <span [ngClass]="'label ' + ' label-' + licenseLabel + ' rounded' + ' px-1'">{{licenseType}}</span>
+    </div>
+    <div class="d-inline-flex">
       <span class="pl-1">{{'item.page.license.message.1' | translate}}</span>
     </div>
-    <div>
-      <a [href]="licenseURI">{{license}}</a>
+    <div [ngClass]="isCsLocale() ? 'd-inline-flex': ''">
+      <a [href]="licenseURI" class="pl-1">{{license}}</a>
     </div>
     <div class="d-inline" *ngFor="let icon of (licenseLabelIcons | async)">
       <img class="mr-1" [src]="secureImageData(icon)" alt="" width="24px">

src/app/item-page/clarin-license-info/clarin-license-info.component.spec.ts

@@ -10,6 +10,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { ClarinLicenseDataService } from '../../core/data/clarin/clarin-license-data.service';
 import { ItemMock } from '../../shared/mocks/item.mock';
 import { MetadataValue } from '../../core/shared/metadata.models';
+import { LocaleService } from '../../core/locale/locale.service';
 
 const item = ItemMock;
 const license = 'Test License Name';
@@ -22,6 +23,7 @@ describe('ClarinLicenseInfoComponent', () => {
 
   let clarinLicenseDataService: ClarinLicenseDataService;
   let sanitizerStub: DomSanitizer;
+  let localeService: LocaleService;
 
   // initialize license metadata
   item.metadata['dc.rights.label'] = [Object.assign(new MetadataValue(), {
@@ -46,6 +48,9 @@ describe('ClarinLicenseInfoComponent', () => {
     sanitizerStub = jasmine.createSpyObj('sanitizer', {
       bypassSecurityTrustUrl: null
     });
+    localeService = jasmine.createSpyObj('LocaleService', {
+      getCurrentLanguageCode: jasmine.createSpy('getCurrentLanguageCode'),
+    });
 
     await TestBed.configureTestingModule({
       imports: [
@@ -59,6 +64,7 @@ describe('ClarinLicenseInfoComponent', () => {
       providers: [
         { provide: ClarinLicenseDataService, useValue: clarinLicenseDataService },
         { provide: DomSanitizer, useValue: sanitizerStub },
+        { provide: LocaleService, useValue: localeService }
       ],
     })
     .compileComponents();

src/app/item-page/clarin-license-info/clarin-license-info.component.ts

@@ -9,6 +9,7 @@ import { ClarinLicense } from '../../core/shared/clarin/clarin-license.model';
 import { DomSanitizer } from '@angular/platform-browser';
 import { secureImageData } from '../../shared/clarin-shared-util';
 import { BehaviorSubject } from 'rxjs';
+import { LocaleService } from '../../core/locale/locale.service';
 
 /**
  * This component show clarin license info in the item page and item full page.
@@ -21,7 +22,8 @@ import { BehaviorSubject } from 'rxjs';
 export class ClarinLicenseInfoComponent implements OnInit {
 
   constructor(private sanitizer: DomSanitizer,
-              private clarinLicenseService: ClarinLicenseDataService) { }
+              private clarinLicenseService: ClarinLicenseDataService,
+              private localeService: LocaleService) { }
 
   /**
    * The item to display a version history for
@@ -95,6 +97,13 @@ export class ClarinLicenseInfoComponent implements OnInit {
   secureImageData(imageByteArray) {
     return secureImageData(this.sanitizer, imageByteArray);
   }
+
+  /**
+   * Check if current english is Czech
+   */
+  isCsLocale() {
+    return this.localeService.getCurrentLanguageCode() === 'cs';
+  }
 }
 
 export enum LicenseType {

src/app/item-page/clarin-ref-box/clarin-ref-box.component.html

@@ -1,4 +1,4 @@
-<div class="container pb-3">
+<div class="container-fluid pb-3">
   <ds-clarin-ref-citation [item]="item" class="row"></ds-clarin-ref-citation>
   <ds-clarin-ref-featured-services [item]="item" class="row"></ds-clarin-ref-featured-services>
 </div>

src/app/item-page/clarin-ref-citation-modal/clarin-ref-citation-modal.component.html

@@ -5,14 +5,17 @@ <h4 class="modal-title" id="modal-basic-title">{{itemName}}</h4>
       <span aria-hidden="true">×</span>
     </button>
   </div>
-  <div class="modal-body" >
+  <div class="modal-body pb-0" >
     <p>{{'item.refbox.modal.copy.instruction.0' | translate}}
       <kbd>{{'item.refbox.modal.copy.instruction.1' | translate}}</kbd>
       {{'item.refbox.modal.copy.instruction.2' | translate}}
     </p>
     <div class="textarea" ></div>
     <textarea #copyCitationModal readonly class="clarin-ref-box-citation-textarea">{{citationText}}</textarea>
   </div>
+  <div class="d-flex justify-content-end">
+    <span class="pr-3">{{citationType | uppercase}}</span>
+  </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Save click')">
       {{'item.refbox.modal.submit' | translate}}

src/app/item-page/clarin-ref-citation-modal/clarin-ref-citation-modal.component.ts

@@ -25,6 +25,12 @@ export class ClarinRefCitationModalComponent implements AfterViewInit {
   @Input()
   itemName = '';
 
+  /**
+   * The type of the citation - e.g. `bibtex` or `cmdi`
+   */
+  @Input()
+  citationType = '';
+
   /**
    * The citation context - data retrieved from OAI-PMH
    */

src/app/item-page/clarin-ref-citation/clarin-ref-citation.component.ts

@@ -168,6 +168,7 @@ export class ClarinRefCitationComponent implements OnInit {
       ariaLabelledBy: 'modal-basic-title'
     });
     modal.componentInstance.itemName = this.itemNameText;
+    modal.componentInstance.citationType = citationType;
     // Fetch the citation text from the API
     let citationText = '';
     await this.getCitationText(citationType)