add: company info & edit company view

2023-11-29 21:07:46 -06:00
parent dd674b053b
commit df8aff2745
18 changed files with 548 additions and 48 deletions
--- a/src/components/ui/EditCompanyModal.vue
+++ b/src/components/ui/EditCompanyModal.vue
@@ -0,0 +1,137 @@
+<script setup>
+    import { onMounted, reactive, ref } from 'vue';
+    import Spiner from '../ui/Spiner.vue';
+    import Cities from './Cities.vue';
+    import NotificationBadge from './NotificationBadge.vue';
+    import Segments from './Segments.vue';
+    import States from './States.vue';
+    import TruckTypes from './TruckTypes.vue';
+    import Custominput from './custominput.vue';
+    import { useCompanyStore } from '../../stores/company';
+
+    const companyStore = useCompanyStore()
+
+    console.log(companyStore.company?.categories);
+
+    const loading = ref(false);
+    const msgError = ref('');
+    const msgSuccess = ref('');
+    const companyCategories = ref([]);
+    const companyStates = ref([]);
+    const companyCity = ref([]);
+    const companyTruckType = ref([]);
+
+    onMounted(() => {
+        console.log('EditCompanyModal');
+        if(companyStore.company){
+			companyCategories.value = companyStore.company.categories.map(m =>{
+				return { name: m.name };
+			});
+		}
+        if(companyStore.company){
+			companyStates.value = companyStore.company.company_state.map(m =>{
+				return { state_name: m };
+			});
+		}
+        if(companyStore.company){
+			companyCity.value = companyStore.company.company_city.map(m =>{
+				return { city_name: m };
+			});
+		}
+        if(companyStore.company){
+			companyTruckType.value = companyStore.company.truck_type.map(m =>{
+				return { meta_value: m };
+			});
+		}
+    })
+    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,
+        truckTypes: companyTruckType,
+        description: companyStore.company?.company_description ?? '',
+    });
+
+    const handleSave = () => {
+
+    }
+
+</script>
+
+<template>
+   <div class="modal fade" id="editcompanymodal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+            <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">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form @submit.prevent="handleSave" class="view-form">
+                    <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+                    <div class="mb-4 mt-3">
+                        <label class="custom-label">Segmento de la empresa</label>
+                        <Segments
+                            v-model="company.segments" 
+                            :multiple="true"
+                        />
+                    </div>
+                    <div class="mb-4">
+                        <label class="custom-label">Ubicaciones de carga por estado</label>
+                        <States
+                            v-model="company.states"
+                            :multiple="true"
+                        />
+                    </div>
+                    <div class="mb-4">
+                        <label class="custom-label">Ubicaciones de carga por municipio</label>
+                        <Cities 
+                            v-model="company.cities"
+                            :multiple="true"
+                        />
+                    </div>
+                    <div class="mb-4">
+                        <label class="custom-label">Tipo de transportes que utiliza</label>
+                        <TruckTypes 
+                            v-model="company.truckTypes"
+                            :multiple="true"
+                        />
+                    </div>
+                    <Custominput
+                        label="Descripción de la empresa:"
+                        type="text"
+                        name="description"
+                        :filled="false"
+                        v-model:field="company.description"
+                    />
+
+                    <input type="submit" value="Cuardar cambios" class="btn-primary-lg btn-lg-block my-4">
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-dark" data-dismiss="modal">Cerrar</button>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    /* .modal-width{
+        width: 1500px !important;
+    } */
+
+    .view-form {
+        padding: 1rem 4rem;
+    }
+</style>