feat: AccountForm as dialog
This commit is contained in:
parent
5b9d64128b
commit
67b3888f8c
|
|
@ -3,19 +3,14 @@ import { reactive, ref } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const stateStore = useStateStore();
|
||||
|
||||
const newAccountForm = reactive({
|
||||
active: true,
|
||||
|
|
@ -34,89 +29,77 @@ const redirectToAccountBasicData = (_, { id }) => {
|
|||
@on-fetch="(data) => (rolesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#searchbar">
|
||||
<VnSearchbar
|
||||
data-key="AccountList"
|
||||
url="VnUsers/preview"
|
||||
:label="t('account.search')"
|
||||
:info="t('account.searchInfo')"
|
||||
custom-route-redirect-name="AccountList"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
<QPage>
|
||||
<VnSubToolbar />
|
||||
<FormModel
|
||||
url-create="VnUsers"
|
||||
model="users"
|
||||
:form-initial-data="newAccountForm"
|
||||
@on-data-saved="redirectToAccountBasicData"
|
||||
>
|
||||
<template #form="{ 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>
|
||||
</template>
|
||||
</FormModel>
|
||||
</QPage>
|
||||
|
||||
<FormModelPopup
|
||||
:title="t('account.card.newUser')"
|
||||
url-create="VnUsers"
|
||||
model="users"
|
||||
:form-initial-data="newAccountForm"
|
||||
@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>
|
||||
</template>
|
||||
</FormModelPopup>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
|
|
@ -9,18 +9,19 @@ import VnLv from 'src/components/ui/VnLv.vue';
|
|||
import CardList from 'src/components/ui/CardList.vue';
|
||||
import AccountSummary from './Card/AccountSummary.vue';
|
||||
import AccountFilter from './AccountFilter.vue';
|
||||
import AccountCreate from './AccountCreate.vue';
|
||||
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useRole } from 'src/composables/useRole';
|
||||
import { QDialog } from 'quasar';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const roleState = useRole();
|
||||
|
||||
const isItManagement = computed(() => roleState.hasAny(['itManagement']));
|
||||
const accountCreateDialogRef = ref(null);
|
||||
const showNewUserBtn = computed(() => useRole().hasAny(['itManagement']));
|
||||
|
||||
const filter = {
|
||||
fields: ['id', 'nickname', 'name', 'role'],
|
||||
|
|
@ -54,7 +55,7 @@ const navigate = (event, id) => {
|
|||
router.push({ path: `/account/${id}` });
|
||||
};
|
||||
|
||||
const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
|
||||
const openCreateModal = () => accountCreateDialogRef.value.show();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -126,8 +127,15 @@ const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
|
|||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<QPageSticky :offset="[20, 20]">
|
||||
<QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
|
||||
<QDialog
|
||||
ref="accountCreateDialogRef"
|
||||
transition-hide="scale"
|
||||
transition-show="scale"
|
||||
>
|
||||
<AccountCreate />
|
||||
</QDialog>
|
||||
<QPageSticky :offset="[20, 20]" v-if="showNewUserBtn">
|
||||
<QBtn @click="openCreateModal" color="primary" fab icon="add" />
|
||||
<QTooltip class="text-no-wrap">
|
||||
{{ t('account.card.newUser') }}
|
||||
</QTooltip>
|
||||
|
|
|
|||
Loading…
Reference in New Issue