From f7562e00c193a27d3bb6e5dbbf7b707d090ae06e Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Wed, 8 Sep 2021 10:25:03 +0800
Subject: [PATCH] improve notification component, no double template

---
 src/components/NotificationDialog.vue     |  2 +-
 src/components/notifications/Telegram.vue | 62 +++++++++++------------
 2 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index 8a05d66ef..ebc8eec35 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -37,7 +37,7 @@
                             <input id="name" v-model="notification.name" type="text" class="form-control" required>
                         </div>
 
-                        <Telegram></Telegram>
+                        <Telegram v-if="notification.type === 'telegram'"></Telegram>
 
                         <!-- TODO: Convert all into vue components, but not an easy task.  -->
 
diff --git a/src/components/notifications/Telegram.vue b/src/components/notifications/Telegram.vue
index 537b7fd34..9be1e004f 100644
--- a/src/components/notifications/Telegram.vue
+++ b/src/components/notifications/Telegram.vue
@@ -1,42 +1,40 @@
 <template>
-    <template v-if="$parent.notification.type === name">
-        <div class="mb-3">
-            <label for="telegram-bot-token" class="form-label">Bot Token</label>
-            <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
-            <div class="form-text">
-                You can get a token from <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.
-            </div>
+    <div class="mb-3">
+        <label for="telegram-bot-token" class="form-label">Bot Token</label>
+        <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <div class="form-text">
+            You can get a token from <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="telegram-chat-id" class="form-label">Chat ID</label>
+
+        <div class="input-group mb-3">
+            <input id="telegram-chat-id" v-model="$parent.notification.telegramChatID" type="text" class="form-control" required>
+            <button v-if="$parent.notification.telegramBotToken" class="btn btn-outline-secondary" type="button" @click="autoGetTelegramChatID">
+                {{ $t("Auto Get") }}
+            </button>
         </div>
 
-        <div class="mb-3">
-            <label for="telegram-chat-id" class="form-label">Chat ID</label>
+        <div class="form-text">
+            Support Direct Chat / Group / Channel's Chat ID
 
-            <div class="input-group mb-3">
-                <input id="telegram-chat-id" v-model="$parent.notification.telegramChatID" type="text" class="form-control" required>
-                <button v-if="$parent.notification.telegramBotToken" class="btn btn-outline-secondary" type="button" @click="autoGetTelegramChatID">
-                    {{ $t("Auto Get") }}
-                </button>
-            </div>
+            <p style="margin-top: 8px;">
+                You can get your chat id by sending message to the bot and go to this url to view the chat_id:
+            </p>
 
-            <div class="form-text">
-                Support Direct Chat / Group / Channel's Chat ID
+            <p style="margin-top: 8px;">
+                <template v-if="$parent.notification.telegramBotToken">
+                    <a :href="telegramGetUpdatesURL" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL }}</a>
+                </template>
 
-                <p style="margin-top: 8px;">
-                    You can get your chat id by sending message to the bot and go to this url to view the chat_id:
-                </p>
-
-                <p style="margin-top: 8px;">
-                    <template v-if="$parent.notification.telegramBotToken">
-                        <a :href="telegramGetUpdatesURL" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL }}</a>
-                    </template>
-
-                    <template v-else>
-                        {{ telegramGetUpdatesURL }}
-                    </template>
-                </p>
-            </div>
+                <template v-else>
+                    {{ telegramGetUpdatesURL }}
+                </template>
+            </p>
         </div>
-    </template>
+    </div>
 </template>
 
 <script>