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">
<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);
}
}

11
src/components/CardLoad.vue
View File

@@ -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"

24
src/components/FormLoadModal.vue
View File

@@ -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

87
src/stores/company.js
View File

@@ -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,

5
src/views/TrackingLoadView.vue
View File

@@ -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>