[CST-5270] Added some information from mock json to the layout

This commit is contained in:
Rezart Vata
2022-04-21 18:48:19 +02:00
parent 5add939a1d
commit da2cba5827
4 changed files with 122 additions and 16 deletions

View File

@@ -1,26 +1,60 @@
<ngb-accordion #acc="ngbAccordion" activeIds="publication-information"> <ngb-accordion #acc="ngbAccordion" [activeIds]="id">
<ngb-panel id="publication-information"> <ngb-panel [id]="id">
<ng-template ngbPanelTitle> <ng-template ngbPanelTitle>
<span class="float-left section-title" tabindex="0">Publication information</span> <span class="float-left section-title" tabindex="0">{{id.replace('-',' ') | titlecase}}</span>
<div class="d-inline-block float-right"> <div class="d-inline-block float-right">
<span *ngIf="!acc.isExpanded('publication-information')" class="fas fa-plus"></span> <span *ngIf="!acc.isExpanded(id)" class="fas fa-plus"></span>
<span *ngIf="acc.isExpanded('publication-information')" class="fas fa-minus"></span> <span *ngIf="acc.isExpanded(id)" class="fas fa-minus"></span>
</div> </div>
</ng-template> </ng-template>
<ng-template ngbPanelContent> <ng-template ngbPanelContent>
<div class="ml-4"> <div class="ml-4">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<p class="m-0">Title</p> <p class="m-0">Article Version</p>
</div> </div>
<div class="col-4"> <div class="col-4">
{{data.articleVersion}}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<p class="m-0">ISSNs</p> <p class="m-0">Conditions</p>
</div> </div>
<div class="col-4"> <div class="col-4">
<p class="m-0" *ngFor="let condition of data.conditions">{{condition}}</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p class="m-0">Prerequisites</p>
</div>
<div class="col-4">
<p class="m-0" *ngFor="let prerequisite of data.prerequisites">{{prerequisite}}</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p class="m-0">Location</p>
</div>
<div class="col-4">
<p class="m-0" *ngFor="let location of data.locations">{{location}}</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p class="m-0">License</p>
</div>
<div class="col-4">
<p class="m-0" *ngFor="let license of data.licenses">{{license}}</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p class="m-0">Embargo</p>
</div>
<div class="col-4">
<p class="m-0">{{data.embargo.amount}} {{data.embargo.units}}</p>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -14,7 +14,7 @@
padding: 0px; padding: 0px;
width: 100%; width: 100%;
color: #000; color: #000;
font-weight: normal; font-weight: 600;
.fas { .fas {
background: #fff; background: #fff;

View File

@@ -1,15 +1,13 @@
import { Component, OnInit } from '@angular/core'; import { Component, Input } from '@angular/core';
@Component({ @Component({
selector: 'ds-content-accordion', selector: 'ds-content-accordion',
templateUrl: './content-accordion.component.html', templateUrl: './content-accordion.component.html',
styleUrls: ['./content-accordion.component.scss'] styleUrls: ['./content-accordion.component.scss']
}) })
export class ContentAccordionComponent implements OnInit { export class ContentAccordionComponent {
constructor() { } @Input() id: string;
@Input() data: any;
ngOnInit(): void {
}
} }

View File

@@ -25,6 +25,50 @@
<p class="m-0" *ngFor="let issn of sherpaPoliciesData.details.journals.issns">{{issn}}</p> <p class="m-0" *ngFor="let issn of sherpaPoliciesData.details.journals.issns">{{issn}}</p>
</div> </div>
</div> </div>
<div class="row">
<div class="col-4">
<p class="m-0">URL</p>
</div>
<div class="col-4">
<p class="m-0">
<a href="{{sherpaPoliciesData.details.journals.url}}">
{{sherpaPoliciesData.details.journals.url}}
</a>
</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p class="m-0">Publisher</p>
</div>
<div class="col-4">
<p class="m-0">
<a href="{{sherpaPoliciesData.details.journals.publisher.uri}}">
{{sherpaPoliciesData.details.journals.publisher.name}}
</a>
</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p class="m-0">romeoPub</p>
</div>
<div class="col-4">
<p class="m-0">
{{sherpaPoliciesData.details.journals.romeoPub}}
</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p class="m-0">zetoPub</p>
</div>
<div class="col-4">
<p class="m-0">
{{sherpaPoliciesData.details.journals.zetoPub}}
</p>
</div>
</div>
</div> </div>
</ng-template> </ng-template>
@@ -38,8 +82,38 @@
<span class="float-left section-title" tabindex="0">Publisher Policy</span> <span class="float-left section-title" tabindex="0">Publisher Policy</span>
</ng-template> </ng-template>
<ng-template ngbPanelContent> <ng-template ngbPanelContent>
<ds-content-accordion></ds-content-accordion> <div class="ml-4">
<ds-content-accordion></ds-content-accordion> <div class="row">
<div class="col-12">
<p class="m-0">
Open Access pathways permitted by this journal's policy are listed below by article version.
Click on a pathway for a more detailed view
</p>
</div>
</div>
<ds-content-accordion [id]="'permitted-versions'"
[data]="sherpaPoliciesData.details.journals.policies.permittedVersions">
</ds-content-accordion>
<!-- <ds-content-accordion></ds-content-accordion> -->
<div class="row">
<div class="col-12">
<p class="m-0">
For more information, please see the following links:
</p>
<ul>
<li *ngFor="let url of sherpaPoliciesData.details.journals.urls">
<a href="{{url}}">{{url}}</a>
</li>
</ul>
</div>
</div>
</div>
</ng-template> </ng-template>
</ngb-panel> </ngb-panel>
</ngb-accordion> </ngb-accordion>