Untitled
unknown
plain_text
2 years ago
32 kB
4
Indexable
<template>
<div>
<!--Add Revenue Split-->
<Modal :full-height="true" @on-close="resetForm">
<template #trigger>
<div ref="openModalRevenueSplitsAction" >
<font-awesome-icon
v-if="datatableRevenueSplitData.length === 0"
class="transition-all duration-300 ease text-xl text-white flex justify-center items-center" :class="{
'rotate-180': !$store.state.app.sidebarShow
}"
:icon="['fas', 'plus']"
/>
</div>
</template>
<template #header>
<div class="text-gray-700 dark:text-gray-400">
Add Revenue Split Member
</div>
</template>
<template #body>
<div class="col-span-12">
<div class="col-span-12">
<div class="grid grid-cols-12 gap-8">
<div class="col-span-4">
<FormSelect
v-model="roleId"
:items="state.dropdown.roles"
label="Role Sales"
placeholder="Choose Role"
@change="handleRoleChange"
/>
</div>
<div class="col-span-4">
<FormSelect
v-model="employeeName"
:items="state.dropdown.salesPersons"
label="Sales Name"
@change="handleSalesNameChange"
/>
</div>
<div class="col-span-4">
<FormInput
id="percentage"
v-model="percentage"
:plaholder="percentage"
label="Percentage"
type="number"
/>
</div>
</div>
<div class="col-12 mt-8 flex justify-center items-center">
<div
class="w-4/5 text-center p-2 bg-primary text-white font-bold text-base lg:hover:text-white hover:bg-dark rounded-lg border-l-4 border-transparent"
role="button"
@click="addToDatatableRevenueSplitMember"
>
Add
</div>
</div>
<div class="col-12 mt-8 flex justify-left">
<div class="text-gray-700 dark:text-gray-400">Revenue Split Member
</div>
</div>
<div class="col-8 mt-1 mb-4">
<Datatable :is-loading="datatableRevenueSplitMember.isProcessing" :datatable="datatableRevenueSplitMember">
<DatatableHead>
<DatatableHeadTr>
<DatatableHeadTh
v-for="(datatableHead, index) in datatableRevenueSplitMember.columns" :key="'datatable-thead-th'+index"
@click="updateOrderColumnRevenueSplitMember(datatableHead.key)"
>{{ datatableHead.name }}</DatatableHeadTh>
</DatatableHeadTr>
</DatatableHead>
<DatatableBody class="text-sm">
<template v-if="datatableRevenueSplitMemberData.length > 0">
<DatatableBodyTr v-for="(revenueSplitMemberTableData, index) in datatableRevenueSplitMemberData" :key="'datatable-tbody-td'+index">
<DatatableBodyTd
v-for="(datatableBody, idx) in datatableRevenueSplitMember.columns" :key="'datatable-tbody-td-'+idx" :copy-text="revenueSplitMemberTableData[datatableBody.key]">
<template v-if="datatableBody.key === 'action'">
<div class="flex justify-center items-center">
<button class="bg-primary text-white p-2 rounded hover:bg-dark" @click="deleteDatatableRevenueSplitMember(revenueSplitMemberTableData.sales_person)">Delete</button>
</div>
</template>
<template v-else>
{{ revenueSplitMemberTableData[datatableBody.key] ?? '-' }}
</template>
</DatatableBodyTd>
</DatatableBodyTr>
</template>
</DatatableBody>
</Datatable>
</div>
<div class="col-12 mt-8 flex justify-center items-center">
<div
class="w-4/5 text-center p-2 bg-primary text-white font-bold text-base lg:hover:text-white hover:bg-dark rounded-lg border-l-4 border-transparent"
role="button"
@click="handleCreateRevenueSplit"
>
Save
</div>
</div>
<div class="col-12 flex justify-center items-center pt-3 pb-3 pl-0 pr-0">
<div
class="w-4/5 text-center p-2 bg-gray-200 text-black font-bold text-base lg:hover:text-black hover:bg-gray-400 rounded-lg border-l-4 border-transparent"
role="button"
@click="closeModal()"
>
Cancel
</div>
</div>
</div>
</div>
</template>
</Modal>
<!--Edit Revenue Split-->
<Modal :full-height="true" @on-close="resetForm">
<template #trigger>
<div ref="openEditModalRevenueSplitAction">
</div>
</template>
<template #header>
<div class="text-gray-700 dark:text-gray-400">Edit Revenue Split
</div>
</template>
<template #body>
<div class="col-span-12">
<div class="col-span-12">
<div class="col-8 mt-1 mb-4">
<Datatable :is-loading="datatableRevenueSplitMember.isProcessing" :datatable="datatableRevenueSplitMember">
<DatatableHead>
<DatatableHeadTr>
<DatatableHeadTh
v-for="(datatableHead, index) in datatableRevenueSplitMember.columns" :key="'datatable-thead-th'+index"
@click="updateOrderColumnRevenueSplitMember(datatableHead.key)"
>{{ datatableHead.name }}</DatatableHeadTh>
</DatatableHeadTr>
</DatatableHead>
<DatatableBody class="text-sm">
<template v-if="datatableRevenueSplitMemberData.length > 0">
<DatatableBodyTr v-for="(revenueSplitMemberTableData, idx) in datatableRevenueSplitMemberData" :key="'datatable-tbody-td-'+idx">
<DatatableBodyTd
v-for="(datatableBody, index) in datatableRevenueSplitMember.columns" :key="'datatable-tbody-td-'+index" :copy-text="revenueSplitMemberTableData[datatableBody.key]"
>
<template v-if="datatableBody.key === 'no'">
{{ ++idx }}
</template>
<template v-else-if="datatableBody.key === 'percentage'">
<template v-if="revenueSplitMemberTableData[datatableBody.key] != 0">
<b>{{ revenueSplitMemberTableData[datatableBody.key] + '%' ?? '-' }}</b>
</template>
<template v-else>
{{ revenueSplitMemberTableData[datatableBody.key] + '%' ?? '-' }}
</template>
<input v-model="revenueSplitPercentage[revenueSplitMemberTableData['employee_id']]" class="form-control form-control-sm" >
</template>
<template v-else>
{{ revenueSplitMemberTableData[datatableBody.key] ?? '-' }}
</template>
</DatatableBodyTd>
</DatatableBodyTr>
</template>
</DatatableBody>
</Datatable>
</div>
<div class="col-12 mt-10 flex justify-center items-center">
<div
class="w-4/5 text-center p-2 bg-primary text-white font-bold text-base lg:hover:text-white hover:bg-dark rounded-lg border-l-4 border-transparent"
role="button"
@click="handleUpdateRevenueSplit"
>
Save
</div>
</div>
<div class="col-12 flex justify-center items-center pt-3 pb-3 pl-0 pr-0">
<div
class="w-4/5 text-center p-2 bg-gray-200 text-black font-bold text-base lg:hover:text-black hover:bg-gray-400 rounded-lg border-l-4 border-transparent"
role="button"
@click="closeModal('edit')"
>
Cancel
</div>
</div>
</div>
</div>
</template>
</Modal>
<!--Edit Detail-->
<Modal :full-height="true">
<template #trigger>
<div ref="openEditDetailModalRevenueSplitAction">
</div>
</template>
<template #header>
<div class="text-gray-700 dark:text-gray-400">Edit Detail Revenue Split
</div>
</template>
<template #body>
<div class="col-span-12">
<div class="col-span-12">
<div class="grid grid-cols-12 gap-8">
<div class="col-span-4">
<FormSelect
v-model="roleIdEdit"
:items="state.dropdown.roles"
label="Role Sales"
placeholder="Choose Role"
@change="handleRoleChange"
/>
</div>
<div class="col-span-4">
<FormSelect
v-model="employeeNameEdit"
:items="state.dropdown.salesPersons"
label="Sales Name"
@change="handleEditSalesNameChange"
/>
</div>
<div class="col-span-4">
<FormInput
id="percentage"
v-model="percentageEdit"
:plaholder="percentageEdit"
label="Percentage"
type="number"
/>
</div>
</div>
<div class="col-12 mt-10 flex justify-center items-center">
<div
class="w-4/5 text-center p-2 bg-primary text-white font-bold text-base lg:hover:text-white hover:bg-dark rounded-lg border-l-4 border-transparent"
role="button"
@click="handleSaveEditRevenueSplit"
>
Save
</div>
</div>
<div class="col-12 flex justify-center items-center pt-3 pb-3 pl-0 pr-0">
<div
class="w-4/5 text-center p-2 bg-gray-200 text-black font-bold text-base lg:hover:text-black hover:bg-gray-400 rounded-lg border-l-4 border-transparent"
role="button"
@click="closeModalDetail()"
>
Cancel
</div>
</div>
</div>
</div>
</template>
</Modal>
</div>
</template>
<script>
export default {
data(){
return {
}
},
computed: {
revenueSplitPercentage: {
get() {
return []
},
set(value) {
console.log(value)
}
},
state() {
return this.$store.state.sales.opportunity.revenueSplit
},
roleId: {
get() {
return this.state.formInput.role_id
},
set(value) {
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInput', {
key: 'role_id',
value
})
}
},
roleIdEdit: {
get() {
return this.state.formInput.edit.role_id
},
set(value){
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'role_id',
value
})
}
},
employeeNameEdit: {
get(){
return this.state.formInput.edit.employee_id_to_update
},
set(value){
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'employee_id_to_update',
value
});
}
},
percentageEdit: {
get(){
return this.state.formInput.edit.percentage
},
set(value){
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'percentage',
value
})
}
},
employeeName: {
get() {
return this.state.formInput.contact_id
},
set(value) {
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInput', {
key: 'contact_id',
value
})
}
},
percentage: {
get(){
return this.state.formInput.percentage;
},
set(value){
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInput', {
key: 'percentage',
value
})
}
},
datatableRevenueSplitMember() {
return this.$store.state.sales.opportunity.revenueSplit.datatable.revenueSplitMember
},
datatableRevenueSplitMemberData() {
return this.$store.state.sales.opportunity.revenueSplit.datatable.data.revenueSplitMembers
},
datatableRevenueSplitData(){
return this.$store.state.sales.opportunity.revenueSplit.datatable.data.revenueSplits
},
},
mounted(){
this.$store.dispatch('sales/opportunity/revenueSplit/getDropDownRolesRevenueSplit')
this.$store.dispatch('sales/opportunity/revenueSplit/getDropDownSalesPersonRevenueSplit')
},
methods: {
test(){
console.log(arguments)
},
handleSaveEditRevenueSplit(){
const data = this.$store.state.sales.opportunity.revenueSplit.formInput.edit;
this.$store.dispatch('sales/opportunity/revenueSplit/updateRevenueSplitMember', data);
this.$store.dispatch('sales/opportunity/revenueSplit/clearFormEdit')
this.closeModalDetail();
},
deleteDatatableRevenueSplitMember(salesTeamId){
this.$store.dispatch('sales/opportunity/revenueSplit/deleteDatatableRevenueSplitMember', salesTeamId)
},
handleRoleChange(value){
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInput', {
key: 'role_sales_name',
value: value.name
})
},
handleSalesNameChange(value){
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInput', {
key: 'sales_person_name',
value: value.name
})
},
handleEditSalesNameChange(value){
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'employee_name',
value: value.name
})
},
closeModal(type){
type === undefined ? this.$refs.openModalRevenueSplitsAction.click() : this.$refs.openEditModalRevenueSplitAction.click()
},
closeModalDetail(){
this.$refs.openEditDetailModalRevenueSplitAction.click()
},
addToDatatableRevenueSplitMember(){
// set data to add
const input = {
no: parseInt(this.datatableRevenueSplitMemberData.length + 1),
employee_id: this.state.formInput.contact_id,
role_id: this.state.formInput.role_id,
percentage: this.state.formInput.percentage,
task_category: this.state.formInput.role_sales_name,
employee_name: this.state.formInput.sales_person_name,
}
// check with validation
const validate = this.$store.dispatch('sales/opportunity/revenueSplit/validateAddRevenueSplitMember', input);
// if everything is ok
validate.then(result => {
if (result.status !== false){
this.$store.dispatch('sales/opportunity/revenueSplit/setDatatableDataRevenueSplitMember', input)
this.$store.dispatch('sales/opportunity/revenueSplit/clearForm');
} else {
let message = '';
result.message.forEach(x => {
message += x + '.\n';
});
this.$store.dispatch(
'toast/addToast',
{
message,
type: 'error',
lifetime: 2000,
},
{ root: true }
)
}
})
},
addToDatatableRevenueSplitMemberEdit(){
// set data to add
const input = {
no: parseInt(this.datatableRevenueSplitMemberData.length + 1),
employee_id: this.state.formInput.contact_id,
role_id: this.state.formInput.role_id,
percentage: this.state.formInput.percentage,
task_category: this.state.formInput.role_sales_name,
employee_name: this.state.formInput.sales_person_name,
}
// check with validation
const validate = this.$store.dispatch('sales/opportunity/revenueSplit/validateAddRevenueSplitMember', input);
//
const formInput = this.$store.state.sales.opportunity.revenueSplit.formInput;
// const validate = this.$store.dispatch('sales/opportunity/revenueSplit/validateRevenueSplitMember', formInput);
validate.then(result => {
if (result.status !== false){
// populate data
const data = {
employee_id: this.employeeName,
employee_name: formInput.sales_person_name,
percentage: parseInt(this.percentage),
revenue_split_employee_id: '',
role_id: this.roleId,
status: '',
revenue_split_id: parseInt(formInput.revenue_split_id),
employee_id_to_update: this.employeeName,
task_category: formInput.role_sales_name,
}
this.$store.dispatch('sales/opportunity/revenueSplit/setDatatableDataRevenueSplitMember', data)
this.$store.dispatch('sales/opportunity/revenueSplit/clearFormEdit');
this.$store.dispatch('sales/opportunity/revenueSplit/clearForm');
} else {
let message = '';
result.message.forEach(x => {
message += x + '.\n';
});
this.$store.dispatch(
'toast/addToast',
{
message,
type: 'error',
lifetime: 2000,
},
{ root: true }
)
}
}).catch(e => {
this.$helpers.errorHandler(e);
})
},
async handleCreateRevenueSplit(){
// read from state.datatable.data.revenueSplitMembers
const dataRevenueSplitMembers = this.datatableRevenueSplitMemberData;
// push to state.formInput.create.list_revenue_split_employee
dataRevenueSplitMembers.forEach(x => {
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputCreateRevenueSplitEmployee', {
key: 'list_revenue_split_employee',
value: {
employee_id: x.employee_id,
role_id: x.role_id,
percentage: parseInt(x.percentage)
}
})
})
// populate state.formInput.create.revenue_split
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputCreateRevenueSplitEmployee', {
key: 'revenue_split',
value: {
opportunity_id: this.state.custom.opportunity_id,
approver_comment: this.state.custom.approver_comment ?? '',
revenue_split_owner: this.state.custom.revenue_split_owner,
}
});
await this.$store.dispatch('sales/opportunity/revenueSplit/createRevenueSplit')
// if state clear, which means everything ok, close modal
if (this.state.formInput.create.list_revenue_split_employee[0].employee_id === null){
// load new data and close modal
await this.$store.dispatch('sales/opportunity/revenueSplit/getOpportunityDetailRevenueSplit');
this.closeModal();
}
},
async handleUpdateRevenueSplit(){
console.log(this.revenueSplitPercentage)
// count percentage from this.revenueSplitPercentage
let totalPercentage = 0;
this.revenueSplitPercentage.forEach((x, index) => {
console.log(index, " -> ", x)
totalPercentage += parseInt(x);
})
console.log(totalPercentage)
debugger;
const stateDatatableRevenueSplitMember = this.datatableRevenueSplitMemberData;
const data = [...stateDatatableRevenueSplitMember];
await this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputUpdate', data);
await this.$store.dispatch('sales/opportunity/revenueSplit/updateRevenueSplit', data);
await this.$store.dispatch('sales/opportunity/revenueSplit/getOpportunityDetailRevenueSplit');
// if state clear, which means everything ok, close modal
this.closeModal('edit');
},
async handleEditActionMethod(event){
const action = event.target.value;
if (action.split("_")[0] === "EDIT") {
const employeeId = action.split("_")[1];
const findData = this.$store.state.sales.opportunity.revenueSplit.datatable.data.revenueSplitMembers.find(x => x.employee_id === employeeId);
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'revenue_split_employee_id',
value: findData.revenue_split_employee_id
});
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'employee_id',
value: findData.employee_id
});
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'role_id',
value: findData.role_id
});
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'percentage',
value: findData.percentage
});
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'employee_name',
value: findData.employee_name
});
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'status',
value: findData.status
});
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'task_category',
value: findData.task_category
});
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'employee_id_to_update',
value: findData.employee_id
});
this.$store.dispatch('sales/opportunity/revenueSplit/setFormInputEdit', {
key: 'revenue_split_id',
value: findData.revenue_split_id
});
this.$refs.openEditDetailModalRevenueSplitAction.click();
} else {
const confirmResponse = await this.$beautifyAlert.confirm({
text: 'Are you sure?'
})
if (confirmResponse.isConfirmed) {
this.$store.dispatch('sales/opportunity/revenueSplit/deleteDatatableRevenueSplitMember', action.split("_")[1])
}
}
event.target.selectedIndex = 0;
},
handleRemoveRevenueSplit(){
this.$refs.openEditModalRevenueSplitAction.click()
},
openEditModal(opportunityContactId){
this.$refs.openEditModalRevenueSplitAction.click();
},
setOpportunityRevenueSplitId(opportunityRevenueSplitId){
this.$store.commit('sales/opportunity/revenueSplit/SET_FORM_INPUT', {
key: 'opportunityRevenueSplitId',
value: opportunityRevenueSplitId
});
},
resetForm(){
this.$store.commit('sales/opportunity/revenueSplit/CLEAR_FORM');
this.$store.commit('sales/opportunity/revenueSplit/CLEAR_FORM_UPDATE');
this.$store.commit('sales/opportunity/revenueSplit/CLEAR_FORM_EDIT');
this.$store.commit('sales/opportunity/revenueSplit/CLEAR_DATATABLE_REVENUESPLITMEMBER');
},
updateOrderColumnRevenueSplitMember(columnName){
this.$store.dispatch('sales/opportunity/revenueSplit/setDatatableSplitMemberOrderColumn', columnName)
}
}
}
</script>Editor is loading...