add: view users of company

2023-12-30 18:04:42 -06:00
parent 25528cae8f
commit b5f6191874
11 changed files with 219 additions and 72 deletions
--- a/src/assets/main.css
+++ b/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;
--- a/src/components/CardUser.vue
+++ b/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>
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -7,13 +7,14 @@
    const auth = useAuthStore();

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

--- a/src/components/ui/EditCompanyModal.vue
+++ b/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){
--- a/src/services/company.js
+++ b/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);
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -52,15 +52,16 @@ export const useAuthStore = defineStore('auth', () => {
    });

    const logout = () => {
-        
-        localStorage.removeItem('session');
-        localStorage.removeItem('access');
-        localStorage.removeItem('id');
-        company.clear();
-        router.push({name: 'login'});
+        console.log('logoo....');
        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 {
--- a/src/stores/company.js
+++ b/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,
--- a/src/views/LoginView.vue
+++ b/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,
--- a/src/views/MyCompanyView.vue
+++ b/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; */
--- a/src/views/PublicUsersCompanyView.vue
+++ b/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">
-            <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 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>
+        <CardUser
+            v-for="user in users"
+            :user="user"
+            :readonly="true"
+        />
    </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>
--- a/src/views/UsersView.vue
+++ b/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>