delete user company

src/components/CardUser.vue

@@ -1,8 +1,9 @@
 <script setup>
-import Swal from 'sweetalert2';
+    import Swal from 'sweetalert2';
-import { getDateMonthDay } from '../helpers/date_formats';
+    import { getDateMonthDay } from '../helpers/date_formats';
+    import { useCompanyStore } from '../stores/company';
 
-    defineProps({
+    const props = defineProps({
         user: {
             type: Object,
             required: true
@@ -17,7 +18,9 @@ import { getDateMonthDay } from '../helpers/date_formats';
 
     defineEmits(['set-user'])
 
-    const handleDelete = () => {
+    const companyStore = useCompanyStore();
+
+    const handleDelete = async() => {
         Swal.fire({
             title: 'Eliminación de usuario!',
             text: '¿Estás seguro de eliminar este usuario?',
@@ -36,25 +39,23 @@ import { getDateMonthDay } from '../helpers/date_formats';
                         Swal.showLoading()
                     },
                 });
-                let resp = 'success';
+                const resp = await companyStore.deleteUserCompany(props.user._id)
 
-                setTimeout(() => {
+                Swal.close()
-                    Swal.close()
+
-                    if(resp !== null) {
+                if(resp === 'success') {
-                        Swal.fire({
+                    Swal.fire({
-                            title: "Usuario eliminado!",
+                        title: "Usuario eliminado!",
-                            text: "El usuario ha sido eliminado exitosamente.",
+                        text: "El usuario ha sido eliminado exitosamente.",
-                            icon: "success"
+                        icon: "success"
-                        });
+                    });
-                    } else {
+                } else {
-                        Swal.fire({
+                    Swal.fire({
-                            title: "No eliminado!",
+                        title: "No eliminado!",
-                            text: "El usuario no se pudo eliminar, intente más tarde.",
+                        text: "El usuario no se pudo eliminar, intente más tarde.",
-                            icon: "error"
+                        icon: "error"
-                        });
+                    });
-                    }
+                }
-                }, 5000)
-                // const resp = await companyStore.deleteBudgetCompany(props.budget._id);
             }
 
         });
@@ -71,14 +72,24 @@ import { getDateMonthDay } from '../helpers/date_formats';
                 <p><span>Teléfono 2: </span>{{user.phone2}}</p>
                 <p><span>Email: </span>{{user.email}}</p>
             </div>
-            <div class="col-lg-6 col-sm-12">
+            <div class="col-lg-6 col-sm-12" v-if="readonly">
-                <p><span>Segmento: </span>{{user._categories}}</p>
+                <p><span>Segmento: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
                 <p><span>Locaciones de carga por municipio: </span>{{user._user_city}}</p>
                 <p><span>Locaciones de carga por estado: </span>{{user._user_state}}</p>
-                <p v-if="user.company.truck_type"><span>Tipos de transporte que utiliza: </span> {{user._truck_types}}</p>
+                <p v-if="user.company.truck_type"><span>Tipos de transporte que utiliza: </span> {{user._truck_type}}</p>
                 <p ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
-                <p><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
+                <p ><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
-                <p ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
+                <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
+                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
+            </div>
+            <div class="col-lg-6 col-sm-12" v-else>
+                <p><span>Segmento: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
+                <p><span>Locaciones de carga por municipio: </span>{{user.user_city?.join(', ')}}</p>
+                <p><span>Locaciones de carga por estado: </span>{{user.user_state?.join(', ')}}</p>
+                <p v-if="user.truck_type"><span>Tipos de transporte que utiliza: </span> {{user.truck_type?.join(', ')}}</p>
+                <p ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
+                <p ><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
+                <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
                 <p><span>Rol del usuario: </span>{{user.job_role}}</p>
             </div>
         </div>

src/components/CreateUserModal.vue

@@ -6,7 +6,10 @@
     import States from './ui/States.vue';
     import Cities from './ui/Cities.vue';
     import Spiner from './ui/Spiner.vue';
-import { validateEmail } from '../helpers/validations';
+    import { validateEmail } from '../helpers/validations';
+    import { useAuthStore } from '../stores/auth';
+    import { useCompanyStore } from '../stores/company';
+import Swal from 'sweetalert2';
 
     const props = defineProps({
         user: {
@@ -40,6 +43,9 @@ import { validateEmail } from '../helpers/validations';
         }
     })
 
+    const authStore = useAuthStore();
+    const companyStore = useCompanyStore();
+
     const initState = {
         name: '',
 		last_name: '',
@@ -74,23 +80,64 @@ import { validateEmail } from '../helpers/validations';
 
     defineEmits(['reset-user']);
 
-    const saveUser = () => {
+    const saveUser = async() => {
         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);
+            let userData ={
+				first_name: userForm.name,
+				last_name: userForm.last_name,
+				email: userForm.email,
+				phone: userForm.phone,
+				phone2: userForm.phone2,
+				job_role: userForm.job_role,
+				permissions: authStore.user.permissions,
+				company: authStore.user.company,
+				categories: userForm.categories.length <= 0 ? null : userForm.categories?.map((e) => e._id),
+				user_city: userForm.user_city.length <= 0 ? null : userForm.user_city?.map((e) => e.city_name),
+				user_state: userForm.user_state.length <= 0 ? null : userForm.user_state?.map((e) => e.state_name),
+				truck_type: userForm.truck_type.length <= 0 ? null : userForm.truck_type?.map((e) => e.meta_value),
+				user_description: userForm.user_description
+			}
+
+            const dataUpdate = {
+                categories: userForm.categories,
+                name: userForm.name + ' ' + userForm.last_name
+            }
+
+            let result = 'error';
+            let action = 'Creado';
+            loading.value = true;
+            if(props.user !== null) {
+                // Se actualiza
+                result = await companyStore.updateUserCompany(props.user._id, userData, dataUpdate);
+                action = 'actualizado';
+            } else {
+                // Se crea
+                result = await companyStore.createUserCompany(userData, dataUpdate);
+                action = 'creado';
+            }
+            loading.value = false;
+            if(result === 'success') {
+                document.getElementById('btnCloseuserModal').click();
+                Swal.fire({
+                    title: `<strong>Usuario ${action} con éxito!</strong>`,
+                    icon: 'success'
+                })
+            } else {
+                Swal.fire({
+                    title: result,
+                    icon: 'error'
+                })
+            }
         }
     }
 
     const validations = () => {
         errors.value = {
-            name: userForm.name.length <= 4 ? 'Ingrese nombre' : null,
+            name: userForm.name.length < 4 ? 'Ingrese nombre' : null,
-            last_name: userForm.name.length <= 1 ? 'Ingrese apellido' : null,
+            last_name: userForm.last_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,
         };
@@ -123,37 +170,52 @@ import { validateEmail } from '../helpers/validations';
                         <CustomInput
                             label="Apellido(s)*"
                             name="lastname"
-                            :field="userForm.last_name"
+                            v-model:field="userForm.last_name"
                             :filled="false"
                             :error="errors.last_name"
                         />
                         <CustomInput
                             label="Teléfono 1*"
                             name="phone1"
-                            :field="userForm.phone"
-                            :filled="false"
                             type="number"
+                            v-model:field="userForm.phone"
+                            :filled="false"
                             :error="errors.phone"
                         />
                         <CustomInput
                             label="Teléfono 2"
                             name="phone2"
                             type="number"
-                            :field="userForm.phone2"
+                            v-model:field="userForm.phone2"
                             :filled="false"
                         />
                         <CustomInput
                             label="Correo electronico*"
                             name="email"
                             type="email"
-                            :field="userForm.email"
+                            v-model:field="userForm.email"
                             :filled="false"
                             :error="errors.email"
                         />
+                        <div class="d-flex flex-column">
+                            <label class="custom-label" for="role">Rol de usuario:</label>
+                            <select 
+                                class="custom-input-light"
+                                name="role" 
+                                id="role" 
+                                v-model="userForm.job_role"
+                            >
+                                <option disabled value="">-- Seleccionar rol --</option>
+                                <option value="Owner">Dueño</option>
+                                <option value="Manager">Gerente</option>
+                                <option value="Driver">Conductor</option>
+                            </select>
+                        </div>
                         <div class="mb-4 mt-3">
                             <label class="custom-label">Segmento</label>
                             <Segments
                                 v-model="userForm.categories" 
+                                :multiple="true"
                             />
                             <!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
                         </div>
@@ -161,6 +223,7 @@ import { validateEmail } from '../helpers/validations';
                             <label class="custom-label">Tipo de transporte que utiliza</label>
                             <TruckTypes
                                 v-model="userForm.truck_type" 
+                                :multiple="true"
                             />
                             <!-- <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span> -->
                         </div>
@@ -168,6 +231,7 @@ import { validateEmail } from '../helpers/validations';
                             <label class="custom-label">Locaciones de carga por estado</label>
                             <States
                                 v-model="userForm.user_state" 
+                                :multiple="true"
                             />
                             <!-- <span class="error-msg" v-if="submited && errors.stateDestination">{{ errors.stateDestination }}</span> -->
                         </div>
@@ -175,6 +239,7 @@ import { validateEmail } from '../helpers/validations';
                             <label class="custom-label">Locaciones de carga por municipio</label>
                             <Cities
                                 v-model="userForm.user_city" 
+                                :multiple="true"
                             />
                             <!-- <span class="error-msg" v-if="submited && errors.cityDestination">{{ errors.cityDestination }}</span> -->
                         </div>

src/services/company.js

@@ -27,7 +27,39 @@ export const getUsers = async(companyId) => {
     try {
         const endpoint = `/users?company=${companyId}`;
         const {data} = await api.get(endpoint);
-        console.log(data);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
+export const createUser = async(formData) => {
+    try {
+        const endpoint = `/users`;
+        const {data} = await api.post(endpoint, formData);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
+export const updateUser = async(user_id, formData) => {
+    try {
+        const endpoint = `/users/${user_id}`;
+        const {data} = await api.patch(endpoint, formData);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
+export const deleteUser = async(user_id) => {
+    try {
+        const endpoint = `/users/${user_id}`;
+        const {data} = await api.delete(endpoint);
         return data;
     } catch (error) {
         console.log(error);

src/services/public.js

@@ -78,6 +78,7 @@ export const getPublicUsersCompany = async(filter) => {
         const endpoint = `/v1/public-companies/users/${filter}`;
         // console.log({endpoint});
         const {data} = await api.get(endpoint);
+        console.log(data.data)
         // console.log(data);
         return data.data;
     } catch (error) {

src/stores/company.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { getBudgets,  getCompany, updateBudget, updateCompany, deleteBudget, createBudget, getUsers } from "../services/company";
+import { getBudgets,  getCompany, updateBudget, updateCompany, deleteBudget, createBudget, getUsers, updateUser, createUser, deleteUser } from "../services/company";
 import api from "../lib/axios";
 
 export const useCompanyStore = defineStore('company', () => {
@@ -20,6 +20,7 @@ export const useCompanyStore = defineStore('company', () => {
             console.log(resp);
             company.value = resp;
         }
+        console.log(company.value);
         loading.value = false;
     }
 
@@ -36,6 +37,46 @@ export const useCompanyStore = defineStore('company', () => {
         }
     }
 
+
+    const createUserCompany = async(formData, localData) => {
+        const data = await createUser(formData);
+        if(data) {
+            users.value.push({
+                ...data,
+                ...localData
+            });
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
+    const updateUserCompany = async(id, formData, localData) => {
+        const data = await updateUser(id, formData);
+        if(data) {
+            const index = users.value.findIndex((user) => user._id === id);
+            users.value[index] = {
+                ...users.value[index],
+                ...data,
+                ...localData
+            };
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
+    const deleteUserCompany = async(id) => {
+        const data = await deleteUser(id);
+        if(data) {
+            users.value = users.value.filter(user => user._id !== id);
+
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
     const editCompany = async(formData) => {
         const data = await updateCompany(company.value._id, formData);
         if(data === null) {
@@ -52,6 +93,9 @@ export const useCompanyStore = defineStore('company', () => {
 
     const clear = () => {
         company.value = null;
+        users.value = [];
+        budgets.value = [];
+        proposals.value = [];
         // companyid = null;
         loading.value = false;
     }
@@ -158,6 +202,9 @@ export const useCompanyStore = defineStore('company', () => {
        getProposalsCompany,
        getBudgetsCompany,
        getUsersCompany,
+       createUserCompany,
+       updateUserCompany,
+       deleteUserCompany,
        editCompany,
        updateBudgetCompany,
        createBudgetCompany,