Merge branch 'feat/opensearch' of https://gitea.geologie.ac.at/geolba/tethys.frontend into feat/opensearch

src/views/dataset-detail.component/dataset-detail.component.ts

@@ -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()
+    searchTerm: string | Suggestion = ""; // Search term used in the search functionality.
-    // identifier!: string;
+    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 = "";
+    // If needed for stats
-
+    // public post = {
-    private subscriptions: Array<Subscription> = [];
+    //     views: 25,       // Number of views for the dataset
-    public dataset = {} as DbDataset;
+    //     downloads: 1262, // Number of downloads
-    private error: string = "";
+    //     citations: 2424, // Number of citations
-    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,
-    };
 
+    /**
+     * 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.dataset = res; // Store dataset in component state.
-                this.loaded = true;
+                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.dataset = res; // Store dataset in component state.
-                this.loaded = true;
+                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.error = err; // Update error message.
-        // this.loading = false;
     }
 
+    /**
+     * 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()
+        this.$router.go(-1); // Go back one step in the browser history.
-        // router.go(-1);
-        this.$router.go(-1);
     }
 
+    /**
+     * 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") + "): ";

src/views/dataset-detail.component/dataset-detail.component.vue

@@ -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">
+        <!-- Search input component -->
-            <div class="search-box mx-auto">
+        <!-- Placeholder text for search input, and triggers onSearch method when the search term changes -->
-                <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-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">
+                    <!-- Sidebar card showing dataset keywords -->
-                        <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">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>&nbsp;{{ license.name }}</a
@@ -262,6 +240,7 @@
                                             ><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
                                     >
@@ -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>

src/views/search-view/search-view-component.ts

@@ -61,15 +61,24 @@ export default class SearchViewComponent extends Vue {
 
     // Define settings for the OpenSearch API (core and host information)
     private open: OpenSettings = {
+<<<<<<< HEAD
+        core: OPEN_CORE,
+        host: OPEN_HOST, //"https://catalog.geosphere.at",
+=======
         core: OPEN_CORE, //
         host: OPEN_HOST, //
+>>>>>>> 6f1b9f4c5f6ed9600c40865df6ea6e3b365ad129
     };
 
     private error = "";
 
     // Computed property to get search term as string
+<<<<<<< HEAD
+    get stringSearchTerm(): string {        
+=======
     get stringSearchTerm(): string {
         // If searchTerm is a string, return it directly
+>>>>>>> 6f1b9f4c5f6ed9600c40865df6ea6e3b365ad129
         if (typeof this.searchTerm === "string") {
             return this.searchTerm;
         // If searchTerm is a Suggestion, return its value and type alias
@@ -120,8 +129,11 @@ export default class SearchViewComponent extends Vue {
 
     // Lifecycle hook: executed before the component is mounted
     beforeMount(): void {
+<<<<<<< HEAD
+=======
         // console.log("beforeMount!");
         
+>>>>>>> 6f1b9f4c5f6ed9600c40865df6ea6e3b365ad129
         // 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);

src/views/search-view/search-view-component.vue

@@ -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">
+        <!-- Results area on top of the list of publications -->
-            <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! ------------------------------------------------------------------------------------------------- -->
         <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;">
-
+                <!-- Display results if any -->
-                <!-- <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 -->
-                
                 <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>
-               
+                <!-- Display message if no results found -->
-                <!-- 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>
-                -->
-
                 <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>
+                        <span class="font-medium pl-5">Your search yielded <strong> 0</strong> results.</span>
-                        <!-- Your search yielded
+                    </div>
-                        <strong> 0</strong> results: -->
+                </div>
             </div>
         </div>
 
-                <!-- <div v-else-if="results.length == 0">
+        <!-- Area with the list of facets (left) and list of publications (right) -->
-                    <div class="resultheader">
-                        Your search yielded
-                        <strong> 0</strong> results:
-                    </div>
-                </div> -->
-
-            </div>
-
-        </div>
-
-
-
         <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">