From cbe81a8f0a35d8a1b89d416fb9d30e7ba9db786c Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 8 Apr 2025 17:36:44 +0200
Subject: [PATCH] Use events on SingleSelect instead of watching the model
 value

---
 dashboard/src/components/CloudronAccount.vue |  8 +++-
 dashboard/src/views/SettingsView.vue         | 40 +++++++-------------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/dashboard/src/components/CloudronAccount.vue b/dashboard/src/components/CloudronAccount.vue
index 215a17239..9f9fb9afc 100644
--- a/dashboard/src/components/CloudronAccount.vue
+++ b/dashboard/src/components/CloudronAccount.vue
@@ -90,8 +90,12 @@ onMounted(async () => {
 
         <div v-else>
           <SettingsItem>
-            <div style="display: flex; align-items: center;">{{ $t('settings.appstoreAccount.description') }}</div>
-            <Button @click="onOpenRegistrationDialog()">{{ $t('settings.appstoreAccount.setupAction') }}</Button>
+            <div style="display: flex; align-items: center;">
+              {{ $t('settings.appstoreAccount.description') }}
+            </div>
+            <div style="display: flex; align-items: center;">
+              <Button @click="onOpenRegistrationDialog()">{{ $t('settings.appstoreAccount.setupAction') }}</Button>
+            </div>
           </SettingsItem>
         </div>
       </div>
diff --git a/dashboard/src/views/SettingsView.vue b/dashboard/src/views/SettingsView.vue
index 10eccb890..bfbd64253 100644
--- a/dashboard/src/views/SettingsView.vue
+++ b/dashboard/src/views/SettingsView.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted } from 'vue';
 import { SingleSelect } from 'pankow';
 import moment from 'moment-timezone';
 import SettingsItem from '../components/SettingsItem.vue';
@@ -21,38 +21,24 @@ const allTimezones = moment.tz.names().map(t => { return { id: t }; });
 const timeZone = ref('');
 const currentTimeZone = ref('');
 
-watch(timeZone, async (newTimeZone, oldTimeZone) => {
-  if (!oldTimeZone) return;
+async function onTimeZoneChange(value) {
+  const [error] = await cloudronModel.setTimeZone(value);
+  if (error) return console.error(error);
 
-  const [error] = await cloudronModel.setTimeZone(newTimeZone);
-  if (error) {
-    console.error(error);
-    window.pankow.notify({ text: 'Failed to set timezone. Check logs', type: 'danger' });
-    timeZone.value = currentTimeZone.value;
-  } else {
-    currentTimeZone.value = newTimeZone;
-    window.pankow.notify({ text: 'Timezone changed', type: 'success' });
-  }
-});
+  currentTimeZone.value = value;
+}
 
 // Language
 const allLanguages = ref([]);
 const language = ref('');
 const currentLanguage = ref('');
 
-watch(language, async (newLanguage, oldLanguage) => {
-  if (!oldLanguage) return;
+async function onLanguageChange(value) {
+  const [error] = await cloudronModel.setLanguage(value);
+  if (error) return console.error(error);
 
-  const [error] = await cloudronModel.setLanguage(newLanguage);
-  if (error) {
-    console.error(error);
-    window.pankow.notify({ text: 'Failed to set language. Check logs', type: 'danger' });
-    language.value = currentLanguage.value;
-  } else {
-    currentLanguage.value = newLanguage;
-    window.pankow.notify({ text: 'Language changed', type: 'success' });
-  }
-});
+  currentLanguage.value = value;
+}
 
 onMounted(async () => {
   let [error, result] = await cloudronModel.getTimeZone();
@@ -89,7 +75,7 @@ onMounted(async () => {
           <div v-html="$t('settings.timezone.description', { timeZone })"></div>
         </FormGroup>
         <div style="display: flex; gap: 6px; align-items: center;">
-          <SingleSelect style="min-width: 160px" v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
+          <SingleSelect style="min-width: 160px" v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" @select="onTimeZoneChange" />
         </div>
       </SettingsItem>
 
@@ -99,7 +85,7 @@ onMounted(async () => {
           <div>{{ $t('settings.language.description') }}</div>
         </FormGroup>
         <div style="display: flex; gap: 6px; align-items: center;">
-          <SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" />
+          <SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" @select="onLanguageChange" />
         </div>
       </SettingsItem>
     </Section>