%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">
<label for="">Select Employee</label>
<select v-model="staffs">
<option value="">All</option>
<option value="1">Vipin</option>
<option value="3">Mujeena</option>
<option value="5">Nithin</option>
<option value="6">Valsan</option>
<option value="7">Benson</option>
<option value="9">Fathima</option>
<option value="10">Fahad</option>
</select>
<label for="">Select Priority</label>
<select v-model="priority">
<option value="">Any</option>
<option value="1">Low</option>
<option value="2">Medium</option>
<option value="3">High</option>
</select>
<div class="col-md-12">
<input type="text" class="form-control" @input="isTyping = true" v-model="searchQuery" placeholder="Search">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col" style="width:50%">Maintenance Task</th>
<th scope="col">Project</th>
<th scope="col">Assigned</th>
<th scope="col">Status</th>
<th scope="col">due date</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for ="user in computedProducts" :key="user.id">
<th scope="row" class="task">{{user.task}}</th>
<td>{{user.property_name}}</td>
<td>{{user.name}}</td>
<td>
<div v-bind:style="{ backgroundColor: user.color }" class="status-style">
{{user.status}}
</div>
</td>
<td>{{user.due_date|fdate}}</td>
<td><router-link v-bind:to="'/taskdetail/'+user.id">View</router-link></td>
</tr>
</tbody>
</table>
<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:{},
staffs:[],
priority:[],
clientid:''
}
},
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('tasks/searchquery?q=' + searchQuery)
.then(response => {
this.isLoading = false;
this.users = response.data;
});
},
getResults(page = 1) {
axios.get('/tasks/taskall?page=' + page)
.then(response => {
this.users = response.data;
});
},
loadtheusers(){
axios.get('/dashboard').then(response =>{
this.staff=response.data;
this.clientid=response.data.id;
this.loadusers();
});
},
loadusers(){
axios.get('/tasks/taskall').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:{
computedProducts: function () {
if((this.status=="") && (this.staffs=="")&& (this.priority=="")){
return this.users.data;
}
return this.users.data.filter((item) => {
return (this.keyword.length === 0 || item.assignee.match(this.keyword)) &&
(this.status.length === 0 || this.status.includes(item.status)) &&
(this.staffs.length === 0 || this.staffs.includes(item.assigned))&&
(this.priority.length === 0 || this.priority.includes(item.priority))
})
}
},
created: function(){
this.loadtheusers(),
this.getcount()
}
}
</script>
<style scoped>
.status-style{
text-align: center;
color: #fff;
}
</style>
Zerion Mini Shell 1.0