%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<form action="/properties" method="POST" @submit.prevent="addproperty()" class="property-form">
<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}}</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 for="title">Title</label>
<input type="text" v-model="title" class="form-control">
</div>
<div class="form-group">
<label for="title">Property_name</label>
<input type="text" v-model="Property_name" class="form-control">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="textarea" v-model="description" class="form-control" rows="50" cols="50">
</div>
<input type="radio" name="buy" v-model="property_for" value="1" id="Rent">Rent
<input type="radio" name="rent" v-model="property_for" value="2" id="Ssle">Sale
<input type="radio" name="rent" v-model="property_for" value="3" id="Maintenance">Maintenance
<div class="form-group">
<label for="">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 Gated Community</option>
<option value="4">Residential Land</option>
</optgroup>
<optgroup label="Commercial">
<option value="4">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 v-if="this.property_type==1">
<label for="Area">Area</label>
<input type="text" class="form-control" v-model="area">
<label for="BHK">BHK</label>
<input type="text" class="form-control" v-model="bhk">
<label for="">Project</label>
<input type="text" class="form-control" v-model="project">Project
add
</div>
<div class="form-group">
<label for="">Area</label>
<select v-model="location" class="form-control">
<option v-for="option in locationlist" :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>
<label for="">Latitude</label>
<input id="lat" type='text' name='lat' v-bind:value="lat" />
<label for="">Longitude</label>
<input id="lng" type='text' name='lng' v-model="lng" />
<div class="form-group">
<label for="price">Price</label>
<input type="text" class="form-control" v-model="price">
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
<div class="modal fade" id="add-property-result-modal"
data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Karetakers</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id='add-result'>
<p>Property added successfully</p>
<a href="#" id="added-property-link">view property</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="placeModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Choose Property location</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="map"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import addclients from './clients/addclients'
export default {
data(){
return{
client_id:'',
title:'',
description:'',
property_for:'',
property_type:'',
Property_name:'',
location:'',
price:'',
lat:'0',
lng:'0',
title: '',
selectedvalue:'',
clientid:'',
area:'',
bhk:'',
project:'',
locationlist:{},
searchQuery:'',
users:[],
}
},
components: {
addclients
},
methods: {
addproperty(){
axios
.post('/properties', {
client_id: this.searchQuery,
title:this.title,
description:this.description,
property_for: this.property_for,
property_type:this.property_type,
Property_name:this.Property_name,
price: this.price,
latitude:this.latitude,
longitude:this.longitude,
location:this.location,
area:this.area,
bhk:this.bhk,
project:this.project,
}) .then( response => this.$router.push({ path: '/allproperties/'}));
},
removeTag (index) {
this.tags.splice(index, 1)
},
getData:function(searchQuery) {
this.isLoading = true;
axios.get('client/searchquery?q=' + searchQuery.replace(/\s+/g, ''))
.then(response => {
this.users = response.data;
});
},
loadlocations:function(){
axios.get('/locations').then(response=> {this.locationlist = response.data});
},
},
created:function(){
this.loadlocations()
},
mounted() {
var scripts = [
"https://cloudfront.net/js/jquery-3.4.1.min.js",
"js/local.js"
];
scripts.forEach(script => {
let tag = document.createElement("script");
tag.setAttribute("src", script);
document.head.appendChild(tag);
});
},
}
</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