add: filters locations & offerts

2024-10-03 21:32:23 -06:00
parent 0b56a2a223
commit f129acf9e6
9 changed files with 162 additions and 27 deletions
--- a/src/views/LocationsView.vue
+++ b/src/views/LocationsView.vue
@@ -17,24 +17,24 @@
    const locationCurrent = ref(null);
    const openModal = ref(false);
    const { t, locale } = useI18n();
-    const typeDirection = ref({value: 'both', label: t('labels.both')})
    const optionsFilter = ref([]);
    const openPopup = ref(false);


    onMounted(() => {
-        getInitData();
+        getInitData(false);
    })

    const limit = 10;

-    const getInitData = async() => {
+    const getInitData = async(reload) => {
        loading.value = true;
        filterQuery.value.company = "company="+ localStorage.getItem('id');
        filterQuery.value.limit = "elements=" + limit;
        filterQuery.value.page = "page=" + 0;
-        await companyStore.getLocationsCompany(filterQuery.value, false)
+        await companyStore.getLocationsCompany(filterQuery.value, reload)
        optionsFilter.value = [
+            {value: '', label: t('labels.alls')},
            {value: 'both',label: t('labels.both')},
            {value: 'loading',label: t('labels.load')},
            {value: 'unloading',label: t('labels.download')}
@@ -88,8 +88,10 @@

        filterQuery.value.search = "";
        filterQuery.value.company = "company="+ localStorage.getItem('id');
-        if(query.value == ''){
-            getInitData();
+        filterQuery.value.type = "";
+        companyStore.locationsCurrentPage = 0;
+        if(query.value === '' || companyStore.locationType.value !== 'all'){
+            getInitData(true);
        } else {
            query.value = '';
        }
@@ -98,7 +100,6 @@
    const clearRequest = () => {
        filterQuery.value.page = "page=" + 0;
        filterQuery.value.limit = "elements="+ limit;
-        companyStore.locationsCurrentPage = 0;
    }

    const handleSetCurrentLocation = (location) => {
@@ -111,9 +112,15 @@
        locationCurrent.value = null;
    }

-    const selectedType = (type) => {
-        typeDirection.value = type
+    const selectedType = async(type) => {
+        companyStore.locationType = type
+        let value = type.value;
        openPopup.value = false
+        filterQuery.value.limit = "elements=" + limit;
+        companyStore.locationsCurrentPage = 0;
+        filterQuery.value.page = "page=" + 0;
+        filterQuery.value.type = "type=" + value;
+        await getLocationsWithFilters(filterQuery.value);
    }

    const closePopup = () => {
@@ -128,7 +135,7 @@
    >
        <CustomPopup 
            :options="optionsFilter" 
-            :value="typeDirection" 
+            :value="companyStore.locationType" 
            @change-value="selectedType"
            @close-popup="closePopup"
            selected-color="#e3a11e"
@@ -148,8 +155,8 @@
            <div class="box-directory"
                @click="openPopup = true"
            >
-                <span class="clear-sm" v-if="typeDirection === null">{{ t('directory.directory') }}</span>
-                <span class="clear-sm" v-else>{{typeDirection.label}}</span>
+                <span class="clear-sm" v-if="companyStore.locationType === null">{{ t('directory.directory') }}</span>
+                <span class="clear-sm" v-else>{{companyStore.locationType.label}}</span>
                <i class="fa-solid fa-filter"></i>
            </div>
            <button 
--- a/src/views/TrackingLoadView.vue
+++ b/src/views/TrackingLoadView.vue
@@ -37,6 +37,7 @@
        const id = route.params['code'];
        await getLoadTracking(id)
        if(load.value !== null) {
+            console.log(load.value);
            const addressOrigin = load.value?.origin_geo?.coordinates;
            const addressDestination = load.value?.destination_geo?.coordinates;
            if(addressOrigin && addressDestination) {
@@ -64,6 +65,9 @@
                case 'Downloading':
                    isLoadActive.value = true;
                    break;
+                case 'Delivered':
+                    isLoadActive.value = true;
+                    break;
            
                default:
                    isLoadActive.value = false;
@@ -110,8 +114,9 @@
                > 
                    <Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
                    <Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
+                    <!-- v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive" -->
                    <CustomMarker
-                        v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
+                        v-if="vehicleLastLocation && isLoadActive"
                        :options="{position: vehicleLastLocation}"
                        :clickable="false"
                        :draggable="false"
--- a/src/views/TrucksPublishedView.vue
+++ b/src/views/TrucksPublishedView.vue
@@ -1,5 +1,5 @@
 <script setup>
-    import { onMounted, ref } from 'vue';
+    import { onMounted, ref, watch } from 'vue';
    import { useCompanyStore } from '../stores/company';
    import { useAuthStore } from '../stores/auth';
    import { useLoadsStore } from '../stores/loads';
@@ -10,6 +10,7 @@
    import Pagination from '../components/Pagination.vue';
    import AttachmentsModal from '../components/AttachmentsModal.vue';
    import { useI18n } from 'vue-i18n';
+import CustomPopup from '../components/CustomPopup.vue';

    const companyStore = useCompanyStore();
    const authStore = useAuthStore();
@@ -19,17 +20,77 @@
    const openModal = ref(false);
    const openModalProposal = ref(false);
    const limit = 10;
+    const statusFilters = ref([]);
+    const openPopup = ref(false);
+    const filterSelected = ref({})

    onMounted(() =>{
        getInitData();
    })

-    const { t } = useI18n();
+    const { t, locale } = useI18n();

    const getInitData = async() => {
+        filterSelected.value = {value: 'all', label: t('labels.all')}
        loading.value = true;
        const filter = 'elements=' + limit + "&page=0";
        await companyStore.getProposalsCompany(filter, false);
+        statusFilters.value = [
+            {value: 'all',label: t('labels.all')},
+            {value: 'accepted',label: t('labels.accepted')},
+            {value: 'notAccepted',label: t('labels.notAccepted')},
+            {value: 'withdraw',label: t('labels.withdraw')},
+            {value: 'completed',label: t('labels.completed')}
+        ]
+        loading.value = false;
+    }
+
+    watch(locale, () => {
+        statusFilters.value = [
+            {value: 'all',label: t('labels.all')},
+            {value: 'accepted',label: t('labels.accepted')},
+            {value: 'notAccepted',label: t('labels.notAccepted')},
+            {value: 'withdraw',label: t('labels.withdraw')},
+            {value: 'completed',label: t('labels.completed')}
+        ]
+    })
+
+    const closePopup = () => {
+        openPopup.value = false
+    }
+
+    const selectedType = async(type) => {
+        filterSelected.value = type
+        openPopup.value = false
+        loading.value = true;
+        let filter = 'elements=' + limit + "&page=0";
+        const value = type.value;
+        switch (value) {
+            case 'accepted':
+                filter += "&is_accepted=true&is_completed=false";
+                break;
+            case 'notAccepted':
+                filter += "&is_accepted=false";
+                break;
+                break;
+            case 'withdraw':
+                filter += "&is_withdrawn=true";
+                break;
+            case 'completed':
+                filter += "&is_completed=true";
+                break;
+            case 'all':
+                filter = filter;
+                break;
+        
+            default:
+                filter = filter;
+                break;
+        }
+        // console.log(type.value)
+        console.log(filter)
+        await companyStore.getProposalsCompany(filter, true);
+        console.log(companyStore.proposals)
        loading.value = false;
    }

@@ -59,6 +120,22 @@
 </script>

 <template>
+    <div
+        v-if="openPopup"
+    >
+        <CustomPopup
+            :options="statusFilters" 
+            :value="filterSelected" 
+            @change-value="selectedType"
+            @close-popup="closePopup"
+            selected-color="#e3a11e"
+            :style="{
+                right: '50px',
+                top: '130px',
+                width: '300px',
+            }"
+        />
+    </div>
    <AttachmentsModal
        v-if="loadStore.openAttachmentsModal"
    />
@@ -74,7 +151,16 @@
        @reset-load="handleResetCurrentProposal"
    />
    <div>
-        <h2 class="title mb-5">{{ t('proposals.title') }}</h2>
+        <div class="box-header">
+            <h2 class="title">{{ t('proposals.title') }}</h2>
+            <div class="box-filters"
+                @click="openPopup = true"
+            >
+                <span class="clear-sm" v-if="filterSelected === null">{{ t('directory.directory') }}</span>
+                <span class="clear-sm" v-else>{{filterSelected.label}}</span>
+                <i class="fa-solid fa-filter"></i>
+            </div>
+        </div>
        <Spiner v-if="loading"/>
        <CardProposal 
            v-else
@@ -94,5 +180,23 @@
 </template>

 <style scoped>
-
+    .box-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-content: center;
+        align-items: center;
+        align-self: center;
+    }
+    .box-filters {
+        padding: 12px 8px;
+        background-color: #FFF;
+        border-radius: 5px;
+        display: flex;
+        flex-direction: row;
+        border: 1px rgb(186, 175, 175) solid;
+        gap: 1rem;
+        align-items: center;
+        cursor: pointer;
+    }
 </style>