From 0f2059cde00e87d0a88ca052a4741b06c7a16294 Mon Sep 17 00:00:00 2001
From: zsxeee <zsxeee@qq.com>
Date: Thu, 30 Sep 2021 19:48:24 +0800
Subject: [PATCH] Use named slot translation when has multi-slot

---
 src/components/NotificationDialog.vue    | 52 ++++++++++++------------
 src/components/notifications/Webhook.vue |  6 ++-
 src/languages/en.js                      |  4 +-
 3 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index 0c2035def..659f57267 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -68,11 +68,11 @@
 </template>
 
 <script lang="ts">
-import { Modal } from "bootstrap"
-import { ucfirst } from "../util.ts"
+import { Modal } from "bootstrap";
+import { ucfirst } from "../util.ts";
 
 import Confirm from "./Confirm.vue";
-import NotificationFormList from "./notifications"
+import NotificationFormList from "./notifications";
 
 export default {
     components: {
@@ -93,15 +93,15 @@ export default {
                 isDefault: false,
                 // Do not set default value here, please scroll to show()
             }
-        }
+        };
     },
 
     computed: {
         currentForm() {
             if (!this.notification.type) {
-                return null
+                return null;
             }
-            return NotificationFormList[this.notification.type]
+            return NotificationFormList[this.notification.type];
         }
     },
 
@@ -120,13 +120,13 @@ export default {
         },
     },
     mounted() {
-        this.modal = new Modal(this.$refs.modal)
+        this.modal = new Modal(this.$refs.modal);
     },
     methods: {
 
         deleteConfirm() {
             this.modal.hide();
-            this.$refs.confirmDelete.show()
+            this.$refs.confirmDelete.show();
         },
 
         show(notificationID) {
@@ -145,19 +145,19 @@ export default {
                     name: "",
                     type: null,
                     isDefault: false,
-                }
+                };
 
                 // Set Default value here
                 this.notification.type = this.notificationTypes[0];
             }
 
-            this.modal.show()
+            this.modal.show();
         },
 
         submit() {
             this.processing = true;
             this.$root.getSocket().emit("addNotification", this.notification, this.id, (res) => {
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
                 this.processing = false;
 
                 if (res.ok) {
@@ -169,45 +169,45 @@ export default {
                     }
 
                 }
-            })
+            });
         },
 
         test() {
             this.processing = true;
             this.$root.getSocket().emit("testNotification", this.notification, (res) => {
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
                 this.processing = false;
-            })
+            });
         },
 
         deleteNotification() {
             this.processing = true;
             this.$root.getSocket().emit("deleteNotification", this.id, (res) => {
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
                 this.processing = false;
 
                 if (res.ok) {
-                    this.modal.hide()
+                    this.modal.hide();
                 }
-            })
+            });
         },
         /**
          * @param {keyof NotificationFormList} notificationKey
          * @return {string}
          */
         getUniqueDefaultName(notificationKey) {
-            let index = 1
-            let name = ""
+            let index = 1;
+            let name = "";
             do {
-                name = this.$t("defaultNotificationName", [
-                    this.$t(notificationKey).replace(/\(.+\)/, "").trim(),
-                    index++
-                ]);
-            } while (this.$root.notificationList.find(it => it.name === name))
-            return name
+                name = this.$t("defaultNotificationName", {
+                    notification: this.$t(notificationKey).replace(/\(.+\)/, "").trim(),
+                    number: index++
+                });
+            } while (this.$root.notificationList.find(it => it.name === name));
+            return name;
         }
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/notifications/Webhook.vue b/src/components/notifications/Webhook.vue
index c7031f748..3cfc940e9 100644
--- a/src/components/notifications/Webhook.vue
+++ b/src/components/notifications/Webhook.vue
@@ -18,8 +18,10 @@
         <div class="form-text">
             <p>"application/json" is good for any modern http servers such as express.js</p>
             <i18n-t tag="p" keypath="webhookFormDataDesc">
-                "multipart/form-data"
-                <strong>json_decode($_POST['data'])</strong>
+                <template #multipart>"multipart/form-data"</template>
+                <template #decodeFunction>
+                    <strong>json_decode($_POST['data'])</strong>
+                </template>
             </i18n-t>
         </div>
     </div>
diff --git a/src/languages/en.js b/src/languages/en.js
index b4b7769de..4cefa73c1 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -179,7 +179,7 @@ export default {
     "Edit Status Page": "Edit Status Page",
     "Go to Dashboard": "Go to Dashboard",
     // Start notification form
-    defaultNotificationName: "My {0} Alert ({1})",
+    defaultNotificationName: "My {notification} Alert ({number})",
     here: "here",
     "Required": "Required",
     "telegram": "Telegram",
@@ -194,7 +194,7 @@ export default {
     "Post URL": "Post URL",
     "Content Type": "Content Type",
     webhookJsonDesc: "{0} is good for any modern http servers such as express.js",
-    webhookFormDataDesc: "{0} is good for PHP, you just need to parse the json by {1}",
+    webhookFormDataDesc: "{multipart} is good for PHP, you just need to parse the json by {decodeFunction}",
     "smtp": "Email (SMTP)",
     secureOptionNone: "None / STARTTLS (25, 587)",
     secureOptionTLS: "TLS (465)",