137 lines
4.7 KiB
Vue
137 lines
4.7 KiB
Vue
<script setup>
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import Spiner from '../ui/Spiner.vue';
|
|
import Cities from './Cities.vue';
|
|
import NotificationBadge from './NotificationBadge.vue';
|
|
import Segments from './Segments.vue';
|
|
import States from './States.vue';
|
|
import TruckTypes from './TruckTypes.vue';
|
|
import Custominput from './custominput.vue';
|
|
import { useCompanyStore } from '../../stores/company';
|
|
|
|
const companyStore = useCompanyStore()
|
|
|
|
console.log(companyStore.company?.categories);
|
|
|
|
const loading = ref(false);
|
|
const msgError = ref('');
|
|
const msgSuccess = ref('');
|
|
const companyCategories = ref([]);
|
|
const companyStates = ref([]);
|
|
const companyCity = ref([]);
|
|
const companyTruckType = ref([]);
|
|
|
|
onMounted(() => {
|
|
console.log('EditCompanyModal');
|
|
if(companyStore.company){
|
|
companyCategories.value = companyStore.company.categories.map(m =>{
|
|
return { name: m.name };
|
|
});
|
|
}
|
|
if(companyStore.company){
|
|
companyStates.value = companyStore.company.company_state.map(m =>{
|
|
return { state_name: m };
|
|
});
|
|
}
|
|
if(companyStore.company){
|
|
companyCity.value = companyStore.company.company_city.map(m =>{
|
|
return { city_name: m };
|
|
});
|
|
}
|
|
if(companyStore.company){
|
|
companyTruckType.value = companyStore.company.truck_type.map(m =>{
|
|
return { meta_value: m };
|
|
});
|
|
}
|
|
})
|
|
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,
|
|
truckTypes: companyTruckType,
|
|
description: companyStore.company?.company_description ?? '',
|
|
});
|
|
|
|
const handleSave = () => {
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal fade" id="editcompanymodal" tabindex="-1" role="dialog" aria-labelledby="editcompany" 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">Editar Empresa</h2>
|
|
<button type="button" class="close bg-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form @submit.prevent="handleSave" class="view-form">
|
|
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
|
|
<div class="mb-4 mt-3">
|
|
<label class="custom-label">Segmento de la empresa</label>
|
|
<Segments
|
|
v-model="company.segments"
|
|
:multiple="true"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="custom-label">Ubicaciones de carga por estado</label>
|
|
<States
|
|
v-model="company.states"
|
|
:multiple="true"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="custom-label">Ubicaciones de carga por municipio</label>
|
|
<Cities
|
|
v-model="company.cities"
|
|
:multiple="true"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="custom-label">Tipo de transportes que utiliza</label>
|
|
<TruckTypes
|
|
v-model="company.truckTypes"
|
|
:multiple="true"
|
|
/>
|
|
</div>
|
|
<Custominput
|
|
label="Descripción de la empresa:"
|
|
type="text"
|
|
name="description"
|
|
:filled="false"
|
|
v-model:field="company.description"
|
|
/>
|
|
|
|
<input type="submit" value="Cuardar cambios" class="btn-primary-lg btn-lg-block my-4">
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-dark" data-dismiss="modal">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* .modal-width{
|
|
width: 1500px !important;
|
|
} */
|
|
|
|
.view-form {
|
|
padding: 1rem 4rem;
|
|
}
|
|
</style> |