138 lines
4.4 KiB
Vue
138 lines
4.4 KiB
Vue
<script setup>
|
|
import { ref, onMounted, watch, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import VnRow from 'components/ui/VnRow.vue';
|
|
|
|
import axios from 'axios';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import useNotify from 'src/composables/useNotify.js';
|
|
import useHasAccount from 'src/composables/useHasAccount';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const stateStore = useStateStore();
|
|
const { notify } = useNotify();
|
|
|
|
const initialData = ref({});
|
|
const formData = ref({
|
|
forwardTo: null,
|
|
account: null,
|
|
});
|
|
|
|
const hasAccount = ref(false);
|
|
const hasData = ref(false);
|
|
const loading = ref(false);
|
|
const hasDataChanged = computed(
|
|
() =>
|
|
formData.value.forwardTo !== initialData.value.forwardTo ||
|
|
initialData.value.hasData !== hasData.value
|
|
);
|
|
|
|
const fetchMailForwards = async () => {
|
|
const response = await axios.get(`MailForwards/${route.params.id}`);
|
|
return response.data;
|
|
};
|
|
|
|
const deleteMailForward = async () => {
|
|
await axios.delete(`MailForwards/${route.params.id}`);
|
|
formData.value.forwardTo = null;
|
|
initialData.value.forwardTo = null;
|
|
initialData.value.hasData = hasData.value;
|
|
notify(t('globals.dataSaved'), 'positive');
|
|
};
|
|
|
|
const updateMailForward = async () => {
|
|
await axios.patch('MailForwards', formData.value);
|
|
initialData.value = { ...formData.value };
|
|
initialData.value.hasData = hasData.value;
|
|
};
|
|
|
|
const onSubmit = async () => {
|
|
if (hasData.value) await updateMailForward();
|
|
else await deleteMailForward();
|
|
};
|
|
|
|
const setInitialData = async () => {
|
|
loading.value = true;
|
|
initialData.value.account = route.params.id;
|
|
formData.value.account = route.params.id;
|
|
hasAccount.value = await useHasAccount(route.params.id);
|
|
if (!hasAccount.value) {
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
|
|
const result = await fetchMailForwards(route.params.id);
|
|
const forwardTo = result ? result.forwardTo : null;
|
|
formData.value.forwardTo = forwardTo;
|
|
initialData.value.forwardTo = forwardTo;
|
|
|
|
initialData.value.hasData = hasAccount.value && !!forwardTo;
|
|
hasData.value = hasAccount.value && !!forwardTo;
|
|
loading.value = false;
|
|
};
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
() => setInitialData()
|
|
);
|
|
|
|
onMounted(async () => await setInitialData());
|
|
</script>
|
|
<template>
|
|
<div class="flex justify-center">
|
|
<QSpinner v-if="loading" color="primary" size="md" />
|
|
<QForm
|
|
v-else-if="hasAccount"
|
|
@submit="onSubmit()"
|
|
class="full-width"
|
|
style="max-width: 800px"
|
|
>
|
|
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
|
<div>
|
|
<QBtnGroup push class="q-gutter-x-sm">
|
|
<slot name="moreActions" />
|
|
<QBtn
|
|
color="primary"
|
|
icon="restart_alt"
|
|
flat
|
|
@click="reset()"
|
|
:label="t('globals.reset')"
|
|
/>
|
|
<QBtn
|
|
color="primary"
|
|
icon="save"
|
|
@click="onSubmit()"
|
|
:disable="!hasDataChanged"
|
|
:label="t('globals.save')"
|
|
/>
|
|
</QBtnGroup>
|
|
</div>
|
|
</Teleport>
|
|
<QCard class="q-pa-lg">
|
|
<VnRow class="row q-mb-md">
|
|
<QCheckbox
|
|
v-model="hasData"
|
|
:label="t('account.mailForwarding.enableMailForwarding')"
|
|
:toggle-indeterminate="false"
|
|
/>
|
|
</VnRow>
|
|
<VnRow v-if="hasData" class="row q-gutter-md q-mb-md">
|
|
<VnInput
|
|
v-model="formData.forwardTo"
|
|
:label="t('account.mailForwarding.forwardingMail')"
|
|
:info="t('account.mailForwarding.mailInputInfo')"
|
|
>
|
|
</VnInput>
|
|
</VnRow>
|
|
</QCard>
|
|
</QForm>
|
|
<h5 v-else class="text-center">
|
|
{{ t('account.mailForwarding.accountNotEnabled') }}
|
|
</h5>
|
|
</div>
|
|
</template>
|