%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container" >
<b-button v-b-toggle.sidebar-right>Add Leads</b-button>
<b-sidebar id="sidebar-right" title="Sidebar" right shadow>
<div class="px-3 py-2">
<addcampaigndetails />
</div>
</b-sidebar>
<div class="col-md-12">
<input type="text" class="form-control" @input="isTyping = true" v-model="searchQuery" placeholder="Type your keyword">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Client Name</th>
<th scope="col">Property For</th>
<th scope="col">Property Type</th>
<th scope="col">Additional Info</th>
<th scope="col">Status</th>
<th scope="col">Days Old</th>
</tr>
</thead>
<tbody>
<tr v-for ="user in users.data" :key="user.leadid">
<th scope="row">{{user.id}}</th>
<td>{{user.client_name}}</td>
<td>{{user.phone}}</td>
<td>{{user.description}}</td>
<td>{{user.status}}</td>
<td>
<div v-bind:style="{ backgroundColor: user.color }" class="status-style">
{{user.status_name}}
</div>
</td>
<td>{{user.created_at|diffdate}}</td>
<td><router-link v-bind:to="'/viewpropertyservicelead/'+user.enquiry_id">View</router-link></td>
</tr>
</tbody>
</table>
<pagination :data="users" @pagination-change-page="getResults"></pagination>
</div>
<b-sidebar id="add-site-visit" class="w-50" title="Assisted Site Visit" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="addsitevisit()" class="form-task">
<div class="form-group">
<label for="">Site Visit 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-task" class="w-50" title="Add file" right shadow backdrop backdrop-variant="dark">
<propertytask :leadid="id" :clientid="clientid" />
</b-sidebar>
<b-sidebar id="call-log" class="w-50" title="Add Call Log" right shadow backdrop backdrop-variant="dark">
<addcalllog :leadid="id" :clientid="clientid" :type="1"/>
</b-sidebar>
<b-sidebar id="add-note" class="w-50" title="add-noteg" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="addnote()" class="task-form">
<div class="form-group">
<label for="task"> Add Note</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" v-model="theNote"></textarea>
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
<b-sidebar id="add-brokerage" class="w-50" title="add-brokerage" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="addbrokerage()" class="task-form">
<div class="form-group">
<label for="task">Landlord Amount</label>
<input type="text" name="" id="" v-model="landlordamt" class="form-control">
</div>
<div class="form-group">
<label for="task">Tenant Amount</label>
<input type="text" name="" id="" v-model="tenantamt" class="form-control">
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
</div>
</template>
<script>
import propertytask from './propertytask'
import addcalllog from './addcalllog'
import addcampaigndetails from './addcampaigndetails'
export default {
data(){
return {
id:this.$route.params.id,
clientid:'',
users:[],
tasks:[],
properties:{},
sendproperties:[],
calllogs:[],
property_for:'',
property_type:'',
client_name:'',
location:'',
min_budget:'',
max_budget:'',
locations:[],
locationlist:{},
addlocation:'',
selected:'',
checkedProducts:[],
landlordamt:'',
tenantamt:'',
random:'',
picked:'',
min:'',
max:'',
wphone:'',
notes:[],
theNote:'',
wcc:'',
clients:[],
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
activeItem: 'activity',
totalPages: [
{ id: 1, text: "Enquiry" },
{ id: 2, text: "Send Property" },
{ id: 3, text: "Site Visit" },
{ id: 4, text: "Negotiation" },
{ id: 5, text: "Not Interested" },
{ id: 6, text: "Interested" }
],
}
},
methods:{
isActive (menuItem) {
return this.activeItem === menuItem
},
setActive (menuItem) {
this.activeItem = menuItem
},
loadusers(){
axios.get('/campaignsdetails/details/'+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;
this.wphone=response.data[0].wphone;
this.wcc=response.data[0].wcc;
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;
});
},
loadcalllogs:function(){
axios.get('/calllogs/logs/'+this.id) .then(response => {
this.calllogs = response.data;
});
},
loadnotes(){
axios.get('/leadnotes/notes/'+this.id) .then(response => {
this.notes = response.data;
});
},
addLocation:function(){
this.locations.push(this.addlocation) ;
},
myBtnClass: function(name) {
if(name<=this.selected)
return 'active'
else
return 'mope'
},
addnote(){
axios.post('/leadnotes/',{
lead_id:this.id,
notes:this.theNote,
}) .then(response => {
this.$toaster.success('Note Added'),
this.$root.$emit('bv::toggle::collapse','add-note')
this.loadnotes()
})
},
addbrokerage(){
axios.post('/brokerage/',{
propertyid:this.id,
landlordamt:this.landlordamt,
tenantamt:this.tenantamt
}) .then(response => {
this.$toaster.success('Brokerage Added'),
this.$root.$emit('bv::toggle::collapse','add-brokerage')
this.loadnotes()
})
},
addsitevisit(){
axios.post('/allsitevisits', {
title:this.client_name,
location:this.addlocation,
date: this.due_date,
}
) .then( axios.post('/leads/updatestatus/',{
id:this.id,
status:3
}) .then(response => {
}),
this.$toaster.success('Site Visit Added'),
this.$root.$emit('bv::toggle::collapse', 'add-site-visit'),
this.loadactivities(),
//window.location.reload()
);
},
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=this.wcc+this.wphone;
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
}
},
created: function(){
this.loadusers(),
this.loadlocations(),
this.loadSendproperties(),
this.loadcalllogs(),
this.loadnotes()
},
}
</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: 16%;
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