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...