%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container" >
<div class="row" v-for="user in users" :key="user.id">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<img src="/images/profile.png" class="img-responsive profile-img">
<h4>{{user.lead_name}}</h4>
<p>{{user.email}}</p>
<p>{{user.phone}}</p>
<p>{{user.location}}</p>
<p>{{user.status}}</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card">
<div class="card-body">
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('activity')" :class="{ active: isActive('activity') }" href="#activity">Activity</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('projects')" :class="{ active: isActive('projects') }" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('tasks')" :class="{ active: isActive('tasks') }" href="#tasks">Tasks</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('documents')" :class="{ active: isActive('documents') }" href="#documents">Documents</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('accounts')" :class="{ active: isActive('accounts') }" href="#accounts">Accounts</a>
</li>
</ul>
<div class="tab-content py-3" id="myTabContent">
<div class="tab-pane fade" :class="{ 'active show': isActive('activity') }" id="activity">
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('projects') }" id="projects">projects content</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('tasks') }" id="tasks">
<ul id="tasks">
<li v-for="task in tasks" v-bind:key="task.id">
<div class="card">
<div class="card-body">
<h3> {{ task.task }}</h3>
<p>{{ task.created_at }}</p>
<p>{{ task.status }}</p>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('documents') }" id="documents">documents content</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('accounts') }" id="accounts">accounts content</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
id:this.$route.params.id,
clientid:this.$route.params.id,
users:[],
tasks:[],
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
activeItem: 'activity'
}
},
methods:{
loadusers(){
axios.get('/leads/leaddetails/'+this.id) .then(response => {
this.users = response.data
})
},
loadtasks(){
axios.get('/tasks/taskdetails/'+this.clientid) .then(response => {
this.tasks = response.data
})
},
isActive (menuItem) {
return this.activeItem === menuItem
},
setActive (menuItem) {
this.activeItem = menuItem
}
},
created: function(){
this.loadusers(),
this.loadtasks()
},
}
</script>
<style scoped>
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: #ffffff;
background-color: #0d75dd;
border-color: #dee2e6 #dee2e6 #f8fafc;
}
#tasks ul {
padding: 0;
margin: 0;
list-style: none;
}
</style>
Zerion Mini Shell 1.0