Add Editor, cancel/submit buttons for comments

- to PagesPost_id_slugIndex.vue
- handle simple comment creation using auto-generated resolver

Co-authored-by: Joseph "Kachulio" Ngugi <jngugi88@gmail.com>

webapp/locales/en.json

@@ -106,7 +106,8 @@
     },
     "takeAction": {
       "name": "Take action"
-    }
+    },
+    "submitComment": "Submit Comment"
   },
   "quotes": {
     "african": {

webapp/pages/post/_id/_slug/index.vue

@@ -96,6 +96,8 @@
       <ds-space margin="small" />
       <!-- Comments -->
       <ds-section slot="footer">
+        <ds-flex>
+          <ds-flex-item width="30%">
             <h3 style="margin-top: 0;">
               <span>
                 <ds-icon name="comments" />
@@ -108,6 +110,36 @@
                 >{{ post.commentsCount }}</ds-tag>&nbsp; Comments
               </span>
             </h3>
+          </ds-flex-item>
+          <ds-flex-item width="70%">
+            <no-ssr>
+              <hc-editor 
+                v-model="value"
+              />
+            </no-ssr>
+            <ds-flex>
+              <ds-flex-item>
+                <ds-button
+                  :disabled="loading || disabled"
+                  ghost
+                  @click.prevent="$router.back()"
+                >
+                  {{ $t('actions.cancel') }}
+                </ds-button>
+              </ds-flex-item>
+              <ds-flex-item>
+                <ds-button
+                  type="submit"
+                  :loading="loading"
+                  :disabled="disabled || errors"
+                  primary
+                  @click="handleSubmit"
+                >
+                  {{ $t('post.submitComment') }}
+                </ds-button>
+              </ds-flex-item>
+            </ds-flex>
+          </ds-flex-item>
           <ds-space margin-bottom="large" />
           <div
             v-if="post.comments"
@@ -124,6 +156,7 @@
             v-else
             icon="messages"
           />
+        </ds-flex>
       </ds-section>
     </ds-card>
   </transition>
@@ -139,6 +172,7 @@ import HcUser from '~/components/User'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import HcEmpty from '~/components/Empty.vue'
 import Comment from '~/components/Comment.vue'
+import HcEditor from '~/components/Editor/Editor.vue'
 
 export default {
   transition: {
@@ -152,7 +186,8 @@ export default {
     HcShoutButton,
     HcEmpty,
     Comment,
-    ContentMenu
+    ContentMenu,
+    HcEditor
   },
   head() {
     return {
@@ -278,6 +313,20 @@ export default {
   methods: {
     isAuthor(id) {
       return this.$store.getters['auth/user'].id === id
+    },
+    handleSubmit() {
+      this.$apollo.mutate({
+        mutation: gql`
+          mutation($content: String!) {
+            CreateComment(content: $content) {
+              content
+            }
+          }
+        `,
+        variables: {
+          content: this.value
+        }
+      })
     }
   }
 }