Add save action without closing the modal

client/components/modals/podcast/tabs/EpisodeDetails.vue

@@ -24,7 +24,12 @@
       </div>
     </div>
     <div class="flex items-center justify-end pt-4">
-      <ui-btn @click="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+      <!-- desktop -->
+      <ui-btn @click="submit" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
+      <ui-btn @click="saveAndClose" class="mx-2 hidden md:block">{{ $strings.ButtonSaveAndClose }}</ui-btn>
+
+      <!-- mobile -->
+      <ui-btn @click="saveAndClose" class="mx-2 md:hidden">{{ $strings.ButtonSave }}</ui-btn>
     </div>
     <div v-if="enclosureUrl" class="py-4">
       <p class="text-xs text-gray-300 font-semibold">Episode URL from RSS feed</p>
@@ -125,26 +130,44 @@ export default {
       }
       return updatePayload
     },
-    submit() {
+    async saveAndClose() {
-      const payload = this.getUpdatePayload()
+      const wasUpdated = await this.submit()
-      if (!Object.keys(payload).length) {
+      if (wasUpdated !== null) this.$emit('close')
-        return this.$toast.info('No updates were made')
+    },
+    async submit() {
+      if (this.isProcessing) {
+        return null
       }
 
+      const updatedDetails = this.getUpdatePayload()
+      if (!Object.keys(updatedDetails).length) {
+        this.$toast.info('No changes were made')
+        return false
+      }
+      return this.updateDetails(updatedDetails)
+    },
+    async updateDetails(updatedDetails) {
       this.isProcessing = true
-      this.$axios
+      const updateResult = await this.$axios
-        .$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, payload)
+          .$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, updatedDetails)
-        .then(() => {
+          .catch((error) => {
-          this.isProcessing = false
+            const errorMsg = error.response && error.response.data ? error.response.data : 'Failed to update episode';
+            console.error('Failed update episode', error)
+            this.isProcessing = false
+            this.$toast.error(errorMsg)
+            return false
+          });
+
+      this.isProcessing = false
+      if (updateResult) {
+        if (updateResult) {
           this.$toast.success('Podcast episode updated')
-          this.$emit('close')
+          return true
-        })
+        } else {
-        .catch((error) => {
+          this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
-          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to update episode'
+        }
-          console.error('Failed update episode', error)
+      }
-          this.isProcessing = false
+      return false
-          this.$toast.error(errorMsg)
-        })
     }
   },
   mounted() {}