From 923b55b12c24662614d72c46f88ccfe300bd768f Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Tue, 2 Jan 2024 15:49:15 -0600
Subject: [PATCH] add: modal edit user

---
 src/components/CardUser.vue        |   5 +-
 src/components/CreateUserModal.vue | 216 +++++++++++++++++++++++++++++
 src/views/UsersView.vue            |  30 ++++
 3 files changed, 250 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CreateUserModal.vue

diff --git a/src/components/CardUser.vue b/src/components/CardUser.vue
index 981ee25..495f47e 100644
--- a/src/components/CardUser.vue
+++ b/src/components/CardUser.vue
@@ -15,6 +15,8 @@ import { getDateMonthDay } from '../helpers/date_formats';
         
     })
 
+    defineEmits(['set-user'])
+
     const handleDelete = () => {
         Swal.fire({
             title: 'Eliminación de usuario!',
@@ -84,7 +86,8 @@ import { getDateMonthDay } from '../helpers/date_formats';
             <button
                 class="btn-primary-sm radius-sm"
                 data-toggle="modal" 
-                data-target="#editcompanymodal"
+                data-target="#userModal"
+                @click="$emit('set-user')"
             ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
             <button
                 class="btn btn-dark radius-sm"
diff --git a/src/components/CreateUserModal.vue b/src/components/CreateUserModal.vue
new file mode 100644
index 0000000..5a50046
--- /dev/null
+++ b/src/components/CreateUserModal.vue
@@ -0,0 +1,216 @@
+<script setup>
+    import { computed, onMounted, reactive, ref } from 'vue';
+    import CustomInput from './ui/CustomInput.vue';
+    import TruckTypes from './ui/TruckTypes.vue';
+    import Segments from './ui/Segments.vue';
+    import States from './ui/States.vue';
+    import Cities from './ui/Cities.vue';
+    import Spiner from './ui/Spiner.vue';
+import { validateEmail } from '../helpers/validations';
+
+    const props = defineProps({
+        user: {
+            type: Object,
+            required: false
+        }
+    });
+
+    onMounted(() => {
+        if(props.user) {
+            console.log(props.user)
+            userForm.name = props.user.first_name;
+            userForm.last_name = props.user.last_name;
+            userForm.email = props.user.email;
+            userForm.phone = props.user.phone;
+            userForm.phone2 = props.user.phone2;
+            userForm.job_role = props.user.job_role;
+            userForm.categories = props.user.categories;
+            userForm.user_city = props.user.user_city.map(m =>{
+				return { city_name: m };
+			});
+            userForm.user_state = props.user.user_state.map(m =>{
+				return { state_name:m };
+			});
+            userForm.truck_type = props.user.truck_type.map(m =>{
+				return { meta_value:m };
+			});
+            userForm.user_description = props.user.user_description;
+        } else {
+            Object.assign(userForm, initState);
+        }
+    })
+
+    const initState = {
+        name: '',
+		last_name: '',
+		email: '',
+		phone: '',
+		phone2: '',
+		job_role: '',
+		categories: [],
+		user_city: [],
+		user_state: [],
+		truck_type: [],
+		user_description: '',
+    };
+
+    const userForm = reactive({
+        ...initState
+    })
+
+    const errors = ref({
+        name: null,
+        last_name: null,
+        email: null,
+        phone: null,
+    })
+
+    const formRef = ref(null);
+    const loading = ref(false);
+
+    const title = computed(() => {
+        return (props.user) ? 'Editar usuario' : 'Crear usuario';
+    });
+
+    defineEmits(['reset-user']);
+
+    const saveUser = () => {
+        validations()
+
+        console.log(errors);
+
+        if(errors.value.name || errors.value.last_name || errors.value.email || errors.value.phone){
+            console.log('Hay errores');
+            return;
+        } else {
+            console.log(userForm);
+        }
+    }
+
+    const validations = () => {
+        errors.value = {
+            name: userForm.name.length <= 4 ? 'Ingrese nombre' : null,
+            last_name: userForm.name.length <= 1 ? 'Ingrese apellido' : null,
+            email: !validateEmail(userForm.email) ? 'Ingrese email valido' : null,
+            phone: userForm.phone.length < 10 ? 'Ingrese numero teléfonico valido' : null,
+        };
+    }
+</script>
+
+<template>
+    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModal" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="title mt-2 mb-3">{{ title }}</h2>
+                    <button 
+                        id="btnCloseuserModal" 
+                        type="button" 
+                        @click="$emit('reset-user')"
+                        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="saveUser" autocomplete="off" method="post" ref="formRef">
+                        <CustomInput
+                            label="Nombre(s)*"
+                            name="name"
+                            v-model:field="userForm.name"
+                            :filled="false"
+                            :error="errors.name"
+                        />
+                        <CustomInput
+                            label="Apellido(s)*"
+                            name="lastname"
+                            :field="userForm.last_name"
+                            :filled="false"
+                            :error="errors.last_name"
+                        />
+                        <CustomInput
+                            label="Teléfono 1*"
+                            name="phone1"
+                            :field="userForm.phone"
+                            :filled="false"
+                            type="number"
+                            :error="errors.phone"
+                        />
+                        <CustomInput
+                            label="Teléfono 2"
+                            name="phone2"
+                            type="number"
+                            :field="userForm.phone2"
+                            :filled="false"
+                        />
+                        <CustomInput
+                            label="Correo electronico*"
+                            name="email"
+                            type="email"
+                            :field="userForm.email"
+                            :filled="false"
+                            :error="errors.email"
+                        />
+                        <div class="mb-4 mt-3">
+                            <label class="custom-label">Segmento</label>
+                            <Segments
+                                v-model="userForm.categories" 
+                            />
+                            <!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
+                        </div>
+                        <div class="mb-4 mt-3">
+                            <label class="custom-label">Tipo de transporte que utiliza</label>
+                            <TruckTypes
+                                v-model="userForm.truck_type" 
+                            />
+                            <!-- <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span> -->
+                        </div>
+                        <div class="mb-4 mt-3">
+                            <label class="custom-label">Locaciones de carga por estado</label>
+                            <States
+                                v-model="userForm.user_state" 
+                            />
+                            <!-- <span class="error-msg" v-if="submited && errors.stateDestination">{{ errors.stateDestination }}</span> -->
+                        </div>
+                        <div class="mb-4 mt-3">
+                            <label class="custom-label">Locaciones de carga por municipio</label>
+                            <Cities
+                                v-model="userForm.user_city" 
+                            />
+                            <!-- <span class="error-msg" v-if="submited && errors.cityDestination">{{ errors.cityDestination }}</span> -->
+                        </div>
+                        <div class="d-flex flex-column">
+                            <label class="custom-label" for="description">Información adicional del usuario:</label>
+                            <textarea 
+                                class="custom-input-light"
+                                name="description" 
+                                id="description" 
+                                placeholder="Escribe aqui..."
+                                v-model="userForm.user_description"
+                            ></textarea>
+                        </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>
+                <div class="modal-footer">
+                    <button 
+                        type="button" 
+                        class="btn btn-dark" 
+                        @click="$emit('reset-user')"
+                        data-dismiss="modal">Cerrar</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .form-content {
+        margin: 0 auto;
+        width: 80%;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
index fdda933..ca2dfea 100644
--- a/src/views/UsersView.vue
+++ b/src/views/UsersView.vue
@@ -3,6 +3,7 @@
     import Spiner from '../components/ui/Spiner.vue';
     import CardUser from '../components/CardUser.vue';
     import { useCompanyStore } from '../stores/company';
+    import CreateUserModal from '../components/CreateUserModal.vue';
 
     const companyStore = useCompanyStore();
 
@@ -10,6 +11,9 @@
         getInitData();
     });
 
+    const currentUser = ref(null);
+    const openModal = ref(false);
+
     const getInitData = async() => {
         console.log('callll')
         loading.value = true;
@@ -19,17 +23,43 @@
 
     const loading = ref(false);
 
+    const handleSetCurrentUser = (user) => {
+        openModal.value = true;
+        currentUser.value = user;
+    }
+
+    const handleResetCurrentUser = () => {
+        openModal.value = false;
+        currentUser.value = null;
+    }
+
 </script>
 
 <template>
+    <CreateUserModal
+        v-if="openModal === true"
+        :user="currentUser"
+        @reset-user="handleResetCurrentUser"
+    />
     <div>
         <h2 class="title mb-4">Usuarios</h2>
+        <div class="btn-row mb-4">
+            <button
+                class="btn-primary-sm"
+                data-toggle="modal" 
+                data-target="#userModal"
+                @click="handleSetCurrentUser(null)"
+            >
+                <i class="fa-solid fa-plus"></i> Agregar usuario
+            </button>
+        </div>
         <Spiner v-if="loading"/>
         <div v-else>
             <CardUser
                 v-for="user in companyStore.users"
                 :user="user"
                 :readonly="false"
+                @set-user="handleSetCurrentUser(user)"
             />
         </div>
     </div>