139 lines
4.3 KiB
Vue
139 lines
4.3 KiB
Vue
<script setup>
|
|
import { RouterLink } from 'vue-router';
|
|
import { getDateMonthDay } from '../../../helpers/date_formats';
|
|
import { useI18n } from 'vue-i18n';
|
|
import Swal from 'sweetalert2';
|
|
import { onMounted, ref } from 'vue';
|
|
import { useAuthStore } from '../../../stores/auth';
|
|
import { usePrivacyStore } from '../../../stores/privacy';
|
|
|
|
const props = defineProps({
|
|
company: {
|
|
type: Object,
|
|
required: true,
|
|
}
|
|
});
|
|
|
|
const authStore = useAuthStore();
|
|
const privacyStore = usePrivacyStore();
|
|
const existInPrivateList = ref(false);
|
|
|
|
onMounted(() => {
|
|
const id = props.company._id;
|
|
existInPrivateList.value = privacyStore.privateListRef.includes(id);
|
|
})
|
|
|
|
const handleAddPrivateList = async() => {
|
|
Swal.fire({
|
|
title: 'Lista privadad',
|
|
text: '¿Estas seguro de añadir a este transportista de la lista privada?',
|
|
icon: 'info',
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#d33",
|
|
confirmButtonText: t('buttons.yes'),
|
|
cancelButtonText: t('buttons.no'),
|
|
}).then(async(result) => {
|
|
if(result.isConfirmed) {
|
|
Swal.fire({
|
|
title: t('messages.loading'),
|
|
allowOutsideClick: false,
|
|
didOpen: () => {
|
|
Swal.showLoading()
|
|
},
|
|
});
|
|
const response = await privacyStore.addCompanyToPrivateList(props.company._id);
|
|
Swal.close();
|
|
if(response === 'success') {
|
|
existInPrivateList.value = true;
|
|
Swal.fire({
|
|
title: 'Transportista añadido',
|
|
text: 'Se ha añadido este transportista a la lista privada',
|
|
icon: "success"
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
title: 'Error',
|
|
text: response,
|
|
icon: "error"
|
|
});
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const { t } = useI18n()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card-fixed flex-column">
|
|
<h2>{{ company.company_name }}</h2>
|
|
<div class="divider"></div>
|
|
<div class="row mt-4">
|
|
<div class="col-lg-6 col-sm-12">
|
|
<p><span>{{ t('labels.codeId') }}:</span> {{ company.company_code }}</p>
|
|
<p><span>{{ t('labels.dateMembership') }}: </span>{{getDateMonthDay(company.createdAt)}}</p>
|
|
<p><span>{{ t('company.segment') }}:</span> {{ company._categories }}</p>
|
|
</div>
|
|
<div class="col-lg-6 col-sm-12">
|
|
<p><span>{{ t('labels.locationLoadState') }}: </span>{{company._company_state}}</p>
|
|
<p><span>{{ t('labels.locationLoadCity') }}: </span>{{company._company_city}}</p>
|
|
<p><span>{{ t('labels.truckUsed') }}: </span>{{company._truck_types}}</p>
|
|
<p><span>{{ t('labels.infoCompany') }}: </span>{{company.company_description}}</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="d-flex justify-content-end gap-2"
|
|
v-if="authStore.user?.permissions === 'role_shipper'">
|
|
<button
|
|
v-if="!existInPrivateList"
|
|
class="btn-primary-sm bg-dark radius-sm"
|
|
@click="handleAddPrivateList"
|
|
>
|
|
Añadir a lista privada
|
|
</button>
|
|
<RouterLink
|
|
class="btn-primary-sm radius-sm"
|
|
:to="{name: 'public-users', params: {id: company._id}}"
|
|
>{{ t('buttons.profile') }}</RouterLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
h2{
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
color: #323030;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: #323032;
|
|
}
|
|
|
|
p span {
|
|
font-weight: 700;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
h2{
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #323030;
|
|
}
|
|
|
|
|
|
p {
|
|
font-size: 0.9rem;
|
|
font-weight: 400;
|
|
color: #323032;
|
|
}
|
|
p span {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
</style> |