%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-12">
<input type="text" class="form-control" @input="isTyping = true" v-model="searchQuery" placeholder="Search Document">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Document Name</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for ="user in users.data" :key="user.id">
<th scope="row">{{user.id}}</th>
<td>{{user.name}}</td>
<td><router-link v-bind:to="'/viewclient/'+user.id">View</router-link></td>
</tr>
</tbody>
</table>
<pagination :data="users" @pagination-change-page="getResults"></pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
users:{},
tasks:[],
searchQuery:'',
isTyping: false,
isLoading: false,
}
},
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('client/searchquery?q=' + searchQuery)
.then(response => {
this.isLoading = false;
this.users = response.data;
});
},
getResults:function(page = 1) {
axios.get('client?page=' + page)
.then(response => {
this.users = response.data;
});
},
loadusers:function(){
axios.get('/client').then(({data})=> (this.users = data));
},
loadtotalcount(){
axios.get('/client/totalcount') .then(response => {
this.tasks = response.data
})
},
getPosts:function () {
axios.get('/client').then(function(response){
this.rows = response.data;
}.bind(this));
},
},
created: function(){
this.loadusers(),
this.loadtotalcount()
},
}
</script>
Zerion Mini Shell 1.0