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

view proposals modal

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-11 21:25:11 -06:00
parent bb6cd37532
commit 58f03dcdad
6 changed files with 218 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AttachmentsModal.vue
View File

@@ -8,10 +8,12 @@
const { getAttachmentLoad, loading, attachments } = useAttachments();
onMounted(() => {
console.log('se ejcyta attach');
getAttachmentLoad();
})
const clearLoad = () => {
loadStore.openAttachmentsModal = false;
loadStore.currentLoad = null;
}

16
src/components/CardLoad.vue
View File

@@ -13,13 +13,19 @@
}
})
const setLoad = () => {
const openAttachmentsModal = () => {
loadsStore.currentLoad = props.load;
loadsStore.openAttachmentsModal = true;
}
const openEditModal = () => {
loadsStore.openModalEdit = true;
loadsStore.currentLoad = props.load
loadsStore.openModalEdit = true;
}
const openProposalsModal = () => {
loadsStore.currentLoad = props.load
loadsStore.openProposalsModal = true;
}
</script>
@@ -74,7 +80,7 @@
type="button"
data-toggle="modal" data-target="#attachmentModal"
class="btn-primary-sm"
@click="setLoad"
@click="openAttachmentsModal"
>
<i class="fa-solid fa-image"></i>
Evidencias
@@ -86,7 +92,9 @@
><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"
@click="openProposalsModal"
data-toggle="modal"
data-target="#proposalsModal"
>#{{ load.no_of_proposals }} Ofertas</button>
</div>
</div>

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

@@ -0,0 +1,142 @@
<script setup>
import { onMounted, ref } from 'vue';
import { useLoadsStore } from '../stores/loads';
import Spiner from './ui/Spiner.vue';
import { getDateMonthDay } from '../helpers/date_formats';
import VehicleInfo from './VehicleInfo.vue';
const loadsStore = useLoadsStore();
const isLoading = ref(false);
onMounted(() => {
getProposalsData()
});
const getProposalsData = async() => {
isLoading.value = true;
await loadsStore.getProposalsOfLoads(loadsStore.currentLoad._id);
isLoading.value = false;
}
const clearMoal = () => {
loadsStore.openProposalsModal = false;
loadsStore.currentLoad = false;
}
</script>
<template>
<div class="modal fade" id="proposalsModal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="title mt-2 mb-3">Ofertas</h2>
<button
id="btnCloseProposalsModal"
type="button"
@click="clearMoal"
class="close bg-white" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body view-proposals">
<Spiner v-if="isLoading"/>
<div v-else v-for="proposal in loadsStore.proposalsOfLoads" class="card-fixed card-proposal">
<div class="row">
<div class="col-4">
<p>Empresa: <span>{{ proposal.carrier.company_name }}</span></p>
</div>
<div class="col-4">
<p>Licitador: <span>{{ proposal.bidder.first_name }} {{ proposal.bidder.last_name }}</span></p>
</div>
<div class="col-4">
<p>Fecha: <span>{{ getDateMonthDay(proposal.createdAt) }}</span></p>
</div>
</div>
<div class="row">
<div class="col-4">
<p>Tipo de Transporte: <span v-if="proposal.vehicle">{{proposal.vehicle.truck_type}}</span></p>
</div>
<div class="col-4">
<p># de registro del transportista: <span v-if="proposal.vehicle">{{proposal.vehicle.vehicle_code}}</span></p>
</div>
<div class="col-4">
<p>Transportista: <span v-if="proposal._driver">{{proposal._driver}}</span></p>
</div>
</div>
<div v-if="proposal.comment" class="box-note">
{{ proposal.comment }}
</div>
<VehicleInfo v-if="proposal.vehicle" :vehicle="proposal.vehicle"/>
<div class="d-flex justify-content-end gap-3">
<div v-if="proposal.is_accepted" class="indicator-check">
<i class="fa-solid fa-check"></i>
Aceptado
</div>
<button v-if="!proposal.is_accepted"
type="button"
class="btn-primary-sm"
@click=""
>
<i class="fa-solid fa-check"></i>
Aceptar
</button>
<button
class="btn-primary-sm"
@click=""
>
<i class="fa-solid fa-ban clear-sm"></i>
Cancelar
</button>
</div>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-dark"
@click="clearMoal"
data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.view-proposals {
width: 100%;
}
.card-proposal {
flex-direction: column;
width: 100% !important;
}
p {
font-size: 1rem;
font-weight: 400;
color: #323032;
font-weight: 700;
}
p span {
color: #323032;
font-weight: normal;
}
.indicator-check {
width: 120px;
padding: 10px 12px;
background: #FFF;
border: 1px solid green;
border-radius: 50px;
color: green;
}
.box-note {
padding: 12px 16px;
background-color: aqua;
border-radius: 13px;
}
</style>

35
src/components/VehicleInfo.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
import { ref } from 'vue';
defineProps({
vehicle: {
type: Object,
required: true
}
})
const isShow = ref(false);
const toogle = () => {
isShow.value = !isShow.value;
}
</script>
<template>
<a
@click="toogle"
class="btn-text mt-3"
>Ver más <i class="fa-solid" :class="[isShow ? 'fa-chevron-up' : 'fa-chevron-down']"></i></a>
<div v-if="isShow">
<div class="divider"></div>
<h2 class="my-3">Información del vehiculo</h2>
</div>
</template>
<style scoped>
h2 {
font-size: 1.2rem;
font-weight: 500;
}
</style>