add: crud locations
This commit is contained in:
Alexandro Uc Santos
@@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import { useCompanyStore } from '../stores/company';
|
||||
import Swal from 'sweetalert2';
|
||||
import { useCompanyStore } from '../stores/company';
|
||||
|
||||
defineProps({
|
||||
budget: {
|
||||
@@ -32,6 +33,7 @@
|
||||
},
|
||||
});
|
||||
const resp = await companyStore.deleteBudgetCompany(props.budget._id);
|
||||
Swal.close();
|
||||
if(resp != null) {
|
||||
Swal.fire({
|
||||
title: "Presupuesto eliminado!",
|
||||
|
||||
116
src/components/CardLocation.vue
Normal file
116
src/components/CardLocation.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import Swal from 'sweetalert2';
|
||||
import { useCompanyStore } from '../stores/company';
|
||||
|
||||
const props = defineProps({
|
||||
location: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['set-location'])
|
||||
|
||||
const companyStore = useCompanyStore();
|
||||
|
||||
const handleDeleteLocation = async() => {
|
||||
Swal.fire({
|
||||
title: 'Eliminar Locación!',
|
||||
text: '¿Estás seguro de eliminar este locación?',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: 'Eliminar',
|
||||
cancelButtonText: 'Cancelar',
|
||||
}).then(async(result) => {
|
||||
if(result.isConfirmed) {
|
||||
Swal.fire({
|
||||
title: 'Por favor espere!',
|
||||
html: 'Eliminando locación...',// add html attribute if you want or remove
|
||||
allowOutsideClick: false,
|
||||
didOpen: () => {
|
||||
Swal.showLoading()
|
||||
},
|
||||
});
|
||||
|
||||
const resp = await companyStore.deleteLocationCompany(props.location._id)
|
||||
|
||||
Swal.close();
|
||||
|
||||
if(resp != null) {
|
||||
Swal.fire({
|
||||
title: "Locación eliminado!",
|
||||
text: "Tu locación ha sido eliminado exitosamente.",
|
||||
icon: "success"
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: "No eliminado!",
|
||||
text: "Tu locación no se pudo eliminar, intente más tarde.",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card-fixed card-location">
|
||||
<div>
|
||||
<p><span>Nombre de la locación de carga:</span> {{location.branch_name}}</p>
|
||||
<p><span>Dirección:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
|
||||
<p><span>Teléfono:</span> {{location.phone}}</p>
|
||||
<p><span>Tipos de camiones que se necesitan:</span> {{location.truck_type?.map((e) => e).join(', ')}}</p>
|
||||
<p><span>Segmento:</span> {{location.categories.map((e) => e.name).join(', ')}}</p>
|
||||
<p v-if="location.description"><span>Información adicional de la locación de carga:</span></p>
|
||||
<div v-if="location.description" class="box-note mb-4">
|
||||
{{ location.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button
|
||||
class="btn btn-dark radius-sm"
|
||||
@click="handleDeleteLocation"
|
||||
>
|
||||
<i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn-primary-sm radius-sm"
|
||||
@click="$emit('set-location')"
|
||||
data-toggle="modal" data-target="#locationFormModal"
|
||||
>
|
||||
<i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-location {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.box-note {
|
||||
padding: 12px 16px;
|
||||
background-color: aqua;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p span {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
249
src/components/CreateLocationModal.vue
Normal file
249
src/components/CreateLocationModal.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import CustomInput from './ui/custominput.vue';
|
||||
import Segments from './ui/Segments.vue';
|
||||
import TruckTypes from './ui/TruckTypes.vue';
|
||||
import States from './ui/States.vue';
|
||||
import Cities from './ui/Cities.vue';
|
||||
import Spiner from './ui/Spiner.vue';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useCompanyStore } from '../stores/company';
|
||||
import Swal from 'sweetalert2';
|
||||
|
||||
const props = defineProps({
|
||||
location: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
});
|
||||
|
||||
defineEmits(['reset-location']);
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const title = computed(() => {
|
||||
return (props.location) ? 'Editar Locación' : 'Crear Locación';
|
||||
});
|
||||
|
||||
const initState = {
|
||||
branch_name: "",
|
||||
phone: "",
|
||||
categories: [],
|
||||
city: "",
|
||||
state: "",
|
||||
truck_type: [],
|
||||
address: "",
|
||||
description: "",
|
||||
zipcode: ""
|
||||
}
|
||||
|
||||
const errors = ref({
|
||||
branch_name: null,
|
||||
address: null,
|
||||
city: null,
|
||||
state: null,
|
||||
zipcode: null
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if(props.location) {
|
||||
locationForm.branch_name = props.location.branch_name;
|
||||
locationForm.phone = props.location.phone;
|
||||
locationForm.categories = props.location.categories;
|
||||
locationForm.city = {
|
||||
city_name: props.location.city
|
||||
};
|
||||
locationForm.state = {
|
||||
state_name: props.location.state
|
||||
};
|
||||
locationForm.truck_type = props.location.truck_type?.map((e) => {
|
||||
return {
|
||||
meta_value: e
|
||||
}
|
||||
});
|
||||
locationForm.address = props.location.address;
|
||||
locationForm.description = props.location.description;
|
||||
locationForm.zipcode = "";
|
||||
} else {
|
||||
Object.assign(locationForm, initState);
|
||||
}
|
||||
})
|
||||
|
||||
const locationForm = reactive({
|
||||
...initState
|
||||
});
|
||||
|
||||
const saveLocation = async() => {
|
||||
validations();
|
||||
if(errors.value.branch_name || errors.value.address || errors.value.city || errors.value.state || errors.value.zipcode) {
|
||||
return;
|
||||
} else {
|
||||
|
||||
const branchData ={
|
||||
branch_name: locationForm.branch_name,
|
||||
phone: locationForm.phone,
|
||||
categories: locationForm.categories?.length <= 0 ? null : locationForm.categories?.map((e) => e._id),
|
||||
city: locationForm.city.city_name,
|
||||
state: locationForm.state.state_name,
|
||||
address: locationForm.address,
|
||||
truck_type: locationForm.truck_type?.length <= 0 ? null : locationForm.truck_type?.map((e) => e.meta_value),
|
||||
description: locationForm.description,
|
||||
company: authStore.user.company,
|
||||
|
||||
}
|
||||
|
||||
let result = 'error';
|
||||
let action = 'Creado';
|
||||
loading.value = true;
|
||||
|
||||
const localData = {
|
||||
categories: locationForm.categories,
|
||||
}
|
||||
|
||||
if(props.location !== null) {
|
||||
// Se actualiza
|
||||
result = await companyStore.updateLocationCompany(props.location._id, branchData, localData);
|
||||
action = 'actualizada';
|
||||
} else {
|
||||
// Se crea
|
||||
result = await companyStore.createLocationCompany(branchData, localData);
|
||||
action = 'creada';
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
if(result === 'success') {
|
||||
document.getElementById('btnCloseLocationFormModal').click();
|
||||
Swal.fire({
|
||||
title: `<strong>Locación ${action} con éxito!</strong>`,
|
||||
icon: 'success'
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: result,
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
console.log(locationForm);
|
||||
}
|
||||
}
|
||||
|
||||
const validations = () => {
|
||||
errors.value = {
|
||||
branch_name: locationForm.branch_name.length < 2 ? 'Ingrese nombre' : null,
|
||||
address: locationForm.address.length <= 4 ? 'Ingrese dirección valida' : null,
|
||||
city: locationForm.city.length <= 0 ? 'Seleccione municipio' : null,
|
||||
state: locationForm.state.length < 0 ? 'Seleccione estado' : null,
|
||||
zipcode: locationForm.zipcode.length < 5 ? 'Ingrese código postal valido' : null,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal fade" id="locationFormModal" tabindex="-1" role="dialog" aria-labelledby="locationFormModal" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="title mt-2 mb-3">{{ title }}</h2>
|
||||
<button
|
||||
id="btnCloseLocationFormModal"
|
||||
type="button"
|
||||
@click="$emit('reset-location')"
|
||||
class="close bg-white" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body form-content">
|
||||
<form @submit.prevent="saveLocation" autocomplete="off" method="post" ref="formRef">
|
||||
<CustomInput
|
||||
label="Nombre de la locación*"
|
||||
name="name"
|
||||
v-model:field="locationForm.branch_name"
|
||||
:filled="false"
|
||||
:error="errors.branch_name"
|
||||
/>
|
||||
<CustomInput
|
||||
label="Dirección(s)*"
|
||||
name="address"
|
||||
v-model:field="locationForm.address"
|
||||
:filled="false"
|
||||
:error="errors.address"
|
||||
/>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Estado de la locación*</label>
|
||||
<States
|
||||
v-model="locationForm.state"
|
||||
/>
|
||||
<span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
|
||||
</div>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Municipio de la locación*</label>
|
||||
<Cities
|
||||
v-model="locationForm.city"
|
||||
/>
|
||||
<span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
|
||||
</div>
|
||||
<CustomInput
|
||||
label="Código postal"
|
||||
name="zipcode"
|
||||
type="number"
|
||||
v-model:field="locationForm.zipcode"
|
||||
:filled="false"
|
||||
:error="errors.zipcode"
|
||||
/>
|
||||
<CustomInput
|
||||
label="Teléfono"
|
||||
name="phone"
|
||||
type="number"
|
||||
v-model:field="locationForm.phone"
|
||||
:filled="false"
|
||||
/>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Segmento</label>
|
||||
<Segments
|
||||
v-model="locationForm.categories"
|
||||
:multiple="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Tipo de transporte que se necesita</label>
|
||||
<TruckTypes
|
||||
v-model="locationForm.truck_type"
|
||||
:multiple="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<label class="custom-label" for="description">Información adicional del usuario:</label>
|
||||
<textarea
|
||||
class="custom-input-light"
|
||||
name="description"
|
||||
id="description"
|
||||
placeholder="Escribe aqui..."
|
||||
v-model="locationForm.description"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<Spiner v-if="loading"/>
|
||||
<button
|
||||
v-else
|
||||
class="btn btn-dark" type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-dark"
|
||||
@click="$emit('reset-location')"
|
||||
data-dismiss="modal">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -13,10 +13,12 @@
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import Swal from 'sweetalert2';
|
||||
import { useNotificationsStore } from '../stores/notifications';
|
||||
import { useCompanyStore } from '../stores/company';
|
||||
|
||||
const loadStore = useLoadsStore();
|
||||
const notyStore = useNotificationsStore();
|
||||
const auth = useAuthStore();
|
||||
const companyStore = useCompanyStore()
|
||||
const windowWidth = ref(window.innerWidth);
|
||||
const zoom = ref(6);
|
||||
const heightMap = ref(768);
|
||||
@@ -25,9 +27,16 @@
|
||||
const startLocation = ref(null);
|
||||
const endLocation = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const loadingLocations = ref(false);
|
||||
const submited = ref(false);
|
||||
const { geocodeAddress } = useDirectionsRender();
|
||||
const formRef = ref(null);
|
||||
const filterQueryVehicles = ref([]);
|
||||
const checkLocationLoad = ref(false);
|
||||
const checkLocationDownload = ref(false);
|
||||
const locationLoadSelected = ref(null)
|
||||
const locationDownloadSelected = ref(null)
|
||||
|
||||
const errors = ref({
|
||||
segment: null,
|
||||
product: null,
|
||||
@@ -62,6 +71,9 @@
|
||||
zoom.value = 4;
|
||||
heightMap.value = 420;
|
||||
}
|
||||
if(companyStore.locations.length <= 0) {
|
||||
getLocations();
|
||||
}
|
||||
formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
|
||||
//origin_formatted_address
|
||||
if(loadStore.currentLoad){
|
||||
@@ -117,6 +129,13 @@
|
||||
})
|
||||
})
|
||||
|
||||
const getLocations = async() => {
|
||||
loadingLocations.value = true;
|
||||
filterQueryVehicles.value.company = "company="+ localStorage.getItem('id');
|
||||
await companyStore.getLocationsCompany(filterQueryVehicles.value, false)
|
||||
loadingLocations.value = false;
|
||||
}
|
||||
|
||||
const getCoordsMap = async() => {
|
||||
if(loadStore.currentLoad.origin_formatted_address) {
|
||||
originCoords.value = await geocodeAddress(loadStore.currentLoad.origin_formatted_address);
|
||||
@@ -397,6 +416,25 @@
|
||||
<div class="form-box">
|
||||
<div class="form-section">
|
||||
<h2>Dirección de origen</h2>
|
||||
|
||||
<div class="form-check my-4" v-if="loadingLocations === false">
|
||||
<input class="form-check-input chekmark" type="checkbox" id="flexCheckDefault" v-model="checkLocationLoad">
|
||||
<label class="form-check-label custom-label" for="flexCheckDefault">
|
||||
Usar locaciones registradas
|
||||
</label>
|
||||
</div>
|
||||
<div class="d-flex flex-column mb-4" v-if="checkLocationLoad">
|
||||
<label class="custom-label mb-2" for="locationLoad">Locaciones registradas:</label>
|
||||
<select
|
||||
class="custom-input-light"
|
||||
name="locationLoad"
|
||||
id="locationLoad"
|
||||
v-model="locationLoadSelected"
|
||||
>
|
||||
<option disabled value="">-- Seleccionar locación --</option>
|
||||
<option v-for="loc in companyStore.locations" :value="loc">{{ loc.branch_name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<Custominput
|
||||
label="Nombre locación de carga*"
|
||||
type="text"
|
||||
@@ -457,6 +495,24 @@
|
||||
</div>
|
||||
<div class="form-section">
|
||||
<h2>Dirección de destino</h2>
|
||||
<div class="form-check my-4" v-if="loadingLocations === false">
|
||||
<input class="form-check-input chekmark" type="checkbox" id="flexCheckDefault" v-model="checkLocationDownload">
|
||||
<label class="form-check-label custom-label" for="flexCheckDefault">
|
||||
Usar locaciones registradas
|
||||
</label>
|
||||
</div>
|
||||
<div class="d-flex flex-column mb-4" v-if="checkLocationDownload">
|
||||
<label class="custom-label mb-2" for="locationDownload">Locaciones registradas:</label>
|
||||
<select
|
||||
class="custom-input-light"
|
||||
name="locationDownload"
|
||||
id="locationDownload"
|
||||
v-model="locationDownloadSelected"
|
||||
>
|
||||
<option disabled value="">-- Seleccionar locación --</option>
|
||||
<option v-for="loc in companyStore.locations" :value="loc">{{ loc.branch_name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<Custominput
|
||||
label="Nombre locación de descarga*"
|
||||
type="text"
|
||||
@@ -608,6 +664,12 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.chekmark {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.radius-sm{
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user