forked from verdnatura/salix-front
Merge pull request 'feature/ms-67-WorkersCreationForm' (#32) from feature/ms-67-WorkersCreationForm into dev
Reviewed-on: hyervoni/salix-front-mindshore#32
This commit is contained in:
commit
8a5bb1480f
|
|
@ -0,0 +1,148 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
|
||||
const emit = defineEmits(['onDataSaved']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const bankEntityFormData = reactive({
|
||||
name: null,
|
||||
bic: null,
|
||||
countryFk: null,
|
||||
id: null,
|
||||
});
|
||||
|
||||
const countriesFilter = {
|
||||
fields: ['id', 'country', 'code'],
|
||||
};
|
||||
|
||||
const closeButton = ref(null);
|
||||
const countriesOptions = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const setCountriesOptions = (data) => {
|
||||
countriesOptions.value = data;
|
||||
};
|
||||
|
||||
const onDataSaved = (data) => {
|
||||
emit('onDataSaved', data);
|
||||
closeForm();
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="Countries"
|
||||
@on-fetch="(data) => setCountriesOptions(data)"
|
||||
:filter="countriesFilter"
|
||||
auto-load
|
||||
/>
|
||||
<FormModel
|
||||
:form-initial-data="bankEntityFormData"
|
||||
:observe-form-changes="false"
|
||||
:default-actions="false"
|
||||
url-create="bankEntities"
|
||||
model="bankEntity"
|
||||
@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>
|
||||
<p class="q-mb-md">{{ t('subtitle') }}</p>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<QInput
|
||||
:label="t('name')"
|
||||
v-model="data.name"
|
||||
:rules="validate('bankEntity.name')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<QInput
|
||||
:label="t('swift')"
|
||||
v-model="data.bic"
|
||||
:rules="validate('bankEntity.bic')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('country')"
|
||||
v-model="data.countryFk"
|
||||
:options="countriesOptions"
|
||||
option-value="id"
|
||||
option-label="country"
|
||||
hide-selected
|
||||
:rules="validate('bankEntity.countryFk')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<QInput :label="t('id')" v-model="data.id" />
|
||||
</div>
|
||||
</VnRow>
|
||||
<div class="q-mt-lg row justify-end">
|
||||
<QBtn
|
||||
:label="t('globals.save')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
:disabled="loading"
|
||||
:loading="loading"
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
type="reset"
|
||||
color="primary"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
:disabled="loading"
|
||||
:loading="loading"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FormModel>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
title: New bank entity
|
||||
subtitle: Please, ensure you put the correct data!
|
||||
name: Name *
|
||||
swift: Swift *
|
||||
country: Country
|
||||
id: Entity code
|
||||
es:
|
||||
title: Nueva entidad bancaria
|
||||
subtitle: ¡Por favor, asegúrate de poner los datos correctos!
|
||||
name: Nombre *
|
||||
swift: Swift *
|
||||
country: País
|
||||
id: Código de la entidad
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
|
||||
const emit = defineEmits(['onDataSaved']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const postcodeFormData = reactive({
|
||||
code: null,
|
||||
countryFk: null,
|
||||
provinceFk: null,
|
||||
townFk: null,
|
||||
});
|
||||
|
||||
const closeButton = ref(null);
|
||||
const countriesOptions = ref([]);
|
||||
const isLoading = ref(false);
|
||||
const provincesOptions = ref([]);
|
||||
const townsLocationOptions = ref([]);
|
||||
|
||||
const onDataSaved = () => {
|
||||
emit('onDataSaved');
|
||||
closeForm();
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (townsLocationOptions = data)"
|
||||
auto-load
|
||||
url="Towns/location"
|
||||
/>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (provincesOptions = data)"
|
||||
auto-load
|
||||
url="Provinces"
|
||||
/>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (countriesOptions = data)"
|
||||
auto-load
|
||||
url="Countries"
|
||||
/>
|
||||
<FormModel
|
||||
:form-initial-data="postcodeFormData"
|
||||
:observe-form-changes="false"
|
||||
:default-actions="false"
|
||||
url-create="postcodes"
|
||||
model="postcode"
|
||||
@on-data-saved="onDataSaved()"
|
||||
>
|
||||
<template #form="{ data, validate }">
|
||||
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||
<QIcon name="close" size="22px" />
|
||||
</span>
|
||||
<h1 class="title">{{ t('New postcode') }}</h1>
|
||||
<p>{{ t('Please, ensure you put the correct data!') }}</p>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('Postcode')"
|
||||
v-model="data.code"
|
||||
:rules="validate('postcode.code')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('City')"
|
||||
:options="townsLocationOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="data.townFk"
|
||||
:rules="validate('postcode.city')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-xl">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Province')"
|
||||
:options="provincesOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="data.provinceFk"
|
||||
:rules="validate('postcode.provinceFk')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Country')"
|
||||
:options="countriesOptions"
|
||||
hide-selected
|
||||
option-label="country"
|
||||
option-value="id"
|
||||
v-model="data.countryFk"
|
||||
:rules="validate('postcode.countryFk')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<div class="q-mt-lg row justify-end">
|
||||
<QBtn
|
||||
:label="t('globals.save')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
type="reset"
|
||||
color="primary"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FormModel>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
New postcode: Nuevo código postal
|
||||
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
|
||||
City: Ciudad
|
||||
Province: Provincia
|
||||
Country: País
|
||||
Postcode: Código postal
|
||||
</i18n>
|
||||
|
|
@ -220,6 +220,7 @@ watch(formUrl, async () => {
|
|||
:showing="isLoading"
|
||||
:label="t('globals.pleaseWait')"
|
||||
color="primary"
|
||||
style="min-width: 100%"
|
||||
/>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
|||
|
||||
import { useRole } from 'src/composables/useRole';
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'update:options']);
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const $props = defineProps({
|
||||
modelValue: {
|
||||
|
|
|
|||
|
|
@ -555,6 +555,7 @@ export default {
|
|||
basicData: 'Basic data',
|
||||
summary: 'Summary',
|
||||
notifications: 'Notifications',
|
||||
workerCreate: 'New worker',
|
||||
},
|
||||
list: {
|
||||
name: 'Name',
|
||||
|
|
@ -564,6 +565,7 @@ export default {
|
|||
active: 'Active',
|
||||
department: 'Department',
|
||||
schedule: 'Schedule',
|
||||
newWorker: 'New worker',
|
||||
},
|
||||
card: {
|
||||
workerId: 'Worker ID',
|
||||
|
|
@ -595,6 +597,25 @@ export default {
|
|||
subscribed: 'Subscribed to the notification',
|
||||
unsubscribed: 'Unsubscribed from the notification',
|
||||
},
|
||||
create: {
|
||||
name: 'Name',
|
||||
lastName: 'Last name',
|
||||
birth: 'Birth',
|
||||
fi: 'Fi',
|
||||
code: 'Worker code',
|
||||
phone: 'Phone',
|
||||
postcode: 'Postcode',
|
||||
province: 'Province',
|
||||
city: 'City',
|
||||
street: 'Street',
|
||||
webUser: 'Web user',
|
||||
personalEmail: 'Personal email',
|
||||
company: 'Company',
|
||||
boss: 'Boss',
|
||||
payMethods: 'Pay method',
|
||||
iban: 'IBAN',
|
||||
bankEntity: 'Swift / BIC',
|
||||
},
|
||||
imageNotFound: 'Image not found',
|
||||
},
|
||||
wagon: {
|
||||
|
|
@ -714,6 +735,7 @@ export default {
|
|||
create: 'Create',
|
||||
summary: 'Summary',
|
||||
extraCommunity: 'Extra community',
|
||||
travelCreate: 'New travel',
|
||||
basicData: 'Basic data',
|
||||
history: 'History',
|
||||
thermographs: 'Termographs',
|
||||
|
|
|
|||
|
|
@ -555,6 +555,7 @@ export default {
|
|||
basicData: 'Datos básicos',
|
||||
summary: 'Resumen',
|
||||
notifications: 'Notificaciones',
|
||||
workerCreate: 'Nuevo trabajador',
|
||||
},
|
||||
list: {
|
||||
name: 'Nombre',
|
||||
|
|
@ -564,6 +565,7 @@ export default {
|
|||
active: 'Activo',
|
||||
department: 'Departamento',
|
||||
schedule: 'Horario',
|
||||
newWorker: 'Nuevo trabajador',
|
||||
},
|
||||
card: {
|
||||
workerId: 'ID Trabajador',
|
||||
|
|
@ -595,6 +597,25 @@ export default {
|
|||
subscribed: 'Se ha suscrito a la notificación',
|
||||
unsubscribed: 'Se ha dado de baja de la notificación',
|
||||
},
|
||||
create: {
|
||||
name: 'Nombre',
|
||||
lastName: 'Apellido',
|
||||
birth: 'Fecha de nacimiento',
|
||||
fi: 'DNI/NIF/NIE',
|
||||
code: 'Código de trabajador',
|
||||
phone: 'Teléfono',
|
||||
postcode: 'Código postal',
|
||||
province: 'Provincia',
|
||||
city: 'Población',
|
||||
street: 'Dirección',
|
||||
webUser: 'Usuario Web',
|
||||
personalEmail: 'Correo personal',
|
||||
company: 'Empresa',
|
||||
boss: 'Jefe',
|
||||
payMethods: 'Método de pago',
|
||||
iban: 'IBAN',
|
||||
bankEntity: 'Swift / BIC',
|
||||
},
|
||||
imageNotFound: 'No se ha encontrado la imagen',
|
||||
},
|
||||
wagon: {
|
||||
|
|
@ -714,6 +735,7 @@ export default {
|
|||
create: 'Crear',
|
||||
summary: 'Resumen',
|
||||
extraCommunity: 'Extra comunitarios',
|
||||
travelCreate: 'Nuevo envío',
|
||||
basicData: 'Datos básicos',
|
||||
history: 'Historial',
|
||||
thermographs: 'Termógrafos',
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@
|
|||
import { reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import CustomerCreateNewPostcode from './CustomerCreateNewPostcode.vue';
|
||||
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
|
|
@ -27,11 +28,17 @@ const newClientForm = reactive({
|
|||
isEqualizated: false,
|
||||
});
|
||||
|
||||
const postcodeFetchDataRef = ref(null);
|
||||
const workersOptions = ref([]);
|
||||
const businessTypesOptions = ref([]);
|
||||
const citiesLocationOptions = ref([]);
|
||||
const provincesLocationOptions = ref([]);
|
||||
const countriesOptions = ref([]);
|
||||
const postcodesOptions = ref([]);
|
||||
|
||||
const onPostcodeCreated = async () => {
|
||||
postcodeFetchDataRef.value.fetch();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -40,6 +47,12 @@ const countriesOptions = ref([]);
|
|||
auto-load
|
||||
url="Workers/search?departmentCodes"
|
||||
/>
|
||||
<FetchData
|
||||
ref="postcodeFetchDataRef"
|
||||
url="Postcodes/location"
|
||||
@on-fetch="(data) => (postcodesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (businessTypesOptions = data)"
|
||||
auto-load
|
||||
|
|
@ -123,26 +136,38 @@ const countriesOptions = ref([]);
|
|||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<QInput v-model="data.postcode" :label="t('Postcode')">
|
||||
<template #append>
|
||||
<QBtn
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
round
|
||||
size="xs"
|
||||
>
|
||||
<QPopupProxy
|
||||
cover
|
||||
transition-hide="scale"
|
||||
transition-show="scale"
|
||||
>
|
||||
<CustomerCreateNewPostcode />
|
||||
</QPopupProxy>
|
||||
</QBtn>
|
||||
<VnSelectCreate
|
||||
v-model="data.postcode"
|
||||
:label="t('Postcode')"
|
||||
:rules="validate('Worker.postcode')"
|
||||
:roles-allowed-to-create="['deliveryAssistant']"
|
||||
:options="postcodesOptions"
|
||||
option-label="code"
|
||||
option-value="code"
|
||||
hide-selected
|
||||
>
|
||||
<template #form>
|
||||
<CustomerCreateNewPostcode
|
||||
@on-data-saved="onPostcodeCreated($event)"
|
||||
/>
|
||||
</template>
|
||||
</QInput>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection v-if="scope.opt">
|
||||
<QItemLabel>{{ scope.opt.code }}</QItemLabel>
|
||||
<QItemLabel caption
|
||||
>{{ scope.opt.code }} -
|
||||
{{ scope.opt.town.name }} ({{
|
||||
scope.opt.town.province.name
|
||||
}},
|
||||
{{
|
||||
scope.opt.town.province.country.country
|
||||
}})</QItemLabel
|
||||
>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectCreate>
|
||||
</div>
|
||||
<div class="col">
|
||||
<!-- ciudades -->
|
||||
|
|
|
|||
|
|
@ -1,143 +0,0 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import useNotify from 'src/composables/useNotify';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
|
||||
const { notify } = useNotify();
|
||||
const { t } = useI18n();
|
||||
|
||||
const data = reactive({
|
||||
city: null,
|
||||
code: null,
|
||||
countryFk: null,
|
||||
provinceFk: null,
|
||||
townFk: null,
|
||||
});
|
||||
|
||||
const countriesOptions = ref([]);
|
||||
const isLoading = ref(false);
|
||||
const provincesOptions = ref([]);
|
||||
const townsLocationOptions = ref([]);
|
||||
|
||||
async function save() {
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const { city, code, countryFk, provinceFk } = data;
|
||||
const payload = {
|
||||
city: city.name,
|
||||
code,
|
||||
countryFk,
|
||||
provinceFk,
|
||||
townFk: city.id,
|
||||
};
|
||||
|
||||
await axios.patch('/postcodes', payload);
|
||||
} catch (err) {
|
||||
notify('errors.create', 'negative');
|
||||
}
|
||||
|
||||
isLoading.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (townsLocationOptions = data)"
|
||||
auto-load
|
||||
url="Towns/location"
|
||||
/>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (provincesOptions = data)"
|
||||
auto-load
|
||||
url="Provinces"
|
||||
/>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (countriesOptions = data)"
|
||||
auto-load
|
||||
url="Countries"
|
||||
/>
|
||||
<div class="q-pa-lg">
|
||||
<h6 class="q-my-xs">{{ t('New postcode') }}</h6>
|
||||
<p>{{ t('Please, ensure you put the correct data!') }}</p>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<QInput label="Postcode" v-model="data.code" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('City')"
|
||||
:options="townsLocationOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="city"
|
||||
v-model="data.city"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-xl">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Province')"
|
||||
:options="provincesOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="data.provinceFk"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Country')"
|
||||
:options="countriesOptions"
|
||||
hide-selected
|
||||
option-label="country"
|
||||
option-value="id"
|
||||
v-model="data.countryFk"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<div class="flex justify-end">
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
class="q-mr-lg"
|
||||
color="primary"
|
||||
outline
|
||||
v-close-popup
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('globals.save')"
|
||||
@click="save"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<QInnerLoading
|
||||
:showing="isLoading"
|
||||
:label="t('globals.pleaseWait')"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-gap: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
New postcode: Nuevo código postal
|
||||
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
|
||||
City: Ciudad
|
||||
Province: Provincia
|
||||
Country: País
|
||||
</i18n>
|
||||
|
|
@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
|
|||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
|
||||
|
|
|
|||
|
|
@ -170,11 +170,3 @@ onBeforeMount(() => {
|
|||
</FormModel>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-gap: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,366 @@
|
|||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
|
||||
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
|
||||
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
import { useUserConfig } from 'src/composables/useUserConfig';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const workerConfigFilter = {
|
||||
field: ['payMethodFk'],
|
||||
};
|
||||
|
||||
const provincesFilter = {
|
||||
fields: ['id', 'name', 'countryFk'],
|
||||
};
|
||||
|
||||
const townsFilter = {
|
||||
fields: ['id', 'name', 'provinceFk'],
|
||||
};
|
||||
|
||||
const newWorkerForm = ref({
|
||||
companyFk: null,
|
||||
payMethodFk: null,
|
||||
firstName: null,
|
||||
lastNames: null,
|
||||
birth: null,
|
||||
fi: null,
|
||||
code: null,
|
||||
phone: null,
|
||||
postcode: null,
|
||||
provinceFk: null,
|
||||
city: null,
|
||||
street: null,
|
||||
name: null,
|
||||
email: null,
|
||||
bossFk: null,
|
||||
iban: null,
|
||||
bankEntityFk: null,
|
||||
});
|
||||
|
||||
const postcodeFetchDataRef = ref(null);
|
||||
const provincesOptions = ref([]);
|
||||
const townsOptions = ref([]);
|
||||
const companiesOptions = ref([]);
|
||||
const workersOptions = ref([]);
|
||||
const payMethodsOptions = ref([]);
|
||||
const bankEntitiesOptions = ref([]);
|
||||
const postcodesOptions = ref([]);
|
||||
|
||||
const onFetchWorkerConfig = (workerConfig) => {
|
||||
newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
|
||||
};
|
||||
|
||||
const onBankEntityCreated = (data) => {
|
||||
bankEntitiesOptions.value.push(data);
|
||||
};
|
||||
|
||||
const onPostcodeCreated = async () => {
|
||||
postcodeFetchDataRef.value.fetch();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const userInfo = await useUserConfig().fetch();
|
||||
newWorkerForm.value = { companyFk: userInfo.companyFk };
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="WorkerConfigs/findOne"
|
||||
@on-fetch="(data) => onFetchWorkerConfig(data)"
|
||||
:filter="workerConfigFilter"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
ref="postcodeFetchDataRef"
|
||||
url="Postcodes/location"
|
||||
@on-fetch="(data) => (postcodesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Provinces/location"
|
||||
@on-fetch="(data) => (provincesOptions = data)"
|
||||
:filter="provincesFilter"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Towns/location"
|
||||
@on-fetch="(data) => (townsOptions = data)"
|
||||
:filter="townsFilter"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Companies"
|
||||
@on-fetch="(data) => (companiesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Workers/search"
|
||||
@on-fetch="(data) => (workersOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Paymethods"
|
||||
@on-fetch="(data) => (payMethodsOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="BankEntities"
|
||||
@on-fetch="(data) => (bankEntitiesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
|
||||
<QPage>
|
||||
<QToolbar class="bg-vn-dark">
|
||||
<div id="st-data"></div>
|
||||
<QSpace />
|
||||
<div id="st-actions"></div>
|
||||
</QToolbar>
|
||||
<FormModel
|
||||
url-create="Workers/new"
|
||||
model="worker"
|
||||
:form-initial-data="newWorkerForm"
|
||||
>
|
||||
<template #form="{ data, validate }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.firstName"
|
||||
:label="t('worker.create.name')"
|
||||
:rules="validate('Worker.firstName')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.lastNames"
|
||||
:label="t('worker.create.lastName')"
|
||||
:rules="validate('Worker.lastNames')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInputDate
|
||||
v-model="data.birth"
|
||||
:label="t('worker.create.birth')"
|
||||
:rules="validate('Worker.birth')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.fi"
|
||||
:label="t('worker.create.fi')"
|
||||
:rules="validate('Worker.fi')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.code"
|
||||
:label="t('worker.create.code')"
|
||||
:rules="validate('Worker.code')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.phone"
|
||||
:label="t('worker.create.phone')"
|
||||
:rules="validate('Worker.phone')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectCreate
|
||||
v-model="data.postcode"
|
||||
:label="t('worker.create.postcode')"
|
||||
:rules="validate('Worker.postcode')"
|
||||
:roles-allowed-to-create="['deliveryAssistant']"
|
||||
:options="postcodesOptions"
|
||||
option-label="code"
|
||||
option-value="code"
|
||||
hide-selected
|
||||
>
|
||||
<template #form>
|
||||
<CustomerCreateNewPostcode
|
||||
@on-data-saved="onPostcodeCreated($event)"
|
||||
/>
|
||||
</template>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection v-if="scope.opt">
|
||||
<QItemLabel>{{ scope.opt.code }}</QItemLabel>
|
||||
<QItemLabel caption
|
||||
>{{ scope.opt.code }} -
|
||||
{{ scope.opt.town.name }} ({{
|
||||
scope.opt.town.province.name
|
||||
}},
|
||||
{{
|
||||
scope.opt.town.province.country.country
|
||||
}})</QItemLabel
|
||||
>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectCreate>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('worker.create.province')"
|
||||
v-model="data.provinceFk"
|
||||
:options="provincesOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
:rules="validate('Worker.provinceFk')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('worker.create.city')"
|
||||
v-model="data.city"
|
||||
:options="townsOptions"
|
||||
option-value="name"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
:rules="validate('Worker.city')"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
|
||||
<QItemLabel caption
|
||||
>{{ scope.opt.name }},
|
||||
{{ scope.opt.province.name }} ({{
|
||||
scope.opt.province.country.country
|
||||
}})</QItemLabel
|
||||
>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('worker.create.street')"
|
||||
v-model="data.street"
|
||||
:rules="validate('Worker.street')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.name"
|
||||
:label="t('worker.create.webUser')"
|
||||
:rules="validate('Worker.name')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.email"
|
||||
:label="t('worker.create.personalEmail')"
|
||||
:rules="validate('Worker.email')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('worker.create.company')"
|
||||
v-model="data.companyFk"
|
||||
:options="companiesOptions"
|
||||
option-value="id"
|
||||
option-label="code"
|
||||
hide-selected
|
||||
:rules="validate('Worker.company')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('worker.create.boss')"
|
||||
v-model="data.bossFk"
|
||||
:options="workersOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
:rules="validate('Worker.boss')"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
|
||||
<QItemLabel caption
|
||||
>{{ scope.opt.nickname }},
|
||||
{{ scope.opt.code }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('worker.create.payMethods')"
|
||||
v-model="data.payMethodFk"
|
||||
:options="payMethodsOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
map-options
|
||||
hide-selected
|
||||
:rules="validate('Worker.payMethodFk')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.iban"
|
||||
:label="t('worker.create.iban')"
|
||||
:rules="validate('Worker.iban')"
|
||||
/>
|
||||
</div>
|
||||
<VnSelectCreate
|
||||
:label="t('worker.create.bankEntity')"
|
||||
v-model="data.bankEntityFk"
|
||||
:options="bankEntitiesOptions"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
hide-selected
|
||||
:roles-allowed-to-create="['salesAssistant', 'hr']"
|
||||
:rules="validate('Worker.bankEntity')"
|
||||
>
|
||||
<template #form>
|
||||
<CreateBankEntityForm
|
||||
@on-data-saved="onBankEntityCreated($event)"
|
||||
/>
|
||||
</template>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection v-if="scope.opt">
|
||||
<QItemLabel
|
||||
>{{ scope.opt.bic }}
|
||||
{{ scope.opt.name }}</QItemLabel
|
||||
>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectCreate>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModel>
|
||||
</QPage>
|
||||
</template>
|
||||
|
|
@ -27,6 +27,10 @@ function viewSummary(id) {
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
const redirectToCreateView = () => {
|
||||
router.push({ name: 'WorkerCreate' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -101,6 +105,12 @@ function viewSummary(id) {
|
|||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<QPageSticky :offset="[20, 20]">
|
||||
<QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
|
||||
<QTooltip>
|
||||
{{ t('worker.list.newWorker') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
path: 'create',
|
||||
name: 'TravelCreate',
|
||||
meta: {
|
||||
title: 'extraCommunity',
|
||||
title: 'travelCreate',
|
||||
icon: '',
|
||||
},
|
||||
component: () => import('src/pages/Travel/TravelCreate.vue'),
|
||||
|
|
|
|||
|
|
@ -29,6 +29,15 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Worker/WorkerList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'WorkerCreate',
|
||||
meta: {
|
||||
title: 'workerCreate',
|
||||
icon: '',
|
||||
},
|
||||
component: () => import('src/pages/Worker/WorkerCreate.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue