verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 59 Releases Wiki Activity

feat: AccountForm as dialog

This commit is contained in:
Javier Segarra 2024-05-31 10:10:15 +02:00
parent 5b9d64128b
commit 67b3888f8c
2 changed files with 89 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/pages/Account/AccountCreate.vue
View File

@ -3,19 +3,14 @@ import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; 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 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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import { useStateStore } from 'stores/useStateStore';
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
const stateStore = useStateStore();
const newAccountForm = reactive({ const newAccountForm = reactive({
active: true, active: true,
@ -34,89 +29,77 @@ const redirectToAccountBasicData = (_, { id }) => {
@on-fetch="(data) => (rolesOptions = data)" @on-fetch="(data) => (rolesOptions = data)"
auto-load auto-load
/> />
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar"> <FormModelPopup
<VnSearchbar :title="t('account.card.newUser')"
data-key="AccountList" url-create="VnUsers"
url="VnUsers/preview" model="users"
:label="t('account.search')" :form-initial-data="newAccountForm"
:info="t('account.searchInfo')" @on-data-saved="redirectToAccountBasicData"
custom-route-redirect-name="AccountList" >
/> <template #form-inputs="{ data, validate }">
</Teleport> <VnRow class="row q-gutter-md q-mb-md">
</template> <div class="col">
<QPage> <VnInput
<VnSubToolbar /> v-model="data.name"
<FormModel :label="t('account.create.name')"
url-create="VnUsers" :rules="validate('VnUser.name')"
model="users" />
:form-initial-data="newAccountForm" </div>
@on-data-saved="redirectToAccountBasicData" </VnRow>
> <VnRow class="row q-gutter-md q-mb-md">
<template #form="{ data, validate }"> <div class="col">
<VnRow class="row q-gutter-md q-mb-md"> <VnInput
<div class="col"> v-model="data.nickname"
<VnInput :label="t('account.create.nickname')"
v-model="data.name" :rules="validate('VnUser.nickname')"
:label="t('account.create.name')" />
:rules="validate('VnUser.name')" </div>
/> </VnRow>
</div> <VnRow class="row q-gutter-md q-mb-md">
</VnRow> <div class="col">
<VnRow class="row q-gutter-md q-mb-md"> <VnInput
<div class="col"> v-model="data.email"
<VnInput :label="t('account.create.email')"
v-model="data.nickname" type="email"
:label="t('account.create.nickname')" :rules="validate('VnUser.email')"
:rules="validate('VnUser.nickname')" />
/> </div>
</div> </VnRow>
</VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnRow class="row q-gutter-md q-mb-md"> <div class="col">
<div class="col"> <VnSelect
<VnInput :label="t('account.create.role')"
v-model="data.email" v-model="data.roleFk"
:label="t('account.create.email')" :options="rolesOptions"
type="email" option-value="id"
:rules="validate('VnUser.email')" option-label="name"
/> map-options
</div> hide-selected
</VnRow> :rules="validate('VnUser.roleFk')"
<VnRow class="row q-gutter-md q-mb-md"> />
<div class="col"> </div>
<VnSelect </VnRow>
:label="t('account.create.role')" <VnRow class="row q-gutter-md q-mb-md">
v-model="data.roleFk" <div class="col">
:options="rolesOptions" <VnInput
option-value="id" v-model="data.password"
option-label="name" :label="t('account.create.password')"
map-options type="password"
hide-selected :rules="validate('VnUser.password')"
:rules="validate('VnUser.roleFk')" />
/> </div>
</div> </VnRow>
</VnRow> <VnRow class="row q-gutter-md q-mb-md">
<VnRow class="row q-gutter-md q-mb-md"> <div class="col">
<div class="col"> <QCheckbox
<VnInput :label="t('account.create.active')"
v-model="data.password" v-model="data.active"
:label="t('account.create.password')" :toggle-indeterminate="false"
type="password" :rules="validate('VnUser.active')"
:rules="validate('VnUser.password')" />
/> </div>
</div> </VnRow>
</VnRow> </template>
<VnRow class="row q-gutter-md q-mb-md"> </FormModelPopup>
<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>
</template> </template>

22
src/pages/Account/AccountList.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { computed } from 'vue'; import { computed, ref } from 'vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnSearchbar from 'components/ui/VnSearchbar.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 CardList from 'src/components/ui/CardList.vue';
import AccountSummary from './Card/AccountSummary.vue'; import AccountSummary from './Card/AccountSummary.vue';
import AccountFilter from './AccountFilter.vue'; import AccountFilter from './AccountFilter.vue';
import AccountCreate from './AccountCreate.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useRole } from 'src/composables/useRole'; import { useRole } from 'src/composables/useRole';
import { QDialog } from 'quasar';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const roleState = useRole(); const accountCreateDialogRef = ref(null);
const showNewUserBtn = computed(() => useRole().hasAny(['itManagement']));
const isItManagement = computed(() => roleState.hasAny(['itManagement']));
const filter = { const filter = {
fields: ['id', 'nickname', 'name', 'role'], fields: ['id', 'nickname', 'name', 'role'],
@ -54,7 +55,7 @@ const navigate = (event, id) => {
router.push({ path: `/account/${id}` }); router.push({ path: `/account/${id}` });
}; };
const redirectToItemCreate = () => router.push({ name: 'AccountCreate' }); const openCreateModal = () => accountCreateDialogRef.value.show();
</script> </script>
<template> <template>
@ -126,8 +127,15 @@ const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>
<QPageSticky :offset="[20, 20]"> <QDialog
<QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" /> 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"> <QTooltip class="text-no-wrap">
{{ t('account.card.newUser') }} {{ t('account.card.newUser') }}
</QTooltip> </QTooltip>