forked from geolba/tethys.frontend
Code commenting
This commit is contained in:
parent
50ab318854
commit
8e3f4fa88e
|
|
@ -14,56 +14,64 @@ import { VUE_API } from "@/constants";
|
|||
name: "DatasetDetailComponent",
|
||||
components: {
|
||||
VsInput,
|
||||
// DataMetricsBadge,
|
||||
// DataMetricsBadge, // Commented out but prepared for future use
|
||||
},
|
||||
})
|
||||
export default class DatasetDetailComponent extends Vue {
|
||||
@Prop()
|
||||
datasetId!: string;
|
||||
datasetId!: string; // datasetId is passed as a prop and is required.
|
||||
|
||||
// @Prop()
|
||||
// identifier!: string;
|
||||
searchTerm: string | Suggestion = ""; // Search term used in the search functionality.
|
||||
private subscriptions: Array<Subscription> = []; // Subscriptions to RxJS observables to prevent memory leaks.
|
||||
public dataset = {} as DbDataset; // Holds dataset details.
|
||||
private error: string = ""; // Stores error messages, if any.
|
||||
public loaded = false; // Indicates whether the dataset is fully loaded.
|
||||
public openAccessLicences: Array<string> = ["CC-BY-4.0", "CC-BY-SA-4.0"]; // Available open-access licenses.
|
||||
public portal = VUE_API + "/api/file/download/"; // Portal URL for file downloads.
|
||||
|
||||
searchTerm: string | Suggestion = "";
|
||||
|
||||
private subscriptions: Array<Subscription> = [];
|
||||
public dataset = {} as DbDataset;
|
||||
private error: string = "";
|
||||
public loaded = false;
|
||||
public openAccessLicences: Array<string> = ["CC-BY-4.0", "CC-BY-SA-4.0"];
|
||||
public portal = VUE_API + "/api/file/download/";
|
||||
|
||||
public post = {
|
||||
views: 25,
|
||||
downloads: 1262,
|
||||
citations: 2424,
|
||||
};
|
||||
// If needed for stats
|
||||
// public post = {
|
||||
// views: 25, // Number of views for the dataset
|
||||
// downloads: 1262, // Number of downloads
|
||||
// citations: 2424, // Number of citations
|
||||
// };
|
||||
|
||||
/**
|
||||
* Lifecycle hook: Called when the component is created.
|
||||
* Extends dayjs with advanced format plugin and determines whether to
|
||||
* fetch dataset by ID or by DOI.
|
||||
*/
|
||||
created(): void {
|
||||
dayjs.extend(advancedFormat);
|
||||
dayjs.extend(advancedFormat); // Adds advanced date formatting options to dayjs.
|
||||
if (!this.datasetId.includes(".")) {
|
||||
// get datset by publish_id
|
||||
// Fetch dataset by publish_id (numeric ID)
|
||||
this.getDataset(Number(this.datasetId));
|
||||
} else {
|
||||
// get datset by doi_value
|
||||
// Fetch dataset by DOI (alphanumeric ID)
|
||||
this.getDatasetByIdentifier(this.datasetId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Lifecycle hook: Called before the component is unmounted.
|
||||
* Unsubscribes from all subscriptions to prevent memory leaks.
|
||||
*/
|
||||
beforeUnmount(): void {
|
||||
//unsunscribe to ensure no memory leaks
|
||||
// this.subscription.unsubscribe();
|
||||
for (const subs of this.subscriptions) {
|
||||
subs.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles search functionality based on user input or suggestion selection.
|
||||
* Opens a new window or navigates internally based on the host's domain.
|
||||
* @param suggestion - The suggestion or search term entered by the user.
|
||||
*/
|
||||
onSearch(suggestion: Suggestion | string): void {
|
||||
console.log("onSearch (dataset-detail.component)");
|
||||
|
||||
const host = window.location.host;
|
||||
const parts = host.split(".");
|
||||
if (parts[0] === "doi") {
|
||||
// If in DOI subdomain, open external search in a new window
|
||||
let term;
|
||||
if (typeof suggestion === "string") {
|
||||
term = suggestion;
|
||||
|
|
@ -74,6 +82,7 @@ export default class DatasetDetailComponent extends Vue {
|
|||
window.open("https://tethys.at/search/" + term + "/" + type, "_self");
|
||||
}
|
||||
} else {
|
||||
// Otherwise, route internally to search page
|
||||
let term;
|
||||
if (typeof suggestion === "string") {
|
||||
term = suggestion;
|
||||
|
|
@ -83,87 +92,125 @@ export default class DatasetDetailComponent extends Vue {
|
|||
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} });
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches the dataset details by ID from the service and updates the component state.
|
||||
* @param id - The dataset's numeric ID.
|
||||
*/
|
||||
private getDataset(id: number): void {
|
||||
const newSub = DatasetService.getDataset(id).subscribe({
|
||||
next: (res: DbDataset) => {
|
||||
this.dataset = res;
|
||||
this.loaded = true;
|
||||
this.dataset = res; // Store dataset in component state.
|
||||
this.loaded = true; // Mark as loaded.
|
||||
},
|
||||
// error: (error: string) => this.errorHandler(error),
|
||||
error: (error: string) => {
|
||||
this.error = error;
|
||||
this.error = error; // Capture any errors during fetch.
|
||||
},
|
||||
});
|
||||
|
||||
this.subscriptions.push(newSub);
|
||||
this.subscriptions.push(newSub); // Add subscription to array to manage unsubscribing later.
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches the dataset details by DOI from the service and updates the component state.
|
||||
* @param id - The dataset's DOI (Digital Object Identifier).
|
||||
*/
|
||||
private getDatasetByIdentifier(id: string): void {
|
||||
const newSub = DatasetService.getDatasetByDoi(id).subscribe({
|
||||
next: (res: DbDataset) => {
|
||||
this.dataset = res;
|
||||
this.loaded = true;
|
||||
this.dataset = res; // Store dataset in component state.
|
||||
this.loaded = true; // Mark as loaded.
|
||||
},
|
||||
error: (error: string) => this.errorHandler(error),
|
||||
});
|
||||
|
||||
this.subscriptions.push(newSub);
|
||||
this.subscriptions.push(newSub); // Add subscription to array.
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles errors and updates the error message in the component.
|
||||
* @param err - Error message.
|
||||
*/
|
||||
private errorHandler(err: string): void {
|
||||
this.error = err;
|
||||
// this.loading = false;
|
||||
this.error = err; // Update error message.
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigates back by one page in the router history, similar to browser back.
|
||||
*/
|
||||
public goBack(): void {
|
||||
// go back by one record, the same as history.back()
|
||||
// router.go(-1);
|
||||
this.$router.go(-1);
|
||||
this.$router.go(-1); // Go back one step in the browser history.
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts the file extension from a given filename.
|
||||
* @param filename - The name of the file.
|
||||
* @returns The file extension as a string.
|
||||
*/
|
||||
public getExtension(filename: string): string {
|
||||
return filename.substring(filename.lastIndexOf(".") + 1, filename.length) || filename;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats the file size into a human-readable string with appropriate units.
|
||||
* @param file_size - The size of the file in bytes.
|
||||
* @returns The formatted file size string.
|
||||
*/
|
||||
public formatSize(file_size: number): string {
|
||||
let size = file_size;
|
||||
const unit = ["Byte", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
|
||||
const unit = ["Byte", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"]; // Units for size.
|
||||
let i;
|
||||
for (i = 0; size >= 1024 && i < unit.length - 1; i++) {
|
||||
size = size / 1024;
|
||||
size = size / 1024; // Convert size to appropriate unit.
|
||||
}
|
||||
// return Math.round((size * precision) / precision) + " " + unit[i];
|
||||
return Math.round((size + Number.EPSILON) * 100) / 100 + " " + unit[i];
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a given date into a human-readable string with the full day, month, and year.
|
||||
* @param date - The date string to format.
|
||||
* @returns The formatted date string.
|
||||
*/
|
||||
public getPublishedDate(date: string): string {
|
||||
// return moment(date).format("ddd, MMMM Do, YYYY h:mm a");
|
||||
return dayjs(date).format("ddd, MMMM Do, YYYY h:mm a");
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a given date into a simpler "DD.MM.YYYY HH:mm" format.
|
||||
* @param date - The date string to format.
|
||||
* @returns The formatted date string.
|
||||
*/
|
||||
public getHumanDate(date: string): string {
|
||||
// return moment(date).format("DD.MM.YYYY HH:mm");
|
||||
return dayjs(date).format("DD.MM.YYYY HH:mm");
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts the year from a given date string.
|
||||
* @param date - The date string to extract the year from.
|
||||
* @returns The year as a string.
|
||||
*/
|
||||
public getYear(date: string): string {
|
||||
return dayjs(date).format("YYYY");
|
||||
// return moment(date).format("YYYY");
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the human-readable language string based on the language code.
|
||||
* @param language - The language code (e.g., "de" for German).
|
||||
* @returns The language name as a string.
|
||||
*/
|
||||
public getLanguage(language: string): string {
|
||||
if (language === "de") {
|
||||
return "Deutsch"
|
||||
return "Deutsch";
|
||||
} else {
|
||||
return "English"
|
||||
return "English";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a citation string for the dataset based on its authors and publication details.
|
||||
* @returns The citation as a string.
|
||||
*/
|
||||
public getCitation(): string {
|
||||
let citation = this.dataset.authors
|
||||
.map((u) => {
|
||||
|
|
@ -172,7 +219,6 @@ export default class DatasetDetailComponent extends Vue {
|
|||
name += ", " + u.first_name?.substring(0, 1).toUpperCase() + ".";
|
||||
}
|
||||
return name;
|
||||
// u.last_name + ", " + u.first_name?.substring(0, 1).toUpperCase() + "."
|
||||
})
|
||||
.join(", ");
|
||||
citation += " (" + dayjs(this.dataset.server_date_published).format("YYYY") + "): ";
|
||||
|
|
|
|||
|
|
@ -1,81 +1,54 @@
|
|||
<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> -->
|
||||
<!-- 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"
|
||||
|
|
@ -88,10 +61,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 />
|
||||
|
|
@ -100,6 +74,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 />
|
||||
|
|
@ -113,6 +89,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">
|
||||
|
|
@ -124,6 +101,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">
|
||||
|
|
@ -132,9 +111,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>
|
||||
|
|
@ -148,7 +129,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>
|
||||
|
|
@ -164,6 +144,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">
|
||||
|
|
@ -177,7 +158,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>
|
||||
|
|
@ -187,19 +171,12 @@
|
|||
</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> -->
|
||||
<!-- 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')">
|
||||
<!-- 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' } }"
|
||||
|
|
@ -215,8 +192,7 @@
|
|||
</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>
|
||||
|
|
@ -249,11 +225,13 @@
|
|||
</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">
|
||||
<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> {{ license.name }}</a
|
||||
|
|
@ -262,6 +240,7 @@
|
|||
><i class="fa-brands fa-creative-commons"></i> {{ 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
|
||||
>
|
||||
|
|
@ -278,11 +257,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"
|
||||
|
|
@ -295,14 +277,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>
|
||||
|
|
@ -313,6 +293,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar card for displaying dataset contributors -->
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Beitragende/Contributor</h3>
|
||||
|
|
@ -327,13 +308,12 @@
|
|||
</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="columns">
|
||||
<div class="column col-sm">
|
||||
<div class="card mx-auto" style="width: 18rem; box-shadow: none; border: 0rem">
|
||||
<div class="card-body">
|
||||
<!-- <h5 class="card-title">About TETHYS</h5> -->
|
||||
<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>
|
||||
|
|
@ -360,28 +340,6 @@
|
|||
</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.geosphere.at/">
|
||||
<img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
|
||||
</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>
|
||||
|
||||
|
|
@ -395,26 +353,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;
|
||||
}
|
||||
|
|
@ -425,27 +389,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>
|
||||
|
|
|
|||
|
|
@ -61,16 +61,14 @@ export default class SearchViewComponent extends Vue {
|
|||
// };
|
||||
|
||||
private open: OpenSettings = {
|
||||
core: OPEN_CORE, //"rdr_data", // SOLR.core;
|
||||
host: OPEN_HOST, //"tethys.at",
|
||||
core: OPEN_CORE,
|
||||
host: OPEN_HOST, //"https://catalog.geosphere.at",
|
||||
};
|
||||
|
||||
private error = "";
|
||||
|
||||
// Computed property to get search term as string
|
||||
get stringSearchTerm(): string {
|
||||
// console.log("stringSearchTerm:", this.searchTerm);
|
||||
|
||||
if (typeof this.searchTerm === "string") {
|
||||
return this.searchTerm;
|
||||
} else if (this.searchTerm instanceof Suggestion) {
|
||||
|
|
@ -109,9 +107,6 @@ export default class SearchViewComponent extends Vue {
|
|||
return false;
|
||||
}
|
||||
}
|
||||
// getKeyName(value: string) {
|
||||
// return Object.entries(Suggestion).find(([key, val]) => val === value)?.[0];
|
||||
// }
|
||||
|
||||
// Method to get enum key by enum value
|
||||
getEnumKeyByEnumValue<T extends { [index: string]: string }>(myEnum: T, enumValue: string): keyof T | null {
|
||||
|
|
@ -122,9 +117,6 @@ export default class SearchViewComponent extends Vue {
|
|||
|
||||
// Lifecycle hook: executed before the component is mounted
|
||||
beforeMount(): void {
|
||||
// console.log("beforeMount!");
|
||||
|
||||
// this.rdrAPI = new DatasetService();
|
||||
// Trigger search based on provided display and type props
|
||||
if (this.display != "" && this.type != undefined) {
|
||||
const enumKey: "Title" | "Author" | "Subject" | "Doctype" | null = this.getEnumKeyByEnumValue(SearchType, this.type);
|
||||
|
|
|
|||
|
|
@ -1,95 +1,37 @@
|
|||
<template>
|
||||
<div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
|
||||
|
||||
<!-- Search input section -->
|
||||
<div class="container-fluid banner mz-5">
|
||||
<vs-input v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
|
||||
</div>
|
||||
|
||||
<!-- <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
|
||||
<div v-if="results.length > 0" class="result-list-info">
|
||||
<div v-if="hasSearchTerm()" class="resultheader">
|
||||
Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="results.length == 0">
|
||||
<div class="resultheader">
|
||||
Your search yielded
|
||||
<strong> 0</strong> results:
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- ASK ELNAZ! ------------------------------------------------------------------------------------------------- -->
|
||||
<!-- Results area on top of the list of publications -->
|
||||
<div class="columns">
|
||||
<!-- Left sidebar section. Empty, just to keep simetry -->
|
||||
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 0rem; padding-right: 1.5rem; padding-left: 1.5rem">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Results section -->
|
||||
<div class="col col-8 column is-8 results_column" style="padding-top: 0.5rem; padding-right: 1rem; padding-left: 1rem; padding-bottom: 0rem;">
|
||||
|
||||
<!-- <div v-if="results.length > 0" class="result-list-info">
|
||||
<div v-if="hasSearchTerm()" class="resultheader">
|
||||
Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Option 1: Enclose in a Colored Box -->
|
||||
<!-- <div v-if="results.length > 0" class="result-list-info">
|
||||
<div v-if="hasSearchTerm()" class="bg-blue-50 border-l-4 border-blue-400 p-4">
|
||||
<p class="text-sm text-blue-700">
|
||||
Your search term <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:
|
||||
</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Option 2: Use a Notice/Alert Style -->
|
||||
<!--
|
||||
<div v-if="results.length > 0" class="result-list-info">
|
||||
<div v-if="hasSearchTerm()" class="bg-yellow-100 border border-yellow-300 text-yellow-800 px-4 py-3 rounded-md" role="alert">
|
||||
<span class="block sm:inline">Your search term <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:</span>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Option 3: Highlight with a Callout -->
|
||||
|
||||
<!-- Display results if any -->
|
||||
<div v-if="results.length > 0" class="result-list-info">
|
||||
<div v-if="hasSearchTerm()" class="p-1 mb-0 text-sm bg-[#d8f4f7] rounded-lg" role="alert">
|
||||
<span class="font-medium pl-5">Your search term</span> <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option 4: Bold with Underline -->
|
||||
<!--
|
||||
<div v-if="results.length > 0" class="result-list-info">
|
||||
<div v-if="hasSearchTerm()" class="text-lg font-bold underline text-gray-800">
|
||||
Your search term <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Display message if no results found -->
|
||||
<div v-else-if="results.length == 0">
|
||||
<div class="p-1 mb-0 text-sm bg-[#d8f4f7] rounded-lg" role="alert">
|
||||
<span class="font-medium pl-5">Your search yielded <strong> 0</strong> results:</span>
|
||||
<!-- Your search yielded
|
||||
<strong> 0</strong> results: -->
|
||||
<span class="font-medium pl-5">Your search yielded <strong> 0</strong> results.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div v-else-if="results.length == 0">
|
||||
<div class="resultheader">
|
||||
Your search yielded
|
||||
<strong> 0</strong> results:
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Area with the list of facets (left) and list of publications (right) -->
|
||||
<div class="columns">
|
||||
<!-- Sidebar with facets -->
|
||||
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 0.5rem; padding-right: 1.5rem; padding-left: 1.5rem">
|
||||
<div id="externals" class="">
|
||||
<div v-for="(facetItems, key, index) in facets" v-bind:key="index" name="external_card" style="margin-bottom: 0px">
|
||||
|
|
@ -98,10 +40,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main results section with pagination and active filters -->
|
||||
<div class="col col-8 column is-8 results_column" style="padding-top: 0.5rem; padding-right: 1rem; padding-left: 1rem">
|
||||
<div v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0" class="column">
|
||||
<span v-for="(values, key, index) in activeFilterCategories" v-bind:key="index" class="active-filter-items">
|
||||
<!-- {{ values }} {{key}} {{index }} -->
|
||||
<!-- Active filter categories -->
|
||||
<active-facet-category
|
||||
v-bind:filterItems="values"
|
||||
v-bind:categoryName="key"
|
||||
|
|
@ -110,18 +53,17 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="results">
|
||||
<!-- pagination before search results -->
|
||||
<!-- Pagination before search results -->
|
||||
<PaginationComponent class="mb-5" v-bind:data="pagination" @menu-click="onMenuClick"></PaginationComponent>
|
||||
<!-- Results section -->
|
||||
<vs-result v-bind:datasets="results"></vs-result>
|
||||
<!-- pagination after serach results -->
|
||||
<!-- Pagination after search results -->
|
||||
<PaginationComponent class="mt-5" v-bind:data="pagination" @menu-click="onMenuClick"></PaginationComponent>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <PaginationComponent v-bind:data="pagination"></PaginationComponent> -->
|
||||
</div>
|
||||
|
||||
<!-- Partner logos section -->
|
||||
<div class="container-fluid">
|
||||
<!-- <div class="columns is-mobile partner-logos"> -->
|
||||
<div class="columns">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user