feat: refs #7356 list & weekly to VnTable and style fixes
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
parent
a0b6455b4c
commit
cb610608df
|
|
@ -11,18 +11,14 @@ const { t } = useI18n();
|
|||
const route = useRoute();
|
||||
|
||||
const routeName = computed(() => route.name);
|
||||
const searchBarDataKeys = {
|
||||
TicketSummary: 'TicketSummary',
|
||||
TicketSale: 'TicketSale',
|
||||
TicketPurchaseRequest: 'TicketPurchaseRequest',
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<VnCard
|
||||
data-key="Ticket"
|
||||
base-url="Tickets"
|
||||
:filter-panel="TicketFilter"
|
||||
:descriptor="TicketDescriptor"
|
||||
:search-data-key="searchBarDataKeys[routeName]"
|
||||
search-data-key="TicketList"
|
||||
:search-custom-route-redirect="routeName"
|
||||
:searchbar-label="t('card.search')"
|
||||
:searchbar-info="t('card.searchInfo')"
|
||||
|
|
|
|||
|
|
@ -626,7 +626,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
<template #body-cell-ticketId="{ row }">
|
||||
<QTd>
|
||||
<QBtn flat color="primary">
|
||||
<QBtn flat class="link">
|
||||
{{ row.id }}
|
||||
<TicketDescriptorProxy :id="row.id" />
|
||||
</QBtn>
|
||||
|
|
@ -658,7 +658,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
<template #body-cell-futureId="{ row }">
|
||||
<QTd class="vertical-separator">
|
||||
<QBtn flat color="primary" dense>
|
||||
<QBtn flat class="link" dense>
|
||||
{{ row.futureId }}
|
||||
<TicketDescriptorProxy :id="row.futureId" />
|
||||
</QBtn>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const workers = ref();
|
||||
const provinces = ref();
|
||||
const states = ref();
|
||||
const agencies = ref();
|
||||
const warehouses = ref();
|
||||
const workers = ref([]);
|
||||
const provinces = ref([]);
|
||||
const states = ref([]);
|
||||
const agencies = ref([]);
|
||||
const warehouses = ref([]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -33,7 +33,7 @@ const warehouses = ref();
|
|||
@on-fetch="(data) => (workers = data)"
|
||||
auto-load
|
||||
/>
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<div class="q-gutter-x-xs">
|
||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||
|
|
|
|||
|
|
@ -442,7 +442,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
<template #body-cell-ticketId="{ row }">
|
||||
<QTd>
|
||||
<QBtn flat color="primary">
|
||||
<QBtn flat class="link">
|
||||
{{ row.id }}
|
||||
<TicketDescriptorProxy :id="row.id" />
|
||||
</QBtn>
|
||||
|
|
@ -489,7 +489,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
<template #body-cell-futureId="{ row }">
|
||||
<QTd class="vertical-separator">
|
||||
<QBtn flat color="primary" dense>
|
||||
<QBtn flat class="link" dense>
|
||||
{{ row.futureId }}
|
||||
<TicketDescriptorProxy :id="row.futureId" />
|
||||
</QBtn>
|
||||
|
|
|
|||
|
|
@ -1,118 +1,312 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { toDate, toCurrency } from 'src/filters/index';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import TicketSummary from './Card/TicketSummary.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import TicketFilter from './TicketFilter.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import CardList from 'src/components/ui/CardList.vue';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const stateStore = useStateStore();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const tableRef = ref();
|
||||
const clientsOptions = ref([]);
|
||||
const addressesOptions = ref([]);
|
||||
const agenciesOptions = ref([]);
|
||||
const selectedClient = ref();
|
||||
|
||||
onMounted(() => (stateStore.rightDrawer = true));
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
name: 'id',
|
||||
label: t('ticketList.id'),
|
||||
chip: {
|
||||
condition: () => true,
|
||||
},
|
||||
isId: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'nickname',
|
||||
label: t('ticketList.nickname'),
|
||||
isTitle: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'state',
|
||||
label: t('ticketList.state'),
|
||||
cardVisible: true,
|
||||
chip: {
|
||||
condition: () => true,
|
||||
color: (row) => {
|
||||
return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
|
||||
},
|
||||
},
|
||||
columnFilter: {
|
||||
name: 'stateFk',
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'States',
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'shipped',
|
||||
cardVisible: true,
|
||||
label: t('ticketList.shipped'),
|
||||
columnFilter: {
|
||||
component: 'date',
|
||||
alias: 't',
|
||||
inWhere: true,
|
||||
},
|
||||
format: ({ shipped }) => toDate(shipped),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'zoneFk',
|
||||
label: t('ticketList.zone'),
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Zones',
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
alias: 't',
|
||||
inWhere: true,
|
||||
},
|
||||
format: (row, dashIfEmpty) => dashIfEmpty(row.zoneName),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('ticketList.salesPerson'),
|
||||
name: 'salesPersonFk',
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Workers/activeWithInheritedRole',
|
||||
fields: ['id', 'name'],
|
||||
where: { role: 'salesPerson' },
|
||||
optionFilter: 'firstName',
|
||||
useLike: false,
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'totalWithVat',
|
||||
label: t('ticketList.totalWithVat'),
|
||||
cardVisible: true,
|
||||
columnFilter: {
|
||||
component: 'number',
|
||||
inWhere: true,
|
||||
},
|
||||
format: (row) => toCurrency(row.totalWithVat),
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
name: 'tableActions',
|
||||
actions: [
|
||||
{
|
||||
title: t('ticketList.summary'),
|
||||
icon: 'preview',
|
||||
action: (row) => viewSummary(row.id, TicketSummary),
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const from = Date.vnNew();
|
||||
const to = Date.vnNew();
|
||||
to.setDate(to.getDate() + 1);
|
||||
|
||||
const userParams = {
|
||||
from: from.toISOString(),
|
||||
to: to.toISOString(),
|
||||
const onClientSelected = async (formData) => {
|
||||
await fetchClient(formData);
|
||||
await fetchAddresses(formData);
|
||||
};
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/ticket/${id}` });
|
||||
}
|
||||
const fetchAvailableAgencies = async (formData) => {
|
||||
if (!formData.warehouseId || !formData.addressId || !formData.landed) return;
|
||||
let params = {
|
||||
warehouseFk: formData.warehouseId,
|
||||
addressFk: formData.addressId,
|
||||
landed: formData.landed,
|
||||
};
|
||||
|
||||
const { data } = await axios.get('Agencies/getAgenciesWithWarehouse', { params });
|
||||
|
||||
agenciesOptions.value = data;
|
||||
|
||||
const defaultAgency = agenciesOptions.value.find(
|
||||
(agency) =>
|
||||
agency.agencyModeFk === selectedClient.value.defaultAddress.agencyModeFk
|
||||
);
|
||||
|
||||
if (defaultAgency) formData.agencyModeId = defaultAgency.agencyModeFk;
|
||||
};
|
||||
|
||||
const fetchClient = async (formData) => {
|
||||
try {
|
||||
const filter = {
|
||||
include: {
|
||||
relation: 'defaultAddress',
|
||||
scope: {
|
||||
fields: ['id', 'agencyModeFk'],
|
||||
},
|
||||
},
|
||||
where: { id: formData.clientId },
|
||||
};
|
||||
const params = { filter: JSON.stringify(filter) };
|
||||
const { data } = await axios.get('Clients', { params });
|
||||
const [client] = data;
|
||||
selectedClient.value = client;
|
||||
} catch (err) {
|
||||
console.error('Error fetching client');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAddresses = async (formData) => {
|
||||
try {
|
||||
if (!formData.clientId) return;
|
||||
|
||||
const filter = {
|
||||
fields: ['nickname', 'street', 'city', 'id'],
|
||||
where: { isActive: true },
|
||||
order: 'nickname ASC',
|
||||
};
|
||||
const params = { filter: JSON.stringify(filter) };
|
||||
const { data } = await axios.get(`Clients/${formData.clientId}/addresses`, {
|
||||
params,
|
||||
});
|
||||
addressesOptions.value = data;
|
||||
|
||||
const { defaultAddress } = selectedClient.value;
|
||||
formData.addressId = defaultAddress.id;
|
||||
} catch (err) {
|
||||
console.error(`Error fetching addresses`, err);
|
||||
return err.response;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VnSearchbar
|
||||
data-key="TicketList"
|
||||
data-key="Tickets"
|
||||
:label="t('Search ticket')"
|
||||
:info="t('You can search by ticket id or alias')"
|
||||
/>
|
||||
<RightMenu>
|
||||
<template #right-panel>
|
||||
<TicketFilter data-key="TicketList" />
|
||||
</template>
|
||||
</RightMenu>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="vn-card-list">
|
||||
<VnPaginate
|
||||
data-key="TicketList"
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="Tickets"
|
||||
url="Tickets/filter"
|
||||
:user-params="userParams"
|
||||
order="id DESC"
|
||||
:create="{
|
||||
urlCreate: 'Tickets/new',
|
||||
title: t('ticketList.createTicket'),
|
||||
onDataSaved: ({ id }) => tableRef.redirect(id),
|
||||
formInitialData: {},
|
||||
}"
|
||||
default-mode="table"
|
||||
:columns="columns"
|
||||
redirect="ticket"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<CardList
|
||||
v-for="row of rows"
|
||||
:key="row.id"
|
||||
:id="row.id"
|
||||
:title="`${row.nickname}`"
|
||||
@click="navigate(row.id)"
|
||||
<template #more-create-dialog="{ data }">
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
url="Clients"
|
||||
:label="t('ticketList.client')"
|
||||
v-model="data.clientId"
|
||||
:options="clientsOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
@update:model-value="(client) => onClientSelected(data)"
|
||||
>
|
||||
<template #list-items>
|
||||
<VnLv
|
||||
:label="t('ticket.list.nickname')"
|
||||
:value="row.nickname"
|
||||
/>
|
||||
<VnLv :label="t('ticket.list.state')">
|
||||
<template #value>
|
||||
<QBadge
|
||||
text-color="black"
|
||||
:color="row.classColor ?? 'orange'"
|
||||
class="q-ma-none"
|
||||
dense
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt.name }}
|
||||
</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ `#${scope.opt.id}` }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
url="Addresses"
|
||||
:label="t('ticket.create.address')"
|
||||
v-model="data.addressId"
|
||||
:options="addressesOptions"
|
||||
option-value="id"
|
||||
option-label="nickname"
|
||||
hide-selected
|
||||
:disable="!data.clientId"
|
||||
@update:model-value="() => fetchAvailableAgencies(data)"
|
||||
>
|
||||
{{ row.state }}
|
||||
</QBadge>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt.nickname }}
|
||||
</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ `${scope.opt.street}, ${scope.opt.city}` }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
:label="t('ticket.list.shipped')"
|
||||
:value="toDate(row.shipped)"
|
||||
</VnSelect>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInputDate
|
||||
placeholder="dd-mm-aaa"
|
||||
:label="t('ticket.create.landed')"
|
||||
v-model="data.landed"
|
||||
@update:model-value="() => fetchAvailableAgencies(data)"
|
||||
/>
|
||||
<VnLv :label="t('Zone')" :value="row.zoneName" />
|
||||
<VnLv
|
||||
:label="t('ticket.list.salesPerson')"
|
||||
:value="row.salesPerson"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('ticket.list.total')"
|
||||
:value="toCurrency(row.totalWithVat)"
|
||||
/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<QBtn
|
||||
:label="t('components.smartCard.openSummary')"
|
||||
@click.stop="viewSummary(row.id, TicketSummary)"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</CardList>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<QPageSticky :offset="[20, 20]">
|
||||
<QBtn :to="{ name: 'TicketCreate' }" fab icon="add" color="primary">
|
||||
<QTooltip>
|
||||
{{ t('New ticket') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</QPageSticky>
|
||||
</QPage>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
url="Warehouses"
|
||||
:label="t('ticket.create.warehouse')"
|
||||
v-model="data.warehouseId"
|
||||
:options="warehousesOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
@update:model-value="() => fetchAvailableAgencies(data)"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
:label="t('ticket.create.agency')"
|
||||
v-model="data.agencyModeId"
|
||||
:options="agenciesOptions"
|
||||
option-value="agencyModeFk"
|
||||
option-label="agencyMode"
|
||||
hide-selected
|
||||
:disable="!data.clientId || !data.landed || !data.warehouseId"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,28 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
|
||||
import { onMounted, ref, computed, onUnmounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import axios from 'axios';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
const { openConfirmationModal } = useVnConfirm();
|
||||
const { notify } = useNotify();
|
||||
|
||||
const paginateRef = ref(null);
|
||||
const { openConfirmationModal } = useVnConfirm();
|
||||
const agencyModesOptions = ref([]);
|
||||
const visibleColumns = ref([]);
|
||||
const allColumnNames = ref([]);
|
||||
|
||||
const arrayData = useArrayData('WeeklyTickets');
|
||||
const { store } = arrayData;
|
||||
|
||||
const tableRef = ref();
|
||||
const weekdays = [
|
||||
{ id: 0, name: t('weekdays.mon') },
|
||||
{ id: 1, name: t('weekdays.tue') },
|
||||
|
|
@ -45,113 +33,131 @@ const weekdays = [
|
|||
{ id: 6, name: t('weekdays.sun') },
|
||||
];
|
||||
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
case 'clientName':
|
||||
return { 'c.name': value };
|
||||
case 'nickName':
|
||||
return { 'u.name': value };
|
||||
}
|
||||
};
|
||||
|
||||
const params = reactive({});
|
||||
|
||||
const applyColumnFilter = async (col) => {
|
||||
try {
|
||||
const paramKey = col.columnFilter?.filterParamKey || col.field;
|
||||
params[paramKey] = col.columnFilter.filterValue;
|
||||
await paginateRef.value.addFilter(null, params);
|
||||
} catch (err) {
|
||||
console.error('Error applying column filter', err);
|
||||
}
|
||||
};
|
||||
|
||||
const getInputEvents = (col) => ({ 'keyup.enter': () => applyColumnFilter(col) });
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
name: 'ticketFk',
|
||||
label: t('weeklyTickets.id'),
|
||||
name: 'id',
|
||||
field: 'ticketFk',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: null,
|
||||
chip: {
|
||||
condition: () => true,
|
||||
},
|
||||
isId: true,
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'clientFk',
|
||||
label: t('weeklyTickets.client'),
|
||||
name: 'client',
|
||||
field: 'clientName',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
isTitle: true,
|
||||
cardVisible: true,
|
||||
component: 'select',
|
||||
attrs: {
|
||||
dense: true,
|
||||
url: 'Clients',
|
||||
optionLabel: 'name',
|
||||
optionValue: 'id',
|
||||
isWhere: true,
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
format: (row) => row.clientName,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'weekDay',
|
||||
label: t('weeklyTickets.shipment'),
|
||||
name: 'shipment',
|
||||
field: 'weekDay',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: null,
|
||||
},
|
||||
{
|
||||
label: t('weeklyTickets.agency'),
|
||||
name: 'agency',
|
||||
field: 'agencyModeFk',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: null,
|
||||
},
|
||||
{
|
||||
label: t('weeklyTickets.warehouse'),
|
||||
name: 'warehouse',
|
||||
field: 'warehouseName',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: null,
|
||||
},
|
||||
{
|
||||
label: t('weeklyTickets.salesperson'),
|
||||
field: 'salesperson',
|
||||
name: 'salesperson',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
cardVisible: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
filterParamKey: 'nickName',
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
component: 'input',
|
||||
optionLabel: weekdays.name,
|
||||
optionValue: weekdays.id,
|
||||
inWhere: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
name: 'actions',
|
||||
align: 'left',
|
||||
columnFilter: null,
|
||||
label: t('weeklyTickets.agency'),
|
||||
name: 'agencyModeFk',
|
||||
cardVisible: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'AgencyModes',
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
inWhere: true,
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
format: (row, dashIfEmpty) => dashIfEmpty(row?.agencyMode?.name),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'warehouseFk',
|
||||
label: t('weeklyTickets.warehouse'),
|
||||
cardVisible: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Warehouses',
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
inWhere: true,
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
format: (row, dashIfEmpty) => dashIfEmpty(row.warehouseName),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'workerFk',
|
||||
label: t('weeklyTickets.salesperson'),
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Workers/activeWithInheritedRole',
|
||||
fields: ['id', 'name'],
|
||||
where: { role: 'salesperson' },
|
||||
},
|
||||
inWhere: true,
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
cardVisible: true,
|
||||
format: (row) => row.userName,
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
label: '',
|
||||
name: 'tableActions',
|
||||
actions: [
|
||||
{
|
||||
title: t('ticketWeekly.delete'),
|
||||
icon: 'delete',
|
||||
action: (row) =>
|
||||
openConfirmationModal(
|
||||
t('You are going to delete this weekly ticket'),
|
||||
t(
|
||||
'This ticket will be removed from weekly tickets! Continue anyway?'
|
||||
),
|
||||
() => deleteWeekly(row.ticketFk)
|
||||
),
|
||||
isPrimary: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const redirectToTicketSummary = (ticketFk) =>
|
||||
router.push({ name: 'TicketSummary', params: { id: ticketFk } });
|
||||
|
||||
const deleteWeekly = async (ticketFk) => {
|
||||
try {
|
||||
await axios.delete(`TicketWeeklies/${ticketFk}`);
|
||||
notify(t('globals.dataSaved'), 'positive');
|
||||
const ticketIndex = store.data.findIndex((e) => e.ticketFk == ticketFk);
|
||||
store.data.splice(ticketIndex, 1);
|
||||
location.reload();
|
||||
} catch (err) {
|
||||
console.error('Error deleting weekly', err);
|
||||
}
|
||||
|
|
@ -176,147 +182,61 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="AgencyModes/isActive"
|
||||
:filter="{ fields: ['id', 'name'], order: 'name' }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (agencyModesOptions = data)"
|
||||
/>
|
||||
<VnSearchbar
|
||||
data-key="WeeklyTickets"
|
||||
:label="t('weeklyTickets.search')"
|
||||
:info="t('weeklyTickets.searchInfo')"
|
||||
/>
|
||||
<VnSubToolbar>
|
||||
<template #st-data>
|
||||
<TableVisibleColumns
|
||||
:all-columns="allColumnNames"
|
||||
table-code="itemsIndex"
|
||||
labels-traductions-path="weeklyTickets"
|
||||
@on-config-saved="visibleColumns = [...$event, 'actions']"
|
||||
/>
|
||||
</template>
|
||||
</VnSubToolbar>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<VnPaginate
|
||||
ref="paginateRef"
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="WeeklyTickets"
|
||||
url="TicketWeeklies/filter"
|
||||
:order="['weekDay', 'ticketFk']"
|
||||
:limit="20"
|
||||
:expr-builder="exprBuilder"
|
||||
:user-params="params"
|
||||
:offset="50"
|
||||
:columns="columns"
|
||||
default-mode="table"
|
||||
:use-model="true"
|
||||
:disable-option="{ card: true }"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width q-mt-md"
|
||||
:visible-columns="visibleColumns"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
@row-click="(_, row) => redirectToTicketSummary(row.ticketFk)"
|
||||
>
|
||||
<template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.columnFilter"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
v-on="col.columnFilter.event(col)"
|
||||
dense
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body-cell-id="{ row }">
|
||||
<QTd @click.stop>
|
||||
<QBtn flat color="primary">
|
||||
<template #column-ticketFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row.ticketFk }}
|
||||
<TicketDescriptorProxy :id="row.ticketFk" />
|
||||
</QBtn>
|
||||
</QTd>
|
||||
</span>
|
||||
</template>
|
||||
<template #body-cell-salesperson="{ row }">
|
||||
<QTd @click.stop>
|
||||
<QBtn flat color="primary">
|
||||
{{ row.userName }}
|
||||
<WorkerDescriptorProxy :id="row.workerFk" />
|
||||
</QBtn>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-client="{ row }">
|
||||
<QTd @click.stop>
|
||||
<QBtn flat color="primary" dense>
|
||||
{{ row.clientName }}
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</QBtn>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-shipment="{ row }">
|
||||
<QTd @click.stop>
|
||||
<template #column-weekDay="{ row }">
|
||||
<VnSelect
|
||||
:options="weekdays"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="row.weekDay"
|
||||
@update:model-value="
|
||||
onUpdate(row.ticketFk, 'weekDay', $event)
|
||||
"
|
||||
@update:model-value="onUpdate(row.ticketFk, 'weekDay', $event)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-agency="{ row }">
|
||||
<QTd @click.stop>
|
||||
<template #column-agencyModeFk="{ row }">
|
||||
<VnSelect
|
||||
url="AgencyModes/isActive"
|
||||
:options="agencyModesOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="row.agencyModeFk"
|
||||
@update:model-value="
|
||||
onUpdate(row.ticketFk, 'agencyModeFk', $event)
|
||||
"
|
||||
@update:model-value="onUpdate(row.ticketFk, 'agencyModeFk', $event)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-actions="{ row }">
|
||||
<QTd>
|
||||
<QIcon
|
||||
@click.stop="
|
||||
openConfirmationModal(
|
||||
t('You are going to delete this weekly ticket'),
|
||||
t(
|
||||
'This ticket will be removed from weekly tickets! Continue anyway?'
|
||||
),
|
||||
() => deleteWeekly(row.ticketFk)
|
||||
)
|
||||
"
|
||||
class="q-ml-sm cursor-pointer"
|
||||
color="primary"
|
||||
name="delete"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('globals.delete') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
<template #column-clientFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row.clientName }}
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</span>
|
||||
</template>
|
||||
</QTable>
|
||||
<template #column-workerFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row.userName }}
|
||||
<WorkerDescriptorProxy :id="row.workerFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</QPage>
|
||||
</VnTable>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -225,3 +225,14 @@ package:
|
|||
added: Added
|
||||
addPackage: Add package
|
||||
removePackage: Remove package
|
||||
ticketList:
|
||||
id: Id
|
||||
nickname: Nickname
|
||||
state: State
|
||||
shipped: Shipped
|
||||
zone: Zone
|
||||
salesPerson: Sales person
|
||||
totalWithVat: Total with VAT
|
||||
summary: Summary
|
||||
client: Customer
|
||||
createTicket: Create ticket
|
||||
|
|
|
|||
|
|
@ -228,3 +228,14 @@ ticketSaleTracking:
|
|||
Search ticket: Buscar tickets
|
||||
You can search by ticket id or alias: Puedes buscar por id o alias del ticket
|
||||
Select lines to see the options: Selecciona líneas para ver las opciones
|
||||
ticketList:
|
||||
id: Id
|
||||
nickname: Alias
|
||||
state: Estado
|
||||
shipped: F. Envío
|
||||
zone: Zona
|
||||
salesPerson: Comercial
|
||||
totalWithVat: Total con IVA
|
||||
summary: Resumen
|
||||
client: Cliente
|
||||
createTicket: Crear ticket
|
||||
|
|
|
|||
Loading…
Reference in New Issue