add: company info & edit company view

src/views/MyCompanyView.vue

@@ -0,0 +1,118 @@
+<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';
+
+    const auth = useAuthStore()
+    const company = useCompanyStore();
+
+    onMounted(() => {
+        getInitialData()
+    });
+
+    const getInitialData = async() => {
+        await auth.authenticationPromise;
+        await company.getCompanyData();
+    }
+
+
+</script>
+
+<template>
+    <EditCompanyModal v-if="company.loading === false"/>
+    <div>
+        <h2 class="title my-5">Mi empresa</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
+                        class="btn-primary-sm"
+                        data-toggle="modal" data-target="#editcompanymodal"
+                    ><i class="fa-solid fa-pen-to-square"></i> Editar empresa</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">Tipo de empresa: </span>
+                            {{getTypeCompany(company.company?.company_type[0])}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Código: </span>
+                            {{company.company?.company_code}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Empresa miembro desde: </span>
+                            {{getDateMonthDay(company.company?.createAt)}}
+                        </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">Segmento de empresa: </span>
+                            {{company.company?._categories}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Ubicación de carga por estado: </span>
+                            {{company.company?._company_state}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Ubicación de carga por municipio: </span>
+                            {{company.company?._company_city}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">ETransportes utilizados: </span>
+                            {{company.company?._truck_types}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Información general de la empresa: </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: 8px;
+        font-size: 1.2rem;
+        color: #323030;
+        /* font-weight: bold; */
+    }
+
+    .item-company span {
+        font-weight: bold;
+    }
+</style>