forked from verdnatura/salix-front
Create roadmap list page
This commit is contained in:
Kevin Martinez
parent
046ac0406b
commit
8ffa3b7626
|
|
@ -888,6 +888,7 @@ export default {
|
|||
create: 'Create',
|
||||
basicData: 'Basic Data',
|
||||
summary: 'Summary',
|
||||
RouteRoadmap: 'Roadmaps',
|
||||
tickets: 'Tickets',
|
||||
log: 'Log',
|
||||
autonomous: 'Autonomous',
|
||||
|
|
|
|||
|
|
@ -941,7 +941,8 @@ export default {
|
|||
RouteList: 'Listado',
|
||||
create: 'Crear',
|
||||
basicData: 'Datos básicos',
|
||||
summary: 'Summary',
|
||||
summary: 'Resumen',
|
||||
RouteRoadmap: 'Troncales',
|
||||
tickets: 'Tickets',
|
||||
log: 'Historial',
|
||||
autonomous: 'Autónomos',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,183 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import VnInput from 'components/common/VnInput.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['search']);
|
||||
|
||||
const supplierList = ref([]);
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
case 'tractorPlate':
|
||||
case 'trailerPlate':
|
||||
case 'driverName':
|
||||
case 'phone':
|
||||
return { [param]: { like: `%${value}%` } };
|
||||
case 'supplierFk':
|
||||
case 'price':
|
||||
return { [param]: value };
|
||||
case 'from':
|
||||
return { etd: { gte: value } };
|
||||
case 'to':
|
||||
return { etd: { lte: value } };
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="Suppliers"
|
||||
:filter="{ fields: ['id', 'nickname'] }"
|
||||
sort-by="nickname"
|
||||
limit="30"
|
||||
@on-fetch="(data) => (supplierList = data)"
|
||||
auto-load
|
||||
/>
|
||||
<VnFilterPanel
|
||||
:data-key="props.dataKey"
|
||||
:search-button="true"
|
||||
:expr-builder="exprBuilder"
|
||||
@search="emit('search')"
|
||||
>
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<div class="q-gutter-x-xs">
|
||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||
<span>{{ formatFn(tag.value) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #body="{ params }">
|
||||
<QItem class="q-my-sm">
|
||||
<QItemSection>
|
||||
<VnInputDate v-model="params.from" :label="t('From')" is-outlined />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-sm">
|
||||
<QItemSection>
|
||||
<VnInputDate v-model="params.to" :label="t('To')" is-outlined />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-sm">
|
||||
<QItemSection>
|
||||
<VnInput
|
||||
v-model="params.tractorPlate"
|
||||
:label="t('Tractor Plate')"
|
||||
is-outlined
|
||||
clearable
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-sm">
|
||||
<QItemSection>
|
||||
<VnInput
|
||||
v-model="params.trailerPlate"
|
||||
:label="t('Trailer Plate')"
|
||||
is-outlined
|
||||
clearable
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem v-if="supplierList" class="q-my-sm">
|
||||
<QItemSection>
|
||||
<VnSelectFilter
|
||||
:label="t('Carrier')"
|
||||
v-model="params.supplierFk"
|
||||
:options="supplierList"
|
||||
option-value="id"
|
||||
option-label="nickname"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
>
|
||||
<template #option="{ itemProps, opt }">
|
||||
<QItem v-bind="itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel
|
||||
>{{ opt.id }} - {{ opt.nickname }}</QItemLabel
|
||||
>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-sm">
|
||||
<QItemSection>
|
||||
<VnInput
|
||||
v-model="params.price"
|
||||
:label="t('Price')"
|
||||
type="number"
|
||||
is-outlined
|
||||
clearable
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-sm">
|
||||
<QItemSection>
|
||||
<VnInput
|
||||
v-model="params.driverName"
|
||||
:label="t('Driver name')"
|
||||
is-outlined
|
||||
clearable
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-sm">
|
||||
<QItemSection>
|
||||
<VnInput
|
||||
v-model="params.phone"
|
||||
:label="t('Phone')"
|
||||
is-outlined
|
||||
clearable
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
params:
|
||||
tractorPlate: Tractor Plate
|
||||
trailerPlate: Trailer Plate
|
||||
supplierFk: Carrier
|
||||
price: Price
|
||||
driverName: Driver name
|
||||
phone: Phone
|
||||
from: From
|
||||
to: To
|
||||
es:
|
||||
params:
|
||||
tractorPlate: Matrícula del tractor
|
||||
trailerPlate: Matrícula del trailer
|
||||
supplierFk: Transportista
|
||||
price: Precio
|
||||
driverName: Nombre del conductor
|
||||
phone: Teléfono
|
||||
from: Desde
|
||||
to: Hasta
|
||||
From: Desde
|
||||
To: Hasta
|
||||
Tractor Plate: Matrícula del tractor
|
||||
Trailer Plate: Matrícula del trailer
|
||||
Carrier: Transportista
|
||||
Price: Precio
|
||||
Driver name: Nombre del conductor
|
||||
Phone: Teléfono
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,291 @@
|
|||
<script setup>
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { dashIfEmpty, toDateHour } from 'src/filters';
|
||||
import { useValidator } from 'composables/useValidator';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useSession } from 'composables/useSession';
|
||||
import toCurrency from 'filters/toCurrency';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
|
||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
import RoadmapFilter from 'pages/Route/Roadmap/RoadmapFilter.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import axios from 'axios';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
const { validate } = useValidator();
|
||||
const quasar = useQuasar();
|
||||
const session = useSession();
|
||||
|
||||
const to = Date.vnNew();
|
||||
to.setDate(to.getDate() + 1);
|
||||
to.setHours(0, 0, 0, 0);
|
||||
|
||||
const from = Date.vnNew();
|
||||
from.setDate(from.getDate());
|
||||
from.setHours(0, 0, 0, 0);
|
||||
|
||||
const params = ref({ from, to });
|
||||
|
||||
onMounted(() => (stateStore.rightDrawer = true));
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
|
||||
const selectedRows = ref([]);
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'roadmap',
|
||||
label: t('Roadmap'),
|
||||
field: (row) => row.name,
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'ETD',
|
||||
label: t('ETD'),
|
||||
field: (row) => toDateHour(row.etd),
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'carrier',
|
||||
label: t('Carrier'),
|
||||
field: (row) => row.supplier?.nickname,
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'plate',
|
||||
label: t('Plate'),
|
||||
field: (row) => row.tractorPlate,
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
label: t('Price'),
|
||||
field: (row) => toCurrency(row.price),
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'observations',
|
||||
label: t('Observations'),
|
||||
field: (row) => dashIfEmpty(row.observations),
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
label: '',
|
||||
sortable: false,
|
||||
align: 'right',
|
||||
},
|
||||
]);
|
||||
|
||||
const refreshKey = ref(0);
|
||||
const isCloneDialogOpen = ref(false);
|
||||
const etdDate = ref(null);
|
||||
const workers = ref([]);
|
||||
|
||||
const filter = {
|
||||
include: { relation: 'supplier', scope: { fields: ['nickname'] } },
|
||||
where: {
|
||||
and: [{ etd: { gte: from } }, { etd: { lte: to } }],
|
||||
},
|
||||
};
|
||||
|
||||
const cloneSelection = async () => {
|
||||
await axios.post('Roadmaps/clone', {
|
||||
etd: etdDate.value,
|
||||
ids: selectedRows.value.map((row) => row?.id),
|
||||
});
|
||||
refreshKey.value++;
|
||||
etdDate.value = null;
|
||||
};
|
||||
|
||||
const removeSelection = async () => {
|
||||
await Promise.all(
|
||||
selectedRows.value.map((roadmap) => {
|
||||
axios.delete(`Roadmaps/${roadmap.id}`);
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
function confirmRemove() {
|
||||
quasar
|
||||
.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
title: t('Selected roadmaps will be removed'),
|
||||
message: t('Are you sure you want to continue?'),
|
||||
promise: removeSelection,
|
||||
},
|
||||
})
|
||||
.onOk(() => refreshKey.value++);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#searchbar">
|
||||
<VnSearchbar
|
||||
data-key="RoadmapList"
|
||||
:label="t('Search roadmap')"
|
||||
:info="t('You can search by roadmap reference')"
|
||||
/>
|
||||
</Teleport>
|
||||
<Teleport to="#actions-append">
|
||||
<div class="row q-gutter-x-sm">
|
||||
<QBtn
|
||||
flat
|
||||
@click="stateStore.toggleRightDrawer()"
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('globals.collapseMenu') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<RoadmapFilter data-key="RoadmapList" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QDialog v-model="isCloneDialogOpen">
|
||||
<QCard style="min-width: 350px">
|
||||
<QCardSection>
|
||||
<p class="text-h6 q-ma-none">
|
||||
{{ t('Select the estimated date of departure (ETD)') }}
|
||||
</p>
|
||||
</QCardSection>
|
||||
|
||||
<QCardSection class="q-pt-none">
|
||||
<VnInputDate :label="t('ETD')" v-model="etdDate" autofocus />
|
||||
</QCardSection>
|
||||
<QCardActions align="right">
|
||||
<QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
|
||||
<QBtn color="primary" v-close-popup @click="cloneSelection">
|
||||
{{ t('Clone') }}
|
||||
</QBtn>
|
||||
</QCardActions>
|
||||
</QCard>
|
||||
</QDialog>
|
||||
<QPage class="column items-center">
|
||||
<VnSubToolbar class="bg-vn-dark justify-end">
|
||||
<template #st-actions>
|
||||
<QBtn
|
||||
icon="vn:clone"
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
:disable="!selectedRows?.length"
|
||||
@click="isCloneDialogOpen = true"
|
||||
>
|
||||
<QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
icon="delete"
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
:disable="!selectedRows?.length"
|
||||
@click="confirmRemove"
|
||||
>
|
||||
<QTooltip>{{ t('Delete roadmap(s)') }}</QTooltip>
|
||||
</QBtn>
|
||||
</template>
|
||||
</VnSubToolbar>
|
||||
<div class="route-list">
|
||||
<VnPaginate
|
||||
:key="refreshKey"
|
||||
data-key="RoadmapList"
|
||||
url="Roadmaps"
|
||||
:limit="20"
|
||||
:filter="filter"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<div class="q-pa-md">
|
||||
<QTable
|
||||
v-model:selected="selectedRows"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
flat
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
:rows-per-page-options="[0]"
|
||||
hide-pagination
|
||||
:pagination="{ sortBy: 'ID', descending: true }"
|
||||
>
|
||||
<template #body-cell-carrier="props">
|
||||
<QTd :props="props">
|
||||
<span class="link">
|
||||
{{ props.value }}
|
||||
<SupplierDescriptorProxy
|
||||
:id="props.row?.supplier?.id"
|
||||
/>
|
||||
</span>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-actions="props">
|
||||
<QTd :props="props">
|
||||
<div class="flex items-center table-actions">
|
||||
<QIcon
|
||||
name="preview"
|
||||
size="xs"
|
||||
color="primary"
|
||||
@click="previewRoute(props?.row?.id)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<QTooltip>{{ t('Preview') }}</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</div>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<!-- <QPageSticky :offset="[20, 20]">-->
|
||||
<!-- <RouterLink :to="{ name: 'RouteCreate' }">-->
|
||||
<!-- <QBtn fab icon="add" color="primary" />-->
|
||||
<!-- <QTooltip>-->
|
||||
<!-- {{ t('newRoute') }}-->
|
||||
<!-- </QTooltip>-->
|
||||
<!-- </RouterLink>-->
|
||||
<!-- </QPageSticky>-->
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.route-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
es:
|
||||
Search roadmap: Buscar trocal
|
||||
You can search by roadmap reference: Puedes buscar por referencia de la trocal
|
||||
Delete roadmap(s): Eliminar trocal(es)
|
||||
Selected roadmaps will be removed: Las trocales seleccionadas serán eliminadas
|
||||
Are you sure you want to continue?: ¿Seguro que quieres continuar?
|
||||
The date can't be empty: La fecha no puede estar vacía
|
||||
Clone Selected Routes: Clonar rutas seleccionadas
|
||||
Roadmap: Trocal
|
||||
Carrier: Transportista
|
||||
Plate: Placa
|
||||
Price: Precio
|
||||
Observations: Observaciones
|
||||
</i18n>
|
||||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'RouteMain' },
|
||||
menus: {
|
||||
main: ['RouteList', 'RouteAutonomous', 'CmrList'],
|
||||
main: ['RouteList', 'RouteAutonomous', 'RouteRoadmap', 'CmrList'],
|
||||
card: ['RouteBasicData', 'RouteTickets', 'RouteLog'],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -29,6 +29,15 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Route/RouteList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'roadmap',
|
||||
name: 'RouteRoadmap',
|
||||
meta: {
|
||||
title: 'RouteRoadmap',
|
||||
icon: 'vn:troncales',
|
||||
},
|
||||
component: () => import('src/pages/Route/RouteRoadmap.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'RouteCreate',
|
||||
|
|
|
|||
Loading…
Reference in New Issue