refactor: #7516 unified navigate and redirectTo functions #1324

Closed
provira wants to merge 8 commits from 7516-refactorNavigateAndRedirect into dev
11 changed files with 46 additions and 51 deletions

View File

@ -0,0 +1,12 @@
import { useRouter, useRoute } from 'vue-router';
export function useNavigate() {
const router = useRouter();
const route = useRoute();
Review

se usa route?
Si haces quasar build saldrá error, no?

se usa route? Si haces quasar build saldrá error, no?
Review

Si, se usaba en una modificación anterior pero no se quitó al cambiarse

Si, se usaba en una modificación anterior pero no se quitó al cambiarse
function redirectTo(route){
router.push(route);
}
return { redirectTo };
}

View File

@ -1,6 +1,5 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnTable from 'components/VnTable/VnTable.vue'; import VnTable from 'components/VnTable/VnTable.vue';
@ -11,9 +10,7 @@ const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const router = useRouter(); const router = useRouter();
const dataKey = 'AgencyList'; const dataKey = 'AgencyList';
function navigate(id) {
router.push({ path: `/agency/${id}` });
}
const exprBuilder = (param, value) => { const exprBuilder = (param, value) => {
if (!value) return; if (!value) return;
if (param !== 'search') return; if (param !== 'search') return;

View File

@ -6,6 +6,7 @@ import { useQuasar } from 'quasar';
import { toDate, toHour } from 'src/filters'; import { toDate, toHour } from 'src/filters';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { usePrintService } from 'src/composables/usePrintService'; import { usePrintService } from 'src/composables/usePrintService';
import { useNavigate } from 'src/composables/useNavigate';
import axios from 'axios'; import axios from 'axios';
import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue'; import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
@ -25,7 +26,7 @@ const selectedRows = ref([]);
const tableRef = ref([]); const tableRef = ref([]);
const confirmationDialog = ref(false); const confirmationDialog = ref(false);
const startingDate = ref(null); const startingDate = ref(null);
const router = useRouter(); const { redirectTo } = useNavigate();
const routeFilter = { const routeFilter = {
include: [ include: [
{ {
@ -211,17 +212,13 @@ const columns = computed(() => [
{ {
title: t('route.routeSummary'), title: t('route.routeSummary'),
icon: 'arrow_forward', icon: 'arrow_forward',
action: (row) => navigate(row?.id), action: (row) => redirectTo({ path: '/route/' + row.id }),
isPrimary: true, isPrimary: true,
}, },
], ],
}, },
]); ]);
function navigate(id) {
router.push({ path: `/route/${id}` });
}
const cloneRoutes = async () => { const cloneRoutes = async () => {
if (!selectedRows.value.length || !startingDate.value) return; if (!selectedRows.value.length || !startingDate.value) return;
await axios.post('Routes/clone', { await axios.post('Routes/clone', {

View File

@ -1,12 +1,14 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { useNavigate } from 'src/composables/useNavigate';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue'; import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue'; import VnLv from 'src/components/ui/VnLv.vue';
const router = useRouter(); const router = useRouter();
const { redirectTo } = useNavigate();
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();

View File

@ -1,14 +1,15 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useNavigate } from 'src/composables/useNavigate';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import CrudModel from 'components/CrudModel.vue'; import CrudModel from 'components/CrudModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const { redirectTo } = useNavigate();
const { t } = useI18n(); const { t } = useI18n();
const supplierAgencyTermRef = ref(null); const supplierAgencyTermRef = ref(null);
const agenciesOptions = ref(null); const agenciesOptions = ref(null);

View File

@ -1,8 +1,8 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from 'vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useNavigate } from 'src/composables/useNavigate';
import VnConfirm from 'components/ui/VnConfirm.vue'; import VnConfirm from 'components/ui/VnConfirm.vue';
@ -18,23 +18,19 @@ const $props = defineProps({
}); });
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const { redirectTo } = useNavigate();
const quasar = useQuasar(); const quasar = useQuasar();
const { notify } = useNotify(); const { notify } = useNotify();
const redirectToCreateView = (queryParams) => {
router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
};
const cloneTravel = () => { const cloneTravel = () => {
const stringifiedTravelData = JSON.stringify($props.travel); const stringifiedTravelData = JSON.stringify($props.travel);
redirectToCreateView(stringifiedTravelData); redirectTo({name: 'Travel', query: { travelData: stringifiedTravelData }});
}; };
const cloneTravelWithEntries = async () => { const cloneTravelWithEntries = async () => {
const { data } = await axios.post(`Travels/${$props.travel.id}/cloneWithEntries`); const { data } = await axios.post(`Travels/${$props.travel.id}/cloneWithEntries`);
notify('globals.dataSaved', 'positive'); notify('globals.dataSaved', 'positive');
router.push({ name: 'TravelBasicData', params: { id: data.id } }); redirectTo({name: 'TravelBasicData', params: { id: data.id }});
}; };
const canDelete = computed(() => useAcl().hasAcl('Travel', '*', 'WRITE')); const canDelete = computed(() => useAcl().hasAcl('Travel', '*', 'WRITE'));
@ -55,7 +51,7 @@ const openDeleteEntryDialog = (id) => {
const deleteTravel = async (id) => { const deleteTravel = async (id) => {
await axios.delete(`Travels/${id}`); await axios.delete(`Travels/${id}`);
router.push({ name: 'TravelList' }); redirectTo({ name: 'TravelList' });
notify('globals.dataDeleted', 'positive'); notify('globals.dataDeleted', 'positive');
}; };
</script> </script>

View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import VnTable from 'components/VnTable/VnTable.vue'; import VnTable from 'components/VnTable/VnTable.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import TravelSummary from './Card/TravelSummary.vue'; import TravelSummary from './Card/TravelSummary.vue';
@ -15,9 +15,9 @@ import VnInputDate from 'src/components/common/VnInputDate.vue';
import { toDateTimeFormat } from 'src/filters/date'; import { toDateTimeFormat } from 'src/filters/date';
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const { redirectTo } = useNavigate();
const tableRef = ref(); const tableRef = ref();
const dataKey = 'TravelList'; const dataKey = 'TravelList';
const $props = defineProps({ const $props = defineProps({

View File

@ -4,17 +4,17 @@ import axios from 'axios';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import FormModelPopup from 'src/components/FormModelPopup.vue'; import FormModelPopup from 'src/components/FormModelPopup.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnRow from 'src/components/ui/VnRow.vue'; import VnRow from 'src/components/ui/VnRow.vue';
import VnTable from 'src/components/VnTable/VnTable.vue'; import VnTable from 'src/components/VnTable/VnTable.vue';
import { useNavigate } from 'src/composables/useNavigate';
const quasar = useQuasar(); const quasar = useQuasar();
const arrayData = useArrayData('WagonTypeList'); const arrayData = useArrayData('WagonTypeList');
const { redirectTo } = useNavigate();
const store = arrayData.store; const store = arrayData.store;
const dialog = ref(); const dialog = ref();
const { push } = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const tableRef = ref(); const tableRef = ref();
@ -53,7 +53,7 @@ const columns = computed(() => [
title: t('components.smartCard.openCard'), title: t('components.smartCard.openCard'),
icon: 'arrow_forward', icon: 'arrow_forward',
isPrimary: true, isPrimary: true,
action: (row) => navigate(row.id, row.name), action: ({id, name}) => redirectTo({ path: `/wagon/type/${id}/edit`, query: { name } }),
}, },
{ {
title: t('wagon.list.remove'), title: t('wagon.list.remove'),
@ -65,10 +65,6 @@ const columns = computed(() => [
}, },
]); ]);
function navigate(id, name) {
push({ path: `/wagon/type/${id}/edit`, query: { name } });
}
async function remove(row) { async function remove(row) {
await axios.delete(`WagonTypes/${row.id}`); await axios.delete(`WagonTypes/${row.id}`);
quasar.notify({ quasar.notify({

View File

@ -3,7 +3,6 @@ import axios from 'axios';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnTable from 'src/components/VnTable/VnTable.vue'; import VnTable from 'src/components/VnTable/VnTable.vue';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
@ -13,8 +12,9 @@ import VnSection from 'src/components/common/VnSection.vue';
const quasar = useQuasar(); const quasar = useQuasar();
const arrayData = useArrayData('WagonList'); const arrayData = useArrayData('WagonList');
const store = arrayData.store; const store = arrayData.store;
const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { redirectTo } = useNavigate();
const tableRef = ref(); const tableRef = ref();
const dataKey = 'WagonList'; const dataKey = 'WagonList';
const filter = { const filter = {
@ -60,7 +60,7 @@ const columns = computed(() => [
title: t('components.smartCard.openCard'), title: t('components.smartCard.openCard'),
icon: 'arrow_forward', icon: 'arrow_forward',
isPrimary: true, isPrimary: true,
action: (row) => navigate(row.id), action: (row) => redirectTo({ path: `/wagon/`+row.id+`/edit` }),
}, },
{ {
title: t('wagon.list.remove'), title: t('wagon.list.remove'),
@ -72,9 +72,7 @@ const columns = computed(() => [
}, },
]); ]);
function navigate(id) {
router.push({ path: `/wagon/${id}/edit` });
}
async function remove(row) { async function remove(row) {
await axios.delete(`Wagons/${row.id}`).then(async () => { await axios.delete(`Wagons/${row.id}`).then(async () => {

View File

@ -4,21 +4,19 @@ import { useQuasar } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import CardList from 'components/ui/CardList.vue'; import CardList from 'components/ui/CardList.vue';
import { useNavigate } from 'src/composables/useNavigate';
const quasar = useQuasar(); const quasar = useQuasar();
const arrayData = useArrayData('ZoneDeliveryList'); const arrayData = useArrayData('ZoneDeliveryList');
const store = arrayData.store; const store = arrayData.store;
const router = useRouter(); const { redirectTo } = useNavigate();
const { t } = useI18n(); const { t } = useI18n();
function navigate(id) {
router.push({ path: `/zone/type/${id}/edit` });
}
function create() { function create() {
router.push({ path: `/zone/type/create` }); redirectTo({ path: `/zone/type/create` });
} }
async function remove(row) { async function remove(row) {
@ -54,12 +52,12 @@ async function remove(row) {
:key="row.id" :key="row.id"
:title="(row.name || '').toString()" :title="(row.name || '').toString()"
:id="row.id" :id="row.id"
@click="navigate(row.id)" @click="redirectTo({path: '/zone/type/'+row.id+'/edit'})"
Review

Porque no usar template String si ya lo tenias antes?
Quiero decir, porque tiene otro formato?
Otra manera de hacerlo es con name y params, que he visto que has usado mas abajo
Unificar criterio?? Creo que nos centramos en dejarlo como estaba

Porque no usar template String si ya lo tenias antes? Quiero decir, porque tiene otro formato? Otra manera de hacerlo es con name y params, que he visto que has usado mas abajo Unificar criterio?? Creo que nos centramos en dejarlo como estaba
> >
<template #actions> <template #actions>
<QBtn <QBtn
:label="t('components.smartCard.openCard')" :label="t('components.smartCard.openCard')"
@click.stop="navigate(row.id)" @click.stop="redirectTo({path: '/zone/type/'+row.id+'/edit'})"
outline outline
/> />
<QBtn <QBtn

View File

@ -6,19 +6,17 @@ import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import CardList from 'components/ui/CardList.vue'; import CardList from 'components/ui/CardList.vue';
import { useNavigate } from 'src/composables/useNavigate';
const quasar = useQuasar(); const quasar = useQuasar();
const arrayData = useArrayData('ZoneUpcomingList'); const arrayData = useArrayData('ZoneUpcomingList');
const store = arrayData.store; const store = arrayData.store;
const router = useRouter(); const { redirectTo } = useNavigate();
const { t } = useI18n(); const { t } = useI18n();
function navigate(id) {
router.push({ path: `/zone/type/${id}/edit` });
}
function create() { function create() {
router.push({ path: `/zone/type/create` }); redirectTo({ path: `/zone/type/create` });
} }
async function remove(row) { async function remove(row) {
@ -54,12 +52,12 @@ async function remove(row) {
:key="row.id" :key="row.id"
:title="(row.name || '').toString()" :title="(row.name || '').toString()"
:id="row.id" :id="row.id"
@click="navigate(row.id)" @click="redirectTo({path: '/zone/type/'+row.id+'/edit'})"
> >
<template #actions> <template #actions>
<QBtn <QBtn
:label="t('components.smartCard.openCard')" :label="t('components.smartCard.openCard')"
@click.stop="navigate(row.id)" @click.stop="redirectTo({path: '/zone/type/'+row.id+'/edit'})""
Review

Porque no usar template String si ya lo tenias antes?
Quiero decir, porque tiene otro formato?
Otra manera de hacerlo es con name y params, que he visto que has usado mas abajo
Unificar criterio?? Creo que nos centramos en dejarlo como estaba

Porque no usar template String si ya lo tenias antes? Quiero decir, porque tiene otro formato? Otra manera de hacerlo es con name y params, que he visto que has usado mas abajo Unificar criterio?? Creo que nos centramos en dejarlo como estaba
outline outline
/> />
<QBtn <QBtn