99 lines
3.2 KiB
Vue
99 lines
3.2 KiB
Vue
<script setup>
|
|
import { onMounted } from 'vue';
|
|
import useAttachments from '../composables/useAttachments';
|
|
import Spiner from './ui/Spiner.vue';
|
|
import { useLoadsStore } from '../stores/loads';
|
|
|
|
const loadStore = useLoadsStore();
|
|
const { getAttachmentLoad, loading, attachments } = useAttachments();
|
|
|
|
onMounted(() => {
|
|
console.log('se ejcyta attach');
|
|
getAttachmentLoad();
|
|
})
|
|
|
|
const clearLoad = () => {
|
|
loadStore.openAttachmentsModal = false;
|
|
loadStore.currentLoad = null;
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal fade" id="attachmentModal" tabindex="-1" role="dialog" aria-labelledby="attachmentModal" 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">Evidencias adjuntas</h2>
|
|
<button
|
|
id="btnCloseAttachmentModal"
|
|
type="button"
|
|
class="close bg-white"
|
|
data-dismiss="modal"
|
|
@click="clearLoad"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<Spiner v-if="loading"/>
|
|
<div v-else>
|
|
<div v-if="!attachments || attachments.total == 0" class="card-body">
|
|
<p class="empty">No hay evidencias subidas</p>
|
|
</div>
|
|
<div v-else class="card-body">
|
|
<div class="attachment" v-for="data in attachments.data">
|
|
<p v-if="data.type == 'Loading'">Evidencia de carga</p>
|
|
<p v-else>Evidencia de descarga</p>
|
|
<img
|
|
:src="`https://api.etaviaporte.com/api/v1/public-load-attachments/download/${data._id}`"
|
|
:alt="data.type"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-dark"
|
|
@click="clearLoad"
|
|
data-dismiss="modal">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.attachment {
|
|
width: 100%;
|
|
/* border: 1px #e9e9e9 solid; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 13px;
|
|
align-content: center;
|
|
align-items: center;
|
|
box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
|
|
-webkit-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
|
|
-moz-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
|
|
|
|
}
|
|
|
|
.attachment p {
|
|
font-size: 1rem;
|
|
font-weight: 900;
|
|
color: black;
|
|
}
|
|
|
|
.attachment img {
|
|
width: 50%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
align-content: center;
|
|
}
|
|
|
|
</style> |