ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod: navbar & editProfile

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-04-04 21:02:32 -06:00
parent 1a6c6b4515
commit 84f71b98d1
5 changed files with 68 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CardVehicle.vue
View File

@@ -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>

8
src/components/NavBar.vue
View File

@@ -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>

2
src/components/Sidebar.vue
View File

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

89
src/views/EditProfileView.vue
View File

@@ -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,60 +22,76 @@
})
onMounted(() => {
user.name = auth.user?.first_name
user.lastName = auth.user?.last_name
user.phone1 = auth.user?.phone
user.phone2 = auth.user?.phone2
if(user.value) {
getData()
}
})
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="profile"> -->
<form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef" class="form-content">
<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
label="Teléfono 1: *"
type="number"
name="phone1"
:step="1"
:filled="false"
v-model:field="user.phone1"
/>
<CustomInput
label="Teléfono 2:"
type="number"
name="phone2"
:step="1"
:filled="false"
v-model:field="user.phone2"
/>
<div class="phone">
<CustomInput
label="Teléfono 1: *"
type="number"
name="phone1"
:step="1"
:filled="false"
v-model:field="userForm.phone1"
/>
</div>
<div class="phone">
<CustomInput
label="Teléfono 2:"
type="number"
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>
@@ -81,7 +100,8 @@
margin: 0 auto;
} */
.form-content {
max-width: 1024px;
max-width: 768px;
/* width: 768px; */
margin: 0 auto;
background-color: #FFF;
padding: 32px 32px;
@@ -89,12 +109,21 @@
}
.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;
@@ -112,6 +141,10 @@
border-radius: 13px;
}
.phone {
width: 100%;
}
.content-phone{
display: flex;
flex-direction: column;

2
src/views/HomeView.vue
View File

@@ -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([]);