From 7cc4fc075c3679dfa7d23503780347e7c01c2472 Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@outlook.at>
Date: Tue, 7 Dec 2021 12:22:25 +0100
Subject: [PATCH] - detailed help-view-component with titles and authors -
 beginning search page styling

---
 src/components/face-category/FacetCategory.ts |  4 +-
 .../face-category/facet-category.vue          | 62 ++++++++++++++++++-
 src/models/dataset.ts                         | 19 ++++++
 src/views/map-view/help-view-component.vue    |  2 +-
 .../search-view/search-view-component.vue     |  6 +-
 .../sitelink-view/sitelink-view-component.ts  | 13 ++++
 .../sitelink-view/sitelink-view-component.vue | 14 +++++
 7 files changed, 111 insertions(+), 9 deletions(-)

diff --git a/src/components/face-category/FacetCategory.ts b/src/components/face-category/FacetCategory.ts
index 13e156a..cdae37a 100644
--- a/src/components/face-category/FacetCategory.ts
+++ b/src/components/face-category/FacetCategory.ts
@@ -34,10 +34,10 @@ export default class FacetCategory extends Vue {
     get uncollapseLabelText(): string {
         if (this.collapsed == true) {
             // return myLabels.viewer.sidePanel.more; //"More results";
-            return "More results";
+            return "more";
         } else {
             // return myLabels.viewer.sidePanel.collapse; //"Collapse";
-            return "Collapse";
+            return "collapse";
         }
     }
 
diff --git a/src/components/face-category/facet-category.vue b/src/components/face-category/facet-category.vue
index bb6597c..72b521a 100644
--- a/src/components/face-category/facet-category.vue
+++ b/src/components/face-category/facet-category.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="panel panel-default">
+    <div class="card panel-default">
         <!-- <h3 class="panel-title filterViewModelName">{{ filterName }}</h3> -->
         <div class="panel-heading">
             <h3 class="panel-title titlecase filterViewModelName">{{ filterName }}</h3>
@@ -12,11 +12,24 @@
                     <span :class="item.active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span>
                 </li>
             </ul>
-            <ul class="overflowing" v-if="overflowing == true">
+            <!-- <ul class="overflowing" v-if="overflowing == true">
                 <li>
                     <span @click="toggle()">{{ uncollapseLabelText }}</span>
                 </li>
-            </ul>
+            </ul> -->
+        </div>
+        <div class="card-footer" data-v-4fe33de2="">
+            <p class="card-footer-item" data-v-4fe33de2="">
+                <!-- <span @click="toggle()">{{ uncollapseLabelText }}</span> -->
+                <span v-if="collapsed" @click="toggle()">
+                    {{ uncollapseLabelText }}&nbsp;
+                    <i class="fa fa-angle-down"></i>
+                </span>
+                <span v-else @click="toggle()">
+                    {{ uncollapseLabelText }}&nbsp;
+                    <i class="fa fa-angle-up"></i>
+                </span>
+            </p>
         </div>
     </div>
 </template>
@@ -27,7 +40,50 @@ export default FacetCategory;
 </script>
 
 <style scoped>
+.card {
+    /* position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.125); */
+    border-radius: 0;
+}
+
+/* .card-footer:last-child,
+.card-content:last-child,
+.card-header:last-child {
+    border-bottom-left-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+} */
+.card-footer {
+    background-color: transparent;
+    color: #33cccc;
+    /* border-top: 1px solid #ededed; */
+    /* align-items: stretch; */
+    /* display: flex; */
+}
+.card-footer-item {
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    padding: 0.75rem;
+    justify-content: left;
+}
+
 /* local styles */
+.panel-heading {
+    background-color: transparent;
+    color: #336699;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    text-transform: capitalize;
+}
+.panel-body {
+    padding: 0.75em 1em;
+}
 .disabled {
     /* color: #EBEBE4; */
     color: lightgray;
diff --git a/src/models/dataset.ts b/src/models/dataset.ts
index 74c02e5..35b2395 100644
--- a/src/models/dataset.ts
+++ b/src/models/dataset.ts
@@ -54,4 +54,23 @@ export interface DbDataset {
     reject_editor_note: string;
     reject_reviewer_note: string;
     reviewer_note_visible: string;
+    titles: Array<Title>;
+    authors: Array<Author>;
+}
+
+export interface Title {
+    id: number;
+    type: string;
+    value: string;
+    language: string;
+}
+
+export interface Author {
+    id: number;
+    academic_title: string;
+    date_of_birth: string;
+    email: string;
+    first_name: string;
+    last_name: string;
+    name_type: string;
 }
diff --git a/src/views/map-view/help-view-component.vue b/src/views/map-view/help-view-component.vue
index 147c31e..b0c8561 100644
--- a/src/views/map-view/help-view-component.vue
+++ b/src/views/map-view/help-view-component.vue
@@ -79,7 +79,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" scoped>
 import HelpViewComponent from "./help-view-component";
 export default HelpViewComponent;
 </script>
diff --git a/src/views/search-view/search-view-component.vue b/src/views/search-view/search-view-component.vue
index 72a927b..f2b9e5f 100644
--- a/src/views/search-view/search-view-component.vue
+++ b/src/views/search-view/search-view-component.vue
@@ -55,9 +55,9 @@
         </div>
 
         <div class="columns">
-            <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem">
+            <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="externals" class="">
-                    <div class="card" v-for="(facetItems, key, index) in facets" :key="index" name="external_card" style="margin-bottom: 0px">
+                    <div v-for="(facetItems, key, index) in facets" :key="index" name="external_card" style="margin-bottom: 0px">
                         <facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
                     </div>
                     <!-- <div class="card" name="external_card" style="margin-bottom: 0px">
@@ -108,7 +108,7 @@
                 </div>
             </div>
 
-            <div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
+            <div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
                 <div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
                     <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
                         <active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
diff --git a/src/views/sitelink-view/sitelink-view-component.ts b/src/views/sitelink-view/sitelink-view-component.ts
index b80ccef..4aa51e6 100644
--- a/src/views/sitelink-view/sitelink-view-component.ts
+++ b/src/views/sitelink-view/sitelink-view-component.ts
@@ -61,4 +61,17 @@ export default class SitelinkViewComponent extends Vue {
         this.error = err;
         // this.loading = false;
     }
+
+    toDayDateTimeString(UNIX_timestamp: number): string {
+        const a = new Date(UNIX_timestamp * 1000);
+        const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+        const year = a.getFullYear();
+        const month = months[a.getMonth()];
+        const date = a.getDate();
+        const hour = a.getHours();
+        const min = a.getMinutes();
+        const sec = a.getSeconds();
+        const time = date + " " + month + " " + year + " " + hour + ":" + min + ":" + sec;
+        return time;
+    }
 }
diff --git a/src/views/sitelink-view/sitelink-view-component.vue b/src/views/sitelink-view/sitelink-view-component.vue
index d4a7028..9434e6f 100644
--- a/src/views/sitelink-view/sitelink-view-component.vue
+++ b/src/views/sitelink-view/sitelink-view-component.vue
@@ -34,6 +34,20 @@
                                         <a>{{ dataset.type }}; {{ dataset.publish_id }}</a>
                                     </h2>
                                 </header>
+                                <div class="blog-meta">
+                                    {{ dataset.server_date_published }}
+                                </div>
+                                <div class="post-description">
+                                    <!-- @foreach ($document->authors as $author) -->
+                                    <div v-for="(author, index) in dataset.authors" :key="index">
+                                        <em>Author: {{ author.full_name }}</em>
+                                        <br />
+                                    </div>
+                                    <div v-for="(title, index) in dataset.titles" :key="index">
+                                        <em>{{ title.type }}: {{ title.value }}</em>
+                                        <br />
+                                    </div>
+                                </div>
                             </div>
                         </li>
                     </ol>