refactor: simplify code
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
parent
cd8e99e1df
commit
ae75908e46
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue