Made very basic edit and create of posts possible

components/ContentMenu.vue

@@ -78,7 +78,7 @@ export default {
           name: this.$t(`contribution.edit`),
           callback: () => {
             // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-            return this.$router.push('/post/edit/p1')
+            return this.$router.push(`/post/edit/${this.itemId}`)
             // return this.$router.push(link)
           },
           icon: 'edit'

components/ContributionForm.vue

@@ -0,0 +1,145 @@
+<template>
+  <ds-form
+    ref="contributionForm"
+    v-model="form"
+    :schema="formSchema"
+    @submit="submit"
+  >
+    <template slot-scope="{ errors }">
+      <ds-card>
+        <ds-input
+          model="title"
+          class="post-title"
+          placeholder="Title"
+          name="title"
+          autofocus
+        />
+        <no-ssr>
+          <hc-editor
+            :value="form.content"
+            @input="updateEditorContent"
+          />
+        </no-ssr>
+        <div
+          slot="footer"
+          style="text-align: right"
+        >
+          <ds-button
+            :disabled="loading || disabled"
+            ghost
+            @click.prevent="$router.back()"
+          >
+            Abbrechen
+          </ds-button>
+          <ds-button
+            icon="check"
+            type="submit"
+            :loading="loading"
+            :disabled="disabled || errors"
+            primary
+          >
+            Speichern
+          </ds-button>
+        </div>
+      </ds-card>
+    </template>
+  </ds-form>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import HcEditor from '~/components/Editor/Editor.vue'
+
+export default {
+  components: {
+    HcEditor
+  },
+  props: {
+    contribution: { type: Object, default: () => {} }
+  },
+  data() {
+    return {
+      form: {
+        title: '',
+        content: ''
+      },
+      formSchema: {
+        title: { required: true, min: 3, max: 64 },
+        content: { required: true, min: 3 }
+      },
+      id: null,
+      loading: false,
+      disabled: false,
+      slug: null
+    }
+  },
+  watch: {
+    contribution: {
+      immediate: true,
+      handler: function(contribution) {
+        if (!contribution || !contribution.id) {
+          return
+        }
+        this.id = contribution.id
+        this.slug = contribution.slug
+        this.form.content = contribution.content
+        this.form.title = contribution.title
+      }
+    }
+  },
+  methods: {
+    submit() {
+      const postMutations = require('~/graphql/PostMutations.js').default(this)
+      this.loading = true
+
+      this.$apollo
+        .mutate({
+          mutation: this.id
+            ? postMutations.UpdatePost
+            : postMutations.CreatePost,
+          variables: {
+            id: this.id,
+            title: this.form.title,
+            content: this.form.content
+          }
+        })
+        .then(res => {
+          this.loading = false
+          this.$toast.success('Saved!')
+          this.disabled = true
+
+          const result = res.data[this.id ? 'UpdatePost' : 'CreatePost']
+
+          this.$router.push({
+            name: 'post-slug',
+            params: { slug: result.slug }
+          })
+        })
+        .catch(err => {
+          this.$toast.error(err.message)
+          this.loading = false
+          this.disabled = false
+        })
+    },
+    updateEditorContent(value) {
+      // this.form.content = value
+      this.$refs.contributionForm.update('content', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.post-title {
+  margin-top: $space-x-small;
+  margin-bottom: $space-xx-small;
+
+  input {
+    border: 0;
+    font-size: $font-size-x-large;
+    font-weight: bold;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+</style>

components/Editor/Editor.vue

@@ -262,7 +262,8 @@ export default {
 
 <style lang="scss">
 .ProseMirror {
-  padding: $space-small;
+  padding: $space-base;
+  margin: -$space-base;
   min-height: $space-large;
 }
 
@@ -273,11 +274,10 @@ export default {
 .editor p.is-empty:first-child::before {
   content: attr(data-empty-text);
   float: left;
-  color: $text-color-softer;
-  padding-left: $space-base;
+  color: $text-color-disabled;
+  padding-left: $space-xx-small;
   pointer-events: none;
   height: 0;
-  font-style: italic;
 }
 
 .menubar__button {
@@ -293,7 +293,7 @@ li > p {
   &__floating-menu {
     position: absolute;
     margin-top: -0.25rem;
-    margin-left: $space-base;
+    margin-left: $space-xx-small;
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.2s, visibility 0.2s;

cypress/integration/common/report.js

@@ -37,7 +37,7 @@ When(
     //TODO: match the created post title, not a dummy post title
     cy.contains('.ds-card', dummyReportedPostTitle)
       .find('.content-menu-trigger')
-      .first()
+      .find(':nth-child(2)')
       .click()
 
     cy.get('.popover .ds-menu-item-link')

graphql/PostMutations.js

@@ -0,0 +1,28 @@
+import gql from 'graphql-tag'
+
+export default app => {
+  return {
+    CreatePost: gql(`
+      mutation($title: String!, $content: String!) {
+        CreatePost(title: $title, content: $content) {
+          id
+          title
+          slug
+          content
+          contentExcerpt
+        }
+      }
+    `),
+    UpdatePost: gql(`
+      mutation($id: ID!, $title: String!, $content: String!) {
+        UpdatePost(id: $id, title: $title, content: $content) {
+          id
+          title
+          slug
+          content
+          contentExcerpt
+        }
+      }
+    `)
+  }
+}

pages/index.vue

@@ -13,6 +13,14 @@
         <hc-post-card :post="post" />
       </ds-flex-item>
     </ds-flex>
+    <ds-button
+      v-tooltip="{content: 'Create a new Post', placement: 'left', delay: { show: 500 }}"
+      class="post-add-button"
+      icon="plus"
+      size="x-large"
+      primary
+      @click="$router.push('/post/create')"
+    />
     <hc-load-more
       v-if="true"
       :loading="$apollo.loading"
@@ -82,7 +90,7 @@ export default {
       query() {
         return gql(`
           query Post($first: Int, $offset: Int) {
-            Post(first: $first, offset: $offset) {
+            Post(first: $first, offset: $offset, orderBy: createdAt_desc) {
               id
               title
               contentExcerpt
@@ -123,8 +131,19 @@ export default {
           first: this.pageSize,
           offset: 0
         }
-      }
+      },
+      fetchPolicy: 'cache-and-network'
     }
   }
 }
 </script>
+
+<style lang="scss">
+.post-add-button {
+  z-index: 100;
+  position: fixed;
+  bottom: $space-large;
+  right: $space-small;
+  box-shadow: $box-shadow-x-large;
+}
+</style>

pages/post/_slug/edit/_id.vue

@@ -4,25 +4,7 @@
     gutter="base"
   >
     <ds-flex-item :width="{ base: '100%' }">
-      <ds-card>
-        <no-ssr>
-          <hc-editor v-model="content" />
-        </no-ssr>
-        <div
-          slot="footer"
-          style="text-align: right"
-        >
-          <ds-button
-            icon="check"
-            :loading="loading"
-            :disabled="disabled"
-            primary
-            @click="save"
-          >
-            Speichern
-          </ds-button>
-        </div>
-      </ds-card>
+      <hc-contribution-form :contribution="contribution" />
     </ds-flex-item>
     <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
       &nbsp;
@@ -32,72 +14,20 @@
 
 <script>
 import gql from 'graphql-tag'
-import HcEditor from '~/components/Editor/Editor.vue'
+import HcContributionForm from '~/components/ContributionForm.vue'
 
 export default {
   components: {
-    HcEditor
+    HcContributionForm
   },
-  data() {
-    return {
-      content: '',
-      loading: false,
-      disabled: false,
-      slug: null
-    }
-  },
-  watch: {
-    Post: {
-      immediate: true,
-      handler: function(post) {
-        if (!post || !post[0].content) {
-          return
-        }
-        this.slug = post[0].slug
-        this.content = post[0].content
+  computed: {
+    contribution() {
+      if (!this.Post || !this.Post[0].id) {
+        return
       }
+      return this.Post[0]
     }
   },
-  methods: {
-    save() {
-      this.loading = true
-      this.$apollo
-        .mutate({
-          mutation: gql`
-            mutation($id: ID!, $content: String!) {
-              UpdatePost(id: $id, content: $content) {
-                id
-                slug
-                content
-                contentExcerpt
-              }
-            }
-          `,
-          variables: {
-            id: 'p1',
-            content: this.content
-          }
-        })
-        .then(data => {
-          this.loading = false
-          this.$toast.success('Saved!')
-          this.disabled = true
-
-          this.$router.push({
-            name: 'post-slug',
-            params: { slug: this.slug }
-          })
-        })
-        .catch(err => {
-          this.$toast.error(err.message)
-          this.loading = false
-          this.disabled = false
-        })
-    }
-    //onUpdate(data) {
-    //  console.log('onUpdate', data)
-    //}
-  },
   apollo: {
     Post: {
       query() {

pages/post/create.vue

@@ -3,12 +3,8 @@
     :width="{ base: '100%' }"
     gutter="base"
   >
-    <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
-      <ds-card>
-        <no-ssr>
-          <hc-editor />
-        </no-ssr>
-      </ds-card>
+    <ds-flex-item :width="{ base: '100%' }">
+      <hc-contribution-form />
     </ds-flex-item>
     <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
       &nbsp;
@@ -17,11 +13,12 @@
 </template>
 
 <script>
-import HcEditor from '~/components/Editor/Editor.vue'
+import gql from 'graphql-tag'
+import HcContributionForm from '~/components/ContributionForm.vue'
 
 export default {
   components: {
-    HcEditor
+    HcContributionForm
   }
 }
 </script>