Show simple global search timeline entries

src/App.vue

@@ -13,7 +13,11 @@
 
         </div>
         <div class="navbar-menu">
-          <!--<router-link to="/about">About</router-link>-->
+          <div class="navbar-end">
+            <div class="buttons">
+              <button class="button is-light" @click="openSearch">Search</button>
+            </div>
+          </div>
         </div>
       </div>
     </nav>
@@ -37,6 +41,11 @@
         this.$store.dispatch('isLoggedIn', loginData)
         this.$store.dispatch('startEventListening', '?action=events')
       }
+    },
+    methods: {
+      openSearch () {
+        this.$store.dispatch('openSearch')
+      }
     }
   }
 </script>

src/components/SearchPopup.vue

@@ -0,0 +1,74 @@
+<template>
+  <div :class="modalClasses">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Search</p>
+        <button class="delete" aria-label="close" @click="close"></button>
+      </header>
+      <div class="modal-card-body">
+        <div class="field has-addons">
+          <div class="control is-expanded">
+            <input type="text" class="input is-expanded" id="query" placeholder="Search for items" v-model="query" ref="query" @keypress.enter="search"/>
+          </div>
+          <div class="control">
+            <button :class="searchClasses" @click="search">Search</button>
+          </div>
+        </div>
+        
+        <div class="timeline--item" v-for="item in searchItems" :key="item.id">
+          <TimelineEntry :item="item" :is-main-entry="true" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TimelineEntry from '../components/Entry'
+
+export default {
+  name: "SearchPopup",
+  components: {
+    TimelineEntry
+  },
+  props: ['is-open'],
+  data() {
+    return {
+      query: ''
+    }
+  },
+  mounted () {
+  },
+  watch: {
+    isOpen(val) {
+      if (val) {
+        this.$refs.query.focus()
+      }
+    }
+  },
+  computed: {
+    modalClasses() {
+      return {'modal': true, 'is-active': this.isOpen}
+    },
+    searchItems () {
+      return this.$store.state.searchItems
+    },
+    searchClasses() {
+      return {'button': true, 'is-primary': true, 'is-loading': this.loading}
+    },
+  },
+  methods: {
+    search () {
+      this.$store.dispatch('startQuery', this.query)
+    },
+    close () {
+      this.$store.dispatch('closeSearch')
+      this.query = ''
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/components/Timeline.vue

@@ -104,4 +104,4 @@
     justify-content: end;
     padding: 12px;
   }
-</style>
+</style>

src/store.js

@@ -17,6 +17,8 @@ export default new Vuex.Store({
       micropubEndpoint: '',
       microsubEndpoint: '/microsub',
       channelCreatorIsOpen: false,
+      searchPopupIsOpen: true,
+      searchItems: [],
       eventSource: null,
       globalTimeline: {items: [{name: 'Testing the global timeline'}]}
     };
@@ -58,6 +60,10 @@ export default new Vuex.Store({
     setChannelCreatorState(state, open) {
       state.channelCreatorIsOpen = open
     },
+    setSearchPopupState(state, open) {
+      state.searchPopupIsOpen = open
+      state.searchItems = []
+    },
     newEndpoints(state, endpoints) {
       state.micropubEndpoint = endpoints.micropubEndpoint
       state.microsubEndpoint = endpoints.microsubEndpoint
@@ -138,6 +144,9 @@ export default new Vuex.Store({
         let msg = JSON.parse(evt.data)
         state.channels = _.remove(state.channels, it => it.uid === msg.uid)
       })
+    },
+    newSearchResults(state, items) {
+      state.searchItems = items
     }
   },
 
@@ -236,6 +245,23 @@ export default new Vuex.Store({
     closeChannelCreator({commit}) {
       commit('setChannelCreatorState', false)
     },
+    openSearch({commit}) {
+      commit('setSearchPopupState', true)
+    },
+    closeSearch({commit}) {
+      commit('setSearchPopupState', false)
+    },
+    startQuery({commit}, query) {
+      fetch(this.state.microsubEndpoint + '?action=search&channel=global&query='+query, {
+        headers: {
+          'Authorization': 'Bearer ' + this.state.access_token
+        },
+        method: 'POST'
+      }).then(response => response.json())
+        .then(response => {
+          commit('newSearchResults', response.items)
+        })
+    },
     createChannel(x, name) {
       let url = this.state.microsubEndpoint + '?action=channels&name=' + encodeURIComponent(name)
       return fetch(url, {

src/views/Home.vue

@@ -33,6 +33,7 @@
 
     <channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
     <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :initial-channel="channel" :initial-query="feedFollowerQuery"></feed-follower>
+    <search-popup :is-open="searchPopupIsOpen"></search-popup>
   </div>
 </template>
 
@@ -44,6 +45,7 @@
   import FeedFollower from "../components/FeedFollower"
   import NewPost from "../components/NewPost"
   import ShortTimeline from "../components/ShortTimeline";
+  import SearchPopup from "../components/SearchPopup";
 
   export default {
     name: 'home',
@@ -54,7 +56,8 @@
       Channel,
       ChannelCreator,
       NewPost,
-      ShortTimeline
+      ShortTimeline,
+      SearchPopup
     },
 
     data() {
@@ -78,6 +81,9 @@
           'channels-open': this.channelsVisible,
           'channels': true
         }
+      },
+      searchPopupIsOpen () {
+        return this.$store.state.searchPopupIsOpen
       }
     },