ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: filter statue load in storeview

Browse Source
This commit is contained in:
Alexandro Uc Santos
2025-04-12 15:23:32 -06:00
parent 331e5d6c8a
commit ccac94237c
16 changed files with 165 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/main.css
View File

@@ -221,6 +221,16 @@ td {
gap: 1rem;
}
.required {
/* color: #FBBA33; */
color: black;
}
.border-required {
border-radius: 5px;
border: 1px solid #FBBA33 !important;
}
@media (max-width: 1024px) {
th {
font-size: 13px;

6
src/components/CreateLocationModal.vue
View File

@@ -182,21 +182,21 @@
:error="errors.address"
/>
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('directory.state')}}*</label>
<label class="custom-label required">{{ t('directory.state')}}*</label>
<States
v-model="locationForm.state"
/>
<span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('directory.city')}}*</label>
<label class="custom-label required">{{ t('directory.city')}}*</label>
<Cities
v-model="locationForm.city"
/>
<span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
</div>
<div class="d-flex flex-column mb-4">
<label class="custom-label" for="role">{{ t('directory.typeDirectory') + '*'}}</label>
<label class="custom-label required" for="role">{{ t('directory.typeDirectory') + '*'}}</label>
<select
class="custom-input-light"
name="type"

4
src/components/CreateUserModal.vue
View File

@@ -225,7 +225,7 @@
v-if="userForm.job_role !== 'owner'"
class="d-flex flex-column"
>
<label class="custom-label" for="role">{{ t('labels.userRole') }}*</label>
<label class="custom-label required" for="role">{{ t('labels.userRole') }}*</label>
<select
class="custom-input-light"
name="role"
@@ -254,7 +254,7 @@
<div v-if="userForm.job_role === 'warehouse'">
<Spiner v-if="loadingWarehouses"/>
<div class="d-flex flex-column my-4" v-if="!loadingWarehouses">
<label class="custom-label" for="locationLoad">{{ t('labels.warehouses') }}*</label>
<label class="custom-label required" for="locationLoad">{{ t('labels.warehouses') }}*</label>
<select
class="custom-input-light"
name="locationLoad"

12
src/components/CreateVehicleModal.vue
View File

@@ -163,14 +163,14 @@
<form @submit.prevent="handleSaveVehicle" autocomplete="off" class="vehicle-form">
<div class="row">
<div class="col-lg-6 col-12 mt-4">
<label class="custom-label">{{ t('directory.typeTruck') }}*</label>
<label class="custom-label required">{{ t('directory.typeTruck') }}*</label>
<TruckTypes
v-model="vehicleForm.truck_type"
/>
<span class="error-msg" v-if="errors.truck_type">{{ errors.truck_type }}</span>
</div>
<div class="col-lg-6 col-12 mt-4">
<label class="custom-label">{{ t('vehicles.segments') }}*</label>
<label class="custom-label required">{{ t('vehicles.segments') }}*</label>
<Segments
v-model="vehicleForm.categories"
:multiple="true"
@@ -217,14 +217,14 @@
</div>
<div class="row">
<div class="col-lg-6 col-12 mb-4">
<label class="custom-label">{{ t('labels.stateBase') }}*</label>
<label class="custom-label required">{{ t('labels.stateBase') }}*</label>
<States
v-model="vehicleForm.state"
/>
<span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
</div>
<div class="col-lg-6 col-12 mb-4">
<label class="custom-label">{{ t('labels.cityBase') }}*</label>
<label class="custom-label required">{{ t('labels.cityBase') }}*</label>
<Cities
v-model="vehicleForm.city"
/>
@@ -233,14 +233,14 @@
</div>
<div class="row">
<div class="col-lg-6 col-12 mb-4">
<label class="custom-label">{{t('vehicles.destinationState')}}*</label>
<label class="custom-label required">{{t('vehicles.destinationState')}}*</label>
<States
v-model="vehicleForm.destinoState"
/>
<span class="error-msg" v-if="errors.destinoState">{{ errors.destinoState }}</span>
</div>
<div class="col-lg-6 col-12 mb-4">
<label class="custom-label">{{t('vehicles.destinationCity')}}*</label>
<label class="custom-label required">{{t('vehicles.destinationCity')}}*</label>
<Cities
v-model="vehicleForm.destinoCity"
/>

12
src/components/FormLoadModal.vue
View File

@@ -385,14 +385,14 @@
<div class="form-box">
<div class="form-section">
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('global.segment') }}*</label>
<label class="custom-label required">{{ t('global.segment') }}*</label>
<Segments
v-model="formLoad.segment"
/>
<span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('directory.typeTruck') }}*</label>
<label class="custom-label required">{{ t('directory.typeTruck') }}*</label>
<TruckTypes
v-model="formLoad.truckType"
/>
@@ -495,14 +495,14 @@
v-model:field="origin.address"
/>
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('global.city') }}*</label>
<label class="custom-label required">{{ t('global.city') }}*</label>
<Cities
v-model="origin.city"
/>
<span class="error-msg" v-if="submited && errors.cityOrigin">{{ errors.cityOrigin }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('global.state') }}*</label>
<label class="custom-label required">{{ t('global.state') }}*</label>
<States
v-model="origin.state"
/>
@@ -566,14 +566,14 @@
v-model:field="destination.address"
/>
<div class="mb-4 mt-3">
<label class="custom-label">{{t('global.city')}}*</label>
<label class="custom-label required">{{t('global.city')}}*</label>
<Cities
v-model="destination.city"
/>
<span class="error-msg" v-if="submited && errors.cityDestination">{{ errors.cityDestination }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">{{t('global.state')}}*</label>
<label class="custom-label required">{{t('global.state')}}*</label>
<States
v-model="destination.state"
/>

7
src/components/ui/Cities.vue
View File

@@ -19,6 +19,10 @@
disabled: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
}
});
defineEmits(['update:selectedCities', 'clear-option'])
@@ -49,6 +53,9 @@
:selectLabel="t('global.helpSelected')"
:selectedLabel="t('global.selected')"
:deselectLabel="t('global.removeSelected')"
:class="[
required ? 'border-required' : '',
]"
>
<template #noResult>
{{ t('global.notFound') }}

13
src/components/ui/CustomInput.vue
View File

@@ -48,10 +48,17 @@
<template>
<div class="d-flex flex-column gap-2 mb-4">
<label class="custom-label" :for="name">{{ label }}</label>
<label
class="custom-label"
:class="[label.includes('*') ? 'required' : '']"
:for="name"
>{{ label }}</label>
<input
class="custom-input"
:class="[!filled ? 'custom-input-light' : '']"
:class="[
!filled ? 'custom-input-light' : '',
// label.includes('*') ? 'border-required' : ''
]"
:type="type"
:id="name"
:name="name"
@@ -77,6 +84,6 @@
.error-msg {
color: red;
font-size: 12px;
font-weight: 300;
font-weight: 400;
}
</style>

7
src/components/ui/Products.vue
View File

@@ -19,6 +19,10 @@
disabled: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
}
});
defineEmits(['update:selectedProduct', 'clear-option'])
@@ -49,6 +53,9 @@
:selectLabel="t('global.helpSelected')"
:selectedLabel="t('global.selected')"
:deselectLabel="t('global.removeSelected')"
:class="[
required ? 'border-required' : '',
]"
>
<template #noResult>
{{ t('global.notFound') }}

7
src/components/ui/Segments.vue
View File

@@ -15,6 +15,10 @@
multiple: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
}
});
defineEmits(['update:selectedCategory', 'clear-option'])
@@ -44,6 +48,9 @@
:selectLabel="t('global.helpSelected')"
:selectedLabel="t('global.selected')"
:deselectLabel="t('global.removeSelected')"
:class="[
required ? 'border-required' : '',
]"
>
<template #noResult>
{{ t('global.notFound') }}

9
src/components/ui/States.vue
View File

@@ -15,6 +15,10 @@
multiple: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
}
});
defineEmits(['update:selectedState', 'clear-option'])
@@ -45,8 +49,9 @@
:selectLabel="t('global.helpSelected')"
:selectedLabel="t('global.selected')"
:deselectLabel="t('global.removeSelected')"
:class="[
required ? 'border-required' : '',
]"
>
<template #noResult>
{{ t('global.notFound') }}

7
src/components/ui/TruckTypes.vue
View File

@@ -19,6 +19,10 @@
disabled: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
}
});
defineEmits(['update:selectedTruckType', 'clear-option'])
@@ -53,6 +57,9 @@
:selectLabel="t('global.helpSelected')"
:selectedLabel="t('global.selected')"
:deselectLabel="t('global.removeSelected')"
:class="[
required ? 'border-required' : '',
]"
>
<template #noResult>
{{ t('global.notFound') }}

6
src/i18n/en.js
View File

@@ -73,6 +73,12 @@ const en = {
originTruckKm1: "Truck origin to load origin(KM)",
originTruckKm2: "Loading origin to unloading destination(KM)",
destinationTruck1: "Unloading destination to base-yard(KM)",
alls: 'All',
published: 'Published',
loading: 'Loading',
transit: 'In transit',
downloading: 'Downloading',
delivered: 'Delivered',
},
buttons: {
enter: "Enter here",

8
src/i18n/es.js
View File

@@ -75,7 +75,13 @@ const es = {
tonLoad: "Tonelaje aproximado de carga",
originTruckKm1: "Origen del camión al origin de carga(KM)",
originTruckKm2: "Origen de carga a destino de descarga(KM)",
destinationTruck1: "Destino de descarga al patio-base(KM)"
destinationTruck1: "Destino de descarga al patio-base(KM)",
alls: 'Todos',
published: 'Publicado',
loading: 'Cargando',
transit: 'En transito',
downloading: 'Descargando',
delivered: 'Entregado',
},
buttons: {
enter: "Ingresa aqui",

4
src/views/CompleteRegisterView.vue
View File

@@ -240,7 +240,7 @@
v-model:field="company.rfc"
/>
<div class="mb-4">
<label class="custom-label">{{ t('labels.questionSegments') }} *</label>
<label class="custom-label required">{{ t('labels.questionSegments') }} *</label>
<Segments
v-model="company.segments"
:multiple="true"
@@ -261,7 +261,7 @@
/>
</div>
<div class="mb-4">
<label class="custom-label">{{ t('labels.questionTrucks') }} *</label>
<label class="custom-label required">{{ t('labels.questionTrucks') }} *</label>
<TruckTypes
v-model="company.truckTypes"
:multiple="true"

76
src/views/store/StoreView.vue
View File

@@ -6,6 +6,7 @@
import { useLoadsStore } from '../../stores/loads';
import { useAuthStore } from '../../stores/auth';
import Spiner from '../../components/ui/Spiner.vue';
import CustomPopup from '../../components/CustomPopup.vue';
const authStore = useAuthStore();
const loadStore = useLoadsStore();
@@ -16,9 +17,19 @@
const loadsFilters = ref([]);
const filterQuery = ref([]);
const loading = ref(false);
const openPopup = ref(false);
const status = ref({value: 'all', label: 'Todos'});
const options = ref([]);
onMounted(async() => {
date.value = (new Date()).toISOString().substring(0, 10);
options.value = [
{value: 'all', label: t('labels.alls')},
{value: 'Published',label: t('labels.published')},
{value: 'Loading',label: t('labels.loading')},
{value: 'Transit',label: t('labels.transit')},
]
status.value = {value: 'all', label: t('labels.alls')};
await getDataLoads(false);
})
@@ -58,13 +69,40 @@
}
const handleDate = async () => {
status.value = {value: 'all', label: t('labels.alls')};
await getDataLoads(true);
}
const closePopup = () => {
openPopup.value = false
}
const changeStatus = (value) => {
status.value = value;
openPopup.value = false
if(value.value == 'all') {
loadsFilters.value = loadStore.loadsWarehouse;
} else {
loadsFilters.value = loadStore.loadsWarehouse.filter(
load => load.load_status.toLowerCase().includes(value.value.toLowerCase())
);
}
}
</script>
<template>
<div
v-if="openPopup"
>
<CustomPopup
:options="options"
:value="status"
@change-value="changeStatus"
@close-popup="closePopup"
selected-color="#e3a11e"
/>
</div>
<h2 class="title mb-4">{{ t('store.title') }}</h2>
<div class="box-filters">
<div class="box-search">
@@ -78,7 +116,7 @@
aria-label="Search"
/>
</div>
<div>
<div class="date-filter">
<input
placeholder="Fecha"
type="date"
@@ -87,6 +125,12 @@
@change="handleDate($event)"
/>
</div>
<div class="status-filter"
@click="openPopup = true"
>
<span class="clear-sm">{{ status.label }}</span>
<i class="fa-solid fa-filter"></i>
</div>
</div>
<div class="row">
<div v-if="loading" class="d-flex justify-content-center">
@@ -107,7 +151,7 @@
display: flex;
flex-direction: row;
justify-content: end;
gap: 1rem;
gap: 0.5rem;
}
.box-search {
@@ -115,6 +159,18 @@
flex: 1;
}
.status-filter {
padding: 12px 8px;
background-color: #FFF;
border-radius: 5px;
display: flex;
flex-direction: row;
border: 1px rgb(186, 175, 175) solid;
gap: 1rem;
align-items: center;
cursor: pointer;
}
.custom-search {
width: 100%;
padding: 12px 20px;
@@ -124,4 +180,20 @@
background-color: white;
}
@media (max-width: 768px) {
.box-filters {
gap: 0.2rem;
}
.date-filter input {
padding: 12px 8px;
width: 130px;
}
.box-search {
width: 100%;
}
}
</style>

4
src/views/store/components/LoadStoreCard.vue
View File

@@ -79,4 +79,8 @@
font-size: 0.9rem;
color: #303233;
}
p {
font-size: 0.9rem;
}
</style>