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

add: view carriers

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-01 21:32:13 -06:00
parent df8aff2745
commit 85095bda36
8 changed files with 335 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/CardCompany.vue Normal file
View File

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

43
src/components/ui/EditCompanyModal.vue
View File

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

29
src/composables/useDirectory.js Normal file
View File

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

2
src/layouts/AdminLayout.vue
View File

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

5
src/router/index.js
View File

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

11
src/services/company.js
View File

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

1
src/services/public.js
View File

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

177
src/views/CarriersView.vue Normal file
View File

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