Merge branch 'dev' into feature/WeeklyTickets

src/components/common/VnInputDate.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
 
 const props = defineProps({
@@ -24,6 +25,9 @@ const hover = ref(false);
 
 const emit = defineEmits(['update:modelValue']);
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const joinDateAndTime = (date, time) => {
     if (!date) {
         return null;
@@ -91,6 +95,8 @@ const styleAttrs = computed(() => {
             readonly
             :model-value="displayDate(value)"
             v-bind="{ ...$attrs, ...styleAttrs }"
+            :class="{ required: $attrs.required }"
+            :rules="$attrs.required ? [requiredFieldRule] : null"
             @click="isPopupOpen = true"
         >
             <template #append>

src/components/common/VnInputTime.vue

@@ -17,8 +17,9 @@ const props = defineProps({
         default: false,
     },
 });
-const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 
 const value = computed({
     get() {
@@ -71,6 +72,8 @@ const styleAttrs = computed(() => {
         readonly
         :model-value="formatTime(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
         @click="isPopupOpen = true"
     >
         <template #append>

src/i18n/locale/en.yml

@@ -446,6 +446,7 @@ ticket:
         sale: Sale
         ticketAdvance: Advance tickets
         futureTickets: Future tickets
+        purchaseRequest: Purchase request
         weeklyTickets: Weekly tickets
     list:
         nickname: Nickname

src/i18n/locale/es.yml

@@ -445,6 +445,7 @@ ticket:
         sale: Lineas del pedido
         ticketAdvance: Adelantar tickets
         futureTickets: Tickets a futuro
+        purchaseRequest: Petición de compra
         weeklyTickets: Tickets programados
     list:
         nickname: Alias

src/pages/Ticket/Card/BasicData/BasicDataTable.vue

@@ -0,0 +1,263 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'filters/index';
+import { useRole } from 'src/composables/useRole';
+
+const $props = defineProps({
+    formData: {
+        type: Object,
+        required: true,
+    },
+    haveNegatives: {
+        type: Boolean,
+        required: true,
+        default: false,
+    },
+});
+
+const emit = defineEmits(['updateForm', 'update:haveNegatives']);
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { hasAny } = useRole();
+
+const _ticketData = ref($props.formData);
+const ticketUpdateActions = ref(null);
+const haveNegatives = computed({
+    get: () => $props.haveNegatives,
+    set: (val) => emit('update:haveNegatives', val),
+});
+const rows = computed(() => _ticketData.value?.sale?.items || []);
+
+watch(
+    () => _ticketData.value,
+    (val) => emit('updateForm', val),
+    { deep: true }
+);
+
+const columns = computed(() => [
+    {
+        required: true,
+        label: t('basicData.item'),
+        name: 'item',
+        align: 'left',
+        format: (val) => val.name,
+    },
+    {
+        required: true,
+        label: t('basicData.description'),
+        name: 'description',
+        align: 'left',
+        hidden: true,
+    },
+    {
+        label: t('basicData.movable'),
+        name: 'movable',
+        align: 'left',
+    },
+    {
+        required: true,
+        label: t('basicData.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+    },
+    {
+        required: true,
+        label: t('basicData.pricePPU'),
+        name: 'price',
+        field: 'price',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        required: true,
+        label: t('basicData.newPricePPU'),
+        name: 'newPrice',
+        field: (row) => row.component.newPrice,
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        required: true,
+        label: t('basicData.difference'),
+        name: 'difference',
+        field: (row) => row.component.difference,
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+]);
+
+const loadDefaultTicketAction = () => {
+    const isSalesAssistant = hasAny(['salesAssistant']);
+    _ticketData.value.option = isSalesAssistant ? 'mana' : 'renewPrices';
+};
+
+const totalPrice = computed(() => {
+    return rows.value.reduce((acc, item) => acc + item.price * item.quantity, 0);
+});
+
+const totalNewPrice = computed(() => {
+    return rows.value.reduce(
+        (acc, item) => acc + item.component.newPrice * item.quantity,
+        0
+    );
+});
+
+const totalDifference = computed(() => {
+    return rows.value.reduce((acc, item) => acc + item.component?.difference || 0, 0);
+});
+const showMovablecolumn = computed(() => (haveDifferences.value > 0 ? ['movable'] : []));
+const haveDifferences = computed(() => _ticketData.value.sale?.haveDifferences);
+const ticketHaveNegatives = () => {
+    let _haveNegatives = false;
+    let haveNotNegatives = false;
+    _ticketData.value.withoutNegatives = false;
+    _ticketData.value?.sale?.items.forEach((item) => {
+        if (item.quantity > item.movable) _haveNegatives = true;
+        else haveNotNegatives = true;
+    });
+
+    haveNegatives.value = _haveNegatives && haveNotNegatives && haveDifferences.value;
+    if (haveNegatives.value) _ticketData.value.withoutNegatives = true;
+};
+
+onMounted(() => {
+    stateStore.rightDrawer = true;
+    loadDefaultTicketAction();
+    ticketHaveNegatives();
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        url="TicketUpdateActions"
+        @on-fetch="(data) => (ticketUpdateActions = data)"
+        auto-load
+    />
+    <RightMenu>
+        <template #right-panel>
+            <QCard
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('basicData.total') }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('basicData.price') }}:
+                        {{ toCurrency(totalPrice) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('basicData.newPrice') }}: {{ toCurrency(totalNewPrice) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('basicData.difference') }}: {{ toCurrency(totalDifference) }}
+                    </span>
+                </QCardSection>
+            </QCard>
+            <QCard
+                v-if="totalDifference"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('basicData.chargeDifference') }}
+                    </span>
+                </QCardSection>
+                <QCardSection
+                    v-for="(action, index) in ticketUpdateActions"
+                    :key="index"
+                    horizontal
+                >
+                    <QRadio
+                        v-model="_ticketData.option"
+                        :val="action.code"
+                        :label="action.description"
+                        dense
+                    />
+                </QCardSection>
+            </QCard>
+            <QCard
+                v-if="haveNegatives"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal class="flex row items-center">
+                    <QCheckbox
+                        :label="t('basicData.withoutNegatives')"
+                        v-model="_ticketData.withoutNegatives"
+                        :toggle-indeterminate="false"
+                    />
+                    <QIcon name="info" size="xs" class="q-ml-sm">
+                        <QTooltip max-width="350px">
+                            {{ t('basicData.withoutNegativesInfo') }}
+                        </QTooltip>
+                    </QIcon>
+                </QCardSection>
+            </QCard>
+        </template>
+    </RightMenu>
+    <QTable
+        :visible-columns="showMovablecolumn"
+        :rows="rows"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        :no-data-label="t('globals.noResults')"
+        flat
+    >
+        <template #body-cell-item="{ row }">
+            <QTd>
+                <QBtn flat color="primary">
+                    {{ row.itemFk }}
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QBtn>
+            </QTd>
+        </template>
+        <template #body-cell-description="{ row }">
+            <QTd>
+                <div class="column">
+                    <span>{{ row.item.name }}</span>
+                    <span class="color-vn-label">{{ row.item.subName }}</span>
+                    <FetchedTags :item="row.item" :max-length="6" />
+                </div>
+            </QTd>
+        </template>
+        <template #body-cell-movable="{ row }">
+            <QTd>
+                <QBadge
+                    v-if="_ticketData?.sale?.haveDifferences"
+                    :text-color="row.quantity > row.movable ? 'black' : 'white'"
+                    :color="row.quantity > row.movable ? 'negative' : 'transparent'"
+                    :label="row.movable"
+                />
+            </QTd>
+        </template>
+    </QTable>
+</template>

src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue

@@ -0,0 +1,468 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { toTimeFormat } from 'filters/date.js';
+
+const $props = defineProps({
+    formData: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+    },
+});
+
+const emit = defineEmits(['updateForm']);
+
+const { notify } = useNotify();
+const router = useRouter();
+const { t } = useI18n();
+const agencyFetchRef = ref(null);
+const zonesFetchRef = ref(null);
+
+const clientsOptions = ref([]);
+const warehousesOptions = ref([]);
+const companiesOptions = ref([]);
+const agenciesOptions = ref([]);
+const zonesOptions = ref([]);
+const addresses = ref([]);
+const formData = ref($props.formData);
+
+watch(
+    () => formData.value,
+    (val) => emit('updateForm', val),
+    { deep: true }
+);
+
+const agencyByWarehouseFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: {
+        warehouseFk: warehouseId.value,
+    },
+}));
+
+const zonesFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: formData.value?.agencyModeFk
+        ? {
+              shipped: formData.value?.shipped,
+              addressFk: formData.value?.addressFk,
+              agencyModeFk: formData.value?.agencyModeFk,
+              warehouseFk: formData.value?.warehouseFk,
+          }
+        : {},
+}));
+
+const getLanded = async (params) => {
+    try {
+        const validParams =
+            shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) return;
+
+        formData.value.zoneFk = null;
+        zonesOptions.value = [];
+        const { data } = await axios.get(`Agencies/getLanded`, { params });
+        if (data) {
+            formData.value.zoneFk = data.zoneFk;
+            formData.value.landed = data.landed;
+            formData.value.shipped = params.shipped;
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const getShipped = async (params) => {
+    try {
+        const validParams =
+            landed.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) return;
+
+        formData.value.zoneFk = null;
+        zonesOptions.value = [];
+        const { data } = await axios.get(`Agencies/getShipped`, { params });
+        if (data) {
+            formData.value.zoneFk = data.zoneFk;
+            formData.value.landed = params.landed;
+            formData.value.shipped = data.shipped;
+        } else {
+            notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const onChangeZone = async (zoneId) => {
+    try {
+        formData.value.agencyModeFk = null;
+        const { data } = await axios.get(`Zones/${zoneId}`);
+        formData.value.agencyModeFk = data.agencyModeFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const onChangeAddress = async (addressId) => {
+    try {
+        formData.value.nickname = null;
+        const { data } = await axios.get(`Addresses/${addressId}`);
+        formData.value.nickname = data.nickname;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getClientDefaultAddress = async (clientId) => {
+    try {
+        const { data } = await axios.get(`Clients/${clientId}`);
+        if (data) addressId.value = data.defaultAddressFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const clientAddressesList = async (value) => {
+    let filter = {
+        include: [
+            {
+                relation: 'province',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+            {
+                relation: 'agencyMode',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        ],
+    };
+    const params = { filter: JSON.stringify(filter) };
+    const { data } = await axios.get(`Clients/${value}/addresses`, { params });
+    if (data) addresses.value = data;
+};
+
+const addressId = computed({
+    get: () => formData.value?.addressFk,
+    set: (val) => {
+        if (val != formData.value?.addressFk) {
+            formData.value.addressFk = val;
+            onChangeAddress(val);
+            getShipped({
+                landed: formData.value?.landed,
+                addressFk: val,
+                agencyModeFk: formData.value?.agencyModeFk,
+                warehouseFk: formData.value?.warehouseFk,
+            });
+        }
+    },
+});
+
+const clientId = computed({
+    get: () => formData.value?.clientFk,
+    set: (val) => {
+        formData.value.clientFk = val;
+        formData.value.addressFk = null;
+        if (!val) return;
+        getClientDefaultAddress(val);
+        clientAddressesList(val);
+    },
+});
+
+const landed = computed({
+    get: () => formData.value?.landed,
+    set: (val) => {
+        formData.value.landed = val;
+        getShipped({
+            landed: val,
+            addressFk: formData.value?.addressFk,
+            agencyModeFk: formData.value?.agencyModeFk,
+            warehouseFk: formData.value?.warehouseFk,
+        });
+    },
+});
+
+const agencyModeId = computed({
+    get: () => formData.value.agencyModeFk,
+    set: (val) => {
+        if (val != formData.value.agencyModeFk) {
+            formData.value.agencyModeFk = val;
+            if (!val) return;
+            const agencyMode = agenciesOptions.value.find((a) => a.id == val);
+            formData.value.warehouseFk = agencyMode.warehouseFk;
+
+            getLanded({
+                shipped: formData.value?.shipped,
+                addressFk: formData.value?.addressFk,
+                agencyModeFk: val,
+                warehouseFk: formData.value?.warehouseFk,
+            });
+        }
+    },
+});
+
+const zoneId = computed({
+    get: () => formData.value?.zoneFk,
+    set: (val) => {
+        if (val != formData.value?.zoneFk) {
+            formData.value.zoneFk = val;
+            onChangeZone(val);
+        }
+    },
+});
+
+const warehouseId = computed({
+    get: () => formData.value?.warehouseFk,
+    set: (val) => {
+        if (val != formData.value?.warehouseFk) {
+            formData.value.warehouseFk = val;
+            getShipped({
+                landed: formData.value?.landed,
+                addressFk: formData.value?.addressFk,
+                agencyModeFk: formData.value?.agencyModeFk,
+                warehouseFk: val,
+            }).then(() => {
+                if (zoneId.value == null) formData.value.agencyModeFk = null;
+            });
+        }
+    },
+});
+
+const shipped = computed({
+    get: () => formData.value?.shipped,
+    set: (val) => {
+        if (new Date(formData.value?.shipped).toDateString() != val.toDateString())
+            val.setHours(0, 0, 0, 0);
+        formData.value.shipped = val;
+        getLanded({
+            shipped: val,
+            addressFk: formData.value?.addressFk,
+            agencyModeFk: formData.value?.agencyModeFk,
+            warehouseFk: formData.value?.warehouseFk,
+        });
+    },
+});
+
+const onFormModelInit = () => {
+    if (formData.value?.clientFk) clientAddressesList(formData.value?.clientFk);
+};
+
+const redirectToCustomerAddress = () => {
+    router.push({
+        name: 'CustomerAddressEditCard',
+        params: { id: clientId.value, addressId: addressId.value },
+    });
+};
+
+onMounted(() => onFormModelInit());
+</script>
+<template>
+    <FetchData
+        url="Clients"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'id',
+        }"
+        @on-fetch="(data) => (clientsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        :filter="{
+            fields: ['id', 'code'],
+            order: 'code ASC',
+        }"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="agencyFetchRef"
+        url="AgencyModes/byWarehouse"
+        :filter="agencyByWarehouseFilter"
+        @on-fetch="(data) => (agenciesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="zonesFetchRef"
+        url="Zones/includingExpired"
+        :filter="zonesFilter"
+        @on-fetch="(data) => (zonesOptions = data)"
+        auto-load
+    />
+    <QForm>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <VnSelect
+                :label="t('basicData.client')"
+                v-model="clientId"
+                option-value="id"
+                option-label="name"
+                :options="clientsOptions"
+                hide-selected
+                map-options
+                :required="true"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel
+                                >#{{ scope.opt?.id }} {{ scope.opt?.name }}</QItemLabel
+                            >
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+            <VnSelect
+                :label="t('basicData.warehouse')"
+                v-model="warehouseId"
+                option-value="id"
+                option-label="name"
+                :options="warehousesOptions"
+                hide-selected
+                map-options
+                :required="true"
+            />
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <VnSelect
+                :label="t('basicData.address')"
+                v-model="addressId"
+                option-value="id"
+                option-label="nickname"
+                :options="addresses"
+                hide-selected
+                map-options
+                :required="true"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel
+                                :class="{
+                                    'color-vn-label': !scope.opt?.isActive,
+                                }"
+                            >
+                                {{
+                                    `${
+                                        !scope.opt?.isActive
+                                            ? t('basicData.inactive')
+                                            : ''
+                                    } `
+                                }}
+                                <span> {{ scope.opt?.nickname }}</span>
+                                <span
+                                    v-if="
+                                        scope.opt?.province ||
+                                        scope.opt?.city ||
+                                        scope.opt?.street
+                                    "
+                                    >, {{ scope.opt?.street }}, {{ scope.opt?.city }},
+                                    {{ scope.opt?.province?.name }} -
+                                    {{ scope.opt?.agencyMode?.name }}</span
+                                >
+                            </QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </template>
+                <template #append>
+                    <QIcon
+                        name="edit"
+                        color="primary"
+                        size="sm"
+                        class="fill-icon cursor-pointer"
+                        @click.stop="redirectToCustomerAddress()"
+                    >
+                        <QTooltip>{{ t('basicData.editAddress') }}</QTooltip>
+                    </QIcon>
+                </template>
+            </VnSelect>
+            <VnInput
+                :label="t('basicData.alias')"
+                v-model="formData.nickname"
+                :required="true"
+            />
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-md no-wrap">
+            <VnSelect
+                :label="t('basicData.company')"
+                v-model="formData.companyFk"
+                option-value="id"
+                option-label="code"
+                :options="companiesOptions"
+                hide-selected
+                map-options
+                :required="true"
+            />
+            <VnSelect
+                :label="t('basicData.agency')"
+                v-model="agencyModeId"
+                option-value="id"
+                option-label="name"
+                :options="agenciesOptions"
+                hide-selected
+                map-options
+                @focus="agencyFetchRef.fetch()"
+            />
+            <VnSelect
+                :label="t('basicData.zone')"
+                v-model="zoneId"
+                option-value="id"
+                option-label="name"
+                :options="zonesOptions"
+                hide-selected
+                map-options
+                :required="true"
+                @focus="zonesFetchRef.fetch()"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel
+                                >{{ scope.opt?.name }} - Max.
+                                {{ toTimeFormat(scope.opt?.hour) }}
+                                h.</QItemLabel
+                            >
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <VnInputDate
+                :label="t('basicData.shipped')"
+                v-model="formData.shipped"
+                :required="true"
+            />
+            <VnInputTime
+                :label="t('basicData.shippedHour')"
+                v-model="formData.shipped"
+                :required="true"
+            />
+            <VnInputDate
+                :label="t('basicData.landed')"
+                v-model="formData.landed"
+                :required="true"
+            />
+        </VnRow>
+    </QForm>
+</template>

src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue

@@ -0,0 +1,195 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import BasicDataTable from './BasicDataTable.vue';
+import TicketBasicDataForm from './TicketBasicDataForm.vue';
+import { useVnConfirm } from 'composables/useVnConfirm';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const { notify } = useNotify();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const stepperRef = ref(null);
+const { openConfirmationModal } = useVnConfirm();
+
+const step = ref(1);
+const formData = ref({});
+const initialDataLoaded = ref(false);
+const haveNegatives = ref(false);
+
+const ticketFilter = {
+    include: [
+        { relation: 'address' },
+        {
+            relation: 'client',
+            scope: {
+                fields: [
+                    'salesPersonFk',
+                    'name',
+                    'isActive',
+                    'isFreezed',
+                    'isTaxDataChecked',
+                    'credit',
+                    'email',
+                    'phone',
+                    'mobile',
+                    'hasElectronicInvoice',
+                ],
+                include: {
+                    relation: 'salesPersonUser',
+                    scope: { fields: ['id', 'name'] },
+                },
+            },
+        },
+        { relation: 'invoiceOut' },
+    ],
+};
+
+const getTicketData = async () => {
+    const params = { filter: JSON.stringify(ticketFilter) };
+    const { data } = await axios.get(`tickets/${route.params.id}`, { params });
+    formData.value = data;
+    initialDataLoaded.value = true;
+};
+
+const isFormInvalid = () => {
+    return (
+        !formData.value.clientFk ||
+        !formData.value.addressFk ||
+        !formData.value.agencyModeFk ||
+        !formData.value.companyFk ||
+        !formData.value.shipped ||
+        !formData.value.landed ||
+        !formData.value.zoneFk
+    );
+};
+
+const getPriceDifference = async () => {
+    try {
+        const params = {
+            landed: formData.value.landed,
+            addressId: formData.value.addressFk,
+            agencyModeId: formData.value.agencyModeFk,
+            zoneId: formData.value.zoneFk,
+            warehouseId: formData.value.warehouseFk,
+            shipped: formData.value.shipped,
+        };
+        const { data } = await axios.post(
+            `tickets/${formData.value.id}/priceDifference`,
+            params
+        );
+        formData.value.sale = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const submit = async () => {
+    try {
+        if (!formData.value.option)
+            return notify(t('basicData.chooseAnOption'), 'negative');
+
+        const params = {
+            clientFk: formData.value.clientFk,
+            nickname: formData.value.nickname,
+            agencyModeFk: formData.value.agencyModeFk,
+            addressFk: formData.value.addressFk,
+            zoneFk: formData.value.zoneFk,
+            warehouseFk: formData.value.warehouseFk,
+            companyFk: formData.value.companyFk,
+            shipped: formData.value.shipped,
+            landed: formData.value.landed,
+            isDeleted: formData.value.isDeleted,
+            option: formData.value.option,
+            isWithoutNegatives: formData.value.withoutNegatives,
+            withWarningAccept: formData.value.withWarningAccept,
+            keepPrice: false,
+        };
+
+        const { data } = await axios.post(
+            `tickets/${formData.value.id}/componentUpdate`,
+            params
+        );
+
+        if (!data) return;
+
+        const ticketToMove = data.id;
+        notify(t('basicData.unroutedTicket'), 'positive');
+        router.push({ name: 'TicketSummary', params: { id: ticketToMove } });
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const submitWithNegatives = async () => {
+    formData.value.withWarningAccept = true;
+    submit();
+};
+
+const onNextStep = async () => {
+    if (step.value === 1) {
+        if (isFormInvalid())
+            return notify(t('basicData.someFieldsAreInvalid'), 'negative');
+
+        await getPriceDifference();
+        stepperRef.value.next();
+    } else if (step.value === 2) {
+        if (haveNegatives.value && !formData.value.withoutNegatives)
+            openConfirmationModal(
+                t('basicData.negativesConfirmTitle'),
+                t('basicData.negativesConfirmMessage'),
+                submitWithNegatives
+            );
+        else submit();
+    }
+};
+
+onBeforeMount(async () => await getTicketData());
+</script>
+<template>
+    <QStepper
+        v-model="step"
+        ref="stepperRef"
+        color="primary"
+        animated
+        keep-alive
+        style="max-width: 800px; margin: auto"
+    >
+        <QStep :name="1" :title="t('globals.pageTitles.basicData')" :done="step > 1">
+            <TicketBasicDataForm
+                v-if="initialDataLoaded"
+                @update-form="($event) => (formData = $event)"
+                :form-data="formData"
+            />
+        </QStep>
+        <QStep :name="2" :title="t('basicData.priceDifference')">
+            <BasicDataTable
+                :form-data="formData"
+                v-model:haveNegatives="haveNegatives"
+                @update-form="($event) => (formData = $event)"
+            />
+        </QStep>
+        <template #navigation>
+            <QStepperNavigation class="flex justify-between">
+                <QBtn
+                    flat
+                    color="primary"
+                    @click="stepperRef.previous()"
+                    :label="t('basicData.back')"
+                    class="q-ml-sm"
+                    :class="{ invisible: step === 1 }"
+                />
+                <QBtn
+                    @click="onNextStep()"
+                    color="primary"
+                    :label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
+                />
+            </QStepperNavigation>
+        </template>
+    </QStepper>
+</template>

src/pages/Ticket/Card/TicketBasicData.vue

@@ -1,3 +0,0 @@
-<template>
-    <QCard>Basic Data</QCard>
-</template>

src/pages/Ticket/Card/TicketCard.vue

@@ -14,6 +14,7 @@ const routeName = computed(() => route.name);
 const searchBarDataKeys = {
     TicketSummary: 'TicketSummary',
     TicketSale: 'TicketSale',
+    TicketPurchaseRequest: 'TicketPurchaseRequest',
 };
 </script>
 <template>

src/pages/Ticket/Card/TicketCreateRequest.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+const emit = defineEmits(['onRequestCreated']);
+
+const route = useRoute();
+const { t } = useI18n();
+
+const attendersOptions = ref([]);
+</script>
+<template>
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
+        auto-load
+        @on-fetch="(data) => (attendersOptions = data)"
+    />
+    <FormModelPopup
+        :title="t('Create request')"
+        url-create="TicketRequests"
+        model="CreateTicketRequest"
+        :form-initial-data="{ ticketFk: route.params.id }"
+        @on-data-saved="() => emit('onRequestCreated')"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.description"
+                    :label="t('purchaseRequest.description')"
+                />
+                <VnSelect
+                    :label="t('purchaseRequest.atender')"
+                    v-model="data.attenderFk"
+                    :options="attendersOptions"
+                    hide-selected
+                    option-label="nickname"
+                    option-value="id"
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.quantity"
+                    :label="t('purchaseRequest.quantity')"
+                    type="number"
+                    min="1"
+                />
+                <VnInput
+                    v-model="data.price"
+                    :label="t('purchaseRequest.price')"
+                    type="number"
+                    min="0"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+    es:
+        Create request: Crear petición de compra
+</i18n>

src/pages/Ticket/Card/TicketPurchaseRequest.vue

@@ -0,0 +1,267 @@
+<script setup>
+import { ref, computed, watch, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import CrudModel from 'src/components/CrudModel.vue';
+import TicketCreateRequest from './TicketCreateRequest.vue';
+
+import { dashIfEmpty } from 'src/filters';
+import { toDateFormat } from 'src/filters/date.js';
+
+const route = useRoute();
+const { t } = useI18n();
+const createTicketRequestDialogRef = ref(null);
+const crudModelRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async (val) => {
+        crudModelFilter.where.ticketFk = val;
+        crudModelRef.value.reload();
+    }
+);
+
+const crudModelFilter = reactive({
+    include: [
+        {
+            relation: 'atender',
+            scope: {
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['nickname'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'requester',
+            scope: {
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['nickname'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'sale',
+        },
+    ],
+    fields: [
+        'id',
+        'description',
+        'created',
+        'requesterFk',
+        'attenderFk',
+        'quantity',
+        'price',
+        'saleFk',
+        'isOk',
+    ],
+    order: ['created ASC'],
+    where: {
+        ticketFk: route.params.id,
+    },
+});
+
+const columns = computed(() => [
+    {
+        label: t('purchaseRequest.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('purchaseRequest.description'),
+        name: 'description',
+        field: 'description',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('purchaseRequest.created'),
+        name: 'created',
+        field: 'created',
+        align: 'left',
+        format: (val) => toDateFormat(val),
+    },
+    {
+        label: t('purchaseRequest.requester'),
+        name: 'requester',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('purchaseRequest.atender'),
+        name: 'atender',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.quantity'),
+        name: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.price'),
+        name: 'price',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.saleFk'),
+        name: 'saleFk',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.state'),
+        name: 'state',
+        field: 'isOk',
+        align: 'left',
+        format: (val) => t(getRequestState(val)),
+    },
+    {
+        label: '',
+        name: 'actions',
+        align: 'left',
+        columnFilter: null,
+    },
+]);
+
+const getRequestState = (state) => {
+    switch (state) {
+        case null:
+            return 'New';
+        case false:
+            return 'Denied';
+        case true:
+            return 'Acepted';
+    }
+};
+
+const isEditable = (isOk) => isOk !== null;
+
+const removeLine = async (row) => crudModelRef.value.remove([row]);
+
+const openCreateModal = () => createTicketRequestDialogRef.value.show();
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <CrudModel
+            data-key="PurchaseRequests"
+            url="TicketRequests"
+            ref="crudModelRef"
+            :filter="crudModelFilter"
+            :order="['created ASC']"
+            :default-remove="false"
+            :default-save="false"
+            :default-reset="false"
+            :limit="0"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
+                    @row-click="(_, row) => redirectToTicketSummary(row.ticketFk)"
+                >
+                    <template #body-cell-description="{ row }">
+                        <QTd @click.stop>
+                            <VnInput
+                                v-model="row.description"
+                                @blur="crudModelRef.saveChanges()"
+                                :disable="isEditable(row.isOk)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-requester="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.requester?.user?.nickname }}
+                                <WorkerDescriptorProxy :id="row.requesterFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-atender="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.atender?.user?.nickname }}
+                                <WorkerDescriptorProxy :id="row.attenderFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-quantity="{ row }">
+                        <QTd @click.stop>
+                            <VnInput
+                                v-model="row.quantity"
+                                @blur="crudModelRef.saveChanges()"
+                                :disable="isEditable(row.isOk)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-price="{ row }">
+                        <QTd @click.stop>
+                            <VnInput
+                                v-model="row.price"
+                                @blur="crudModelRef.saveChanges()"
+                                :disable="isEditable(row.isOk)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-saleFk="{ row }">
+                        <QTd @click.stop>
+                            <QBtn v-if="row.saleFk" flat color="primary">
+                                {{ row.sale.itemFk }}
+                                <ItemDescriptorProxy :id="row.sale.itemFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-actions="{ row }">
+                        <QTd>
+                            <QIcon
+                                @click.stop="removeLine(row)"
+                                class="q-ml-sm cursor-pointer"
+                                color="primary"
+                                name="delete"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('globals.delete') }}
+                                </QTooltip>
+                            </QIcon>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
+        <QDialog
+            ref="createTicketRequestDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <TicketCreateRequest @on-request-created="crudModelRef.reload()" />
+        </QDialog>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QTooltip class="text-no-wrap">
+                {{ t('purchaseRequest.newRequest') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
+<i18n>
+    es:
+        New: Nueva
+        Denied: Denegada
+        Accepted: Aceptada
+</i18n>

src/pages/Ticket/locale/en.yml

@@ -22,9 +22,6 @@ ticketSale:
     shipped: Shipped
     agency: Agency
     address: Address
-card:
-    search: Search tickets
-    searchInfo: You can search by ticket id or alias
 advanceTickets:
     origin: Origin
     destination: Destination
@@ -80,6 +77,56 @@ futureTickets:
     moveTicketSuccess: Tickets moved successfully!
     searchInfo: Search future tickets by date
     futureTicket: Future tickets
+basicData:
+    next: Next
+    back: Back
+    finalize: Finalize
+    client: Client
+    warehouse: Warehouse
+    address: Address
+    inactive: (Inactive)
+    noDeliveryZoneAvailable: No delivery zone available for this landing date
+    editAddress: Edit address
+    alias: Alias
+    company: Company
+    agency: Agency
+    zone: Zone
+    shipped: Shipped
+    landed: Landed
+    shippedHour: Shipped hour
+    priceDifference: Price difference
+    someFieldsAreInvalid: Some fields are invalid
+    item: Item
+    description: Description
+    movable: Movable
+    quantity: Quantity
+    pricePPU: Price (PPU)
+    newPricePPU: New (PPU)
+    difference: Difference
+    total: Total
+    price: Price
+    newPrice: New price
+    chargeDifference: Charge difference to
+    withoutNegatives: Create without negatives
+    withoutNegativesInfo: Clone this ticket with the changes and only sales availables
+    negativesConfirmTitle: Edit basic data
+    negativesConfirmMessage: Negatives are going to be generated, are you sure you want to advance all the lines?
+    chooseAnOption: Choose an option
+    unroutedTicket: The ticket has been unrouted
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias
+purchaseRequest:
+    id: Id
+    description: Description
+    created: Created
+    requester: Requester
+    atender: Atender
+    quantity: Quantity
+    price: Price
+    saleFk: Item id
+    state: State
+    newRequest: New request
 weeklyTickets:
     id: Ticket ID
     client: Client

src/pages/Ticket/locale/es.yml

@@ -1,3 +1,53 @@
+card:
+    search: Buscar tickets
+    searchInfo: Buscar tickets por identificador o alias
+purchaseRequest:
+    Id: Id
+    description: Descripción
+    created: Fecha creación
+    requester: Solicitante
+    atender: Comprador
+    quantity: Cantidad
+    price: Precio
+    saleFk: Id artículo
+    state: Estado
+    newRequest: Crear petición
+basicData:
+    next: Siguiente
+    back: Anterior
+    finalize: Finalizar
+    client: Cliente
+    warehouse: Almacén
+    address: Consignatario
+    inactive: (Inactivo)
+    noDeliveryZoneAvailable: No hay una zona de reparto disponible para la fecha de envío seleccionada
+    editAddress: Editar dirección
+    alias: Alias
+    company: Empresa
+    agency: Agencia
+    zone: Zona
+    shipped: F. Envío
+    landed: F. Entrega
+    shippedHour: Hora de envío
+    priceDifference: Diferencia de precio
+    someFieldsAreInvalid: Algunos campos no son válidos
+    item: Artículo
+    description: Descripción
+    movable: Movible
+    quantity: Cantidad
+    pricePPU: Precio (Ud.)
+    newPricePPU: Nuevo (Ud.)
+    difference: Diferencia
+    total: Total
+    price: Precio
+    newPrice: Nuevo precio
+    chargeDifference: Cargar diferencia a
+    withoutNegatives: Crear sin negativos
+    withoutNegativesInfo: Clonar este ticket con los cambios y solo ventas disponibles
+    negativesConfirmTitle: Editar datos básicos
+    negativesConfirmMessage: Se van a generar negativos, ¿seguro que quieres adelantar todas las líneas?
+    chooseAnOption: Elige una opción
+    unroutedTicket: El ticket ha sido desenrutado
 weeklyTickets:
     id: ID Ticket
     client: Cliente
@@ -88,6 +138,3 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
-card:
-    search: Buscar tickets
-    searchInfo: Buscar tickets por identificador o alias

src/router/modules/ticket.js

@@ -11,8 +11,15 @@ export default {
     component: RouterView,
     redirect: { name: 'TicketMain' },
     menus: {
-        main: ['TicketList', 'TicketWeekly', 'TicketAdvance', 'TicketFuture'],
+        main: ['TicketList', 'TicketAdvance', 'TicketWeekly', 'TicketFuture'],
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketLog'],
+        card: [
+            'TicketBasicData',
+            'TicketBoxing',
+            'TicketSms',
+            'TicketSale',
+            'TicketLog',
+            'TicketPurchaseRequest',
+        ],
     },
     children: [
         {
@@ -41,13 +48,13 @@ export default {
                     component: () => import('src/pages/Ticket/TicketCreate.vue'),
                 },
                 {
-                    name: 'TicketAdvance',
+                    name: 'TicketWeekly',
-                    path: 'advance',
+                    path: 'weekly',
                     meta: {
-                        title: 'ticketAdvance',
+                        title: 'weeklyTickets',
-                        icon: 'keyboard_double_arrow_left',
+                        icon: 'access_time',
                     },
-                    component: () => import('src/pages/Ticket/TicketAdvance.vue'),
+                    component: () => import('src/pages/Ticket/TicketWeekly.vue'),
                 },
                 {
                     name: 'TicketFuture',
@@ -58,6 +65,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/TicketFuture.vue'),
                 },
+                {
+                    name: 'TicketAdvance',
+                    path: 'advance',
+                    meta: {
+                        title: 'ticketAdvance',
+                        icon: 'keyboard_double_arrow_left',
+                    },
+                    component: () => import('src/pages/Ticket/TicketAdvance.vue'),
+                },
             ],
         },
         {
@@ -82,7 +98,8 @@ export default {
                         title: 'basicData',
                         icon: 'vn:settings',
                     },
-                    component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
+                    component: () =>
+                        import('src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue'),
                 },
                 {
                     name: 'TicketSale',
@@ -93,6 +110,25 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSale.vue'),
                 },
+                {
+                    path: 'request',
+                    name: 'TicketPurchaseRequest',
+                    meta: {
+                        title: 'purchaseRequest',
+                        icon: 'vn:buyrequest',
+                    },
+                    component: () =>
+                        import('src/pages/Ticket/Card/TicketPurchaseRequest.vue'),
+                },
+                {
+                    path: 'log',
+                    name: 'TicketLog',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketLog.vue'),
+                },
                 {
                     path: 'boxing',
                     name: 'TicketBoxing',
@@ -111,15 +147,6 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
-                {
-                    path: 'log',
-                    name: 'TicketLog',
-                    meta: {
-                        title: 'log',
-                        icon: 'history',
-                    },
-                    component: () => import('src/pages/Ticket/Card/TicketLog.vue'),
-                },
             ],
         },
     ],