verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 92 Releases Wiki Activity

Modulo de rutas #195

Merged
jsegarra merged 49 commits from :feature/route-module into dev 2024-03-14 12:44:43 +00:00
Conversation 8 Commits 49 Files Changed 32 +117 -91
3 changed files with 117 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1ab9bfefed - Show all commits

49
src/pages/Route/Roadmap/RoadmapAddStopDialog.vue
View File

@ -4,10 +4,7 @@ import { useI18n } from 'vue-i18n';
import { reactive, ref } from 'vue';
import axios from 'axios';
import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInput from 'components/common/VnInput.vue';
import RoadmapAddStopForm from 'pages/Route/Roadmap/RoadmapAddStopForm.vue';
const emit = defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide } = useDialogPluginComponent();
@ -21,7 +18,6 @@ const props = defineProps({
});
const isLoading = ref(false);
const warehouseList = ref([]);
const roadmapStopForm = reactive({
roadmapFk: Number(props.roadmapFk) || 0,
warehouseFk: null,
@ -53,50 +49,17 @@ const onSave = async () => {
:filter="{ fields: ['etd'] }"
@on-fetch="updateDefaultStop"
/>
<FetchData
url="Warehouses"
auto-load
:filter="{ fields: ['id', 'name'] }"
sort-by="name"
limit="30"
@on-fetch="(data) => (warehouseList = data)"
/>
<QDialog ref="dialogRef" @hide="onDialogHide">
<QCard class="q-pa-lg">
<QCardSection class="row absolute absolute-top z-fullscreen">
<QSpace />
<QBtn icon="close" flat round dense v-close-popup />
</QCardSection>
<QCardSection class="card-section q-px-none">
<VnSelectFilter
v-model.number="roadmapStopForm.warehouseFk"
:label="t('Warehouse')"
:options="warehouseList"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
:input-debounce="0"
/>
</QCardSection>
<QCardSection class="card-section row q-px-none">
<div class="col">
<VnInputDate v-model="roadmapStopForm.eta" :label="t('ETA date')" />
</div>
<div class="col">
<VnInputTime v-model="roadmapStopForm.eta" :label="t('ETA time')" />
</div>
</QCardSection>
<QCardSection class="card-section q-px-none">
<VnInput
v-model="roadmapStopForm.description"
:label="t('Description')"
type="textarea"
:rows="1"
/>
</QCardSection>
<RoadmapAddStopForm
:roadmap-fk="roadmapFk"
:form-data="roadmapStopForm"
layout="dialog"
/>
<QCardActions align="right">
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
<QBtn

104
src/pages/Route/Roadmap/RoadmapAddStopForm.vue Normal file
View File

@ -0,0 +1,104 @@
<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnInput from 'components/common/VnInput.vue';
const props = defineProps({
formData: {
type: Object,
default: () => ({}),
},
roadmapFk: {
type: [Number, String],
required: true,
},
layout: {
type: String,
default: 'row',
},
});
const { t } = useI18n();
const warehouseList = ref([]);
const form = computed(() => props.formData);
const isDialog = computed(() => props.layout === 'dialog');
</script>
<template>
<FetchData
url="Warehouses"
auto-load
:filter="{ fields: ['id', 'name'] }"
sort-by="name"
limit="30"
@on-fetch="(data) => (warehouseList = data)"
/>
<div :class="[isDialog ? 'column' : 'form-gap', 'full-width flex']">
<QCardSection class="flex-grow q-px-none flex-1">
<VnSelectFilter
v-model.number="form.warehouseFk"
class="full-width"
:label="t('Warehouse')"
:options="warehouseList"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
autofocus
:input-debounce="0"
/>
</QCardSection>
<div :class="[!isDialog ? 'flex-2' : null, 'form-gap flex no-wrap']">
<QCardSection class="row q-px-none flex-1">
<VnInputDate
v-model="form.eta"
class="full-width"
:label="t('ETA date')"
/>
</QCardSection>
<QCardSection class="row q-px-none flex-1">
<VnInputTime
v-model="form.eta"
class="full-width"
:label="t('ETA hour')"
/>
</QCardSection>
</div>
<QCardSection class="q-px-none flex-1">
<VnInput
v-model="form.description"
class="full-width"
:label="t('Description')"
type="textarea"
:rows="1"
/>
</QCardSection>
</div>
</template>
<style lang="scss" scoped>
.form-gap {
gap: 16px;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
</style>
<i18n>
es:
Warehouse: Almacén
ETA date: Fecha ETA
ETA hour: Hora ETA
Description: Descripción
Remove stop: Eliminar parada
Add stop: Añadir parada
</i18n>

55
src/pages/Route/Roadmap/RoadmapStops.vue
View File

@ -4,16 +4,11 @@ import { useRoute } from 'vue-router';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import FetchData from 'components/FetchData.vue';
import { onMounted, ref } from 'vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnInput from 'components/common/VnInput.vue';
import VnRow from 'components/ui/VnRow.vue';
import CrudModel from 'components/CrudModel.vue';
import RoadmapAddStopForm from "pages/Route/Roadmap/RoadmapAddStopForm.vue";
const { t } = useI18n();
const route = useRoute();
const warehouseList = ref([]);
const roadmapStopsCrudRef = ref(null);
const defaultStop = ref({
@ -39,14 +34,6 @@ onMounted(() => {
:filter="{ fields: ['etd'] }"
@on-fetch="updateDefaultStop"
/>
<FetchData
url="Warehouses"
auto-load
:filter="{ fields: ['id', 'name'] }"
sort-by="name"
limit="30"
@on-fetch="(data) => (warehouseList = data)"
/>
<div class="q-pa-lg">
<CrudModel
ref="roadmapStopsCrudRef"
@ -59,40 +46,12 @@ onMounted(() => {
>
<template #body="{ rows }">
<QCard class="q-pa-md">
<VnRow
<QCardSection
v-for="(row, index) in rows"
:key="index"
class="row q-gutter-md q-mb-md"
class="row no-wrap"
>
<div class="col">
<VnSelectFilter
v-model.number="row.warehouseFk"
:label="t('Warehouse')"
:options="warehouseList"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
autofocus
:input-debounce="0"
/>
</div>
<div class="col">
<VnInputDate v-model="row.eta" :label="t('ETA date')" />
</div>
<div class="col">
<VnInputTime v-model="row.eta" :label="t('ETA hour')" />
</div>
<div class="col">
<VnInput
v-model="row.description"
:label="t('Description')"
type="textarea"
:rows="1"
/>
</div>
<RoadmapAddStopForm :roadmap-fk="route.params?.id" :form-data="row" />
<div class="col-1 row justify-center items-center">
<QIcon
name="delete"
@ -106,8 +65,8 @@ onMounted(() => {
</QTooltip>
</QIcon>
</div>
</VnRow>
<VnRow>
</QCardSection>
<QCardSection>
jsegarra marked this conversation as resolved Outdated
jsegarra commented 2024-03-06 07:30:35 +00:00
Outdated
Review
Copy Link

Hecho en falta el autofocus cuando es nuevo registro

Hecho en falta el autofocus cuando es nuevo registro
kmartinez commented 2024-03-07 02:16:38 +00:00
Outdated
Review
Copy Link

Corregido 7974725da0.

Corregido 7974725da0.
jsegarra commented 2024-03-07 05:25:25 +00:00
Outdated
Review
Copy Link

Uff...un ejemplo de, mala practica, tener código duplicado. Has añadido autofocus 1 vez pero ese formulario lo tenemos duplicado.
Lo del formulario duplicado lo comentamos en post-daily, pero entiendo que no te ha dado tiempo a todo

Uff...un ejemplo de, mala practica, tener código duplicado. Has añadido autofocus 1 vez pero ese formulario lo tenemos duplicado. Lo del formulario duplicado lo comentamos en post-daily, pero entiendo que no te ha dado tiempo a todo
kmartinez commented 2024-03-07 23:38:18 +00:00
Outdated
Review
Copy Link

Aca se crea un nuevo componente para el formulario 1ab9bfefed.

Aca se crea un nuevo componente para el formulario 1ab9bfefed.
<QIcon
name="add"
size="sm"
@ -119,7 +78,7 @@ onMounted(() => {
{{ t('Add stop') }}
</QTooltip>
</QIcon>
</VnRow>
</QCardSection>
</QCard>
</template>
</CrudModel>