Automatically select the right channel in the select

src/components/Entry.vue

@@ -24,6 +24,8 @@
               <div><a :href="author_url">{{ author_name }}</a>
                 &middot;
                 <a :href="currentItem.url" target="_new"><span class="published" v-html="niceTime"></span></a>
+                &middot;
+                <button class="button is-small" @click="$emit('followFeed', author_url)">Follow</button>
               </div>
 
               <h3 class="title is-6" v-if="currentItem.name" v-text="currentItem.name"></h3>

src/components/FeedFollower.vue

@@ -18,6 +18,14 @@
           </div>
         </div>
 
+        <div class="channels">
+          <div class="select">
+            <select class="select" v-model="channel">
+              <option :value="ch" v-text="ch.name" :key="ch.uid" v-for="ch in channels"></option>
+            </select>
+          </div>
+        </div>
+
         <div class="results">
           <feed-chooser :feed="feed" @showFeed="showFeed(feed)" @addFeed="addFeed(feed)" v-for="(feed, i) in feeds" :key="i"/>
         </div>
@@ -38,10 +46,11 @@
   export default {
     name: "FeedFollower",
     components: {FeedChooser, Timeline},
-    props: ['isOpen', 'channel'],
+    props: ['isOpen', 'initialChannel', 'initialQuery'],
 
     data() {
       return {
+        channel: {},
         feeds: [],
         timeline: {items: [], paging: {}},
         query: '',
@@ -55,6 +64,9 @@
       },
       searchClasses() {
         return {'button': true, 'is-primary': true, 'is-loading': this.loading}
+      },
+      channels() {
+        return this.$store.state.channels
       }
     },
 
@@ -62,6 +74,9 @@
       // eslint-disable-next-line no-unused-vars
       isOpen(newVal, oldVal) {
         if (newVal) {
+          this.query = this.initialQuery
+          this.channel = this.initialChannel
+
           this.$nextTick(function () {
             this.$refs.query.focus()
           })

src/components/Timeline.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="this.className">
     <div class="timeline--item" v-for="item in items" :key="item.id">
-      <TimelineEntry :item="item" @debug="debug" @markRead="markRead(channel.uid, ...arguments)"
+      <TimelineEntry :item="item" @debug="debug" @markRead="markRead(channel.uid, ...arguments)" @followFeed="$emit('followFeed', arguments[0])"
                      :is-main-entry="true"/>
     </div>
     <div class="level">

src/views/Home.vue

@@ -11,13 +11,13 @@
       <new-post class="mt-20"></new-post>
       <h1 class="title is-5 mt-20">{{ channel.name }}</h1>
       <Timeline style="margin-top:20px" :timeline="this.$store.state.timeline" :channel="channel"
-                @getPage="getPage"></Timeline>
+                @getPage="getPage" @followFeed="openFeedFollower(arguments[0])"></Timeline>
     </div>
 
     <div class="column"></div>
 
     <channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
-    <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :channel="channel"></feed-follower>
+    <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :initial-channel="channel" :initial-query="feedFollowerQuery"></feed-follower>
   </div>
 </template>
 
@@ -43,6 +43,7 @@
     data() {
       return {
         feedFollowerIsOpen: false,
+        feedFollowerQuery: ''
       }
     },
 
@@ -56,8 +57,11 @@
     },
 
     methods: {
-      openFeedFollower() {
+      openFeedFollower(query) {
+        // eslint-disable-next-line
+        console.log(query)
         this.feedFollowerIsOpen = true
+        this.feedFollowerQuery = query
       },
       closeFeedFollower() {
         this.feedFollowerIsOpen = false