jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Use events on SingleSelect instead of watching the model value

Browse Source
This commit is contained in:
Johannes Zellner
2025-04-08 17:36:44 +02:00
parent 9957739dc4
commit cbe81a8f0a
2 changed files with 19 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/src/components/CloudronAccount.vue
View File

@@ -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>

40
dashboard/src/views/SettingsView.vue
View File

@@ -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>