diff --git a/src/views/dataset-detail.component/dataset-detail.component.ts b/src/views/dataset-detail.component/dataset-detail.component.ts index c314e1f..5185e93 100644 --- a/src/views/dataset-detail.component/dataset-detail.component.ts +++ b/src/views/dataset-detail.component/dataset-detail.component.ts @@ -14,64 +14,56 @@ import { VUE_API } from "@/constants"; name: "DatasetDetailComponent", components: { VsInput, - // DataMetricsBadge, // Commented out but prepared for future use + // DataMetricsBadge, }, }) export default class DatasetDetailComponent extends Vue { @Prop() - datasetId!: string; // datasetId is passed as a prop and is required. + datasetId!: string; - searchTerm: string | Suggestion = ""; // Search term used in the search functionality. - private subscriptions: Array = []; // 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 = ["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. + // @Prop() + // identifier!: string; - // If needed for stats - // public post = { - // views: 25, // Number of views for the dataset - // downloads: 1262, // Number of downloads - // citations: 2424, // Number of citations - // }; + searchTerm: string | Suggestion = ""; + + private subscriptions: Array = []; + public dataset = {} as DbDataset; + private error: string = ""; + public loaded = false; + public openAccessLicences: Array = ["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); // Adds advanced date formatting options to dayjs. + dayjs.extend(advancedFormat); if (!this.datasetId.includes(".")) { - // Fetch dataset by publish_id (numeric ID) + // get datset by publish_id this.getDataset(Number(this.datasetId)); } else { - // Fetch dataset by DOI (alphanumeric ID) + // get datset by doi_value 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 { + 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; @@ -82,7 +74,6 @@ 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; @@ -92,125 +83,87 @@ 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; // Store dataset in component state. - this.loaded = true; // Mark as loaded. + this.dataset = res; + this.loaded = true; }, + // error: (error: string) => this.errorHandler(error), error: (error: string) => { - this.error = error; // Capture any errors during fetch. + this.error = error; }, }); - this.subscriptions.push(newSub); // Add subscription to array to manage unsubscribing later. + this.subscriptions.push(newSub); } - /** - * 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; // Store dataset in component state. - this.loaded = true; // Mark as loaded. + this.dataset = res; + this.loaded = true; }, error: (error: string) => this.errorHandler(error), }); - this.subscriptions.push(newSub); // Add subscription to array. + this.subscriptions.push(newSub); } - /** - * Handles errors and updates the error message in the component. - * @param err - Error message. - */ private errorHandler(err: string): void { - this.error = err; // Update error message. + this.error = err; + // this.loading = false; } - /** - * Navigates back by one page in the router history, similar to browser back. - */ public goBack(): void { - this.$router.go(-1); // Go back one step in the browser history. + // go back by one record, the same as history.back() + // 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"]; // Units for 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; // Convert size to appropriate unit. + size = size / 1024; } + // 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) => { @@ -219,6 +172,7 @@ 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") + "): "; diff --git a/src/views/dataset-detail.component/dataset-detail.component.vue b/src/views/dataset-detail.component/dataset-detail.component.vue index 4c64dea..66068d4 100644 --- a/src/views/dataset-detail.component/dataset-detail.component.vue +++ b/src/views/dataset-detail.component/dataset-detail.component.vue @@ -1,54 +1,81 @@ @@ -353,32 +395,26 @@ export default DatasetDetailComponent; font-size: 0.8rem; padding: 0; } - .card { border-radius: 0; - /* Remove box-shadow for a flat design */ + /* 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; } @@ -389,4 +425,27 @@ 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; +// } diff --git a/src/views/search-view/search-view-component.ts b/src/views/search-view/search-view-component.ts index e092e4e..db7dd56 100644 --- a/src/views/search-view/search-view-component.ts +++ b/src/views/search-view/search-view-component.ts @@ -61,24 +61,15 @@ 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 @@ -129,11 +120,8 @@ 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); diff --git a/src/views/search-view/search-view-component.vue b/src/views/search-view/search-view-component.vue index 9e20663..5fe366c 100644 --- a/src/views/search-view/search-view-component.vue +++ b/src/views/search-view/search-view-component.vue @@ -1,37 +1,95 @@