134 lines
5.0 KiB
Vue
134 lines
5.0 KiB
Vue
<script setup>
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import {useCompanyStore} from '../stores/company';
|
|
import {useAuthStore} from '../stores/auth';
|
|
import Spiner from '../components/ui/Spiner.vue';
|
|
import {getTypeCompany} from '../helpers/type_company'
|
|
import {getDateMonthDay} from '../helpers/date_formats'
|
|
import EditCompanyModal from '../components/ui/EditCompanyModal.vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const auth = useAuthStore()
|
|
const company = useCompanyStore();
|
|
const { user } = storeToRefs(auth);
|
|
const { t } = useI18n()
|
|
|
|
onMounted(() => {
|
|
if(user.value) {
|
|
getInitialData()
|
|
}
|
|
});
|
|
|
|
watch(user, () => {
|
|
if(user.value) {
|
|
getInitialData();
|
|
}
|
|
})
|
|
|
|
const getInitialData = async() => {
|
|
await auth.authenticationPromise;
|
|
// await authenticationPromise;
|
|
await company.getCompanyData();
|
|
console.log(company.company)
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<EditCompanyModal v-if="company.loading === false"/>
|
|
<div>
|
|
<h2 class="title my-5">{{ t('company.title') }}</h2>
|
|
<div class="card-info">
|
|
<Spiner v-if="company.loading"/>
|
|
<div v-else class="view">
|
|
<div class="header-info">
|
|
<h2>{{ company.company?.company_name }}</h2>
|
|
<button
|
|
v-if="auth.user?.job_role === 'owner'"
|
|
class="btn-primary-sm"
|
|
data-toggle="modal" data-target="#editcompanymodal"
|
|
><i class="fa-solid fa-pen-to-square"></i> {{ t('company.edit') }}</button>
|
|
</div>
|
|
<div class="divider mb-4"></div>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<!-- <div class="item-company">
|
|
<span class="font-weight-bold">RFC: </span>
|
|
{{company.company?.rfc}}
|
|
</div> -->
|
|
<div class="item-company">
|
|
<span class="font-weight-bold">{{ t('labels.typeCompany') }}: </span>
|
|
{{getTypeCompany(company.company?.company_type)}}
|
|
</div>
|
|
<div class="item-company">
|
|
<span class="font-weight-bold">{{ t('labels.codeId') }}: </span>
|
|
{{company.company?.company_code}}
|
|
</div>
|
|
<div class="item-company">
|
|
<span class="font-weight-bold">{{ t('labels.dateMembership') }}: </span>
|
|
{{getDateMonthDay(company.company?.createAt)}}
|
|
</div>
|
|
<div class="item-company">
|
|
<span class="font-weight-bold">{{ t('labels.segmentsCompany') }}: </span>
|
|
{{company.company?.categories.map((e) => e.name).join(', ')}}
|
|
</div>
|
|
<!-- <div class="item-company">
|
|
<span class="font-weight-bold">Afiliación: </span>
|
|
{{ company.company?.membership }}
|
|
</div> -->
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="item-company">
|
|
<span class="font-weight-bold">{{ t('labels.locationLoadState') }}: </span>
|
|
{{company.company?.company_state.map((e) => e).join(', ')}}
|
|
</div>
|
|
<div class="item-company">
|
|
<span class="font-weight-bold">{{ t('labels.locationLoadCity') }}: </span>
|
|
{{company.company?.company_city.map((e) => e).join(', ')}}
|
|
</div>
|
|
<div class="item-company">
|
|
<span class="font-weight-bold">{{ t('labels.truckUsed') }}: </span>
|
|
{{company.company?.truck_type.map((e) => e).join(', ')}}
|
|
</div>
|
|
<div class="item-company">
|
|
<span class="font-weight-bold">{{ t('labels.infoCompany') }}: </span>
|
|
{{ company.company?.company_description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header-info {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.header-info h2 {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
}
|
|
.view {
|
|
width: 100%;
|
|
}
|
|
|
|
.item-company {
|
|
margin-bottom: 1rem;
|
|
font-size: 1.2rem;
|
|
color: #323030;
|
|
/* font-weight: bold; */
|
|
}
|
|
|
|
.item-company span {
|
|
font-weight: bold;
|
|
}
|
|
</style> |