122 lines
4.1 KiB
Vue
122 lines
4.1 KiB
Vue
<script setup>
|
|
import Swal from 'sweetalert2';
|
|
import { getDateMonthDay } from '../helpers/date_formats';
|
|
|
|
defineProps({
|
|
user: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
}
|
|
|
|
})
|
|
|
|
defineEmits(['set-user'])
|
|
|
|
const handleDelete = () => {
|
|
Swal.fire({
|
|
title: 'Eliminación de usuario!',
|
|
text: '¿Estás seguro de eliminar este usuario?',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#d33",
|
|
confirmButtonText: 'Eliminar',
|
|
cancelButtonText: 'Cancelar',
|
|
}).then(async(result) => {
|
|
if(result.isConfirmed) {
|
|
Swal.fire({
|
|
title: 'Por favor espere!',
|
|
html: 'Elimininando usuario...',// add html attribute if you want or remove
|
|
allowOutsideClick: false,
|
|
didOpen: () => {
|
|
Swal.showLoading()
|
|
},
|
|
});
|
|
let resp = 'success';
|
|
|
|
setTimeout(() => {
|
|
Swal.close()
|
|
if(resp !== null) {
|
|
Swal.fire({
|
|
title: "Usuario eliminado!",
|
|
text: "El usuario ha sido eliminado exitosamente.",
|
|
icon: "success"
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
title: "No eliminado!",
|
|
text: "El usuario no se pudo eliminar, intente más tarde.",
|
|
icon: "error"
|
|
});
|
|
}
|
|
}, 5000)
|
|
// const resp = await companyStore.deleteBudgetCompany(props.budget._id);
|
|
}
|
|
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card-fixed flex-column">
|
|
<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 usuario: </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 class="btn-row" v-if="readonly === false">
|
|
<button
|
|
class="btn-primary-sm radius-sm"
|
|
data-toggle="modal"
|
|
data-target="#userModal"
|
|
@click="$emit('set-user')"
|
|
><i class="fa-solid fa-pen-to-square"></i> Editar</button>
|
|
<button
|
|
class="btn btn-dark radius-sm"
|
|
@click="handleDelete"
|
|
><i class="fa-solid fa-trash"></i> Eliminar</button>
|
|
</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> |