template view store done
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
110
src/data/store-dumies.json
Normal 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"
|
||||
}
|
||||
]
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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
104
src/views/StoreView.vue
Normal 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>
|
||||
Reference in New Issue
Block a user