barmar/tethys.frontend
1
0
Fork 0
forked from geolba/tethys.frontend
Code Pull requests Activity

Merge branch 'feat/opensearch' into develop

Browse source
This commit is contained in:
Porras-Bernardez 2024-09-16 14:44:05 +02:00
commit 9f076daf15
30 changed files with 1821 additions and 997 deletions
Download patch file Download diff file Expand all files Collapse all files

167
src/views/dataset-detail.component/dataset-detail.component.vue
View file

@ -1,53 +1,55 @@
<!-- detail-dataset.component.vue -->
<template v-if="datasetId">
<!-- <div class="container">
<section class="section" v-if="dataset != undefined">
<h2 v-if="dataset.hasOwnProperty('titles')">{{ dataset.titles[0].value }} details!</h2>
<div v-if="dataset" class="dataset__blog-meta">published: {{ getHumanDate(dataset.server_date_published) }}</div>
<p v-if="dataset.hasOwnProperty('abstracts')" class="dataset__abstract">{{ dataset.abstracts[0].value }}</p>
<div><label>id: </label>{{ dataset.id }}</div>
<button v-on:click="goBack">Back</button>
</section>
</div> -->
<div class="container-fluid banner mz-5">
<!-- Search input component -->
<!-- Placeholder text for search input, and triggers onSearch method when the search term changes -->
<vs-input v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
</div>
<!-- Section that shows the dataset details once the data is loaded -->
<section v-if="loaded" class="section">
<div class="container">
<!-- <span class="is-size-5"> Basic Table </span>
<br /> -->
<div class="columns">
<!-- Main content area displaying dataset details -->
<div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
<!-- Card displaying the publication date -->
<div class="card">
<div class="column dataset__blog-meta">
<h2 class="label uppercase">published: {{ getPublishedDate(dataset.server_date_published) }}</h2>
</div>
</div>
<!-- Card displaying the dataset citation -->
<div class="card">
<div class="column">
<label class="label">
{{ getCitation() }}
<!-- Link to the dataset's DOI if available -->
<a v-if="dataset.identifier" target="_blank" class="link-label" v-bind:href="'https://doi.org/' + dataset.identifier.value"
>({{ "https://doi.org/" + dataset.identifier.value }})</a
>
</label>
</div>
<!-- Section showing references related to the dataset -->
<div v-for="reference in dataset.references" v-bind:key="reference.id" class="columns">
<div class="column is-3-desktop is-4-tablet label">{{ reference.relation }}</div>
<div class="column is-9-desktop is-8-tablet">
{{ reference.type }}:
<!-- Link to the reference if it's a DOI -->
<a v-if="reference.type === 'DOI'" target="_blank" class="link-label" v-bind:href="reference.value">
{{ reference.value }}
</a>
</div>
</div>
<!-- Section showing newer versions of the dataset -->
<div v-for="reference in dataset.referenced_by" v-bind:key="reference.id" class="columns">
<div class="column is-3-desktop is-4-tablet label">has newer version:</div>
<div class="column is-9-desktop is-8-tablet">
<!-- {{ "https://doi.org/" + reference.value }} -->
{{ reference.type }}:
<!-- Link to the newer version's DOI -->
<a
v-if="reference.type === 'DOI'"
target="_blank"
@ -60,10 +62,11 @@
</div>
</div>
<!-- Card displaying dataset titles -->
<div class="card record-elem">
<!-- Section for Main and Translated Titles -->
<div v-if="dataset.hasOwnProperty('titles')" class="columns">
<div class="column is-3-desktop is-4-tablet label">Title/<br />title:</div>
<!-- <div class="column is-9-desktop is-8-tablet">{{ dataset.titles[0].value }}</div> -->
<div class="column is-9-desktop is-8-tablet">
<p>{{ dataset.MainTitle?.value }}</p>
<br />
@ -72,6 +75,8 @@
</p>
</div>
</div>
<!-- Section for dataset abstracts -->
<div v-if="dataset.hasOwnProperty('abstracts')" class="columns">
<div class="column is-3-desktop is-4-tablet label">
Zusammenfassung/<br />
@ -85,6 +90,7 @@
</p>
</div>
</div>
<!-- Section for series information -->
<div v-if="dataset.hasOwnProperty('abstracts')" class="columns">
<div class="column is-3-desktop is-4-tablet label">Serieninformation/<br />series information:</div>
<div v-if="dataset.hasSeriesInformationAbstract()" class="column is-9-desktop is-8-tablet">
@ -96,6 +102,8 @@
</div>
<div v-else class="column is-9-desktop is-8-tablet">-</div>
</div>
<!-- Section for method description -->
<div v-if="dataset.hasOwnProperty('abstracts')" class="columns">
<div class="column is-3-desktop is-4-tablet label">Methodik/<br />method:</div>
<div v-if="dataset.hasMethodsAbstract()" class="column is-9-desktop is-8-tablet">
@ -104,9 +112,11 @@
<div v-else class="column is-9-desktop is-8-tablet">-</div>
</div>
<!-- Section for dataset files and their details -->
<div class="columns">
<div class="column is-3-desktop is-4-tablet label">Downloads/<br />downloads:</div>
<div v-if="dataset.files.length > 0" class="column is-9-desktop is-8-tablet">
<!-- Table showing file details if the embargo has passed -->
<table v-if="dataset.hasEmbargoPassed()" id="items" class="table is-bordered is-striped">
<thead>
<tr>
@ -120,7 +130,6 @@
<td>
<a class="link-label" target="_blank" v-bind:href="portal + file.id"> {{ file.label }} </a>
<br />
<!-- <span>md5: {{ file.hashvalues.find((e) => e.type === "md5")?.value }}</span> -->
</td>
<td>
<span>{{ getExtension(file.path_name) }}</span>
@ -136,6 +145,7 @@
</div>
</div>
<!-- Section for technical metadata of the dataset -->
<div class="columns">
<div class="column is-3-desktop is-4-tablet label">Technische Metadaten/<br />technical metadata:</div>
<div class="column is-9-desktop is-8-tablet">
@ -149,7 +159,10 @@
</div>
</div>
<!-- Sidebar displaying additional dataset details -->
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
<!-- Sidebar card for dataset details like creation year, coverage, language, etc. -->
<div class="card">
<div class="column">
<h2 class="label uppercase">Details</h2>
@ -164,24 +177,28 @@
<Minimap :bounds="dataset.Bounds"></Minimap>
</div>
</div>
<div class="card">
<div class="column">
<h3 class="label uppercase">Beitragende/Contributor</h3>
<p v-if="dataset.hasContributors()">
{{ dataset.contributors.map((u) => u.full_name).join(", ") }}
</p>
<p v-else>-</p>
</div>
</div>
<!-- Sidebar card showing dataset keywords -->
<div class="card">
<div class="column">
<h3 class="label uppercase">Schlüsselwörter/Keywords</h3>
<p v-if="dataset.hasOwnProperty('subjects')">
{{ dataset.subjects.map((u) => u.value).join(", ") }}
<!-- Iterate through subjects and display them as router links -->
<span v-for="(subject, index) in dataset.subjects" :key="subject.value">
<router-link
:to="{ name: 'Search', params: { display: subject.value, type: 'subjects' } }"
class="link-label"
>
{{ subject.value }}
</router-link>
<!-- Add a comma and space after each keyword except the last one -->
<span v-if="index < dataset.subjects.length - 1">, </span>
</span>
</p>
<p v-else>-</p>
</div>
</div>
<!-- Sidebar cards displaying year, coverage, language, object type, and other dataset details -->
<div class="card">
<div class="column">
<h3 class="label uppercase">Erstellungsjahr/Year</h3>
@ -202,7 +219,7 @@
<div class="column">
<h3 class="label uppercase">Sprache/Language</h3>
<p>
{{ dataset.language }}
{{ getLanguage(dataset.language) }}
</p>
</div>
</div>
@ -214,14 +231,22 @@
</p>
</div>
</div>
<!-- Sidebar card showing dataset licenses -->
<div class="card">
<div class="column">
<h3 class="label uppercase">Lizenz/License</h3>
<p v-if="dataset.hasLicenses()">
<label v-for="license in dataset.licenses" v-bind:key="license.id">
<!-- Link to the appropriate Creative Commons license -->
<span class="normal label">
{{ license.name }}
<a v-if="license.name=='CC-BY-4.0'" target="_blank" class="link-label" v-bind:href="'https://creativecommons.org/licenses/by/4.0/'"
><i class="fa-brands fa-creative-commons"></i>&nbsp;{{ license.name }}</a
>
<a v-else target="_blank" class="link-label" v-bind:href="'https://creativecommons.org/licenses/by-sa/4.0/'"
><i class="fa-brands fa-creative-commons"></i>&nbsp;{{ license.name }}</a
>
</span>
<!-- Display Open Access label if the license allows it -->
<span v-if="openAccessLicences.includes(license.name)" class="normal label uppercase"
><i class="fas fa-lock-open"></i> Open Access</span
>
@ -238,11 +263,14 @@
<p v-else>-</p>
</div>
</div>
<!-- Sidebar card showing references -->
<div class="card">
<div class="column">
<h3 class="label uppercase">Referenzen/References</h3>
<ul v-if="dataset.references.length > 0">
<li v-for="(reference, i) in dataset.references" v-bind:key="reference.id">
<!-- Link to reference if it's a DOI or URL -->
<a
v-if="reference.type == 'DOI' || reference.type == 'URL'"
target="_blank"
@ -255,14 +283,12 @@
{{ `${reference.relation} (${reference.type}): ${reference.value}` }}
</span>
<span v-if="dataset.references.length > 0 && i < dataset.references.length - 1" class="normal label">--</span>
<!-- <span v-if="openAccessLicences.includes(license.name)" class="normal label uppercase"
><i class="fas fa-lock-open"></i> Open Access</span
> -->
</li>
</ul>
<p v-else>-</p>
</div>
</div>
<!-- Sidebar card for showing embargo details -->
<div class="card">
<div class="column">
<h3 class="label uppercase">Embargo</h3>
@ -272,27 +298,51 @@
<p v-else>-</p>
</div>
</div>
<!-- Sidebar card for displaying dataset contributors -->
<div class="card">
<div class="column">
<h3 class="label uppercase">Beitragende/Contributor</h3>
<p v-if="dataset.hasContributors()">
{{ dataset.contributors.map((u) => u.full_name).join(", ") }}
</p>
<p v-else>-</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer section with partner logos -->
<div class="container-fluid" style="padding-top: 3.8em">
<div class="columns is-mobile partner-logos">
<div class="column col-sm text-center">
<a target="_blank" href="https://www.re3data.org/repository/r3d100013400"
><img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo"
/></a>
<div class="columns">
<div class="column col-sm">
<div class="card mx-auto" style="width: 18rem; box-shadow: none; border: 0rem">
<div class="card-body">
<a target="_blank" href="https://www.re3data.org/repository/r3d100013400">
<img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" />
</a>
</div>
</div>
</div>
<div class="column col-sm text-center">
<a target="_blank" href="http://www.geosphere.at/">
<img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
<!-- <img src="@/assets/site/img/gbaLogoRGB_web.png" alt="GeoSphere Austria logo" /> -->
</a>
<div class="column col-sm">
<div class="card mx-auto" style="width: 28rem; box-shadow: none; border: 0rem">
<div class="card-body">
<a target="_blank" href="http://www.geosphere.at/">
<img src="@/assets/site/img/geosphere-austria-logo.jpg" alt="logo geosphere austria" />
</a>
</div>
</div>
</div>
<div class="column col-sm text-center">
<a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
<img src="@/assets/site/img/base-logo.gif" alt="logo base" />
</a>
<div class="column col-sm">
<div class="card mx-auto" style="width: 18rem; box-shadow: none; border: 0rem">
<div class="card-body">
<a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
<img src="@/assets/site/img/base_logo.png" alt="logo base" />
</a>
</div>
</div>
</div>
</div>
</div>
@ -311,26 +361,32 @@ export default DatasetDetailComponent;
font-size: 0.8rem;
padding: 0;
}
.card {
border-radius: 0;
/* rempve box-shadow */
/* Remove box-shadow for a flat design */
box-shadow: none;
}
.link-label {
color: #33cccc;
}
.label {
/* color: #363636; */
display: block;
font-size: 0.8rem;
font-weight: 700;
}
.label.uppercase {
text-transform: uppercase;
}
.normal.label {
font-weight: 400;
}
.column p span i {
color: #336699;
}
@ -341,27 +397,4 @@ export default DatasetDetailComponent;
font-weight: 700;
background-color: #ccddf1;
}
// input {
// height: 2em;
// font-size: 1em;
// padding-left: 0.4em;
// }
// button {
// margin-top: 20px;
// font-family: Arial;
// background-color: #eee;
// border: none;
// padding: 5px 10px;
// border-radius: 4px;
// cursor: pointer;
// cursor: hand;
// }
// button:hover {
// background-color: #cfd8dc;
// }
// button:disabled {
// background-color: #eee;
// color: #ccc;
// cursor: auto;
// }
</style>