add: search loads
This commit is contained in:
Alexandro Uc Santos
@@ -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
76
src/views/PublicUsersCompanyView.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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([]);
|
||||
|
||||
Reference in New Issue
Block a user