%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container mt-5">
<div class="row mt-5">
<div class="col-3">
<div class="p-2 alert alert-secondary">
<h3>New Enquiry</h3>
<p>{{filteredPrizesCount}} results found</p>
<p>{{totalRequest}}</p>
<!-- Backlog draggable component. Pass users to list prop -->
<draggable
class="list-group kanban-column"
:list="users"
group="tasks" @change="alt($event, 1)"
>
<div
class="list-group-item"
v-for="element in users"
:key="element.name"
>
<p>{{ element.name }}</p>
<p>{{ (element.budget_min+element.budget_max)/2 }}</p>
</div>
</draggable>
</div>
</div>
<div class="col-3">
<div class="p-2 alert alert-primary">
<h3>Site Visit</h3>
<p>{{filteredPrizesCount2}} results found</p>
<p>{{totalSitevisit}}</p>
<!-- In Progress draggable component. Pass arrInProgress to list prop -->
<draggable
class="list-group kanban-column"
:list="arrInProgress"
group="tasks"
>
<div
class="list-group-item"
v-for="element in arrInProgress"
:key="element.name"
>
<p>{{ element.name }}</p>
<p>{{ element.status }}</p>
</div>
</draggable>
</div>
</div>
<div class="col-3">
<div class="p-2 alert alert-warning">
<h3>Negotiation</h3>
<p>{{filterednegotation}}</p>
<p>{{totalNegotation}}</p>
<!-- Testing draggable component. Pass arrTested to list prop -->
<draggable
class="list-group kanban-column"
:list="arrTested"
group="tasks"
>
<div
class="list-group-item"
v-for="element in arrTested"
:key="element.name"
>
{{ element.name }}
</div>
</draggable>
</div>
</div>
<div class="col-3">
<div class="p-2 alert alert-success">
<h3>Won</h3>
<p>{{filteredwon}}</p>
<!-- Done draggable component. Pass arrDone to list prop -->
<draggable
class="list-group kanban-column"
:list="arrDone"
group="tasks"
>
<div
class="list-group-item"
v-for="element in arrDone"
:key="element.name"
>
{{ element.name }}
</div>
</draggable>
</div>
</div>
</div>
</div>
</template>
<script>
//import draggable
import draggable from "vuedraggable";
export default {
name: "kanban-board",
components: {
//import draggable as a component
draggable
},
data() {
return {
// for new tasks
newTask: "",
// 4 arrays to keep track of our 4 statuses
users: [
],
arrInProgress: [],
arrTested: [],
arrDone: []
};
},
methods: {
//add new tasks method
add: function() {
if (this.newTask) {
this.users.push({ name: this.newTask });
this.newTask = "";
}
},
alt(event, col){
alert(event, col);
},
loadusers(){
axios.get('/leads/sales').then(({data})=> (this.users = data));
},
loadsitevisits(){
axios.get('/leads/sitevisits').then(({data})=> (this.arrInProgress = data));
},
loadnegotiation(){
axios.get('/leads/negotiation').then(({data})=> (this.arrTested = data));
},
loadwon(){
axios.get('/leads/won').then(({data})=> (this.arrDone = data));
},
},
created: function(){
this.loadusers(),
this.loadsitevisits(),
this.loadnegotiation(),
this.loadwon()
},
computed:{
filteredPrizesCount: function() {
return this.users.length;
},
filteredPrizesCount2: function() {
return this.arrInProgress.length;
},
filterednegotation: function() {
return this.arrTested.length;
},
filteredwon: function() {
return this.arrDone.length;
},
totalRequest() {
return this.users.reduce((acc, item) => acc + item.budget_min, 0);
},
totalSitevisit() {
return this.arrInProgress.reduce((acc, item) => acc + item.budget_min, 0);
},
totalNegotation() {
return this.arrTested.reduce((acc, item) => acc + ((item.budget_min+item.budget_max)/2), 0);
}
}
};
</script>
<style>
/* light stylings for the kanban columns */
.kanban-column {
min-height: 300px;
}
</style>
Zerion Mini Shell 1.0