add: view carriers

src/components/CardCompany.vue

@@ -0,0 +1,77 @@
+<script setup>
+    import { RouterLink } from 'vue-router';
+    import { getDateMonthDay } from '../helpers/date_formats';
+
+    defineProps({
+        company: {
+            type: Object,
+            required: true,
+        }
+    });
+</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>RFC:</span> {{ company.rfc }}</p>
+                <p><span>Tipo de empresa:</span> {{ company.company_type ? company.company_type.join(", ") : 'No definido' }}</p>
+                <p><span>Código:</span> {{ company.company_code }}</p>
+                <p><span>Empresa miembro desde: </span>{{getDateMonthDay(company.createdAt)}}</p>
+                <p><span>Afiliación: </span>  {{company.membership}}</p>
+            </div>
+            <div class="col-lg-6 col-sm-12">
+                <p><span>Segmento empresa:</span> {{ company._categories }}</p>
+                <p><span>Locaciones de carga por estado: </span>{{company._company_state}}</p>
+                <p><span>Locaciones de carga por municipio: </span>{{company._company_city}}</p>
+                <p><span>Transportes utilizados: </span>{{company._truck_types}}</p>
+                <p><span>Información general de la empresa: </span>{{company.company_description}}</p>
+            </div>
+        </div>
+        <!-- <div class="d-flex justify-content-end">
+            <RouterLink 
+                class="btn-primary-sm"
+                :to="{name: 'empresa', params: {id: company._id}}"
+            >Ver perfil</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>

src/components/ui/EditCompanyModal.vue

@@ -8,8 +8,10 @@
     import TruckTypes from './TruckTypes.vue';
     import Custominput from './custominput.vue';
     import { useCompanyStore } from '../../stores/company';
+    import { useNotificationsStore } from '../../stores/notifications';
 
     const companyStore = useCompanyStore()
+    const notifications = useNotificationsStore()
 
     console.log(companyStore.company?.categories);
 
@@ -45,14 +47,6 @@
 		}
     })
     const company = reactive({
-        typeCompany: '',
-        // segments: [{
-        //     createdAt: "2022-08-25T05:14:35.906Z",
-        //     name:"AGRICOLA",
-        //     updatedAt: "2022-08-25T05:16:35.603Z",
-        //     __v: 0,
-        //     _id: "6307053bbf4a7b12a4dca8c9"
-        // }],
         segments: companyCategories,
         states: companyStates,
         cities: companyCity,
@@ -61,7 +55,38 @@
     });
 
     const handleSave = () => {
+        // const resp = editCompany()
+        const resp = validations();
+        if(resp !== '') {
+            msgError.value = resp;
+            clearMessages();
+        } else {
+            // $('#editcompanymodal').modal('toggle');
+            document.getElementById('btnCloseEditCompany').click();
+            notifications.show = true;
+            notifications.text = 'Empresa actualizada';
+        }
+    }
 
+    const clearMessages = () => {
+        setTimeout(() => {
+            msgError.value = '';
+        }, 3000);
+   }
+    
+    const validations = () => {
+        if(company.segments.length === 0) {
+            return 'Agregue al menos un segmento';
+        }else if(company.states.length === 0) {
+            return 'Agregue al menos un estado';
+        } else if( company.cities.length === 0) {
+            msgError.value = 'Agregue al menos una ciudad';
+        } else if(company.truckTypes.length === 0){
+            msgError.value = 'Agregue al menos un tipo de camión';
+        } else {
+            return '';
+        }
+        
     }
 
 </script>
@@ -72,7 +97,7 @@
             <div class="modal-content">
             <div class="modal-header">
                 <h2 class="title mt-2 mb-3">Editar Empresa</h2>
-                <button type="button" class="close bg-white" data-dismiss="modal" aria-label="Close">
+                <button id="btnCloseEditCompany" type="button" class="close bg-white" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>