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

1
src/components/FormModel.vue
View File

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

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

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

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

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

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

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