wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Create roadmap summary page

This commit is contained in:
Kevin Martinez 2024-02-15 01:02:01 -03:00
parent 45d7b021a6
commit 343269fc02
12 changed files with 396 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/i18n/en/index.js
View File

@ -880,6 +880,18 @@ export default {
uncompleteTrays: 'There are incomplete trays',
},
},
'route/roadmap': {
pageTitles: {
roadmap: 'Roadmap',
summary: 'Summary',
},
},
roadmap: {
pageTitles: {
roadmap: 'Roadmap',
summary: 'Summary',
},
},
route: {
pageTitles: {
routes: 'Routes',

12
src/i18n/es/index.js
View File

@ -934,6 +934,18 @@ export default {
uncompleteTrays: 'Hay bandejas sin completar',
},
},
'route/roadmap': {
pageTitles: {
roadmap: 'Troncales',
summary: 'Resumen',
},
},
roadmap: {
pageTitles: {
roadmap: 'Troncales',
summary: 'Resumen',
},
},
route: {
pageTitles: {
routes: 'Rutas',

21
src/pages/Route/Roadmap/RoadmapCard.vue Normal file
View File

@ -0,0 +1,21 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
import RoadmapDescriptor from "pages/Route/Roadmap/RoadmapDescriptor.vue";
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<RoadmapDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<RouterView></RouterView>
</QPage>
</QPageContainer>
</template>

63
src/pages/Route/Roadmap/RoadmapDescriptor.vue Normal file
View File

@ -0,0 +1,63 @@
<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'components/ui/VnLv.vue';
import useCardDescription from 'composables/useCardDescription';
import {dashIfEmpty, toDateHour} from 'src/filters';
import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
import RoadmapDescriptorMenu from "pages/Route/Roadmap/RoadmapDescriptorMenu.vue";
const $props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
});
const route = useRoute();
const { t } = useI18n();
const entityId = computed(() => {
return $props.id || route.params.id;
});
const filter = { include: [{ relation: 'supplier' }] };
const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
</script>
<template>
<CardDescriptor
module="Roadmap"
:url="`Roadmaps/${entityId}`"
:filter="filter"
:title="data.title"
:subtitle="data.subtitle"
data-key="Roadmap"
@on-fetch="setData"
>
<template #body="{ entity }">
<VnLv :label="t('Roadmap')" :value="entity?.name" />
<VnLv :label="t('ETD')" :value="toDateHour(entity?.etd)" />
<VnLv :label="t('Carrier')">
<template #value>
<span class="link" v-if="entity?.supplier?.id">
{{ dashIfEmpty(entity?.supplier?.nickname) }}
<SupplierDescriptorProxy :id="entity?.supplier?.id" />
</span>
</template>
</VnLv>
</template>
<template #menu="{ entity }">
<RoadmapDescriptorMenu :route="entity" />
</template>
</CardDescriptor>
</template>
<i18n>
es:
Roadmap: Troncal
Carrier: Transportista
</i18n>

57
src/pages/Route/Roadmap/RoadmapDescriptorMenu.vue Normal file
View File

@ -0,0 +1,57 @@
<script setup>
import axios from 'axios';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnConfirm from 'components/ui/VnConfirm.vue';
const props = defineProps({
route: {
type: Object,
required: true,
},
});
const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
function confirmRemove() {
quasar
.dialog({
component: VnConfirm,
componentProps: {
title: t('Confirm deletion'),
message: t('Are you sure you want to delete this roadmap?'),
promise: remove,
},
})
.onOk(async () => await router.push({ name: 'RouteRoadmap' }));
}
async function remove() {
if (!props.route.id) {
return;
}
await axios.delete(`Roadmaps/${props.route.id}`);
quasar.notify({
message: t('globals.dataDeleted'),
type: 'positive',
});
}
</script>
<template>
<QItem @click="confirmRemove" v-ripple clickable>
<QItemSection avatar>
<QIcon name="delete" />
</QItemSection>
<QItemSection>{{ t('Delete roadmap') }}</QItemSection>
</QItem>
</template>
<i18n>
es:
Confirm deletion: Confirmar eliminación
Are you sure you want to delete this roadmap?: ¿Estás seguro de que quieres eliminar esta troncal?
Delete roadmap: Eliminar troncal
</i18n>

15
src/pages/Route/Roadmap/RoadmapDescriptorProxy.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup>
import RoadmapDescriptor from 'pages/Route/Roadmap/RoadmapDescriptor.vue';
const $props = defineProps({
id: {
type: Number,
required: true,
},
});
</script>
<template>
<QPopupProxy>
<RoadmapDescriptor v-if="$props.id" :id="$props.id" />
</QPopupProxy>
</template>

134
src/pages/Route/Roadmap/RoadmapSummary.vue Normal file
View File

@ -0,0 +1,134 @@
<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'components/ui/VnLv.vue';
import { QIcon } from 'quasar';
import { dashIfEmpty, toDateHour } from 'src/filters';
import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
const $props = defineProps({
id: {
type: Number,
default: 0,
},
});
const route = useRoute();
const stateStore = useStateStore();
const { t } = useI18n();
const entityId = computed(() => $props.id || route.params.id);
const isDialog = Boolean($props.id);
const hideRightDrawer = () => {
if (!isDialog) {
stateStore.rightDrawer = false;
}
};
onMounted(hideRightDrawer);
onUnmounted(hideRightDrawer);
const columns = ref([
{
name: 'warehouse',
label: t('Warehouse'),
field: (row) => dashIfEmpty(row?.warehouse?.name),
sortable: true,
align: 'left',
},
{
name: 'ETA',
label: t('ETA'),
field: (row) => toDateHour(row?.eta),
sortable: false,
align: 'left',
},
]);
const filter = {
include: [
{ relation: 'supplier' },
{ relation: 'worker' },
{
relation: 'expeditionTruck',
scope: { include: [{ relation: 'warehouse' }] },
},
],
};
</script>
<template>
<div class="q-pa-md full-width">
<CardSummary ref="summary" :url="`Roadmaps/${entityId}`" :filter="filter">
<template #header-left>
<RouterLink :to="{ name: `RoadmapSummary`, params: { id: entityId } }">
<QIcon name="open_in_new" color="white" size="sm" />
</RouterLink>
</template>
<template #header="{ entity }">
<span>{{ `${entity?.id} - ${entity?.name}` }}</span>
</template>
<template #body="{ entity }">
<QCard class="vn-one">
<VnLv :label="t('Carrier')">
<template #value>
<span class="link" v-if="entity?.supplier?.id">
{{ dashIfEmpty(entity?.supplier?.nickname) }}
<SupplierDescriptorProxy :id="entity?.supplier?.id" />
</span>
</template>
</VnLv>
<VnLv :label="t('ETD')" :value="toDateHour(entity?.etd)" />
<VnLv
:label="t('Tractor Plate')"
:value="dashIfEmpty(entity?.tractorPlate)"
/>
<VnLv
:label="t('Trailer Plate')"
:value="dashIfEmpty(entity?.trailerPlate)"
/>
</QCard>
<QCard class="vn-one">
<VnLv :label="t('Phone')" :value="dashIfEmpty(entity?.phone)" />
<VnLv
:label="t('Worker')"
:value="
entity?.worker?.firstName
? `${entity?.worker?.firstName} ${entity?.worker?.lastName}`
: '-'
"
/>
<VnLv
:label="t('Observations')"
:value="dashIfEmpty(entity?.observations)"
/>
</QCard>
<QCard class="vn-max">
<a class="header" :href="`#/route/roadmap/${entityId}/stops`">
{{ t('Stops') }}
<QIcon name="open_in_new" color="primary" />
</a>
<QTable
:columns="columns"
:rows="entity?.expeditionTruck"
:rows-per-page-options="[0]"
row-key="id"
flat
hide-pagination
/>
</QCard>
</template>
</CardSummary>
</div>
</template>
<i18n>
es:
Carrier: Transportista
Tractor Plate: Placa tractor
Trailer Plate: Placa trailer
Phone: Teléfono
Worker: Trabajador
Observations: Observaciones
Stops: Paradas
Warehouse: Almacén
</i18n>

29
src/pages/Route/Roadmap/RoadmapSummaryDialog.vue Normal file
View File

@ -0,0 +1,29 @@
<script setup>
import { useDialogPluginComponent } from 'quasar';
import RoadmapSummary from "pages/Route/Roadmap/RoadmapSummary.vue";
const $props = defineProps({
id: {
type: Number,
required: true,
},
});
defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide } = useDialogPluginComponent();
</script>
<template>
<QDialog ref="dialogRef" @hide="onDialogHide">
<div class="dialog full-width">
<RoadmapSummary v-if="$props.id" :id="$props.id" />
</div>
</QDialog>
</template>
<style lang="scss" scoped>
.dialog {
max-width: 1280px;
}
</style>

23
src/pages/Route/RouteRoadmap.vue
View File

@ -4,9 +4,7 @@ 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';
@ -15,12 +13,11 @@ 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';
import RoadmapSummaryDialog from "pages/Route/Roadmap/RoadmapSummaryDialog.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);
@ -30,8 +27,6 @@ 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));
@ -90,7 +85,6 @@ const columns = computed(() => [
const refreshKey = ref(0);
const isCloneDialogOpen = ref(false);
const etdDate = ref(null);
const workers = ref([]);
const filter = {
include: { relation: 'supplier', scope: { fields: ['nickname'] } },
@ -128,6 +122,18 @@ function confirmRemove() {
})
.onOk(() => refreshKey.value++);
}
function previewRoadmap(id) {
if (!id) {
return;
}
quasar.dialog({
component: RoadmapSummaryDialog,
componentProps: {
id,
},
});
}
</script>
<template>
@ -223,6 +229,7 @@ function confirmRemove() {
:rows-per-page-options="[0]"
hide-pagination
:pagination="{ sortBy: 'ID', descending: true }"
:on-row-click="(evt, row) => console.log(evt, row)"
>
<template #body-cell-carrier="props">
<QTd :props="props">
@ -241,7 +248,7 @@ function confirmRemove() {
name="preview"
size="xs"
color="primary"
@click="previewRoute(props?.row?.id)"
@click="previewRoadmap(props?.row?.id)"
class="cursor-pointer"
>
<QTooltip>{{ t('Preview') }}</QTooltip>

2
src/router/modules/index.js
View File

@ -13,6 +13,7 @@ import Travel from './travel';
import Order from './order';
import Department from './department';
import Entry from './entry';
import roadmap from "./roadmap";
export default [
Item,
@ -30,4 +31,5 @@ export default [
invoiceIn,
Department,
Entry,
roadmap
];

34
src/router/modules/roadmap.js Normal file
View File

@ -0,0 +1,34 @@
import { RouterView } from 'vue-router';
export default {
path: '/route/roadmap',
name: 'Roadmap',
meta: {
title: 'roadmap',
icon: 'vn:troncales',
},
component: RouterView,
redirect: { name: 'RouteMain' },
menus: {
card: [],
},
children: [
{
name: 'RouteRoadmapCard',
path: ':id',
component: () => import('src/pages/Route/Roadmap/RoadmapCard.vue'),
redirect: { name: 'RoadmapSummary' },
children: [
{
name: 'RoadmapSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'open_in_new',
},
component: () => import('pages/Route/Roadmap/RoadmapSummary.vue'),
},
],
},
],
};

2
src/router/routes.js
View File

@ -13,6 +13,7 @@ import department from './modules/department';
import shelving from 'src/router/modules/shelving';
import order from 'src/router/modules/order';
import entry from 'src/router/modules/entry';
import roadmap from "src/router/modules/roadmap";
const routes = [
{
@ -66,6 +67,7 @@ const routes = [
supplier,
travel,
department,
roadmap,
entry,
{
path: '/:catchAll(.*)*',