85 lines
2.9 KiB
Vue
85 lines
2.9 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { useCompanyStore } from '../stores/company';
|
|
import Spiner from './ui/Spiner.vue';
|
|
|
|
const props = defineProps({
|
|
driver: {
|
|
type: Object
|
|
}
|
|
});
|
|
|
|
defineEmits(['reset-vehicle']);
|
|
|
|
const companyStore = useCompanyStore();
|
|
|
|
const driverSelected = ref(null);
|
|
const drivers = ref([]);
|
|
|
|
onMounted(() => {
|
|
drivers.value = companyStore.users?.filter((u) => u.job_role == 'driver');
|
|
if(props.driver) {
|
|
const index = drivers.value.findIndex((d) => d._id === props.driver?._id);
|
|
driverSelected.value = drivers.value[index];
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal fade" id="editDriverVehicle" tabindex="-1" role="dialog" aria-labelledby="editDriverVehicle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="title mt-2 mb-3">Cambiar conductor</h2>
|
|
<button
|
|
id="btnCloseeditDriverVehicle"
|
|
type="button"
|
|
class="close bg-white"
|
|
data-dismiss="modal"
|
|
aria-label="Close"
|
|
@click="$emit('reset-vehicle')"
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body view-proposals">
|
|
<div class="custom-selected-field">
|
|
<label class="custom-label my-2" for="driver">Conductor asignado:</label>
|
|
<select
|
|
class="custom-input-light"
|
|
name="driver"
|
|
id="driver"
|
|
v-model="driverSelected"
|
|
>
|
|
<option disabled value="">-- Seleccionar conductor --</option>
|
|
<option v-for="driver in drivers" :value="driver">{{driver.name}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-dark radius-sm"
|
|
data-dismiss="modal"
|
|
@click="$emit('reset-vehicle')"
|
|
>Cancelar</button>
|
|
<button
|
|
class="btn-primary-sm radius-sm"
|
|
>
|
|
<span class="clear-xsm">Guardar</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.custom-selected-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 16px;
|
|
}
|
|
</style> |