Add bookmarking and syndication targets

src/components/Entry.vue

@@ -42,6 +42,7 @@
                 <a @click="like">Like</a>
                 &middot; <a @click.prevent="openReply">Reply</a>
                 &middot; <a @click.prevent="repost">Repost</a>
+                &middot; <a @click.prevent="openBookmark">Bookmark</a>
                 &middot; <a @click.prevent="$emit('followFeed', author_url)" title="Try to follow the feed this item comes from">Follow</a>
                 &middot; <a @click.prevent="debug">Debug</a>
                 </span>
@@ -64,23 +65,53 @@
             </div>
           </div>
         </div>
+        <div class="media" v-if="bookmarking">
+          <div class="media-content">
+            <div class="field">
+              <div class="control">
+                <input type="text" class="input" placeholder="Title" v-model="bookmarkTitle">
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">Add a note</label>
+              <div class="control">
+                <textarea class="textarea" v-model="bookmarkDescription"></textarea>
+              </div>
+            </div>
+            <div class="field">
+              <syndication-buttons v-model="selected" :targets="targets"/>
+            </div>
+            <div class="field">
+              <div class="control">
+                <button class="button is-primary" @click="bookmark">Bookmark</button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import moment from 'moment'
+import moment from 'moment'
+import SyndicationButtons from "@/components/SyndicationButtons";
 
-  export default {
+export default {
     name: "Entry",
+    components: {SyndicationButtons},
     props: ['item'],
 
     data() {
       return {
         'replying': false,
         'replyText': '',
-        'showFooterButtons': true
+        'showFooterButtons': true,
+        bookmarking: false,
+        bookmarkTitle: '',
+        bookmarkDescription: '',
+        targets: [],
+        selected: []
       }
     },
 
@@ -122,6 +153,30 @@
           },
         })
       },
+      openBookmark() {
+        this.bookmarking = true
+        this.bookmarkTitle = this.author_name + ' - ' + this.currentItem.name
+        this.bookmarkDescription = ''
+        this.selected = []
+        this.$store.dispatch('fetchSyndicationTargets')
+            .then(res => this.targets = res['syndicate-to'])
+      },
+      bookmark() {
+        this.$store.dispatch('micropubPost', {
+          'type': ['h-entry'],
+          'properties': {
+            'bookmark-of': [this.currentItem.url],
+            'name': [this.bookmarkTitle],
+            'content': [this.bookmarkDescription ],
+            'mp-syndicate-to': this.selected
+          },
+        }).then(() => {
+          this.bookmarkTitle = '';
+          this.bookmarkDescription = '';
+          this.selected = []
+          this.bookmarking = false
+        })
+      },
       hasRef(key) {
         if (this.item.hasOwnProperty(key) && this.item.hasOwnProperty('refs')) {
           if (this.item.refs.hasOwnProperty(this.item[key])) {
@@ -289,4 +344,5 @@
   .is-pre {
     white-space: pre-wrap;
   }
+
 </style>

src/components/NewPost.vue

@@ -11,6 +11,9 @@
               <textarea class="textarea" v-model="newPost"></textarea>
             </div>
           </div>
+          <div class="field">
+            <syndication-buttons v-model="selectedTargets" :targets="targets"/>
+          </div>
           <div class="level">
             <div class="level-left">
               <div class="level-item">
@@ -33,20 +36,30 @@
 </template>
 
 <script>
+  import SyndicationButtons from "@/components/SyndicationButtons";
   export default {
     name: "NewPost",
+    components:{
+      SyndicationButtons
+    },
     data() {
       return {
         newPost: '',
-        tags: [{name:"twitter"},{name:"instagram"}]
+        targets: [],
+        selectedTargets: []
       }
     },
+    mounted() {
+      this.$store.dispatch('fetchSyndicationTargets')
+          .then(res => this.targets = res['syndicate-to'])
+    },
     methods: {
       post() {
         this.$store.dispatch('micropubPost', {
           'type': ['h-entry'],
           'properties': {
-            'content': [this.newPost]
+            'content': [this.newPost],
+            'mp-syndicate-to': this.selectedTargets,
           },
         }).then(() => {
           this.newPost = '';

src/components/SyndicationButtons.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div v-for="(target, i) in targets" :key="i" style="display: inline-block; margin: 0 3px 3px 0">
+      <label>
+        <input type="checkbox" class="is-hidden cb-target" v-model="selected" :value="target.uid"/>
+        <span class="tag is-light" v-text="target.name"></span>
+      </label>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'syndication-buttons',
+  data() {
+    return {
+      selected: [],
+    }
+  },
+  props: {
+    value: [],
+    targets: {}
+  },
+  mounted() {
+    this.selected = this.value
+  },
+  watch: {
+    selected(newSelection) {
+      this.$emit('update', newSelection)
+    }
+  }
+}
+</script>
+<style scoped>
+
+.tag {
+  cursor: pointer;
+}
+
+.cb-target:checked + .tag {
+  background-color: #23d160;
+  color: #fff;
+}
+</style>

src/store.js

@@ -178,6 +178,13 @@ export default new Vuex.Store({
         }
       })
     },
+    fetchSyndicationTargets() {
+      let micropub = new Micropub({
+        token: this.state.access_token,
+        micropubEndpoint: this.state.micropubEndpoint
+      })
+      return micropub.query('syndicate-to')
+    },
     micropubPost(_, mf2post) {
       let micropub = new Micropub({
         token: this.state.access_token,