forked from verdnatura/salix-front
wip
This commit is contained in:
parent
aa1f8c4f3b
commit
473e96ffb4
|
|
@ -7,6 +7,13 @@ import FetchData from 'components/FetchData.vue';
|
|||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import FormModelPopup from './FormModelPopup.vue';
|
||||
|
||||
const props = defineProps({
|
||||
showEntityField: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['onDataSaved']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
|
@ -73,7 +80,7 @@ const onDataSaved = (data) => {
|
|||
:rules="validate('bankEntity.countryFk')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div v-if="showEntityField" class="col">
|
||||
<QInput :label="t('id')" v-model="data.id" />
|
||||
</div>
|
||||
</VnRow>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export default {
|
|||
selectRows: 'Select all { numberRows } row(s)',
|
||||
allRows: 'All { numberRows } row(s)',
|
||||
markAll: 'Mark all',
|
||||
noResults: 'No results'
|
||||
noResults: 'No results',
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Access denied',
|
||||
|
|
@ -905,6 +905,23 @@ export default {
|
|||
payDemFk: 'Payment deadline',
|
||||
payDay: 'Pay day',
|
||||
},
|
||||
accounts: {
|
||||
iban: 'Iban',
|
||||
bankEntity: 'Bank entity',
|
||||
beneficiary: 'Beneficiary',
|
||||
},
|
||||
contacts: {
|
||||
name: 'Name',
|
||||
phone: 'Phone',
|
||||
mobile: 'Mobile',
|
||||
email: 'Email',
|
||||
observation: 'Notes',
|
||||
},
|
||||
addresses: {
|
||||
street: 'Street',
|
||||
postcode: 'Postcode',
|
||||
phone: 'Phone',
|
||||
},
|
||||
},
|
||||
travel: {
|
||||
pageTitles: {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export default {
|
|||
selectRows: 'Seleccionar las { numberRows } filas(s)',
|
||||
allRows: 'Todo { numberRows } filas(s)',
|
||||
markAll: 'Marcar todo',
|
||||
noResults: 'Sin resultados'
|
||||
noResults: 'Sin resultados',
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Acceso denegado',
|
||||
|
|
@ -904,6 +904,23 @@ export default {
|
|||
payDemFk: 'Plazo de pago',
|
||||
payDay: 'Día de pago',
|
||||
},
|
||||
accounts: {
|
||||
iban: 'Iban',
|
||||
bankEntity: 'Entidad bancaria',
|
||||
beneficiary: 'Beneficiario',
|
||||
},
|
||||
contacts: {
|
||||
name: 'Nombre',
|
||||
phone: 'Teléfono',
|
||||
mobile: 'Móvil',
|
||||
email: 'Email',
|
||||
observation: 'Notas',
|
||||
},
|
||||
addresses: {
|
||||
street: 'Dirección',
|
||||
postcode: 'Código postal',
|
||||
phone: 'Teléfono',
|
||||
},
|
||||
},
|
||||
travel: {
|
||||
pageTitles: {
|
||||
|
|
|
|||
|
|
@ -1 +1,177 @@
|
|||
<template>Supplier accounts</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import CrudModel from 'components/CrudModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
|
||||
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
|
||||
|
||||
import axios from 'axios';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const { notify } = useNotify();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const supplier = ref(null);
|
||||
const supplierAccountRef = ref(null);
|
||||
const wireTransferFk = ref(null);
|
||||
const bankEntitiesOptions = ref([]);
|
||||
|
||||
const onBankEntityCreated = (data) => {
|
||||
bankEntitiesOptions.value.push(data);
|
||||
};
|
||||
|
||||
const onChangesSaved = () => {
|
||||
if (supplier.value.payMethodFk !== wireTransferFk.value)
|
||||
quasar
|
||||
.dialog({
|
||||
message: t('Do you want to change the pay method to wire transfer?'),
|
||||
ok: {
|
||||
push: true,
|
||||
color: 'primary',
|
||||
},
|
||||
cancel: true,
|
||||
})
|
||||
.onOk(async () => {
|
||||
await setWireTransfer();
|
||||
});
|
||||
};
|
||||
|
||||
const setWireTransfer = async () => {
|
||||
try {
|
||||
const params = {
|
||||
id: route.params.id,
|
||||
payMethodFk: wireTransferFk.value,
|
||||
};
|
||||
|
||||
await axios.patch(`Suppliers/${route.params.id}`, params);
|
||||
notify('globals.dataSaved', 'positive');
|
||||
} catch (err) {
|
||||
console.error('Error setting wire transfer', err);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (supplierAccountRef.value) supplierAccountRef.value.reload();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<FetchData
|
||||
url="BankEntities"
|
||||
@on-fetch="(data) => (bankEntitiesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="payMethods/findOne"
|
||||
@on-fetch="(data) => (wireTransferFk = data.id)"
|
||||
:filter="{ where: { code: 'wireTransfer' } }"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
:url="`Suppliers/${route.params.id}`"
|
||||
@on-fetch="(data) => (supplier = data)"
|
||||
auto-load
|
||||
/>
|
||||
<CrudModel
|
||||
data-key="SupplierAccount"
|
||||
url="SupplierAccounts"
|
||||
model="SupplierAccounts"
|
||||
:filter="{
|
||||
fields: ['id', 'supplierFk', 'iban', 'bankEntityFk', 'beneficiary'],
|
||||
where: { supplierFk: route.params.id },
|
||||
}"
|
||||
ref="supplierAccountRef"
|
||||
:default-remove="false"
|
||||
:data-required="{ supplierFk: route.params.id }"
|
||||
@save-changes="onChangesSaved()"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard class="q-pa-md">
|
||||
<VnRow
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="row q-gutter-md q-mb-md"
|
||||
>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('supplier.accounts.iban')"
|
||||
v-model="row.iban"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectCreate
|
||||
:label="t('worker.create.bankEntity')"
|
||||
v-model="row.bankEntityFk"
|
||||
:options="bankEntitiesOptions"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
hide-selected
|
||||
>
|
||||
<template #form>
|
||||
<CreateBankEntityForm
|
||||
@on-data-saved="onBankEntityCreated($event)"
|
||||
:show-entity-field="false"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('supplier.accounts.beneficiary')"
|
||||
v-model="row.beneficiary"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-1 row justify-center items-center">
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="supplierAccountRef.remove([row])"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Remove account') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<QIcon
|
||||
name="add"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="supplierAccountRef.insert()"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Add account') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Do you want to change the pay method to wire transfer?: ¿Quieres modificar la forma de pago a transferencia?
|
||||
Add account: Añadir cuenta
|
||||
Remove account: Remover cuenta
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -1 +1,89 @@
|
|||
<template>Supplier addresses</template>
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import CardList from 'src/components/ui/CardList.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const addressesFilter = {
|
||||
fields: [
|
||||
'id',
|
||||
'nickname',
|
||||
'street',
|
||||
'city',
|
||||
'provinceFk',
|
||||
'phone',
|
||||
'mobile',
|
||||
'postalCode',
|
||||
],
|
||||
order: ['nickname ASC'],
|
||||
include: [
|
||||
{
|
||||
relation: 'province',
|
||||
scope: {
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const redirectToCreateView = () => {
|
||||
router.push({ name: 'SupplierCreate' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="card-list">
|
||||
<VnPaginate
|
||||
data-key="SupplierAddress"
|
||||
:url="`Suppliers/${route.params.id}/addresses`"
|
||||
:filter="addressesFilter"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<CardList
|
||||
v-for="row of rows"
|
||||
:key="row.id"
|
||||
:title="row.nickname"
|
||||
:id="row.id"
|
||||
@click="redirectToCreateView(row.id)"
|
||||
>
|
||||
<template #list-items>
|
||||
<VnLv
|
||||
:label="t('supplier.addresses.street')"
|
||||
:value="row.street"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('supplier.addresses.postcode')"
|
||||
:value="`${row.postalCode} - ${row.city}, ${row.province.name}`"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('supplier.addresses.phone')"
|
||||
:value="`${row.phone}, ${row.mobile}`"
|
||||
/>
|
||||
</template>
|
||||
</CardList>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<QPageSticky :offset="[20, 20]">
|
||||
<QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
|
||||
<QTooltip>
|
||||
{{ t('supplier.list.newSupplier') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
width: 100%;
|
||||
max-width: 60em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@ const { t } = useI18n();
|
|||
<QSpace />
|
||||
<div id="st-actions"></div>
|
||||
</QToolbar>
|
||||
<div class="q-pa-md"><RouterView></RouterView></div>
|
||||
<div class="q-pa-md">
|
||||
<RouterView />
|
||||
</div>
|
||||
</QPage>
|
||||
</QPageContainer>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1 +1,117 @@
|
|||
<template>Supplier contacts</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import CrudModel from 'components/CrudModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const supplierContactRef = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
if (supplierContactRef.value) supplierContactRef.value.reload();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<CrudModel
|
||||
data-key="SupplierContact"
|
||||
url="SupplierContacts"
|
||||
model="SupplierContact"
|
||||
:filter="{
|
||||
where: { supplierFk: route.params.id },
|
||||
}"
|
||||
ref="supplierContactRef"
|
||||
:default-remove="false"
|
||||
:data-required="{ supplierFk: route.params.id }"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard class="q-pa-md">
|
||||
<QCardSection
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="border q-pa-md q-mb-md"
|
||||
>
|
||||
<VnRow class="row q-gutter-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('supplier.contacts.name')"
|
||||
v-model="row.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('supplier.contacts.phone')"
|
||||
v-model="row.phone"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('supplier.contacts.mobile')"
|
||||
v-model="row.mobile"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('supplier.contacts.email')"
|
||||
v-model="row.email"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md">
|
||||
<div class="col">
|
||||
<QInput
|
||||
:label="t('supplier.contacts.observation')"
|
||||
type="textarea"
|
||||
v-model="row.observation"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</div>
|
||||
<div class="col-1 row justify-center items-center">
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="supplierContactRef.remove([row])"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Remove contact') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
</VnRow>
|
||||
</QCardSection>
|
||||
<VnRow>
|
||||
<QIcon
|
||||
name="add"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="supplierContactRef.insert()"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Add contact') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border {
|
||||
border-radius: 0px !important;
|
||||
border: 1px solid var(--vn-text) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Add contact: Añadir contacto
|
||||
Remove contact: Remover contacto
|
||||
</i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue