fix(notify): add explicit save button for balance threshold

Replace blur-based auto-save with an explicit Save button so users
know when their threshold is persisted. Shows success toast on save.
This commit is contained in:
erio
2026-04-12 20:45:58 +08:00
parent 422807514c
commit 61aa197b0b

View File

@@ -19,7 +19,7 @@
</div> </div>
<template v-if="notifyEnabled"> <template v-if="notifyEnabled">
<!-- Custom threshold --> <!-- Custom threshold with save button -->
<div> <div>
<label class="input-label"> <label class="input-label">
{{ t('profile.balanceNotify.threshold') }} {{ t('profile.balanceNotify.threshold') }}
@@ -34,8 +34,14 @@
step="0.01" step="0.01"
class="input flex-1" class="input flex-1"
:placeholder="systemDefaultThreshold > 0 ? `${t('profile.balanceNotify.systemDefault')} $${systemDefaultThreshold}` : t('profile.balanceNotify.thresholdPlaceholder')" :placeholder="systemDefaultThreshold > 0 ? `${t('profile.balanceNotify.systemDefault')} $${systemDefaultThreshold}` : t('profile.balanceNotify.thresholdPlaceholder')"
@blur="handleThresholdUpdate"
/> />
<button
@click="handleThresholdUpdate"
:disabled="savingThreshold"
class="btn btn-primary btn-sm whitespace-nowrap"
>
{{ savingThreshold ? t('common.saving') : t('common.save') }}
</button>
</div> </div>
</div> </div>
@@ -152,6 +158,7 @@ const customThreshold = ref<number | null>(props.threshold)
const extraEmails = ref<string[]>([...props.extraEmails]) const extraEmails = ref<string[]>([...props.extraEmails])
const pendingEmails = ref<PendingEmail[]>([]) const pendingEmails = ref<PendingEmail[]>([])
const newEmail = ref('') const newEmail = ref('')
const savingThreshold = ref(false)
watch(() => props.enabled, (val) => { notifyEnabled.value = val }) watch(() => props.enabled, (val) => { notifyEnabled.value = val })
watch(() => props.threshold, (val) => { customThreshold.value = val }) watch(() => props.threshold, (val) => { customThreshold.value = val })
@@ -174,12 +181,16 @@ const handleToggle = async () => {
} }
const handleThresholdUpdate = async () => { const handleThresholdUpdate = async () => {
savingThreshold.value = true
try { try {
const threshold = customThreshold.value && customThreshold.value > 0 ? customThreshold.value : 0 const threshold = customThreshold.value && customThreshold.value > 0 ? customThreshold.value : 0
const updated = await userAPI.updateProfile({ balance_notify_threshold: threshold }) const updated = await userAPI.updateProfile({ balance_notify_threshold: threshold })
authStore.user = updated authStore.user = updated
appStore.showSuccess(t('common.saved'))
} catch (err: unknown) { } catch (err: unknown) {
appStore.showError(extractApiErrorMessage(err, t('common.error'))) appStore.showError(extractApiErrorMessage(err, t('common.error')))
} finally {
savingThreshold.value = false
} }
} }