%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Properties</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"> <p>{{tasks['total']}}</p></div>
<router-link @click="say()">click me</router-link>
</div>
</div>
</div>
<div class="col">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Available</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"><p>{{tasks['available']}}</p></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Rent</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"><p>{{tasks['rent']}}</p></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Sale</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{tasks['sale']}}</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" class="form-control" @input="isTyping = true" v-model="searchQuery" placeholder="Search Property">
<form action="" class="search-property" @submit.prevent="searchProperty()">
<h3>Search Property</h3>
<div class="dselect sb">
<input type="radio" name="payment" id="card" value="2" v-model="picked" checked>
<label for="card">
<i class="" aria-hidden="true"></i>
<span>Buy</span>
</label>
<input type="radio" name="payment" id="cash" value="1" v-model="picked">
<label for="cash">
<i class="" aria-hidden="true"></i>
<span>Rent</span>
</label>
</div>
<div class="form-group sb">
<label for="">Location</label>
<select v-model="location" class="form-control" v-on:change="addLocation()" required>
<option v-for="option in locationlist" :value="option.location_id" :key="option.location_id">{{option.location}}</option>
</select>
</div>
<div class="form-group sb">
<label for="">Property Type</label>
<select v-model="property_type" class="form-control">
<optgroup label="Residential">
<option value="">Any</option>
<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>
<div v-if="picked==1" class="form-group sb">
<label for="">Budget</label>
<div class="_2qtUG">
<div class="_2CXtV">
<select class="minc" v-model="min">
<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>
<span class="budgetspan">to</span>
<select class="minc" v-model="max">
<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>
</div>
<div v-else class="form-group sb">
<label for="">Budget</label>
<div class="_2qtUG">
<div class="_2CXtV">
<select class="minc" v-model="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="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>
<button type="submit" class="btn btn-danger">Search</button>
</form>
</div>
</div>
<div class="row">
<div class="m-locations">
<div v-for='(tag,index) in locations' :key='tag' class='tag-input__tag'>
<span @click='removeTag(index)'>x</span>
{{ tag }}
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12">
<div v-for="property in properties.data" :key="property.id">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row">
<div class="col-md-3">
<img v-bind:src="'propertyImages/'+property.featured_image" width="200px" height="180px"/>
<div v-if="property.property_for==1" class="rentdiv">
<p>Rent</p>
</div>
<div v-else class="salediv">
Sale
</div>
<div v-if="property.profile==2" class="brktdiv">
<p>Broker</p>
</div>
<div v-else class="owndiv">
Owner Owned
</div>
</div>
<div class="col-md-9">
<div class="row">
<p class="property_title">{{property.title}}</p>
<p class="property_price">Rs {{property.price|currency}}</p>
</div>
<div class="row">
<p>Property Id:{{property.id}}</p>
</div>
<div class="row">
<p>Location:{{property.location}}</p>
</div>
<div class="row">
<div class="col">
<div class="cbe-je0">
<div class="cbe-18tu5">Super Area</div>
<div class="cbe-18tu4">{{property.carpet_area}}</div>
</div>
<div class="cbe-je0">
<div class="cbe-18tu5">BHK</div>
<div class="cbe-18tu4">{{property.bhk}}</div>
</div>
<div class="cbe-je0">
<div class="cbe-18tu5">Furnishing</div>
<div class="cbe-18tu4"></div>
</div>
</div>
</div>
<div class="wrapperbutton">
<button id="button1">Available</button>
<router-link v-bind:to="'/propertydetail/'+property.id"><button id="button2">View Details</button></router-link>
</div>
</div>
</div>
</div>
</div>
</div>
<pagination :data="properties" :limit="20" @pagination-change-page="getResults"></pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
properties:{},
tasks:[],
searchQuery:'',
isTyping: false,
isLoading: false,
property_type:null,
property_for:null,
locationlist:{},
locations:[],
location:'',
picked:'2',
min_budget:'',
max_budget:'',
min:'',
change:1,
max:'',
}
},
watch: {
searchQuery: _.debounce(function() {
this.isTyping = false;
}, 500),
isTyping: function(value) {
if (!value) {
this.searchUser(this.searchQuery);
}
}
},
methods:{
searchUser: function(searchQuery) {
this.isLoading = true;
axios.get('properties/searchquery?q=' + searchQuery)
.then(response => {
this.isLoading = false;
this.properties = response.data;
});
},
getResults:function(page = 1) {
if(this.change==1){
axios.get('properties/?page=' + page)
.then(response => {
this.properties = response.data;
});
}
else{
axios.post('/properties/searchproperty?page=' + page,{
property_for: this.picked,
property_type: this.property_type,
location:this.locations,
min:this.min,
max:this.max
})
.then(response => {
this.properties = response.data;
});
}
},
loadusers:function(){
axios.get('/properties').then(({data})=> (this.properties = data));
},
loadtotalcount(){
axios.get('/properties/totalcount') .then(response => {
this.tasks = response.data
})
},
getPosts:function () {
axios.get('/client').then(function(response){
this.rows = response.data;
}.bind(this));
},
loadlocations:function(){
axios.get('/locations').then(response=> {this.locationlist = response.data});
},
searchProperty:function (){
this.change=2;
axios.post('/properties/searchproperty', {
property_for: this.picked,
property_type: this.property_type,
location:this.locations,
min:this.min,
max:this.max
}).then(response => {
this.properties = response.data})
},
addLocation:function(){
this.locations.push(this.location) ;
},
removeTag (index) {
this.locations.splice(index, 1)
},
greet: function () {
alert('hello');
}
},
created: function(){
this.loadusers(),
this.loadtotalcount(),
this.loadlocations()
},
}
</script>
<style scoped>
.sb{
display: inline-block;
}
.tag-input__tag{
display: inline-block;
}
</style>
Zerion Mini Shell 1.0