feat: implement save mechanisim

Signed-off-by: Sebastian <krupinski01@gmail.com>

src/components/MessageComposer.vue

@@ -50,6 +50,8 @@ const showCc = ref(false)
 const showBcc = ref(false)
 const applyingDraftToEditor = ref(false)
 const showDocumentSelector = ref(false)
+const showCloseDialog = ref(false)
+const closeAction = ref<'save' | 'discard' | null>(null)
 const documentSelector = computed(() => documentsSelectorComponent())
 
 const sender = computed({
@@ -160,9 +162,32 @@ onBeforeUnmount(() => {
 })
 
 // Handlers
-const handleClose = async () => {
-  await compositionStore.closeDraft()
-  emit('close')
+const handleClose = () => {
+  showCloseDialog.value = true
+}
+
+const handleSave = async () => {
+  closeAction.value = 'save'
+  try {
+    if (await compositionStore.saveDraft()) {
+      showCloseDialog.value = false
+      emit('close')
+    }
+  } finally {
+    closeAction.value = null
+  }
+}
+
+const handleDiscard = async () => {
+  closeAction.value = 'discard'
+  try {
+    if (await compositionStore.discardDraft()) {
+      showCloseDialog.value = false
+      emit('close')
+    }
+  } finally {
+    closeAction.value = null
+  }
 }
 
 const handleSend = async () => {
@@ -233,7 +258,9 @@ const isActive = (name: string, attrs?: any) => {
       :status="stageStatus"
       :can-send="canSend"
       :sending="sending"
+      :saving="saving"
       @close="handleClose"
+      @save="handleSave"
       @send="handleSend"
     />
 
@@ -294,6 +321,38 @@ const isActive = (name: string, attrs?: any) => {
       :selectable="['entity']"
       @select="handleDocumentsSelected"
     />
+
+    <v-dialog v-model="showCloseDialog" max-width="480" persistent>
+      <v-card>
+        <v-card-title>Save this draft?</v-card-title>
+        <v-card-text>
+          Save the draft to your mail server, or discard it permanently.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn :disabled="closeAction !== null" @click="showCloseDialog = false">
+            Cancel
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="text"
+            :loading="closeAction === 'discard'"
+            :disabled="closeAction !== null || saving"
+            @click="handleDiscard"
+          >
+            Discard
+          </v-btn>
+          <v-btn
+            color="primary"
+            :loading="closeAction === 'save'"
+            :disabled="closeAction !== null || saving"
+            @click="handleSave"
+          >
+            Save and close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 

src/components/composer/ComposerToolbar.vue

@@ -6,12 +6,14 @@ interface Props {
   status: string
   canSend: boolean
   sending: boolean
+  saving: boolean
 }
 
 defineProps<Props>()
 
 defineEmits<{
   close: []
+  save: []
   send: []
 }>()
 </script>
@@ -37,9 +39,20 @@ defineEmits<{
       {{ status }}
     </span>
 
+    <v-btn
+      class="mr-2"
+      variant="text"
+      :loading="saving"
+      :disabled="sending"
+      prepend-icon="mdi-content-save-outline"
+      @click="$emit('save')"
+    >
+      Save
+    </v-btn>
+
     <v-btn
       color="primary"
-      :disabled="!canSend"
+      :disabled="!canSend || saving"
       :loading="sending"
       prepend-icon="mdi-send"
       @click="$emit('send')"