Implement SearchInput component

diff --git a/flatnotes/src/components/App.js b/flatnotes/src/components/App.js
index 345a3e023294eacbea5a4ed0b65b41670fcb8c77..54442b91cb3ab683766c7c750ac6f71a6cffc761 100644 (file)
--- a/flatnotes/src/components/App.js
+++ b/flatnotes/src/components/App.js
@@ -5,6 +5,7 @@ import RecentlyModified from "./RecentlyModified";
 import LoadingIndicator from "./LoadingIndicator";
 import Login from "./Login";
 import NavBar from "./NavBar";
+import SearchInput from "./SearchInput";
 
 import api from "../api";
 import * as constants from "../constants";
@@ -22,6 +23,7 @@ export default {
     LoadingIndicator,
     Login,
     NavBar,
+    SearchInput,
   },
 
   data: function() {
@@ -96,14 +98,6 @@ export default {
       this.navigate(`/${constants.basePaths.login}`);
     },
 
-    search: function() {
-      this.navigate(
-        `/${constants.basePaths.search}?${
-          constants.params.searchTerm
-        }=${encodeURI(this.searchTerm)}`
-      );
-    },
-
     getSearchResults: function() {
       let parent = this;
       this.searchFailed = false;

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 4539274c89b7481ad9811bbd32a6068da3efc751..097dd879048edef373be66021596bbea232b095f 100644 (file)
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -68,24 +68,21 @@
     <div
       v-if="currentView == views.home"
       v-on:submit.prevent="search"
-      class="home-view d-flex flex-column justify-content-center align-items-center flex-grow-1 w-100"
+      class="
+        home-view
+        d-flex
+        flex-column
+        justify-content-center
+        align-items-center
+        flex-grow-1
+        w-100
+      "
     >
       <div class="mb-3">
         <img src="../assets/logo.svg" />
       </div>
-      <form v-on:submit.prevent="search" class="w-100">
-        <div class="form-group mb-4 w-100">
-          <input
-            type="text"
-            class="form-control search-input"
-            placeholder="Search"
-            v-model="searchTerm"
-            autofocus
-          />
-          <!-- TODO: Search Button -->
-        </div>
-      </form>
-      <RecentlyModified />
+      <SearchInput class="search-input mb-4"></SearchInput>
+      <RecentlyModified></RecentlyModified>
     </div>
 
     <!-- Note -->
@@ -137,20 +134,6 @@
 
     <!-- Search -->
     <div v-if="currentView == views.search" class="w-100">
-      <!-- Search Input -->
-      <form v-on:submit.prevent="search">
-        <div class="form-group mb-4 d-flex justify-content-center">
-          <input
-            type="text"
-            class="form-control"
-            placeholder="Search"
-            v-model="searchTerm"
-            style="max-width: 500px"
-            autofocus
-          />
-        </div>
-      </form>
-
       <!-- Searching -->
       <div v-if="searchResults == null">
         <loading-indicator

diff --git a/flatnotes/src/components/NavBar.vue b/flatnotes/src/components/NavBar.vue
index c3cc0a329d30f2279f639bf57261125fd6b7c0d5..6bf6daec7edfd8e5d2d45f778fb91cab60604775 100644 (file)
--- a/flatnotes/src/components/NavBar.vue
+++ b/flatnotes/src/components/NavBar.vue
@@ -36,6 +36,10 @@
 .invisible {
   visibility: hidden;
 }
+
+.cursor-pointer {
+  cursor: pointer;
+}
 </style>
 
 <script>

diff --git a/flatnotes/src/components/SearchInput.vue b/flatnotes/src/components/SearchInput.vue
new file mode 100644 (file)
index 0000000..a024908
--- /dev/null
+++ b/flatnotes/src/components/SearchInput.vue
@@ -0,0 +1,56 @@
+<template>
+  <form v-on:submit.prevent="search" class="w-100">
+    <div class="input-group w-100">
+      <input
+        type="text"
+        class="form-control"
+        placeholder="Search"
+        v-model="searchTermInput"
+        autofocus
+      />
+      <div class="input-group-append">
+        <button class="btn" type="submit">
+          <BIconSearch />
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style lang="scss" scoped>
+.btn {
+  border: 1px solid #cfd4da;
+  svg {
+    color: #a7abb1;
+  }
+}
+</style>
+
+<script>
+import EventBus from "../eventBus";
+import * as constants from "../constants";
+import { BIconSearch } from "bootstrap-vue";
+
+export default {
+  comments: {
+    BIconSearch,
+  },
+
+  data: function () {
+    return {
+      searchTermInput: null,
+    };
+  },
+
+  methods: {
+    search: function () {
+      EventBus.$emit(
+        "navigate",
+        `/${constants.basePaths.search}?${
+          constants.params.searchTerm
+        }=${encodeURI(this.searchTermInput)}`
+      );
+    },
+  },
+};
+</script>

diff --git a/flatnotes/src/constants.js b/flatnotes/src/constants.js
index ffea29975bc91de271daa4020414c39f86000e41..329bb48f6393e53a845eb4d45b2bfb22f7fa4243 100644 (file)
--- a/flatnotes/src/constants.js
+++ b/flatnotes/src/constants.js
@@ -24,10 +24,10 @@ export const dataDefaults = function() {
 
     // Search Data
     searchFailed: false,
-
-    // Note Data
     searchTerm: null,
     searchResults: null,
+
+    // Note Data
     currentNote: null,
     titleInput: null,
     initialContent: null,

diff --git a/flatnotes/src/main.scss b/flatnotes/src/main.scss
index 941baba714b5e6a0ef4652ab61b0d1edca3830bc..f739830e9c0166ed62718265488dd6722a0a19a5 100644 (file)
--- a/flatnotes/src/main.scss
+++ b/flatnotes/src/main.scss
@@ -28,10 +28,6 @@ body {
   font-family: "Inter", sans-serif;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .clickable-link {
   cursor: pointer;
   &:hover {
@@ -61,8 +57,9 @@ body {
   padding: 0;
 }
 
-.title-input:focus {
-  outline: none;
+.form-control:focus {
+  box-shadow: none;
+  border-color: #ced4da;
 }
 
 .home-view {