add: view carriers

src/components/CardCompany.vue

@@ -0,0 +1,77 @@
+<script setup>
+    import { RouterLink } from 'vue-router';
+    import { getDateMonthDay } from '../helpers/date_formats';
+
+    defineProps({
+        company: {
+            type: Object,
+            required: true,
+        }
+    });
+</script>
+
+<template>
+    <div class="card-fixed flex-column">
+        <h2>{{ company.company_name }}</h2>
+        <div class="divider"></div>
+        <div class="row mt-4">
+            <div class="col-lg-6 col-sm-12">
+                <p><span>RFC:</span> {{ company.rfc }}</p>
+                <p><span>Tipo de empresa:</span> {{ company.company_type ? company.company_type.join(", ") : 'No definido' }}</p>
+                <p><span>Código:</span> {{ company.company_code }}</p>
+                <p><span>Empresa miembro desde: </span>{{getDateMonthDay(company.createdAt)}}</p>
+                <p><span>Afiliación: </span>  {{company.membership}}</p>
+            </div>
+            <div class="col-lg-6 col-sm-12">
+                <p><span>Segmento empresa:</span> {{ company._categories }}</p>
+                <p><span>Locaciones de carga por estado: </span>{{company._company_state}}</p>
+                <p><span>Locaciones de carga por municipio: </span>{{company._company_city}}</p>
+                <p><span>Transportes utilizados: </span>{{company._truck_types}}</p>
+                <p><span>Información general de la empresa: </span>{{company.company_description}}</p>
+            </div>
+        </div>
+        <!-- <div class="d-flex justify-content-end">
+            <RouterLink 
+                class="btn-primary-sm"
+                :to="{name: 'empresa', params: {id: company._id}}"
+            >Ver perfil</RouterLink>
+        </div> -->
+    </div>
+</template>
+
+<style scoped>
+
+    h2{
+        font-size: 1.5rem;
+        font-weight: 800;
+        color: #323030;
+    }
+
+    p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+    }
+
+    p span {
+        font-weight: 700;
+    }
+
+    @media (max-width: 768px) {
+        h2{
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #323030;
+        }
+
+
+        p {
+            font-size: 0.9rem;
+            font-weight: 400;
+            color: #323032;
+        }
+        p span {
+            font-weight: 700;
+        }
+    }
+</style>

src/components/ui/EditCompanyModal.vue

@@ -8,8 +8,10 @@
     import TruckTypes from './TruckTypes.vue';
     import Custominput from './custominput.vue';
     import { useCompanyStore } from '../../stores/company';
+    import { useNotificationsStore } from '../../stores/notifications';
 
     const companyStore = useCompanyStore()
+    const notifications = useNotificationsStore()
 
     console.log(companyStore.company?.categories);
 
@@ -45,14 +47,6 @@
 		}
     })
     const company = reactive({
-        typeCompany: '',
-        // segments: [{
-        //     createdAt: "2022-08-25T05:14:35.906Z",
-        //     name:"AGRICOLA",
-        //     updatedAt: "2022-08-25T05:16:35.603Z",
-        //     __v: 0,
-        //     _id: "6307053bbf4a7b12a4dca8c9"
-        // }],
         segments: companyCategories,
         states: companyStates,
         cities: companyCity,
@@ -61,6 +55,37 @@
     });
 
     const handleSave = () => {
+        // const resp = editCompany()
+        const resp = validations();
+        if(resp !== '') {
+            msgError.value = resp;
+            clearMessages();
+        } else {
+            // $('#editcompanymodal').modal('toggle');
+            document.getElementById('btnCloseEditCompany').click();
+            notifications.show = true;
+            notifications.text = 'Empresa actualizada';
+        }
+    }
+
+    const clearMessages = () => {
+        setTimeout(() => {
+            msgError.value = '';
+        }, 3000);
+   }
+    
+    const validations = () => {
+        if(company.segments.length === 0) {
+            return 'Agregue al menos un segmento';
+        }else if(company.states.length === 0) {
+            return 'Agregue al menos un estado';
+        } else if( company.cities.length === 0) {
+            msgError.value = 'Agregue al menos una ciudad';
+        } else if(company.truckTypes.length === 0){
+            msgError.value = 'Agregue al menos un tipo de camión';
+        } else {
+            return '';
+        }
         
     }
 
@@ -72,7 +97,7 @@
             <div class="modal-content">
             <div class="modal-header">
                 <h2 class="title mt-2 mb-3">Editar Empresa</h2>
-                <button type="button" class="close bg-white" data-dismiss="modal" aria-label="Close">
+                <button id="btnCloseEditCompany" type="button" class="close bg-white" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>

src/composables/useDirectory.js

@@ -0,0 +1,29 @@
+import { ref } from "vue";
+import { getCompanies } from '../services/public';
+
+export default function useDirecty() {
+    const companies = ref([]);
+    const loading = ref(false);
+
+    const getCompaniesData = async(filterQuery) => {
+        let filterArr = Object.values(filterQuery);
+        let cleanfilterArr =  filterArr.filter(n=>n);
+        let filterStr = "";
+
+        if(cleanfilterArr.length >0){
+            filterStr = cleanfilterArr[0] + "?"
+            filterStr += cleanfilterArr.slice(1).join("&");
+        }
+
+        loading.value = true;
+        const resp = await getCompanies(filterStr);
+        companies.value = resp;
+        loading.value = false;
+    }
+
+    return {
+        getCompaniesData,
+        loading,
+        companies
+    }
+}

src/layouts/AdminLayout.vue

@@ -152,7 +152,7 @@
                             <RouterLink 
                                 v-if="auth.user?.permissions.includes('role_shipper')"
                                 active-class="router-link-active"
-                                class="nav-link" :to="{name: 'recovery'}">Transporte</RouterLink>
+                                class="nav-link" :to="{name: 'carriers'}">Transporte</RouterLink>
                             <RouterLink 
                                 v-if="auth.user?.permissions.includes('role_carrier')"
                                 active-class="router-link-active"

src/router/index.js

@@ -90,6 +90,11 @@ const router = createRouter({
           name: 'vehicles',
           component: () => import('../views/VehiclesView.vue'),
         },
+        {
+          path: 'embarcadores',
+          name: 'carriers',
+          component: () => import('../views/CarriersView.vue'),
+        },
       ]
     }
   ]

src/services/company.js

@@ -11,3 +11,14 @@ export const getCompany = async(companyId) => {
         return null;
     }
 }
+
+export const editCompany = async(companyId, formData) => {
+    try {
+        const endpoint = `/companies/${companyId}`;
+        const {data} = await api.patch(endpoint, formData);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}

src/services/public.js

@@ -53,6 +53,7 @@ export const getCompanies = async(filter) => {
         const endpoint = `/v1/public-companies/${filter}`;
         console.log(endpoint);
         const {data} = await api.get(endpoint);
+        console.log(data);
         return data.data;
     } catch (error) {
         console.log(error);

src/views/CarriersView.vue

@@ -0,0 +1,177 @@
+<script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import Spiner from '../components/ui/Spiner.vue';
+    import useDirecty from '../composables/useDirectory';
+    import CardCompany from '../components/cardcompany.vue';
+    import TruckTypes from '../components/ui/TruckTypes.vue';
+    import Segments from '../components/ui/Segments.vue';
+    import States from '../components/ui/States.vue';
+    import Cities from '../components/ui/Cities.vue';
+
+    const {loading, companies, getCompaniesData} = useDirecty();
+    const query = ref('');
+    const selectedTruckType = ref([]);
+    const selectedCategory = ref([]);
+    const selectedState = ref([]);
+    const selectedCities = ref([]);
+    const filterQuery = ref([]);
+
+    onMounted(() => {
+        filterQuery.value.company_type = 'carrier';
+        getCompaniesData(filterQuery.value);
+    });
+
+    watch(query, () => {
+        if(query.value.length === 0){
+            filterQuery.value.search = "";
+            getCompaniesData(filterQuery.value);
+        }
+    });
+
+    watch(selectedState, () => {
+        if(selectedState.value != null){
+            filterQuery.value.state = "company_state[$in][]="+ selectedState.value.state_name;
+            getCompaniesData(filterQuery.value);
+        } 
+    });
+
+    watch(selectedCities, () => {
+        if(selectedCities.value != null){
+            filterQuery.value.city = "company_city[$in][]="+ selectedCities.value.city_name;
+            getCompaniesData(filterQuery.value);
+        } 
+    });
+
+    watch(selectedCategory, () => {
+        if(selectedCategory.value != null){
+            filterQuery.value.category = "categories[$in][]=" + selectedCategory.value._id;
+            getCompaniesData(filterQuery.value);
+        } 
+    });
+
+    watch(selectedTruckType, () => {
+        if(selectedTruckType.value != null){
+            filterQuery.value.truck_type = "truck_type[$in][]="+ selectedTruckType.value.meta_value;
+            getCompaniesData(filterQuery.value);
+        } 
+    });
+
+    const search = () => {
+        if(query.value.length >= 2){
+            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            getCompaniesData(filterQuery.value);
+        } 
+    
+    }
+
+    const clearFilter = () => {
+    
+        selectedCities.value = null;
+        selectedCategory.value = null;
+        selectedState.value = null;
+        selectedTruckType.value = null;
+
+        filterQuery.value.truck_type = "";
+        filterQuery.value.category = "";
+        filterQuery.value.city = "";
+        filterQuery.value.state = "";
+
+        filterQuery.value.company_type = 'carrier';
+
+        if(query.value == ''){
+            getCompaniesData(filterQuery.value);
+        } else {
+            query.value = '';
+        }
+    }
+
+    const clearState = () => {
+        filterQuery.value.state = "";
+        getCompaniesData(filterQuery.value);
+    }
+
+    const clearCity = () => {
+        filterQuery.value.city = "";
+        getCompaniesData(filterQuery.value);
+    }
+
+    const clearTruckType = () => {
+        filterQuery.value.truck_type = "";
+        getCompaniesData(filterQuery.value);
+    }
+
+    const clearCategory = () => {
+        filterQuery.value.category = "";
+        getCompaniesData(filterQuery.value);
+    }
+</script>
+
+<template>
+    <div>
+        <h2 class="title mt-5 mb-5">Directorios de <span class="title-main">Transportistas</span></h2>
+        <div class="card-filters">
+            <div class="d-flex mb-2">
+                <input class="form-control me-2" type="search" name="" placeholder="Buscar transportista" id="" @:input="search()" v-model="query" aria-label="Search">
+                <button class="btn btn-outline-dark me-2" type="button" @click="search">Buscar</button>
+                <button 
+                    class="btn btn-danger" type="button" @click="clearFilter">
+                    <i class="fa-solid fa-arrow-rotate-right"></i>
+                </button>
+            </div>
+            <div class="row">
+                <div class="col-xs-12 col-sm-6 px-2 py-2">
+                    <TruckTypes v-model="selectedTruckType" @clear-option="clearTruckType"/>
+                </div>
+                <div class=" col-xs-12 col-sm-6 px-2 py-2">
+                    <Segments v-model="selectedCategory" @clear-option="clearCategory"/>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12 col-sm-6 px-2 py-2">
+                    <States v-model="selectedState" @clear-option="clearState"/>
+                </div>
+                <div class="col-xs-12 col-sm-6 px-2 py-2">
+                    <Cities v-model="selectedCities" @clear-option="clearCity"/>
+                </div>
+            </div>
+        </div>
+        <Spiner v-if="loading"/>
+        <div 
+            class="card-info flex-column align-items-center"
+            v-if="loading === false && companies.length <= 0"
+        >
+            <img src="/images/logo.png" alt="logo" width="100">
+            <h2 class="title">No hay registros</h2>
+        </div>
+        
+        <CardCompany
+            v-else
+            v-for="company in companies"
+            :key="company._id"
+            :company="company"
+        />
+    </div>
+</template>
+
+<style scoped>
+    .card-filters {
+        display: flex;
+        margin: 0 auto;
+        background-color: #FFF;
+        border-radius: 13px;
+        /* background-color: red; */
+        flex-direction: column;
+        /* align-items: center; */
+        justify-content: center;
+        width: 100%;
+        padding: 20px 10%;
+        margin-bottom: 24px;
+    }
+
+    @media (max-width: 768px) {
+        .card-filters {
+            padding: 20px 16px;
+        }
+    }
+</style>