template view store done

This commit is contained in:
Alexandro Uc Santos
2025-02-08 19:03:08 -06:00
parent 7092ab388c
commit 9ec7296340
8 changed files with 276 additions and 31 deletions

View File

@@ -183,6 +183,16 @@ td {
font-size: 1rem;
}
.custom-input-fill {
background-color: white;
border-radius: 8px;
border-width: 1px !important;
border-color: rgb(226, 214, 214) !important;
border-style: solid !important;
padding: 12px 12px;
font-size: 1rem;
}
.custom-input:enabled{
border: none;
}

View File

@@ -136,6 +136,14 @@
class="nav-link" :to="{name: 'calendar'}">{{ t('global.calendar') }}</RouterLink>
</div>
</li>
<li :class="[route.name === 'store' ? 'bg-nav-active' : '']">
<div>
<i class="fa-solid fa-shop-lock" :class="[route.name === 'store' ? 'router-link-active' : '']"></i>
<RouterLink
active-class="router-link-active"
class="nav-link" :to="{name: 'store'}">{{ t('store.title') }}</RouterLink>
</div>
</li>
<li
v-if="permission === 'role_carrier' && jobRole !== roleCheck"
:class="[route.name === 'calculator' ? 'bg-nav-active' : '']">

110
src/data/store-dumies.json Normal file
View File

@@ -0,0 +1,110 @@
[
{
"status": "Loading",
"date": "2025-01-08T03:24:18.821Z",
"shipment_code": "ETA1010",
"product": "Maiz",
"truck-plates": "YUC9101",
"driver-name": "Alexandro Uc",
"company": "ALTOS"
},
{
"status": "Loading",
"date": "2025-02-08T03:24:18.821Z",
"shipment_code": "ETA1010",
"product": "Maiz",
"truck-plates": "YUC9102",
"driver-name": "Jose Santos",
"company": "ALTOS"
},
{
"status": "Loading",
"date": "2025-02-08T01:00:57.627Z",
"shipment_code": "ETA1007",
"product": "Maiz",
"truck-plates": "YUC9102",
"driver-name": "Raul Torres",
"company": "SOPAA"
},
{
"status": "Loading",
"date": "2025-02-09T19:36:13.562Z",
"shipment_code": "ETA1014",
"product": "Maiz",
"truck-plates": "YUC9123",
"driver-name": "Manuel Yuc",
"company": "USIOA"
},
{
"status": "Loading",
"date": "2025-02-08T00:29:10.471Z",
"shipment_code": "ETA1021",
"product": "Maiz",
"truck-plates": "YUC9101",
"driver-name": "Alexandro Uc",
"company": "ALTOS"
},
{
"status": "Loading",
"date": "2025-02-08T02:47:28.823Z",
"shipment_code": "ETA1013",
"product": "Maiz",
"truck-plates": "YUC9120",
"driver-name": "Ramiro Alcocer",
"company": "JSKA"
},
{
"status": "Loading",
"date": "2025-02-09T02:47:28.823Z",
"shipment_code": "ETA1023",
"product": "Maiz",
"truck-plates": "YUC9101",
"driver-name": "Alexandro Uc",
"company": "ALTOS"
},
{
"status": "Transit",
"date": "2025-02-08T02:47:28.823Z",
"shipment_code": "ETA1024",
"product": "Maiz",
"truck-plates": "DKS9101",
"driver-name": "Sergio Martinez",
"company": "SILA"
},
{
"status": "Loading",
"date": "2025-02-08T02:47:28.823Z",
"shipment_code": "ETA1025",
"product": "Maiz",
"truck-plates": "YUC9101",
"driver-name": "Alexandro Uc",
"company": "ALTOS"
},
{
"status": "Loading",
"date": "2025-02-09T02:31:45.679Z",
"shipment_code": "ETA1006",
"product": "Maiz",
"truck-plates": "DLS9101",
"driver-name": "Juan Perez",
"company": "SOA"
},
{
"status": "Loading",
"date": "2025-02-08T00:42:43.588Z",
"shipment_code": "ETA1022",
"product": "Maiz",
"truck-plates": "YUC9101",
"driver-name": "Alexandro Uc",
"company": "ALTOS"
},
{
"status": "Loading",
"date": "2025-02-09T00:57:26.432Z",
"shipment_code": "ETA1016",
"product": "Maiz",
"truck-plates": "DSA9101",
"driver-name": "Alexandro Uc",
"company": "ALTOS"
}
]

View File

@@ -478,6 +478,9 @@ const en = {
acceptedProposalDesc: 'Your offer has been accepted in the upload',
rejectedProposalDesc: 'Your offer has been rejected on upload',
},
store: {
title: "Warehouse"
}
};
export default en;

View File

@@ -487,6 +487,9 @@ const es = {
acceptedProposalDesc: 'Tu oferta ha sido aceptada en la carga',
rejectedProposalDesc: 'Tu oferta ha sido rechazada en la carga',
},
store: {
title: "Bodega"
}
};
export default es;

View File

@@ -142,6 +142,15 @@ const router = createRouter({
},
component: () => import('../views/CalendarView.vue'),
},
{
path: 'bodega',
name: 'store',
meta: {
permissions: ['role_shipper'],
roles: ['owner', 'manager', 'store']
},
component: () => import('../views/StoreView.vue'),
},
{
path: 'cargas',
meta: { permissions: ['role_shipper'] },
@@ -219,6 +228,7 @@ router.beforeEach( async(to, from, next) => {
}
if(roles && !roles.includes(role)) {
console.log('tiene perminsos');
return next({name: 'calendar'});
}

104
src/views/StoreView.vue Normal file
View File

@@ -0,0 +1,104 @@
<script setup>
import { ref } from 'vue';
import { getDateTime } from '../helpers/date_formats';
import { onMounted } from 'vue';
import loads from '../data/store-dumies.json';
import { useI18n } from 'vue-i18n';
const query = ref('');
const date = ref('');
const loadsFilters = ref(loads);
const { t } = useI18n()
onMounted(() => {
date.value = getDateTime(new Date(), 0).substring(0, 10);
})
/// methods:
const search = () => {
if(query.value == "") {
loadsFilters.value = loads;
}
if(query.value.length >= 1){
loadsFilters.value = loads.filter(
load => load.shipment_code.toLowerCase().includes(query.value.toLowerCase())
|| load.company.toLowerCase().includes(query.value.toLowerCase())
|| load.product.toLowerCase().includes(query.value.toLowerCase())
|| load['truck-plates'].toLowerCase().includes(query.value.toLowerCase())
|| load['driver-name'].toLowerCase().includes(query.value.toLowerCase())
);
} else {
loadsFilters.value = loads;
}
}
</script>
<template>
<h2 class="title mb-4">{{ t('store.title') }}</h2>
<div class="box-filters">
<div class="box-search">
<input
class="form-control custom-search"
type="search" name=""
:placeholder="t('buttons.search')"
id="store-search"
@:input="search()"
v-model="query"
aria-label="Search"
/>
</div>
<div>
<input
placeholder="Fecha"
type="date"
class="custom-input-fill"
v-model="date"
/>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-12 mt-4"
v-for="load in loadsFilters"
:key="load.id"
>
<div class="card-info justify-content-between bg-white">
<div class="flex-direction-column">
<h2>{{ load.shipment_code }}</h2>
<p><span class="font-bold" >{{ t('global.company') }}: </span> {{ load.company }}</p>
<p><span class="font-bold" >{{ t('loads.product') }}: </span> {{ load.product }}</p>
</div>
<div class="flex-direction-column">
<p><span class="font-bold">{{ t('labels.date') }}: </span> {{ getDateTime(load.date, 0) }}</p>
<p> <span class="font-bold">{{ t('vehicles.truckPlates') }}: </span> {{ load['truck-plates'] }}</p>
<p> <span class="font-bold">{{ t('labels.driver') }}: </span> {{ load['driver-name'] }}</p>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box-filters {
display: flex;
flex-direction: row;
justify-content: end;
gap: 1rem;
}
.box-search {
display: flex;
flex: 1;
}
.custom-search {
width: 100%;
padding: 12px 20px;
}
.bg-white {
background-color: white;
}
</style>