salix-front/src/pages/Travel/TravelCreate.vue

<script setup>
import { useI18n } from 'vue-i18n';
import { reactive, computed } from 'vue';
import FetchData from 'components/FetchData.vue';
import { useTravelStore } from 'src/stores/travel';
import { useRouter, useRoute } from 'vue-router';
import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
import { toDate } from 'src/filters';
import { onBeforeMount } from 'vue';

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const travelStore = useTravelStore();

const newTravelDataForm = reactive({
    ref: null,
    agencyModeFk: null,
    shipped: null,
    landed: null,
    warehouseOutFk: null,
    warehouseInFk: null,
});

const agenciesOptions = reactive({
    original: [],
    filtered: [],
});

const warehousesOptions = reactive({
    original: [],
    filtered: [],
});

onBeforeMount(() => {
    if (route.query.travelData) {
        const travelData = JSON.parse(route.query.travelData);
        for (let key in newTravelDataForm) {
            if (key === 'landed' || key === 'shipped') {
                newTravelDataForm[key] = travelData[key].substring(0, 10);
            } else {
                newTravelDataForm[key] = travelData[key];
            }
        }
    }
});

const createTravel = async () => {
    const response = await travelStore.createTravel(newTravelDataForm);
    if (response.status === 200) router.push({ path: `/travel/${response.data.id}` });
};

const onFetchAgencies = (agencies) => {
    agenciesOptions.original = agencies.map((agency) => {
        return { value: agency.agencyFk, label: agency.name };
    });
};

const onFetchWarehouses = (warehouses) => {
    warehousesOptions.original = warehouses.map((warehouse) => {
        return { value: warehouse.id, label: warehouse.name };
    });
};

const canSubmit = computed(() => {
    for (const key in newTravelDataForm) {
        if (!newTravelDataForm[key]) return false;
    }
    return true;
});

const redirectToTravelList = () => {
    router.push({ name: 'TravelList' });
};
</script>

<template>
    <FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
    <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
    <QPage class="q-pa-md">
        <QForm
            @submit="createTravel()"
            class="text-white column q-mx-auto"
            style="max-width: 800px"
        >
            <QCard class="row q-pa-xl full-width card">
                <QInput
                    v-model="newTravelDataForm.ref"
                    :label="t('travel.shared.reference')"
                    filled
                    style="max-width: 100%"
                />
                <QSelect
                    :options="agenciesOptions.filtered"
                    v-model="newTravelDataForm.agencyModeFk"
                    filled
                    use-input
                    @filter="
                        (val, update, abort) =>
                            inputSelectFilter(val, update, abort, agenciesOptions)
                    "
                    :label="t('travel.shared.agency')"
                    transition-show="jump-up"
                    transition-hide="jump-up"
                    style="max-width: 100%"
                />
                <QInput
                    v-model="newTravelDataForm.shipped"
                    type="date"
                    filled
                    mask="date"
                    :label="t('travel.shared.shipped')"
                />
                <QInput
                    v-model="newTravelDataForm.landed"
                    type="date"
                    filled
                    mask="date"
                    :label="t('travel.shared.landed')"
                />
                <QSelect
                    :options="warehousesOptions.filtered"
                    v-model="newTravelDataForm.warehouseOutFk"
                    filled
                    use-input
                    @filter="
                        (val, update, abort) =>
                            inputSelectFilter(val, update, abort, warehousesOptions)
                    "
                    :label="t('travel.shared.wareHouseOut')"
                    transition-show="jump-up"
                    transition-hide="jump-up"
                />
                <QSelect
                    :options="warehousesOptions.filtered"
                    v-model="newTravelDataForm.warehouseInFk"
                    filled
                    use-input
                    @filter="
                        (val, update, abort) =>
                            inputSelectFilter(val, update, abort, warehousesOptions)
                    "
                    :label="t('travel.shared.wareHouseIn')"
                    transition-show="jump-up"
                    transition-hide="jump-up"
                />
            </QCard>
            <div class="row">
                <QBtn
                    :label="t('globals.create')"
                    type="submit"
                    color="primary"
                    class="q-mt-md"
                    :disable="!canSubmit"
                />
                <QBtn
                    :label="t('globals.cancel')"
                    class="q-mt-md"
                    flat
                    :disable="!canSubmit"
                    @click="redirectToTravelList()"
                />
            </div>
        </QForm>
    </QPage>
</template>

<style lang="scss" scoped>
.card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
}
</style>

<i18n>

</i18n>