Make DebugModal available in search and timeline

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/DebugModal.vue

@@ -25,7 +25,7 @@
     },
     methods: {
       close() {
-        this.$emit('close')
+        this.$store.dispatch('closeDebug')
       }
     }
   }
@@ -33,4 +33,4 @@
 
 <style scoped>
 
-</style>
+</style>

src/components/SearchPopup.vue

@@ -0,0 +1,77 @@
+<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" @debug="debug" />
+        </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 = ''
+    },
+    debug (item) {
+      this.$store.dispatch('openDebug', item)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/components/Timeline.vue

@@ -12,23 +12,19 @@
         <button class="button" @click="nextPage" v-if="timeline.paging.after">Next Page</button>
       </div>
     </div>
-    <DebugModal :active="showDebug" :item="debugItem" @close="showDebug = false"></DebugModal>
   </div>
 </template>
 
 <script>
   import TimelineEntry from '../components/Entry'
-  import DebugModal from '../components/DebugModal'
 
   export default {
     name: "Timeline",
     props: ['className', 'channel', 'timeline'],
-    components: {TimelineEntry, DebugModal},
+    components: {TimelineEntry},
 
     data() {
       return {
-        showDebug: false,
-        debugItem: null,
         state: 'new'
       }
     },
@@ -43,8 +39,7 @@
 
     methods: {
       debug(item) {
-        this.debugItem = item
+        this.$store.dispatch('openDebug', item)
-        this.showDebug = true
       },
       nextPage() {
         if (this.timeline.paging.after) {
@@ -104,4 +99,4 @@
     justify-content: end;
     padding: 12px;
   }
-</style>
+</style>

src/store.js

@@ -12,13 +12,17 @@ export default new Vuex.Store({
       channels: [],
       timeline: {items: [], paging: {}},
       channel: {},
-      debug: false,
       logged_in: false,
       micropubEndpoint: '',
       microsubEndpoint: '/microsub',
       channelCreatorIsOpen: false,
+      searchPopupIsOpen: false,
+      searchItems: [],
       eventSource: null,
-      globalTimeline: {items: [{name: 'Testing the global timeline'}]}
+      globalTimeline: {items: [{name: 'Testing the global timeline'}]},
+      debug: false,
+      debugItem: {},
+      debugVisible: false
     };
     let loginData = JSON.parse(window.localStorage.getItem('login_data'))
     if (loginData) {
@@ -58,6 +62,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 +146,16 @@ 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
+    },
+    openDebugPopup(state, item) {
+      state.debugItem = item
+      state.debugVisible = true
+    },
+    closeDebugPopup(state) {
+      state.debugVisible = false
     }
   },
 
@@ -236,6 +254,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, {
@@ -269,6 +304,12 @@ export default new Vuex.Store({
     },
     startEventListening({commit}, url) {
       commit('createEventSource', url)
-    }
+    },
+    openDebug({commit}, item) {
+      return commit('openDebugPopup', item)
+    },
+    closeDebug({commit}) {
+      return commit('closeDebugPopup')
+    },
   }
 })

src/views/Home.vue

@@ -33,6 +33,9 @@
 
     <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>
+    <DebugModal :active="this.$store.state.debugVisible"
+                :item="this.$store.state.debugItem"></DebugModal>
   </div>
 </template>
 
@@ -44,6 +47,8 @@
   import FeedFollower from "../components/FeedFollower"
   import NewPost from "../components/NewPost"
   import ShortTimeline from "../components/ShortTimeline";
+  import SearchPopup from "../components/SearchPopup";
+  import DebugModal from "../components/DebugModal";
 
   export default {
     name: 'home',
@@ -54,7 +59,9 @@
       Channel,
       ChannelCreator,
       NewPost,
-      ShortTimeline
+      ShortTimeline,
+      SearchPopup,
+      DebugModal
     },
 
     data() {
@@ -78,6 +85,9 @@
           'channels-open': this.channelsVisible,
           'channels': true
         }
+      },
+      searchPopupIsOpen () {
+        return this.$store.state.searchPopupIsOpen
       }
     },