Untitled

import { LightningElement, api, track, wire } from 'lwc';
import getAvailableAddons from '@salesforce/apex/ProductConfigurationController.getAvailableAddonsWithSelection';
import getTemplateAddons from '@salesforce/apex/ProductConfigurationController.getAvailableAddonsWithTemplateSelection';

import searchCLabel from '@salesforce/label/c.ProductConfiguration_SearchConfiguration';
import mainCLabel from '@salesforce/label/c.ProductConfiguration_ConfigSelector';
import closeCLabel from '@salesforce/label/c.ProductConfiguration_Close';
import addremoveCLabel from '@salesforce/label/c.ProductConfiguration_Add_RemoveConfig';
import removeAddonCLabel from '@salesforce/label/c.ProductConfiguration_RemoveAddon';
import addAddonCLabel from '@salesforce/label/c.ProductConfiguration_AddAddon';
import addonSelectedCLabel from '@salesforce/label/c.ProductConfiguration_AddonSelected';


export default class AddonAdder extends LightningElement {

    @api addonList;
    @api opportunityid;
    @api templateid;
    @api istemplatebased;

    @track showedAddonList;
    @track prodList;
    @track currentProd = {};

    deletedAddons = [];
    addedAddons = [];
    editedAddons = [];
    selectedAddons = [];
    allAddonList = [];

    @api isinflow = false;
    @api singleprod = {prodId: 'All'};

    nameColumn = 'ProductName';
    removeAddonLabel = removeAddonCLabel;
    addAddonLabel = addAddonCLabel;
    addonSelectedLabel = addonSelectedCLabel;
    mainLabel = mainCLabel;
    searchLabel = searchCLabel;
    closeLabel = closeCLabel;
    addremoveLabel = addremoveCLabel;

    connectedCallback(){
        console.log(JSON.stringify(this.singleprod));
        //If from template fill template entries
        if(this.istemplatebased){
            getTemplateAddons({
                opportunityId: this.opportunityid,
                productId: this.singleprod.prodId,
                templateId: this.templateid
            })
            .then((result) => {
                this.assignToAdded(result);
                console.log("Query result: " + JSON.stringify(result));
            });
        }
        else{
            getAvailableAddons({
                opportunityId: this.opportunityid,
                productId: this.singleprod.prodId
            })
            .then((result) => {
                this.wrapQueryResults(result);
                //console.log("Query result: " + JSON.stringify(result));
            });
        }
    }

    assignToAdded(result){
        var newItems = [];

        result.forEach(element => {
            element.Id = element.prodName;
            element.Name = element.prodName;
            element.Selected = false;

            newItems.push(element);
            this.allAddonList.push(...element.productList);

            element.productList.forEach(addon => {
                if(addon.Mandatory_Item__c){
                    this.addedAddons.push(addon);
                    addon.Selected = true;
                    this.selectedAddons.push(addon);
                }
                else if(addon.Selected){
                    this.selectedAddons.push(addon);
                    this.addedAddons.push(addon);
                    addon.Disabled = true;
                }
            });
        });
        
        this.prodList = newItems;
        if(this.prodList.length > 0){
            this.currentProd = this.prodList[0];
            this.prodList[0].Selected = true;
            this.showedAddonList = this.prodList[0].productList;
        }
    }

    wrapQueryResults(result){
        console.log("Addons: " + JSON.stringify(result));
    
        var newItems = [];
        result.forEach(element => {

            element.Id = element.prodName;
            element.Name = element.prodName;
            element.Selected = false;
    
            newItems.push(element);
            this.allAddonList.push(...element.productList);
            
            element.productList.forEach(addon => {
                if(addon.Mandatory_Item__c){
                    if(!addon.Selected){
                        this.addedAddons.push(addon);
                    }
                    addon.Selected = true;
                    this.selectedAddons.push(addon);
                } else if(addon.Selected){
                    this.selectedAddons.push(addon);
                    addon.Disabled = true;
                }
            });
        });

        this.prodList = newItems;
    
        if(this.prodList.length > 0){
            this.currentProd = this.prodList[0];
            this.prodList[0].Selected = true;
            this.showedAddonList = this.prodList[0].productList;
        }
    }

    closeModal(){
        this.dispatchEvent(new CustomEvent('closemodal', {
            detail: {
                message: 'Close modal'
            }
        }));
    }
    
    commitAddons(){
        let allFormsCorrect = true;
        this.template.querySelectorAll("lightning-record-edit-form").forEach(addonForm => {
            
            if(addonForm.dataset.mandatory === true){
                let currentFormCorrect = true;
                addonForm.querySelectorAll(
                    'lightning-input-field'
                ).forEach(inputField => {
                    console.log(inputField.dataset.field + " is required " + inputField.required);
                    if(currentFormCorrect){
                        currentFormCorrect = (inputField.required && inputField.value) || !inputField.required;
                    }
                });

                if(!currentFormCorrect){
                    allFormsCorrect = false;
                    addonForm.submit();
                }
            }
        })

        if(allFormsCorrect){
            console.log("All forms correct");
            const selectedEvent = new CustomEvent('addonsupdated', { detail: {
                added: this.addedAddons,
                deleted: this.deletedAddons,
                edited: this.editedAddons
            }, });
            this.dispatchEvent(selectedEvent);
        }
        else{
            console.log("Some forms false");
        }
    }

    handleAdd(event){
        if(event.preventDefault){
            event.preventDefault();
        }

        let addon = this.getAddonById(event.currentTarget.dataset.id);

        addon.Selected = true;
        addon.Disabled = true;

        if(!event.isTemplate){
            let fields = event.detail.fields;
            for(var key in fields){
                addon[key] = fields[key];
            }
        }
        else{
            console.log("ADDON: " + JSON.stringify(addon));
        }

        let deletedAddon = this.deletedAddons.find(element => {
            if(element.Id === addon.Id){
                return true;
            }});
        
        if(deletedAddon){
            console.log("Found index d " + deletedAddon.Id);
            this.deletedAddons.splice(this.deletedAddons.indexOf(deletedAddon), 1);
        }
        
        let selectedAddon = this.selectedAddons.find(element => {
            if(element.Id === addon.Id){
                return true;
            }});

        if(!selectedAddon){
            this.addedAddons.push(addon);
        }
        else{
            this.editedAddons.push(addon);
        }

        this.showedAddonList = [...this.showedAddonList];

    }

    handleFieldValueChanged(event){

    }

    validateIfAllFieldsAreFilled(event){

    }

    handleFieldChanged(event){

        if(event.currentTarget.dataset.mandatory !== true){
            return;
        }

        if(event.preventDefault){
            event.preventDefault();
        }

        let addedAddon = this.addedAddons.find(element => {
            if(element.Id === event.currentTarget.dataset.id){
                element[event.currentTarget.dataset.field] = event.detail.value;
                return true;
            }
        });

        if(!addedAddon){
            let editedAddon;
            try {
                editedAddon = this.editedAddons.find(element => {
                    if(element.Id === event.currentTarget.dataset.id){
                        element[event.currentTarget.dataset.field] = event.detail.value;
                        return true;
                    }
                });
            }
            catch(error){
                console.log(error);
            }

            if(!editedAddon){
                let selectedAddon = this.selectedAddons.find(element => {
                    if(element.Id === event.currentTarget.dataset.id){
                        element[event.currentTarget.dataset.field] = event.detail.value;
                        return true;
                    }
                });
                this.editedAddons.push(selectedAddon);
            }
        }
    }

    handleRemoveAddon(event){
        let selectedVal = event.currentTarget.dataset.id;

        let addon = this.getAddonById(event.currentTarget.dataset.id);
        
        let addedAddon = this.addedAddons.find(element => {
            if(element.Id === addon.Id){
                return true;
            }});

        if(addedAddon){
            this.addedAddons.splice(this.addedAddons.indexOf(addedAddon), 1);
        }

        let editedAddon = this.editedAddons.find(element => {
            if(element.Id === addon.Id){
                return true;
            }});

        if(editedAddon){
            this.editedAddons.splice(this.editedAddons.indexOf(editedAddon), 1);
        }

        addon.Selected = false;
        addon.Disabled = false;

        let selectedAddon = this.selectedAddons.find(element => {
            if(element.Id === addon.Id){
                return true;
            }});

        if(selectedAddon){
            this.deletedAddons.push(addon);
        }

        this.showedAddonList = [...this.showedAddonList];
    }

    getAddonById(id){
        let selectedAddon = undefined;
        this.showedAddonList.every( element => {
            if(element.Id === id){
                selectedAddon = element; 
                return false;
            }
            return true;
        });

        return selectedAddon;
    }

    handleSearch(event){
        const searchKey = event.target.value.toLowerCase();

        if (searchKey) {
            if (this.prodList) {
                let searchRecords = [];
                for (let record of this.currentProd.productList) {
                    
                    let strVal = record[this.nameColumn];
                    if (strVal) {
                        if (strVal.toLowerCase().includes(searchKey)) {
                            searchRecords.push(record);
                        }
                    }
                }

                this.showedAddonList = searchRecords;
            }
        } else {
            this.showedAddonList = this.currentProd.productList;
        }
    }

    handleOptionSelected(event){
        let selectedProduct = event.detail.option;

        let product = this.prodList.find( option => {
            if(option.prodName == selectedProduct.Name){
                return true;
            }
        });

        this.currentProd.Selected = false;
        product.Selected = true;

        this.currentProd = product;
        this.showedAddonList = this.currentProd.productList;
    }
}