From 6cb6f178a960c995ecd330eaab83f735eb9e5b2f Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Tue, 14 Dec 2021 16:47:05 +0100 Subject: [PATCH] - search detail page --- .gitignore | 1 + src/models/dataset.ts | 201 +++++++++++++++--- .../dataset-detail.component.ts | 11 +- .../dataset-detail.component.vue | 120 ++++++++++- 4 files changed, 299 insertions(+), 34 deletions(-) diff --git a/.gitignore b/.gitignore index 403adbc..179d68a 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,4 @@ pnpm-debug.log* *.njsproj *.sln *.sw? +/.env \ No newline at end of file diff --git a/src/models/dataset.ts b/src/models/dataset.ts index 1f03ed9..4d8d5d3 100644 --- a/src/models/dataset.ts +++ b/src/models/dataset.ts @@ -1,3 +1,5 @@ +import moment from "moment"; + export interface Dataset { abstract_additional: Array; abstract_output: string; @@ -32,34 +34,71 @@ export enum SearchType { } export class DbDataset { - public id!: number; - public url!: string; - public contributing_corporation!: string; - public creating_corporation!: string; - public publisher_name!: string; - public embargo_date!: string; - public publish_id!: number; - public project_id!: number; - public type!: string; - public language!: string; - public server_state!: string; - public belongs_to_bibliography!: boolean; - public created_at!: string; - public server_date_modified!: string; - public server_date_published!: string; - public account_id!: number; - public editor_id!: number; - public reviewer_id!: number; - public preferred_reviewer!: number; - public preferred_reviewer_email!: string; - public reject_editor_note!: string; - public reject_reviewer_note!: string; - public reviewer_note_visible!: string; - public titles!: Array; - public abstracts!: Array<Abstract>; - public authors!: Array<Author>; - public contributors!: Array<Author>; - public user!: Person; + // public id!: number; + // public url!: string; + // public contributing_corporation!: string; + // public creating_corporation!: string; + // public publisher_name!: string; + // public embargo_date!: string; + // public publish_id!: number; + // public project_id!: number; + // public type!: string; + // public language!: string; + // public server_state!: string; + // public belongs_to_bibliography!: boolean; + // public created_at!: string; + // public server_date_modified!: string; + // public server_date_published!: string; + // public account_id!: number; + // public editor_id!: number; + // public reviewer_id!: number; + // public preferred_reviewer!: number; + // public preferred_reviewer_email!: string; + // public reject_editor_note!: string; + // public reject_reviewer_note!: string; + // public reviewer_note_visible!: string; + // public titles!: Array<Title>; + // public abstracts!: Array<Abstract>; + // public authors!: Array<Author>; + // public contributors!: Array<Author>; + // public user!: Person; + // public subjects!: Array<Subject>; + + constructor( + public id: string, + public url: string, + public contributing_corporation: string, + public creating_corporation: string, + public publisher_name: string, + public embargo_date: string, + public publish_id: number, + public project_id: number, + public type: string, + public language: string, + public server_state: string, + public belongs_to_bibliography: boolean, + public created_at: string, + public server_date_modified: string, + public server_date_published: string, + public account_id: number, + public editor_id: number, + public reviewer_id: number, + public preferred_reviewer: number, + public preferred_reviewer_email: string, + public reject_editor_note: string, + public reject_reviewer_note: string, + public reviewer_note_visible: string, + public titles: Array<Title>, + public abstracts: Array<Abstract>, + public authors: Array<Author>, + public contributors: Array<Author>, + public user: Person, + public subjects: Array<Subject>, + public licenses: Array<License>, + public files: Array<DbFile>, + private coverage?: Coverage, + public project?: Project, + ) {} public hasTranslatedAbstract(): boolean { if (this.abstracts.some((e) => e.type === "Translated")) { @@ -85,6 +124,38 @@ export class DbDataset { } } + public hasContributors(): boolean { + if (this.contributors.length > 0) { + return true; + } else { + return false; + } + } + + public hasLicenses(): boolean { + if (this.licenses.length > 0) { + return true; + } else { + return false; + } + } + + public hasEmbargoPassed(): boolean { + const embargoDate = moment(this.embargo_date); + if (embargoDate == null) { + return true; + } + const todayDate = moment.now(); + // Embargo has passed on the day after the specified date + + if (embargoDate.isBefore(todayDate)) { + return true; + } else { + return false; + } + // return ($embargoDate->lessThan($now)); + } + public get MainAbstract(): Nullable<Abstract> { return this.abstracts.find((e) => e.type === AbstractType.Abstract); } @@ -100,6 +171,21 @@ export class DbDataset { public get MethodsAbtract(): Nullable<Abstract> { return this.abstracts.find((e) => e.type === AbstractType.Methods); } + + public get Coverage(): string { + if (this.coverage != undefined) { + const xMin = this.coverage.x_min; + const xMax = this.coverage.x_max; + const yMin = this.coverage.y_min; + const yMax = this.coverage.y_max; + return `SOUTH-BOUND LATITUDE: ${xMin}, + * WEST-BOUND LONGITUDE: ${yMin}, + * NORTH-BOUND LATITUDE: ${xMax}, + * EAST-BOUND LONGITUDE: ${yMax}`; + } else { + return ""; + } + } } type Nullable<T> = T | undefined; @@ -144,3 +230,62 @@ export interface Person { last_name: string; created_at: string; } + +export interface Subject { + id: number; + language: string; + type: string; + value: string; + external_key: string; + created_at: string; + updated_at: string; +} + +export interface Coverage { + x_min: string; + x_max: string; + y_min: string; + y_max: string; +} + +export interface License { + id: number; + active: boolean; + comment_internal?: string; + desc_markup?: string; + desc_text?: string; + language: string; + link_licence: string; + link_logo?: string; + link_sign?: string; + mime_type: string; + name_long: string; // "Creative Commons Attribution 4.0 International (CC BY 4.0)" + name: string; // "CC-BY-4.0" + pod_allowed: boolean; + sort_order: number; +} + +export interface Project { + id: number; + label: string; // "ALLG_FACHLICH" + name: string; // "Allgemein fachliche Arbeiten" + description: string; // "Allgemein fachlich interdisziplinäre Arbeiten" + created_at: string; + updated_at: string; +} + +export interface DbFile { + id: number; + document_id: number; + path_name: string; + label: string; + comment?: string; + mime_type: string; + language?: string; + file_size: bigint; + visible_in_frontdoor: boolean; + visible_in_oai: boolean; + sort_order: Int16Array; + created_at: string; + updated_at: string; +} diff --git a/src/views/dataset-detail.component.ts/dataset-detail.component.ts b/src/views/dataset-detail.component.ts/dataset-detail.component.ts index 335b057..e56f0a3 100644 --- a/src/views/dataset-detail.component.ts/dataset-detail.component.ts +++ b/src/views/dataset-detail.component.ts/dataset-detail.component.ts @@ -14,10 +14,12 @@ export default class DatasetDetailComponent extends Vue { datasetId!: number; private subscriptions: Array<Subscription> = []; - private dataset = {} as DbDataset; + public dataset = {} as DbDataset; private error = ""; + public loaded = false; + public openAccessLicences: Array<string> = ["CC-BY-4.0", "CC-BY-SA-4.0"]; - beforeMount(): void { + created(): void { this.getDataset(this.datasetId); } @@ -33,6 +35,7 @@ export default class DatasetDetailComponent extends Vue { const newSub = DatasetService.getDataset(id).subscribe( (res: DbDataset) => { this.dataset = res; + this.loaded = true; }, (error: string) => this.errorHandler(error), ); @@ -54,4 +57,8 @@ export default class DatasetDetailComponent extends Vue { return moment(date).format("DD.MM.YYYY HH:mm"); // return moment(date).format("MMM Do YYYY"); } + + public getYear(date: string) { + return moment(date).format("YYYY"); + } } diff --git a/src/views/dataset-detail.component.ts/dataset-detail.component.vue b/src/views/dataset-detail.component.ts/dataset-detail.component.vue index 5a2e864..df18bea 100644 --- a/src/views/dataset-detail.component.ts/dataset-detail.component.vue +++ b/src/views/dataset-detail.component.ts/dataset-detail.component.vue @@ -8,7 +8,7 @@ <button v-on:click="goBack">Back</button> </section> </div> --> - <section class="section" v-if="dataset"> + <section class="section" v-if="loaded"> <div class="container"> <!-- <span class="is-size-5"> Basic Table </span> <br /> --> @@ -51,6 +51,42 @@ </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">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="pure-table pure-table-horizontal"> + <thead> + <tr> + <th>Path Name</th> + <th>File Extension</th> + <th>File Size</th> + </tr> + </thead> + <tbody> + <tr v-for="file in dataset.files" :key="file.id"> + <td> + {{ file.path_name }} + <!-- @if($file->exists() === true) + <a target="_blank" href="{{ route('file.download', ['id' => $file->id]) }}"> {{ $file->label }} </a> + @else + <span class="alert">missing file: {{ $file->path_name }}</span> + @endif --> + </td> + <td> + <!-- <span>{{ pathinfo($file->path_name, PATHINFO_EXTENSION) }}</span> --> + </td> + <td> + <!-- <span>{{ $file->formatSize(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">Technische Metadaten/<br />technical metadata:</div> <div class="column is-9-desktop is-8-tablet"> @@ -64,7 +100,7 @@ </div> </div> - <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem; padding-left: 1.5rem"> + <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>Details</h2> @@ -72,7 +108,83 @@ </div> <div class="card"> <div class="column"> - <h2 v-if="dataset.hasOwnProperty('contributors')">{{ dataset.contributors.map((u) => u.full_name).join(", ") }}</h2> + <h3>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>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>Erstellungsjahr/Year</h3> + <p> + {{ getYear(dataset.server_date_published) }} + </p> + </div> + </div> + <div class="card"> + <div class="column"> + <h3>Abdeckung/Coverage</h3> + <p> + {{ dataset.Coverage }} + </p> + </div> + </div> + <div class="card"> + <div class="column"> + <h3>Sprache/Language</h3> + <p> + {{ dataset.language }} + </p> + </div> + </div> + <div class="card"> + <div class="column"> + <h3>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>Lizenz/License</h3> + <p v-if="dataset.hasLicenses()"> + <label v-for="license in dataset.licenses" :key="license.id"> + <span class="label"> + {{ license.name }} + </span> + <span v-if="openAccessLicences.includes(license.name)" class="label titlecase"><i class="fas fa-lock-open"></i> Open Access</span> + </label> + </p> + </div> + </div> + <div class="card"> + <div class="column"> + <h3>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>Embargo</h3> + <p v-if="dataset.embargo_date"> + <span>{{ getHumanDate(dataset.embargo_date) }}</span> + </p> + <p v-else>-</p> </div> </div> </div> @@ -127,7 +239,7 @@ export default DatasetDetailComponent; } label { display: inline-block; - width: 3em; + // width: 3em; margin: 0.5em 0; color: #607d8b; font-weight: bold;