%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container" >
<div class="row" v-for="user in users" :key="user.leadid">
<div class="col-md-9">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-9">
<p>Request {{user.request}}</p>
</div>
<div class="col-md-3">
<p>{{user.created_at|fdate}}</p>
</div>
</div>
<div class="row">
<div class="col-md"><p>Location</p></div>
<div class="col-md"> <p>Client:{{user.client_id}}</p></div>
<div class="col-md"><p>Property: 6B DD Samudra </p> </div>
</div>
<b-sidebar id="add-file" class="w-50" title="Add file" right shadow backdrop backdrop-variant="dark">
<mfileupload />
</b-sidebar>
<div class="row">
<ul class="progressbar">
<li v-for="page in totalPages" :key="page.id" v-bind:class="myBtnClass(page.id)">
{{ page.text }}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="card-body">
<p>{{user.created_at|fdate}}</p>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('activity')" :class="{ active: isActive('activity') }" href="#activity">Activity</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('documents')" :class="{ active: isActive('documents') }" href="#documents">Documents</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('contractors')" :class="{ active: isActive('contractors') }" href="#contractors">Contractors</a>
</li>
<li class="nav-item">
<a class="nav-link" @click.prevent="setActive('Accounts')" :class="{ active: isActive('Accounts') }" href="#Accounts">Accounts</a>
</li>
</ul>
<div class="tab-content py-3" id="myTabContent">
<div class="tab-pane fade" :class="{ 'active show': isActive('activity') }" id="activity">
<div class="uk-container uk-padding">
<div class="uk-timeline" >
<div class="uk-timeline-item" v-for="activity in activities" :key="activity.id">
<div class="uk-timeline-icon">
<span class="uk-badge"><span uk-icon="check"></span></span>
</div>
<div class="uk-timeline-content">
<div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<h3 class="uk-card-title">{{activity.activity}}</h3>
<span class="uk-label uk-label-success uk-margin-auto-left"></span>
</div>
</div>
<div class="uk-card-body">
<p class="uk-text-success">
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('documents') }" id="documents">
<h2>Documents</h2>
<h3>ghghjhjg</h3>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('contractors') }" id="contractors">
<h2>contractors</h2>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('Accounts') }" id="Accounts">
<h2>Accounts</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<b-dropdown id="dropdown-1" text="Actions" class="m-md-2">
<b-dropdown-item><router-link to="/addticket">Assign Site Visit</router-link></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-task" @click.prevent>Add task</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#call-log" @click.prevent>Add Call Log</a></b-dropdown-item>
<b-dropdown-item>Add Quote</b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-file" @click.prevent>Add File</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-contractor" @click.prevent>Add Contractor</a></b-dropdown-item>
<b-dropdown-item> <a v-b-toggle href="#add-contract-value" @click.prevent>Add Contract Value</a></b-dropdown-item>
</b-dropdown>
</div>
<select class="form-control" v-model="selected" @change="updatestatus(selected)">
<option>Select Status</option>
<option value="1">Open</option>
<option value="2">Site Visit</option>
<option value="3">Quote in Progress</option>
<option value="4">Quoted</option>
<option value="5">Won</option>
<option value="6">Work Completed</option>
<option value="7">Invoice</option>
<option value="8">Rejected</option>
</select>
</div>
<!-- Call Log Sidebar -->
<b-sidebar id="call-log" class="w-50" title="Add Call Log" right shadow backdrop backdrop-variant="dark">
<form action="">
<input type="text" class="form-control">
</form>
<div class="form-group">
<label for="">Call Type</label>
<select name="" id="" class="form-control">
<option value="outgoing">Outgoing</option>
<option value="incoming">Incoming</option>
</select>
</div>
<div class="form-group">
<label for="">Call Response</label>
<select name="" id="" class="form-control">
<option value="Interested">Interested</option>
<option value="Left Message">Left Message</option>
<option value="No Response">No Response</option>
<option value="Not Interested">Not Interested</option>
<option value="Not able to reach">Not able to reach</option>
</select>
</div>
<div class="form-group">
<label for="">Notes</label>
<input type="text" class="form-control">
</div>
</b-sidebar>
<!-- Call Log Sidebar -->
<b-sidebar id="add-task" class="w-50" title="Add Task" right shadow backdrop backdrop-variant="dark">
<form action="/tasks" method="POST" @submit.prevent="addtask()" class="form-task">
<div class="form-group">
<input type="hidden" placeholder="Enter Client Phone" v-model="clientid" autocomplete="off" class="form-control input-lg" list="users"/>
</div>
<div class="form-group">
<input type="hidden" placeholder="Enter Client Phone" v-model="propertyid" autocomplete="off" class="form-control input-lg" list="users"/>
</div>
<div class="form-group">
<label for="task">Task</label>
<input type="text" class="form-control" name="task" v-model="task" placeholder="Task">
</div>
<div class="form-row">
<div class="form-group">
<label for="status">status</label>
<input type="text" class="form-control" name="status" v-model="taskstatus">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="assigned">Assigned</label>
<select class="form-control" name="template" v-model="assigned">
<option v-for="staff in staffs" :key="staff.id" :value="staff.id">
{{ staff.name }}
</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="duedatee">Due Date</label>
<input type="date" class="form-control" name="due_date" v-model="due_date">
</div>
</div>
<div class="form-group">
<input type="radio" name="" id="">Billable
<input type="radio" name="" id="">Non Billable
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
</div>
</div>
<b-sidebar id="add-contract-value" class="w-50" title="Add Client" right shadow backdrop backdrop-variant="dark">
<form action="">
<label for="">Client Amount</label>
<input type="text" name="" class="form-control">
<label for="">GST</label>
<input type="text" class="form-control">
<label for="">KFC</label>
<input type="text" class="form-control">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
<b-sidebar id="add-contractor" class="w-50" title="add-contractor" right shadow backdrop backdrop-variant="dark">
<addcontractor/>
</b-sidebar>
</div>
</template>
<script>
import mfileupload from './mfileupload'
import addclients from './clients/addclients'
import addcontractor from './addcontractor'
export default {
data(){
return {
id:this.$route.params.id,
clientid:'',
users:[],
tasks:[],
staffs:[],
contractors:[],
properties:{},
property_for:'',
property_type:'',
location:'',
min_budget:'',
max_budget:'',
selected:'',
activeItem: 'activity',
status:'',
activities:[],
works:[],
propertyid:'',
task:'',
taskstatus:'',
assigned:'',
due_date:'',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
activeItem: 'activity',
currentstep: 4,
// totalPages: ['Enquiry','Sitevisit'],
totalPages: [
{ id: 1, text: "Enquiry" },
{ id: 2, text: "Site Visit" },
{ id: 3, text: "Quote Progress" },
{ id: 4, text: "Quoted" },
{ id: 5, text: "Won/lost" }
],
currentPage:4,
current:1
}
},
methods:{
loadusers(){
axios.get('/maintenance/maintenancedetails/'+this.id) .then(response => {
this.users = response.data;
this.clientid=response.data[0].client_id;
this.propertyid=response.data[0].property_id;
this.selected= response.data[0].status;
})
},
loadactivities(){
axios.get('/maintenanceactivity/'+this.id) .then(response => {
this.activities = response.data;
})
},
loadstaffs(){
axios.get('/users') .then(response => {
this.staffs = response.data;
})
},
loadcontractors(){
axios.get('/contractors') .then(response => {
this.contractors = response.data;
})
},
addtask(){
axios
.post('/tasks', {
client_id:this.clientid,
property_id:this.propertyid,
task: this.task,
status:this.taskstatus,
assigned:this.assigned,
due_date:this.due_date
}) .then( response => this.$router.push({ path: '/tasks'}));
},
loadworks(){
axios.get('/maintenanceworks') .then(response => {
this.works = response.data;
})
},
alert(){
alert(this.selected);
},
updatestatus: function (id) {
axios.post('/maintenance/updatestatus/',{
id:this.id,
status:this.selected,
}) .then(response => {
})
window.location.reload()
},
loadproperties(){
axios.post('/properties/searchproperty', {
property_for: this.property_for,
property_type: this.property_type,
location:this.location,
min_budget:5000,
max_budget:35000
}).then(response => {
this.properties = response.data})
},
isActive (menuItem) {
return this.activeItem === menuItem
},
setActive (menuItem) {
this.activeItem = menuItem
},
myBtnClass: function(name) {
if(name<=this.selected)
return 'active'
else
return 'mope'
},
},
created: function(){
this.loadusers(),
this.loadworks(),
this. loadstaffs(),
this.loadactivities(),
this.loadcontractors()
},
computed:{
totalQuantity: function(){
console.log(this.works);
return this.works.reduce(function(total, item){
return total += parseFloat(item.totalamount);
},0);
},
}
}
</script>
<style scoped>
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: #ffffff;
background-color: #0d75dd;
border-color: #dee2e6 #dee2e6 #f8fafc;
}
#tasks ul {
padding: 0;
margin: 0;
list-style: none;
}
.progressbar {
width: 100%;
padding: 0%;
}
.progressbar li {
list-style-type: none;
width: 20%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
padding:10px;
border: 1px solid #eee;
background: #f3f2f2;
}
.progressbar li.active {
color: white;
font-weight: bold;
background: #3aac5d;
border-right: 1px solid #fff;
}
.progressbar li.active:before {
border-color: #55b776;
background: green;
}
.progressbar li.active + li:after {
background-color: #55b776;
}
</style>
Zerion Mini Shell 1.0