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 FormModelPopup from 'components/FormModelPopup.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue';
@ -29,7 +28,6 @@ const redirectToAccountBasicData = (_, { id }) => {
@on-fetch="(data) => (rolesOptions = data)"
auto-load
/>
<FormModelPopup
:title="t('account.card.newUser')"
url-create="VnUsers"
@ -38,68 +36,46 @@ const redirectToAccountBasicData = (_, { id }) => {
@on-data-saved="redirectToAccountBasicData"
>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
v-model="data.name"
:label="t('account.create.name')"
:rules="validate('VnUser.name')"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
v-model="data.nickname"
:label="t('account.create.nickname')"
:rules="validate('VnUser.nickname')"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
v-model="data.email"
:label="t('account.create.email')"
type="email"
:rules="validate('VnUser.email')"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('account.create.role')"
v-model="data.roleFk"
:options="rolesOptions"
option-value="id"
option-label="name"
map-options
hide-selected
:rules="validate('VnUser.roleFk')"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
v-model="data.password"
:label="t('account.create.password')"
type="password"
:rules="validate('VnUser.password')"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox
:label="t('account.create.active')"
v-model="data.active"
:toggle-indeterminate="false"
:rules="validate('VnUser.active')"
/>
</div>
</VnRow>
<div class="column q-gutter-sm">
<VnInput
v-model="data.name"
:label="t('account.create.name')"
:rules="validate('VnUser.name')"
/>
<VnInput
v-model="data.nickname"
:label="t('account.create.nickname')"
:rules="validate('VnUser.nickname')"
/>
<VnInput
v-model="data.email"
:label="t('account.create.email')"
type="email"
:rules="validate('VnUser.email')"
/>
<VnSelect
:label="t('account.create.role')"
v-model="data.roleFk"
:options="rolesOptions"
option-value="id"
option-label="name"
map-options
hide-selected
:rules="validate('VnUser.roleFk')"
/>
<VnInput
v-model="data.password"
:label="t('account.create.password')"
type="password"
:rules="validate('VnUser.password')"
/>
<QCheckbox
:label="t('account.create.active')"
v-model="data.active"
:toggle-indeterminate="false"
:rules="validate('VnUser.active')"
/>
</div>
</template>
</FormModelPopup>
</template>

View File

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

View File

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