%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container-fluid mt-5">
<div class="row">
<router-link to="/rentmarketingpipeline">Rent</router-link>
<router-link to="/salemarketingpipeline">Sale</router-link>
</div>
<div class="row mt-5">
<div class="col-3">
<div class="p-2 alert alert-secondary">
<h3>New Leads</h3>
<p> {{users.length}}results found</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>
<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>{{arrInProgress.length}} results found</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>
<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>{{arrTested.length}}</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"
>
<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>Live Properties</h3>
<p>{{arrDone.length}}</p>
<!-- Testing draggable component. Pass arrTested 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"
>
<p>{{ element.name }}</p>
<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:1
};
},
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/'+this.type).then(({data})=> (this.users = data));
axios.get('/propertyservice/sitevisits/'+this.type).then(({data})=> (this.arrInProgress = data));
axios.get('/propertyservice/addproperty/'+this.type).then(({data})=> (this.arrTested = data));
axios.get('/propertyservice/completed/'+this.type).then(({data})=> (this.arrDone = data));
}
},
created: function(){
this.loadusers()
},
};
</script>
<style>
/* light stylings for the kanban columns */
.kanban-column {
min-height: 300px;
}
</style>
Zerion Mini Shell 1.0