From a97ef7cc34b2dc660b2aaa29e3d2e5113e5c01d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 19 Oct 2023 13:30:51 +0200
Subject: [PATCH] Adjust page icon delete implementation

---
 .../compose/src/views/Admin/Pages/Edit.vue    | 56 ++++++++++---------
 .../corteza-webapp-compose/notification.yaml  |  3 +-
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index c6d7491741..76cce8929a 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -735,20 +735,21 @@
       :title="$t('icon.configure')"
       size="lg"
       label-class="text-primary"
-      footer-class="d-flex justify-content-between"
+      footer-class="d-flex align-items-center"
       no-fade
     >
       <template #modal-footer>
         <c-input-confirm
-          :disabled="(attachments && !selectedAttachmentID) || processing"
+          v-if="attachments && selectedAttachmentID"
+          :disabled="(attachments && !selectedAttachmentID) || processingIcon"
           size="md"
           variant="danger"
-          class="py-1"
           @confirmed="deleteIcon"
         >
           {{ $t('icon.delete') }}
         </c-input-confirm>
-        <div>
+
+        <div class="ml-auto">
           <b-button
             variant="link"
             class="text-primary"
@@ -758,6 +759,7 @@
           </b-button>
           <b-button
             variant="primary"
+            class="ml-2"
             @click="saveIconModal"
           >
             {{ $t('general:label.saveAndClose') }}
@@ -810,7 +812,7 @@
           label-class="text-primary"
         >
           <div
-            v-if="processing"
+            v-if="processingIcon"
             class="d-flex align-items-center justify-content-center h-100"
           >
             <b-spinner />
@@ -938,6 +940,7 @@ export default {
   data () {
     return {
       processing: false,
+      processingIcon: false,
 
       page: new compose.Page(),
       initialPageState: new compose.Page(),
@@ -1266,7 +1269,7 @@ export default {
     },
 
     async fetchAttachments () {
-      this.processing = true
+      this.processingIcon = true
 
       return this.$ComposeAPI.iconList({ sort: 'id DESC' })
         .then(({ set: attachments = [] }) => {
@@ -1284,7 +1287,7 @@ export default {
         })
         .catch(this.toastErrorHandler(this.$t('notification:page.iconFetchFailed')))
         .finally(() => {
-          this.processing = false
+          this.processingIcon = false
         })
     },
 
@@ -1332,12 +1335,33 @@ export default {
       this.showIconModal = false
     },
 
+    deleteIcon () {
+      this.processingIcon = true
+
+      return this.$ComposeAPI.iconDelete({ iconID: this.selectedAttachmentID }).then(() => {
+        return this.fetchAttachments().then(() => {
+          this.setCurrentIcon()
+          this.toastSuccess(this.$t('notification:page.iconDeleteSuccess'))
+        })
+      }).finally(() => {
+        this.processingIcon = false
+      }).catch(this.toastErrorHandler(this.$t('notification:page.iconDeleteFailed')))
+    },
+
     closeIconModal () {
       this.linkUrl = this.icon.type === 'link' ? this.icon.src : ''
       this.setCurrentIcon()
       this.showIconModal = false
     },
 
+    setCurrentIcon () {
+      this.selectedAttachmentID = (this.attachments.find(a => a.url === this.icon.src) || {}).attachmentID
+
+      if (!this.selectedAttachmentID) {
+        this.icon = {}
+      }
+    },
+
     makeAttachmentUrl (src) {
       return `${this.$ComposeAPI.baseURL}${src}`
     },
@@ -1378,24 +1402,6 @@ export default {
         cancel()
       })
     },
-
-    deleteIcon () {
-      return this.$ComposeAPI.iconDelete({ iconID: this.selectedAttachmentID })
-        .then(() => {
-          this.fetchAttachments().then(() => {
-            this.setCurrentIcon()
-          })
-        })
-        .catch(this.toastErrorHandler(this.$t('notification:page.iconUndeleteFailed')))
-    },
-
-    setCurrentIcon () {
-      this.selectedAttachmentID = (this.attachments.find(a => a.url === this.icon.src) || {}).attachmentID
-
-      if (!this.selectedAttachmentID) {
-        this.icon = {}
-      }
-    },
   },
 }
 </script>
diff --git a/locale/en/corteza-webapp-compose/notification.yaml b/locale/en/corteza-webapp-compose/notification.yaml
index 29ed074675..39783af598 100644
--- a/locale/en/corteza-webapp-compose/notification.yaml
+++ b/locale/en/corteza-webapp-compose/notification.yaml
@@ -86,7 +86,8 @@ page:
   cloneFailed: Could not clone this page
   deleteFailed: Could not delete this page
   iconFetchFailed: Could not fetch list of icons
-  iconUndeleteFailed:  Could not delete selected icon
+  iconDeleteFailed:  Could not delete selected icon
+  iconDeleteSuccess: Icon deleted
   loadFailed: Could not load the page tree
   noPages: No pages found
   saveFailed: Could not save this page