add: view users of company

src/assets/main.css

@@ -176,6 +176,14 @@ td {
     border: none;
 }
 
+.btn-row {
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    gap: 1rem;
+}
+
 @media (max-width: 1024px) {
     th {
       font-size: 13px;

src/components/CardUser.vue

@@ -0,0 +1,119 @@
+<script setup>
+import Swal from 'sweetalert2';
+import { getDateMonthDay } from '../helpers/date_formats';
+
+    defineProps({
+        user: {
+            type: Object,
+            required: true
+        },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+        
+    })
+
+    const handleDelete = () => {
+        Swal.fire({
+            title: 'Eliminación de usuario!',
+            text: '¿Estás seguro de eliminar este usuario?',
+            icon: 'warning',
+            showCancelButton: true,
+            cancelButtonColor: "#d33",
+            confirmButtonText: 'Eliminar',
+            cancelButtonText: 'Cancelar',
+        }).then(async(result) => {
+            if(result.isConfirmed) {
+                Swal.fire({
+                    title: 'Por favor espere!',
+                    html: 'Elimininando usuario...',// add html attribute if you want or remove
+                    allowOutsideClick: false,
+                    didOpen: () => {
+                        Swal.showLoading()
+                    },
+                });
+                let resp = 'success';
+
+                setTimeout(() => {
+                    Swal.close()
+                    if(resp !== null) {
+                        Swal.fire({
+                            title: "Usuario eliminado!",
+                            text: "El usuario ha sido eliminado exitosamente.",
+                            icon: "success"
+                        });
+                    } else {
+                        Swal.fire({
+                            title: "No eliminado!",
+                            text: "El usuario no se pudo eliminar, intente más tarde.",
+                            icon: "error"
+                        });
+                    }
+                }, 5000)
+                // const resp = await companyStore.deleteBudgetCompany(props.budget._id);
+            }
+
+        });
+    }
+</script>
+
+<template>
+    <div class="card-fixed flex-column">
+        <div class="row">
+            <div class="col-lg-6 col-sm-12">
+                <p><span>Nombre de usuario:</span> {{user.name}}</p>
+                <p v-if="user.employee_id"><span class="font-weight-bold mr-1">Número de registro:</span> {{user.employee_id}}</p>
+                <p><span>Teléfono 1: </span>{{user.phone}}</p>
+                <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">
+                <p><span>Segmento: </span>{{user._categories}}</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 ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
+                <p><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
+                <p ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
+                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
+            </div>
+        </div>
+        <div class="btn-row" v-if="readonly === false">
+            <button
+                class="btn-primary-sm radius-sm"
+                data-toggle="modal" 
+                data-target="#editcompanymodal"
+            ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
+            <button
+                class="btn btn-dark radius-sm"
+                @click="handleDelete"
+            ><i class="fa-solid fa-trash"></i> Eliminar</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+     p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+    }
+    
+    p span {
+        font-weight: 700;
+    }
+
+    @media (max-width: 768px) {
+
+        p {
+            font-size: 0.9rem;
+            font-weight: 400;
+            color: #323032;
+        }
+        p span {
+            font-weight: 700;
+        }
+    }
+</style>

src/components/Sidebar.vue

@@ -7,13 +7,14 @@
     const auth = useAuthStore();
 
    const handleLogout = () => {
-        auth.$patch({
+        // auth.$patch({
-            sesion: '',
+        //     sesion: '',
-            token: '',
+        //     token: '',
-            user: {},
+        //     user: {},
-        });
+        // });
-        localStorage.removeItem('session');
+        // localStorage.removeItem('session');
-        router.push({name: 'login'});
+        // router.push({name: 'login'});
+        auth.logout();
    }
 </script>
 

src/components/ui/EditCompanyModal.vue

@@ -17,19 +17,13 @@
 
     const loading = ref(false);
     const msgError = ref('');
-    const msgSuccess = ref('');
     const companyCategories = ref([]);
     const companyStates = ref([]);
     const companyCity = ref([]);
     const companyTruckType = ref([]);
 
     onMounted(() => {
-        console.log('EditCompanyModal');
-        console.log(companyStore.company)
         if(companyStore.company){
-			// companyCategories.value = companyStore.company.categories.map(m =>{
-			// 	return { name: m.name };
-			// });
 			companyCategories.value = companyStore.company.categories;
 		}
         if(companyStore.company){

src/services/company.js

@@ -15,8 +15,18 @@ export const getCompany = async(companyId) => {
 export const updateCompany = async(companyId, formData) => {
     try {
         const endpoint = `/companies/${companyId}`;
-        console.log(endpoint);
         const {data} = await api.patch(endpoint, formData);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
+export const getUsers = async(companyId) => {
+    try {
+        const endpoint = `/users?company=${companyId}`;
+        const {data} = await api.get(endpoint);
         console.log(data);
         return data;
     } catch (error) {
@@ -29,7 +39,7 @@ export const getBudgets = async(filter) => {
     try {
         const endpoint = `/budgets/${filter}`;
         const {data} = await api.get(endpoint);
-        console.log(data);
+        // console.log(data);
         return data;
     } catch (error) {
         console.log(error);

src/stores/auth.js

@@ -52,15 +52,16 @@ export const useAuthStore = defineStore('auth', () => {
     });
 
     const logout = () => {
-        
+        console.log('logoo....');
-        localStorage.removeItem('session');
-        localStorage.removeItem('access');
-        localStorage.removeItem('id');
-        company.clear();
-        router.push({name: 'login'});
         sesion.value = '';
         token.value = '';
+        company.clear();
         user.value = null;
+        console.log(company.company);
+        localStorage.removeItem('access');
+        localStorage.removeItem('id');
+        localStorage.removeItem('session');
+        router.push({name: 'login'});
     }
 
     return {

src/stores/company.js

@@ -1,27 +1,41 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { getBudgets,  getCompany, updateBudget, updateCompany, deleteBudget, createBudget } from "../services/company";
+import { getBudgets,  getCompany, updateBudget, updateCompany, deleteBudget, createBudget, getUsers } from "../services/company";
 import api from "../lib/axios";
 
 export const useCompanyStore = defineStore('company', () => {
 
-    const companyid = localStorage.getItem('id');
     const company = ref(null)
+    const users = ref([]);
     const budgets = ref([]);
     const proposals = ref([])
     const loading = ref(false);
 
     const getCompanyData = async() => {
+        const companyId = localStorage.getItem('id');
         loading.value = true;
         if(!company.value) {
             loading.value = true;
-            const resp = await getCompany(companyid);
+            const resp = await getCompany(companyId);
             console.log(resp);
             company.value = resp;
         }
         loading.value = false;
     }
 
+    const getUsersCompany = async() => {
+        const companyId = localStorage.getItem('id');
+        if(users.value.length <= 0) {
+            const resp = await getUsers(companyId);
+            console.log(resp);
+            if(resp !== null && resp.total > 0) {
+                users.value = resp.data;
+            } else {
+                users.value = [];
+            }
+        }
+    }
+
     const editCompany = async(formData) => {
         const data = await updateCompany(company.value._id, formData);
         if(data === null) {
@@ -32,14 +46,19 @@ export const useCompanyStore = defineStore('company', () => {
                 ...formData,
             };
 
-            console.log(company.value);
             return 'success';
         }
     }
 
     const clear = () => {
         company.value = null;
-        companyid = null;
+        // companyid = null;
+        loading.value = false;
+    }
+
+    const $reset = () => {
+        company.value = null;
+        // companyid = null;
         loading.value = false;
     }
 
@@ -47,8 +66,9 @@ export const useCompanyStore = defineStore('company', () => {
     ///loads?company=64fa70c130d2650011ac4f3a&status[$ne]=Closed,posted_by_name[$regex]=ju&posted_by_name[$options]=i
 
     const getProposalsCompany = async() => {
+        const companyId = localStorage.getItem('id');
         try {
-            const endpoint = `/proposals?carrier=${companyid}`;
+            const endpoint = `/proposals?carrier=${companyId}`;
             const {data} = await api.get(endpoint);
             proposals.value = data.data;
             console.log(data);
@@ -137,12 +157,15 @@ export const useCompanyStore = defineStore('company', () => {
        getCompanyData,
        getProposalsCompany,
        getBudgetsCompany,
+       getUsersCompany,
        editCompany,
        updateBudgetCompany,
        createBudgetCompany,
        deleteBudgetCompany,
        budgets,
+       users,
        clear,
+       $reset,
        loading,
        proposals,
        company,

src/views/LoginView.vue

@@ -42,6 +42,7 @@
                     localStorage.setItem('session', resp.data.session_token);
                     localStorage.setItem('access', resp.data.accessToken);
                     localStorage.setItem('id', resp.data.user.company);
+                    console.log('id', resp.data.user.company)
                     router.push({name: 'home'});
                     auth.$patch({
                         sesion: resp.data.session_token,

src/views/MyCompanyView.vue

@@ -106,7 +106,7 @@
     }
 
     .item-company {
-        margin-bottom: 8px;
+        margin-bottom: 1rem;
         font-size: 1.2rem;
         color: #323030;
         /* font-weight: bold; */

src/views/PublicUsersCompanyView.vue

@@ -2,8 +2,8 @@
     import { onMounted, ref } from 'vue';
     import Spiner from '../components/ui/Spiner.vue';
     import { useRoute } from 'vue-router';
-    import { getDateMonthDay } from '../helpers/date_formats';
     import useDirectory from '../composables/useDirectory';
+    import CardUser from '../components/CardUser.vue';
 
     const {loading, users, getUsersData} = useDirectory();
 
@@ -26,51 +26,14 @@
             <img src="/images/logo.png" alt="logo" width="100">
             <h2 class="title">No hay registros</h2>
         </div>
-        <div class="card-fixed flex-column" v-for="user in users">
+        <CardUser
-            <div class="row">
+            v-for="user in users"
-                <div class="col-lg-6 col-sm-12">
+            :user="user"
-                    <p><span>Nombre de usuario:</span> {{user.name}}</p>
+            :readonly="true"
-                    <p v-if="user.employee_id"><span class="font-weight-bold mr-1">Número de registro:</span> {{user.employee_id}}</p>
+        />
-                    <p><span>Teléfono 1: </span>{{user.phone}}</p>
-                    <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">
-                    <p><span>Segmento: </span>{{user._categories}}</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 ><span>Información adicional del embarcador: </span> {{user.user_description}}</p>
-                    <p><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
-                    <p ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
-                    <p><span>Rol del usuario: </span>{{user.job_role}}</p>
-                </div>
-            </div>
-        </div>
     </div>
 </template>
 
 <style scoped>
 
-    p {
-        font-size: 1rem;
-        font-weight: 400;
-        color: #323032;
-    }
-    
-    p span {
-        font-weight: 700;
-    }
-
-    @media (max-width: 768px) {
-
-        p {
-            font-size: 0.9rem;
-            font-weight: 400;
-            color: #323032;
-        }
-        p span {
-            font-weight: 700;
-        }
-    }
 </style>

src/views/UsersView.vue

@@ -1,10 +1,37 @@
 <script setup>
+    import { onMounted, ref } from 'vue';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardUser from '../components/CardUser.vue';
+    import { useCompanyStore } from '../stores/company';
+
+    const companyStore = useCompanyStore();
+
+    onMounted(() => {
+        getInitData();
+    });
+
+    const getInitData = async() => {
+        console.log('callll')
+        loading.value = true;
+        await companyStore.getUsersCompany();
+        loading.value = false;
+    }
+
+    const loading = ref(false);
 
 </script>
 
 <template>
     <div>
-        <h2 class="title">Usuarios</h2>
+        <h2 class="title mb-4">Usuarios</h2>
+        <Spiner v-if="loading"/>
+        <div v-else>
+            <CardUser
+                v-for="user in companyStore.users"
+                :user="user"
+                :readonly="false"
+            />
+        </div>
     </div>
 </template>