feat: wip add quote functionality to editor

epochtalk · Nov 5, 2021 · d8847d7 · d8847d7
1 parent fce27b3
commit d8847d7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/components/layout/Editor.vue b/src/components/layout/Editor.vue
@@ -208,7 +208,7 @@
             Cancel
           </button>
           <button class="send" @click.prevent="post?.id ? updateAction(posting.post).then(closeEditor) : createAction(posting.post).then(closeEditor)" :disabled="!canCreate()">
-            <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;{{ posting?.post?.id ? 'Edit Post' : 'Send Reply' }}
+            <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;{{ posting?.post?.id ? 'Edit Post' : 'Create Reply' }}
           </button>
 
           <span class="label alert" v-if="posting.error" v-html="posting.error.message"></span>
@@ -239,7 +239,7 @@ import Multiselect from '@vueform/multiselect'
 import { usersApi } from '@/api'
 
 export default {
-  props: ['editorConvoMode', 'threadEditorMode', 'postEditorMode', 'createAction', 'updateAction', 'showEditor', 'thread', 'currentMessage', 'post' ],
+  props: ['editorConvoMode', 'threadEditorMode', 'postEditorMode', 'createAction', 'updateAction', 'showEditor', 'thread', 'currentMessage', 'post', 'quote' ],
   emits: ['close'],
   components: { ImageUploader, PollCreator, Multiselect },
   setup(props, { emit }) {
@@ -318,6 +318,10 @@ export default {
       if (p) nextTick(() => Object.assign(v.posting.post, p))
     })
 
+    watch(() => props.quote, p => {
+      if (p) nextTick(() => Object.assign(v.posting.post, p))
+    })
+
     // invalidate poll when closing poll creator
     watch(() => v.threadCopy?.addPoll, () => { if (!v.threadCopy.addPoll) { v.threadCopy.pollValid = false }})
 

diff --git a/src/views/Posts.vue b/src/views/Posts.vue
@@ -249,7 +249,7 @@
                 </a>
               </li>
               <li v-if="canPost()">
-                <a href="" class="post-action-icon" @click.prevent="addQuote(post)" data-balloon="Quote">
+                <a href="" class="post-action-icon" @click.prevent="addQuote({ id: post.id, body: post.body, body_html: post.body_html, created_at: post.created_at, thread_slug: threadSlug, user: { username: post.user.username }})" data-balloon="Quote">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                     <title></title>
                     <path
@@ -412,7 +412,7 @@
   <posts-move-thread-modal v-if="canMove()" :threadId="postData.data.thread?.id" :show="showPostsMoveThreadModal" @close="showPostsMoveThreadModal = false"/>
   <posts-purge-thread-modal :threadId="postData.data.thread?.id" :boardId="postData.data.board?.id" :boardSlug="postData.data.board?.slug" :show="showPostsPurgeThreadModal" @close="showPostsPurgeThreadModal = false"/>
   <posts-report-modal :selectedPost="selectedPost" :canReportPosts="true" :canReportUsers="true" :show="showPostsReportModal" @close="showPostsReportModal = false; selectedPost = null" />
-  <editor :showEditor="showEditor" @close="showEditor = false" :postEditorMode="true" :thread="postData.data?.thread" :post="editPost" :createAction="createPost" :updateAction="updatePost" />
+  <editor :showEditor="showEditor" @close="showEditor = false" :postEditorMode="true" :thread="postData.data?.thread" :quote="quote" :post="editPost" :createAction="createPost" :updateAction="updatePost" />
 </template>
 
 <script>
@@ -869,9 +869,23 @@ export default {
     const loadEditor = (post) => {
       v.editPost = post
       v.showEditor = true
-      console.log(post, 'loadEditor')
     }
-    const addQuote = (post) => console.log(post, 'addQuote')
+    const addQuote = (post) => {
+      v.quote = null
+      let quote = '[quote author=' + post.user.username
+      if (post.thread_slug) {
+        quote += ' link='
+        quote += '/threads/' + post.thread_slug + '/posts?page=' + v.postData.data.page + '#' + post.id
+      }
+      quote += ' date=' + new Date(post.created_at).getTime() + ']'
+      quote += post.body || post.body_html
+      quote += '[/quote]'
+      console.log(quote)
+      v.quote = post
+      v.quote.body = quote
+      delete v.quote.id
+      v.showEditor = true
+    }
     const copyQuote = (post) => console.log(post, 'copyQuote')
     const showUserControls = () => (v.loggedIn && (!v.postData.data.thread.watched || canCreatePoll()))
     const highlightPost = () => {
@@ -946,6 +960,7 @@ export default {
       posting: {
         post: {}
       },
+      quote: null,
       permissionUtils: $auth.permissionUtils,
       bannedFromBoard: false,
       defaultAvatar: window.default_avatar,