feat: comments - default provider create (wip) + permissions

client/components/admin/admin-groups-edit-permissions.vue

@@ -126,7 +126,7 @@ export default {
               permission: 'write:comments',
               hint: 'Can post new comments, as specified in the Page Rules',
               warning: false,
-              restrictedForSystem: true,
+              restrictedForSystem: false,
               disabled: false
             },
             {

client/components/comments.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  div(v-intersect.once.quiet='onIntersect')
+  div(v-intersect.once='onIntersect')
     v-textarea#discussion-new(
       outlined
       flat
@@ -11,11 +11,37 @@
       v-model='newcomment'
       color='blue-grey darken-2'
       :background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
+      v-if='permissions.write'
     )
-    .d-flex.align-center.pt-3
+    v-row.mt-2(dense, v-if='!isAuthenticated && permissions.write')
+      v-col(cols='12', lg='6')
+        v-text-field(
+          outlined
+          color='blue-grey darken-2'
+          :background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
+          placeholder='Your Name'
+          hide-details
+          dense
+          autocomplete='name'
+          v-model='guestName'
+        )
+      v-col(cols='12', lg='6')
+        v-text-field(
+          outlined
+          color='blue-grey darken-2'
+          :background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
+          placeholder='Your Email Address'
+          hide-details
+          type='email'
+          dense
+          autocomplete='email'
+          v-model='guestEmail'
+        )
+    .d-flex.align-center.pt-3(v-if='permissions.write')
       v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
       .caption.blue-grey--text Markdown Format
       v-spacer
+      .caption.mr-3(v-if='isAuthenticated') Posting as #[strong {{userDisplayName}}]
       v-btn(
         dark
         color='blue-grey darken-2'
@@ -24,7 +50,7 @@
         )
         v-icon(left) mdi-comment
         span.text-none Post Comment
-    v-divider.mt-3
+    v-divider.mt-3(v-if='permissions.write')
     .pa-5.d-flex.align-center.justify-center(v-if='isLoading')
       v-progress-circular(
         indeterminate
@@ -48,15 +74,18 @@
             v-img(src='http://i.pravatar.cc/64')
         v-card.elevation-1
           v-card-text
-            .caption: strong John Smith
+            .caption: strong {{cm.authorName}}
             .overline.grey--text 3 minutes ago
             .mt-3 {{cm.render}}
-    .pt-5.text-center.body-2.blue-grey--text(v-else) Be the first to comment.
+    .pt-5.text-center.body-2.blue-grey--text(v-else-if='permissions.write') Be the first to comment.
+    .text-center.body-2.blue-grey--text(v-else) No comments yet.
 </template>
 
 <script>
 import gql from 'graphql-tag'
 import { get } from 'vuex-pathify'
+import validate from 'validate.js'
+import _ from 'lodash'
 
 export default {
   data () {
@@ -64,19 +93,118 @@ export default {
       newcomment: '',
       isLoading: true,
       canFetch: false,
-      comments: []
+      comments: [],
+      guestName: '',
+      guestEmail: ''
     }
   },
   computed: {
-    pageId: get('page/id')
+    pageId: get('page/id'),
+    permissions: get('page/commentsPermissions'),
+    isAuthenticated: get('user/authenticated'),
+    userDisplayName: get('user/name')
   },
   methods: {
-    onIntersect () {
-      this.isLoading = true
-      this.canFetch = true
+    onIntersect (entries, observer, isIntersecting) {
+      if (isIntersecting) {
+        this.isLoading = true
+        this.canFetch = true
+      }
     },
     async postComment () {
+      let rules = {
+        comment: {
+          presence: {
+            allowEmpty: false
+          },
+          length: {
+            minimum: 2
+          }
+        }
+      }
+      if (!this.isAuthenticated && this.permissions.write) {
+        rules.name = {
+          presence: {
+            allowEmpty: false
+          },
+          length: {
+            minimum: 2,
+            maximum: 255
+          }
+        }
+        rules.email = {
+          presence: {
+            allowEmpty: false
+          },
+          email: true
+        }
+      }
+      const validationResults = validate({
+        comment: this.newcomment,
+        name: this.guestName,
+        email: this.guestEmail
+      }, rules, { format: 'flat' })
 
+      if (validationResults) {
+        this.$store.commit('showNotification', {
+          style: 'red',
+          message: validationResults[0],
+          icon: 'alert'
+        })
+        return
+      }
+
+      const resp = await this.$apollo.mutate({
+        mutation: gql`
+          mutation (
+            $pageId: Int!
+            $replyTo: Int
+            $content: String!
+            $guestName: String
+            $guestEmail: String
+          ) {
+            comments {
+              create (
+                pageId: $pageId
+                replyTo: $replyTo
+                content: $content
+                guestName: $guestName
+                guestEmail: $guestEmail
+              ) {
+                responseResult {
+                  succeeded
+                  errorCode
+                  slug
+                  message
+                }
+              }
+            }
+          }
+        `,
+        variables: {
+          pageId: this.pageId,
+          replyTo: 0,
+          content: this.newcomment,
+          guestName: this.guestName,
+          guestEmail: this.guestEmail
+        }
+      })
+
+      if (_.get(resp, 'data.comments.create.responseResult.succeeded', false)) {
+        this.$store.commit('showNotification', {
+          style: 'success',
+          message: 'New comment posted successfully.',
+          icon: 'check'
+        })
+
+        this.newcomment = ''
+      } else {
+        this.$store.commit('showNotification', {
+          style: 'red',
+          message: _.get(resp, 'data.comments.create.responseResult.message', 'An unexpected error occured.'),
+          icon: 'alert'
+        })
+      }
     }
   },
   apollo: {