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

add: search loads

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-18 21:25:56 -06:00
parent 2a4bde6024
commit bc49895b01
10 changed files with 335 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/CardCompany.vue
View File

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

19
src/components/CardLoad.vue
View File

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

16
src/composables/useDirectory.js
View File

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

33
src/composables/userSearchLoads.js Normal file
View File

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

5
src/router/index.js
View File

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

12
src/services/public.js
View File

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

4
src/views/CarriersView.vue
View File

@@ -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([]);

76
src/views/PublicUsersCompanyView.vue Normal file
View File

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

172
src/views/SearchLoadsView.vue
View File

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

4
src/views/ShippersView.vue
View File

@@ -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([]);