Se implementa funcionalidades varias del extended list
This commit is contained in:
carlosfonseca
parent
8a5bb1480f
commit
8f4bd3478b
|
|
@ -0,0 +1,201 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, onBeforeMount } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
import { QBtn } from 'quasar';
|
||||||
|
|
||||||
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
|
||||||
|
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||||
|
import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
|
||||||
|
import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const router = useRouter();
|
||||||
|
const stateStore = useStateStore();
|
||||||
|
|
||||||
|
const arrayData = ref(null);
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
arrayData.value = useArrayData('CustomerExtendedList', {
|
||||||
|
url: 'Clients/extendedListFilter',
|
||||||
|
limit: 0,
|
||||||
|
});
|
||||||
|
await arrayData.value.fetch({ append: false });
|
||||||
|
stateStore.rightDrawer = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
const rows = computed(() => arrayData.value.store.data);
|
||||||
|
|
||||||
|
const selectedCustomerId = ref(0);
|
||||||
|
|
||||||
|
const tableColumnComponents = {
|
||||||
|
id: {
|
||||||
|
component: QBtn,
|
||||||
|
props: () => ({ flat: true, color: 'blue' }),
|
||||||
|
event: (prop) => selectCustomerId(prop.row.id),
|
||||||
|
},
|
||||||
|
socialName: {
|
||||||
|
component: 'span',
|
||||||
|
props: () => {},
|
||||||
|
event: () => {},
|
||||||
|
},
|
||||||
|
salesPerson: {
|
||||||
|
component: 'span',
|
||||||
|
props: () => {},
|
||||||
|
event: () => {},
|
||||||
|
},
|
||||||
|
phone: {
|
||||||
|
component: 'span',
|
||||||
|
props: () => {},
|
||||||
|
event: () => {},
|
||||||
|
},
|
||||||
|
city: {
|
||||||
|
component: 'span',
|
||||||
|
props: () => {},
|
||||||
|
event: () => {},
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
component: 'span',
|
||||||
|
props: () => {},
|
||||||
|
event: () => {},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
component: CustomerExtendedListActions,
|
||||||
|
props: (prop) => ({
|
||||||
|
id: prop.row.id,
|
||||||
|
}),
|
||||||
|
event: () => {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = computed(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'id',
|
||||||
|
label: t('Identifier'),
|
||||||
|
name: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'socialName',
|
||||||
|
label: t('Social name'),
|
||||||
|
name: 'socialName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'salesPerson',
|
||||||
|
label: t('Salesperson'),
|
||||||
|
name: 'salesPerson',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'phone',
|
||||||
|
label: t('Phone'),
|
||||||
|
name: 'phone',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'city',
|
||||||
|
label: t('City'),
|
||||||
|
name: 'city',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
field: 'email',
|
||||||
|
label: t('Email'),
|
||||||
|
name: 'email',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'right',
|
||||||
|
field: 'actions',
|
||||||
|
label: '',
|
||||||
|
name: 'actions',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const stopEventPropagation = (event, col) => {
|
||||||
|
if (!['ref', 'id', 'supplier'].includes(col.name)) return;
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
const navigateToTravelId = (id) => {
|
||||||
|
router.push({ path: `/customer/${id}` });
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectCustomerId = (id) => {
|
||||||
|
selectedCustomerId.value = id;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||||
|
<QScrollArea class="fit text-grey-8">
|
||||||
|
<CustomerExtendedListFilter data-key="CustomerExtendedList" />
|
||||||
|
</QScrollArea>
|
||||||
|
</QDrawer>
|
||||||
|
|
||||||
|
<QToolbar class="bg-vn-dark">
|
||||||
|
<div id="st-data"></div>
|
||||||
|
<QSpace />
|
||||||
|
<div id="st-actions"></div>
|
||||||
|
</QToolbar>
|
||||||
|
|
||||||
|
<QPage class="column items-center q-pa-md">
|
||||||
|
<QTable
|
||||||
|
:columns="columns"
|
||||||
|
:pagination="{ rowsPerPage: 0 }"
|
||||||
|
:rows="rows"
|
||||||
|
class="full-width q-mt-md"
|
||||||
|
hide-bottom
|
||||||
|
row-key="id"
|
||||||
|
>
|
||||||
|
<template #body="props">
|
||||||
|
<QTr
|
||||||
|
:props="props"
|
||||||
|
@click="navigateToTravelId(props.row.id)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<QTd
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="stopEventPropagation($event, col)"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="tableColumnComponents[col.name].component"
|
||||||
|
class="col-content"
|
||||||
|
v-bind="tableColumnComponents[col.name].props(props)"
|
||||||
|
@click="tableColumnComponents[col.name].event(props)"
|
||||||
|
>
|
||||||
|
{{ col.value }}
|
||||||
|
<CustomerDescriptorProxy :id="selectedCustomerId" />
|
||||||
|
</component>
|
||||||
|
</QTd>
|
||||||
|
</QTr>
|
||||||
|
</template>
|
||||||
|
</QTable>
|
||||||
|
</QPage>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.col-content {
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 6px 6px 6px 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Identifier: Identificador
|
||||||
|
Social name: Razón social
|
||||||
|
Salesperson: Comercial
|
||||||
|
Phone: Teléfono
|
||||||
|
City: Población
|
||||||
|
Email: Email
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
|
||||||
|
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const quasar = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const redirectToCreateView = () => {
|
||||||
|
router.push({
|
||||||
|
name: 'TicketList',
|
||||||
|
query: {
|
||||||
|
params: JSON.stringify({
|
||||||
|
clientFk: $props.id,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const viewSummary = () => {
|
||||||
|
quasar.dialog({
|
||||||
|
component: CustomerSummaryDialog,
|
||||||
|
componentProps: {
|
||||||
|
id: $props.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QIcon @click.stop="redirectToCreateView" color="primary" name="vn:ticket" size="sm">
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('Client ticket list') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
<QIcon
|
||||||
|
@click.stop="viewSummary"
|
||||||
|
class="q-ml-md"
|
||||||
|
color="primary"
|
||||||
|
name="preview"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('Preview') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QIcon>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Client ticket list: Listado de tickets del cliente
|
||||||
|
Preview: Vista previa
|
||||||
|
</i18n>
|
||||||
Loading…
Reference in New Issue