From abc9e4e1d4b5d4311422f315237a9845be0d19d6 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sun, 17 May 2020 18:38:23 -0400
Subject: [PATCH] feat: comments UI

---
 client/client-app.js                      |  3 +-
 client/components/comments.vue            | 60 +++++++++++++++++++++++
 client/store/page.js                      |  7 ++-
 client/themes/default/components/page.vue | 17 +++++--
 4 files changed, 81 insertions(+), 6 deletions(-)
 create mode 100644 client/components/comments.vue

diff --git a/client/client-app.js b/client/client-app.js
index 569c0a0f..5161e926 100644
--- a/client/client-app.js
+++ b/client/client-app.js
@@ -149,9 +149,9 @@ Vue.prototype.Velocity = Velocity
 // ====================================
 
 Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
+Vue.component('comments', () => import(/* webpackChunkName: "comments" */ './components/comments.vue'))
 Vue.component('editor', () => import(/* webpackPrefetch: -100, webpackChunkName: "editor" */ './components/editor.vue'))
 Vue.component('history', () => import(/* webpackChunkName: "history" */ './components/history.vue'))
-Vue.component('page-source', () => import(/* webpackChunkName: "source" */ './components/source.vue'))
 Vue.component('loader', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/loader.vue'))
 Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.vue'))
 Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))
@@ -159,6 +159,7 @@ Vue.component('new-page', () => import(/* webpackChunkName: "new-page" */ './com
 Vue.component('notify', () => import(/* webpackMode: "eager" */ './components/common/notify.vue'))
 Vue.component('not-found', () => import(/* webpackChunkName: "not-found" */ './components/not-found.vue'))
 Vue.component('page-selector', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/page-selector.vue'))
+Vue.component('page-source', () => import(/* webpackChunkName: "source" */ './components/source.vue'))
 Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
 Vue.component('register', () => import(/* webpackChunkName: "register" */ './components/register.vue'))
 Vue.component('search-results', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/search-results.vue'))
diff --git a/client/components/comments.vue b/client/components/comments.vue
new file mode 100644
index 00000000..f1987e8b
--- /dev/null
+++ b/client/components/comments.vue
@@ -0,0 +1,60 @@
+<template lang="pug">
+  div
+    v-textarea#discussion-new(
+      solo
+      flat
+      placeholder='Write a new comment...'
+      auto-grow
+      dense
+      rows='3'
+      hide-details
+    )
+    .d-flex.align-center.pt-3
+      v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
+      .caption.blue-grey--text Markdown Format
+      v-spacer
+      v-btn(
+        dark
+        color='pink darken-4'
+        )
+        v-icon(left) mdi-comment
+        span Post Comment
+    v-divider.mt-3
+    v-timeline(
+      dense
+      )
+      v-timeline-item(
+        color='pink darken-4'
+        large
+        )
+        template(v-slot:icon)
+          v-avatar
+            v-img(src='http://i.pravatar.cc/64')
+        v-card.elevation-1
+          v-card-text
+            .caption: strong John Smith
+            .overline.grey--text 3 minutes ago
+            .mt-3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem arcu, mollis et erat quis, convallis tempor urna. In dictum pharetra consequat. #[br] #[br] Integer placerat ultrices nisl eget tincidunt. Curabitur sagittis tortor ut libero semper, et mollis odio ultrices. Sed consectetur sollicitudin ipsum, in commodo augue.
+      v-timeline-item(
+        color='pink darken-4'
+        large
+        )
+        template(v-slot:icon)
+          v-avatar
+            v-img(src='http://i.pravatar.cc/32')
+        v-card.elevation-1
+          v-card-text
+            .caption: strong Nikola Tesla
+            .overline.grey--text Yesterday at 8:03 AM
+            .mt-3 Integer placerat ultrices nisl eget tincidunt. Curabitur sagittis tortor ut libero semper, et mollis odio ultrices. Sed consectetur sollicitudin ipsum, in commodo augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem arcu, mollis et erat quis, convallis tempor urna. In dictum pharetra consequat.
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/client/store/page.js b/client/store/page.js
index aa4c2d9d..e1a46a01 100644
--- a/client/store/page.js
+++ b/client/store/page.js
@@ -14,7 +14,12 @@ const state = {
   tags: [],
   title: '',
   updatedAt: '',
-  mode: ''
+  mode: '',
+  comments: {
+    view: false,
+    post: false,
+    manage: false
+  }
 }
 
 export default {
diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue
index 99406f3c..a8ee1754 100644
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -106,7 +106,7 @@
                     span 334
                 .d-flex
                   v-btn.text-none(
-                    :href='"/c/" + locale + "/" + path'
+                    @click='goToComments'
                     :color='$vuetify.theme.dark ? `pink` : `pink darken-3`'
                     outlined
                     style='flex: 1 1 100%;'
@@ -116,7 +116,7 @@
                   v-tooltip(right, v-if='isAuthenticated')
                     template(v-slot:activator='{ on }')
                       v-btn.ml-2(
-                        :href='"/c/" + locale + "/" + path + `?new`'
+                        @click='goToComments(true)'
                         v-on='on'
                         outlined
                         small
@@ -398,9 +398,9 @@ export default {
       type: Boolean,
       default: false
     },
-    commentsProvider: {
+    commentsPermissions: {
       type: String,
-      default: 'default'
+      default: ''
     },
     commentsExternal: {
       type: Boolean,
@@ -485,6 +485,9 @@ export default {
     this.$store.set('page/tags', this.tags)
     this.$store.set('page/title', this.title)
     this.$store.set('page/updatedAt', this.updatedAt)
+    if (this.commentsPermissions) {
+      this.$store.set('page/comments', JSON.parse(atob(this.commentsPermissions)))
+    }
 
     this.$store.set('page/mode', 'view')
   },
@@ -571,6 +574,12 @@ export default {
       } else {
         this.navShown = false
       }
+    },
+    goToComments (focusNewComment = false) {
+      this.$vuetify.goTo('#discussion', this.scrollOpts)
+      if (focusNewComment) {
+        document.querySelector('#discussion-new').focus()
+      }
     }
   }
 }