%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container mt-5">
<div class="row">
<label for="">Select Property Type </label>
<select v-model="type">
<option value="">All</option>
<option value="1">Rent</option>
<option value="2">Sale</option>
</select>
</div>
<div class="row mt-5">
<div class="col-3">
<div class="p-2 alert alert-secondary">
<h3>New Leads</h3>
<p>{{filteredPrizesCount}} results found</p>
<!-- Backlog draggable component. Pass users to list prop -->
<draggable
class="list-group kanban-column"
:list="computedLeads"
group="tasks" @change="alt($event, 1)"
>
<div
class="list-group-item"
v-for="element in computedLeads"
:key="element.name"
>
<p>{{ element.name }}</p>
<router-link v-bind:to="'/viewpropertyservicelead/'+element.enquiry_id">View Details</router-link>
</div>
</draggable>
</div>
</div>
<div class="col-3">
<div class="p-2 alert alert-primary">
<h3>Site Visit</h3>
<p>{{filteredPrizesCount2}} results found</p>
<!-- In Progress draggable component. Pass arrInProgress to list prop -->
<draggable
class="list-group kanban-column"
:list="computedSitevisits"
group="tasks"
>
<div
class="list-group-item"
v-for="element in computedSitevisits"
:key="element.name"
>
<p>{{ element.name }}</p>
<router-link v-bind:to="'/viewpropertyservicelead/'+element.enquiry_id">View Details</router-link>
</div>
</draggable>
</div>
</div>
<div class="col-3">
<div class="p-2 alert alert-warning">
<h3>Ad Release</h3>
<p>{{filterednegotation}}</p>
<!-- Testing draggable component. Pass arrTested to list prop -->
<draggable
class="list-group kanban-column"
:list="computedAdrelease"
group="tasks"
>
<div
class="list-group-item"
v-for="element in computedAdrelease"
:key="element.name"
>
<p>{{ element.name }}</p>
<router-link v-bind:to="'/viewpropertyservicelead/'+element.enquiry_id">View Details</router-link>
</div>
</draggable>
</div>
</div>
<div class="col-3">
<div class="p-2 alert alert-success">
<h3>Live Properties</h3>
<p>{{filteredwon}}</p>
<!-- Done draggable component. Pass arrDone to list prop -->
<draggable
class="list-group kanban-column"
:list="computedLive"
group="tasks"
>
<div
class="list-group-item"
v-for="element in computedLive"
:key="element.name"
>
{{ element.name }}
<router-link v-bind:to="'/viewpropertyservicelead/'+element.enquiry_id">View Details</router-link>
</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: [],
type:''
};
},
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('/propertyservice/newsales').then(({data})=> (this.users = data));
},
loadsitevisits(){
axios.get('/propertyservice/sitevisits').then(({data})=> (this.arrInProgress = data));
},
loadnegotiation(){
axios.get('/propertyservice/addproperty').then(({data})=> (this.arrTested = data));
},
loadwon(){
axios.get('/propertyservice/completed').then(({data})=> (this.arrDone = data));
},
},
created: function(){
this.loadusers(),
this.loadsitevisits(),
this.loadnegotiation(),
this.loadwon()
},
computed:{
filteredPrizesCount: function() {
return this.computedLeads.length;
},
filteredPrizesCount2: function() {
return this.computedSitevisits.length;
},
filterednegotation: function() {
return this.computedAdrelease.length;
},
filteredwon: function() {
return this.computedLive.length;
},
computedLeads: function () {
if((this.type=="")){
return this.users;
}
return this.users.filter(item => item.property_for == this.type);
},
computedSitevisits: function () {
if((this.type=="")){
return this.arrInProgress;
}
return this.arrInProgress.filter(item => item.property_for == this.type);
},
computedAdrelease: function () {
if((this.type=="")){
return this.arrTested;
}
return this.arrTested.filter(item => item.property_for == this.type);
},
computedLive: function () {
if((this.type=="")){
return this.arrDone;
}
return this.arrDone.filter(item => item.property_for == this.type);
}
}
};
</script>
<style>
/* light stylings for the kanban columns */
.kanban-column {
min-height: 300px;
}
</style>
Zerion Mini Shell 1.0