salix-front/src/pages/Account/Card/AccountBasicData.vue

60 lines
1.9 KiB
Vue

<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
import FormModel from 'components/FormModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import { ref, watch } from 'vue';
const route = useRoute();
const { t } = useI18n();
const formModelRef = ref(null);
const accountFilter = {
where: { id: route.params.id },
fields: ['id', 'email', 'nickname', 'name', 'accountStateFk', 'packages', 'pickup'],
include: [],
};
watch(
() => route.params.id,
() => formModelRef.value.reset()
);
</script>
<template>
<FormModel
ref="formModelRef"
url="VnUsers/preview"
:url-update="`VnUsers/${route.params.id}/update-user`"
:filter="accountFilter"
model="Accounts"
auto-load
@on-data-saved="formModelRef.fetch()"
>
<template #form="{ data }">
<div class="q-gutter-y-sm">
<VnInput v-model="data.name" :label="t('account.card.nickname')" />
<VnInput v-model="data.nickname" :label="t('account.card.alias')" />
<VnInput v-model="data.email" :label="t('globals.params.email')" />
<VnSelect
url="Languages"
v-model="data.lang"
:label="t('account.card.lang')"
option-value="code"
option-label="code"
/>
<VnSelectEnum
schema="account"
table="user"
column="twoFactor"
v-model="data.twoFactor"
:label="t('account.card.twoFactor')"
option-value="code"
option-label="code"
/>
</div>
</template>
</FormModel>
</template>