Post Editing

assets/css/main.sass

@@ -106,4 +106,14 @@ a,
 	margin-bottom: 20px
 
 .news h5
-	height: 100px
+	height: 100px
+
+body // to have stronger specificy
+  .vue-input-tag-wrapper
+    .input-tag
+      background-color: lighten($brand-color, 40)
+      border-color: lighten($brand-color, 30)
+      color: $brand-color
+      padding: 4px 10px
+      .remove
+        color: $brand-color

components/EditReportModal.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="modal fade" id="editReportModal" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content" v-if="editReport">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Edit: {{ title }}</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="form-group">
+            <label for="report-title">Title</label>
+            <input class="form-control form-control-lg" id="report-title" v-model="title" />
+          </div>
+          <div class="form-group">
+            <markdown-editor v-model="body" :configs="editorConfig" ref="editor"></markdown-editor>
+          </div>
+          <div class="form-group">
+            <label for="report-tags">Tags</label>
+            <input-tag id="report-tags" :tags.sync="tags" :addTagOnBlur="true"></input-tag>
+            <small class="form-text text-muted">You don't need to add the #actifit tag. It will be added automatically.</small>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-success" @click.prevent="save()">
+            <i class="fas fa-spin fa-spinner" v-if="loading"></i>
+            <i class="fas fa-paper-plane" v-else></i>
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import marked from 'marked'
+  import InputTag from 'vue-input-tag'
+  import { mapGetters } from 'vuex'
+
+  export default {
+    components: {
+      InputTag
+    },
+    data () {
+      return {
+        title: '', // post title
+        body: '', // post body
+        tags: [], // post tags
+        loading: false, // loading animation in submit button
+        editorConfig: { // markdown editor for post body
+          autofocus: true,
+          spellChecker: false,
+          previewRender: (body) => {
+            return marked(body.replace(/@([\w-]+)(?![\w-])/g,'[$&](https://steemit.com/$&)'))
+          },
+          forceSync: true,
+          status: ['lines', 'words'],
+          promptURLs: true
+        }
+      }
+    },
+    computed: {
+      ...mapGetters(['editReport'])
+    },
+    watch: {
+      editReport () {
+        // set initial values after edit button was clicked
+        this.title = this.editReport.title
+        this.body = this.editReport.body
+
+        const meta = JSON.parse(this.editReport.json_metadata)
+        this.tags = meta.hasOwnProperty('tags') ? meta.tags.filter(tag => tag !== 'actifit') : [] // actifit as default tag, if no tags are present (for some reason)
+
+        // refresh editor
+        setTimeout(() => {
+          this.$refs.editor.simplemde.codemirror.refresh()
+        }, 250)
+      }
+    },
+    methods: {
+      save () {
+        this.loading = true // start loading animation
+
+        // prepare tags
+        const meta = JSON.parse(this.editReport.json_metadata)
+        meta.tags = [
+          'actifit',
+          ...this.tags
+            .filter(tag => tag !== 'actifit') // remove actifit tag, its the first tag automatically
+            .filter(String) // remove empty values
+            .map(tag => tag.trim()) // trim leading and trailing whitespaces from tags
+        ]
+
+        // save changes
+        this.$steemconnect.comment(
+          this.editReport.parent_author,
+          this.editReport.parent_permlink,
+          this.editReport.author,
+          this.editReport.permlink,
+          this.title,
+          this.body,
+          meta,
+          (err) => {
+            // stop loading animation and show notifitcation
+            this.loading = false
+            this.$notify({
+              group: err ? 'error' : 'success',
+              text: err ? 'Unknown error: Your changes could not be saved.' : 'Changes successfully saved!',
+              position: 'top center'
+            })
+
+            // update report in store
+            this.$store.dispatch('updateUserReport', {
+              author: this.editReport.author,
+              permlink: this.editReport.permlink
+            })
+          }
+        )
+      }
+    }
+  }
+</script>

components/Report.vue

@@ -11,7 +11,8 @@
         <div class="row">
           <div class="col-7">
             <a :href="'https://steemit.com/@' + report.author" target="_blank">
-              <div class="user-avatar mr-1" :style="'background-image: url(https://steemitimages.com/u/' + report.author + '/avatar)'"></div>
+              <div class="user-avatar mr-1"
+                   :style="'background-image: url(https://steemitimages.com/u/' + report.author + '/avatar)'"></div>
               <small class="d-inline-block align-top">@{{ report.author }}</small>
             </a>
           </div>
@@ -38,18 +39,26 @@
         <div class="row details mt-3">
           <div class="col-6">
             <small>
-			  <a href="#" class="text-brand" v-if="!user">
+              <a href="#" class="text-brand" v-if="!user">
                 <i class="far fa-thumbs-up"></i> {{ report.net_votes }}
               </a>
-              <a href="#" class="text-brand" @click.prevent="$store.commit('setPostToVote', report)" data-toggle="modal" data-target="#voteModal" v-if="user">
+              <a href="#" class="text-brand" @click.prevent="$store.commit('setPostToVote', report)" data-toggle="modal"
+                 data-target="#voteModal" v-if="user">
                 <i class="far fa-thumbs-up"></i> {{ report.net_votes }}
               </a>
               <i class="far fa-comments ml-2"></i> {{ report.children }}
             </small>
           </div>
           <div class="col-6 text-right">
             <small>
-              <a href="#" class="text-brand" @click="$store.commit('setActiveReport', report)" data-toggle="modal" data-target="#reportModal">
+              <a href="#" class="text-brand" @click="$store.commit('setEditReport', report)" data-toggle="modal"
+                 data-target="#editReportModal" v-if="user && report.author === user.account.name">
+                <i class="far fa-edit"></i>
+                edit
+              </a>
+              <span v-if="user && report.author === user.account.name"> - </span>
+              <a href="#" class="text-brand" @click="$store.commit('setActiveReport', report)" data-toggle="modal"
+                 data-target="#reportModal">
                 read more
               </a>
             </small>
@@ -61,23 +70,24 @@
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
+  import {mapGetters} from 'vuex'
+
   export default {
     props: ['report'],
     computed: {
-	  ...mapGetters(['user', 'postToVote']),
-      date () {
+      ...mapGetters(['user', 'postToVote']),
+      date() {
         let date = new Date(this.report.created)
-        let minutes = date.getMinutes();
+        let minutes = date.getMinutes()
         return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' ' + date.getHours() + ':' + (minutes < 10 ? '0' + minutes : minutes)
       },
-      steps () {
+      steps() {
         return this.meta.step_count[0]
       },
-      type () {
+      type() {
         return this.meta.activity_type.join(', ')
       },
-      meta () {
+      meta() {
         return JSON.parse(this.report.json_metadata)
       }
     }

nuxt.config.js

@@ -55,6 +55,7 @@ module.exports = {
 	  { src: '~plugins/ga.js', ssr: false },
     { src: '~plugins/vue-carousel', ssr: false },
     { src: '~plugins/vue-notification', ssr: false },
+    { src: '~plugins/vue-simplemde', ssr: false },
   ],
 
   /*