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

set filters loads locations & images preview

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-10-05 17:37:05 -06:00
parent f129acf9e6
commit 325d2f3fd2
5 changed files with 120 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/AttachmentsModal.vue
View File

@@ -41,7 +41,7 @@
<div v-if="!attachments || attachments.total == 0" class="card-body"> <div v-if="!attachments || attachments.total == 0" class="card-body">
<p class="empty">{{ t('evidence.empty') }}</p> <p class="empty">{{ t('evidence.empty') }}</p>
</div> </div>
<div v-else class="card-body"> <div v-else class="card-body box-attachments">
<div class="attachment" v-for="data in attachments.data"> <div class="attachment" v-for="data in attachments.data">
<p v-if="data.type == 'Loading'">{{ t('evidence.loadEvidence') }}</p> <p v-if="data.type == 'Loading'">{{ t('evidence.loadEvidence') }}</p>
<p v-else>{{ t('evidence.downloadEvidence') }}</p> <p v-else>{{ t('evidence.downloadEvidence') }}</p>
@@ -66,11 +66,17 @@
</template> </template>
<style scoped> <style scoped>
.box-attachments {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.attachment { .attachment {
width: 100%; width: 45%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 16px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 13px; border-radius: 13px;
align-content: center; align-content: center;
@@ -88,7 +94,7 @@
} }
.attachment img { .attachment img {
width: 33%; width: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
@@ -96,8 +102,19 @@
} }
@media (max-width: 568px) { @media (max-width: 568px) {
.attachment img { .attachment {
width: 50%; 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);
} }
} }

11
src/components/CardLoad.vue
View File

@@ -160,6 +160,17 @@
<div v-if="load.notes" class="box-note"> <div v-if="load.notes" class="box-note">
{{ load.notes }} {{ load.notes }}
</div> </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"> <div class="btn-row" v-if="load?.company?._id === authStore?.user?.company._id">
<button <button
v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by" v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by"

24
src/components/FormLoadModal.vue
View File

@@ -80,9 +80,9 @@
zoom.value = 4; zoom.value = 4;
heightMap.value = 420; heightMap.value = 420;
} }
if(companyStore.locationsLoads.length <= 0) { // if(companyStore.locationsLoads.length <= 0) {
getLocations(); // getLocations();
} // }
formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name; formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
//origin_formatted_address //origin_formatted_address
if(loadStore.currentLoad){ if(loadStore.currentLoad){
@@ -160,9 +160,9 @@
destinationRef.value = locationDownloadSelected.value.description; destinationRef.value = locationDownloadSelected.value.description;
}); });
const getLocations = async() => { const getLocations = async(type) => {
loadingLocations.value = true; loadingLocations.value = true;
await companyStore.getLocationsLoads() await companyStore.getLocationsLoads(type)
loadingLocations.value = false; loadingLocations.value = false;
} }
@@ -465,13 +465,14 @@
<div class="form-section"> <div class="form-section">
<h2>{{ t('loads.addressOrigin') }}</h2> <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"> <input class="form-check-input chekmark" type="checkbox" id="directoryOrigin" v-model="checkLocationLoad">
<label class="form-check-label custom-label" for="directoryOrigin"> <label class="form-check-label custom-label" for="directoryOrigin">
{{ t('loads.checkAddress') }} {{ t('loads.checkAddress') }}
</label> </label>
</div> </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> <label class="custom-label mb-2" for="locationLoad">{{ t('loads.locationsRegistered') }}:</label>
<select <select
class="custom-input-light" class="custom-input-light"
@@ -480,7 +481,7 @@
v-model="locationLoadSelected" v-model="locationLoadSelected"
> >
<option disabled value="">-- {{ t('loads.selectedLocation') }} --</option> <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> </select>
</div> </div>
<Custominput <Custominput
@@ -535,13 +536,14 @@
</div> </div>
<div class="form-section"> <div class="form-section">
<h2>{{ t('loads.addressDestination') }}</h2> <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"> <input class="form-check-input chekmark" type="checkbox" id="directoryDestination" v-model="checkLocationDownload">
<label class="form-check-label custom-label" for="directoryDestination"> <label class="form-check-label custom-label" for="directoryDestination">
{{ t('loads.checkAddress') }} {{ t('loads.checkAddress') }}
</label> </label>
</div> </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> <label class="custom-label mb-2" for="locationDownload">{{ t('loads.locationsRegistered') }}:</label>
<select <select
class="custom-input-light" class="custom-input-light"
@@ -550,7 +552,7 @@
v-model="locationDownloadSelected" v-model="locationDownloadSelected"
> >
<option disabled value="">-- {{ t('loads.selectedLocation') }} --</option> <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> </select>
</div> </div>
<Custominput <Custominput

81
src/stores/company.js
View File

@@ -17,7 +17,8 @@ export const useCompanyStore = defineStore('company', () => {
const budgetsTotal = ref(0); const budgetsTotal = ref(0);
const budgetsCurrentPage = ref(0); const budgetsCurrentPage = ref(0);
const locations = ref([]); const locations = ref([]);
const locationsLoads = ref([]); const locationsLoad = ref([]);
const locationsDowload = ref([]);
const locationsTotal = ref(0); const locationsTotal = ref(0);
const locationType = ref({value: '', label: t('labels.alls')}) const locationType = ref({value: '', label: t('labels.alls')})
const locationsCurrentPage = ref(0); const locationsCurrentPage = ref(0);
@@ -150,7 +151,7 @@ export const useCompanyStore = defineStore('company', () => {
budgetsTotal.value = 0; budgetsTotal.value = 0;
budgetsCurrentPage.value = 0; budgetsCurrentPage.value = 0;
locations.value = []; locations.value = [];
locationsLoads.value = []; locationsLoad.value = [];
locationsTotal.value = 0; locationsTotal.value = 0;
locationsCurrentPage.value = 0; locationsCurrentPage.value = 0;
proposals.value = []; proposals.value = [];
@@ -300,16 +301,37 @@ export const useCompanyStore = defineStore('company', () => {
} }
} }
const getLocationsLoads = async() => { const getLocationsLoads = async(type) => {
if(locationsLoads.value.length <= 0) { console.log(type);
const filterStr = "?company="+ localStorage.getItem('id') + '&$limit=100' let locationsType = (type === 'loading') ? locationsLoad.value : locationsDowload.value;
const resp = await getLocations(filterStr); 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) { 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 { } else {
locationsLoads.value = []; locationsDowload.value = [
...respBoth.data,
...resp.data
];
}
} else {
if(type === 'loading') {
locationsLoad.value = [];
} else {
locationsDowload.value = [];
}
locationsType = [];
} }
} }
return locationsType;
} }
const createLocationCompany = async(formData, localData) => { const createLocationCompany = async(formData, localData) => {
@@ -320,10 +342,21 @@ export const useCompanyStore = defineStore('company', () => {
...localData ...localData
}); });
locationsTotal.value++; locationsTotal.value++;
locationsLoads.value.unshift({ locationsLoad.value.unshift({
...data?.data, ...data?.data,
...localData ...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'; return 'success';
} else { } else {
return t('errors.generic'); return t('errors.generic');
@@ -340,15 +373,27 @@ export const useCompanyStore = defineStore('company', () => {
...data, ...data,
...localData ...localData
}; };
if(locationsLoads.value.length > 0) { if(locationsLoad.value.length > 0) {
const indexl = locationsLoads.value.findIndex((loc) => loc._id === id); const indexl = locationsLoad.value.findIndex((loc) => loc._id === id);
locationsLoads.value[indexl] = { if(indexl !== -1) {
...locationsLoads.value[index], locationsLoad.value[indexl] = {
...locationsLoad.value[index],
...data, ...data,
...localData ...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'; return 'success';
} else { } else {
return t('errors.generic'); return t('errors.generic');
@@ -359,8 +404,11 @@ export const useCompanyStore = defineStore('company', () => {
const data = await deleteLocation(id); const data = await deleteLocation(id);
if(data) { if(data) {
locations.value = locations.value.filter(loc => loc._id !== id); locations.value = locations.value.filter(loc => loc._id !== id);
if(locationsLoads.value.length > 0) { if(locationsLoad.value.length > 0) {
locationsLoads.value = locationsLoads.value.filter(loc => loc._id !== id); 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'; return 'success';
@@ -398,7 +446,8 @@ export const useCompanyStore = defineStore('company', () => {
usersTotal, usersTotal,
usersCurrentPage, usersCurrentPage,
locations, locations,
locationsLoads, locationsLoad,
locationsDowload,
locationsTotal, locationsTotal,
locationsCurrentPage, locationsCurrentPage,
locationType, locationType,

5
src/views/TrackingLoadView.vue
View File

@@ -8,6 +8,8 @@
import CardEmpty from '../components/CardEmpty.vue'; import CardEmpty from '../components/CardEmpty.vue';
import useTrackingLoad from '../composables/useTrackingLoad'; import useTrackingLoad from '../composables/useTrackingLoad';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import AttachmentsModal from '../components/AttachmentsModal.vue';
import { useLoadsStore } from '../stores/loads';
const mapKey = import.meta.env.VITE_MAP_KEY; const mapKey = import.meta.env.VITE_MAP_KEY;
@@ -22,6 +24,8 @@
const polylines = ref([]); const polylines = ref([]);
const isLoadActive = ref(false); const isLoadActive = ref(false);
const windowWidth = ref(window.innerWidth); const windowWidth = ref(window.innerWidth);
const loadStore = useLoadsStore();
onMounted(() => { onMounted(() => {
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
@@ -90,6 +94,7 @@
</script> </script>
<template> <template>
<AttachmentsModal v-if="loadStore.openAttachmentsModal"/>
<h2 class="title text-center mt-5">{{ t('loads.trackingLoad') }}</h2> <h2 class="title text-center mt-5">{{ t('loads.trackingLoad') }}</h2>
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<div v-else> <div v-else>