%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container">
<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">Property Leads</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"> <p>{{counts['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">For Sale</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{counts['buy']}}</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">{{counts['rent']}}</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">This Month</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">220</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12">
<input type="text" class="form-control" @input="isTyping = true" v-model="searchQuery" placeholder="Type your keyword">
<div v-for ="user in filteredLeads" :key="user.leadid">
<div class="card border-left-primary lead-cards h-100 py-2">
<div class="card-body">
<div class="row">
<div class="col-md-2">
<h4>Lead Id:{{user.leadid}}</h4>
<div v-bind:style="{ backgroundColor: user.color }" class="status-style"> {{user.status_name}}
</div>
</div>
<div class="col-md-8">
<div class="cbe-je0">
<div class="cbe-18tu5">Name</div>
<div class="cbe-18tu4">{{user.name}}</div>
</div>
<div class="cbe-je0">
<div class="cbe-18tu5">Locations</div>
<div class="cbe-18tu4">{{user.location}}</div>
</div>
<div class="row">
<div class="col">
<div class="cbe-je0">
<div class="cbe-18tu5">property For</div>
<div class="cbe-18tu4">{{user.property_fors}}</div>
</div>
</div>
<div class="col">
<div class="cbe-je0">
<div class="cbe-18tu5">property Type</div>
<div class="cbe-18tu4">{{user.property_for_type}}</div>
</div>
</div>
<div class="col">
<div class="cbe-je0">
<div class="cbe-18tu5">property Budget</div>
<div class="cbe-18tu4">{{user.budget_min|currency}}-{{user.budget_max|currency}}</div>
</div>
</div>
<div class="col">
<div class="cbe-je0">
<div class="cbe-18tu5">Created</div>
<div class="cbe-18tu4">{{user.created_at|diffdate}} Days Ago</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<router-link v-bind:to="'/viewlead/'+user.leadid"> <button id="myButton" class="btn btn-primary">View Details</button></router-link>
</div>
</div>
</div>
</div>
</div>
<pagination :data="users" @pagination-change-page="getResults"></pagination>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data(){
return {
users:{},
searchQuery:'',
isTyping: false,
isLoading: false,
counts:{}
}
},
watch: {
searchQuery: _.debounce(function() {
this.isTyping = false;
}, 1000),
isTyping: function(value) {
if (!value) {
this.searchUser(this.searchQuery);
}
}
},
methods:{
searchUser: function(searchQuery) {
this.isLoading = true;
axios.get('leads/searchquery?q=' + searchQuery)
.then(response => {
this.isLoading = false;
this.users = response.data;
});
},
getResults(page = 1) {
axios.get('leads?page=' + page)
.then(response => {
this.users = response.data;
});
},
loadusers(){
axios.get('/leads').then(({data})=> (this.users = data));
},
getPosts: function() {
axios.get('/leads').then(function(response){
this.rows = response.data;
}.bind(this));
},
getcount(){
axios.get('/leads/totalcount').then(({data})=> (this.counts = data));
}
},
computed:{
filteredLeads: function () {
return this.test.filter((item) => {
return (this.keyword.length === 0 || item.package_name.match(this.keyword)) &&
(this.city.length === 0 || this.city == item.destination) &&
(this.themes.length === 0 || this.themes.includes(item.themes))
})
}
},
created: function(){
this.loadusers(),
this.getcount()
},
}
</script>
<style scoped>
.status-style{
text-align: center;
color: #fff;
}
.lead-cards{
margin-bottom: 2%;
}
.lead-cards h4{
font-size: 1rem;
font-weight: bold;
color: #918a8a;
}
.cbe-je0 {
display: inline-block;
width: 100%;
padding-right: 10px;
font-family: Open Sans,Helvetica,Arial,sans-serif;
padding-bottom: 2%;
}
.cbe-18tu5 {
font-size: 12px;
color: #909090;
letter-spacing: .2px;
}
.cbe-18tu4 {
font-size: 13px;
font-weight: 600;
}
</style>
Zerion Mini Shell 1.0