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

Initial test comments added. Some original commented code deleted

Browse Source
This commit is contained in:
Porras-Bernardez 2024-05-07 13:54:28 +02:00
parent d75ab4f367
commit 3dbb04d737
4 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/vs-input/vs-input.ts
View File

@ -122,6 +122,8 @@ export default class VsInput extends Vue {
// this.$emit("clear");
}
/* When the search button is clicked or the search input is changed, it updates the value property of the component with the current value of display,
and emits a search-change event with the current value of display as the argument. */
@Emit("search-change")
search(): string {
this.results = [];

18
src/components/vs-input/vs-input.vue
View File

@ -1,10 +1,15 @@
<template>
<!-- Parent container with multiple rows -->
<div class="is-multiline">
<!-- <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> -->
<!-- Search input wrapper -->
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
<!-- Search box -->
<div class="search-box mx-auto">
<!-- Search field -->
<div class="field has-addons main-search-from-bg">
<div class="control is-expanded">
<!-- Input field for search query -->
<input
id="search_query"
v-model="display"
@ -20,24 +25,26 @@
@keydown.tab="close"
@focus="focus"
/>
<!-- <p>Display is: {{ display }}</p> -->
<!-- v-on:input="searchChanged" -->
</div>
<!-- Search button -->
<div class="control">
<button class="button input is-medium search-button-icon" @click="search()">
<!-- <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" /> -->
<!-- Search icon -->
<i class="fas fa-search text-white"></i>
</button>
</div>
</div>
</div>
</div>
<!-- <div class="column is-half is-offset-one-quarter"> -->
<!-- Suggestions list -->
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
<ul v-show="showResults" class="autocomplete-results pure-u-23-24">
<!-- Loading indicator -->
<li v-if="isLoading" class="loading">Loading results...</li>
<!-- Iterating over suggestions -->
<li
v-for="(result, i) in suggestions"
v-else
@ -47,6 +54,7 @@
v-bind:class="{ 'is-active': isSelected(i) }"
@click.prevent="select(result)"
>
<!-- Displaying suggestion result -->
<div class="small-label">
<label>{{ result.value }} ({{ result.type }})</label>
</div>

4
src/views/home-view/home-view-component.ts
View File

@ -11,6 +11,9 @@ import { Suggestion } from "@/models/dataset";
export default class HomeViewComponent extends Vue {
public display = "";
/* This method is called when a search suggestion is selected. It takes a parameter suggestion which can be either a Suggestion object or a string.
If it's a string, the method extracts the term and navigates to the "Search" route with the term as a parameter. If it's a Suggestion object, it extracts
the value and type from the suggestion and navigates to the "Search" route with both parameters.*/
onSearch(suggestion: Suggestion | string): void {
let term;
if (typeof suggestion === "string") {
@ -22,6 +25,7 @@ export default class HomeViewComponent extends Vue {
}
}
/* This method is called when the user initiates a search. It navigates to the "Search" route with the display property as a parameter. */
search(): void {
this.$router.push({ name: "Search", params: { display: this.display } });
}

13
src/views/home-view/home-view-component.vue
View File

@ -18,13 +18,6 @@
</a>
</div> -->
<!-- <div class="column">
<div class="col text-center py-3">
<h1>Tethys Research Data Repository</h1>
<p class="lead">Data Publisher for Geoscience Austria</p>
<hr class="center-line" />
</div>
</div> -->
<div class="column">
<div class="col text-center py-3">
<h1>Tethys Research Data Repository</h1>
@ -213,7 +206,7 @@
<!-- <div class="columns is-mobile partner-logos"> -->
<div class="columns">
<div class="column col-sm">
<div class="card mx-auto" style="width: 18rem; border: 0rem">
<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">
@ -223,7 +216,7 @@
</div>
</div>
<div class="column col-sm">
<div class="card mx-auto" style="width: 28rem; border: 0rem">
<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" />
@ -232,7 +225,7 @@
</div>
</div>
<div class="column col-sm">
<div class="card mx-auto" style="width: 18rem; border: 0rem">
<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" />