%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container" >
<div class="row" v-for="user in users" :key="user.leadid">
<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>Buy</p>
<p> Budget :{{user.budget_min|currency}}-{{user.budget_max|currency}}</p>
<p>Location{{user.location}}</p>
<p>{{user.additional_info}}</p>
<p>Source:{{user.source}}</p>
<p>Added By: {{user.staff}}</p>
</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>
<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-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-item><a v-b-toggle href="#add-note" @click.prevent>Add Note</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-brokerage" @click.prevent>Add Brokerage</a></b-dropdown-item>
</b-dropdown>
</div>
<label for="">Select Status</label>
<select class="form-control" v-model="selected" @change="updatestatus(selected)">
<option value="4">Negotiation</option>
<option value="5">Not Intersted</option>
<option value="6">Won</option>
</select>
</div>
</div>
</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('matching-property')" :class="{ active: isActive('matching-property') }" href="#matching-property">Matching Property</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('contracts')" :class="{ active: isActive('contracts') }" href="#contracts">Properties Send</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('calllogs')" :class="{ active: isActive('calllogs') }" href="#calllogs">Call Logs</a>
</li>
</ul>
<div class="tab-content py-3" id="myTabContent">
<div class="tab-pane fade" :class="{ 'active show': isActive('activity') }" id="activity">
<h2>Hello Activity</h2>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('matching-property') }" id="matching-property">
<div class="row">
<form action="" class="search-property" @submit.prevent="propertysearch()">
<div class="searchproperty">
<div class="pinputfield">
<label for="">Property For</label>
<select id="exampleFormControlSelect1" class="form-control search-slt" v-model="picked">
<option value="1" selected>Rent</option>
<option value="2">Sale</option>
</select>
</div>
<div class="pinputfield">
<div class="form-group">
<label for="">Location</label>
<select v-model="addlocation" class="form-control" v-on:change="addLocation()" required>
<option value="" disabled selected>Select Location</option>
<option v-for="option in locationlist" :value="option.location_id" :key="option.location_id">{{option.location}}</option>
</select>
</div>
</div>
<div class="pinputfield" v-if="picked==1">
<label for="">Budget</label>
<select class="minc" v-model="min">
<option value="" disabled selected>Min Budget</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
<option value="60000">60000</option>
<option value="70000">70000</option>
<option value="80000">80000</option>
<option value="90000">90000</option>
<option value="100000">1 Lac</option>
<option value="150000">1.5 Lac</option>
<option value="200000">2 Lac</option>
<option value="400000">4 Lac</option>
<option value="700000">7 Lac</option>
<option value="1000000">10 Lac</option>
</select>
<select class="minc" v-model="max">
<option value="" disabled selected>Min Budget</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
<option value="60000">60000</option>
<option value="70000">70000</option>
<option value="80000">80000</option>
<option value="90000">90000</option>
<option value="100000">1 Lac</option>
<option value="150000">1.5 Lac</option>
<option value="200000">2 Lac</option>
<option value="400000">4 Lac</option>
<option value="700000">7 Lac</option>
<option value="1000000">10 Lac</option>
</select>
</div>
<div class="pinputfield" v-else>
<label for="">Budget</label>
<select class="minc" v-model="min">
<option value="500000">5 Lac</option>
<option value="1000000">10 Lac</option>
<option value="2000000">20 Lac</option>
<option value="3000000">30 Lac</option>
<option value="4000000">40 Lac</option>
<option value="5000000">50 Lac</option>
<option value="6000000">60 Lac</option>
<option value="7000000">70 Lac</option>
<option value="8000000">80 Lac</option>
<option value="9000000">90 Lac</option>
<option value="10000000">1 Cr</option>
<option value="20000000">2 Cr</option>
<option value="30000000">3 Cr</option>
<option value="40000000">4 Cr</option>
<option value="50000000">5 Cr</option>
<option value="100000000">10 Cr</option>
<option value="200000000">20 Cr</option>
</select>
<span class="budgetspan">to</span>
<select class="minc" v-model="max">
<option value="500000">5 Lac</option>
<option value="1000000">10 Lac</option>
<option value="2000000">20 Lac</option>
<option value="3000000">30 Lac</option>
<option value="4000000">40 Lac</option>
<option value="5000000">50 Lac</option>
<option value="6000000">60 Lac</option>
<option value="7000000">70 Lac</option>
<option value="8000000">80 Lac</option>
<option value="9000000">90 Lac</option>
<option value="10000000">1 Cr</option>
<option value="20000000">2 Cr</option>
<option value="30000000">3 Cr</option>
<option value="40000000">4 Cr</option>
<option value="50000000">5 Cr</option>
<option value="100000000">10 Cr</option>
<option value="200000000">20 Cr</option>
</select>
</div>
<div class="pinputfield">
<label for="">Property Type</label>
<select class="form-control" v-model="property_type">
<optgroup label="Residential">
<option value="1">Apartment</option>
<option value="2">House</option>
<option value="3">Villa Gated Community</option>
<option value="4">Residential Land</option>
</optgroup>
<optgroup label="Commercial">
<option value="9">Commercial Office Space</option>
<option value="5">Office in IT Park/ SEZ</option>
<option value="6">Shop/Showroom/Retail Space</option>
<option value="7">Commercial Land</option>
<option value="8">Warehouse/ Godown</option>
</optgroup>
</select>
</div>
<div class="pinputfield">
<button type="submit" value="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
<div class="row">
<div v-for="property in properties.data" :key="property.id" class="col-md-12">
<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="180px"/>
<input :value="property.id" name="property" type="checkbox" v-model="checkedProducts" />
</div>
<div class="col-md-9">
<div class="row">
<p class="property_title">{{property.title}}</p>
<p class="property_price">Rs {{property.price}}</p>
</div>
<div class="row">
<div class="summary_item">
<div class="summary_title">carpet area</div>
<div class="summary_info">{{property.carpet_area}}sqft</div>
</div>
<div class="summary_item">
<div class="summary_title">BHK</div>
<div class="summary_info">{{property.bhk}}</div>
</div>
<div class="summary_item">
<div class="summary_title">carpet area</div>
<div class="summary_info">1450 sqft</div>
</div>
</div>
<div class="row">
<p>Location:{{property.location}}</p>
</div>
<div class="wrapperbutton">
<button id="button1">Available</button>
<router-link v-bind:to="'/propertydetail/'+property.id"><button id="button2">View Details</button></router-link>
<p>Days old:55</p>
</div>
</div>
</div>
</div>
</div>
</div>
<pagination :data="properties" @pagination-change-page="getResults"></pagination>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('contracts') }" id="contracts">
<div v-for="property in sendproperties" :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>
<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">2580 sq.ft</div>
</div>
<div class="cbe-je0">
<div class="cbe-18tu5">BHK</div>
<div class="cbe-18tu4">4</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-danger">View Details</button></router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('calllogs') }" id="calllogs">
<div v-for="calllog in calllogs" :key="calllog.id">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{calllog.created_at|fdate}}</h5>
<p class="card-text">{{calllog.description}}</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('Notes') }" id="Notes">
<div v-for="note in notes" :key="note.id">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{note.created_at|fdate}}</h5>
<p class="card-text">{{note.notes}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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>
<div class="form-group">
<label for="">Time Slot</label>
<select v-model="time" class="form-control">
<option value="9.30 AM- 10.30 AM">9.30 AM- 10.30 AM</option>
<option value="10.30 AM- 11.30 AM">10.30 AM- 11.30 AM</option>
<option value="12.30 AM- 1.00 AM">12.30 PM- 01.00 PM</option>
<option value="01.00 PM- 2.00 PM">01.00 PM- 2.00 PM</option>
<option value="02.00 PM- 3.00 PM">02.00 PM- 03.00 PM</option>
<option value="03.00 PM- 04.00 PM">03.00 PM- 04.00 PM</option>
<option value="04.00 PM- 5.00 PM">04.00 PM- 05.00 PM</option>
</select>
</div>
<div class="form-group">
<label for="">Property Names</label>
<input type="text" name="" id="" v-model="property_names" 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'
export default {
data(){
return {
id:this.$route.params.id,
clientid:'',
users:[],
tasks:[],
properties:{},
sendproperties:[],
calllogs:[],
property_for:'',
property_type:'',
client_name:'',
location:'',
property_names:'',
min_budget:'',
max_budget:'',
time:'',
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('/leads/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;
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(axios.post('/sitevisitsms',{
phone:this.wphone,
client_name:this.client_name,
time:this.time,
property_names:this.property_names,
date:this.due_date
}),
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 => {
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. https://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