%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container-fluid" >
<b-dropdown id="dropdown-1" text="Actions" class="m-md-2">
<b-dropdown-item><a v-b-toggle href="#add-payment" @click.prevent>Add Paymemt</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#edit-member" @click.prevent>Edit Member</a></b-dropdown-item>
<b-dropdown-item><a v-b-toggle href="#add-memberimage" @click.prevent>Add Profile Image</a></b-dropdown-item>
</b-dropdown>
<div class="row" v-for="user in users" :key="user.id">
<div class="col-md-4">
<div class="card">
<div class="card-body profile">
<img v-bind:src="'/storage/uploads/'+user.profile_image" class="img-responsive profile-img"/>
<h4 class="profile-title">{{user.name}}</h4>
<h3>Member</h3>
<div class="contact-info">
<label for="">Membership Code</label>
<p>{{user.member_code}}</p>
</div>
<div class="contact-info">
<label for="">Email address</label>
<p>{{user.email}}</p>
</div>
<div class="contact-info">
<label for="">Alternative Email address</label>
<p>{{user.email2}}</p>
</div>
<div class="contact-info">
<label for="">Phone </label>
<p>{{user.phone}}</p>
</div>
<div class="contact-info">
<label for="">Secondary Phone </label>
<p>{{user.phone2}}</p>
</div>
<div class="contact-info">
<label for="">Designation </label>
<p>{{user.designation}}</p>
</div>
<div class="contact-info">
<label for="">Company </label>
<p>{{user.company_name}}</p>
</div>
<div class="contact-info">
<label for="">Company Address </label>
<p>{{user.company_address}}</p>
</div>
<div class="contact-info">
<label for="">Home Address </label>
<p>{{user.home_address}}</p>
</div>
<div class="contact-info">
<label for="">Proposed By </label>
<p>{{user.proposed_by}}</p>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
<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('payments')" :class="{ active: isActive('payments') }" href="#payments">Payment History</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('accounts')" :class="{ active: isActive('accounts') }" href="#accounts">Membership</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 activities1" :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}}-{{activity.created_at|fdate}}</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">{{activity.message}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('payments') }" id="payments">
<table class="table styled-table payment">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Date</th>
<th scope="col">Transaction Id</th>
<th scope="col">Transaction Type</th>
<th scope="col">Amount</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for ="payment in payments" :key="payment.id">
<th scope="row"></th>
<td>{{payment.date|fdate}}</td>
<td>{{payment.transaction_id}}</td>
<td>{{payment.transaction_type}}</td>
<td>{{payment.amount}}</td>
<td>{{payment.status}}</td>
<td> <b-button v-b-modal.modal-1 @click="sendInfo(payment)">Edit</b-button>
</td>
</tr>
</tbody>
</table>
<pagination :data="payments" :limit="10" @pagination-change-page="getResults"></pagination>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('documents') }" id="documents">documents content</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('accounts') }" id="accounts">accounts content</div>
</div>
</div>
</div>
</div>
</div>
<b-sidebar id="add-payment" title="Add Payment Details" class="wt4" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="addpayments()" class="form-task">
<div class="form-group">
<label for="">Select Date</label>
<input type="date" name="" id="" v-model="date" class="form-control">
</div>
<div class="form-group">
<label for="">Payment Method</label>
<select v-model="transaction_type" class="form-control">
<option value="1">Cash</option>
<option value="2">Online</option>
<option value="3">Cheque</option>
</select>
</div>
<div class="form-group" v-if="transaction_type==3">
<label for="">Cheque No</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="transaction_id">
<label for="">Bank</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="transaction_id">
</div>
<div class="form-group" v-else>
<label for="">Transaction Id</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="transaction_id">
</div>
<div class="form-group">
<label for="">Amount</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="amount">
</div>
<div class="form-group">
<label for="">Bank</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="bank">
</div>
<div class="form-group">
<label for="">Note</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" v-model="note"></textarea>
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
<b-modal id="modal-1" size="lg" title="Edit">
<form action="" method="POST" @submit.prevent="updateEvent()" >
<div class="form-group">
<label for="">Payment Date </label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="selectedUser.date">
</div>
<div class="form-group">
<label for="">Transaction Id </label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="selectedUser.transaction_id">
</div>
<div class="form-group">
<label for="">Transaction Type </label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="selectedUser.transaction_type">
</div>
<div class="form-group">
<label for="">Payment Amount </label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="selectedUser.amount">
</div>
<div class="form-group">
<label for="">Payment Status </label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="selectedUser.status">
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-modal>
<b-sidebar id="edit-member" title="Xls" class="wt4" right shadow backdrop backdrop-variant="dark">
<form action="" method="POST" @submit.prevent="updateMember()" class="form-task">
<div class="form-group">
<label for="">Membership</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.id">
</div>
<div class="form-group">
<label for="">Membership</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.member_code">
</div>
<div class="form-group">
<label for="">Name</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.name">
</div>
<div class="form-group">
<label for="">Email</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.email">
</div>
<div class="form-group">
<label for="">Alternative Email</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.email2">
</div>
<div class="form-group">
<label for="">Phone</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.phone">
</div>
<div class="form-group">
<label for="">Secondary Phone</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.phone2">
</div>
<div class="form-group">
<label for="">Designation</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.designation">
</div>
<div class="form-group">
<label for="">Company Name</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.company_name">
</div>
<div class="form-group">
<label for="">Company Address</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.company_address">
</div>
<div class="form-group">
<label for="">Home Address</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.home_address">
</div>
<div class="form-group">
<label for="">Proposed By</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.proposed_by">
</div>
<div class="form-group">
<label for="">GST NO </label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="memberdetails.gst">
</div>
<div class="form-group">
<label for="">Status</label>
<select v-model="memberdetails.status" class="form-control">
<option disabled value="">Please select one</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-sidebar>
<b-sidebar id="add-memberimage" title="Add Profile Image" class="wt4" right shadow backdrop backdrop-variant="dark">
<form @submit="formSubmit">
<input type="file" class="form-control" v-on:change="onChange">
<button class="btn btn-primary btn-block">Upload</button>
</form>
</b-sidebar>
</div>
</template>
<script>
import addtags from '../addtag.vue'
export default {
components: { addtags},
data(){
return {
id:this.$route.params.id,
clientid:1,
client_id:'',
transaction_id:'',
transaction_type:'',
amount:'',
date:'',
task:'',
method:'',
status:'success',
id:this.$route.params.id,
users:[],
ref:[],
ref_name:'',
ref_id:'',
tasks:{},
activeItem: 'activity',
properties:{},
leads:{},
profiles:[],
maintenances:[],
activities:[],
payments:{},
selectedUser:'',
update_id:'',
memberdetails:{
id:"",
member_code:"",
name:"",
email:"",
email2:"",
phone:"",
phone2:"",
designation:"",
company_address:"",
company_name:"",
home_address:"",
proposed_by:"",
status:"",
gst:"",
client:""
}
}
},
methods:{
loadusers(){
axios.get('/members/memberdetails/'+this.id) .then(response => {
this.users = response.data;
this.memberdetails.id =this.users[0].id;
this.memberdetails.member_code =this.users[0].member_code;
this.memberdetails.name =this.users[0].name;
this.memberdetails.email =this.users[0].email;
this.memberdetails.email2 =this.users[0].email2;
this.memberdetails.phone =this.users[0].phone;
this.memberdetails.phone2 =this.users[0].phone2;
this.memberdetails.designation =this.users[0].designation;
this.memberdetails.company_name =this.users[0].company_name;
this.memberdetails.company_address =this.users[0].company_address;
this.memberdetails.home_address =this.users[0].home_address;
this.memberdetails.proposed_by =this.users[0].proposed_by;
this.memberdetails.status =this.users[0].status;
this.memberdetails.gst =this.users[0].gst;
this.client_id=this.id;
this.loadref();
})
},
sendInfo(payment) {
this.selectedUser = payment;
this.update_id=this.selectedUser.id;
},
loadref(){
axios.get('/client/clientdetails/'+this.ref_id) .then(response => {
this.ref = response.data;
this.ref_name=this.ref[0].name;
})
},
loadtasks(){
axios.get('/tasks/gettasksuserid/'+this.id).then(response => {
this.tasks = response.data
})
},
loadpayments(){
axios.get('/payments/paymentdetails/'+this.id).then(response=> {this.payments=response.data})
},
updateEvent() {
axios.patch('/payments/'+this.update_id,this.selectedUser
) .then(response => {
this.$toaster.success('Event Added'),
this.loadproducts(),
this.$root.$emit('bv::toggle::collapse', 'sidebar-right')
})
},
loadMaintenances(){
axios.get('/maintenance/maintenancebyclient/'+this.id).then(response => {
this.maintenances = response.data
})
},
loadactivities(){
axios.get('/activities/'+this.id) .then(response => {
this.activities = response.data;
})
},
getResults(page = 1) {
axios.get('/tasks/taskdetails/'+this.id+'?page=' + page)
.then(response => {
this.tasks = response.data;
});
},
addtask(){
axios
.post('/tasks', {
client_id: this.client_id,
task: this.task,
status:this.status
}) .then(function (response) {
//handle success
console.log(response);
});
this.$root.$emit('bv::toggle::collapse', 'example-collapse')
},
addpayments(){
axios
.post('/payments', {
date:this.date,
client_id: this.id,
transaction_id: this.transaction_id,
transaction_type:this.transaction_type,
amount:this.amount,
status:this.status
}) .then(function (response) {
//handle success
this.loadpayments(),
console.log(response);
});
this.$root.$emit('bv::toggle::collapse', 'add-payment')
},
isActive (menuItem) {
return this.activeItem === menuItem
},
setActive (menuItem) {
this.activeItem = menuItem
},
getProperties:function(page = 1) {
axios.get('/properties/allclientproperties/'+this.id+'?page=' + page)
.then(response => {
this.properties = response.data;
});
},
loadproperties:function(){
axios.get('/properties/allclientproperties/'+this.id).then(({data})=> (this.properties = data));
},
updateMember() {
axios.post('/temporary',this.memberdetails
) .then(function (response) {
this.$root.$emit('bv::toggle::collapse', 'edit-member')
});
this.loadusers(),
this.$root.$emit('bv::toggle::collapse', 'edit-member')
},
getLeads:function(page = 1) {
axios.get('/leads/leaddetailsid/'+this.id+'?page=' + page)
.then(response => {
this.leads = response.data;
});
},
loadLeads:function(){
axios.get('/leads/leaddetailsid/'+this.id).then(({data})=> (this.leads = data));
},
onChange(e) {
this.file = e.target.files[0];
},
formSubmit(e) {
e.preventDefault();
let existingObj = this;
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
let data = new FormData();
data.append('file', this.file);
data.append('client', this.id);
axios.post('/members/imageupload', data, config)
.then(function (response) {
this.$toaster.success('Profile Image Added'),
this.$root.$emit('bv::toggle::collapse', 'add-memberimage')
})
.catch(function (err) {
existingObj.output = err;
});
}
},
created: function(){
this.loadusers(),
this.loadtasks(),
this.loadpayments(),
this.loadproperties(),
this.loadLeads(),
this.loadMaintenances(),
this.loadactivities()
}
}
</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;
}
.profile-title{
font-size: 19px;
text-align: center;
font-weight: bold;
padding-top: 12px;
}
</style>
Zerion Mini Shell 1.0