add: Form create load

2023-12-07 18:04:17 -06:00
parent 2c74a4b3ae
commit cea26e1f6e
29 changed files with 1292 additions and 59 deletions
--- a/src/components/AttachmentsModal.vue
+++ b/src/components/AttachmentsModal.vue
@@ -0,0 +1,97 @@
+<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(() => {
+        getAttachmentLoad();
+    })
+
+    const clearLoad = () => {
+        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">&times;</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>