add: search loads

src/components/CardCompany.vue

@@ -30,12 +30,12 @@
                 <p><span>Información general de la empresa: </span>{{company.company_description}}</p>
             </div>
         </div>
-        <!-- <div class="d-flex justify-content-end">
+        <div class="d-flex justify-content-end">
             <RouterLink 
                 class="btn-primary-sm"
-                :to="{name: 'empresa', params: {id: company._id}}"
+                :to="{name: 'public-users', params: {id: company._id}}"
             >Ver perfil</RouterLink>
-        </div> -->
+        </div>
     </div>
 </template>
 

src/components/CardLoad.vue

@@ -5,9 +5,11 @@
     import { getStatusLoad } from '../helpers/status';
     import { useLoadsStore } from '../stores/loads';
     import Swal from 'sweetalert2'
+    import { useAuthStore } from '../stores/auth';
 
     const router = useRouter();
     const loadsStore = useLoadsStore();
+    const authStore = useAuthStore();
 
     const props = defineProps({
         load: {
@@ -112,7 +114,7 @@
                 </p>
                 
             </div>
-            <div class="col-lg-6 col-sm-12">
+            <div class="col-lg-6 col-sm-12" v-if="authStore.user?.permissions.includes('role_shipper')">
                 <p><span>Status de la publicación:</span> <span>{{ getStatusPublished(load) }}</span></p>
                 <p :style="{color: getStatusLoad(load).color}"><span>Status de la carga:</span> <span>{{ getStatusLoad(load).status }}</span></p>
             </div>
@@ -146,7 +148,7 @@
         <div v-if="load.notes" class="box-note">
             {{ load.notes }}
         </div>
-        <div class="btn-row" v-if="!readOnly">
+        <div class="btn-row" v-if="!readOnly && authStore.user?.permissions.includes('role_shipper')">
             <button
                 class="btn-primary-sm bg-dark"
                 @click="handleDeleteLoad"
@@ -174,6 +176,19 @@
                 data-target="#proposalsModal"
             >#{{ load.no_of_proposals }} Ofertas</button>
         </div>
+        <div class="btn-row" v-if="authStore.user?.permissions.includes('role_carrier')">
+            <button
+                class="btn-primary-sm bg-dark"
+                data-toggle="modal" data-target="#formLoadModal"
+                @click=""
+            >Hacer oferta</button>
+            <button
+                class="btn-primary-sm"
+                @click=""
+                data-toggle="modal" 
+                data-target="#proposalsModal"
+            ><i class="fa-solid fa-phone clear-sm"></i> Llamar ahora</button>
+        </div>
     </div>
 </template>
 

src/composables/useDirectory.js

@@ -1,9 +1,11 @@
 import { ref } from "vue";
-import { getCompanies } from '../services/public';
+import { getCompanies, getPublicUsersCompany } from '../services/public';
 
-export default function useDirecty() {
+export default function useDirectory() {
     const companies = ref([]);
     const loading = ref(false);
+    const users = ref([]);
+
 
     const getCompaniesData = async(filterQuery) => {
         let filterArr = Object.values(filterQuery);
@@ -21,8 +23,18 @@ export default function useDirecty() {
         loading.value = false;
     }
 
+    const getUsersData = async(companyId) => {
+        const filter = companyId;
+        loading.value = true;
+        const resp = await getPublicUsersCompany(filter);
+        users.value = resp;
+        loading.value = false;
+    }
+
     return {
         getCompaniesData,
+        getUsersData,
+        users,
         loading,
         companies
     }

src/composables/userSearchLoads.js

@@ -0,0 +1,33 @@
+import { ref } from "vue";
+import api from "../lib/axios";
+
+export default function useSearchLoads() {
+    const loads = ref([]);
+    const loading = ref(false);
+
+    const getLoadsPublished = async(filterQuery) => {
+        loading.value = true;
+        let filterArr = Object.values(filterQuery);
+        let cleanfilterArr =  filterArr.filter(n=>n);
+        var filterStr = "";
+        if(cleanfilterArr.length >0){
+            filterStr = "?"+cleanfilterArr.join("&");
+        }
+        try {
+            const endpoint = `/loads/${filterStr}`;
+            console.log(endpoint)
+            const {data} = await api.get(endpoint);
+            loads.value = data.data;
+        } catch (error) {
+            loads.value = [];
+            console.log(error);
+        }
+        loading.value = false;
+    }
+
+    return {
+        getLoadsPublished,
+        loading,
+        loads
+    }
+}

src/router/index.js

@@ -50,6 +50,11 @@ const router = createRouter({
           name: 'company',
           component: () => import('../views/MyCompanyView.vue'),
         },
+        {
+          path: 'empresa/:id',
+          name: 'public-users',
+          component: () => import('../views/PublicUsersCompanyView.vue'),
+        },
         {
           path: 'ubicaciones',
           name: 'locations',

src/services/public.js

@@ -66,6 +66,18 @@ export const getUsersCompany = async(filter) => {
         const endpoint = `/v1/users?${filter}`;
         // console.log({endpoint});
         const {data} = await api.get(endpoint);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return [];
+    }
+}
+
+export const getPublicUsersCompany = async(filter) => {
+    try {
+        const endpoint = `/v1/public-companies/users/${filter}`;
+        // console.log({endpoint});
+        const {data} = await api.get(endpoint);
         // console.log(data);
         return data.data;
     } catch (error) {

src/views/CarriersView.vue

@@ -1,14 +1,14 @@
 <script setup>
     import { onMounted, ref, watch } from 'vue';
     import Spiner from '../components/ui/Spiner.vue';
-    import useDirecty from '../composables/useDirectory';
+    import useDirectory 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 {loading, companies, getCompaniesData} = useDirectory();
     const query = ref('');
     const selectedTruckType = ref([]);
     const selectedCategory = ref([]);

src/views/PublicUsersCompanyView.vue

@@ -0,0 +1,76 @@
+<script setup>
+    import { onMounted } from 'vue';
+    import Spiner from '../components/ui/Spiner.vue';
+    import { useRoute } from 'vue-router';
+    import { getDateMonthDay } from '../helpers/date_formats';
+    import useDirectory from '../composables/useDirectory';
+
+    const {loading, users, getUsersData} = useDirectory();
+
+    const {params} = useRoute();
+
+    onMounted(() => {
+        const id = params.id;
+        getUsersData(id);
+    });
+</script>
+
+<template>
+    <div class="mb-5">
+        <h2 class="title mt-5 mb-5">Usuarios de la <span class="title-main">Empresa</span></h2>
+        <Spiner v-if="loading"/>
+        <div 
+            class="card-info flex-column align-items-center"
+            v-if="loading === false && users.length <= 0"
+        >
+            <img src="/images/logo.png" alt="logo" width="100">
+            <h2 class="title">No hay registros</h2>
+        </div>
+        <div class="card-fixed flex-column" v-for="user in users">
+            <div class="row">
+                <div class="col-lg-6 col-sm-12">
+                    <p><span>Nombre de usuario:</span> {{user.name}}</p>
+                    <p v-if="user.employee_id"><span class="font-weight-bold mr-1">Número de registro:</span> {{user.employee_id}}</p>
+                    <p><span>Teléfono 1: </span>{{user.phone}}</p>
+                    <p><span>Teléfono 2: </span>{{user.phone2}}</p>
+                    <p><span>Email: </span>{{user.email}}</p>
+                </div>
+                <div class="col-lg-6 col-sm-12">
+                    <p><span>Segmento: </span>{{user._categories}}</p>
+                    <p><span>Locaciones de carga por municipio: </span>{{user._user_city}}</p>
+                    <p><span>Locaciones de carga por estado: </span>{{user._user_state}}</p>
+                    <p v-if="user.company.truck_type"><span>Tipos de transporte que utiliza: </span> {{user._truck_types}}</p>
+                    <p ><span>Información adicional del embarcador: </span> {{user.user_description}}</p>
+                    <p><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
+                    <p ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
+                    <p><span>Rol del usuario: </span>{{user.job_role}}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+    p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+    }
+    
+    p span {
+        font-weight: 700;
+    }
+
+    @media (max-width: 768px) {
+
+        p {
+            font-size: 0.9rem;
+            font-weight: 400;
+            color: #323032;
+        }
+        p span {
+            font-weight: 700;
+        }
+    }
+</style>

src/views/SearchLoadsView.vue

@@ -1,11 +1,181 @@
 <script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import useSearchLoads from '../composables/userSearchLoads';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardLoad from '../components/CardLoad.vue'
+    import CardEmpty from '../components/CardEmpty.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 filterQuery = ref([]);
+    const query = ref('');
+    const selectedTruckType = ref([]);
+    const selectedCategory = ref([]);
+    const selectedState = ref([]);
+    const selectedCities = ref([]);
 
+    const { getLoadsPublished, loads, loading } = useSearchLoads();
+
+    onMounted(() => {
+        getInitData();
+    });
+
+    watch(query, () => {
+        if(query.value.length === 0){
+            filterQuery.value.search = "";
+            getLoadsPublished(filterQuery.value);
+        }
+    });
+
+    watch(selectedState, () => {
+        if(selectedState.value != null){
+            filterQuery.value.state = "origin.state[$in][]="+ selectedState.value.state_name;
+            getLoadsPublished(filterQuery.value);
+        } 
+    });
+
+    watch(selectedCities, () => {
+        if(selectedCities.value != null){
+            filterQuery.value.city = "origin.city[$regex]="+ selectedCities.value.city_name;
+            getLoadsPublished(filterQuery.value);
+        } 
+    });
+
+    watch(selectedCategory, () => {
+        if(selectedCategory.value != null){
+            filterQuery.value.category = "categories[$in][]=" + selectedCategory.value._id;
+            getLoadsPublished(filterQuery.value);
+        } 
+    });
+
+    watch(selectedTruckType, () => {
+        if(selectedTruckType.value != null){
+            filterQuery.value.truck_type = "truck_type[$in][]="+ selectedTruckType.value.meta_value;
+            getLoadsPublished(filterQuery.value);
+        } 
+    });
+
+    const search = () => {
+        if(query.value.length >= 2){
+            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = "company.company_name[$regex]=" + query.value + "&company.company_name[$options]=i";
+            getLoadsPublished(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.status = "status=Published";
+
+        if(query.value == ''){
+            getLoadsPublished(filterQuery.value);
+        } else {
+            query.value = '';
+        }
+    }
+
+    const clearState = () => {
+        filterQuery.value.state = "";
+        getLoadsPublished(filterQuery.value);
+    }
+
+    const clearCity = () => {
+        filterQuery.value.city = "";
+        getLoadsPublished(filterQuery.value);
+    }
+
+    const clearTruckType = () => {
+        filterQuery.value.truck_type = "";
+        getLoadsPublished(filterQuery.value);
+    }
+
+    const clearCategory = () => {
+        filterQuery.value.category = "";
+        getLoadsPublished(filterQuery.value);
+    }
+
+    const getInitData = async() => {
+        filterQuery.value.limit = "";
+        filterQuery.value.company = "",
+
+        filterQuery.value.status = "status=Published",
+        await getLoadsPublished(filterQuery.value);
+    }
 </script>
 
 <template>
-    <h2 class="title">Buscar cargas</h2>
+    <h2 class="title mb-5">Buscar cargas</h2>
+    <div class="card-filters">
+        <div class="d-flex mb-2">
+            <input class="form-control me-2" type="search" name="" placeholder="Buscar embarcador" 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 class="mt-4" v-if="loading"/>
+    <div v-else>
+        <CardLoad 
+            v-if="loads.length > 0" 
+            v-for="load in loads"
+            :load="load"
+            :read-only="true"
+        />
+        <CardEmpty 
+            v-else
+            text="No hay cargas publicadas"
+        />
+    </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>

src/views/ShippersView.vue

@@ -1,14 +1,14 @@
 <script setup>
     import { onMounted, ref, watch } from 'vue';
     import Spiner from '../components/ui/Spiner.vue';
-    import useDirecty from '../composables/useDirectory';
+    import useDirectory 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 {loading, companies, getCompaniesData} = useDirectory();
     const query = ref('');
     const selectedTruckType = ref([]);
     const selectedCategory = ref([]);