Ability to reblog entries and contests (#111)

* Add ability to reblog contest * Remove uneeded characthers in post component * Pass type into post-options to indicate if reblog should be shown * Remove uneeded closing tags from contest create and edit * Trigger reblog pop up on click of icon, fix issue with loading indicator never stopping
tobias-g1 · Nov 4, 2018 · 3991b29 · 3991b29
1 parent 8545a6e
commit 3991b29
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 27 deletions.
diff --git a/client/src/components/contest-comment/contest-comment.vue b/client/src/components/contest-comment/contest-comment.vue
@@ -4,7 +4,7 @@
     <div class="comment-details">
       <span class="comment-author">{{ comment.author }}</span>
       <VueMarkdown class="comment-body" :source="comment.body"></VueMarkdown>
-      <postoptions :post="comment" />
+      <postoptions :type="'comment'" :post="comment" />
     </div>
   </div>
 </template>

diff --git a/client/src/components/post-card/post-card.vue b/client/src/components/post-card/post-card.vue
@@ -9,7 +9,7 @@
           </span>
     </span>
     <span class="card-summary">
-      <postoptions :post="post.blockchain"/>
+      <postoptions :type="'full'" :post="post.blockchain"/>
       <div>
 <span class="contest">{{ post.category }}</span>
  <el-tag v-bind:class="status === 'Live' ? 'contest_open' : 'contest_closed'" size="small">{{ status }}</el-tag>

diff --git a/client/src/components/post-options/post-options.css b/client/src/components/post-options/post-options.css
@@ -68,3 +68,8 @@
 	}			
 }
 
+.reblog {
+	font-size: 20px;
+	cursor: pointer;
+}
+
diff --git a/client/src/components/post-options/post-options.vue b/client/src/components/post-options/post-options.vue
@@ -1,32 +1,56 @@
 <template>
-    <div v-if="post.active_votes" class="stats-container">
-        <i class="material-icons stat-option vote vote-pulse" :class="{ voted: voted }" @click=" (user) ? dialogVisible = true : ''">favorite</i> <span class="icon-label">{{ post.net_votes }}</span>
-        <i class="material-icons stat-option">attach_money</i> <span class="icon-label">{{post.pending_payout_value.slice(0, -3) * 1 }}</span>
-        <el-dialog title="Select Vote Percentage" :visible.sync="dialogVisible" width="65%" v-if="dialogVisible === true">
-            <div class="slider">
-                <el-slider v-model="votePercentage" show-input>
-                </el-slider>
-            </div>
-            <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible = false">Cancel</el-button>
-            <el-button type="primary" @click="dialogVisible = false, vote($store.state.steemconnect.user.name, post.author, post.permlink, votePercentage * 100)">Confirm</el-button>
-          </span>
-        </el-dialog>
-    </div>
+
+  <!-- Post Controls -->
+
+  <div v-if="post.active_votes" class="stats-container">
+    <i class="material-icons stat-option vote vote-pulse" :class="{ voted: voted }" @click=" (user) ? dialogVisible = true : ''">favorite</i> <span class="icon-label">{{ post.net_votes }}</span>
+    <i class="material-icons stat-option">attach_money</i> <span class="icon-label">{{post.pending_payout_value.slice(0, 3) }}</span>
+    <i v-if="type === 'full'" @click="resteemVisible = true" class="material-icons stat-option reblog vote-pulse">repeat</i>
+
+    <!-- Voting Dialog -->
+
+    <el-dialog title="Select Vote Percentage" :visible.sync="dialogVisible" width="65%" v-if="dialogVisible === true">
+      <div class="slider">
+        <el-slider v-model="votePercentage" show-input>
+        </el-slider>
+      </div>
+      <span slot="footer" class="dialog-footer">
+              <el-button @click="dialogVisible = false">Cancel</el-button>
+              <el-button type="primary" @click="dialogVisible = false, vote($store.state.steemconnect.user.name, post.author, post.permlink, votePercentage * 100)">Confirm</el-button>
+            </span>
+    </el-dialog>
+
+        <!-- Confirm Resteem Dialog -->
+
+            <el-dialog title="Confirm Reblog" :visible.sync="resteemVisible" width="50%" v-if="resteemVisible === true">
+              <p>This post will appear on your feed on other Steem sites. This action cannot be reversed.</p>
+      <span slot="footer" class="dialog-footer">
+              <el-button @click="resteemVisible = false">Cancel</el-button>
+              <el-button type="primary" @click="resteemVisible = false, reblog($store.state.steemconnect.user.name, post.author, post.permlink)">Confirm</el-button>
+            </span>
+    </el-dialog>
+
+  </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import {
+  mapGetters
+} from 'vuex'
 export default {
   name: 'post-options',
   data () {
     return {
       dialogVisible: false,
+      resteemVisible: false,
       votePercentage: 100,
       voteCount: this.post.active_votes.length
     }
   },
-  props: ['post'],
+  props: {
+    post: Object,
+    type: String
+  },
   computed: {
     ...mapGetters('steemconnect', ['user']),
     voted: function () {
@@ -45,16 +69,40 @@ export default {
     vote (currentUser, author, permlink, weight) {
       this.$store.commit('setLoading', true)
       this.$steemconnect.vote(currentUser, author, permlink, weight, (err) => {
-        (err) ? this.$notify({ title: 'Error', message: 'Sorry, there was an error with your vote.', type: 'error' }) : this.voted = true
+        (err) ? this.$notify({
+          title: 'Error',
+          message: 'Sorry, there was an error with your vote.',
+          type: 'error'
+        }) : this.voted = true
         this.voteCount = this.post.active_votes.length
         this.voteCount++
         this.$store.commit('setLoading', false)
-        this.$notify({ title: 'Success', message: 'Your vote has been cast successfully', type: 'success' })
+        this.$notify({
+          title: 'Success',
+          message: 'Your vote has been cast successfully',
+          type: 'success'
+        })
+      })
+    },
+    reblog (currentUser, author, permlink) {
+      this.$store.commit('setLoading', true)
+      this.$steemconnect.reblog(currentUser, author, permlink, (err) => {
+        (err) ? this.$notify({
+          title: 'Error',
+          message: 'Sorry, there was an error reblogging this post',
+          type: 'error'
+        }) : this.$notify({
+          title: 'Success',
+          message: 'You have successfully reblogged this post',
+          type: 'success'
+        })
+        this.$store.commit('setLoading', false)
       })
     }
   }
 }
-
 </script>
 
-<style src='@/components/post-options/post-options.css'></style>
+<style src='@/components/post-options/post-options.css'>
+
+</style>
diff --git a/client/src/components/post/post.vue b/client/src/components/post/post.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-      <div vih> <div v-html="adjustedPost"></div> </div>
+      <div> <div v-html="adjustedPost"></div> </div>
     </div>
 </template>
 

diff --git a/client/src/pages/create-contest/create-contest.vue b/client/src/pages/create-contest/create-contest.vue
@@ -49,7 +49,6 @@
                         <el-option label="None" value="None"></el-option>
                     </el-select>
                     </el-form-item>
-                </el-form-item>
             </el-col>
                    <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
               <el-form-item :required="contestForm.prize_type !== 'None'" prop="prize_value">

diff --git a/client/src/pages/edit-contest/edit-contest.vue b/client/src/pages/edit-contest/edit-contest.vue
@@ -50,7 +50,6 @@
                         <el-option label="None" value="None"></el-option>
                     </el-select>
                     </el-form-item>
-                </el-form-item>
             </el-col>
                    <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
               <el-form-item :required="contestForm.prize_type !== 'None'" prop="prize_value">

diff --git a/client/src/pages/view-contest/view-contest.vue b/client/src/pages/view-contest/view-contest.vue
@@ -28,7 +28,7 @@
             <div class="tags">
               <el-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</el-tag>
             </div>
-            <postoptions :post="post.data" />
+            <postoptions :type="'full'" :post="post.data" />
           </div>
         </div>
         <router-link :to="postLink"><button :disabled="contestOpen === false" class="btn-fill enter-contest">Enter contest with a {{ contest.contestData.entry_method || 'Post' }} </button></router-link>

diff --git a/client/src/pages/view-entry/view-entry.vue b/client/src/pages/view-entry/view-entry.vue
@@ -10,7 +10,7 @@
                     <div class="tags">
                         <el-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</el-tag>
                     </div>
-                    <postoptions :post="post.data" />
+                    <postoptions :type="'full'" :post="post.data" />
                 </div>
             </div>
             <commentpanel :post="post"/>