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

add: Form create load

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-07 18:04:17 -06:00
parent 2c74a4b3ae
commit cea26e1f6e
29 changed files with 1292 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/components/CardLoad.vue Normal file
View File

@@ -0,0 +1,142 @@
<script setup>
import { getDateMonthDay } from '../helpers/date_formats';
import { getStatusPublished } from '../helpers/status';
import { getStatusLoad } from '../helpers/status';
import { useLoadsStore } from '../stores/loads';
const loadsStore = useLoadsStore();
const props = defineProps({
load: {
type: Object,
required: true,
}
})
const setLoad = () => {
loadsStore.currentLoad = props.load;
}
</script>
<template>
<div class="card-fixed card-load mt-4">
<div class="row">
<div class="col-lg-6 col-sm-12">
<p><span>Origen:</span> {{ load.origin.company_name }}, {{ load.origin_formatted_address }}</p>
<p><span>Destino:</span> {{ load.destination.company_name }}, {{ load.destination_formatted_address }}</p>
</div>
<div class="col-lg-6 col-sm-12">
<p><span>Status de la publicación:</span> <span>{{ getStatusPublished(load) }}</span></p>
<p :style="{color: getStatusLoad(load).color}"><span>Status de la carga:</span> <span>{{ getStatusLoad(load).status }}</span></p>
</div>
</div>
<div class="divider"></div>
<br>
<div class="row">
<div class="col-lg-4 col-sm-12">
<p><span>Tipo de camión: </span> {{ load.truck_type }}</p>
<p><span>Peso: </span> {{ load.weight }} KG</p>
<p><span>Fecha de carga: </span> {{ getDateMonthDay(load.est_loading_date) }}</p>
</div>
<div class="col-lg-4 col-sm-12">
<p><span>Producto: </span> {{ load?.product?.name }}</p>
<p><span>Costo real: </span> {{ load.actual_cost }}</p>
<p><span>Fecha de descarga: </span> {{getDateMonthDay(load.est_unloading_date) }}</p>
</div>
<div class="col-lg-4 col-sm-12">
<p><span>Segmento: </span> {{ load._categories }}</p>
<p><span>Código de carga: </span> {{ load.shipment_code }}
<span v-if="load.load_status !== 'Draft'" class="tracking-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
</svg>
</span>
</p>
<p><span>Publicación hecha por: </span> {{ load.posted_by_name }}</p>
</div>
</div>
<p v-if="load.notes"><span>Notas adicionales:</span></p>
<div v-if="load.notes" class="box-note">
{{ load.notes }}
</div>
<div class="btn-row">
<button
class="btn-primary-sm bg-dark"
data-toggle="modal" data-target="#editcompanymodal"
><i class="fa-solid fa-ban clear-sm"></i> Cancelar</button>
<button v-if="load.status !== 'Draft' && load.load_status !== 'Published' && load.load_status !== 'Loading'"
type="button"
data-toggle="modal" data-target="#attachmentModal"
class="btn-primary-sm"
@click="setLoad"
>
<i class="fa-solid fa-image"></i>
Evidencias
</button>
<button
class="btn-primary-sm"
data-toggle="modal" data-target="#editcompanymodal"
><i class="fa-solid fa-pen-to-square clear-sm"></i> Editar carga</button>
<button
class="btn-primary-sm"
data-toggle="modal" data-target="#editcompanymodal"
>#{{ load.no_of_proposals }} Ofertas</button>
</div>
</div>
</template>
<style scoped>
.card-load {
flex-direction: column;
width: 100% !important;
}
.tracking-icon {
cursor: pointer;
color: #f2a23f;
}
.tracking-icon svg{
height: 30px;
}
.tracking-icon:hover {
color: #ddb380;;
height: 150px;
}
.tracking-icon svg:hover{
height: 33px;
}
p {
font-size: 1rem;
font-weight: 400;
color: #323032;
}
p span {
color: #323032;
font-weight: 700;
}
.btn-row {
margin-top: 2rem;
display: flex;
flex-direction: row;
justify-content: end;
gap: 1rem;
}
.box-note {
padding: 12px 16px;
background-color: aqua;
border-radius: 13px;
}
@media (max-width: 768px) {
.btn-row {
gap: 0.2rem;
}
}
</style>