From 4bc44038c24384a92c8fd308ca857fd40103e3a0 Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Wed, 3 Apr 2024 19:58:25 -0600
Subject: [PATCH] add: form edit profile

---
 src/components/EditProfileModal.vue  |  97 ++++++++++++++++++++++
 src/components/MakeProposalModal.vue |   2 +-
 src/components/ProfilePopup.vue      |  82 +++++++++++++++++--
 src/layouts/AdminLayout.vue          |   1 +
 src/router/index.js                  |   5 ++
 src/stores/notifications.js          |   3 +-
 src/views/CompleteRegisterView.vue   |   2 +-
 src/views/EditProfileView.vue        | 117 +++++++++++++++++++++++++++
 src/views/TrackingLoadView.vue       |   2 +-
 9 files changed, 301 insertions(+), 10 deletions(-)
 create mode 100644 src/components/EditProfileModal.vue
 create mode 100644 src/views/EditProfileView.vue

diff --git a/src/components/EditProfileModal.vue b/src/components/EditProfileModal.vue
new file mode 100644
index 0000000..4e24440
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/MakeProposalModal.vue b/src/components/MakeProposalModal.vue
index 1005dad..9131293 100644
--- a/src/components/MakeProposalModal.vue
+++ b/src/components/MakeProposalModal.vue
@@ -30,7 +30,7 @@
         comments: '',
     });
 
-    const { geocodeAddress, getDirections } = useDirectionsRender()
+    const { getDirections } = useDirectionsRender()
 
     const props = defineProps({
         load: {
diff --git a/src/components/ProfilePopup.vue b/src/components/ProfilePopup.vue
index 5ec77dc..836db26 100644
--- a/src/components/ProfilePopup.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index b8433d2..5f439ff 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -3,6 +3,7 @@
     import NavBar from '../components/NavBar.vue';
     import Sidebar from '../components/Sidebar.vue';
     import ProfilePopup from '../components/ProfilePopup.vue';
+    import EditProfileModal from '../components/EditProfileModal.vue';
 
 </script>
 
diff --git a/src/router/index.js b/src/router/index.js
index 8711ed2..81046d1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -78,6 +78,11 @@ const router = createRouter({
           name: 'company',
           component: () => import('../views/MyCompanyView.vue'),
         },
+        {
+          path: 'profile',
+          name: 'profile',
+          component: () => import('../views/EditProfileView.vue'),
+        },
         {
           path: 'empresa/:id',
           name: 'public-users',
diff --git a/src/stores/notifications.js b/src/stores/notifications.js
index 4cf937f..6271c23 100644
--- a/src/stores/notifications.js
+++ b/src/stores/notifications.js
@@ -20,7 +20,6 @@ export const useNotificationsStore = defineStore('notifications', () => {
     });
 
     const toggleProfile = () => {
-        console.log('click');
         openProfile.value = !openProfile.value;
     }
 
@@ -30,6 +29,6 @@ export const useNotificationsStore = defineStore('notifications', () => {
         error,
         show,
         openProfile,
-        toggleProfile
+        toggleProfile,
     }
 });
\ No newline at end of file
diff --git a/src/views/CompleteRegisterView.vue b/src/views/CompleteRegisterView.vue
index ff29f99..6cdfebb 100644
--- a/src/views/CompleteRegisterView.vue
+++ b/src/views/CompleteRegisterView.vue
@@ -13,7 +13,7 @@
     import { useAuthStore } from '../stores/auth';
     import { complete_registry } from "../services/auth";
     import { updateMyUserProfile } from "../services/company"
-import Spiner from '../components/ui/Spiner.vue';
+    import Spiner from '../components/ui/Spiner.vue';
 
     const notifications = useNotificationsStore();
     const auth = useAuthStore();
diff --git a/src/views/EditProfileView.vue b/src/views/EditProfileView.vue
new file mode 100644
index 0000000..823cdd9
--- /dev/null
+++ b/src/views/EditProfileView.vue
@@ -0,0 +1,117 @@
+<script setup>
+    import { onMounted, reactive, ref } from 'vue';
+    import { useAuthStore } from '../stores/auth';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CustomInput from '../components/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="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"
+            />
+            <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>
+            <div class="mt-4 text-center">
+                <Spiner v-if="loading"/>
+                <button 
+                    v-else
+                    class="btn btn-dark" type="submit">Guardar</button>
+            </div> 
+        </form>
+    </div>
+           
+</template>
+
+<style scoped>
+    .form-content {
+        margin: 24px 100px;
+        background-color: #FFF;
+        padding: 32px 32px;
+        border-radius: 13px;
+    }
+
+    .content-phone{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        /* gap: 5rem; */
+    }
+
+    @media (max-width: 1024px) {
+        .form-content {
+            margin: 24px 16px;
+            background-color: #FFF;
+            padding: 32px 32px;
+            border-radius: 13px;
+        }
+    }
+
+    @media (max-width: 568px) {
+        .form-content {
+            margin: 24px 8px;
+            background-color: #FFF;
+            padding: 20px 20px;
+            border-radius: 13px;
+        }
+
+        .content-phone{
+            display: flex;
+            flex-direction: column;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/TrackingLoadView.vue b/src/views/TrackingLoadView.vue
index a595961..9768bfb 100644
--- a/src/views/TrackingLoadView.vue
+++ b/src/views/TrackingLoadView.vue
@@ -10,7 +10,7 @@
 
     const mapKey = import.meta.env.VITE_MAP_KEY;
 
-    const { geocodeAddress, getDirections } = useDirectionsRender()
+    const { getDirections } = useDirectionsRender()
     const { getLoadTracking, load, loading } = useTrackingLoad();
     const route = useRoute();
     const zoom = ref(6);