add: form edit profile

src/components/EditProfileModal.vue

@@ -0,0 +1,97 @@
+<script setup>
+    import { onMounted, reactive, ref } from 'vue';
+    import { useAuthStore } from '../stores/auth';
+    import Spiner from './ui/Spiner.vue';
+    import CustomInput from './ui/CustomInput.vue';
+
+    const auth = useAuthStore();
+
+    const loading = ref(false)
+    const user = reactive({
+        // name: '',
+        // lastName: '',
+        // phone1: '',
+        // phone2: '',
+        name: auth.user?.first_name,  
+        lastName: auth.user?.last_name,  
+        phone1: auth.user?.phone,
+        phone2: auth.user?.phone2,  
+    })
+
+    onMounted(() => {
+      user.name = auth.user?.first_name  
+      user.lastName = auth.user?.last_name  
+      user.phone1 = auth.user?.phone
+      user.phone2 = auth.user?.phone2  
+    })
+
+    const handleSave = () => {
+
+    }
+</script>
+
+<template>
+    <div class="modal fade" id="editProfileModal" tabindex="-1" role="dialog" aria-labelledby="editProfileModal" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="title mt-2 mb-3">Editar perfil</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-content">
+                    <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef">
+                        <CustomInput
+                            label="Nombres(s):"
+                            type="text"
+                            name="name"
+                            :filled="false"
+                            v-model:field="user.name"
+                        />
+                        <CustomInput
+                            label="Apellidos(s):"
+                            type="text"
+                            name="lastname"
+                            :filled="false"
+                            v-model:field="user.lastName"
+                        />
+                        <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="mt-4 text-center">
+                            <Spiner v-if="loading"/>
+                            <button 
+                                v-else
+                                class="btn btn-dark" type="submit">Guardar</button>
+                        </div> 
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .form-content {
+        margin: 24px 12px;
+    }
+</style>

src/components/MakeProposalModal.vue

@@ -30,7 +30,7 @@
         comments: '',
     });
 
-    const { geocodeAddress, getDirections } = useDirectionsRender()
+    const { getDirections } = useDirectionsRender()
 
     const props = defineProps({
         load: {

src/components/ProfilePopup.vue

@@ -1,18 +1,63 @@
 <script setup>
-import { useNotificationsStore } from '../stores/notifications';
+    import { useRouter } from 'vue-router';
+    import { useAuthStore } from '../stores/auth';
+    import { useNotificationsStore } from '../stores/notifications';
 
     const noty = useNotificationsStore();
+    const auth = useAuthStore();
+    const router = useRouter();
+
+    const closePopup = () => {
+        noty.toggleProfile()
+    }
+
+    const handleEditProfile = () => {
+        closePopup();
+        router.push({name: 'profile'})
+    }
 </script>
 
 <template>
-    <div 
+    <div
         v-if="noty.openProfile"
-        class="profile-card">
-        <p>Hola</p>
+    >
+        <div 
+            class="content-profile"
+            @click="closePopup()"
+        >
+        </div>
+        <div 
+            class="profile-card">
+            <i class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
+            <h3>{{auth.user?.first_name}} {{ auth.user?.last_name }}</h3>
+            <p>{{ auth.user?.email }}</p>
+            <p>{{ auth.user?.phone }}</p>
+            <br/>
+            <button 
+                class="btn btn-dark"
+                data-toggle="modal" 
+                data-target="#editProfileModal"
+                @click="handleEditProfile()"
+            >Editar perfil</button>
+        </div>
     </div>
 </template>
 
 <style scoped>
+
+    .content-profile {
+        position: fixed;
+        z-index: 1000;
+        width: 100wv;
+        right: 0px;
+        top: 0px;
+        left: 0px;
+        cursor: pointer;
+        bottom: 0px;
+        background-color: #000;
+        opacity: 0.2;
+    }
+
     .profile-card {
         position: fixed;
         right: 20px;
@@ -20,9 +65,36 @@ import { useNotificationsStore } from '../stores/notifications';
         z-index: 2000;
         width: 320px;
         background-color: #FFF;
+        opacity: 1;
         border-radius: 13px;
-        height: 400px;
+        padding: 20px 32px;
         display: flex;
         flex-direction: column;
+        /* flex-wrap: nowrap; */
+        /* overflow: hidden; */
+        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
+    }
+
+    .profile-card h3 {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-size: 1.2rem;
+        font-weight: 700;
+    }
+
+    .profile-card p {
+        margin-top: 8px;
+        font-size: 1rem;
+        font-weight: 500;
+        text-overflow: ellipsis;
+    }
+
+    .close-icon {
+        display: flex;
+        position: absolute;
+        right: 20px;
+        top: 16px;
+        cursor: pointer;
+        font-size: 24px;
     }
 </style>