%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container-fluid" >
<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>
<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 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('photos')" :class="{ active: isActive('photos') }" href="#photos"> Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('calllogs')" :class="{ active: isActive('calllogs') }" href="#calllogs">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">
<div v-for ="note in notes" :key="note.id">
<h5>{{note.created_at|fdate}}</h5>
<p>{{note.notes}}</p>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('photos') }" id="photos">
<h2>Photos</h2>
<img :src="'/property/'+id+'/'+doc.Foo" height="150px" width="150px" v-for="(doc, index) in imageDocs" :key="index">
</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>
</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-notes" @click.prevent>Add Notes</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-site-inspection" @click.prevent>Add Site Inspection</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-tenant" @click.prevent>Add Tenant</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>
<option value="5">Completed</option>
<option value="7">Rejected</option>
<option value="8">Closed</option>
</select>
</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="">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="">Location</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="sitelocation">
</div>
<div class="form-group">
<label for="">Property Names</label>
<input type="text" name="" id="" v-model="property_names" class="form-control">
</div>
<div class="form-group">
<label for="">Note</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" v-model="note"></textarea>
</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 :ref_id="this.id" :clientid="this.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="2"/>
</b-sidebar>
<b-sidebar id="add-site-inspection" class="w-50" title="add-site-inspection" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="addSiteinspection()" class="form-task">
<label for="">Add Images</label>
<input type="file" multiple class="form-control" name="image" v-on:change="onImageChanges" />
<div v-for="(image,index, key) in images" :key="key">
<img :src="image" class="preview" style="width:200px;">
<button @click="removeImage(index)">Remove image</button>
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
<b-sidebar id="add-notes" class="w-50" title="add-notes" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="addnote()" class="form-task">
<label for="exampleFormControlTextarea1" class="form-label">Make a note</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" v-model="theNote"></textarea>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
<b-sidebar id="add-task" class="w-50" title="Add Task" right shadow backdrop backdrop-variant="dark">
<propertytask :id="id" :clientid="clientid"/>
</b-sidebar>
<b-sidebar id="add-tenant" class="w-50" title="Add Tenant" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="addtenant()" class="form-task">
<label for="exampleFormControlTextarea1" class="form-label">Make a note</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" v-model="theNote"></textarea>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
</div>
</template>
<script>
import addproperties 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:[],
calllogs:[],
random:'',
staffs:[],
clients:[],
images:[],
notes:[],
docs:[],
picked:'',
task:'',
status:'',
assigned:'',
due_date:'',
time:'',
sitelocation:'',
note:'',
min:'',
max:'',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
activeItem: 'activity',
totalPages: [
{ id: 1, text: "Enquiry" },
{ id: 2, text: "Site Visit" },
{ id: 3, text: "Photos Added" },
{ id: 4, text: "Add property Details" },
{ 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) ;
},
loadNotes(){
axios.get('/propertyservicenotes/notes/'+this.id).then(response=>{this.notes=response.data})
},
loadactivities(){
axios.get('/propertyserviceactivities/activities/'+this.id) .then(response => {
this.activities = response.data;
})
},
loaddocs(){
axios.get('/propertyservice/getFiles/'+this.id) .then(response => {
this.docs = response.data;
})
},
loadcalllogs(){
axios.get('/calllogs/logs2/'+this.id) .then(response => {
this.calllogs = response.data;
});
},
addSiteinspection(){
axios
.post('/propertyservice/inspectionimages/', {
m_id: this.id,
images:this.images,
}) .then( axios.post('/propertyservice/updatestatus',{
id:this.id,
client_id:this.clientid,
status:3,
}) .then(response => {
}),
this.$toaster.success('Site Visit Photos Added'),
this.$root.$emit('bv::toggle::collapse', 'add-site-inspection'),
//window.location.reload()
);
},
loadstaffs(){
axios.get('/users') .then(response => {
this.staffs = response.data;
})
},
myBtnClass: function(name) {
if(name<=this.selected)
return 'active'
else
return 'mope'
},
addtask(){
axios
.post('/tasks', {
client_id:this.clientid,
property_id:this.id,
task: this.task,
status:this.status,
assigned:this.assigned,
due_date:this.due_date
}) .then( response => this.$router.push({ path: '/tasks'}));
},
addsitevisit(){
axios.post('/allsitevisits', {
title:this.client_name,
location:this.sitelocation,
date: this.due_date,
time:this.time,
note:this.note
}
) .then( axios.post('/propertyservice/updatestatus',{
id:this.id,
client_id:this.clientid,
assigned:this.assigned,
due_date:this.due_date,
description:this.description,
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 => {
})
this.$toaster.success('Call Log Added'),
this.$root.$emit('bv::toggle::collapse', 'call-log'),
this.loadactivities()
},
addnote(){
axios.post('/propertyservicenotes',{
p_id:this.id,
notes:this.theNote,
}) .then(response => {
this.$toaster.success('Note Added'),
this.$root.$emit('bv::toggle::collapse', 'add-notes')
})
},
updatestatus: function (id) {
axios.post('/propertyservice/updatestatus',{
id:this.id,
status:this.selected,
client_id:this.clientid
}) .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
},
onImageChanges(e) {
console.log(e);
let files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
for(let i=0;i<files.length;i++){
this.createImages(files[i]);
}
},
createImages(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.images.push(e.target.result);
};
reader.readAsDataURL(file);
},
removeImage(index) {
this.images.splice(index, 1)
},
},
computed:{
imageDocs(){
return this.docs.filter(doc => doc.Fiz!='pdf');
},
},
created: function(){
this.loadusers(),
this.loadlocations(),
this.loadSendproperties(),
this.loadstaffs(),
this.loadactivities(),
this.loaddocs(),
this.loadNotes(),
this.loadcalllogs()
},
}
</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