%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container-fluid" >
<div class="row" v-for="user in users" :key="user.id">
<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">Properties</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>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('requirements')" :class="{ active: isActive('requirements') }" href="#requirements">Requirement</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('requests')" :class="{ active: isActive('requests') }" href="#requests">Maintenance</a>
</li>
</ul>
<div class="tab-content py-3" id="myTabContent">
<div class="tab-pane fade" :class="{ 'active show': isActive('activity') }" id="activity">
<div class="uk-container uk-padding">
<div class="uk-timeline" >
<div class="uk-timeline-item" v-for="activity in activities" :key="activity.id">
<div class="uk-timeline-icon">
<span class="uk-badge"><span uk-icon="check"></span></span>
</div>
<div class="uk-timeline-content">
<div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<h3 class="uk-card-title">{{activity.activity}}-{{activity.created_at|fdate}}</h3>
<span class="uk-label uk-label-success uk-margin-auto-left"></span>
</div>
</div>
<div class="uk-card-body">
<p class="uk-text-success">{{activity.message}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('projects') }" id="projects">
<div v-for="property in properties.data" :key="property.id">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row">
<div class="col-md-3">
<img v-bind:src="'../images/'+property.featured_image" width="150px" height="70%"/>
<p class="prop-m">{{property.location}}</p>
<div v-if="property.available_status==2">
<button id="" class="btn btn-success">Available</button>
</div>
<div v-else>
<button id="" class="btn btn-danger">Not available</button>
</div>
</div>
<div class="col-md-9">
<div class="card-body prop-listing">
<h5 class="card-title price-title"><i class="fa fa-rupee"></i> {{ Number(property.price).toLocaleString()}}</h5>
<h5 class="card-title">{{property.title}}</h5>
<div>
<div class="cbe-je0">
<div class="cbe-18tu5">Super Area</div>
<div class="cbe-18tu4">{{property.carpet_area}}</div>
</div>
<div class="cbe-je0">
<div class="cbe-18tu5">BHK</div>
<div class="cbe-18tu4">{{property.bhk}}</div>
</div>
<div class="cbe-je0">
<div class="cbe-18tu5">Furnishing</div>
<div class="cbe-18tu4">{{property.Furnishing}}</div>
</div>
</div>
<p>{{property.description}}</p>
<router-link v-bind:to="'/propertydetail/'+property.id"><button id="" class="btn btn-info">View Details</button></router-link>
</div>
</div>
</div>
</div>
</div>
</div>
<pagination :data="properties" @pagination-change-page="getProperties"></pagination>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('tasks') }" id="tasks">
<div v-for="task in tasks" :key="task.id">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row">
<div class="col-md-3">
<p>{{task.id}}</p>
<p>{{task.status}}</p>
</div>
<div class="col-md-9">
<p>{{task.task}}</p>
<p>{{task.description}}</p>
</div>
</div>
</div>
</div>
</div>
<pagination :data="tasks" @pagination-change-page="getResults"></pagination>
</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('requirements') }" id="requirements">
<div v-for="lead in leads.data" :key="lead.id">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
<p>{{lead.property_for}}</p>
<p>{{lead.additional_info}}</p>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
<pagination :data="leads" @pagination-change-page="getLeads"></pagination>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('requests') }" id="requests">
<div v-for="maintenance in maintenances" :key="maintenance.id">
<div class="card" style="">
<div class="card-body">
<h5 class="card-title">{{maintenance.status_name}}</h5>
<p class="card-text"> {{maintenance.created_at|fdate}}</p>
<p class="card-text"> {{maintenance.request}}</p>
<router-link v-bind:to="'/viewmaintenance/'+maintenance.m_id"><button class="btn btn-primary">View Details</button></router-link>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('accounts') }" id="accounts">accounts content</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<b-dropdown id="dropdown-1" text="Actions" class="m-md-2">
<b-dropdown-item><router-link to="/addticket">Add Ticket</router-link></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#example-collapse" @click.prevent>Add task</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-tag" @click.prevent>Add Tag</a></b-dropdown-item>
<b-dropdown-item>Add Properties</b-dropdown-item>
<b-dropdown-item>Add Maintenance Request</b-dropdown-item>
<b-dropdown-item>Add Document</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item active>Active action</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
<b-sidebar id="example-collapse" class="w-50" title="Add Client" right shadow backdrop backdrop-variant="dark">
<h2>Add Task</h2>
<form action="/tasks" method="POST" @submit.prevent="addtask()">
<div class="form-group">
<input type="hidden" class="form-control" v-model="id" placeholder="client_id">
</div>
<div class="form-group">
<label for="task">Task</label>
<input type="text" class="form-control" name="task" v-model="task" placeholder="Task">
</div>
<div class="form-row">
<div class="form-group">
<label for="status">status</label>
<input type="text" class="form-control" name="status" v-model="status">
</div>
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
<b-sidebar id="add-tag" class="w-50" title="Add Client" right shadow backdrop backdrop-variant="dark">
<h1>add tag</h1>
<addtags :client_id="id"/>
</b-sidebar>
<div class="card">
<div class="card-body">
<img src="/images/profile.png" class="img-responsive profile-img">
<h4 class="profile-title">{{user.name}}</h4>
<span>Contact Details</span>
<p>{{user.email}}</p>
<p>{{user.phone}}</p>
<div class="form-group">
<label for="pwd">Phone:</label>
<p>+{{user.cc}}-{{user.phone}}</p>
</div>
<div class="form-group">
<label for="pwd">Whatsapp No:</label>
<p>{{user.phone}}</p>
</div>
<div class="form-group">
<label for="pwd">Address:</label>
<p></p>
</div>
<div class="form-group">
<label for="pwd">Client Profile:</label>
<p>{{user.profile_name}}</p>
<div v-if="ref != null">
<p>Reference</p>
{{ref_name}}
</div>
<div v-else>
<p>ref</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import addtags from '../addtag.vue'
export default {
components: { addtags},
data(){
return {
id:this.$route.params.id,
clientid:1,
client_id:'',
task:'',
status:'',
id:this.$route.params.id,
users:[],
ref:[],
ref_name:'',
ref_id:'',
tasks:{},
activeItem: 'activity',
properties:{},
leads:{},
profiles:[],
maintenances:[],
activities:[]
}
},
methods:{
loadusers(){
axios.get('/client/clientdetails/'+this.id) .then(response => {
this.users = response.data;
this.ref_id=this.users[0].refsource;
this.loadref();
})
},
loadref(){
axios.get('/client/clientdetails/'+this.ref_id) .then(response => {
this.ref = response.data;
this.ref_name=this.ref[0].name;
})
},
loadtasks(){
axios.get('/tasks/gettasksuserid/'+this.id).then(response => {
this.tasks = response.data
})
},
loadMaintenances(){
axios.get('/maintenance/maintenancebyclient/'+this.id).then(response => {
this.maintenances = response.data
})
},
loadactivities(){
axios.get('/activities/'+this.id) .then(response => {
this.activities = response.data;
})
},
getResults(page = 1) {
axios.get('/tasks/taskdetails/'+this.id+'?page=' + page)
.then(response => {
this.tasks = response.data;
});
},
addtask(){
axios
.post('/tasks', {
client_id: this.client_id,
task: this.task,
status:this.status
}) .then(function (response) {
//handle success
console.log(response);
});
this.$root.$emit('bv::toggle::collapse', 'example-collapse')
},
isActive (menuItem) {
return this.activeItem === menuItem
},
setActive (menuItem) {
this.activeItem = menuItem
},
getProperties:function(page = 1) {
axios.get('/properties/allclientproperties/'+this.id+'?page=' + page)
.then(response => {
this.properties = response.data;
});
},
loadproperties:function(){
axios.get('/properties/allclientproperties/'+this.id).then(({data})=> (this.properties = data));
},
getLeads:function(page = 1) {
axios.get('/leads/leaddetailsid/'+this.id+'?page=' + page)
.then(response => {
this.leads = response.data;
});
},
loadLeads:function(){
axios.get('/leads/leaddetailsid/'+this.id).then(({data})=> (this.leads = data));
},
},
created: function(){
this.loadusers(),
this.loadtasks(),
this.loadproperties(),
this.loadLeads(),
this.loadMaintenances(),
this.loadactivities()
}
}
</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;
}
.profile-title{
font-size: 1em;
}
</style>
Zerion Mini Shell 1.0