geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull requests Projects 3 Releases 1 Packages 1 Wiki Activity

- rename of the folder for the dataset-detail.component

Browse source
This commit is contained in:
kaimbacher 2022-01-14 16:49:31 +01:00
parent eb8803d7a8
commit 3b44926ce1
6 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/views/dataset-detail.component/dataset-detail.component.ts Normal file
View file

@ -0,0 +1,140 @@
import { Options, Vue } from "vue-class-component";
import { DbDataset } from "@/models/dataset";
import { Prop } from "vue-property-decorator";
import DatasetService from "../../services/dataset.service";
import { Subscription } from "rxjs";
import moment from "moment";
// import SimpleSearchComponent from "@/components/simple-search/simple-search-component.vue";
import VsInput from "@/components/vs-input/vs-input.vue";
import { Suggestion } from "@/models/dataset";
import { VUE_APP_PORTAL } from "@/constants";
@Options({
name: "DatasetDetailComponent",
components: {
VsInput,
},
})
export default class DatasetDetailComponent extends Vue {
@Prop()
datasetId!: number;
searchTerm: string | Suggestion = "";
private subscriptions: Array<Subscription> = [];
public dataset = {} as DbDataset;
private error = "";
public loaded = false;
public openAccessLicences: Array<string> = ["CC-BY-4.0", "CC-BY-SA-4.0"];
public portal = VUE_APP_PORTAL + "/file/download/";
created(): void {
this.getDataset(this.datasetId);
}
beforeUnmount(): void {
//unsunscribe to ensure no memory leaks
// this.subscription.unsubscribe();
for (const subs of this.subscriptions) {
subs.unsubscribe();
}
}
onSearch(suggestion: Suggestion | string): void {
const host = window.location.host;
const parts = host.split(".");
if (parts[0] === "doi") {
let term;
if (typeof suggestion === "string") {
term = suggestion;
window.open("https://tethys.at/search/" + term, "_self");
} else if (suggestion instanceof Suggestion) {
term = suggestion.value;
const type = suggestion.type;
window.open("https://tethys.at/search/" + term + "/" + type, "_self");
}
} else {
let term;
if (typeof suggestion === "string") {
term = suggestion;
this.$router.push({ name: "Search", params: { display: term } });
} else if (suggestion instanceof Suggestion) {
term = suggestion.value;
this.$router.push({ name: "Search", params: { display: term, type: suggestion.type } });
}
}
// this.searchTerm = suggestion;
// this.$router.push({ name: "Search", params: { display: term, suggestion instanceof Suggestion ? ty} });
}
private getDataset(id: number): void {
const newSub = DatasetService.getDataset(id).subscribe(
(res: DbDataset) => {
this.dataset = res;
this.loaded = true;
},
(error: string) => this.errorHandler(error),
);
this.subscriptions.push(newSub);
}
private errorHandler(err: string): void {
this.error = err;
// this.loading = false;
}
public goBack(): void {
// go back by one record, the same as history.back()
// router.go(-1);
this.$router.go(-1);
}
public getExtension(filename: string): string {
return filename.substring(filename.lastIndexOf(".") + 1, filename.length) || filename;
}
public formatSize(file_size: number): string {
let size = file_size;
const unit = ["Byte", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
let i;
for (i = 0; size >= 1024 && i < unit.length - 1; i++) {
size = size / 1024;
}
// return Math.round((size * precision) / precision) + " " + unit[i];
return Math.round((size + Number.EPSILON) * 100) / 100 + " " + unit[i];
}
public getPublishedDate(date: string): string {
return moment(date).format("ddd, MMMM Do, YYYY h:mm a");
// return moment(date).format("MMM Do YYYY");
}
public getHumanDate(date: string): string {
return moment(date).format("DD.MM.YYYY HH:mm");
// return moment(date).format("MMM Do YYYY");
}
public getYear(date: string): string {
return moment(date).format("YYYY");
}
public getCitation(): string {
let citation = this.dataset.authors
.map((u) => {
let name = u.last_name;
if (u.first_name) {
name += ", " + u.first_name?.substring(0, 1).toUpperCase() + ".";
}
return name;
// u.last_name + ", " + u.first_name?.substring(0, 1).toUpperCase() + "."
})
.join(", ");
citation += " (" + moment(this.dataset.server_date_published).format("YYYY") + "): ";
citation += this.dataset.MainTitle?.value;
citation += "." + this.dataset.creating_corporation + ", ";
citation += this.dataset.publisher_name;
citation += ", Wien";
return citation;
}
}

317
src/views/dataset-detail.component/dataset-detail.component.vue Normal file
View file

@ -0,0 +1,317 @@
<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">
<!-- <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
<div class="search-box mx-auto">
<div class="field has-addons main-search-from-bg">
<div class="control is-expanded">
<input
v-on:input="searchChanged"
id="search_query"
class="input is-medium"
type="text"
name="q"
autocomplete="off"
v-model="display"
v-bind:placeholder="placeholder"
v-on:keydown.down="onArrowDown"
v-on:keydown.up="onArrowUp"
v-on:keydown.enter="onEnter"
@keydown.tab="close"
v-on:focus="focus"
/>
</div>
<div class="control">
<button class="button input is-medium search-button-icon" @click="search()">
<i class="fas fa-search text-white"></i>
</button>
</div>
</div>
</div>
</div> -->
<!-- <simple-search-component></simple-search-component> -->
<vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
</div>
<section class="section" v-if="loaded">
<div class="container">
<!-- <span class="is-size-5"> Basic Table </span>
<br /> -->
<div class="columns">
<div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
<div class="card">
<div class="column dataset__blog-meta">
<h2 class="label uppercase">published: {{ getPublishedDate(dataset.server_date_published) }}</h2>
</div>
</div>
<div class="card">
<div class="column">
<label class="label">
{{ getCitation() }}
<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>
</div>
<div class="card record-elem">
<div class="columns" v-if="dataset.hasOwnProperty('titles')">
<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>
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
<div class="column is-3-desktop is-4-tablet label">
Zusammenfassung/<br />
abstract:
</div>
<div class="column is-9-desktop is-8-tablet">
<p>{{ dataset.MainAbstract.value }}</p>
<br />
<p v-if="dataset.hasTranslatedAbstract()">
{{ dataset.TranslatedAbstract.value }}
</p>
</div>
</div>
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
<div class="column is-3-desktop is-4-tablet label">Serieninformation/<br />series information:</div>
<div class="column is-9-desktop is-8-tablet" v-if="dataset.hasSeriesInformationAbstract()">
{{ dataset.SeriesInformationAbstract?.value }}
</div>
<div class="column is-9-desktop is-8-tablet" v-else>-</div>
</div>
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
<div class="column is-3-desktop is-4-tablet label">Methodik/<br />method:</div>
<div class="column is-9-desktop is-8-tablet" v-if="dataset.hasMethodsAbstract()">
{{ dataset.MethodsAbstract.value }}
</div>
<div class="column is-9-desktop is-8-tablet" v-else>-</div>
</div>
<div class="columns">
<div class="column is-3-desktop is-4-tablet label">Downloads/<br />downloads:</div>
<div class="column is-9-desktop is-8-tablet" v-if="dataset.files.length > 0">
<table id="items" v-if="dataset.hasEmbargoPassed()" class="table is-bordered is-striped">
<thead>
<tr>
<th class="table-header">Path Name</th>
<th class="table-header">File Extension</th>
<th class="table-header">File Size</th>
</tr>
</thead>
<tbody>
<tr v-for="file in dataset.files" :key="file.id">
<td>
<a class="link-label" target="_blank" v-bind:href="portal + file.id"> {{ file.label }} </a>
</td>
<td>
<span>{{ getExtension(file.path_name) }}</span>
</td>
<td>
<span>{{ formatSize(file.file_size, 2) }}</span>
</td>
</tr>
</tbody>
</table>
<span v-else>Datensatz hat noch ein gültiges Embargo-Datum.</span>
</div>
</div>
<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">
<p>Persistenter Identifikator: {{ dataset.url }}</p>
<p>Status: {{ dataset.server_state }}</p>
<p v-if="dataset.hasOwnProperty('user')">Eingestellt von: {{ dataset.user.login }}</p>
<p>Herausgeber: {{ dataset.creating_corporation }}</p>
<p>Publisher: {{ dataset.publisher_name }}</p>
</div>
</div>
</div>
</div>
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
<div class="card">
<div class="column">
<h2 class="label uppercase">Details</h2>
</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>
<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(", ") }}
</p>
<p v-else>-</p>
</div>
</div>
<div class="card">
<div class="column">
<h3 class="label uppercase">Erstellungsjahr/Year</h3>
<p>
{{ getYear(dataset.server_date_published) }}
</p>
</div>
</div>
<div class="card">
<div class="column">
<h3 class="label uppercase">Abdeckung/Coverage</h3>
<p>
{{ dataset.Coverage }}
</p>
</div>
</div>
<div class="card">
<div class="column">
<h3 class="label uppercase">Sprache/Language</h3>
<p>
{{ dataset.language }}
</p>
</div>
</div>
<div class="card">
<div class="column">
<h3 class="label uppercase">Objekttyp/Object Type</h3>
<p>
<span><i class="fas fa-file"></i> {{ dataset.type }}</span>
</p>
</div>
</div>
<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" :key="license.id">
<span class="normal label">
{{ license.name }}
</span>
<span v-if="openAccessLicences.includes(license.name)" class="normal label uppercase"><i class="fas fa-lock-open"></i> Open Access</span>
</label>
</p>
</div>
</div>
<div class="card">
<div class="column">
<h3 class="label uppercase">Projekt/Project</h3>
<p v-if="dataset.project != null">
<span>{{ dataset.project.name }}</span>
</p>
<p v-else>-</p>
</div>
</div>
<div class="card">
<div class="column">
<h3 class="label uppercase">Embargo</h3>
<p v-if="dataset.embargo_date">
<span>{{ getHumanDate(dataset.embargo_date) }}</span>
</p>
<p v-else>-</p>
</div>
</div>
</div>
</div>
</div>
<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>
<div class="column col-sm text-center">
<a target="_blank" href="http://www.geologie.ac.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="Geologische Bundesanstalt logo" />
</a>
</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>
</div>
</div>
</section>
</template>
<script lang="ts">
import DatasetDetailComponent from "./dataset-detail.component";
export default DatasetDetailComponent;
</script>
<style scoped lang="scss">
.section {
font-size: 0.8rem;
padding: 0;
}
.card {
border-radius: 0;
/* rempve box-shadow */
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;
}
.table-header {
/* color: #363636; */
font-size: 0.8rem;
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>