mod: navbar & editProfile

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;

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([]);