refactor: simplify code
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Alex Moreno 2024-06-18 10:53:21 +02:00
parent cd8e99e1df
commit ae75908e46
3 changed files with 78 additions and 133 deletions

View File

@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import FormModelPopup from 'components/FormModelPopup.vue'; import FormModelPopup from 'components/FormModelPopup.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
@ -29,7 +28,6 @@ const redirectToAccountBasicData = (_, { id }) => {
@on-fetch="(data) => (rolesOptions = data)" @on-fetch="(data) => (rolesOptions = data)"
auto-load auto-load
/> />
<FormModelPopup <FormModelPopup
:title="t('account.card.newUser')" :title="t('account.card.newUser')"
url-create="VnUsers" url-create="VnUsers"
@ -38,36 +36,23 @@ const redirectToAccountBasicData = (_, { id }) => {
@on-data-saved="redirectToAccountBasicData" @on-data-saved="redirectToAccountBasicData"
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md"> <div class="column q-gutter-sm">
<div class="col">
<VnInput <VnInput
v-model="data.name" v-model="data.name"
:label="t('account.create.name')" :label="t('account.create.name')"
:rules="validate('VnUser.name')" :rules="validate('VnUser.name')"
/> />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput <VnInput
v-model="data.nickname" v-model="data.nickname"
:label="t('account.create.nickname')" :label="t('account.create.nickname')"
:rules="validate('VnUser.nickname')" :rules="validate('VnUser.nickname')"
/> />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput <VnInput
v-model="data.email" v-model="data.email"
:label="t('account.create.email')" :label="t('account.create.email')"
type="email" type="email"
:rules="validate('VnUser.email')" :rules="validate('VnUser.email')"
/> />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect <VnSelect
:label="t('account.create.role')" :label="t('account.create.role')"
v-model="data.roleFk" v-model="data.roleFk"
@ -78,20 +63,12 @@ const redirectToAccountBasicData = (_, { id }) => {
hide-selected hide-selected
:rules="validate('VnUser.roleFk')" :rules="validate('VnUser.roleFk')"
/> />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput <VnInput
v-model="data.password" v-model="data.password"
:label="t('account.create.password')" :label="t('account.create.password')"
type="password" type="password"
:rules="validate('VnUser.password')" :rules="validate('VnUser.password')"
/> />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox <QCheckbox
:label="t('account.create.active')" :label="t('account.create.active')"
v-model="data.active" v-model="data.active"
@ -99,7 +76,6 @@ const redirectToAccountBasicData = (_, { id }) => {
:rules="validate('VnUser.active')" :rules="validate('VnUser.active')"
/> />
</div> </div>
</VnRow>
</template> </template>
</FormModelPopup> </FormModelPopup>
</template> </template>

View File

@ -33,30 +33,16 @@ watch(
@on-data-saved="formModelRef.fetch()" @on-data-saved="formModelRef.fetch()"
> >
<template #form="{ data }"> <template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md"> <div class="q-gutter-y-sm">
<div class="col">
<VnInput v-model="data.name" :label="t('account.card.nickname')" /> <VnInput v-model="data.name" :label="t('account.card.nickname')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput v-model="data.nickname" :label="t('account.card.alias')" /> <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput v-model="data.email" :label="t('account.card.email')" /> <VnInput v-model="data.email" :label="t('account.card.email')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect <VnSelect
v-model="data.lang" v-model="data.lang"
:options="['es', 'en']" :options="['es', 'en']"
:label="t('account.card.lang')" :label="t('account.card.lang')"
/> />
</div> </div>
</VnRow>
</template> </template>
</FormModel> </FormModel>
</template> </template>

View File

@ -1,24 +1,17 @@
<script setup> <script setup>
import { ref, watch } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const loading = ref(false);
const rolesOptions = ref([]); const rolesOptions = ref([]);
const formModelRef = ref(null); const formModelRef = ref();
watch(
() => route.params.id,
() => formModelRef.value.reset()
);
</script> </script>
<template> <template>
<FetchData <FetchData
@ -27,10 +20,7 @@ watch(
auto-load auto-load
@on-fetch="(data) => (rolesOptions = data)" @on-fetch="(data) => (rolesOptions = data)"
/> />
<div class="flex justify-center">
<QSpinner v-if="loading" color="primary" size="md" />
<FormModel <FormModel
v-else
ref="formModelRef" ref="formModelRef"
model="AccountPrivileges" model="AccountPrivileges"
:url="`VnUsers/${route.params.id}`" :url="`VnUsers/${route.params.id}`"
@ -39,16 +29,11 @@ watch(
@on-data-saved="formModelRef.fetch()" @on-data-saved="formModelRef.fetch()"
> >
<template #form="{ data }"> <template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md"> <div class="q-gutter-y-sm">
<div class="col">
<QCheckbox <QCheckbox
v-model="data.hasGrant" v-model="data.hasGrant"
:label="t('account.card.privileges.delegate')" :label="t('account.card.privileges.delegate')"
/> />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect <VnSelect
:label="t('account.card.role')" :label="t('account.card.role')"
v-model="data.roleFk" v-model="data.roleFk"
@ -59,8 +44,6 @@ watch(
:required="true" :required="true"
/> />
</div> </div>
</VnRow>
</template> </template>
</FormModel> </FormModel>
</div>
</template> </template>