src/components/drafts/drafts.js

@@ -23,7 +23,12 @@ const Drafts = {
       this.showingConfirmDialog = true
     },
     doAbandonAll() {
-      this.$store.dispatch('abandonAllDrafts').then(() => this.hideConfirmDialog())
+      this.drafts.forEach((draft) => {
+        this.$store.dispatch('abandonDraft', { id: draft.id }).then(() => {
+          this.hideConfirmDialog()
+        })
+      })
+      this.hideConfirmDialog()
     },
     hideConfirmDialog() {
       this.showingConfirmDialog = false

src/components/drafts/drafts.vue

@@ -37,7 +37,7 @@
       </div>
     </div>
     <teleport to="#modal">
-      <ConfirmModal
+      <confirm-modal
         v-if="showingConfirmDialog"
         :confirm-danger="true"
         :title="$t('drafts.abandon_confirm_title')"
@@ -47,7 +47,7 @@
         @cancelled="hideConfirmDialog"
       >
         {{ $t('drafts.abandon_all_confirm') }}
-      </ConfirmModal>
+      </confirm-modal>
     </teleport>
   </div>
 </template>

src/modules/drafts.js

@@ -42,11 +42,9 @@ const saveDraftToStorage = async (draft) => {
   await storage.setItem(storageKey, currentData)
 }
 
-const deleteDraftFromStorage = async (ids) => {
+const deleteDraftFromStorage = async (id) => {
   const currentData = await getStorageData()
-  ids.forEach(id => {
-    delete currentData[id]
-  })
+  delete currentData[id]
   await storage.setItem(storageKey, currentData)
 }
 
@@ -60,12 +58,7 @@ export const actions = {
   },
   async abandonDraft(store, { id }) {
     store.commit('abandonDraft', { id })
-    await deleteDraftFromStorage([id])
-  },
-  async abandonAllDrafts(store) {
-    const ids = Object.keys(store.state.drafts)
-    ids.forEach((id) => store.commit('abandonDraft', { id }))
-    await deleteDraftFromStorage(ids)
+    await deleteDraftFromStorage(id)
   },
   async loadDrafts(store) {
     const currentData = await getStorageData()