%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 Members</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"> <p>{{users['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">Corporate</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"></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">Individual</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"></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">New Members This month</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"></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="Search Members">
<table class="table styled-table">
<thead>
<tr>
<th scope="col">Member Code</th>
<th scope="col">Name</th>
<th scope="col">Designation</th>
<th scope="col">Company</th>
<th scope="col">email</th>
<th scope="col">phone</th>
<th scope="col">Secondary Phone</th>
<th scope="col">Member Type</th>
<th scope="col">Status</th>
<th scope="col">Due</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for ="user in users.data" :key="user.id">
<th scope="row">{{user.member_code }}</th>
<td>{{user.name}}</td>
<td>{{user.designation}}</td>
<td>{{user.company_name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
<td>{{user.phone2}}</td>
<td>{{user.member_type_code}}</td>
<td v-if="user.status==1">Active</td>
<td v-else>Inactive</td>
<td>{{user.due}}</td>
<td><router-link v-bind:to="'/viewmember/'+user.id"> <b-button variant="primary">View</b-button></router-link>
</td>
</tr>
</tbody>
</table>
<pagination :data="users" :limit="10" @pagination-change-page="getResults"></pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
users:{},
tasks:[],
searchQuery:'',
isTyping: false,
isLoading: false,
status:'',
cc:'',
selectedUser:'',
update_id:''
}
},
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('members/searchquery?q=' + searchQuery)
.then(response => {
this.isLoading = false;
this.users = response.data;
});
},
getResults:function(page = 1) {
axios.get('members?page=' + page)
.then(response => {
this.users = response.data;
});
},
sendInfo(user) {
this.selectedUser = user;
this.update_id=this.selectedUser.member_code;
alert(this.update_id);
axios.post('/member/deletemember',{
id:this.update_id,
}) .then(response => {
alert("Member Deleted");
this.loadpqr()
})
},
loadusers:function(){
axios.get('/members') .then(response => {
this.users = response.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));
},
},
computed:{
computedProducts: function () {
if(this.status==""){
return this.users.data;
}
return this.users.data.filter((item) => {
return (this.status.length === 0 || this.status.includes(item.profile))&&
(this.cc.length === 0 || this.cc.includes(item.cc))
})
}
},
created: function(){
this.loadusers(),
this.loadtotalcount(),
Echo.join(`chat`)
.here((users) => {
//
})
.joining((user) => {
console.log(user.name);
})
.leaving((user) => {
console.log(user.name);
})
.error((error) => {
console.error(error);
});
},
}
</script>
<style scoped>
.sml{
width: 10%;
}
</style>
Zerion Mini Shell 1.0