- moment.js for date transformations

- npm updates
- search detail page

src/models/dataset.ts

@@ -31,31 +31,85 @@ export enum SearchType {
     Subject = "subject",
 }
 
-export interface DbDataset {
-    id: number;
-    contributing_corporation: string;
-    creating_corporation: string;
-    publisher_name: string;
-    embargo_date: string;
-    publish_id: number;
-    project_id: number;
-    type: string;
-    language: string;
-    server_state: string;
-    belongs_to_bibliography: boolean;
-    created_at: string;
-    server_date_modified: string;
-    server_date_published: string;
-    account_id: number;
-    editor_id: number;
-    reviewer_id: number;
-    preferred_reviewer: number;
-    preferred_reviewer_email: string;
-    reject_editor_note: string;
-    reject_reviewer_note: string;
-    reviewer_note_visible: string;
-    titles: Array<Title>;
-    authors: Array<Author>;
+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 hasTranslatedAbstract(): boolean {
+        if (this.abstracts.some((e) => e.type === "Translated")) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    public hasSeriesInformationAbstract(): boolean {
+        if (this.abstracts.some((e) => e.type === AbstractType.Series_information)) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    public hasMethodsAbtract(): boolean {
+        if (this.abstracts.some((e) => e.type === AbstractType.Methods)) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    public get MainAbstract(): Nullable<Abstract> {
+        return this.abstracts.find((e) => e.type === AbstractType.Abstract);
+    }
+
+    public get TranslatedAbtract(): Nullable<Abstract> {
+        return this.abstracts.find((e) => e.type === AbstractType.Translated);
+    }
+
+    public get SeriesInformationAbtract(): Nullable<Abstract> {
+        return this.abstracts.find((e) => e.type === AbstractType.Series_information);
+    }
+
+    public get MethodsAbtract(): Nullable<Abstract> {
+        return this.abstracts.find((e) => e.type === AbstractType.Methods);
+    }
+}
+type Nullable<T> = T | undefined;
+
+export enum AbstractType {
+    Abstract = "Abstract",
+    Methods = "Methods",
+    Series_information = "Series_information",
+    Technical_info = "Technical_info",
+    Translated = "Translated",
+    Other = " Other",
 }
 
 export interface Title {
@@ -65,6 +119,13 @@ export interface Title {
     language: string;
 }
 
+export interface Abstract {
+    id: number;
+    type: string;
+    value: string;
+    language: string;
+}
+
 export interface Author {
     id: number;
     academic_title: string;
@@ -74,3 +135,12 @@ export interface Author {
     last_name: string;
     name_type: string;
 }
+
+export interface Person {
+    id: number;
+    login: string;
+    email: string;
+    first_name: string;
+    last_name: string;
+    created_at: string;
+}

src/notes.txt

@@ -59,4 +59,8 @@ import "@fortawesome/fontawesome-free/css/all.css";
 
 ======================= router ================================
 https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
-npm install --save vue-router@next
+npm install --save vue-router@next
+
+========================== moment,js ================================
+npm install --save moment@latest
+

src/router/index.ts

@@ -67,7 +67,8 @@ const routes = [
 const router = createRouter({
     history: createWebHistory(),
     routes,
-    scrollBehavior(to, from, savedPosition) {
+    // scrollBehavior(to, from, savedPosition) {
+    scrollBehavior() {
         // return desired position
         document.getElementById("app")?.scrollIntoView();
     },

src/services/dataset.service.ts

@@ -5,6 +5,7 @@ import { Dataset, DbDataset, Suggestion } from "@/models/dataset";
 import { SolrResponse } from "@/models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
 import { VUE_APP_PORTAL } from "@/constants";
+import { deserialize, instanceToInstance } from "class-transformer";
 
 class DatasetService {
     // for the autocomplete search
@@ -163,12 +164,24 @@ class DatasetService {
     public getDataset(id: number): Observable<DbDataset> {
         const host = "https:" + VUE_APP_PORTAL;
         const path = "/api/dataset/" + id;
-        const base = host + path;
+        const apiUrl = host + path;
+
+        const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
 
-        const dataset = api.get<DbDataset>(base);
         // this.messageService.add('HeroService: fetched heroes');
         return dataset;
     }
+
+    private prepareDataset(datasetObj: DbDataset, apiUrl: string) {
+        const dataset = deserialize<DbDataset>(DbDataset, JSON.stringify(datasetObj));
+        dataset.url = document.documentURI;
+        // this.internalDatasetId.generateInternalId(dataset);
+        // if (dataset.seriesParameters) {
+        //     dataset.parameters = dataset.seriesParameters;
+        //     delete dataset.seriesParameters;
+        // }
+        return dataset;
+    }
 }
 
 export default new DatasetService();

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

@@ -1,9 +1,9 @@
 import { Options, Vue } from "vue-class-component";
-// import DatasetService from "../../services/dataset.service";
 import { DbDataset } from "@/models/dataset";
 import { Prop } from "vue-property-decorator";
 import DatasetService from "../../services/dataset.service";
 import { Subscription } from "rxjs";
+import moment from "moment";
 
 @Options({
     name: "DatasetDetailComponent",
@@ -14,7 +14,7 @@ export default class DatasetDetailComponent extends Vue {
     datasetId!: number;
 
     private subscriptions: Array<Subscription> = [];
-    private dataset = {};
+    private dataset = {} as DbDataset;
     private error = "";
 
     beforeMount(): void {
@@ -30,7 +30,7 @@ export default class DatasetDetailComponent extends Vue {
     }
 
     private getDataset(id: number): void {
-        const newSub = DatasetService.getDataset(this.datasetId).subscribe(
+        const newSub = DatasetService.getDataset(id).subscribe(
             (res: DbDataset) => {
                 this.dataset = res;
             },
@@ -49,4 +49,9 @@ export default class DatasetDetailComponent extends Vue {
         // router.go(-1);
         this.$router.go(-1);
     }
+
+    public getHumanDate(date: string): string {
+        return moment(date).format("DD.MM.YYYY HH:mm");
+        // return moment(date).format("MMM Do YYYY");
+    }
 }

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

@@ -1,13 +1,119 @@
 <template v-if="datasetId">
-    <div class="container" v-if="dataset != undefined">
-        <section class="section">
-            <h2>{{ dataset.titles[0].value }} details!</h2>
-            <div class="dataset__blog-meta">published: {{ dataset.server_date_published }}</div>
-            <p class="dataset__abstract">{{ dataset.abstracts[0].value }}</p>
+    <!-- <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> -->
+    <section class="section" v-if="dataset">
+        <div class="container">
+            <!-- <span class="is-size-5"> Basic Table </span>
+            <br /> -->
+
+            <div class="columns">
+                <div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
+                    <div class="card">
+                        <div class="column dataset__blog-meta">published: {{ getHumanDate(dataset.server_date_published) }}</div>
+                    </div>
+
+                    <div class="card record-elem">
+                        <div class="columns" v-if="dataset.hasOwnProperty('titles')">
+                            <div class="column is-3-desktop is-4-tablet">Title/<br />title:</div>
+                            <div class="column is-9-desktop is-8-tablet">{{ dataset.titles[0].value }}</div>
+                        </div>
+                        <div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
+                            <div class="column is-3-desktop is-4-tablet">
+                                Zusammenfassung/<br />
+                                abstract:
+                            </div>
+                            <div class="column is-9-desktop is-8-tablet">
+                                <p>{{ dataset.MainAbstract.value }}</p>
+                                <br />
+                                <p v-if="dataset.hasTranslatedAbstract()">
+                                    {{ dataset.TranslatedAbtract.value }}
+                                </p>
+                            </div>
+                        </div>
+                        <div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
+                            <div class="column is-3-desktop is-4-tablet">Serieninformation/<br />series information:</div>
+                            <div class="column is-9-desktop is-8-tablet" v-if="dataset.hasSeriesInformationAbstract()">
+                                {{ dataset.SeriesInformationAbstract.value }}
+                            </div>
+                            <div class="column is-9-desktop is-8-tablet" v-else>-</div>
+                        </div>
+                        <div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
+                            <div class="column is-3-desktop is-4-tablet">Methodik/<br />method:</div>
+                            <div class="column is-9-desktop is-8-tablet" v-if="dataset.hasMethodsAbtract()">
+                                {{ dataset.MethodsAbtract.value }}
+                            </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">Technische Metadaten/<br />technical metadata:</div>
+                            <div class="column is-9-desktop is-8-tablet">
+                                <p>Persistenter Identifikator: {{ dataset.url }}</p>
+                                <p>Status: {{ dataset.server_state }}</p>
+                                <p v-if="dataset.hasOwnProperty('user')">Eingestellt von: {{ dataset.user.login }}</p>
+                                <p>Herausgeber: {{ dataset.creating_corporation }}</p>
+                                <p>Publisher: {{ dataset.publisher_name }}</p>
+                            </div>
+                        </div>
+                    </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 class="card">
+                        <div class="column">
+                            <h2>Details</h2>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="column">
+                            <h2 v-if="dataset.hasOwnProperty('contributors')">{{ dataset.contributors.map((u) => u.full_name).join(", ") }}</h2>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- <table v-if="dataset != undefined" class="table">
+                <thead>
+                    <tr>
+                        <th>Title</th>
+                        <th>Abstract</th>
+                        <th>Country</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <h2 v-if="dataset.hasOwnProperty('titles')">{{ dataset.titles[0].value }} details!</h2>
+                        </td>
+                        <td>
+                            <p v-if="dataset.hasOwnProperty('abstracts')" class="dataset__abstract">{{ dataset.abstracts[0].value }}</p>
+                        </td>
+                        <td>India</td>
+                    </tr>
+                </tbody>
+            </table> -->
+        </div>
+
+        <div class="container-fluid" style="padding-top: 3.8em">
+            <div class="columns is-mobile partner-logos">
+                <div class="column col-sm text-center">
+                    <img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" />
+                </div>
+                <div class="column col-sm text-center mobile-space">
+                    <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
+                </div>
+                <div class="column col-sm text-center">
+                    <img src="@/assets/site/img/placeholder-logo.jpg" alt="logo placeholder" />
+                </div>
+            </div>
+        </div>
+    </section>
 </template>
 
 <script lang="ts">
@@ -16,6 +122,9 @@ export default DatasetDetailComponent;
 </script>
 
 <style scoped lang="scss">
+.section {
+    font-size: 0.8rem;
+}
 label {
     display: inline-block;
     width: 3em;