123 lines
3.9 KiB
Vue
123 lines
3.9 KiB
Vue
<script setup>
|
|
import { onMounted } from 'vue';
|
|
import useAttachments from '../composables/useAttachments';
|
|
import Spiner from './ui/Spiner.vue';
|
|
import { useLoadsStore } from '../stores/loads';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const baseUrl = import.meta.env.VITE_API_URL;
|
|
|
|
const loadStore = useLoadsStore();
|
|
const { getAttachmentLoad, loading, attachments } = useAttachments();
|
|
|
|
onMounted(() => {
|
|
getAttachmentLoad();
|
|
})
|
|
const { t } = useI18n();
|
|
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">{{ t('evidence.title') }}</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">{{ t('evidence.empty') }}</p>
|
|
</div>
|
|
<div v-else class="card-body box-attachments">
|
|
<div class="attachment" v-for="data in attachments.data">
|
|
<p v-if="data.type == 'Loading'">{{ t('evidence.loadEvidence') }}</p>
|
|
<p v-else>{{ t('evidence.downloadEvidence') }}</p>
|
|
<img
|
|
:src="`${baseUrl}/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">{{ t('buttons.close') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.box-attachments {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
}
|
|
.attachment {
|
|
width: 45%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
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: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
align-content: center;
|
|
}
|
|
|
|
@media (max-width: 568px) {
|
|
.attachment {
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
</style> |