From ed7bd8c4d28cb19ca12ef4187f37a937e5d6262a Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@outlook.at>
Date: Wed, 22 Dec 2021 16:48:59 +0100
Subject: [PATCH] - simple search box as extra vue component:
 simple-search-component

---
 src/assets/scss/main-styles.scss              | 46 +++++------
 .../simple-search/simple-search-component.ts  | 12 +++
 .../simple-search/simple-search-component.vue | 77 ++++++++++++++++++
 src/components/vs-input/vs-input.vue          |  4 +
 .../dataset-detail.component.ts               |  9 ++-
 .../dataset-detail.component.vue              | 78 +++++++++++++------
 6 files changed, 176 insertions(+), 50 deletions(-)
 create mode 100644 src/components/simple-search/simple-search-component.ts
 create mode 100644 src/components/simple-search/simple-search-component.vue

diff --git a/src/assets/scss/main-styles.scss b/src/assets/scss/main-styles.scss
index 97852b7..53366ea 100644
--- a/src/assets/scss/main-styles.scss
+++ b/src/assets/scss/main-styles.scss
@@ -256,30 +256,30 @@ body {
     display: none;
 }
 
-.animate_content {
-    animation: animate 3s ease;
-}
+// .animate_content {
+//     animation: animate 3s ease;
+// }
 
-@keyframes animate {
-    10% {
-        transform: scale(1, 0.004);
-    }
-    35% {
-        transform: scale(0.001, 0.004);
-        opacity: 1;
-    }
-    50% {
-        transform: scale(0.001, 0.004);
-        opacity: 0;
-    }
-    85% {
-        transform: scale(1, 0.004);
-        opacity: 1;
-    }
-    100% {
-        transform: scale(1, 1);
-    }
-}
+// @keyframes animate {
+//     10% {
+//         transform: scale(1, 0.004);
+//     }
+//     35% {
+//         transform: scale(0.001, 0.004);
+//         opacity: 1;
+//     }
+//     50% {
+//         transform: scale(0.001, 0.004);
+//         opacity: 0;
+//     }
+//     85% {
+//         transform: scale(1, 0.004);
+//         opacity: 1;
+//     }
+//     100% {
+//         transform: scale(1, 1);
+//     }
+// }
 
 .page_description {
     font-weight: 300;
diff --git a/src/components/simple-search/simple-search-component.ts b/src/components/simple-search/simple-search-component.ts
new file mode 100644
index 0000000..9f09847
--- /dev/null
+++ b/src/components/simple-search/simple-search-component.ts
@@ -0,0 +1,12 @@
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+    name: "SimpleSearchComponent",
+})
+export default class SimpleSearchComponent extends Vue {
+    public display = "";
+
+    search(): void {
+        this.$router.push({ name: "Search", params: { display: this.display } });
+    }
+}
diff --git a/src/components/simple-search/simple-search-component.vue b/src/components/simple-search/simple-search-component.vue
new file mode 100644
index 0000000..9b7cf52
--- /dev/null
+++ b/src/components/simple-search/simple-search-component.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
+        <div class="search-box mx-auto">
+            <div class="field has-addons main-search-from-bg">
+                <div class="control is-expanded">
+                    <input id="search_query" class="input is-medium" type="text" name="q" autocomplete="off" v-model="display" />
+                    <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->
+                </div>
+
+                <div class="control">
+                    <button class="button input is-medium search-button-icon" @click="search()">
+                        <i class="fas fa-search text-white"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import SimpleSearchComponent from "./simple-search-component";
+export default SimpleSearchComponent;
+</script>
+
+<style lang="scss" scoped>
+.main-search-from-bg {
+    background-color: #fff;
+    padding: 0.2em;
+}
+
+.banner .column {
+    display: block;
+    // flex-basis: 0;
+    // flex-grow: 1;
+    // flex-shrink: 1;
+    /* padding: 0.75rem; */
+    position: relative;
+    padding: 0;
+}
+
+.banner .button {
+    background-color: #33cccc;
+    // border-color: #dbdbdb;
+    border-width: 0;
+    color: #363636;
+    cursor: pointer;
+    justify-content: center;
+    padding-bottom: 0;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: 0;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.search-box {
+    background-image: url(./../../assets/site/img/white-pixel.png);
+    background-repeat: repeat;
+    padding: 1.8em;
+    // width: 28em;
+}
+
+.control .input,
+.control .input:focus,
+.column .input.selected {
+    // background-color: white;
+    /* border-color: #dbdbdb; */
+    // border: 0;
+    // outline: none;
+    border-radius: 4px;
+    color: #363636;
+}
+input {
+    border-width: 0;
+    box-shadow: none;
+}
+</style>
diff --git a/src/components/vs-input/vs-input.vue b/src/components/vs-input/vs-input.vue
index 04b7618..cfbd982 100644
--- a/src/components/vs-input/vs-input.vue
+++ b/src/components/vs-input/vs-input.vue
@@ -113,6 +113,10 @@ export default VsInput;
     border-radius: 4px;
     color: #363636;
 }
+input {
+    border-width: 0;
+    box-shadow: none;
+}
 
 .autocomplete-results {
     padding: 0;
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 f49a97c..9e44f73 100644
--- a/src/views/dataset-detail.component.ts/dataset-detail.component.ts
+++ b/src/views/dataset-detail.component.ts/dataset-detail.component.ts
@@ -4,10 +4,13 @@ import { Prop } from "vue-property-decorator";
 import DatasetService from "../../services/dataset.service";
 import { Subscription } from "rxjs";
 import moment from "moment";
+import SimpleSearchComponent from "@/components/simple-search/simple-search-component.vue";
 
 @Options({
     name: "DatasetDetailComponent",
-    // selector: "dataset-detail",
+    components: {
+        SimpleSearchComponent,
+    },
 })
 export default class DatasetDetailComponent extends Vue {
     @Prop()
@@ -57,7 +60,7 @@ export default class DatasetDetailComponent extends Vue {
         return filename.substring(filename.lastIndexOf(".") + 1, filename.length) || filename;
     }
 
-    public formatSize(file_size: number, precision = 1) {
+    public formatSize(file_size: number): string {
         let size = file_size;
         const unit = ["Byte", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
         let i;
@@ -78,7 +81,7 @@ export default class DatasetDetailComponent extends Vue {
         // return moment(date).format("MMM Do YYYY");
     }
 
-    public getYear(date: string) {
+    public getYear(date: string): 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 36b9a08..f40d57e 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,37 @@
             <button v-on:click="goBack">Back</button>
         </section>
     </div> -->
-    <div class="container-fluid banner mz-5"></div>
+    <div class="container-fluid banner mz-5">
+        <!-- <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
+            <div class="search-box mx-auto">
+                <div class="field has-addons main-search-from-bg">
+                    <div class="control is-expanded">
+                        <input
+                            v-on:input="searchChanged"
+                            id="search_query"
+                            class="input is-medium"
+                            type="text"
+                            name="q"
+                            autocomplete="off"
+                            v-model="display"
+                            v-bind:placeholder="placeholder"
+                            v-on:keydown.down="onArrowDown"
+                            v-on:keydown.up="onArrowUp"
+                            v-on:keydown.enter="onEnter"
+                            @keydown.tab="close"
+                            v-on:focus="focus"
+                        />                      
+                    </div>
+                    <div class="control">
+                        <button class="button input is-medium search-button-icon" @click="search()">
+                            <i class="fas fa-search text-white"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div> -->
+        <simple-search-component></simple-search-component>
+    </div>
     <section class="section" v-if="loaded">
         <div class="container">
             <!-- <span class="is-size-5"> Basic Table </span>
@@ -253,27 +283,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;
-}
+// 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;
+// }
 </style>