%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">Pending Tasks</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"> <p>{{counts.length}}</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">Due Today</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{duetoday.length}}</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">Over Due</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">12</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">Leads</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">
<select v-model="taskfilter" v-on:change="changeItem()">
<option value="1">Pending</option>
<option value="2">2</option>
<option value="3">null</option>
</select>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col" style="width:50%">Task</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 users.data" :key="user.id">
<th scope="row" class="task">{{user.task}}</th>
<td>{{user.assigned}}</td>
<td>
<div v-bind:style="{ backgroundColor: user.color }" class="status-style">
{{user.status}}
</div>
</td>
<td>{{user.due_date|fdate}}</td>
<td><button v-on:click="updatestatus(user.id)">Mark Complete</button></td>
<td> <b-btn v-b-toggle="'test-'+user.id" v-on:click="taskdetail(user.id)" variant="primary">
View
</b-btn>
<b-sidebar :id="'test-'+user.id" class="mt-2" right shadow backdrop backdrop-variant="dark">
<div class="container" >
<div class="row" v-for="task in tasks" :key="task.id">
<div class="col">
<div class="card">
<div class="card-body">
<p>{{task.task}}</p>
<p>Assignee: Vipin Raj</p>
<p>Due Date : {{task.due_date|fdate}}</p>
<p>Added Date : {{task.created_at|fdate}}</p>
<p>Description:</p>
<p>ASssigned to {{task.assigned}}</p>
<p>Status {{task.status}}</p>
<button v-on:click="updatestatus">Mark as Complete</button>
</div>
</div>
</div>
</div>
</div>
</b-sidebar></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:[],
duetoday:[],
tasks:{},
taskfilter:null,
}
},
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?page=' + page)
.then(response => {
this.users = response.data;
});
},
loadusers(){
axios.get('/tasks').then(({data})=> (this.users = data));
},
getPosts: function() {
axios.get('/tasks').then(function(response){
this.rows = response.data;
}.bind(this));
},
getcount(){
axios.get('/tasks/count').then(response => {
this.counts = response.data})
},
getduetoday(){
axios.get('/tasks/duetoday').then(response => {
this.duetoday = response.data})
},
updatestatus: function (id) {
axios.post('/tasks/updatestatus/'+id) .then(response => {
})
window.location.reload()
},
taskdetail: function (id) {
axios.get('/tasks/taskdetails/'+id) .then(response => {
this.tasks = response.data})
},
dosomething: function(){
alert('Hello');
},
changeItem: function changeItem() {
if(this.taskfilter==3){
axios.get('/tasks').then(({data})=> (this.users = data));
}
else{
axios.post('/tasks/filterstatus', {
taskfilter: this.taskfilter,
}).then(response => {
this.users = response.data})
}
}
},
created: function(){
this.loadusers(),
this.getcount(),
this.getduetoday()
},
}
</script>
<style scoped>
.status-style{
text-align: center;
color: #fff;
}
.b-sidebar {
display: flex;
flex-direction: column;
position: fixed !important;
top: 0;
height: 100vh;
width: 600px!important;
max-width: 100% !important;
margin: 0 !important;
outline: 0;
transform: translateX(0);
}
</style>
Zerion Mini Shell 1.0