%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container">
<div class="col-md-8">
{{ref_id}}
<form action="/properties" method="POST" @submit.prevent="addproperty()" class="property-form">
<div v-if="step === 1">
<h1 class="form-title">Basic Details</h1>
<div class="form-group form-wc">
<label for="">Add 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' :value="user.id">{{user.name}}-{{user.phone }}</option>
</datalist>
{{client_name}}
<br>
<a v-b-toggle href="#add-client" @click.prevent>Add New 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="">Property For</label>
<input type="radio" name="buy" v-model="property_for" value="1" id="Rent"><label for="">Rent</label>
<input type="radio" name="rent" v-model="property_for" value="2" id="Ssle"><label for="">Sell</label>
</div>
<div class="form-group form-wc">
<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="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>
<button class="btn btn-primary" @click.prevent="next()">Next</button>
</div>
<div v-if="step === 2">
<h1 class="form-title">Property Location</h1>
<div class="form-group form-wc">
<label for="">Locality</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 form-wc">
<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 form-wc">
<label for="title">Title</label>
<input type="text" v-model="title" class="form-control">
</div>
<div class="form-group form-wc">
<label for="title">Property Name/Cost Center</label>
<input type="text" v-model="Property_name" class="form-control">
</div>
<button class="btn btn-primary" @click.prevent="prev()">Previous</button>
<button class="btn btn-primary" @click.prevent="next()">Next</button>
</div>
<div v-if="step === 3">
<h1 class="form-title">Property Profile</h1>
<div class="form-group form-wc">
<label for="price">Price</label>
<input type="text" class="form-control" v-model="price">
<p>{{numDifferentiation(price)}}</p>
</div>
<div v-if="this.property_for==1">
<div class="form-group form-wc">
<label for="price">Maintenance</label>
<input type="text" class="form-control" v-model="mmc">
</div>
</div>
<div class="form-group form-wc">
<label for="exampleFormControlTextarea2">Description</label>
<textarea class="form-control rounded-0" id="exampleFormControlTextarea2" rows="3" v-model="description" ></textarea>
</div>
<div class="dselect">
<p>BHK</p>
<input type="radio" name="payment" id="bhk-1" value="1" v-model="bhk" checked>
<label for="bhk-1">
<i class="" aria-hidden="true"></i>
<span>1</span>
</label>
<input type="radio" name="payment" id="bhk-2" value="2" v-model="bhk">
<label for="bhk-2">
<i class="" aria-hidden="true"></i>
<span>2</span>
</label>
<input type="radio" name="payment" id="bhk-3" value="3" v-model="bhk">
<label for="bhk-3">
<i class="" aria-hidden="true"></i>
<span>3</span>
</label>
<input type="radio" name="payment" id="bhk-4" value="4" v-model="bhk">
<label for="bhk-4">
<i class="" aria-hidden="true"></i>
<span>4</span>
</label>
</div>
<label for="Area">Area</label>
<input type="text" class="form-control form-wc" v-model="area">
<div class="dselect">
<p>Furnishing</p>
<input type="radio" name="furnishing" id="fur-1" value="2" v-model="furnishing" checked>
<label for="fur-1">
<i class="" aria-hidden="true"></i>
<span>UnFurnished</span>
</label>
<input type="radio" name="furnishing" id="fur-2" value="1" v-model="furnishing">
<label for="fur-2">
<i class="" aria-hidden="true"></i>
<span>Semi-Furnished</span>
</label>
<input type="radio" name="furnishing" id="fur-3" value="1" v-model="furnishing">
<label for="fur-3">
<i class="" aria-hidden="true"></i>
<span>Fully Furnished</span>
</label>
</div>
<div v-for="amenity in amenities" :key="amenity.id">
<input type="checkbox" :id="'toggle-'+amenity.id" :value="amenity.id" v-model="checkedAmenties"> <label for="javascript" id="screenshots_label">{{amenity.amenity}}</label>
</div>
<button class="btn btn-primary" @click.prevent="prev()">Previous</button>
<button class="btn btn-primary" @click.prevent="next()">Next</button>
</div>
<div v-if="step === 4">
<h1 class="form-title">Upload Photos</h1>
<label for="">Featured Image</label>
<input type="file" class="form-control form-wc" name="image" v-on:change="onImageChange" />
<img :src="image" class="preview" style="width:200px;">
<label for="">Add Images</label>
<input type="file" multiple class="form-control form-wc" 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 class="btn btn-primary" @click.prevent="prev()">Previous</button>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</template>
<script>
import addclients from './clients/addclients'
export default {
props:['ref_id'],
data(){
return{
step:1,
client_id:'',
client_detail:[],
client_name:'',
title:'',
description:'',
property_for:'',
property_type:'',
Property_name:'',
location:'',
amenities:[],
price:'',
lat:'0',
lng:'0',
title: '',
selectedvalue:'',
clientid:'',
area:'',
bhk:'',
furnishing:'',
project:'',
image: [],
locationlist:{},
checkedAmenties:[],
searchQuery:'',
users:[],
id:'',
images:[],
}
},
components: {
addclients
},
methods: {
get_id() {
this.id = this.$refs.groupId.value;
},
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,
Furnishing:this.furnishing,
latitude:this.lat,
longitude:this.lng,
location:this.location,
area:this.area,
bhk:this.bhk,
project:this.project,
image: this.image,
images:this.images,
mmc:this.mmc,
ref_id:this.ref_id,
checkedAmenties:this.checkedAmenties,
broker:1
}) .then( response => this.$router.push({ path: '/brokerproperties/'}));
},
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;
});
},
updatelocation(){
this.lat=document.getElementById("lat").value;
this.lng=document.getElementById("lng").value;
},
loadlocations:function(){
axios.get('/locations').then(response=> {this.locationlist = response.data});
},
onImageChange(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
loadAmenitities(){
axios.get('/amenity')
.then(response => {
this.amenities = response.data;
});
},
createImage(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
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)
},
numDifferentiation: function(value) {
var val = Math.abs(value)
if (val >= 10000000) {
val = (val / 10000000).toFixed(2) + ' Cr';
} else if (val >= 100000) {
val = (val / 100000).toFixed(2) + ' Lac';
}
return val;
},
prev() {
this.step--;
},
next() {
this.step++;
},
},
watch:{
searchQuery: function() {
if(this.searchQuery>1){
axios.get('/client/clientdetails/'+this.searchQuery) .then(response => {
this.client_name = response.data[0].name;;
})
}
}
},
created:function(){
this.loadlocations(),
this.loadAmenitities()
},
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;
}
.rui-2zbKc .rui-D-GoM {
display: flex;
flex-direction: row;
align-items: flex-start;
border-radius: 4px;
border-style: none;
margin: 4px 0;
flex-wrap: wrap;
position: relative;
}
.rui-YHJnT {
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: 64px;
outline: 0;
padding: 8px 16px;
}
.radio1{
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: 64px;
outline: 0;
padding: 8px 16px;
text-align: center;
}
label > input[type="radio"] {
display: none;
}
label > input[type="radio"]:checked + *::before {
background: radial-gradient(teal 0%, teal 40%, transparent 50%, transparent);
border-color: teal;
}
label >input[type="radio"]:checked+label,
.Checked+label {
background: yellow;
}
/* Styling Checkbox Starts */
.customCheckbox input[type="checkbox"] {
position: absolute;
left: -9999px
}
.customCheckbox input[type="checkbox"]+label {
position: relative;
padding: 3px 0 0 40px;
cursor: pointer;
color: rgb(120, 119, 121)
}
.customCheckbox input[type="checkbox"]+label:before {
content: '';
background: #fff;
border: 2px solid #ccc;
border-radius: 3px;
height: 25px;
width: 25px;
position: absolute;
top: 0;
left: 0
}
.customCheckbox input[type="checkbox"]+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #311B92 #311B92;
width: 15px;
height: 8px;
position: absolute;
top: 6px;
left: 5px;
opacity: 0;
transform: scale(2) rotate(-45deg);
transition: transform 0.3s linear, opacity 0.3s linear
}
.customCheckbox input[type="checkbox"]:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #311B92
}
input[type="radio"], input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
margin-top: -6px;
margin-right: 7px;
}
.form-wc{
width:50%;
}
.form-title{
font-size: 18px;
color: #303030;
padding-bottom: 28px;
font-weight: 700;
}
</style>
Zerion Mini Shell 1.0