Untitled

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