%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container" >
<div class="row" v-for="user in users" :key="user.enquiry_id">
<div class="col-md-9">
<div class="row">
<div class="card">
<div class="card-body">
<h4>{{user.name}}</h4>
<p v-if="user.property_for==1">Rent</p>
<p v-else>Sale</p>
<p>Location {{user.location}}</p>
<p>Additional Info {{user.additional_info}}</p>
<p>Added Date {{user.created_at|fdate}}</p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<div v-for="user in clients" :key="user.id">
<div class="form-group">
<label for="name">Name:</label>
<p>{{user.name}}</p>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<p>+{{user.cc}}-{{user.phone}}</p>
</div>
<div class="form-group">
<label for="phone">Whatsapp No:</label>
<p>+{{user.wcc}}-{{user.wphone}}</p>
</div>
<div class="form-group">
<label for="date">Created Date:</label>
<p>{{user.created_at|fdate}}</p>
</div>
</div>
<button v-on:click="getLinkWhastapp">Share</button>
<b-dropdown id="dropdown-1" text="Actions" class="m-md-2">
<b-dropdown-item><a v-b-toggle href="#add-site-visit" @click.prevent>Add Site Visit</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-property" @click.prevent>Add Property</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-task" @click.prevent>Add task</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#call-log" @click.prevent>Add Call Log</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-file" @click.prevent>Add File</a></b-dropdown-item>
</b-dropdown>
</div>
<select class="form-control" v-model="selected" @change="updatestatus(selected)">
<option>Select Status</option>
<option value="1">Open</option>
<option value="2">Site Visit</option>
<option value="3">Add Property</option>
<option value="4">Verify Property</option>
</select>
</div>
</div>
</div>
<div class="row">
<ul class="progressbar">
<li v-for="page in totalPages" :key="page.id" v-bind:class="myBtnClass(page.id)">
{{ page.text }}
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<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('notes')" :class="{ active: isActive('notes') }" href="#notes">Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('contracts')" :class="{ active: isActive('contracts') }" href="#contracts">Property Details</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('accounts')" :class="{ active: isActive('accounts') }" href="#accounts">Phone Logs</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('pending')" :class="{ active: isActive('pending') }" href="#pending">Chat Logs</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}}</h3>
<span class="uk-label uk-label-success uk-margin-auto-left date-text">{{activity.activity_description}}</span>
<span class="uk-label uk-label-success uk-margin-auto-left date-text">{{activity.created_at|fdate}}</span>
</div>
</div>
<div class="uk-card-body">
<p class="uk-text-success">
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('notes') }" id="notes">
<h2>Hello Notes</h2>
</div>
</div>
</div>
</div>
</div>
<b-sidebar id="add-site-visit" class="w-50" title="add-site-visit" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="addsitevisit()" class="form-task">
<div class="form-group">
<label for="assigned">Assign to</label>
<select class="form-control" name="template" v-model="assigned">
<option v-for="staff in staffs" :key="staff.id" :value="staff.id">
{{ staff.name }}
</option>
</select>
</div>
<div class="form-group">
<label for="">Task</label>
<input type="text" name="" id="" v-model="task" class="form-control">
</div>
<div class="form-group">
<label for="">Task Description</label>
<input type="text" name="" id="" v-model="description" class="form-control">
</div>
<div class="form-group">
<label for="">Date</label>
<input type="date" name="" id="" v-model="due_date" class="form-control">
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
<b-sidebar id="add-property" class="w-50" title="Add file" right shadow backdrop backdrop-variant="dark">
<addproperty />
</b-sidebar>
<b-sidebar id="call-log" class="w-50" title="Add Call Log" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="addcalllog()" class="form-task">
<div class="form-group">
<label for="">Call Type</label>
<select name="" id="" class="form-control">
<option value="outgoing">Outgoing</option>
<option value="incoming">Incoming</option>
</select>
</div>
<div class="form-group">
<label for="">Call Response</label>
<select name="" id="" class="form-control">
<option value="Interested">Interested</option>
<option value="Left Message">Left Message</option>
<option value="No Response">No Response</option>
<option value="Not Interested">Not Interested</option>
<option value="Not able to reach">Not able to reach</option>
</select>
</div>
<div class="form-group">
<label for="">Notes</label>
<input type="text" class="form-control" v-model="activity_description">
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
</div>
</template>
<script>
import addproperty from './addproperties'
export default {
data(){
return {
id:this.$route.params.id,
clientid:'',
users:[],
tasks:[],
properties:{},
sendproperties:[],
property_for:'',
property_type:'',
client_name:'',
location:'',
min_budget:'',
max_budget:'',
locations:[],
locationlist:{},
addlocation:'',
selected:'',
checkedProducts:[],
activities:[],
random:'',
staffs:[],
clients:[],
picked:'',
min:'',
max:'',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
activeItem: 'activity',
totalPages: [
{ id: 1, text: "Enquiry" },
{ id: 2, text: "Site Visit" },
{ id: 3, text: "Add Property" },
{ id: 4, text: "Pending Verification" },
{ id: 5, text: "Verification Complete" }
],
}
},
methods:{
isActive (menuItem) {
return this.activeItem === menuItem
},
setActive (menuItem) {
this.activeItem = menuItem
},
loadusers(){
axios.get('/propertyservice/leaddetails/'+this.id) .then(response => {
this.users = response.data;
this.picked=response.data[0].property_for;
this.client_name=response.data[0].name;
this.clientid=response.data[0].client_id;
this.property_type=response.data[0].property_type;
this.addlocation=response.data[0].location;
this.min=response.data[0].budget_min;
this.max=response.data[0].budget_max;
this.selected= response.data[0].status;
axios.get('/client/clientdetails/'+this.clientid) .then(response => {
this.clients = response.data;
})
})
},
loadlocations:function(){
axios.get('/locations').then(response=> {this.locationlist = response.data});
},
loadSendproperties:function(){
axios.get('/propertysends/properties/'+this.id) .then(response => {
this.sendproperties = response.data;
});
},
addLocation:function(){
this.locations.push(this.addlocation) ;
},
loadactivities(){
axios.get('/propertyserviceactivities/activities/'+this.id) .then(response => {
this.activities = response.data;
})
},
loadstaffs(){
axios.get('/users') .then(response => {
this.staffs = response.data;
})
},
myBtnClass: function(name) {
if(name<=this.selected)
return 'active'
else
return 'mope'
},
addsitevisit(){
axios
.post('/tasks', {
client_id:this.clientid,
property_id:this.propertyid,
task: this.task,
status:1,
description:this.description,
assigned:this.assigned,
due_date:this.due_date
}) .then( axios.post('/propertyservice/updatestatus/',{
id:this.id,
client_id:this.clientid,
assigned:this.assigned,
due_date:this.due_date,
status:2,
}) .then(response => {
}),
this.$toaster.success('Site Visit Added'),
this.$root.$emit('bv::toggle::collapse', 'add-site-visit'),
this. loadactivities(),
//window.location.reload()
);
},
addcalllog: function () {
axios.post('/propertyserviceactivities/',{
client_id:this.clientid,
maintenance_id:this.id,
activity:'call Log',
activity_description:this.activity_description,
status:this.selected,
}) .then(response => {
})
},
updatestatus: function (id) {
axios.post('/leads/updatestatus/',{
id:this.id,
status:this.selected,
}) .then(response => {
}).catch(err => {
// what now?
console.log(err);
})
window.location.reload()
},
propertysearch(){
axios.post('/properties/searchproperty', {
location:this.locations,
property_for:this.picked,
p_t: this.property_type,
max:this.max,
min:this.min,
}).then(response => {
this.properties = response.data})
},
getLinkWhastapp:function () {
let number=+919633169648;
let random=Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
let message='Hi'+this.client_name+'Here are the properties matching your requirement. http://staging.karetakers.in/propertymatch/search/'+ random;
var url = 'https://api.whatsapp.com/send?phone='
+ number
+ '&text='
+ encodeURIComponent(message);
axios.post('/propertysends', {
lead_id:this.id,
client_id:this.clientid,
property_ids: 7,
code:random,
property_ids:this.checkedProducts,
}).then();
// window.open = url,'_blank';
window.open(url, "_blank");
//return url
},
addsitevisit(){
axios
.post('/tasks', {
client_id:this.clientid,
property_id:this.propertyid,
task: this.task,
status:1,
description:this.description,
assigned:this.assigned,
due_date:this.due_date
}) .then( axios.post('/propertyservice/updatestatus/',{
id:this.id,
client_id:this.clientid,
assigned:this.assigned,
due_date:this.due_date,
status:2,
}) .then(response => {
}),
this.$toaster.success('Site Visit Added'),
//window.location.reload()
);
},
},
created: function(){
this.loadusers(),
this.loadlocations(),
this.loadSendproperties(),
this.loadstaffs(),
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;
}
.progressbar {
width: 100%;
padding: 0%;
}
.progressbar li {
list-style-type: none;
width: 20%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
padding:10px;
border: 1px solid #eee;
background: #f3f2f2;
}
.progressbar li.active {
color: white;
font-weight: bold;
background: #3aac5d;
border-right: 1px solid #fff;
}
.progressbar li.active:before {
border-color: #55b776;
background: green;
}
.progressbar li.active + li:after {
background-color: #55b776;
}
.card{
width: 100%;
}
</style>
Zerion Mini Shell 1.0