forked from verdnatura/salix-front
61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import FetchData from 'components/FetchData.vue';
|
|
import VnRow from 'components/ui/VnRow.vue';
|
|
import VnSelectProvince from 'components/VnSelectProvince.vue';
|
|
import VnInput from 'components/common/VnInput.vue';
|
|
import FormModelPopup from './FormModelPopup.vue';
|
|
|
|
const emit = defineEmits(['onDataSaved']);
|
|
|
|
const { t } = useI18n();
|
|
|
|
const cityFormData = reactive({
|
|
name: null,
|
|
provinceFk: null,
|
|
});
|
|
|
|
const provincesOptions = ref([]);
|
|
|
|
const onDataSaved = (...args) => {
|
|
emit('onDataSaved', ...args);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
@on-fetch="(data) => (provincesOptions = data)"
|
|
auto-load
|
|
url="Provinces"
|
|
/>
|
|
<FormModelPopup
|
|
:title="t('New city')"
|
|
:subtitle="t('Please, ensure you put the correct data!')"
|
|
:form-initial-data="cityFormData"
|
|
url-create="towns"
|
|
model="city"
|
|
@on-data-saved="onDataSaved"
|
|
>
|
|
<template #form-inputs="{ data, validate }">
|
|
<VnRow>
|
|
<VnInput
|
|
:label="t('Name')"
|
|
v-model="data.name"
|
|
:rules="validate('city.name')"
|
|
/>
|
|
<VnSelectProvince v-model="data.provinceFk" />
|
|
</VnRow>
|
|
</template>
|
|
</FormModelPopup>
|
|
</template>
|
|
|
|
<i18n>
|
|
es:
|
|
New city: Nueva ciudad
|
|
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
|
|
Name: Nombre
|
|
Province: Provincia
|
|
</i18n>
|