From e0a4cf4abb9a3bedc6bce99d5c4c8da055f2b63a Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Sat, 6 Apr 2024 14:48:13 -0600
Subject: [PATCH] add: update user profile done

---
 src/components/CardCompany.vue         |  18 +++-
 src/components/CreateUserModal.vue     |   8 --
 src/components/Sidebar.vue             |   2 +-
 src/components/ui/EditCompanyModal.vue |   6 +-
 src/stores/auth.js                     |  15 +++-
 src/stores/loads.js                    |   3 +-
 src/views/EditProfileView.vue          | 112 +++++++++++++++++--------
 src/views/LocationsView.vue            |   2 +-
 src/views/MyCompanyView.vue            |  16 ++--
 src/views/SearchLoadsView.vue          |   2 +-
 10 files changed, 120 insertions(+), 64 deletions(-)

diff --git a/src/components/CardCompany.vue b/src/components/CardCompany.vue
index edbe206..0b7173d 100644
--- a/src/components/CardCompany.vue
+++ b/src/components/CardCompany.vue
@@ -8,6 +8,16 @@
             required: true,
         }
     });
+
+
+    /*
+        - Ocultar el RFC y Afilizaicon de la empresa y en todos lados, incluso en la aplicación
+        - Editar ocultar el form de ubicicacion
+        - Form de directorio agregar un campo para tipo de ubicacion
+        - Agregar otro page para cambiar el correo y contraseña
+        - Quitar telefono 2, segmento y tipo de transporte en usuarios form
+        - Se va a cambiar el endpint para obtener las ubicaciones de usuarios form, vehiculo
+    */
 </script>
 
 <template>
@@ -16,14 +26,14 @@
         <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 || 'No definido' }}</p>
+                <!-- <p><span>RFC:</span> {{ company.rfc }}</p> -->
+                <!-- <p><span>Tipo de empresa:</span> {{ company.company_type || '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>
+                <p><span>Segmento empresa:</span> {{ company._categories }}</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>
diff --git a/src/components/CreateUserModal.vue b/src/components/CreateUserModal.vue
index 707856e..04c9c1d 100644
--- a/src/components/CreateUserModal.vue
+++ b/src/components/CreateUserModal.vue
@@ -209,14 +209,6 @@
 
                             :error="errors.phone"
                         />
-                        <CustomInput
-                            label="Teléfono 2"
-                            name="phone2"
-                            type="number"
-                            v-model:field="userForm.phone2"
-                            :step="1"
-                            :filled="false"
-                        />
                         <CustomInput
                             label="Correo electronico*"
                             name="email"
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index b60101f..338995a 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -66,7 +66,7 @@
                     <i class="fa-solid fa-location-dot" :class="[route.name === 'locations' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class=""
-                        class="nav-link" :to="{name: 'locations'}">Ubicaciones</RouterLink>
+                        class="nav-link" :to="{name: 'locations'}">Directorio interno</RouterLink>
                 </div>
             </li>
             <li 
diff --git a/src/components/ui/EditCompanyModal.vue b/src/components/ui/EditCompanyModal.vue
index 00dcb39..91e11c2 100644
--- a/src/components/ui/EditCompanyModal.vue
+++ b/src/components/ui/EditCompanyModal.vue
@@ -1,10 +1,8 @@
 <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';
@@ -123,7 +121,7 @@
                             :multiple="true"
                         />
                     </div>
-                    <div class="mb-4">
+                    <!-- <div class="mb-4">
                         <label class="custom-label">Ubicaciones de carga por estado</label>
                         <States
                             v-model="company.states"
@@ -136,7 +134,7 @@
                             v-model="company.cities"
                             :multiple="true"
                         />
-                    </div>
+                    </div> -->
                     <div class="mb-4">
                         <label class="custom-label">Tipo de transportes que utiliza</label>
                         <TruckTypes 
diff --git a/src/stores/auth.js b/src/stores/auth.js
index e746dab..70fcbef 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -6,6 +6,7 @@ import {useNotificationsStore} from './notifications';
 import {useCompanyStore} from './company';
 import { useLoadsStore } from "./loads";
 import { useVehiclesStore } from "./vehicles";
+import { updateMyUserProfile } from "../services/company";
 
 export const useAuthStore = defineStore('auth', () => {
     
@@ -56,6 +57,17 @@ export const useAuthStore = defineStore('auth', () => {
       });
     });
 
+    const updateProfile = async(data) => {
+        const response = await updateMyUserProfile(data);
+        console.log(response);
+        if( response !== null) {
+            user.value = response;
+            return response;
+        } else {
+            return null;
+        }
+    }
+
     const logout = () => {
         localStorage.removeItem('access');
         localStorage.removeItem('id');
@@ -82,6 +94,7 @@ export const useAuthStore = defineStore('auth', () => {
         checking,
         authStatus,
         checkSession,
-        authenticationPromise
+        authenticationPromise,
+        updateProfile
     }
 });
\ No newline at end of file
diff --git a/src/stores/loads.js b/src/stores/loads.js
index b7ee0cb..146b552 100644
--- a/src/stores/loads.js
+++ b/src/stores/loads.js
@@ -67,8 +67,9 @@ export const useLoadsStore = defineStore('load', () => {
     const getProposalsOfLoads = async(filterQuery) => {
         try {
             const endpoint = `/v1/proposals/find?load=${filterQuery}`;
+            console.log(endpoint)
             const {data} = await api.get(endpoint);
-            // console.log(data);
+            console.log(data);
             proposalsOfLoads.value = data.data;
         } catch (error) {
             proposalsOfLoads.value = [];
diff --git a/src/views/EditProfileView.vue b/src/views/EditProfileView.vue
index 06315c2..d3f7ed2 100644
--- a/src/views/EditProfileView.vue
+++ b/src/views/EditProfileView.vue
@@ -4,21 +4,20 @@
     import Spiner from '../components/ui/Spiner.vue';
     import CustomInput from '../components/ui/CustomInput.vue';
     import { storeToRefs } from 'pinia';
+    import NotificationBadge from '../components/ui/NotificationBadge.vue';
 
     const auth = useAuthStore();
 
     const { user } = storeToRefs(auth);
 
     const loading = ref(false)
+    const msgError = ref('');
+    const msgSuccess = ref('');
+
     const userForm = reactive({
         name: '',
         lastName: '',
         phone1: '',
-        phone2: '',
-        // name: auth.user?.first_name,  
-        // lastName: auth.user?.last_name,  
-        // phone1: auth.user?.phone,
-        // phone2: auth.user?.phone2,  
     })
 
     onMounted(() => {
@@ -37,53 +36,90 @@
         userForm.name = user.value?.first_name  
         userForm.lastName = user.value?.last_name  
         userForm.phone1 = user.value?.phone
-        userForm.phone2 = user.value?.phone2 
     }
 
-    const handleSave = () => {
-
+    const handleSave = async() => {
+        const error = validatiosUser();
+        if(error != '') {
+            msgError.value = error;
+            clearMessages();
+            return;
+        }
+        const userData = {
+            "first_name" : userForm.name,
+            "last_name" : userForm.lastName,
+            "phone" : userForm.phone1,
+        };
+        loading.value = true;
+        const result = await auth.updateProfile(userData)
+        loading.value = false;
+        if(result === null) {
+            msgError.value = 'Algo salio mal, intente más tarde';
+            clearMessages();
+        } else {
+            msgSuccess.value = 'Usuario actualizado';
+            clearMessages();
+        }
     }
+
+    const clearMessages = () => {
+        setTimeout(() => {
+            msgError.value = '';
+            msgSuccess.value = '';
+        }, 3000);
+   }
+
+
+   const validatiosUser = () => {
+        if(userForm.name.trim().length < 3) {
+            return 'Ingresa nombre(s) valido';
+        } else if(userForm.lastName.trim().length < 2) {
+            return 'Ingresa apellido(s) valido';
+        } else if(userForm.phone1.trim().length < 10) {
+            return 'Ingresa teléfono valido';
+        } else {
+            return '';
+        }
+   }
+
 </script>
 
 <template>
-    <!-- <div class="profile"> -->
-        <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef" class="form-content">
+    <div class="form-content">
+        <div class="box-btns">
+            <a class="btn-text" type="submit">Cambiar contraseña</a>
+            <a class="btn-text" type="submit">Cambiar correo</a>
+        </div>
+        <br/>
+        <div class="divider"></div>
+        <br/>
+        <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef">
+            <h3 class="title">Datos de usuario</h3>
+            <br/>
+            <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+            <NotificationBadge :msg="msgSuccess" v-if="msgSuccess != ''" :is-error="false"/>
             <CustomInput
-                label="Nombres(s):"
+                label="Nombres(s)*:"
                 type="text"
                 name="name"
                 :filled="false"
                 v-model:field="userForm.name"
             />
             <CustomInput
-                label="Apellidos(s):"
+                label="Apellidos(s)*:"
                 type="text"
                 name="lastname"
                 :filled="false"
                 v-model:field="userForm.lastName"
             />
-            <div class="content-phone">
-                <div class="phone">
-                    <CustomInput
-                        label="Teléfono 1: *"
-                        type="number"
-                        name="phone1"
-                        :step="1"
-                        :filled="false"
-                        v-model:field="userForm.phone1"
-                    />
-                </div>
-                <div class="phone">
-                    <CustomInput
-                        label="Teléfono 2:"
-                        type="number"
-                        name="phone2"
-                        :step="1"
-                        :filled="false"
-                        v-model:field="userForm.phone2"
-                    />
-                </div>
-            </div>
+            <CustomInput
+                label="Teléfono*:"
+                type="number"
+                name="phone1"
+                :step="1"
+                :filled="false"
+                v-model:field="userForm.phone1"
+            />
             <div class="mt-4 text-center">
                 <Spiner v-if="loading"/>
                 <button 
@@ -91,7 +127,7 @@
                     class="btn btn-dark btn-block" type="submit">Guardar</button>
             </div> 
         </form>
-    <!-- </div> -->
+    </div>
            
 </template>
 
@@ -99,7 +135,13 @@
     /* .profile {
         margin: 0 auto;
     } */
+    .box-btns {
+        display: flex;
+        justify-content: flex-end;
+        gap: 2rem;
+    }
     .form-content {
+        margin-top: 1rem;
         max-width: 768px;
         /* width: 768px; */
         margin: 0 auto;
diff --git a/src/views/LocationsView.vue b/src/views/LocationsView.vue
index e8b453a..2c88636 100644
--- a/src/views/LocationsView.vue
+++ b/src/views/LocationsView.vue
@@ -103,7 +103,7 @@
             :location="locationCurrent"
             @reset-location="handleResetCurrentBudget"
         />
-        <h2 class="title">Ubicaciones</h2>
+        <h2 class="title">Directorio interno</h2>
         <div class="box-filters">
             <div class="box-search">
                 <input class="form-control custom-search" type="search" name="" placeholder="Buscar por nombre de locación" id="" @:input="search()" v-model="query" aria-label="Search">
diff --git a/src/views/MyCompanyView.vue b/src/views/MyCompanyView.vue
index c9fbcff..af7db35 100644
--- a/src/views/MyCompanyView.vue
+++ b/src/views/MyCompanyView.vue
@@ -52,10 +52,10 @@ import { storeToRefs } from 'pinia';
                 <div class="divider mb-4"></div>
                 <div class="row">
                     <div class="col-sm-12 col-md-6 col-lg-6">
-                        <div class="item-company">
+                        <!-- <div class="item-company">
                             <span class="font-weight-bold">RFC: </span>
                             {{company.company?.rfc}}
-                        </div>
+                        </div> -->
                         <div class="item-company">
                             <span class="font-weight-bold">Tipo de empresa: </span>
                             {{getTypeCompany(company.company?.company_type)}}
@@ -68,16 +68,16 @@ import { storeToRefs } from 'pinia';
                             <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.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">Ubicación de carga por estado: </span>
                             {{company.company?.company_state.map((e) => e).join(', ')}}
diff --git a/src/views/SearchLoadsView.vue b/src/views/SearchLoadsView.vue
index bb297fb..8dae629 100644
--- a/src/views/SearchLoadsView.vue
+++ b/src/views/SearchLoadsView.vue
@@ -17,7 +17,7 @@
     const selectedCategory = ref([]);
     const selectedState = ref([]);
     const selectedCities = ref([]);
-    const limit = 1;
+    const limit = 10;
     const isSearch = ref(false);
     const { getLoadsPublished, loads, loading, currentPage, total } = useSearchLoads();