From 84f71b98d1eca25832ad3c626e0d04035c838d9a Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Thu, 4 Apr 2024 21:02:32 -0600
Subject: [PATCH] mod: navbar & editProfile

---
 src/components/CardVehicle.vue |  2 +-
 src/components/NavBar.vue      |  8 +--
 src/components/Sidebar.vue     |  2 +-
 src/views/EditProfileView.vue  | 89 +++++++++++++++++++++++-----------
 src/views/HomeView.vue         |  2 +-
 5 files changed, 68 insertions(+), 35 deletions(-)

diff --git a/src/components/CardVehicle.vue b/src/components/CardVehicle.vue
index 7a24865..b5f13bd 100644
--- a/src/components/CardVehicle.vue
+++ b/src/components/CardVehicle.vue
@@ -62,7 +62,7 @@ import { useAuthStore } from '../stores/auth';
     <div class="card-fixed card-vehicle">
         <div class="row my-2">
             <div class="col-lg-6">
-                <p>Código: <span>{{ vehicle.vehicle_code }}</span></p>
+                <p>Código: <span>{{ vehicle?.vehicle_code }}</span></p>
                 <p>Tipo de transporte: <span>{{ vehicle.truck_type }}</span></p>
                 <p>Número de Serie: <span>{{ vehicle.vehicle_number }}</span></p>
                 <p>Segmento: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 71f8532..bb38ab8 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -24,19 +24,19 @@ import { useNotificationsStore } from '../stores/notifications';
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_shipper'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> Transportistas</RouterLink>
+                        class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> <span class="clear-xsm">Transportistas</span></RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_carrier'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> Cargas</RouterLink>
+                        class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">Cargas</span></RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_carrier'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> Embarcadores</RouterLink>
+                        class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">Embarcadores</span></RouterLink>
                     <a 
                         active-class="router-link-active"
                         @click="noty.toggleProfile"
-                        class="nav-link"><i class="fa-solid fa-user me-1"></i> {{ auth?.user?.first_name }}</a>
+                        class="nav-link"><i class="fa-solid fa-user me-1"></i> <span class="clear-xsm">{{ auth?.user?.first_name }}</span></a>
                 </div>
             </div>
     </nav>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 798c78e..b60101f 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -195,7 +195,7 @@
     }
 
     .company-name {
-        font-size: 2rem;
+        font-size: 1.5rem;
         font-weight: 900;
     }
 
diff --git a/src/views/EditProfileView.vue b/src/views/EditProfileView.vue
index 2959db5..06315c2 100644
--- a/src/views/EditProfileView.vue
+++ b/src/views/EditProfileView.vue
@@ -1,13 +1,16 @@
 <script setup>
-    import { onMounted, reactive, ref } from 'vue';
+    import { onMounted, reactive, ref, watch } from 'vue';
     import { useAuthStore } from '../stores/auth';
     import Spiner from '../components/ui/Spiner.vue';
     import CustomInput from '../components/ui/CustomInput.vue';
+    import { storeToRefs } from 'pinia';
 
     const auth = useAuthStore();
 
+    const { user } = storeToRefs(auth);
+
     const loading = ref(false)
-    const user = reactive({
+    const userForm = reactive({
         name: '',
         lastName: '',
         phone1: '',
@@ -19,60 +22,76 @@
     })
 
     onMounted(() => {
-      user.name = auth.user?.first_name  
-      user.lastName = auth.user?.last_name  
-      user.phone1 = auth.user?.phone
-      user.phone2 = auth.user?.phone2  
+      if(user.value) {
+        getData()
+      }
     })
 
+    watch(user, async() => {
+        if(user.value) {
+            getData()
+        } 
+    });
+
+    const getData = () => {
+        userForm.name = user.value?.first_name  
+        userForm.lastName = user.value?.last_name  
+        userForm.phone1 = user.value?.phone
+        userForm.phone2 = user.value?.phone2 
+    }
+
     const handleSave = () => {
 
     }
 </script>
 
 <template>
-    <div class="profile">
+    <!-- <div class="profile"> -->
         <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef" class="form-content">
             <CustomInput
                 label="Nombres(s):"
                 type="text"
                 name="name"
                 :filled="false"
-                v-model:field="user.name"
+                v-model:field="userForm.name"
             />
             <CustomInput
                 label="Apellidos(s):"
                 type="text"
                 name="lastname"
                 :filled="false"
-                v-model:field="user.lastName"
+                v-model:field="userForm.lastName"
             />
             <div class="content-phone">
-                <CustomInput
-                    label="Teléfono 1: *"
-                    type="number"
-                    name="phone1"
-                    :step="1"
-                    :filled="false"
-                    v-model:field="user.phone1"
-                />
-                <CustomInput
-                    label="Teléfono 2:"
-                    type="number"
-                    name="phone2"
-                    :step="1"
-                    :filled="false"
-                    v-model:field="user.phone2"
-                />
+                <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>
             <div class="mt-4 text-center">
                 <Spiner v-if="loading"/>
                 <button 
                     v-else
-                    class="btn btn-dark" type="submit">Guardar</button>
+                    class="btn btn-dark btn-block" type="submit">Guardar</button>
             </div> 
         </form>
-    </div>
+    <!-- </div> -->
            
 </template>
 
@@ -81,7 +100,8 @@
         margin: 0 auto;
     } */
     .form-content {
-        max-width: 1024px;
+        max-width: 768px;
+        /* width: 768px; */
         margin: 0 auto;
         background-color: #FFF;
         padding: 32px 32px;
@@ -89,12 +109,21 @@
     }
 
     .content-phone{
+        width: 100%;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         /* gap: 5rem; */
     }
 
+    .phone {
+        width: 45%;
+    }
+
+    .btn-block {
+        width: 80%;
+    }
+
     @media (max-width: 1024px) {
         .form-content {
             margin: 24px 16px;
@@ -112,6 +141,10 @@
             border-radius: 13px;
         }
 
+        .phone {
+            width: 100%;
+        }
+
         .content-phone{
             display: flex;
             flex-direction: column;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index fa31145..00f359e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -12,7 +12,7 @@
 
 
   const auth = useAuthStore();
-  const { checking, user } = storeToRefs(auth);
+  const { user } = storeToRefs(auth);
   const loads = useLoadsStore();
   const loading = ref(false);
   const loadsData = ref([]);