fix(ui): add confirmation message for crud on custom dashboard

close kestra-io/kestra-ee#2468
kestra-io · Jan 24, 2025 · c795f37 · c795f37
1 parent a97448f
commit c795f37
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 26 deletions.
diff --git a/ui/src/components/dashboard/Dashboard.vue b/ui/src/components/dashboard/Dashboard.vue
@@ -499,7 +499,8 @@
 
     watch(
         route,
-        () => {
+        async () => {
+            await handleCustomUpdate(route.params?.id ? {id: route.params?.id} : undefined);
             fetchAll();
         },
         {immediate: true, deep: true},

diff --git a/ui/src/components/dashboard/components/DashboardCreate.vue b/ui/src/components/dashboard/components/DashboardCreate.vue
@@ -153,8 +153,11 @@ charts:
         methods: {
             async save(input) {
                 const dashboard = await this.$store.dispatch("dashboard/create", input);
+
+                this.$toast().saved(dashboard.title);
+
                 this.$store.dispatch("core/isUnsaved", false);
-                this.$router.push({name: "dashboards/update", params: {id: dashboard.id}});
+                this.$router.push({name: "home", params: {id: dashboard.id}});
             }
         },
         computed: {

diff --git a/ui/src/components/dashboard/components/DashboardEdit.vue b/ui/src/components/dashboard/components/DashboardEdit.vue
@@ -3,8 +3,8 @@
     <section class="full-container">
         <dashboard-editor
             @save="save"
-            v-if="dashboardSource"
-            :initial-source="dashboardSource"
+            v-if="item && item.sourceCode"
+            :initial-source="item.sourceCode"
         />
     </section>
 </template>
@@ -22,30 +22,34 @@
         },
         methods: {
             async save(input) {
-                await this.$store.dispatch("dashboard/update", {
+                const response = await this.$store.dispatch("dashboard/update", {
                     id: this.$route.params.id,
                     source: input,
                 });
+
+                this.$toast().saved(response.title);
+
                 this.$store.dispatch("core/isUnsaved", false);
             },
         },
         data() {
             return {
-                dashboardSource: undefined,
+                item: undefined,
             };
         },
         beforeMount() {
             this.$store
                 .dispatch("dashboard/load", this.$route.params.id)
                 .then((dashboard) => {
-                    this.dashboardSource = dashboard.sourceCode;
+                    this.item = dashboard;
                 });
         },
         computed: {
             routeInfo() {
                 const id = this.$route.params.id;
+
                 return {
-                    title: id,
+                    title:  this.item?.title || id,
                     breadcrumb: [
                         {
                             label: this.$t("custom_dashboard"),

diff --git a/ui/src/components/filter/segments/Dashboards.vue b/ui/src/components/filter/segments/Dashboards.vue
@@ -47,7 +47,7 @@
 
                             <div class="col-auto">
                                 <DeleteOutline
-                                    @click.stop="remove(dashboard.id)"
+                                    @click.stop="remove(dashboard)"
                                 />
                             </div>
                         </div>
@@ -65,28 +65,26 @@
 </template>
 
 <script setup lang="ts">
-    import {onBeforeMount, ref, computed} from "vue";
-
+    import {onBeforeMount, ref, computed, getCurrentInstance} from "vue";
     import KestraIcon from "../../Kicon.vue";
-
-    import {
-        ViewDashboardEdit,
-        Plus,
-        DeleteOutline,
-        Magnify,
-    } from "../utils/icons";
-
+    import {ViewDashboardEdit, Plus, DeleteOutline, Magnify,} from "../utils/icons";
     import {useI18n} from "vue-i18n";
-    const {t} = useI18n({useScope: "global"});
-
     import {useStore} from "vuex";
-    const store = useStore();
+    import {useRouter} from "vue-router";
 
+    const {t} = useI18n({useScope: "global"});
+    const store = useStore();
+    const router = useRouter();
     const emits = defineEmits(["dashboard"]);
-
-    const remove = (id: string) => {
-        store.dispatch("dashboard/delete", id).then(() => {
-            dashboards.value = dashboards.value.filter((d) => d.id !== id);
+    const toast = getCurrentInstance().appContext.config.globalProperties.$toast();
+
+    const remove = (dashboard: any) => {
+        toast.confirm(t("delete confirm", {name: dashboard.title}), () => {
+            store.dispatch("dashboard/delete", dashboard.id).then((item) => {
+                dashboards.value = dashboards.value.filter((d) => d.id !== dashboard.id);
+                toast.deleted(item.title);
+                router.push({name: "home"});
+            });
         });
     };
 
@@ -99,6 +97,7 @@
                 d.title.toLowerCase().includes(search.value.toLowerCase()),
         );
     });
+
     onBeforeMount(() => {
         store
             .dispatch("dashboard/list", {})