%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<label class="checkbox-inline"><input type="radio" id="radio1" v-model="options" value="1">Property Enquiry</label>
<label class="checkbox-inline"><input type="radio" id="radio12" v-model="options" value="2">Maintenance</label>
<label class="checkbox-inline"><input type="radio" id="radio13" v-model="options" value="3">Others</label>
<div v-if="this.options==1">
<form action="/leads" method="POST" @submit.prevent="addlead()">
<div class="form-group">
<h2>Property enquiry</h2>
<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>
<div class="form-group">
<label class="checkbox-inline"><input type="radio" id="radio10" v-model="property_for" value="1">Buy</label>
<label class="checkbox-inline"><input type="radio" id="radio14" v-model="property_for" value="2">Rent</label>
</div>
<div class="form-group">
<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="">Budget</label>
<div class="form-inline">
<select class="form-control" v-model="budget_min">
<option>Min</option>
<option value="5000">Rs 5000</option>
<option value="10000">Rs 10000</option>
<option value="15000">Rs 15000</option>
<option value="20000">Rs 20000</option>
<option value="25000">Rs 25000</option>
<option value="35000">Rs 35000</option>
</select>
<select class="form-control" v-model="budget_max">
<option>Max</option>
<option value="5000">Rs 5000</option>
<option value="10000">Rs 10000</option>
<option value="15000">Rs 15000</option>
<option value="20000">Rs 20000</option>
<option value="25000">Rs 25000</option>
<option value="35000">Rs 35000</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">
</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.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 for="property">Select Property</label>
<select v-on:click="getclientProperties" class="form-control" v-model="m_property_id">
<option v-for="property in clientproperties" :value="property.id">{{property.title}}</option>
</select>
<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 class="input-form">
<label for="">Maintenace Type</label>
<select name="" id="" class="form-control">
<option value="1">Cleaning</option>
<option value="1">Painting</option>
<option value="1">REnoivation</option>
</select>
</div>
<div class="form-group">
<label>Request</label>
<input type="textarea" class="form-control" v-model="m_request">
</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: [],
clientid:'',
locationslist:null,
searchQuery:'',
users:[],
alllocations:{},
m_client:'',
m_property_id:'',
m_request:'',
clientproperties:[],
}
},
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,
}) .then( response => this.$router.push({ path: '/leadslist/'}));
},
addmaintenance(){
axios
.post('/maintenances', {
client_id: this.searchQuery,
m_property_id: this.m_property_id,
m_request:this.m_request,
}) .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;
}
</style>
Zerion Mini Shell 1.0