%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<div class="form-group rbt">
<input type="radio" name="radio-block" id="radio1" v-model="options" value="1">
<label for="radio1">
<span>Property Buy/Rent</span>
</label>
<input type="radio" name="radio-block" id="radio2" v-model="options" value="2">
<label for="radio2">
<span>Maintenance</span>
</label>
<input type="radio" name="radio-block" id="radio3" v-model="options" value="3">
<label for="radio3">
<span>Property To Let/Maintain</span>
</label>
</div>
<div v-if="this.options==1">
<form action="/leads" method="POST" @submit.prevent="addlead()" class="">
<div class="form-group">
<h4>Property enquiry</h4>
<div class="form-group">
<input type="text" placeholder="Enter Client Phone" v-model="searchQuery" @keyup="getData(searchQuery)" autocomplete="off" class="form-control input-lg" list="users"/>
<datalist id="users" >
<option v-for="user in users.data" :key='user' :value="user.id">{{user.name}}-{{user.phone }}</option>
</datalist>
<a v-b-toggle href="#add-client" @click.prevent>Add Contact</a>
<b-sidebar id="add-client" class="w-50" title="Add Client" right shadow backdrop backdrop-variant="dark">
<addclients />
</b-sidebar>
</div>
<label for="">Property For</label>
<div class="form-group rbt">
<input type="radio" name="payment" id="Buy" v-model="property_for" value="2">
<label for="Buy">
<span>Buy</span>
</label>
<input type="radio" name="payment" id="Rent" v-model="property_for" value="1">
<label for="Rent">
<span>Rent</span>
</label>
</div>
<label for="">Property Type</label>
<div class="form-group rbt">
<input type="radio" name="property-type-block" id="ptb1" v-model="property_type" value="1">
<label for="ptb1">
<span>Apartment</span>
</label>
<input type="radio" name="property-type-block" id="ptb2" v-model="property_type" value="2">
<label for="ptb2">
<span>House</span>
</label>
<input type="radio" name="property-type-block" id="ptb3" v-model="property_type" value="3">
<label for="ptb3">
<span>Villa Gated Community</span>
</label>
<input type="radio" name="property-type-block" id="ptb4" v-model="property_type" value="4">
<label for="ptb4">
<span>Residential Land</span>
</label>
<input type="radio" name="property-type-block" id="ptb5" v-model="property_type" value="9">
<label for="ptb5">
<span>Commercial Office Space</span>
</label>
<input type="radio" name="property-type-block" id="ptb6" v-model="property_type" value="5">
<label for="ptb6">
<span>Office in IT Park/ SEZ</span>
</label>
<input type="radio" name="property-type-block" id="ptb7" v-model="property_type" value="6">
<label for="ptb7">
<span>Shop/Showroom/Retail Space</span>
</label>
<input type="radio" name="property-type-block" id="ptb8" v-model="property_type" value="7">
<label for="ptb8">
<span>Commercial Land</span>
</label>
<input type="radio" name="property-type-block" id="ptb9" v-model="property_type" value="8">
<label for="ptb9">
<span>Warehouse/ Godown</span>
</label>
</div>
<div class="form-group">
<label for="">Budget</label>
<div class="pinputfield" v-if="property_for==1">
<label for="">Budget</label>
<select class="minc" v-model="budget_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="budget_max">
<option value="" disabled selected>Max 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="budget_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="budget_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>
<div class="form-group">
<div class='tag-input'>
<div v-for='(tag,index) in tags' :key='tag' class='tag-input__tag'>
<span @click='removeTag(index)'>x</span>
{{ tag }}
</div>
<select v-model="locationslist" v-on:change="changeItem()">
<option v-for="option in alllocations" :value="option.location" :key="option.location_id">{{option.location}}</option>
</select>
</div>
</div>
<div class="form-group">
<label>Additional Info</label>
<input type="text" class="form-control" v-model="additionalInfo">
</div>
<label for="">Lead Source</label>
<div class="form-group rbt">
<input type="radio" name="source-block" id="source1" v-model="source" value="1">
<label for="source1">
<span>Facebook</span>
</label>
<input type="radio" name="source-block" id="source2" v-model="source" value="2">
<label for="source2">
<span>Website</span>
</label>
<input type="radio" name="source-block" id="source3" v-model="source" value="3">
<label for="source3">
<span>Whatsapp</span>
</label>
<input type="radio" name="source-block" id="source4" v-model="source" value="4">
<label for="source4">
<span>Direct Call</span>
</label>
<input type="radio" name="source-block" id="source5" v-model="source" value="5">
<label for="source5">
<span>Instagram</span>
</label>
<input type="radio" name="source-block" id="source6" v-model="source" value="6">
<label for="source6">
<span>Boards</span>
</label>
<input type="radio" name="source-block" id="source7" v-model="source" value="7">
<label for="source7">
<span>OLX</span>
</label>
</div>
<label for="">Locations</label>
<div class="form-group rbt">
<div v-for="option in alllocations" :key="option.id" style="display: inline-block;">
<input type="checkbox" name="source-block" :id="option.location" v-model="checkedNames" :value="option.location">
<label :for="option.location" >
<span>{{option.location}}</span>
</label>
</div>
</div>
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</div>
----
<div v-if="this.options==2">
<form action="/maintenances" method="POST" @submit.prevent="addmaintenance()" class="lead-form">
<div class="form-group">
<label for="">Client </label>
<input type="text" placeholder="Enter Client Phone" v-model="searchQuery" @keyup="getData(searchQuery)" autocomplete="off" class="form-control input-lg" list="users"/>
<datalist id="users" >
<option v-for="user in users.data" :key='user.id' :value="user.id">{{user.name}}-+{{user.cc}} {{user.phone }}</option>
</datalist>
<a v-b-toggle href="#add-client" @click.prevent>Add New Contact</a>
<b-sidebar id="add-client" class="w-100" title="Add Client" right shadow backdrop backdrop-variant="dark">
<addclients />
</b-sidebar>
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="radio" id="radio10" v-model="propertyIsther" value="2">New Property</label>
<label class="checkbox-inline"><input type="radio" id="radio14" v-model="propertyIsther" value="1">Existing Property</label>
</div>
<div class="form-group" v-if="propertyIsther==1">
<label for="property">Select Property</label>
<select v-on:click="getclientProperties" class="form-control" v-model="property_name">
<option v-for="property in clientproperties" :value="property.title" :key="property.id">{{property.title}}</option>
</select>
<div class="form-group">
<label for="">Location</label>
<input type="text" name="" id="" class="form-control" v-model="mlocation">
</div>
<a v-b-toggle href="#add-property" @click.prevent>Add New Property</a>
<b-sidebar id="add-property" class="w-50" width="500px" title="Add Property" right shadow backdrop backdrop-variant="dark">
<addproperty />
</b-sidebar>
</div>
<div v-else>
<div class="form-group">
<label for="">Property Name</label>
<input type="text" name="" id="" class="form-control" v-model="property_name">
</div>
<div class="form-group">
<label for="">Location</label>
<input type="text" name="" id="" class="form-control" v-model="mlocation">
</div>
</div>
<div class="input-form">
<label for="">Maintenace Type</label>
<select name="" id="" class="form-control" v-model="maintenance_type">
<option value="1">Cleaning</option>
<option value="2">Painting</option>
<option value="3">Pest Control</option>
<option value="4">Water Proofing</option>
<option value="5">Home Renovation</option>
<option value="6">PD Inspection and handover</option>
<option value="7">Snagging and De-Snagging</option>
</select>
</div>
<div class="form-group">
<label>Request</label>
<input type="textarea" class="form-control" v-model="m_request">
</div>
<div class="form-group">
<label for="">Lead Source</label>
<select name="" id="" class="form-control" v-model="source">
<option value="1">Facebook</option>
<option value="2">Website</option>
<option value="3">Whatsapp</option>
<option value="4">Direct Call</option>
<option value="5">Instagram</option>
<option value="6">Boards</option>
<option value="7">OLX</option>
</select>
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div v-if="this.options==3">
<form action="/propertyservice" method="POST" @submit.prevent="addpropertyservice()" class="lead-form">
<div class="form-group">
<label for="">Client </label>
<input type="text" placeholder="Enter Client Phone" v-model="searchQuery" @keyup="getData(searchQuery)" autocomplete="off" class="form-control input-lg" list="users"/>
<datalist id="users" >
<option v-for="user in users.data" :key='user.id' :value="user.id">{{user.name}}-+{{user.cc}} {{user.phone }}</option>
</datalist>
<a v-b-toggle href="#add-client" @click.prevent>Add New Contact</a>
<b-sidebar id="add-client" class="w-100" title="Add Client" right shadow backdrop backdrop-variant="dark">
<addclients />
</b-sidebar>
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="radio" id="radio10" v-model="property_for" value="2">Sale</label>
<label class="checkbox-inline"><input type="radio" id="radio14" v-model="property_for" value="1">To Let</label>
</div>
<div class="form-group">
<label for="property_type">Property Type</label>
<select v-model="property_type" class="form-control">
<optgroup label="Residential">
<option value="1">Apartment</option>
<option value="2">House</option>
<option value="3">Villa</option>
<option value="4">Residential Land</option>
</optgroup>
<optgroup label="Commercial">
<option value="5">Commercial Office Space</option>
<option value="6">Office in IT Park/ SEZ</option>
<option value="7">Commercial Shop</option>
<option value="8">Commercial Showroom</option>
<option value="9">Commercial Land</option>
<option value="10">Warehouse/ Godown</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label for="">Locality</label>
<select v-model="location" class="form-control">
<option v-for="option in alllocations" :value="option.location_id" :key="option.location_id">{{option.location}}</option>
</select>
</div>
<div class="form-group">
<label for="title">Location</label> <input type="text"
data-content="Content." data-placement='top' class="form-control"
id="location" placeholder="property location" name="location" autocomplete="off">
<ul class="list-group loc-dropdown">
</ul>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea2">Additional Info</label>
<textarea class="form-control rounded-0" id="exampleFormControlTextarea2" rows="3" v-model="additionalInfo" ></textarea>
</div>
<div class="form-group">
<label for="">Lead Source</label>
<select name="" id="" class="form-control" v-model="source">
<option value="1">Facebook</option>
<option value="2">Website</option>
<option value="3">Whatsapp</option>
<option value="4">Direct Call</option>
<option value="5">Instagram</option>
<option value="6">Boards</option>
<option value="7">OLX</option>
</select>
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</template>
<script>
import addclients from './clients/addclients'
import addproperty from './addproperties'
export default {
data(){
return{
client_id:'',
property_for:'',
property_type:'',
location:'',
budget_min:'',
budget_max:'',
options:'',
tags: [],
checkedNames:[],
clientid:'',
locationslist:null,
searchQuery:'',
users:[],
alllocations:{},
m_client:'',
m_property_id:'',
m_request:'',
clientproperties:[],
additionalInfo:'',
propertyIsther:'',
property_name:'',
maintenance_type:'',
mlocation:'',
source:'',
}
},
components: {
addclients,
addproperty
},
mounted() {
console.log('Component mounted.')
},
methods: {
addlead(){
axios
.post('/leads', {
client_id: this.searchQuery,
property_for: this.property_for,
property_type:this.property_type,
budget_min: this.budget_min,
budget_max:this.budget_max,
location:this.tags,
source:this.source,
additional_info:this.additionalInfo
}) .then( response => this.$router.push({ path: '/leadslist/'}));
},
addpropertyservice(){
var dt = new Date();
dt.setDate(dt.getDate() + 3);
axios
.post('/propertyservice', {
client_id: this.searchQuery,
property_for: this.property_for,
property_type:this.property_type,
location:this.location,
source:this.source,
additional_info:this.additionalInfo
}) .then(response => this.$toaster.success('Property Service Added'), this.$router.push({ path: '/propertyservicelist'}));
},
addmaintenance(){
var dt = new Date();
dt.setDate(dt.getDate() + 3);
axios
.post('/maintenances', {
client_id: this.searchQuery,
m_property_id: this.m_property_id,
property_name:this.property_name,
m_request:this.m_request,
maintenance_type:this.maintenance_type,
location:this.mlocation,
source:this.source
}) .then( response => ( axios
.post('/tasks', {
client_id:this.searchQuery,
property_id:this.m_property_id,
task: 'Assign Site Visit for '+this.property_name,
description:this.m_request,
status:1,
assigned:3,
due_date:dt
}) .then( response => this.$router.push({ path: '/allmaintenance/'}))));
},
changeItem(){
this.tags.push(this.locationslist)
},
removeTag (index) {
this.tags.splice(index, 1)
},
getData:function(searchQuery) {
this.isLoading = true;
axios.get('client/searchquery?q=' + searchQuery)
.then(response => {
this.users = response.data;
});
},
getclientProperties(){
axios.get('/properties/clientproperties/'+ this.searchQuery)
.then(response => {
this.clientproperties = response.data;
});
},
loadlocations:function(){
axios.get('/locations').then(response=> {this.alllocations = response.data});
},
},
created:function(){
this.loadlocations()
}
}
</script>
<style scoped>
.tag-input {
width: 100%;
border: 1px solid #eee;
font-size: 0.9em;
height: 50px;
box-sizing: border-box;
padding: 0 10px;
}
.tag-input__tag {
height: 30px;
float: left;
margin-right: 10px;
background-color: #eee;
margin-top: 10px;
line-height: 30px;
padding: 0 5px;
border-radius: 5px;
}
.tag-input__tag > span {
cursor: pointer;
opacity: 0.75;
}
.tag-input__text {
border: none;
outline: none;
font-size: 0.9em;
line-height: 50px;
background: none;
}
.rbt.radio-block ul {
width: 100%;
overflow: auto;
padding: 0;
}
.rbt.radio-block li {
display: inline-block;
clear: both;
padding: 10px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
}
.rbt.radio-block input[type="radio"], input[type="checkbox"] {
margin-right: 5px;
}
.rbt input[type="radio"]{
-webkit-appearance:none;
}
.rbt label{
appearance: none;
background-color: #fff;
border-style: none;
box-shadow: inset 0 0 0 1px #002f34;
border-radius: 4px;
color: #002f34;
cursor: pointer;
font-size: 14px;
height: 36px;
margin-bottom: 8px;
margin-right: 8px;
min-width: 124px;
outline: 0;
padding: 8px 16px;
}
.fa{
font-size: 80px;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-80%);
}
.rbt label>span{
font-size: 14px;
transform: translate(-50%,80%);
font-family: "Poppins",sans-serif;
font-weight: 500;
}
.rbt input[type="radio"]:checked + label{
background-color: #6b80ef;
color: white;
}
</style>
Zerion Mini Shell 1.0