add: filter statue load in storeview

src/assets/main.css

@@ -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;

src/components/CreateLocationModal.vue

@@ -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" 

src/components/CreateUserModal.vue

@@ -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" 

src/components/CreateVehicleModal.vue

@@ -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" 
                                 />

src/components/FormLoadModal.vue

@@ -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" 
                                 />

src/components/ui/Cities.vue

@@ -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') }}

src/components/ui/CustomInput.vue

@@ -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>

src/components/ui/Products.vue

@@ -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') }}

src/components/ui/Segments.vue

@@ -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') }}

src/components/ui/States.vue

@@ -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') }}

src/components/ui/TruckTypes.vue

@@ -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') }}

src/i18n/en.js

@@ -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",

src/i18n/es.js

@@ -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",

src/views/CompleteRegisterView.vue

@@ -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"

src/views/store/StoreView.vue

@@ -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>

src/views/store/components/LoadStoreCard.vue

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