Skip to content

Commit

Permalink
Fixed all mistakes in the Item View page (#532)
Browse files Browse the repository at this point in the history
* Redirect the user to the new browser page after click on featured service.

* Show dropdown options in the featured services button - it was not working

* Added the copy button into metadata field row.

* Added missing Demo Uri metadata field

* The referenced by is a hyperlink, the translations was added and fixed overlaying of big cz translation.

* Replaced unwanted separator values in the Size metadata field. I've created a new pipe - dsReplaced

* Updated messages for the full item page redirect

* Updated metadata field translations

* Show cursor on hover in the author preview component

* Show handle and DOI identifier following the cfg.

* Show different date messages in special occurrences

* Show description with line breaks and redirection links.

* Updated language and other metadata spacing with separator.

* Added citation type to the bottom of the citation box.

* Ref box should have full width

* Fixed big spacing between metadata fields. It was because of d-inline-flex.

* The full item view page looks almost the same as in the v5.

* Make metadata values in the full item page clickable when there is a link and remove the separator `;` from the medata value.

* Show language info only for admin

* Added icons for every mimetype, that icon is showed up in the bitstream file box.

* Collection component is aligned to other metadata values.

* License info is different for CZ language and EN

* Update button and form colors

* Featured service dropdown options fixed.

* fixed failing unit tests

* Removed commented out and not used code.
  • Loading branch information
milanmajchrak authored Mar 7, 2024
1 parent 363c724 commit c48ef6c
Show file tree
Hide file tree
Showing 515 changed files with 886 additions and 223 deletions.
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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(), {
Expand All @@ -46,6 +48,9 @@ describe('ClarinLicenseInfoComponent', () => {
sanitizerStub = jasmine.createSpyObj('sanitizer', {
bypassSecurityTrustUrl: null
});
localeService = jasmine.createSpyObj('LocaleService', {
getCurrentLanguageCode: jasmine.createSpy('getCurrentLanguageCode'),
});

await TestBed.configureTestingModule({
imports: [
Expand All @@ -59,6 +64,7 @@ describe('ClarinLicenseInfoComponent', () => {
providers: [
{ provide: ClarinLicenseDataService, useValue: clarinLicenseDataService },
{ provide: DomSanitizer, useValue: sanitizerStub },
{ provide: LocaleService, useValue: localeService }
],
})
.compileComponents();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
Expand Down Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Loading

0 comments on commit c48ef6c

Please sign in to comment.