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

Agregar funcionalidades al formulario y al InputSelectCreate

This commit is contained in:
William Buezas 2023-12-18 11:57:56 -03:00
parent d4b9dcc0b9
commit ab549b6e6a
5 changed files with 51 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/CreateBankEntityForm.vue
View File

@ -7,11 +7,11 @@ import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
const emit = defineEmits(['closeForm', 'onDataSaved']); const emit = defineEmits(['onDataSaved']);
const { t } = useI18n(); const { t } = useI18n();
const formData = reactive({ const bankEntityFormData = reactive({
name: null, name: null,
bic: null, bic: null,
countryFk: null, countryFk: null,
@ -22,6 +22,7 @@ const countriesFilter = {
fields: ['id', 'country', 'code'], fields: ['id', 'country', 'code'],
}; };
const closeButton = ref(null);
const countriesOptions = ref([]); const countriesOptions = ref([]);
const loading = ref(false); const loading = ref(false);
@ -29,14 +30,14 @@ const setCountriesOptions = (data) => {
countriesOptions.value = data; countriesOptions.value = data;
}; };
const closeForm = () => {
emit('closeForm');
};
const onDataSaved = (data) => { const onDataSaved = (data) => {
emit('onDataSaved', data); emit('onDataSaved', data);
closeForm(); closeForm();
}; };
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script> </script>
<template> <template>
@ -47,14 +48,17 @@ const onDataSaved = (data) => {
auto-load auto-load
/> />
<FormModel <FormModel
:form-initial-data="formData" :form-initial-data="bankEntityFormData"
:observe-form-changes="false" :observe-form-changes="false"
:default-actions="false" :default-actions="false"
url-create="bankEntities" url-create="bankEntities"
model="bankEntity" model="bankEntity"
@on-data-saved="onDataSaved(data)" @on-data-saved="onDataSaved($event)"
> >
<template #form="{ data, validate }"> <template #form="{ data, validate }">
<span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="22px" />
</span>
<h1 class="title">{{ t('title') }}</h1> <h1 class="title">{{ t('title') }}</h1>
<span class="q-mb-md">{{ t('subtitle') }}</span> <span class="q-mb-md">{{ t('subtitle') }}</span>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
@ -77,7 +81,7 @@ const onDataSaved = (data) => {
<div class="col"> <div class="col">
<VnSelectFilter <VnSelectFilter
:label="t('country')" :label="t('country')"
v-model="formData.countryFk" v-model="data.countryFk"
:options="countriesOptions" :options="countriesOptions"
option-value="id" option-value="id"
option-label="country" option-label="country"
@ -86,7 +90,7 @@ const onDataSaved = (data) => {
/> />
</div> </div>
<div class="col"> <div class="col">
<QInput :label="t('id')" v-model="formData.id" /> <QInput :label="t('id')" v-model="data.id" />
</div> </div>
</VnRow> </VnRow>
<div class="q-mt-lg row justify-end"> <div class="q-mt-lg row justify-end">
@ -113,6 +117,12 @@ const onDataSaved = (data) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.title { .title {
font-size: 17px; font-size: 17px;
font-weight: bold; font-weight: bold;

1
src/components/FormModel.vue
View File

@ -127,6 +127,7 @@ async function save() {
} else { } else {
await axios.patch($props.urlUpdate || $props.url, formData.value); await axios.patch($props.urlUpdate || $props.url, formData.value);
} }
emit('onDataSaved', formData.value);
} catch (err) { } catch (err) {
notify('errors.create', 'negative'); notify('errors.create', 'negative');
} }

8
src/components/common/VnSelectCreate.vue
View File

@ -16,10 +16,6 @@ const $props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
optionLabel: {
type: String,
default: '',
},
rolesAllowedToCreate: { rolesAllowedToCreate: {
type: Array, type: Array,
default: () => ['developer'], default: () => ['developer'],
@ -48,7 +44,7 @@ const toggleForm = () => {
</script> </script>
<template> <template>
<VnSelectFilter v-model="value" :options="options"> <VnSelectFilter v-model="value" :options="options" v-bind="$attrs">
<template v-if="isAllowedToCreate" #append> <template v-if="isAllowedToCreate" #append>
<QIcon <QIcon
@click.stop.prevent="toggleForm()" @click.stop.prevent="toggleForm()"
@ -57,7 +53,7 @@ const toggleForm = () => {
class="add-icon" class="add-icon"
/> />
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale"> <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
<slot name="form" @close-form="toggleForm()" /> <slot name="form" />
</QDialog> </QDialog>
</template> </template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName"> <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">

19
src/components/common/VnSelectFilter.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, toRefs, watch, computed } from 'vue'; import { ref, toRefs, computed } from 'vue';
const emit = defineEmits(['update:modelValue', 'update:options']); const emit = defineEmits(['update:modelValue', 'update:options']);
const $props = defineProps({ const $props = defineProps({
@ -20,16 +20,11 @@ const $props = defineProps({
default: true, default: true,
}, },
}); });
const { optionLabel, options } = toRefs($props);
const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const vnSelectRef = ref(null);
function setOptions(data) { const { optionLabel } = toRefs($props);
myOptions.value = JSON.parse(JSON.stringify(data)); const myOptions = ref([]);
myOptionsOriginal.value = JSON.parse(JSON.stringify(data)); const myOptionsOriginal = computed(() => $props.options);
} const vnSelectRef = ref(null);
setOptions(options.value);
const filter = (val, options) => { const filter = (val, options) => {
const search = val.toLowerCase(); const search = val.toLowerCase();
@ -61,10 +56,6 @@ const filterHandler = (val, update) => {
); );
}; };
watch(options, (newValue) => {
setOptions(newValue);
});
const value = computed({ const value = computed({
get() { get() {
return $props.modelValue; return $props.modelValue;

48
src/pages/Worker/WorkerCreate.vue
View File

@ -46,23 +46,21 @@ const newWorkerForm = ref({
bankEntityFk: null, bankEntityFk: null,
}); });
const filtersOptions = reactive({ const provincesOptions = ref([]);
provinces: [], const townsOptions = ref([]);
towns: [], const companiesOptions = ref([]);
companies: [], const workersOptions = ref([]);
workers: [], const payMethodsOptions = ref([]);
payMethods: [], const bankEntitiesOptions = ref([]);
bankEntities: [],
});
const updateFilterOptions = (data, optionKey) => {
filtersOptions[optionKey] = [...data];
};
const onFetchWorkerConfig = (workerConfig) => { const onFetchWorkerConfig = (workerConfig) => {
newWorkerForm.value.payMethodFk = workerConfig.payMethodFk; newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
}; };
const onDataSaved = (data) => {
bankEntitiesOptions.value.push(data);
};
onMounted(async () => { onMounted(async () => {
const userInfo = await useUserConfig().fetch(); const userInfo = await useUserConfig().fetch();
newWorkerForm.value = { companyFk: userInfo.companyFk }; newWorkerForm.value = { companyFk: userInfo.companyFk };
@ -78,34 +76,34 @@ onMounted(async () => {
/> />
<FetchData <FetchData
url="Provinces/location" url="Provinces/location"
@on-fetch="(data) => updateFilterOptions(data, 'provinces')" @on-fetch="(data) => (provincesOptions = data)"
:filter="provincesFilter" :filter="provincesFilter"
auto-load auto-load
/> />
<FetchData <FetchData
url="Towns/location" url="Towns/location"
@on-fetch="(data) => updateFilterOptions(data, 'towns')" @on-fetch="(data) => (townsOptions = data)"
:filter="townsFilter" :filter="townsFilter"
auto-load auto-load
/> />
<FetchData <FetchData
url="Companies" url="Companies"
@on-fetch="(data) => updateFilterOptions(data, 'companies')" @on-fetch="(data) => (companiesOptions = data)"
auto-load auto-load
/> />
<FetchData <FetchData
url="Workers/search" url="Workers/search"
@on-fetch="(data) => updateFilterOptions(data, 'workers')" @on-fetch="(data) => (workersOptions = data)"
auto-load auto-load
/> />
<FetchData <FetchData
url="Paymethods" url="Paymethods"
@on-fetch="(data) => updateFilterOptions(data, 'payMethods')" @on-fetch="(data) => (payMethodsOptions = data)"
auto-load auto-load
/> />
<FetchData <FetchData
url="BankEntities" url="BankEntities"
@on-fetch="(data) => updateFilterOptions(data, 'bankEntities')" @on-fetch="(data) => (bankEntitiesOptions = data)"
auto-load auto-load
/> />
@ -163,7 +161,7 @@ onMounted(async () => {
<VnSelectFilter <VnSelectFilter
:label="t('worker.create.province')" :label="t('worker.create.province')"
v-model="data.provinceFk" v-model="data.provinceFk"
:options="filtersOptions.provinces" :options="provincesOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
hide-selected hide-selected
@ -175,7 +173,7 @@ onMounted(async () => {
<VnSelectFilter <VnSelectFilter
:label="t('worker.create.city')" :label="t('worker.create.city')"
v-model="data.city" v-model="data.city"
:options="filtersOptions.towns" :options="townsOptions"
option-value="name" option-value="name"
option-label="name" option-label="name"
hide-selected hide-selected
@ -218,7 +216,7 @@ onMounted(async () => {
<VnSelectFilter <VnSelectFilter
:label="t('worker.create.company')" :label="t('worker.create.company')"
v-model="data.companyFk" v-model="data.companyFk"
:options="filtersOptions.companies" :options="companiesOptions"
option-value="id" option-value="id"
option-label="code" option-label="code"
hide-selected hide-selected
@ -228,7 +226,7 @@ onMounted(async () => {
<VnSelectFilter <VnSelectFilter
:label="t('worker.create.boss')" :label="t('worker.create.boss')"
v-model="data.bossFk" v-model="data.bossFk"
:options="filtersOptions.workers" :options="workersOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
hide-selected hide-selected
@ -252,7 +250,7 @@ onMounted(async () => {
<VnSelectFilter <VnSelectFilter
:label="t('worker.create.payMethods')" :label="t('worker.create.payMethods')"
v-model="data.payMethodFk" v-model="data.payMethodFk"
:options="filtersOptions.payMethods" :options="payMethodsOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
hide-selected hide-selected
@ -265,14 +263,14 @@ onMounted(async () => {
<VnSelectCreate <VnSelectCreate
:label="t('worker.create.bankEntity')" :label="t('worker.create.bankEntity')"
v-model="data.bankEntityFk" v-model="data.bankEntityFk"
:options="filtersOptions.bankEntities" :options="bankEntitiesOptions"
option-label="name" option-label="name"
option-value="id" option-value="id"
hide-selected hide-selected
:roles-allowed-to-create="['salesAssistant', 'hr']" :roles-allowed-to-create="['salesAssistant', 'hr']"
> >
<template #form> <template #form>
<CreateBankEntityForm /> <CreateBankEntityForm @on-data-saved="onDataSaved($event)" />
</template> </template>
<template #option="scope"> <template #option="scope">
<QItem v-bind="scope.itemProps"> <QItem v-bind="scope.itemProps">