From 325d2f3fd27cea144893cadc36a9eca96f8ecb33 Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Sat, 5 Oct 2024 17:37:05 -0600
Subject: [PATCH] set filters loads locations & images preview

---
 src/components/AttachmentsModal.vue | 29 ++++++++--
 src/components/CardLoad.vue         | 11 ++++
 src/components/FormLoadModal.vue    | 24 ++++----
 src/stores/company.js               | 87 ++++++++++++++++++++++-------
 src/views/TrackingLoadView.vue      |  5 ++
 5 files changed, 120 insertions(+), 36 deletions(-)

diff --git a/src/components/AttachmentsModal.vue b/src/components/AttachmentsModal.vue
index 4222755..19b2c02 100644
--- a/src/components/AttachmentsModal.vue
+++ b/src/components/AttachmentsModal.vue
@@ -41,7 +41,7 @@
                     <div v-if="!attachments || attachments.total == 0" class="card-body">
                         <p class="empty">{{ t('evidence.empty') }}</p>
                     </div>
-                    <div  v-else class="card-body">
+                    <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>
@@ -66,11 +66,17 @@
 </template>
 
 <style scoped>
+    .box-attachments {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+    }
     .attachment {
-        width: 100%;
+        width: 45%;
         display: flex;
         flex-direction: column;
-        padding: 20px;
+        padding: 16px;
         margin-bottom: 20px;
         border-radius: 13px;
         align-content: center;
@@ -88,7 +94,7 @@
     }
 
     .attachment img {
-        width: 33%;
+        width: 100%;
         justify-content: center;
         align-items: center;
         margin: 0 auto;
@@ -96,8 +102,19 @@
     }
 
     @media (max-width: 568px) {
-        .attachment img {
-            width: 50%;
+        .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);
+
         }
         
     }
diff --git a/src/components/CardLoad.vue b/src/components/CardLoad.vue
index 9efc4a6..63dacea 100644
--- a/src/components/CardLoad.vue
+++ b/src/components/CardLoad.vue
@@ -160,6 +160,17 @@
         <div v-if="load.notes" class="box-note">
             {{ load.notes }}
         </div>
+        <div class="btn-row">
+            <button  v-if="load.status !== 'Draft' && load.load_status !== 'Published' && load.load_status !== 'Loading' && !tracking" 
+                type="button" 
+                 data-toggle="modal" data-target="#attachmentModal" 
+                class="btn-primary-sm" 
+                @click="openAttachmentsModal"
+            >
+                <i class="fa-solid fa-image"></i>
+                {{ t('evidence.evidence') }}
+            </button>
+        </div>
         <div class="btn-row" v-if="load?.company?._id === authStore?.user?.company._id">
             <button
                 v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by"
diff --git a/src/components/FormLoadModal.vue b/src/components/FormLoadModal.vue
index 38a0195..36e16ff 100644
--- a/src/components/FormLoadModal.vue
+++ b/src/components/FormLoadModal.vue
@@ -80,9 +80,9 @@
             zoom.value = 4;
             heightMap.value = 420;
         }
-        if(companyStore.locationsLoads.length <= 0) {
-            getLocations();
-        }
+        // if(companyStore.locationsLoads.length <= 0) {
+        //     getLocations();
+        // }
         formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
         //origin_formatted_address
         if(loadStore.currentLoad){
@@ -160,9 +160,9 @@
         destinationRef.value = locationDownloadSelected.value.description;
     });
 
-    const getLocations = async() => {
+    const getLocations = async(type) => {
         loadingLocations.value = true;
-        await companyStore.getLocationsLoads()
+        await companyStore.getLocationsLoads(type)
         loadingLocations.value = false;
     }
 
@@ -465,13 +465,14 @@
                         <div class="form-section">
                             <h2>{{ t('loads.addressOrigin') }}</h2>
 
-                            <div class="form-check my-4" v-if="loadingLocations === false">
+                            <div class="form-check my-4" @click="getLocations('loading')">
                                 <input class="form-check-input chekmark" type="checkbox" id="directoryOrigin" v-model="checkLocationLoad">
                                 <label class="form-check-label custom-label" for="directoryOrigin">
                                     {{ t('loads.checkAddress') }}
                                 </label>
                             </div>
-                            <div class="d-flex flex-column mb-4" v-if="checkLocationLoad">
+                            <Spiner v-if="loadingLocations"/>
+                            <div class="d-flex flex-column mb-4" v-if="checkLocationLoad && !loadingLocations">
                                 <label class="custom-label mb-2" for="locationLoad">{{ t('loads.locationsRegistered') }}:</label>
                                 <select 
                                     class="custom-input-light"
@@ -480,7 +481,7 @@
                                     v-model="locationLoadSelected"
                                 >
                                     <option disabled value="">-- {{ t('loads.selectedLocation') }} --</option>
-                                    <option v-for="loc in companyStore.locationsLoads" :value="loc">{{ loc.branch_name }}</option>
+                                    <option v-for="loc in companyStore.locationsLoad" :value="loc">{{ loc.branch_name }}</option>
                                 </select>
                             </div>
                             <Custominput
@@ -535,13 +536,14 @@
                         </div>
                         <div class="form-section">
                             <h2>{{ t('loads.addressDestination') }}</h2>
-                            <div class="form-check my-4" v-if="loadingLocations === false">
+                            <div class="form-check my-4" @click="getLocations('unloading')">
                                 <input class="form-check-input chekmark" type="checkbox" id="directoryDestination" v-model="checkLocationDownload">
                                 <label class="form-check-label custom-label" for="directoryDestination">
                                     {{ t('loads.checkAddress') }}
                                 </label>
                             </div>
-                            <div class="d-flex flex-column mb-4" v-if="checkLocationDownload">
+                            <Spiner v-if="loadingLocations"/>
+                            <div class="d-flex flex-column mb-4" v-if="checkLocationDownload && !loadingLocations">
                                 <label class="custom-label mb-2" for="locationDownload">{{ t('loads.locationsRegistered') }}:</label>
                                 <select 
                                     class="custom-input-light"
@@ -550,7 +552,7 @@
                                     v-model="locationDownloadSelected"
                                 >
                                     <option disabled value="">-- {{ t('loads.selectedLocation') }} --</option>
-                                    <option v-for="loc in companyStore.locationsLoads" :value="loc">{{ loc.branch_name }}</option>
+                                    <option v-for="loc in companyStore.locationsDowload" :value="loc">{{ loc.branch_name }}</option>
                                 </select>
                             </div>
                             <Custominput
diff --git a/src/stores/company.js b/src/stores/company.js
index d2ce13f..4889d96 100644
--- a/src/stores/company.js
+++ b/src/stores/company.js
@@ -17,7 +17,8 @@ export const useCompanyStore = defineStore('company', () => {
     const budgetsTotal = ref(0);
     const budgetsCurrentPage = ref(0);
     const locations = ref([]);
-    const locationsLoads = ref([]);
+    const locationsLoad = ref([]);
+    const locationsDowload = ref([]);
     const locationsTotal = ref(0);
     const locationType = ref({value: '', label: t('labels.alls')})
     const locationsCurrentPage = ref(0);
@@ -150,7 +151,7 @@ export const useCompanyStore = defineStore('company', () => {
         budgetsTotal.value = 0;
         budgetsCurrentPage.value = 0;
         locations.value = [];
-        locationsLoads.value = [];
+        locationsLoad.value = [];
         locationsTotal.value = 0;
         locationsCurrentPage.value = 0;
         proposals.value = [];
@@ -300,16 +301,37 @@ export const useCompanyStore = defineStore('company', () => {
         }
     }
 
-    const getLocationsLoads = async() => {
-        if(locationsLoads.value.length <= 0) {
-            const filterStr = "?company="+ localStorage.getItem('id') + '&$limit=100'
-            const resp = await getLocations(filterStr);
+    const getLocationsLoads = async(type) => {
+        console.log(type);
+        let locationsType = (type === 'loading') ? locationsLoad.value : locationsDowload.value;
+        console.log(locationsType);
+        if(locationsType.length <= 0) {
+            const filterStr = "?company="+ localStorage.getItem('id') + '&$limit=100';
+            const respBoth = await getLocations(filterStr + '&type=' + 'both');
+            const resp = await getLocations(filterStr + '&type=' + type);
             if(resp !== null && resp.total > 0) {
-                locationsLoads.value = resp.data;
+                locationsType = [...respBoth.data, ...resp.data];
+                if(type === 'loading') {
+                    locationsLoad.value = [
+                        ...respBoth.data, 
+                        ...resp.data
+                    ];
+                } else {
+                    locationsDowload.value = [
+                        ...respBoth.data, 
+                        ...resp.data
+                    ];
+                }
             } else {
-                locationsLoads.value = [];
+                if(type === 'loading') {
+                    locationsLoad.value = [];
+                } else {
+                    locationsDowload.value = [];
+                }
+                locationsType = [];
             }
         }
+        return locationsType;
     }
 
     const createLocationCompany = async(formData, localData) => {
@@ -320,10 +342,21 @@ export const useCompanyStore = defineStore('company', () => {
                 ...localData
             });
             locationsTotal.value++;
-            locationsLoads.value.unshift({
+            locationsLoad.value.unshift({
                 ...data?.data,
                 ...localData
             })
+            if(data?.data.type === 'both' || data?.data.type === 'loading' && locationsLoad.value.length > 0) {
+                locationsLoad.value.unshift({
+                    ...data?.data,
+                    ...localData
+                })
+            } else if (data?.data.type == 'both' || data?.data.type === 'unloading' && locationsDowload.value.length > 0) {
+                locationsDowload.value.unshift({
+                    ...data?.data,
+                    ...localData
+                })
+            }
             return 'success';
         } else {
             return t('errors.generic');
@@ -340,13 +373,25 @@ export const useCompanyStore = defineStore('company', () => {
                     ...data,
                     ...localData
                 };
-                if(locationsLoads.value.length > 0) {
-                    const indexl = locationsLoads.value.findIndex((loc) => loc._id === id);
-                    locationsLoads.value[indexl] = {
-                        ...locationsLoads.value[index],
-                        ...data,
-                        ...localData
-                    };
+                if(locationsLoad.value.length > 0) {
+                    const indexl = locationsLoad.value.findIndex((loc) => loc._id === id);
+                    if(indexl !== -1) {
+                        locationsLoad.value[indexl] = {
+                            ...locationsLoad.value[index],
+                            ...data,
+                            ...localData
+                        };
+                    }
+                }
+                if(locationsDowload.value.length > 0) {
+                    const indexl = locationsDowload.value.findIndex((loc) => loc._id === id);
+                    if(indexl !== -1) {
+                        locationsDowload.value[indexl] = {
+                            ...locationsDowload.value[index],
+                            ...data,
+                            ...localData
+                        };
+                    }
                 }
             }
             return 'success';
@@ -359,8 +404,11 @@ export const useCompanyStore = defineStore('company', () => {
         const data = await deleteLocation(id);
         if(data) {
             locations.value = locations.value.filter(loc => loc._id !== id);
-            if(locationsLoads.value.length > 0) {
-                locationsLoads.value = locationsLoads.value.filter(loc => loc._id !== id);
+            if(locationsLoad.value.length > 0) {
+                locationsLoad.value = locationsLoad.value.filter(loc => loc._id !== id);
+            }
+            if(locationsDowload.value.length > 0) {
+                locationsDowload.value = locationsDowload.value.filter(loc => loc._id !== id);
             }
 
             return 'success';
@@ -398,7 +446,8 @@ export const useCompanyStore = defineStore('company', () => {
        usersTotal,
        usersCurrentPage,
        locations,
-       locationsLoads,
+       locationsLoad,
+       locationsDowload,
        locationsTotal,
        locationsCurrentPage,
         locationType,
diff --git a/src/views/TrackingLoadView.vue b/src/views/TrackingLoadView.vue
index 8053500..38a9792 100644
--- a/src/views/TrackingLoadView.vue
+++ b/src/views/TrackingLoadView.vue
@@ -8,6 +8,8 @@
     import CardEmpty from '../components/CardEmpty.vue';
     import useTrackingLoad from '../composables/useTrackingLoad';
     import { useI18n } from 'vue-i18n';
+    import AttachmentsModal from '../components/AttachmentsModal.vue';
+    import { useLoadsStore } from '../stores/loads';
 
     const mapKey = import.meta.env.VITE_MAP_KEY;
 
@@ -22,6 +24,8 @@
     const polylines = ref([]);
     const isLoadActive = ref(false);
     const windowWidth = ref(window.innerWidth);
+    const loadStore = useLoadsStore();
+
 
     onMounted(() => {
         window.addEventListener('resize', handleResize);
@@ -90,6 +94,7 @@
 </script>
 
 <template>
+    <AttachmentsModal v-if="loadStore.openAttachmentsModal"/>
     <h2 class="title text-center mt-5">{{ t('loads.trackingLoad') }}</h2>
     <Spiner v-if="loading"/>
     <div v-else>