Make it possible to abandon draft

src/components/draft/draft.js

@@ -1,8 +1,10 @@
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 
 const Draft = {
   components: {
-    PostStatusForm
+    PostStatusForm,
+    ConfirmModal
   },
   props: {
     draft: {
@@ -12,7 +14,8 @@ const Draft = {
   },
   data () {
     return {
-      editing: false
+      editing: false,
+      showingConfirmDialog: false
     }
   },
   computed: {
@@ -35,6 +38,23 @@ const Draft = {
   methods: {
     toggleEditing () {
       this.editing = !this.editing
+    },
+    abandon () {
+      this.showingConfirmDialog = true
+    },
+    doAbandon () {
+      console.debug('abandoning')
+      this.$store.dispatch('abandonDraft', { id: this.draft.id })
+        .then(() => {
+          this.hideConfirmDialog()
+        })
+    },
+    hideConfirmDialog () {
+      this.showingConfirmDialog = false
+    },
+    handlePosted () {
+      console.debug('posted')
+      this.doAbandon()
     }
   }
 }

src/components/draft/draft.vue

@@ -1,28 +1,48 @@
 <template>
   <article class="Draft">
-    <div>
-      {{ draft.id }}
-    </div>
     <div v-if="draft.inReplyToStatusId">
       {{ draft.inReplyToStatusId }}
     </div>
-    <div
+    <div class="actions">
-      class="draft-content"
-    >
-      {{ draft.status }}
-    </div>
-    <div>
       <button
         class="btn button-default"
+        :class="{ toggled: editing }"
         :aria-expanded="editing"
         @click.prevent.stop="toggleEditing"
       >
         {{ $t('drafts.continue') }}
       </button>
+      <button
+        class="btn button-default"
+        @click.prevent.stop="abandon"
+      >
+        {{ $t('drafts.abandon') }}
+      </button>
     </div>
+    <p
+      v-if="!editing"
+      class="draft-content"
+    >
+      {{ draft.status }}
+    </p>
     <div v-if="editing">
-      <PostStatusForm v-bind="postStatusFormProps" />
+      <PostStatusForm
+        v-bind="postStatusFormProps"
+        @posted="handlePosted"
+      />
     </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmDialog"
+        :title="$t('drafts.abandon_confirm_title')"
+        :confirm-text="$t('drafts.abandon_confirm_accept_button')"
+        :cancel-text="$t('drafts.abandon_confirm_cancel_button')"
+        @accepted="doAbandon"
+        @cancelled="hideConfirmDialog"
+      >
+        {{ $t('drafts.abandon_confirm') }}
+      </confirm-modal>
+    </teleport>
   </article>
 </template>
 
@@ -31,5 +51,18 @@
 <style lang="scss">
 .Draft {
   margin: 1em;
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+
+    .btn {
+      flex: 1;
+      margin-left: 1em;
+      margin-right: 1em;
+      max-width: 10em;
+    }
+  }
 }
 </style>

src/i18n/en.json

@@ -1158,6 +1158,11 @@
   },
   "drafts": {
     "drafts": "Drafts",
-    "continue": "Continue editing"
+    "continue": "Continue editing",
+    "abandon": "Abandon draft",
+    "abandon_confirm_title": "Abandon confirmation",
+    "abandon_confirm": "Do you really want to abandon this draft?",
+    "abandon_confirm_accept_button": "Abandon",
+    "abandon_confirm_cancel_button": "Keep"
   }
 }

src/modules/drafts.js

@@ -6,6 +6,9 @@ export const defaultState = {
 export const mutations = {
   addOrSaveDraft (state, { draft }) {
     state.drafts[draft.id] = draft
+  },
+  abandonDraft (state, { id }) {
+    delete state.drafts[id]
   }
 }
 
@@ -14,6 +17,9 @@ export const actions = {
     const id = draft.id || (new Date().getTime()).toString()
     store.commit('addOrSaveDraft', { draft: { ...draft, id } })
     return id
+  },
+  abandonDraft (store, { id }) {
+    store.commit('abandonDraft', { id })
   }
 }