forked from verdnatura/salix-front
Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into dev
This commit is contained in:
commit
07e45f2051
|
|
@ -369,7 +369,7 @@ function handleOnDataSaved(_) {
|
|||
@on-fetch="(...args) => emit('onFetch', ...args)"
|
||||
:search-url="searchUrl"
|
||||
:disable-infinite-scroll="
|
||||
$attrs['disableInfiniteScroll'] ? isTableMode : disableInfiniteScroll
|
||||
$attrs['disableInfiniteScroll'] ? isTableMode : !disableInfiniteScroll
|
||||
"
|
||||
@save-changes="reload"
|
||||
:has-sub-toolbar="$props.hasSubToolbar ?? isEditable"
|
||||
|
|
@ -507,11 +507,8 @@ function handleOnDataSaved(_) {
|
|||
:key="index"
|
||||
:title="btn.title"
|
||||
:icon="btn.icon"
|
||||
class="q-px-sm"
|
||||
class="q-px-sm text-primary-light"
|
||||
flat
|
||||
:class="
|
||||
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
|
||||
"
|
||||
:style="`visibility: ${
|
||||
(btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
|
||||
}`"
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ import { useRoute } from 'vue-router';
|
|||
import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
|
||||
import axios from 'axios';
|
||||
|
||||
import VnUserLink from '../ui/VnUserLink.vue';
|
||||
import { downloadFile } from 'src/composables/downloadFile';
|
||||
import VnImg from 'components/ui/VnImg.vue';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import VnDms from 'src/components/common/VnDms.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import VnUserLink from '../ui/VnUserLink.vue';
|
||||
import { downloadFile } from 'src/composables/downloadFile';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
const route = useRoute();
|
||||
const quasar = useQuasar();
|
||||
|
|
@ -18,6 +20,7 @@ const { t } = useI18n();
|
|||
const rows = ref();
|
||||
const dmsRef = ref();
|
||||
const formDialog = ref({});
|
||||
const token = useSession().getTokenMultimedia();
|
||||
|
||||
const $props = defineProps({
|
||||
model: {
|
||||
|
|
@ -89,6 +92,23 @@ const dmsFilter = {
|
|||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: '',
|
||||
name: 'file',
|
||||
align: 'left',
|
||||
component: VnImg,
|
||||
props: (prop) => {
|
||||
return {
|
||||
storage: 'dms',
|
||||
collection: null,
|
||||
resolution: null,
|
||||
id: prop.row.file.split('.')[0],
|
||||
token: token,
|
||||
class: 'rounded',
|
||||
ratio: 1,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'id',
|
||||
|
|
@ -142,13 +162,6 @@ const columns = computed(() => [
|
|||
'model-value': Boolean(prop.value),
|
||||
}),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'file',
|
||||
label: t('globals.file'),
|
||||
name: 'file',
|
||||
component: 'span',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'worker',
|
||||
|
|
@ -395,10 +408,6 @@ defineExpose({
|
|||
</QPageSticky>
|
||||
</template>
|
||||
<style scoped>
|
||||
.q-gutter-y-ms {
|
||||
display: grid;
|
||||
row-gap: 20px;
|
||||
}
|
||||
.labelColor {
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ const getUrl = (zoom = false) => {
|
|||
const curResolution = zoom
|
||||
? $props.zoomResolution || $props.resolution
|
||||
: $props.resolution;
|
||||
if ($props.storage === 'dms')
|
||||
return `/api/${$props.storage}/${$props.id}/downloadFile?access_token=${token}`;
|
||||
return isEmployee
|
||||
? `/api/${$props.storage}/${$props.collection}/${curResolution}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
|
||||
: noImage;
|
||||
|
|
@ -66,6 +68,7 @@ defineExpose({
|
|||
v-bind="$attrs"
|
||||
spinner-color="primary"
|
||||
class="img_zoom"
|
||||
:ratio="0"
|
||||
/>
|
||||
</QDialog>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -224,13 +224,20 @@ defineExpose({ fetch, addFilter, paginate });
|
|||
v-bind="$attrs"
|
||||
>
|
||||
<slot name="body" :rows="store.data"></slot>
|
||||
<div v-if="isLoading" class="info-row q-pa-md text-center">
|
||||
<div v-if="isLoading" class="spinner info-row q-pa-md text-center">
|
||||
<QSpinner color="primary" size="md" />
|
||||
</div>
|
||||
</QInfiniteScroll>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spinner {
|
||||
z-index: 1;
|
||||
align-content: end;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.info-row {
|
||||
width: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export function usePrintService() {
|
|||
);
|
||||
}
|
||||
|
||||
function openReport(path, params) {
|
||||
function openReport(path, params, isNewTab = '_self') {
|
||||
if (typeof params === 'string') params = JSON.parse(params);
|
||||
params = Object.assign(
|
||||
{
|
||||
|
|
@ -26,8 +26,7 @@ export function usePrintService() {
|
|||
);
|
||||
|
||||
const query = new URLSearchParams(params).toString();
|
||||
|
||||
window.open(`api/${path}?${query}`);
|
||||
window.open(`api/${path}?${query}`, isNewTab);
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -133,6 +133,7 @@ globals:
|
|||
fiscalData: Fiscal data
|
||||
billingData: Billing data
|
||||
consignees: Consignees
|
||||
'address-create': New address
|
||||
notes: Notes
|
||||
credits: Credits
|
||||
greuges: Greuges
|
||||
|
|
@ -816,6 +817,16 @@ worker:
|
|||
credit: Have
|
||||
concept: Concept
|
||||
wagon:
|
||||
pageTitles:
|
||||
wagons: Wagons
|
||||
wagonsList: Wagons List
|
||||
wagonCreate: Create wagon
|
||||
wagonEdit: Edit wagon
|
||||
typesList: Types List
|
||||
typeCreate: Create type
|
||||
typeEdit: Edit type
|
||||
wagonCounter: Trolley counter
|
||||
wagonTray: Tray List
|
||||
type:
|
||||
name: Name
|
||||
submit: Submit
|
||||
|
|
|
|||
|
|
@ -136,6 +136,7 @@ globals:
|
|||
fiscalData: Datos fiscales
|
||||
billingData: Forma de pago
|
||||
consignees: Consignatarios
|
||||
'address-create': Nuevo consignatario
|
||||
notes: Notas
|
||||
credits: Créditos
|
||||
greuges: Greuges
|
||||
|
|
@ -814,6 +815,16 @@ worker:
|
|||
credit: Haber
|
||||
concept: Concepto
|
||||
wagon:
|
||||
pageTitles:
|
||||
wagons: Vagones
|
||||
wagonsList: Listado vagones
|
||||
wagonCreate: Crear tipo
|
||||
wagonEdit: Editar tipo
|
||||
typesList: Listado tipos
|
||||
typeCreate: Crear tipo
|
||||
typeEdit: Editar tipo
|
||||
wagonCounter: Contador de carros
|
||||
wagonTray: Listado bandejas
|
||||
type:
|
||||
name: Nombre
|
||||
submit: Guardar
|
||||
|
|
|
|||
|
|
@ -179,6 +179,13 @@ const toCustomerAddressEdit = (addressId) => {
|
|||
{{ item.postalCode }} - {{ item.city }},
|
||||
{{ setProvince(item.provinceFk) }}
|
||||
</div>
|
||||
<div>
|
||||
{{ item.phone }}
|
||||
<span v-if="item.mobile"
|
||||
>,
|
||||
{{ item.mobile }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<QCheckbox
|
||||
:label="t('Is equalizated')"
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ import { useRoute } from 'vue-router';
|
|||
import { useAcl } from 'src/composables/useAcl';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
||||
import { toCurrency, toDate, toDateHourMin } from 'src/filters';
|
||||
import { useState } from 'composables/useState';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { usePrintService } from 'composables/usePrintService';
|
||||
import { useSession } from 'composables/useSession';
|
||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
|
|
@ -22,12 +22,10 @@ import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment
|
|||
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
||||
|
||||
const { openConfirmationModal } = useVnConfirm();
|
||||
const { sendEmail } = usePrintService();
|
||||
const { sendEmail, openReport } = usePrintService();
|
||||
const { t } = useI18n();
|
||||
const { hasAny } = useAcl();
|
||||
|
||||
const session = useSession();
|
||||
const tokenMultimedia = session.getTokenMultimedia();
|
||||
const currentBalance = ref({});
|
||||
const quasar = useQuasar();
|
||||
const route = useRoute();
|
||||
const state = useState();
|
||||
|
|
@ -36,7 +34,7 @@ const user = state.getUser();
|
|||
|
||||
const clientRisk = ref([]);
|
||||
const tableRef = ref();
|
||||
const companyId = ref();
|
||||
const companyId = ref(user.value.companyFk);
|
||||
const companyLastId = ref(user.value.companyFk);
|
||||
const balances = ref([]);
|
||||
const vnFilterRef = ref({});
|
||||
|
|
@ -76,14 +74,14 @@ const companyFilterColumn = {
|
|||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
align: 'right',
|
||||
name: 'payed',
|
||||
label: t('Date'),
|
||||
format: ({ payed }) => toDate(payed),
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
align: 'right',
|
||||
name: 'created',
|
||||
label: t('Creation date'),
|
||||
format: ({ created }) => toDateHourMin(created),
|
||||
|
|
@ -91,11 +89,10 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'workerFk',
|
||||
label: t('Employee'),
|
||||
columnField: {
|
||||
component: 'userLink',
|
||||
attrs: ({ row }) => ({ workerId: row.workerFk, tag: row.userName }),
|
||||
attrs: ({ row }) => ({ workerId: row.workerFk, name: row.userName }),
|
||||
},
|
||||
cardVisible: true,
|
||||
},
|
||||
|
|
@ -120,14 +117,14 @@ const columns = computed(() => [
|
|||
isId: true,
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
align: 'left',
|
||||
name: 'credit',
|
||||
label: t('Havings'),
|
||||
format: ({ credit }) => credit && toCurrency(credit),
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
align: 'left',
|
||||
name: 'balance',
|
||||
label: t('Balance'),
|
||||
format: ({ balance }) => toCurrency(balance),
|
||||
|
|
@ -166,41 +163,15 @@ const columns = computed(() => [
|
|||
|
||||
onBeforeMount(() => {
|
||||
stateStore.rightDrawer = true;
|
||||
companyId.value = user.value.companyFk;
|
||||
});
|
||||
|
||||
async function getClientRisk() {
|
||||
const { data } = await axios.get(`clientRisks`, {
|
||||
params: {
|
||||
filter: JSON.stringify({
|
||||
include: { relation: 'company', scope: { fields: ['code'] } },
|
||||
where: { clientFk: route.params.id, companyFk: user.value.companyFk },
|
||||
}),
|
||||
},
|
||||
});
|
||||
clientRisk.value = data;
|
||||
return clientRisk.value;
|
||||
async function getCurrentBalance(data) {
|
||||
for (const balance of data) {
|
||||
currentBalance.value[balance.companyFk] = {
|
||||
code: balance.company.code,
|
||||
amount: balance.amount,
|
||||
};
|
||||
}
|
||||
|
||||
async function getCurrentBalance() {
|
||||
const currentBalance = (await getClientRisk()).find((balance) => {
|
||||
return balance.companyFk === companyId.value;
|
||||
});
|
||||
return currentBalance && currentBalance.amount;
|
||||
}
|
||||
|
||||
async function onFetch(data) {
|
||||
balances.value = [];
|
||||
for (const [index, balance] of data.entries()) {
|
||||
if (index === 0) {
|
||||
balance.balance = await getCurrentBalance();
|
||||
continue;
|
||||
}
|
||||
const previousBalance = data[index - 1];
|
||||
balance.balance =
|
||||
previousBalance?.balance - (previousBalance?.debit - previousBalance?.credit);
|
||||
}
|
||||
balances.value = data;
|
||||
}
|
||||
|
||||
const showNewPaymentDialog = () => {
|
||||
|
|
@ -215,19 +186,27 @@ const showNewPaymentDialog = () => {
|
|||
};
|
||||
|
||||
const showBalancePdf = ({ id }) => {
|
||||
const url = `api/InvoiceOuts/${id}/download?access_token=${tokenMultimedia}`;
|
||||
window.open(url, '_blank');
|
||||
openReport(`InvoiceOuts/${id}/download`, {}, '_blank');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="clientRisks"
|
||||
:filter="{
|
||||
include: { relation: 'company', scope: { fields: ['code'] } },
|
||||
where: { clientFk: route.params.id, companyFk: companyId },
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="getCurrentBalance"
|
||||
></FetchData>
|
||||
<VnSubToolbar class="q-mb-md">
|
||||
<template #st-data>
|
||||
<div class="column justify-center q-px-md q-py-sm">
|
||||
<span class="text-bold">{{ t('Total by company') }}</span>
|
||||
<div class="row justify-center" v-if="clientRisk?.length">
|
||||
{{ clientRisk[0].company.code }}:
|
||||
{{ toCurrency(clientRisk[0].amount) }}
|
||||
<div class="row justify-center">
|
||||
{{ currentBalance[companyId]?.code }}:
|
||||
{{ toCurrency(currentBalance[companyId]?.amount) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -253,7 +232,6 @@ const showBalancePdf = ({ id }) => {
|
|||
:right-search="false"
|
||||
:is-editable="false"
|
||||
:column-search="false"
|
||||
@on-fetch="onFetch"
|
||||
:disable-option="{ card: true }"
|
||||
auto-load
|
||||
>
|
||||
|
|
@ -262,7 +240,7 @@ const showBalancePdf = ({ id }) => {
|
|||
</template>
|
||||
<template #column-description="{ row }">
|
||||
<div class="link" v-if="row.isInvoice">
|
||||
{{ row.description }}
|
||||
{{ t('bill', { ref: row.description }) }}
|
||||
<InvoiceOutDescriptorProxy :id="row.description" />
|
||||
</div>
|
||||
<span v-else class="q-pa-xs dotted rounded-borders" :title="row.description">
|
||||
|
|
|
|||
|
|
@ -137,7 +137,6 @@ const title = ref();
|
|||
<VnRow>
|
||||
<VnSelect
|
||||
url="Clients"
|
||||
:where="{ id: { neq: $route.params.id } }"
|
||||
:input-debounce="0"
|
||||
:label="t('customer.basicData.previousClient')"
|
||||
:options="clients"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { ref } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
|
@ -14,8 +13,6 @@ import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
|
|||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const payMethods = ref([]);
|
||||
const bankEntitiesOptions = ref([]);
|
||||
const bankEntitiesRef = ref(null);
|
||||
|
||||
const filter = {
|
||||
|
|
@ -31,15 +28,6 @@ const getBankEntities = (data, formData) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
|
||||
<FetchData
|
||||
ref="bankEntitiesRef"
|
||||
@on-fetch="(data) => (bankEntitiesOptions = data)"
|
||||
:filter="filter"
|
||||
auto-load
|
||||
url="BankEntities"
|
||||
/>
|
||||
|
||||
<FormModel
|
||||
:url-update="`Clients/${route.params.id}`"
|
||||
:url="`Clients/${route.params.id}/getCard`"
|
||||
|
|
@ -49,8 +37,9 @@ const getBankEntities = (data, formData) => {
|
|||
<template #form="{ data, validate }">
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
auto-load
|
||||
url="PayMethods"
|
||||
:label="t('Billing data')"
|
||||
:options="payMethods"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
|
|
@ -69,7 +58,10 @@ const getBankEntities = (data, formData) => {
|
|||
</VnInput>
|
||||
<VnSelectDialog
|
||||
:label="t('Swift / BIC')"
|
||||
:options="bankEntitiesOptions"
|
||||
ref="bankEntitiesRef"
|
||||
:filter="filter"
|
||||
auto-load
|
||||
url="BankEntities"
|
||||
:acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
|
||||
:rules="validate('Worker.bankEntity')"
|
||||
hide-selected
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const columns = computed(() => [
|
|||
{
|
||||
align: 'right',
|
||||
field: 'rating',
|
||||
label: t('Rating'),
|
||||
label: t('customer.summary.rating'),
|
||||
name: 'rating',
|
||||
create: true,
|
||||
columnCreate: {
|
||||
|
|
@ -56,7 +56,7 @@ const columns = computed(() => [
|
|||
align: 'right',
|
||||
field: 'recommendedCredit',
|
||||
format: ({ recommendedCredit }) => toCurrency(recommendedCredit),
|
||||
label: t('Recommended credit'),
|
||||
label: t('customer.summary.recommendCredit'),
|
||||
name: 'recommendedCredit',
|
||||
create: true,
|
||||
columnCreate: {
|
||||
|
|
@ -89,8 +89,8 @@ const columns = computed(() => [
|
|||
}"
|
||||
>
|
||||
<template #column-employee="{ row }">
|
||||
<span class="link" @click.stop>{{ row.worker.user.nickname }}</span>
|
||||
<WorkerDescriptorProxy :id="row.clientFk" />
|
||||
<span class="link">{{ row.worker.user.nickname }}</span>
|
||||
<WorkerDescriptorProxy :id="row.worker.id" />
|
||||
</template>
|
||||
</VnTable>
|
||||
<!-- <QTable
|
||||
|
|
@ -113,7 +113,6 @@ const columns = computed(() => [
|
|||
|
||||
<i18n>
|
||||
es:
|
||||
Rating: Clasificación
|
||||
Recommended credit: Crédito recomendado
|
||||
Since: Desde
|
||||
Employee: Empleado
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ import { useRoute } from 'vue-router';
|
|||
import { toCurrency } from 'src/filters';
|
||||
import { toDateTimeFormat } from 'src/filters/date';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
const entityId = computed(() => route.params.id);
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const rows = ref([]);
|
||||
const totalAmount = ref();
|
||||
const tableRef = ref();
|
||||
const filter = computed(() => {
|
||||
|
|
@ -28,7 +28,7 @@ const filter = computed(() => {
|
|||
},
|
||||
],
|
||||
where: {
|
||||
clientFk: route.params.id,
|
||||
clientFk: entityId,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
@ -84,14 +84,14 @@ const columns = computed(() => [
|
|||
create: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const setRows = (data) => {
|
||||
rows.value = data;
|
||||
totalAmount.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
:url="`Greuges/${entityId}/sumAmount`"
|
||||
auto-load
|
||||
@on-fetch="({ sumAmount }) => (totalAmount = sumAmount)"
|
||||
></FetchData>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="Greuges"
|
||||
|
|
@ -104,7 +104,6 @@ const setRows = (data) => {
|
|||
:is-editable="false"
|
||||
:use-model="true"
|
||||
:column-search="false"
|
||||
@on-fetch="(data) => setRows(data)"
|
||||
:disable-option="{ card: true }"
|
||||
:create="{
|
||||
urlCreate: `Greuges`,
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { toDateTimeFormat } from 'src/filters/date';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const rows = ref([]);
|
||||
|
||||
const filter = {
|
||||
include: [
|
||||
{ relation: 'mandateType', scope: { fields: ['id', 'name'] } },
|
||||
{ relation: 'mandateType', scope: { fields: ['id', 'code'] } },
|
||||
{ relation: 'company', scope: { fields: ['id', 'code'] } },
|
||||
],
|
||||
where: { clientFk: route.params.id },
|
||||
|
|
@ -22,114 +21,61 @@ const filter = {
|
|||
limit: 20,
|
||||
};
|
||||
|
||||
const tableColumnComponents = {
|
||||
id: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
company: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
type: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
registerDate: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
endDate: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
field: 'id',
|
||||
label: t('Id'),
|
||||
name: 'id',
|
||||
label: t('globals.id'),
|
||||
field: 'id',
|
||||
isId: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: (row) => row.company.code,
|
||||
label: t('Company'),
|
||||
cardVisible: true,
|
||||
format: ({ company }) => company.code,
|
||||
label: t('globals.company'),
|
||||
name: 'company',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: (row) => row.mandateType.name,
|
||||
label: t('Type'),
|
||||
cardVisible: true,
|
||||
format: ({ mandateType }) => mandateType.code,
|
||||
label: t('globals.type'),
|
||||
name: 'type',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'created',
|
||||
cardVisible: true,
|
||||
label: t('Register date'),
|
||||
name: 'registerDate',
|
||||
format: (value) => toDateTimeFormat(value),
|
||||
name: 'created',
|
||||
format: ({ created }) => toDateTimeFormat(created),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'finished',
|
||||
align: 'right',
|
||||
cardVisible: true,
|
||||
name: 'finished',
|
||||
label: t('End date'),
|
||||
name: 'endDate',
|
||||
format: (value) => (value ? toDateTimeFormat(value) : '-'),
|
||||
format: ({ finished }) => dashIfEmpty(toDateTimeFormat(finished)),
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<VnTable
|
||||
:filter="filter"
|
||||
@on-fetch="(data) => (rows = data)"
|
||||
auto-load
|
||||
url="Mandates"
|
||||
/>
|
||||
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 12 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
row-key="id"
|
||||
v-if="rows?.length"
|
||||
>
|
||||
<template #body-cell="props">
|
||||
<QTd :props="props">
|
||||
<QTr :props="props" class="cursor-pointer">
|
||||
<component
|
||||
:is="tableColumnComponents[props.col.name].component"
|
||||
@click="tableColumnComponents[props.col.name].event(props)"
|
||||
class="rounded-borders q-pa-sm"
|
||||
v-bind="tableColumnComponents[props.col.name].props(props)"
|
||||
>
|
||||
{{ props.value }}
|
||||
</component>
|
||||
</QTr>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
|
||||
<h5 class="flex justify-center color-vn-label" v-else>
|
||||
{{ t('globals.noResults') }}
|
||||
</h5>
|
||||
:right-search="false"
|
||||
:row-click="false"
|
||||
/>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Id: Id
|
||||
Company: Empresa
|
||||
Type: Tipo
|
||||
Register date: Fecha alta
|
||||
End date: Fecha baja
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ function setFinished(id) {
|
|||
:disable-option="{ card: true }"
|
||||
:create="{
|
||||
urlCreate: 'Recoveries',
|
||||
title: 'New recovery',
|
||||
title: t('New recovery'),
|
||||
onDataSaved: () => tableRef.reload(),
|
||||
formInitialData: { clientFk: route.params.id, started: Date.vnNew() },
|
||||
}"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { QBtn, useQuasar } from 'quasar';
|
||||
|
||||
|
|
@ -13,7 +13,6 @@ import CustomerSamplesCreate from '../components/CustomerSamplesCreate.vue';
|
|||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const filter = {
|
||||
include: [
|
||||
|
|
@ -42,7 +41,16 @@ const columns = computed(() => [
|
|||
{
|
||||
align: 'left',
|
||||
label: t('Worker'),
|
||||
name: 'worker',
|
||||
columnField: {
|
||||
component: 'userLink',
|
||||
attrs: ({ row }) => {
|
||||
return {
|
||||
defaultName: true,
|
||||
workerId: row?.user?.id,
|
||||
name: row?.user?.name,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
@ -73,7 +81,9 @@ const tableRef = ref();
|
|||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 12 }"
|
||||
:disable-option="{ card: true }"
|
||||
:right-search="false"
|
||||
:rows="rows"
|
||||
:order="['created DESC']"
|
||||
class="full-width q-mt-md"
|
||||
row-key="id"
|
||||
:create="false"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useRoute } from 'vue-router';
|
|||
|
||||
import axios from 'axios';
|
||||
|
||||
import { toCurrency, toDateHourMinSec } from 'src/filters';
|
||||
import { toCurrency, toDateHourMin } from 'src/filters';
|
||||
|
||||
import CustomerCloseIconTooltip from '../components/CustomerCloseIconTooltip.vue';
|
||||
import CustomerCheckIconTooltip from '../components/CustomerCheckIconTooltip.vue';
|
||||
|
|
@ -74,7 +74,7 @@ const columns = computed(() => [
|
|||
field: 'created',
|
||||
label: t('Date'),
|
||||
name: 'date',
|
||||
format: (value) => toDateHourMinSec(value),
|
||||
format: (value) => toDateHourMin(value),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
|
|||
|
|
@ -151,6 +151,7 @@ const setShippedColor = (date) => {
|
|||
:disable-option="{ card: true, table: true }"
|
||||
limit="5"
|
||||
class="full-width"
|
||||
:disable-infinite-scroll="true"
|
||||
>
|
||||
<template #column-nickname="{ row }">
|
||||
<span class="link">
|
||||
|
|
|
|||
|
|
@ -41,8 +41,7 @@ const invoiceFormType = ref('pdf');
|
|||
const defaultEmailAddress = ref($props.invoiceOutData.client?.email);
|
||||
|
||||
const showInvoicePdf = () => {
|
||||
const url = `api/InvoiceOuts/${$props.invoiceOutData.id}/download?access_token=${token}`;
|
||||
window.open(url, '_blank');
|
||||
openReport(`InvoiceOuts/${$props.invoiceOutData.id}/download`, {}, '_blank');
|
||||
};
|
||||
|
||||
const showInvoiceCsv = () => {
|
||||
|
|
|
|||
|
|
@ -76,53 +76,28 @@ const columns = computed(() => [
|
|||
name: 'rate2',
|
||||
...defaultColumnAttrs,
|
||||
cardVisible: true,
|
||||
columnField: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
columnFilter: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('item.fixedPrice.packingPrice'),
|
||||
field: 'rate3',
|
||||
name: 'rate3',
|
||||
...defaultColumnAttrs,
|
||||
cardVisible: true,
|
||||
columnField: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
columnFilter: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
label: t('item.fixedPrice.minPrice'),
|
||||
field: 'minPrice',
|
||||
columnClass: 'shrink',
|
||||
name: 'minPrice',
|
||||
...defaultColumnAttrs,
|
||||
cardVisible: true,
|
||||
columnField: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
columnFilter: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('item.fixedPrice.started'),
|
||||
field: 'started',
|
||||
|
|
@ -162,17 +137,10 @@ const columns = computed(() => [
|
|||
name: 'warehouseFk',
|
||||
...defaultColumnAttrs,
|
||||
columnClass: 'shrink',
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
},
|
||||
columnField: {
|
||||
component: 'select',
|
||||
class: 'expand',
|
||||
},
|
||||
attrs: {
|
||||
|
||||
options: warehousesOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
name: 'tableActions',
|
||||
|
|
@ -518,29 +486,35 @@ function handleOnDataSave({ CrudModelRef }) {
|
|||
</span>
|
||||
<span class="subName">{{ row.subName }}</span>
|
||||
<ItemDescriptorProxy :id="row.itemFk" />
|
||||
<FetchedTags style="width: max-content; max-width: 220px" :item="row" />
|
||||
<FetchedTags :item="row" />
|
||||
</template>
|
||||
<template #column-rate2="props">
|
||||
<QTd class="col">
|
||||
<VnInput
|
||||
mask="###.##"
|
||||
type="currency"
|
||||
style="width: 75px"
|
||||
v-model.number="props.row.rate2"
|
||||
v-on="getRowUpdateInputEvents(props)"
|
||||
>
|
||||
<template #append>€</template>
|
||||
</VnInput>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-rate3="props">
|
||||
<QTd class="col">
|
||||
<VnInput
|
||||
mask="###.##"
|
||||
style="width: 75px"
|
||||
type="currency"
|
||||
v-model.number="props.row.rate3"
|
||||
v-on="getRowUpdateInputEvents(props)"
|
||||
>
|
||||
<template #append>€</template>
|
||||
</VnInput>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-minPrice="props">
|
||||
<QTd class="col">
|
||||
<div class="row" style="width: 115px">
|
||||
<div class="row">
|
||||
<QCheckbox
|
||||
:model-value="props.row.hasMinPrice"
|
||||
@update:model-value="updateMinPrice($event, props)"
|
||||
|
|
@ -549,6 +523,8 @@ function handleOnDataSave({ CrudModelRef }) {
|
|||
/>
|
||||
<VnInput
|
||||
class="col"
|
||||
type="currency"
|
||||
mask="###.##"
|
||||
:disable="props.row.hasMinPrice === 1"
|
||||
v-model.number="props.row.minPrice"
|
||||
v-on="getRowUpdateInputEvents(props)"
|
||||
|
|
@ -577,6 +553,7 @@ function handleOnDataSave({ CrudModelRef }) {
|
|||
/>
|
||||
</template>
|
||||
<template #column-warehouseFk="props">
|
||||
<QTd class="col">
|
||||
<VnSelect
|
||||
style="max-width: 150px"
|
||||
:options="warehousesOptions"
|
||||
|
|
@ -586,6 +563,7 @@ function handleOnDataSave({ CrudModelRef }) {
|
|||
v-model="props.row.warehouseFk"
|
||||
v-on="getRowUpdateInputEvents(props, false, 'select')"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-deleteAction="{ row, rowIndex }">
|
||||
<QIcon
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
|
|||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
import { usePrintService } from 'src/composables/usePrintService';
|
||||
|
||||
const { openReport } = usePrintService();
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const quasar = useQuasar();
|
||||
|
|
@ -235,18 +237,15 @@ const cloneRoutes = () => {
|
|||
const showRouteReport = () => {
|
||||
const ids = selectedRows.value.map((row) => row?.id);
|
||||
const idString = ids.join(',');
|
||||
let url;
|
||||
|
||||
if (selectedRows.value.length <= 1) {
|
||||
url = `api/Routes/${idString}/driver-route-pdf?access_token=${session.getTokenMultimedia()}`;
|
||||
} else {
|
||||
const params = new URLSearchParams({
|
||||
access_token: session.getTokenMultimedia(),
|
||||
let url = `Routes/${idString}/driver-route-pdf`;
|
||||
let params = {};
|
||||
if (selectedRows.value.length >= 1) {
|
||||
params = {
|
||||
id: idString,
|
||||
});
|
||||
url = `api/Routes/downloadZip?${params.toString()}`;
|
||||
};
|
||||
url = `Routes/downloadZip`;
|
||||
}
|
||||
window.open(url, '_blank');
|
||||
openReport(url, params, '_blank');
|
||||
};
|
||||
|
||||
function markAsServed() {
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ onMounted(async () => {
|
|||
:label="t('params.state')"
|
||||
v-model="params.state"
|
||||
:options="stateOptions"
|
||||
option-value="code"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="searchFn()"
|
||||
dense
|
||||
|
|
@ -169,7 +169,7 @@ onMounted(async () => {
|
|||
:label="t('params.futureState')"
|
||||
v-model="params.futureState"
|
||||
:options="stateOptions"
|
||||
option-value="code"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="searchFn()"
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ import VnRow from 'src/components/ui/VnRow.vue';
|
|||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import TicketFilter from './TicketFilter.vue';
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
|
|
@ -25,7 +24,6 @@ const addressesOptions = ref([]);
|
|||
const agenciesOptions = ref([]);
|
||||
const selectedClient = ref();
|
||||
const stateStore = useStateStore();
|
||||
const route = useRoute();
|
||||
const from = Date.vnNew();
|
||||
from.setHours(0, 0, 0, 0);
|
||||
const to = Date.vnNew();
|
||||
|
|
@ -46,16 +44,6 @@ const initializeFromQuery = () => {
|
|||
Object.assign(userParams, { from, to });
|
||||
};
|
||||
|
||||
// Método para inicializar las variables desde la query string
|
||||
const initializeFromQuery = () => {
|
||||
const query = route.query.table ? JSON.parse(route.query.table) : {};
|
||||
|
||||
// Asigna los valores a las variables correspondientes
|
||||
from.value = query.from || from.toISOString();
|
||||
to.value = query.to || to.toISOString();
|
||||
Object.assign(userParams, { from, to });
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import FormPopup from 'src/components/FormPopup.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
|
||||
const $props = defineProps({
|
||||
entityId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const entityId = ref($props.entityId);
|
||||
const selectedTrayColor = ref();
|
||||
const trayHeight = ref();
|
||||
const wagonColors = ref([]);
|
||||
const wagonColorTranslated = ref();
|
||||
const heights = ref();
|
||||
const existingTrayHeight = ref($props.height);
|
||||
const { t } = useI18n();
|
||||
|
||||
watch(wagonColors, () => {
|
||||
wagonColorTranslated.value = wagonColors.value.map((color) => {
|
||||
return { ...color, name: t(`colors.${color.name}`) };
|
||||
});
|
||||
});
|
||||
const emit = defineEmits(['onSubmit']);
|
||||
|
||||
async function getTrays() {
|
||||
const { data } = await axios.get('WagonTypeTrays', undefined, {
|
||||
filter: { wagonTypeFk: entityId.value },
|
||||
});
|
||||
existingTrayHeight.value = data.filter((item) => item.wagonTypeFk == entityId.value);
|
||||
heights.value = existingTrayHeight.value.map((item) => item.height);
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
emit('onSubmit', {
|
||||
wagonTypeFk: entityId.value,
|
||||
wagonTypeColorFk: selectedTrayColor.value,
|
||||
height: trayHeight.value,
|
||||
});
|
||||
}
|
||||
getTrays();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="WagonTypeColors"
|
||||
@on-fetch="(data) => (wagonColors = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FormPopup
|
||||
ref="createTrayFormDialogRef"
|
||||
@on-submit="onSubmit()"
|
||||
:title="t('Add new tray')"
|
||||
:entity-id="selectedEntityId"
|
||||
>
|
||||
<template #form-inputs>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<VnSelect
|
||||
v-model="selectedTrayColor"
|
||||
:options="wagonColorTranslated"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
id="id"
|
||||
:label="t('Select a tray color')"
|
||||
:required="true"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps" clickable>
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInput v-model="trayHeight" :label="t('Height')" type="number" />
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormPopup>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
Select a tray: Select a tray
|
||||
colors:
|
||||
white: White
|
||||
red: Red
|
||||
green: Green
|
||||
blue: Blue
|
||||
es:
|
||||
Select a tray color: Seleccione un color
|
||||
Add new tray: Añadir nueva bandeja
|
||||
Height: Altura
|
||||
The minimum height between trays is 50cm: La altura mínima entre bandejas es de 50cm
|
||||
The maximum height of the wagon is 200cm: La altura máxima del vagón es de 200cm
|
||||
A tray with the same height already exists, try with a different height: Ya existe una bandeja con la misma altura, prueba con una diferente
|
||||
colors:
|
||||
white: Blanco
|
||||
red: Rojo
|
||||
green: Verde
|
||||
blue: Azul
|
||||
</i18n>
|
||||
|
|
@ -1,433 +0,0 @@
|
|||
<script setup>
|
||||
import { computed, ref, onMounted, onUpdated } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
|
||||
onMounted(() => fetch());
|
||||
onUpdated(() => fetch());
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const quasar = useQuasar();
|
||||
const router = useRouter();
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
const entityId = computed(() => $props.id || route.params.id);
|
||||
|
||||
const wagon = ref([]);
|
||||
const divisible = ref(false);
|
||||
const name = ref('');
|
||||
const colorPickerActive = ref(false);
|
||||
let originalData = { trays: [] };
|
||||
let wagonConfig;
|
||||
let wagonTypeColors;
|
||||
let currentTrayColorPicked;
|
||||
|
||||
async function fetch() {
|
||||
try {
|
||||
await axios.get('WagonConfigs').then(async (res) => {
|
||||
if (res.data) {
|
||||
wagonConfig = res.data[0];
|
||||
}
|
||||
});
|
||||
|
||||
await axios.get(`WagonTypeColors`).then(async (res) => {
|
||||
if (res.data) {
|
||||
wagonTypeColors = res.data;
|
||||
if (!entityId.value)
|
||||
wagon.value.push({
|
||||
id: 0,
|
||||
position: 0,
|
||||
color: { ...wagonTypeColors[0] },
|
||||
action: 'add',
|
||||
});
|
||||
else {
|
||||
await axios
|
||||
.get(`WagonTypeTrays`, {
|
||||
params: { filter: { where: { typeFk: entityId.value } } },
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (res.data) {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
const tray = res.data[i];
|
||||
wagon.value.push({
|
||||
id: res.data.length - i - 1,
|
||||
position: tray.height,
|
||||
color: {
|
||||
...wagonTypeColors.find((color) => {
|
||||
return color.id === tray.colorFk;
|
||||
}),
|
||||
},
|
||||
action: tray.height == 0 ? 'add' : 'delete',
|
||||
});
|
||||
}
|
||||
wagon.value.forEach((value) => {
|
||||
originalData.trays.push({ ...value });
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (entityId.value) {
|
||||
await axios.get(`WagonTypes/${entityId.value}`).then((res) => {
|
||||
if (res.data) {
|
||||
originalData.name = name.value = res.data.name;
|
||||
originalData.divisible = divisible.value = res.data.divisible;
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
function addTray() {
|
||||
if (
|
||||
wagon.value.find((tray) => {
|
||||
return tray.position == null;
|
||||
})
|
||||
) {
|
||||
quasar.notify({
|
||||
message: t('wagon.warnings.uncompleteTrays'),
|
||||
type: 'warning',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (wagon.value.length < wagonConfig.maxTrays) {
|
||||
wagon.value.unshift({
|
||||
id: wagon.value.length,
|
||||
position: null,
|
||||
color: { ...wagonTypeColors[0] },
|
||||
action: 'delete',
|
||||
});
|
||||
} else {
|
||||
quasar.notify({
|
||||
message: t('wagon.warnings.maxTrays'),
|
||||
type: 'warning',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function deleteTray(trayToDelete) {
|
||||
wagon.value = wagon.value.filter((tray) => tray.id !== trayToDelete.id);
|
||||
reorderIds();
|
||||
}
|
||||
|
||||
function reorderIds() {
|
||||
for (let index = wagon.value.length - 1; index >= 0; index--) {
|
||||
wagon.value[index].id = index;
|
||||
}
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
try {
|
||||
const path = entityId.value
|
||||
? 'WagonTypes/editWagonType'
|
||||
: 'WagonTypes/createWagonType';
|
||||
|
||||
const params = {
|
||||
id: entityId.value,
|
||||
name: name.value,
|
||||
divisible: divisible.value,
|
||||
trays: wagon.value,
|
||||
};
|
||||
|
||||
await axios.patch(path, params).then((res) => {
|
||||
if (res.status == 204) router.push({ path: `/wagon/type/list` });
|
||||
});
|
||||
} catch (error) {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
function onReset() {
|
||||
name.value = entityId.value ? originalData.name : null;
|
||||
divisible.value = entityId.value ? originalData.divisible : false;
|
||||
wagon.value = entityId.value
|
||||
? [...originalData.trays]
|
||||
: [
|
||||
{
|
||||
id: 0,
|
||||
position: 0,
|
||||
color: { ...wagonTypeColors[0] },
|
||||
action: 'add',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function doAction(tray) {
|
||||
if (tray.action == 'add') {
|
||||
addTray();
|
||||
} else {
|
||||
deleteTray(tray);
|
||||
}
|
||||
}
|
||||
|
||||
function showColorPicker(tray) {
|
||||
colorPickerActive.value = true;
|
||||
currentTrayColorPicked = wagon.value.findIndex((val) => {
|
||||
return val.id === tray.id;
|
||||
});
|
||||
}
|
||||
|
||||
function updateColor(newColor) {
|
||||
wagon.value[currentTrayColorPicked].color = {
|
||||
...wagonTypeColors.find((color) => {
|
||||
return color.rgb === newColor;
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
function onPositionBlur(tray) {
|
||||
if (tray.position) {
|
||||
if (tray.position == '' || tray.position < 0) {
|
||||
tray.position = null;
|
||||
return;
|
||||
}
|
||||
tray.position = parseInt(tray.position);
|
||||
wagon.value.sort((a, b) => b.position - a.position);
|
||||
reorderIds();
|
||||
for (let index = wagon.value.length - 1; index > 0; index--) {
|
||||
if (exceedMaxHeight(index - 1)) continue;
|
||||
if (
|
||||
wagon.value[index - 1].position - wagon.value[index].position >=
|
||||
wagonConfig.minHeightBetweenTrays
|
||||
) {
|
||||
continue;
|
||||
} else {
|
||||
wagon.value[index - 1].position +=
|
||||
wagonConfig.minHeightBetweenTrays -
|
||||
(wagon.value[index - 1].position - wagon.value[index].position);
|
||||
|
||||
quasar.notify({
|
||||
message:
|
||||
t('wagon.warnings.minHeightBetweenTrays') +
|
||||
wagonConfig.minHeightBetweenTrays +
|
||||
' cm',
|
||||
type: 'warning',
|
||||
});
|
||||
|
||||
exceedMaxHeight(index - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function exceedMaxHeight(pos) {
|
||||
if (wagon.value[pos].position > wagonConfig.maxWagonHeight) {
|
||||
wagon.value.splice(pos, 1);
|
||||
quasar.notify({
|
||||
message:
|
||||
t('wagon.warnings.maxWagonHeight') + wagonConfig.maxWagonHeight + ' cm',
|
||||
type: 'warning',
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QPage class="q-pa-sm q-mx-xl">
|
||||
<QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
|
||||
<QCard class="q-pa-md">
|
||||
<VnInput
|
||||
filled
|
||||
v-model="name"
|
||||
:label="t('wagon.type.name')"
|
||||
:rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
|
||||
/>
|
||||
<QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
|
||||
<div class="wagon-tray q-mx-lg" v-for="tray in wagon" :key="tray.id">
|
||||
<div class="position">
|
||||
<QInput
|
||||
autofocus
|
||||
filled
|
||||
type="number"
|
||||
:class="{ isVisible: tray.action == 'add' }"
|
||||
v-model="tray.position"
|
||||
@blur="onPositionBlur(tray)"
|
||||
>
|
||||
<QTooltip :delay="2000">
|
||||
{{
|
||||
t('wagon.warnings.minHeightBetweenTrays') +
|
||||
wagonConfig.minHeightBetweenTrays +
|
||||
' cm'
|
||||
}}
|
||||
<QSpace />
|
||||
{{
|
||||
t('wagon.warnings.maxWagonHeight') +
|
||||
wagonConfig.maxWagonHeight +
|
||||
' cm'
|
||||
}}
|
||||
</QTooltip>
|
||||
</QInput>
|
||||
</div>
|
||||
<div class="shelving">
|
||||
<div class="shelving-half">
|
||||
<div class="shelving-up"></div>
|
||||
<div
|
||||
class="shelving-down"
|
||||
:style="{ backgroundColor: tray.color.rgb }"
|
||||
@click="showColorPicker(tray)"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="shelving-divisible"
|
||||
:class="{ isVisible: !divisible }"
|
||||
></div>
|
||||
<div class="shelving-half">
|
||||
<div class="shelving-up"></div>
|
||||
<div
|
||||
class="shelving-down"
|
||||
:style="{ backgroundColor: tray.color.rgb }"
|
||||
@click="showColorPicker(tray)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-button">
|
||||
<QBtn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
:icon="tray.action"
|
||||
@click="doAction(tray)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-mb-sm wheels">
|
||||
<QIcon color="grey-6" name="trip_origin" size="xl" />
|
||||
<QIcon color="grey-6" name="trip_origin" size="xl" />
|
||||
</div>
|
||||
<QDialog
|
||||
v-model="colorPickerActive"
|
||||
position="right"
|
||||
:no-backdrop-dismiss="false"
|
||||
>
|
||||
<QCard>
|
||||
<QCardSection>
|
||||
<div class="text-h6">{{ t('wagon.type.trayColor') }}</div>
|
||||
</QCardSection>
|
||||
<QCardSection class="row items-center no-wrap">
|
||||
<QColor
|
||||
flat
|
||||
v-model="wagon[currentTrayColorPicked].color.rgb"
|
||||
no-header
|
||||
no-footer
|
||||
default-view="palette"
|
||||
:palette="
|
||||
wagonTypeColors.map((color) => {
|
||||
return color.rgb;
|
||||
})
|
||||
"
|
||||
@change="updateColor($event)"
|
||||
/>
|
||||
<QBtn flat round icon="close" v-close-popup />
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</QDialog>
|
||||
</QCard>
|
||||
<div class="q-mt-md">
|
||||
<QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
|
||||
<QBtn
|
||||
:label="t('wagon.type.reset')"
|
||||
type="reset"
|
||||
color="primary"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</QForm>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.q-form {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.q-dialog {
|
||||
.q-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.wheels {
|
||||
margin-left: 5%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.wagon-tray {
|
||||
display: flex;
|
||||
height: 6rem;
|
||||
|
||||
.position {
|
||||
width: 20%;
|
||||
border-right: 1rem solid gray;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.shelving {
|
||||
display: flex;
|
||||
width: 75%;
|
||||
|
||||
.shelving-half {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
|
||||
.shelving-up {
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shelving-down {
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.shelving-divisible {
|
||||
width: 1%;
|
||||
height: 100%;
|
||||
border-left: 0.5rem dashed grey;
|
||||
border-right: 0.5rem dashed grey;
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: 10%;
|
||||
border-left: 1rem solid gray;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.isVisible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import FormModel from 'src/components/FormModel.vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import WagonCreateTray from './WagonCreateTray.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { notify } = useQuasar();
|
||||
const route = useRoute();
|
||||
const entityId = computed(() => route.params.id);
|
||||
const wagonTrays = ref([]);
|
||||
const createTrayFormDialogRef = ref();
|
||||
const selectedEntityId = ref();
|
||||
|
||||
async function loadTrays() {
|
||||
try {
|
||||
const res = await axios.get('WagonTypeTrays');
|
||||
const filteredTrays = res.data.filter(
|
||||
(tray) => tray.wagonTypeFk === entityId.value
|
||||
);
|
||||
wagonTrays.value = filteredTrays;
|
||||
return;
|
||||
} catch (err) {
|
||||
console.error('Error loading trays:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function addTray(newTray) {
|
||||
const res = await axios.post(`WagonTypeTrays`, newTray);
|
||||
wagonTrays.value.push(res.data);
|
||||
notify({
|
||||
message: t(`Tray added successfully`),
|
||||
type: 'positive',
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteTray(trayToDelete) {
|
||||
await axios.delete(`WagonTypeTrays/${trayToDelete.id}`);
|
||||
const index = wagonTrays.value.findIndex((tray) => tray.id === trayToDelete.id);
|
||||
if (index !== -1) {
|
||||
wagonTrays.value.splice(index, 1);
|
||||
}
|
||||
notify({
|
||||
message: t('Tray deleted successfully'),
|
||||
type: 'positive',
|
||||
});
|
||||
}
|
||||
|
||||
const filter = {
|
||||
where: { wagonTypeFk: entityId.value },
|
||||
include: {
|
||||
relation: 'color',
|
||||
scope: {
|
||||
fields: ['rgb'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const formFilter = { where: { wagonTypeFk: entityId.value } };
|
||||
|
||||
const showCreateTrayForm = (id) => {
|
||||
selectedEntityId.value = id;
|
||||
createTrayFormDialogRef.value.show();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => wagonTrays.value,
|
||||
async (newVal, oldVal) => {
|
||||
if (newVal.length !== oldVal.length) {
|
||||
await loadTrays();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VnSubToolbar />
|
||||
<QPage class="q-pa-sm q-mx-xl">
|
||||
<FormModel
|
||||
:url="`WagonTypes/ ${entityId}`"
|
||||
:url-update="`WagonTypes/ ${entityId}`"
|
||||
:filter="formFilter"
|
||||
model="WagonType"
|
||||
auto-load
|
||||
>
|
||||
<template #form="{ data }">
|
||||
<QCard class="q-pa-md">
|
||||
<VnInput
|
||||
filled
|
||||
v-model="data.name"
|
||||
:label="t('wagon.type.name')"
|
||||
:rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
|
||||
/>
|
||||
<QCheckbox
|
||||
class="q-mb-sm"
|
||||
v-model="data.divisible"
|
||||
label="Divisible"
|
||||
/>
|
||||
|
||||
<VnPaginate
|
||||
data-key="wagonTypeTray"
|
||||
url="WagonTypeTrays"
|
||||
order="id DESC"
|
||||
:filter="filter"
|
||||
auto-load
|
||||
ref="vnPaginateRef"
|
||||
v-bind="$attrs"
|
||||
:key="wagonTrays.length"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<div v-for="row in rows" :key="row.id">
|
||||
<div class="shelving"></div>
|
||||
<div class="action-button">
|
||||
<div class="wagon-tray q-mx-lg">
|
||||
<div class="position">
|
||||
<VnInput
|
||||
borderless
|
||||
type="number"
|
||||
disable
|
||||
class="input-tray q-mb-sm"
|
||||
:label="t('Height') + ': '"
|
||||
v-model="row.height"
|
||||
/>
|
||||
</div>
|
||||
<div class="shelving">
|
||||
<div class="shelving-half">
|
||||
<div class="shelving-up"></div>
|
||||
<div
|
||||
class="shelving-down"
|
||||
:style="{
|
||||
backgroundColor: row.color.rgb,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="shelving-divisible"
|
||||
:class="{ isVisible: !data.divisible }"
|
||||
></div>
|
||||
<div class="shelving-half">
|
||||
<div class="shelving-up"></div>
|
||||
<div
|
||||
class="shelving-down"
|
||||
:style="{
|
||||
backgroundColor: row.color.rgb,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-button">
|
||||
<QBtn
|
||||
v-if="row.height === 0"
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
:icon="'add'"
|
||||
class="btn-tray"
|
||||
@click="showCreateTrayForm(entityId)"
|
||||
/>
|
||||
<QBtn
|
||||
v-else
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
:icon="'delete'"
|
||||
class="btn-tray"
|
||||
@click="deleteTray(row)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
<div class="q-mb-sm wheels">
|
||||
<QIcon color="grey-6" name="trip_origin" size="xl" />
|
||||
<QIcon color="grey-6" name="trip_origin" size="xl" />
|
||||
</div>
|
||||
</QCard>
|
||||
<QDialog ref="createTrayFormDialogRef">
|
||||
<WagonCreateTray :entity-id="entityId" @on-submit="addTray($event)" />
|
||||
</QDialog>
|
||||
</template>
|
||||
</FormModel>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.q-form {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.q-dialog {
|
||||
.q-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.wheels {
|
||||
margin-left: 5%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.wagon-tray {
|
||||
display: flex;
|
||||
height: 6rem;
|
||||
|
||||
.position {
|
||||
width: 26%;
|
||||
border-right: 1rem solid gray;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding-right: 2rem;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.shelving {
|
||||
display: flex;
|
||||
width: 54%;
|
||||
|
||||
.shelving-half {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.shelving-up {
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shelving-down {
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.shelving-divisible {
|
||||
width: 1%;
|
||||
height: 100%;
|
||||
border-left: 0.5rem dashed grey;
|
||||
border-right: 0.5rem dashed grey;
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: 20%;
|
||||
border-left: 1rem solid gray;
|
||||
align-items: baseline;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.isVisible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.btn-tray {
|
||||
margin-right: 100%;
|
||||
margin-top: 100%;
|
||||
}
|
||||
.input-tray {
|
||||
margin-top: 100%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
tray: Tray
|
||||
wagonColor: Wagon color
|
||||
Select a tray: Select a tray
|
||||
es:
|
||||
tray: Bandeja
|
||||
wagonColor: Color de la bandeja
|
||||
Select a tray: Seleccione una bandeja
|
||||
Create new Wagon type: Crear nuevo tipo de vagón
|
||||
Add new tray: Añadir nueva bandeja
|
||||
Height: Altura
|
||||
Tray added successfully: Bandeja añadida correctamente
|
||||
Tray deleted successfully: Bandeja eliminada correctamente
|
||||
</i18n>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
|
|
@ -6,36 +7,40 @@ import { useArrayData } from 'src/composables/useArrayData';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import CardList from 'components/ui/CardList.vue';
|
||||
import FormModelPopup from 'src/components/FormModelPopup.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const arrayData = useArrayData('WagonTypeList');
|
||||
const store = arrayData.store;
|
||||
const router = useRouter();
|
||||
const dialog = ref();
|
||||
const { push } = useRouter();
|
||||
const { t } = useI18n();
|
||||
const paginate = ref();
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/wagon/type/${id}/edit` });
|
||||
const initialData = computed(() => {
|
||||
return {
|
||||
name: null,
|
||||
};
|
||||
});
|
||||
|
||||
function reloadData() {
|
||||
initialData.value.name = null;
|
||||
paginate.value.fetch();
|
||||
}
|
||||
|
||||
function create() {
|
||||
router.push({ path: `/wagon/type/create` });
|
||||
function navigate(id, name) {
|
||||
push({ path: `/wagon/type/${id}/edit`, query: { name } });
|
||||
}
|
||||
|
||||
async function remove(row) {
|
||||
try {
|
||||
const id = row.id;
|
||||
await axios
|
||||
.delete(`WagonTypes/deleteWagonType`, { params: { id } })
|
||||
.then(async () => {
|
||||
await axios.delete(`WagonTypes/${row.id}`);
|
||||
quasar.notify({
|
||||
message: t('wagon.type.removeItem'),
|
||||
type: 'positive',
|
||||
});
|
||||
store.data.splice(store.data.indexOf(row), 1);
|
||||
});
|
||||
} catch (error) {
|
||||
//
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -43,8 +48,9 @@ async function remove(row) {
|
|||
<QPage class="column items-center q-pa-md">
|
||||
<div class="vn-card-list">
|
||||
<VnPaginate
|
||||
ref="paginate"
|
||||
data-key="WagonTypeList"
|
||||
url="/WagonTypes"
|
||||
url="WagonTypes"
|
||||
order="id DESC"
|
||||
auto-load
|
||||
>
|
||||
|
|
@ -54,12 +60,19 @@ async function remove(row) {
|
|||
:key="row.id"
|
||||
:title="(row.name || '').toString()"
|
||||
:id="row.id"
|
||||
@click="navigate(row.id)"
|
||||
@click="navigate(row.id, row.name)"
|
||||
>
|
||||
<template #list-items>
|
||||
<QCheckbox
|
||||
:label="t('Divisble')"
|
||||
:model-value="row.divisible"
|
||||
disable
|
||||
/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<QBtn
|
||||
:label="t('components.smartCard.openCard')"
|
||||
@click.stop="navigate(row.id)"
|
||||
@click.stop="navigate(row.id, row.name)"
|
||||
outline
|
||||
/>
|
||||
<QBtn
|
||||
|
|
@ -73,8 +86,42 @@ async function remove(row) {
|
|||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<QPageSticky position="bottom-right" :offset="[18, 18]">
|
||||
<QBtn @click="create" fab icon="add" color="primary" shortcut="+" />
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn @click.stop="dialog.show()" color="primary" fab icon="add" shortcut="+">
|
||||
<QDialog ref="dialog">
|
||||
<FormModelPopup
|
||||
:title="t('Create new Wagon type')"
|
||||
url-create="WagonTypes"
|
||||
model="WagonType"
|
||||
:form-initial-data="initialData"
|
||||
@on-data-saved="reloadData()"
|
||||
auto-load
|
||||
>
|
||||
<template #form-inputs="{ data }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<VnInput
|
||||
filled
|
||||
v-model="data.name"
|
||||
:label="t('Name')"
|
||||
:rules="[(val) => !!val || t('nameNotEmpty')]"
|
||||
/>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModelPopup>
|
||||
</QDialog>
|
||||
</QBtn>
|
||||
<QTooltip>
|
||||
{{ t('globals.new') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
nameNotEmpty: The name cannot be empty
|
||||
es:
|
||||
Create new Wagon type: Crear nuevo tipo de vagón
|
||||
Name: Nombre
|
||||
nameNotEmpty: El nombre no puede estar vacío
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ const route = useRoute();
|
|||
delete-model="WorkerDms"
|
||||
download-model="WorkerDms"
|
||||
default-dms-code="hhrrData"
|
||||
filter="worker"
|
||||
filter="wd.workerFk"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'WagonMain' },
|
||||
menus: {
|
||||
main: ['WagonList', 'WagonTypeList', 'WagonCounter'],
|
||||
main: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'],
|
||||
card: [],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -81,7 +81,7 @@ export default {
|
|||
title: 'typeCreate',
|
||||
icon: 'create',
|
||||
},
|
||||
component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue'),
|
||||
component: () => import('src/pages/Wagon/Type/WagonTypeList.vue'),
|
||||
},
|
||||
{
|
||||
path: ':id/edit',
|
||||
|
|
@ -90,7 +90,7 @@ export default {
|
|||
title: 'typeEdit',
|
||||
icon: 'edit',
|
||||
},
|
||||
component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue'),
|
||||
component: () => import('src/pages/Wagon/Type/WagonTypeEdit.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,50 +6,12 @@ describe('WagonTypeCreate', () => {
|
|||
cy.waitForElement('.q-page', 6000);
|
||||
});
|
||||
|
||||
function chooseColor(color) {
|
||||
cy.get('div.shelving-down').eq(1).click();
|
||||
cy.get('div.q-color-picker__cube').eq(color).click();
|
||||
cy.get('div.q-card__section').find('button').click();
|
||||
}
|
||||
|
||||
function addTray(position) {
|
||||
cy.get('div.action-button').last().find('button').click();
|
||||
cy.focused().type(position);
|
||||
cy.focused().blur();
|
||||
}
|
||||
|
||||
it('should create and delete a new wagon type', () => {
|
||||
it('should create a new wagon type', () => {
|
||||
cy.get('.q-page-sticky > div > .q-btn').click();
|
||||
cy.get('input').first().type('Example for testing');
|
||||
cy.get('div.q-checkbox__bg').click();
|
||||
chooseColor(1);
|
||||
|
||||
// Insert invalid position (not minimal height)
|
||||
addTray(20);
|
||||
cy.get('div[role="alert"]').should('exist');
|
||||
chooseColor(2);
|
||||
addTray(150);
|
||||
chooseColor(3);
|
||||
addTray(100);
|
||||
|
||||
// Insert invalid position (max height reached)
|
||||
addTray(210);
|
||||
cy.get('div[role="alert"]').should('exist');
|
||||
|
||||
// Save
|
||||
cy.get('button[type="submit"]').click();
|
||||
|
||||
// Check data has been saved successfully
|
||||
cy.get(':nth-child(1) > :nth-child(1) > .justify-between > .flex > .title')
|
||||
.contains('Example for testing')
|
||||
.click();
|
||||
cy.get('input').first().should('have.value', 'Example for testing');
|
||||
cy.get('div.wagon-tray').should('have.length', 4);
|
||||
cy.get('div.position').eq(0).find('input').should('have.value', '150');
|
||||
cy.get('div.position').eq(1).find('input').should('have.value', '100');
|
||||
cy.get('div.position').eq(2).find('input').should('have.value', '50');
|
||||
|
||||
// Delete wagon type created
|
||||
cy.go('back');
|
||||
});
|
||||
it('delete a wagon type', () => {
|
||||
cy.get(
|
||||
':nth-child(2) > :nth-child(1) > .card-list-body > .actions > .q-btn--standard'
|
||||
).click();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
describe('WagonTypeEdit', () => {
|
||||
const trayColorRow =
|
||||
'.q-select > .q-field__inner > .q-field__control > .q-field__control-container';
|
||||
beforeEach(() => {
|
||||
cy.viewport(1920, 1080);
|
||||
cy.login('developer');
|
||||
cy.visit('/#/wagon/type/2/edit');
|
||||
});
|
||||
|
||||
it('should edit the name and the divisible field of the wagon type', () => {
|
||||
cy.get('.q-card');
|
||||
cy.get('input').first().type(' changed');
|
||||
cy.get('div.q-checkbox__bg').first().click();
|
||||
cy.get('.q-btn--standard').click();
|
||||
});
|
||||
|
||||
it('should create a tray', () => {
|
||||
cy.get('.action-button > .q-btn > .q-btn__content > .q-icon').click();
|
||||
cy.get('input').last().type('150');
|
||||
cy.get(trayColorRow).type('{downArrow}{downArrow}{enter}');
|
||||
});
|
||||
|
||||
it('should delete a tray', () => {
|
||||
cy.get('.action-button > .q-btn > .q-btn__content > .q-icon').first().click();
|
||||
cy.reload();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,271 +0,0 @@
|
|||
import { axios, createWrapper } from 'app/test/vitest/helper';
|
||||
import WagonTypeCreate from 'pages/Wagon/Type/WagonTypeCreate.vue';
|
||||
import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
describe('WagonTypeCreate', () => {
|
||||
let vmCreate, vmEdit;
|
||||
const entityId = 1;
|
||||
|
||||
beforeAll(() => {
|
||||
vmEdit = createWrapper(WagonTypeCreate, {propsData: {
|
||||
id: entityId,
|
||||
}}).vm;
|
||||
vmCreate = createWrapper(WagonTypeCreate).vm;
|
||||
vmEdit.wagonConfig = vmCreate.wagonConfig = {maxTrays: 2 ,minHeightBetweenTrays: 50, maxWagonHeight: 200 };
|
||||
vmEdit.wagonTypeColors = vmCreate.wagonTypeColors = [{id: 1, color:'white', rgb:'#000000'}];
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('addTray()', () => {
|
||||
it('should throw message if there are uncomplete trays', async () => {
|
||||
vi.spyOn(vmEdit.quasar, 'notify');
|
||||
vmEdit.wagon = [{
|
||||
id: 1,
|
||||
position: null,
|
||||
color: vmEdit.wagonTypeColors[0]
|
||||
}];
|
||||
|
||||
await vmEdit.addTray();
|
||||
|
||||
expect(vmEdit.quasar.notify).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
type: 'warning',
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('should create a new tray if the limit has not been reached', async () => {
|
||||
vmEdit.wagon = [{
|
||||
id: 1,
|
||||
position: 0,
|
||||
color: vmEdit.wagonTypeColors[0]
|
||||
}];
|
||||
|
||||
await vmEdit.addTray();
|
||||
expect(vmEdit.wagon.length).toEqual(2);
|
||||
});
|
||||
|
||||
it('should throw message if there are uncomplete trays', async () => {
|
||||
vi.spyOn(vmEdit.quasar, 'notify');
|
||||
vmEdit.wagon = [{
|
||||
id: 1,
|
||||
position: 0,
|
||||
color: vmEdit.wagonTypeColors[0]
|
||||
},{
|
||||
id: 2,
|
||||
position: 50,
|
||||
color: vmEdit.wagonTypeColors[0]
|
||||
}];
|
||||
|
||||
await vmEdit.addTray();
|
||||
|
||||
expect(vmEdit.quasar.notify).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
type: 'warning',
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('deleteTray() reorderIds()', () => {
|
||||
it('should delete a tray and reorder the ids', async () => {
|
||||
const trayToDelete = {
|
||||
id: 1,
|
||||
position: 0,
|
||||
color: vmEdit.wagonTypeColors[0]
|
||||
};
|
||||
const trayMaintained = {
|
||||
id: 2,
|
||||
position: 50,
|
||||
color: vmEdit.wagonTypeColors[0]
|
||||
};
|
||||
vmEdit.wagon = [trayToDelete,trayMaintained];
|
||||
|
||||
await vmEdit.deleteTray(trayToDelete);
|
||||
|
||||
expect(vmEdit.wagon.length).toEqual(1);
|
||||
expect(vmEdit.wagon[0].id).toEqual(0);
|
||||
expect(vmEdit.wagon[0].position).toEqual(50);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
describe('onSubmit()', () => {
|
||||
it('should make a patch to editWagonType if have id', async () => {
|
||||
vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
|
||||
const wagon = {
|
||||
id: entityId,
|
||||
name: "Mock name",
|
||||
divisible: true,
|
||||
trays: [{
|
||||
id: 1,
|
||||
position: 0,
|
||||
color: vmEdit.wagonTypeColors[0]
|
||||
}]
|
||||
}
|
||||
vmEdit.name = wagon.name;
|
||||
vmEdit.divisible = wagon.divisible;
|
||||
vmEdit.wagon = wagon.trays;
|
||||
|
||||
await vmEdit.onSubmit();
|
||||
|
||||
expect(axios.patch).toHaveBeenCalledWith(
|
||||
`WagonTypes/editWagonType`, wagon
|
||||
);
|
||||
});
|
||||
|
||||
it('should make a patch to createtWagonType if not have id', async () => {
|
||||
vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
|
||||
const wagon = {
|
||||
name: "Mock name",
|
||||
divisible: true,
|
||||
trays: [{
|
||||
id: 1,
|
||||
position: 0,
|
||||
color: vmCreate.wagonTypeColors[0]
|
||||
}]
|
||||
}
|
||||
vmCreate.name = wagon.name;
|
||||
vmCreate.divisible = wagon.divisible;
|
||||
vmCreate.wagon = wagon.trays;
|
||||
|
||||
await vmCreate.onSubmit();
|
||||
|
||||
expect(axios.patch).toHaveBeenCalledWith(
|
||||
`WagonTypes/createWagonType`, wagon
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onReset()', () => {
|
||||
it('should reset if have id', async () => {
|
||||
vmEdit.name = 'Changed name';
|
||||
vmEdit.divisible = false;
|
||||
vmEdit.wagon = [];
|
||||
vmEdit.originalData = {
|
||||
name: 'Original name',
|
||||
divisible: true,
|
||||
trays: [{
|
||||
id: 1,
|
||||
position: 0,
|
||||
color: vmEdit.wagonTypeColors[0]
|
||||
},{
|
||||
id: 2,
|
||||
position: 50,
|
||||
color: vmEdit.wagonTypeColors[0]
|
||||
}]
|
||||
};
|
||||
|
||||
vmEdit.onReset();
|
||||
|
||||
expect(vmEdit.name).toEqual(vmEdit.originalData.name);
|
||||
expect(vmEdit.divisible).toEqual(vmEdit.originalData.divisible);
|
||||
expect(vmEdit.wagon).toEqual(vmEdit.originalData.trays);
|
||||
});
|
||||
|
||||
it('should reset if not have id', async () => {
|
||||
vmCreate.name = 'Changed name';
|
||||
vmCreate.divisible = false;
|
||||
vmCreate.wagon = [];
|
||||
|
||||
vmCreate.onReset();
|
||||
|
||||
expect(vmCreate.name).toEqual(null);
|
||||
expect(vmCreate.divisible).toEqual(false);
|
||||
expect(vmCreate.wagon.length).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onPositionBlur()', () => {
|
||||
it('should set position null if position is negative', async () => {
|
||||
const negativeTray = {
|
||||
id: 1,
|
||||
position: -1,
|
||||
color: vmCreate.wagonTypeColors[0]
|
||||
};
|
||||
|
||||
vmCreate.onPositionBlur(negativeTray);
|
||||
|
||||
expect(negativeTray.position).toEqual(null);
|
||||
});
|
||||
|
||||
it('should set position and reorder array', async () => {
|
||||
const trays = [{
|
||||
id: 0,
|
||||
position: 100,
|
||||
color: vmCreate.wagonTypeColors[0]
|
||||
},{
|
||||
id: 1,
|
||||
position: 0,
|
||||
color: vmCreate.wagonTypeColors[0]
|
||||
}];
|
||||
const newTray = {
|
||||
id: 2,
|
||||
position: 50,
|
||||
color: vmCreate.wagonTypeColors[0]
|
||||
};
|
||||
trays.push(newTray);
|
||||
vmCreate.wagon = trays;
|
||||
|
||||
vmCreate.onPositionBlur(newTray);
|
||||
|
||||
expect(vmCreate.wagon[0].position).toEqual(100);
|
||||
expect(vmCreate.wagon[1].position).toEqual(50);
|
||||
expect(vmCreate.wagon[2].position).toEqual(0);
|
||||
});
|
||||
|
||||
it('should throw message if not have min height between trays and should set new adequate positions', async () => {
|
||||
vi.spyOn(vmCreate.quasar, 'notify');
|
||||
const trays = [{
|
||||
id: 0,
|
||||
position: 0,
|
||||
color: vmCreate.wagonTypeColors[0]
|
||||
}];
|
||||
const newTray = {
|
||||
id: 1,
|
||||
position: 20,
|
||||
color: vmCreate.wagonTypeColors[0]
|
||||
};
|
||||
trays.push(newTray);
|
||||
vmCreate.wagon = trays;
|
||||
|
||||
vmCreate.onPositionBlur(newTray);
|
||||
|
||||
expect(vmCreate.wagon[0].position).toEqual(50);
|
||||
expect(vmCreate.wagon[1].position).toEqual(0);
|
||||
expect(vmCreate.quasar.notify).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
type: 'warning',
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw message if max height has been exceed', async () => {
|
||||
vi.spyOn(vmCreate.quasar, 'notify');
|
||||
const trays = [{
|
||||
id: 0,
|
||||
position: 0,
|
||||
color: vmCreate.wagonTypeColors[0]
|
||||
}];
|
||||
const newTray = {
|
||||
id: 1,
|
||||
position: 210,
|
||||
color: vmCreate.wagonTypeColors[0]
|
||||
};
|
||||
trays.push(newTray);
|
||||
vmCreate.wagon = trays;
|
||||
|
||||
vmCreate.onPositionBlur(newTray);
|
||||
|
||||
expect(vmCreate.wagon.length).toEqual(1);
|
||||
expect(vmCreate.quasar.notify).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
type: 'warning',
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue