76 lines
2.7 KiB
Vue
76 lines
2.7 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import Spiner from '../components/ui/Spiner.vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { getDateMonthDay } from '../helpers/date_formats';
|
|
import useDirectory from '../composables/useDirectory';
|
|
|
|
const {loading, users, getUsersData} = useDirectory();
|
|
|
|
const {params} = useRoute();
|
|
|
|
onMounted(() => {
|
|
const id = params.id;
|
|
getUsersData(id);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-5">
|
|
<h2 class="title mt-5 mb-5">Usuarios de la <span class="title-main">Empresa</span></h2>
|
|
<Spiner v-if="loading"/>
|
|
<div
|
|
class="card-info flex-column align-items-center"
|
|
v-if="loading === false && users.length <= 0"
|
|
>
|
|
<img src="/images/logo.png" alt="logo" width="100">
|
|
<h2 class="title">No hay registros</h2>
|
|
</div>
|
|
<div class="card-fixed flex-column" v-for="user in users">
|
|
<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 embarcador: </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>
|
|
</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> |