forked from geolba/tethys.frontend
- search detail page
This commit is contained in:
parent
66651135fa
commit
6cb6f178a9
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -21,3 +21,4 @@ pnpm-debug.log*
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
/.env
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import moment from "moment";
|
||||
|
||||
export interface Dataset {
|
||||
abstract_additional: Array<string>;
|
||||
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<Title>;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user