Merge branch 'migrate-alex' into 'master'

Migrate alex

See merge request jcruzbaasworkspace/enruta/webeta!9

src/components/CardVehicle.vue

@@ -62,7 +62,7 @@ import { useAuthStore } from '../stores/auth';
     <div class="card-fixed card-vehicle">
         <div class="row my-2">
             <div class="col-lg-6">
-                <p>Código: <span>{{ vehicle.vehicle_code }}</span></p>
+                <p>Código: <span>{{ vehicle?.vehicle_code }}</span></p>
                 <p>Tipo de transporte: <span>{{ vehicle.truck_type }}</span></p>
                 <p>Número de Serie: <span>{{ vehicle.vehicle_number }}</span></p>
                 <p>Segmento: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>

src/components/NavBar.vue

@@ -24,19 +24,19 @@ import { useNotificationsStore } from '../stores/notifications';
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_shipper'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> Transportistas</RouterLink>
+                        class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> <span class="clear-xsm">Transportistas</span></RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_carrier'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> Cargas</RouterLink>
+                        class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">Cargas</span></RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_carrier'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> Embarcadores</RouterLink>
+                        class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">Embarcadores</span></RouterLink>
                     <a 
                         active-class="router-link-active"
                         @click="noty.toggleProfile"
-                        class="nav-link"><i class="fa-solid fa-user me-1"></i> {{ auth?.user?.first_name }}</a>
+                        class="nav-link"><i class="fa-solid fa-user me-1"></i> <span class="clear-xsm">{{ auth?.user?.first_name }}</span></a>
                 </div>
             </div>
     </nav>

src/components/Sidebar.vue

@@ -195,7 +195,7 @@
     }
 
     .company-name {
-        font-size: 2rem;
+        font-size: 1.5rem;
         font-weight: 900;
     }
 

src/views/EditProfileView.vue

@@ -1,13 +1,16 @@
 <script setup>
-    import { onMounted, reactive, ref } from 'vue';
+    import { onMounted, reactive, ref, watch } from 'vue';
     import { useAuthStore } from '../stores/auth';
     import Spiner from '../components/ui/Spiner.vue';
     import CustomInput from '../components/ui/CustomInput.vue';
+    import { storeToRefs } from 'pinia';
 
     const auth = useAuthStore();
 
+    const { user } = storeToRefs(auth);
+
     const loading = ref(false)
-    const user = reactive({
+    const userForm = reactive({
         name: '',
         lastName: '',
         phone1: '',
@@ -19,79 +22,108 @@
     })
 
     onMounted(() => {
-      user.name = auth.user?.first_name  
+      if(user.value) {
-      user.lastName = auth.user?.last_name  
+        getData()
-      user.phone1 = auth.user?.phone
+      }
-      user.phone2 = auth.user?.phone2  
     })
 
+    watch(user, async() => {
+        if(user.value) {
+            getData()
+        } 
+    });
+
+    const getData = () => {
+        userForm.name = user.value?.first_name  
+        userForm.lastName = user.value?.last_name  
+        userForm.phone1 = user.value?.phone
+        userForm.phone2 = user.value?.phone2 
+    }
+
     const handleSave = () => {
 
     }
 </script>
 
 <template>
-  
+    <!-- <div class="profile"> -->
-    <div class="form-content">
+        <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef" class="form-content">
-        <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef">
             <CustomInput
                 label="Nombres(s):"
                 type="text"
                 name="name"
                 :filled="false"
-                v-model:field="user.name"
+                v-model:field="userForm.name"
             />
             <CustomInput
                 label="Apellidos(s):"
                 type="text"
                 name="lastname"
                 :filled="false"
-                v-model:field="user.lastName"
+                v-model:field="userForm.lastName"
             />
             <div class="content-phone">
-                <CustomInput
+                <div class="phone">
-                    label="Teléfono 1: *"
+                    <CustomInput
-                    type="number"
+                        label="Teléfono 1: *"
-                    name="phone1"
+                        type="number"
-                    :step="1"
+                        name="phone1"
-                    :filled="false"
+                        :step="1"
-                    v-model:field="user.phone1"
+                        :filled="false"
-                />
+                        v-model:field="userForm.phone1"
-                <CustomInput
+                    />
-                    label="Teléfono 2:"
+                </div>
-                    type="number"
+                <div class="phone">
-                    name="phone2"
+                    <CustomInput
-                    :step="1"
+                        label="Teléfono 2:"
-                    :filled="false"
+                        type="number"
-                    v-model:field="user.phone2"
+                        name="phone2"
-                />
+                        :step="1"
+                        :filled="false"
+                        v-model:field="userForm.phone2"
+                    />
+                </div>
             </div>
             <div class="mt-4 text-center">
                 <Spiner v-if="loading"/>
                 <button 
                     v-else
-                    class="btn btn-dark" type="submit">Guardar</button>
+                    class="btn btn-dark btn-block" type="submit">Guardar</button>
             </div> 
         </form>
-    </div>
+    <!-- </div> -->
            
 </template>
 
 <style scoped>
+    /* .profile {
+        margin: 0 auto;
+    } */
     .form-content {
-        margin: 24px 100px;
+        max-width: 768px;
+        /* width: 768px; */
+        margin: 0 auto;
         background-color: #FFF;
         padding: 32px 32px;
         border-radius: 13px;
     }
 
     .content-phone{
+        width: 100%;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         /* gap: 5rem; */
     }
 
+    .phone {
+        width: 45%;
+    }
+
+    .btn-block {
+        width: 80%;
+    }
+
     @media (max-width: 1024px) {
         .form-content {
             margin: 24px 16px;
@@ -109,6 +141,10 @@
             border-radius: 13px;
         }
 
+        .phone {
+            width: 100%;
+        }
+
         .content-phone{
             display: flex;
             flex-direction: column;

src/views/HomeView.vue

@@ -12,7 +12,7 @@
 
 
   const auth = useAuthStore();
-  const { checking, user } = storeToRefs(auth);
+  const { user } = storeToRefs(auth);
   const loads = useLoadsStore();
   const loading = ref(false);
   const loadsData = ref([]);