add: view users of 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">
-            <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>

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>