OperatorProfile = function( operator, options ) {

    let instance = this;

    instance.operatorId = 0;
    let operatorData =  $.extend( true, {}, operator );
    operatorData = $.extend( true, { operatorId : 0 }, operatorData );


    instance.options = $.extend( true, {}, options );

    if( ! instance.options.initialTabId ) {
        instance.options.initialTabId = "detail";
    }

    instance.portfolio = instance.options.portfolio;

    instance.operatorId = operatorData.operatorId;

    if( ! options.initialDataReady ) {
        options.initialDataReady = false;
        instance.data = { operatorId : instance.operatorId };
    } else {
        instance.data = operatorData;
    }

    instance.readyPromise = $.Deferred();


}

OperatorProfile.openPopupEditor = function( operatorId ) {

    let savePromise = $.Deferred();

    let popup = $("<div>").dxPopup( {
            title : "Operator Profile",
            height : "85vh",
            width : "85vw",
            contentTemplate : function() {
                let op = new OperatorProfile( { operatorId : operatorId }, { initialDataReady : false } );
                return op.element();
            },
            onHidden : function( e ) {
                e.component.element().remove();
                e.component.dispose();
            }
        }).appendTo( $("body")).dxPopup( "instance" );

    popup.show();

    return savePromise;

}

OperatorProfile.prototype.constructor = OperatorProfile;


OperatorProfile.prototype.ready = function() {
    return this.readyPromise.promise();
}

OperatorProfile.prototype.load = function( operatorPorfolioListRefreshNeeded ) {

    let instance = this;

    let d = $.Deferred();

    let waitingFor = {
        data : instance.options.initialDataReady ? false : true, // if we already have the data, then no need to loaded it
        flexValues : true,
        flexTabs : instance.flexTabs ? false : true,
        flexFields : instance.flexFields ? false : true
    }

    // setting this to false so that if the load method is called again it will load the data
    instance.options.initialDataReady = false;

    d.progress( function( notify ) {

        waitingFor[notify.id] = false;
        if( ! waitingFor.data && ! waitingFor.flexTabs && ! waitingFor.flexFields && ! waitingFor.flexValues ) {


            let fieldsByCategory = DevExpress.data.query( instance.flexFields ).groupBy( "category" ).sortBy( "sortRank" ).thenBy( "label" ).toArray();
            instance.fieldCategoryStore = new DevExpress.data.ArrayStore( { data : fieldsByCategory, key : "key" } );
        
            instance.flexTabs.forEach( function( flexTab ) {

                flexTab.hasFields = false;

                flexTab.categories.forEach( function( category ) {

                    if( ! category.fields ) {
                        category.hasFields = false;
                        instance.fieldCategoryStore.byKey( category.name ).done( function( data ) {
                            category.fields = data.items;
                            category.hasFields = true;
                            flexTab.hasFields = true;
                        })
                        if( ! category.fields ) {
                            category.fields = [];
                        }
                    }

                });

            })



            d.resolve( instance.data );
            instance.readyPromise.resolve( instance.data );
        }

    }) 

    let loadPanel = $("<div>").dxLoadPanel( {
        message : "Loading...",
        closeOnOutsideClick : false,
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).appendTo( $("body") ).dxLoadPanel( "instance" )
    
    loadPanel.show();

    if( waitingFor.flexFields ) {
        let dataSource = Fse.Data.newDataSource( { object : "OPR.flexFields", paginate : false, keyField : "fieldId" });
        dataSource.load().done( function( data ) {
            instance.flexFields = data;
            d.notify( { id : "flexFields", data } )
        })
    }

    if( waitingFor.flexTabs ) {
        let dataSource = Fse.Data.newDataSource( { object : "OPR.flexTabs", paginate : false, keyField : "displayName", objectParams : { operatorId : instance.operatorId } });
        dataSource.load().done( function( data ) {
            instance.flexTabs = data;
            d.notify( { id : "flexTabs", data } )
        })
    }

    let flexDataSource = Fse.Data.newDataSource( { object : "OPR.flexValues", paginate : false, objectParams : { operatorId : instance.operatorId } });
    flexDataSource.load().done( function( data ) {
        instance.flexValues = data;
        d.notify( { id : "flexValues", data } )
    })

    if( waitingFor.data ) {
        let dataSource = Fse.Data.newDataSource( { object : "OPR.operatorDetails", paginate : false, keyField : "operatorId", objectParams : { operatorId : instance.operatorId }  });
        dataSource.load().done( function( data ) {
            instance.data = data[0];
            d.notify( { id : "data", data : instance.data } );
        })
    }

    d.done( function() {
        loadPanel.hide();
        if( instance.portfolio ) {

            instance.portfolio.currentOperator = instance.data;
            console.log( "Mark 1" );
            instance.portfolio.repaintHeading();

            if( operatorPorfolioListRefreshNeeded ) {
                instance.portfolio.listRefreshNeeded = true;
            }
        }
    })

    return d;

}

OperatorProfile.prototype.refresh = function() {
    let instance = this;
    instance.load().done( function() {
        instance.createUI();
    });

}

OperatorProfile.prototype.element = function() {

    let instance = this;

    if( instance.rootElement ) {
        return instance.rootElement;
    }


    instance.rootElement = $("<div>").css( { "height" : "100%" });

    instance.load().done( function() {
        instance.createUI( instance.options.initialTabId );
    });

    return instance.rootElement;


}

OperatorProfile.prototype.getCurrentTabId = function() {

    let tabId = null;

    if( this.tabPanel ) {
        tabId = this.tabPanel.option( "selectedItem" ).id;
    }

    return tabId;

}

OperatorProfile.prototype.createUI = function( tabId ) {

    let instance = this;


    instance.rootElement.empty();    

    let filesTabEnabled = Fse.Portal.getConfiguration( "OPR.profile.filesTabEnabled" ) == "true" ? true : false;
    let notesTabEnabled = Fse.Portal.getConfiguration( "OPR.profile.notesTabEnabled" ) == "true" ? true : false;
    let purchasingTabEnabled = Fse.Portal.getConfiguration( "OPR.profile.purchasingTabEnabled" ) == "true" ? true : false;
    let objectiveTabEnabled = Fse.Portal.getConfiguration( "OPR.profile.objectiveTabEnabled" ) == "true" ? true : false;

    let tabs = [
        { id : "detail", title : "Details", 
            template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( ( new OperatorDetails( instance ) ).element() ) }
        }
    ];

    instance.flexTabs.forEach( function( flexTab ) {
        if( flexTab.hasFields ) {
            tabs.push( {
                id : flexTab.displayName, title : flexTab.displayName,
                template : function() {
                    return $("<div>").css( { "height" : "100%", "padding" : "8px" } ).append( instance.flexTabTemplate( flexTab, instance.data ));
                }
            })
        }
    })


    tabs.push( 
        { id : "contact", title : "Contacts", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.contactsTabTemplate( instance.data )) }}
    );
    if( purchasingTabEnabled && Fse.Portal.checkPermission( "OperatorProfilePurchasing" )) {
        tabs.push( 
            { id : "purchasing", title : "Purchasing", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.purchasingTabTemplate( instance.data )) }}
        )
    }

    if( Fse.Portal.checkPermission( "BCRMCallTracking" ) ) {
        tabs.push( 
            { id : "interactions", title : "Interactions", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.interactionsTabTemplate( instance.data )) }}
        );
    }


    if( instance.data.isChainHQ ) {
        tabs.push ( 
            { id : "units", title : "Units", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.unitsTabTemplate( instance.data )) }}
        )
    } else if ( instance.data.isGPO || instance.data.isCMC ) {
        tabs.push ( 
            { id : "members", title : "Members", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.membersTabTemplate( instance.data )) }}
        )
    }

    if( Fse.Portal.getConfiguration( "CRM.tastewiseEnabled" ) == "true" && instance.data.tastewiseId ) {
        tabs.push( 
            { id : "tastewiseMenu", title : "Menu", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.tastewiseMenuTabTemplate( instance.data )) }}
        )
    }

    if( Fse.Portal.getConfiguration( "OPR.profile.combineOpportunitiesWithPurchasingTab" ) == "false" ) {
        tabs.push( 
            { id : "opportunities", title : "Opportunities", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.opportunitiesTabTemplate( instance.data )) }}
        );
    }

    if( objectiveTabEnabled && Fse.Portal.checkPermission( "BCRMMyObjectives" )) {
        tabs.push( 
            { id : "objectives", title : "Objectives", template : function() { 
                return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.objectivesTabTemplate( instance.data ))    
            }}
        )
    }

    tabs.push( 
        { id : "tasks", title : "Tasks", template : function() { 
            return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.tasksTabTemplate( instance.data ))    
        }}
    )


    if( ( Fse.Portal.appConfiguration.STP.ownerType == "MFR" || Fse.Portal.appConfiguration.STP.ownerType == "BRO" ) && Fse.Portal.checkPermission( "TradeManagement" )) {
        tabs.push( 
            { id : "trade", title : "Trade", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.tradeTabTemplate( instance.data )) }}
        );
    } else if ( Fse.Portal.appConfiguration.STP.ownerType == "BRO" && Fse.Portal.checkPermission( "BidManagement" )) {
        tabs.push( 
            { id : "bids", title : "Bids", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.bidsTabTemplate( instance.data )) }}
        );
    }

    if( notesTabEnabled ) {
        tabs.push( 
            { id : "notes", title : "Notes", template : function() { return $("<div>").css( { "padding" : "8px", "height" : "100%" } ).append( instance.notesTabTemplate( instance.data )) }}
        )
    }

    if( filesTabEnabled ) {
        tabs.push( 
            { id : "files", title : "Files", template : function() { return $("<div>").css( { "height" : "100%", "padding" : "8px" } ).append( instance.filesTabTemplate( instance.data )) }}
        );
    }

    let tabIndex = 0;
    for( tx = 0; tx < tabs.length; tx++ ) {
        if( tabs[tx].id == tabId ) {
            tabIndex = tx;
            break;
        }
    }

    // remove the old panels if they exist
    if( instance.tabPanel ) {

        tabIndex = instance.tabPanel.option( "selectedIndex" );
        instance.tabPanel.element().remove();
        instance.tabPanel.dispose();
        instance.tabPanel = null;
    }

    let tabConfig = {
        items : tabs,
        selectedIndex : tabIndex,
        swipeEnabled : false,
        height : "100%",
    };


    instance.tabPanel = $("<div>").dxTabPanel( tabConfig ).dxTabPanel( "instance" ); 

    instance.rootElement.css( { "height" : "100%" } ).append( instance.tabPanel.element() );


}

OperatorProfile.prototype.contactsTabTemplate = function( data ) {
    let instance = this;

    if( instance.contactList ) {
        instance.contactList.element().remove();
        instance.contactList = null;
    }

    instance.contactList = new PartnerContactList( { partnerId : data.operatorId, partnerType : 'OPR' , primaryContactId : data.primaryContactId } )

    return instance.contactList.element();

 
}

OperatorProfile.prototype.tastewiseMenuTabTemplate = function( data ) {
    let t = new OperatorTastewiseMenu( data );
    return t.element();
}

OperatorProfile.prototype.filesTabTemplate = function( data ) {

    let assetGrid = new AssetGrid( { 
        contentDomain : "OPR", 
        containerType : "OPR", 
        containerId : data.operatorId,
        visibleColumns : [ "fileExt", "docTitle", "docDescription", "updateDate", "buttons" ],
        categoryEnabled : false
     });

     return assetGrid.element();
}



OperatorProfile.prototype.bidsTabTemplate = function( data ) {

    let instance = this;

    if( instance.bidTab ) {
        instance.bidTab.element().remove();
        instance.bidTab = null;
    }

    instance.bidTab = new PartnerBids( { partnerType : "OPR", partnerId : data.operatorId } )

    return instance.bidTab.element();
}

OperatorProfile.prototype.membersTabTemplate = function( data ) {
    let operatorMembers = new OperatorMembers( data );
    return operatorMembers.element();
}

OperatorProfile.prototype.unitsTabTemplate = function( data ) {

    let operatorUnits = new OperatorUnits( data );
    return operatorUnits.element();

}
OperatorProfile.prototype.purchasingTabTemplate = function( data ) {

    let operatorPurchasing = new OperatorPurchasing( data );
    return operatorPurchasing.element();

}
OperatorProfile.prototype.tradeTabTemplate = function( data ) {
    let instance = this;

    if( instance.tradeTab ) {
        instance.tradeTab.element().remove();
        instance.tradeTab = null;
    }

    instance.tradeTab = new PartnerTrade( { partnerType : "OPR", partnerId : data.operatorId } )

    return instance.tradeTab.element();
}

OperatorProfile.prototype.tasksTabTemplate = function( data ) {

    let instance = this;

    if( instance.tasksTab ) {
        instance.tasksTab.element().remove();
        instance.tasksTab = null;
    }

    instance.tasksTab = new PartnerTasks( { partnerType : "OPR", partnerId : data.operatorId } )

    return instance.tasksTab.element();

}

OperatorProfile.prototype.interactionsTabTemplate = function( data ) {

    let instance = this;
    if( instance.interactionsTab ) {
        instance.interactionsTab.element().remove();
        instance.interactionsTab = null;
    }

    instance.interactionsTab = new PartnerInteractions( { partnerType : "OPR", partnerId : data.operatorId }  )

    return instance.interactionsTab.element();

}


OperatorProfile.prototype.opportunitiesTabTemplate = function( data ) {

    let opportunityList = new OpportunityList( {
        partnerId : data.operatorId, partnerType : "OPR", height : 575,  allowAdd : Fse.Portal.checkPermission( 'SalesPipelineWrite' ) ? true : false
    })

    let content = $("<div>").append( opportunityList.element() );

    setTimeout( function() {
        opportunityList.applyFilters();
    }, 100 );
    
    
    return content;
}

OperatorProfile.prototype.notesTabTemplate = function( data ) {
    let instance = this;

    if( instance.notesTab ) {
        instance.notesTab.element().remove();
        instance.notesTab = null;
    }

    instance.notesTab = new PartnerNotes( { partnerType : "OPR", partnerId : data.operatorId, allowFiles : false } );

    return instance.notesTab.element();
}



OperatorProfile.prototype.flexTabTemplate = function( flexTab, data ) {

    let instance = this;
    if( flexTab.form ) {
        flexTab.form.element().remove();
        flexTab.form.dispose();
        flexTab.form = null;
    }

    let formData = {
        categories : []
    };



    let formItems = [];

    flexTab.categories.forEach( function( category ) {

        if( ! category.hasFields ) {
            return;
        }

        formData.categories.push( category.name );

        if( instance.flexValues[0][category.name] ) {
            let values = {};  values[category.name] = instance.flexValues[0][category.name];
            $.extend( true, formData, values );
        }


        let categoryItem = {
            itemType : "group", caption : category.title, items : []
        }

        // instance.buildFlexFieldItems( category.fields, categoryItem.items );
        FlexFields.buildFormItems( category.fields, categoryItem.items, 1 );

        formItems.push(  categoryItem );

    })


    // let template = $("<div>").css( { "padding" : "10px" } );

    //let scrollView = $("<div>").css( { "padding-bottom" : "10px" } );

    flexTab.form = $("<div>").dxForm( {
        height : "100%",
        items : formItems,
        formData : formData
    }).dxForm( "instance" );

    // scrollView.append( flexTab.form.element() ).dxScrollView(
    //     {
    //         height : 500
    //     }
    // ).appendTo( template );

    let toolbar = $("<div>").dxToolbar( {
        items : [
            { location : "after",
              widget : "dxButton",
              options : {
                text : "Save",
                type : "default",
                onClick : function( e ) {

                    let vr = flexTab.form.validate();
                    if( ! vr.isValid ) {
                        return;
                    }
                    
                    let dataToSend = { 
                        operatorId : data.operatorId,
                        flexValues : flexTab.form.option( "formData" )
                    }

                    Fse.Ajax.performAction( {
                        object : "OPR.saveFlexValues", 
                        data : dataToSend
                    }).done( function( result ) {

                        Fse.UI.toast( `${flexTab.displayName} Saved`, "success", 1000 );
            
                    });

                }
              }
            }
        ]
    })

    //toolbar.appendTo( template );

    let template = $("<div>").css( { "xmargin": "10px" }).dxBox( {
        height : "100%",
        direction : "col",
        items : [
            {
                ratio : 1,
                template : function() {
                    
                    return $("<div>").append( flexTab.form.element() ).dxScrollView( {
                        height : "100%"
                    })
                    
                }

            },
            {
                baseSize : 30,
                template : function() {
                    return toolbar;                 
                }
            }
        ]
    })    

    return template;

}

// OperatorProfile.prototype.flexTabTemplate = function( flexTab, data ) {

//     let instance = this;
//     if( flexTab.form ) {
//         flexTab.form.element().remove();
//         flexTab.form.dispose();
//         flexTab.form = null;
//     }

//     let formData = {
//         categories : []
//     };



//     let formItems = [];

//     flexTab.categories.forEach( function( category ) {

//         if( ! category.hasFields ) {
//             return;
//         }

//         formData.categories.push( category.name );

//         if( instance.flexValues[0][category.name] ) {
//             let values = {};  values[category.name] = instance.flexValues[0][category.name];
//             $.extend( true, formData, values );
//         }


//         let categoryItem = {
//             itemType : "group", caption : category.title, items : []
//         }

//         // instance.buildFlexFieldItems( category.fields, categoryItem.items );
//         FlexFields.buildFormItems( category.fields, categoryItem.items, 1 );

//         formItems.push(  categoryItem );

//     })


//     let template = $("<div>").css( { "padding" : "10px" } );

//     let scrollView = $("<div>").css( { "padding-bottom" : "10px" } );

//     flexTab.form = $("<div>").dxForm( {
//         items : formItems,
//         formData : formData
//     }).dxForm( "instance" );

//     scrollView.append( flexTab.form.element() ).dxScrollView(
//         {
//             height : 500
//         }
//     ).appendTo( template );

//     let toolbar = $("<div>").dxToolbar( {
//         items : [
//             { location : "after",
//               widget : "dxButton",
//               options : {
//                 text : "Save",
//                 type : "default",
//                 onClick : function( e ) {

//                     let vr = flexTab.form.validate();
//                     if( ! vr.isValid ) {
//                         return;
//                     }
                    
//                     let dataToSend = { 
//                         operatorId : data.operatorId,
//                         flexValues : flexTab.form.option( "formData" )
//                     }

//                     Fse.Ajax.performAction( {
//                         object : "OPR.saveFlexValues", 
//                         data : dataToSend
//                     }).done( function( result ) {

//                         Fse.UI.toast( `${flexTab.displayName} Saved`, "success", 1000 );
            
//                     });

//                 }
//               }
//             }
//         ]
//     })

//     toolbar.appendTo( template );

//     return template;

// }

// OperatorProfile.prototype.buildFlexFieldItems = function( fields, targetArray, colCount ) {


//     if( ! colCount ) {
//         colCount = 1;
//     }

//     let parseConfig = function( configString ) {
//         let fieldConfig = {};

//         if( ! configString ) {
//             return fieldConfig;
//         }
//         let fieldConfigAVP = configString.split( "," );
//         fieldConfigAVP.forEach( function( avp ) {
//             let parts = avp.split( "=" );
//             fieldConfig[parts[0]] = parts[1];
//         })

//         return fieldConfig;
//     }

//     let formItems = [];

//     let colSpanCount = function() {
//         let colSpan = 0;
//         formItems.forEach( function( fi ) {

//             if( fi.colSpan ) {
//                 colSpan += fi.colSpan
//             } else {
//                 colSpan ++;
//             }

//         })
//         return colSpan;
//     }


//     fields.forEach( function( field ) {

//         let fieldItem = {
//             flexField : true,
//             dataField : `${field.category}.${field.name}`,
//             label : { text : field.label, location : "left" },
//             isRequired : field.required == "Y" ? true : false,
//             validationRules : []
//         }

//         // select
//         if( field.type == "SELECT" ) {
//             fieldItem.editorType = "dxSelectBox",
//             fieldItem.editorOptions = {
//                 dataSource : { store : { type : "array", key : "value", data : field.lookupValues } },
//                 displayExpr : "text",
//                 valueExpr : "value",
//                 showClearButton : true
//             }

//             if( colCount == 1 ) {

//                 let fieldConfig = parseConfig( field.config );
//                 if( fieldConfig.size ) {
//                     fieldItem.editorOptions.width = `${fieldConfig.size}em`;
//                 } else {
//                     fieldItem.editorOptions.width = 300;
//                 }
//                 console.log( "SELECTBOX" );
//                 console.log( fieldConfig );
    
//             }



//         } 

//         // radio
//         if( field.type == "RADIO" ) {
//             fieldItem.editorType = "dxRadioGroup";
//             fieldItem.editorOptions = {
//                 layout : "horizontal",
//                 dataSource : { store : { type : "array", key : "value", data : field.lookupValues } },
//                 displayExpr : "text",
//                 valueExpr : "value",
//                 showClearButton : true
//             }
//         }

//         // textarea
//         if ( field.type == "TEXTAREA" ) {

//             if( colCount != 1 ) {

//                 let colSpan = colSpanCount() % colCount;
//                 if( colSpan ) {
//                     colSpan = colCount - colSpan;
//                     formItems.push( { flexField : true, itemType : "empty", colSpan : colSpan });
//                 }


//                 fieldItem.colSpan = colCount;
//             }

//             fieldItem.editorType = "dxTextArea";
//             fieldItem.editorOptions = {
//                 maxLength : field.maxLength
//             }

//             let fieldConfig = parseConfig( field.config );

//             if( fieldConfig.rows ) {
//                 fieldItem.editorOptions.minHeight = fieldConfig.rows * 30;
//             }

//             if( colCount == 1 ) {
//                 if( fieldConfig.cols ) {
//                     fieldItem.editorOptions.width = `${fieldConfig.cols}em`;
//                 }

//                 if( fieldConfig.size ) {
//                     fieldItem.editorOptions.width = `${fieldConfig.size}em`;
//                 }
//             }


//         }

//         // checkbox
//         if( field.type == "CHECKBOX" ) {

//             fieldItem = {
//                 flexField : true,
//                 itemType : "group",
//                 items : [],
//                 colCount : colCount == 1 ? 3 : 2
//             }

//             if( true || colCount != 1  ) {
//                 // fieldItem.caption = field.label;
//                 // fieldItem.captionTemplate = function( itemData, container ) {
//                 //     container.append( $("<div>").css( {"color" : "red" } ).text( itemData.caption ));
//                 // }
//                 fieldItem.label = { text : field.label, location : "left", template : function( itemData, container ) {
//                     container.append($("<span>").text( itemData.text )); // css( { "font-weight" : "bold" } ).
//                 } }
//             }

//             if( field.lookupValues ) {
//                 field.lookupValues.forEach( function( cbi ) {

//                     let checkBoxItem = {
//                         dataField : `${field.category}.${field.name}.${cbi.value}`,
//                         label : { text : cbi.text, location : 'left' },
//                         editorType : "dxCheckBox"
//                     }
    
//                     fieldItem.items.push( checkBoxItem );
    
//                 })
//             }

//         }

//         // this is not fully implemented, and as such it is not in the list of fields returned by flexFields
//         if( field.type == "FILE" ) {

//             fieldItem.template = function( options, itemElement ) {

//                 let customEditors = options.component.option( "customEditors" );
//                 if( ! customEditors ) {
//                     customEditors = {};
//                 }

//                 let editorContainer = $("<div>"); 
//                 let fileUploader = $("<div>").dxFileUploader({


//                 }).dxFileUploader( "instance" );
//                 editorContainer.append( fileUploader.element() );

//                 itemElement.append( editorContainer ).addClass( "find-me" );
                
//                 customEditors[fieldItem.dataField] = fileUploader;
//                 options.component.option( "customEditors", customEditors );


//             }
//         }


//         /*
//         if( ! fieldItem.editorType && field.type != 'CHECKBOX' ) {
//             console.log( "FIELDTYPE " + field.type );
//             console.log( field )
//         }
//         */

//         // all other- default is a text box with a length limit
//         if( ! fieldItem.editorType && field.type != "FILE" ) {

//             fieldItem.editorOptions = {};

//             if( field.format == "email" ) {
//                 fieldItem.editorType = "dxTextBox";
//                 fieldItem.editorOptions.placeholder = "mailbox@company.com";
//                 fieldItem.validationRules.push( { type : "email" } );
//             }

//             if( field.format == "url" ) {
//                 fieldItem.editorType = "dxTextBox";
//                 fieldItem.editorOptions.placeholder = "https://company.com";
//                 let validURLPattern = /^https?:\/\/([-\w\.]+)+(:\d+)?(:\w+)?(@\d+)?(@\w+)?([-\w\.]+)(\/([\w\/_\.]*(\?\S+)?)?)?/i;
//                 fieldItem.validationRules.push( { type : "pattern", message : "Invalid URL", pattern : validURLPattern } );
//             }

//             if( field.format == "date" ) {
//                 fieldItem.editorType = "dxDateBox";
//                 fieldItem.editorOptions.placeholder = "mm/dd/yyyy";
//                 fieldItem.editorOptions.openOnFieldClick = true;
//             }

//             if( field.format == "integer" || field.format == "decimal" ) {
//                 fieldItem.editorType = "dxNumberBox";
//                 fieldItem.editorOptions.showSpinButtons = false;
//                 if( field.format == "integer" ) {
//                     fieldItem.editorOptions.format = "#";
//                 } 
//                 if( field.format == "decimal" ) {
//                     fieldItem.editorOptions.format = "#.0#";
//                 }
//                 if( field.maxLength > 0 ) {
//                     fieldItem.editorOptions.maxLength = field.maxLength;
//                 }
//             }

//             if( ! fieldItem.itemType && ! fieldItem.editorType) {
//                 fieldItem.editorType = "dxTextBox";
//             }

//             if( fieldItem.editorType == "dxTextBox" && field.maxLength > 0 ) {
//                 fieldItem.editorOptions.maxLength = field.maxLength;
//             }
            
//             if( colCount == 1 ) {
//                 let fieldConfig = parseConfig( field.config );
//                 if( fieldConfig.size ) {
//                     fieldItem.editorOptions.width = `${fieldConfig.size}em`;
//                 }
//             }


//         }

//         if( field.lockEdit == "Y" ) {
//             fieldItem.editorOptions = fieldItem.editorOptions ? fieldItem.editorOptions : {};
//             fieldItem.editorOptions.readOnly = true;
//         } 

//         formItems.push( fieldItem );

//         if( field.type == "CHECKBOX" ) {
//             let fieldSeparatorItem = { name : `fieldSeparator_${field.name}`, itemType : "empty" }
//             console.log( "fieldSeparatorItem", fieldSeparatorItem );
//             formItems.push( fieldSeparatorItem )
//         }
    

//     })

//     if( colCount != 1 ) {
//         let colSpan = colSpanCount() % colCount;
//         if( colSpan ) {
//             colSpan = colCount - colSpan;
//             formItems.push( { itemType : "empty", colSpan : colSpan })
//         }
//     }


//     if( targetArray ) {
//         formItems.forEach( function( fi ) {
//             targetArray.push( fi );
//         })
//     }


//     return formItems;

// }

OperatorProfile.prototype.objectivesTabTemplate = function( data ) {
    let operatorObjectives = new OperatorObjectives( data );
    return operatorObjectives.element();
}

/*
OperatorProfile.prototype.objectivesTabTemplateXXX = function( data ) {

    let content = $("<div>");
    let operatorId = data.operatorId;
    let salesRepId =  Fse.Portal.appConfiguration.STP.userId;

    // let targetObjectives = {};

    let linkedObjectivesDataGrid = null;





    let addObjectives = function() {

        let eligibleObjectivesDataGrid = null;
        let targetObjectives = {};

        let submitButton = $("<div>").dxButton( {
            text : "Target Selected Objectives",
            onClick : function( e ) {
    
    
                eligiblePopup.hide();

                let dataToSend = {
                    operatorId : operatorId,
                    salesRepId : salesRepId,
                    objectiveId : []
                }
    
                for( let objId in targetObjectives ) {
                    if( targetObjectives[objId] ) {
                        dataToSend.objectiveId.push( objId );
                    }
                }
    
                Fse.Ajax.performAction( {
                    object : "OPR.addOperatorToObjectives", 
                    data : dataToSend
                }).done( function( result ) {
    
                    Fse.UI.toast( `New Targets Added`, "success", 1000 );
                    linkedObjectivesDataGrid.refresh();
        
                });
    
            },
            disabled : true,
            type : "default"
        }).dxButton( "instance" );        

        let updateTargeting = function( objectiveId, target ) {

            targetObjectives[objectiveId] = target;
    
            let targetsPresent = false;
            for( let objId in targetObjectives ) {
                if( targetObjectives[objId] ) {
                    targetsPresent = true;
                    break;
                }
            }
    
            submitButton.option( "disabled", targetsPresent ? false : true );
    
    
        }

        eligiblePopup = $("<div>").dxPopup( {
            title : "Eligible Objectives",
            height : 425,
            xwidth : 600,
            hideOnOutsideClick : false,
            contentTemplate : function() {

                eligibleObjectivesDataGrid = $("<div>").dxDataGrid( {

                    showBorders : true,
                    scrolling : { mode : "virtual" },
                    height : 325,
                    dataSource : Fse.Data.newDataSource( { object : "BOM.eligibleObjectives", keyField : "objectiveId", paginate : false, objectParams : { 
                        operatorId : data.operatorId
                    }}),
            
                    columns : [
                        { type : "buttons", width : 30,
                            name : "viewObjectiveSummary",
                            buttons : [
                                { icon : "info", hint : "View Objective Summary", onClick : function( e ) {
            
            
                                    let objectiveId = e.row.data.objectiveId;
                                    let oLink = document.getElementById( "oprHandlerLink" );
                                    let sURL = oLink.getAttribute( "href" ) + "?get=objectiveOverview&objectiveId=" + encodeURIComponent( objectiveId );
                                
                                    let oOptions = { 
                                        title : "Objective Overview",
                                        width : "600px",
                                        src : sURL,
                                        namedButtons : "close"
                                    };
                                    
                                    Fse.DialogManager.show( "objectiveOverviewDialog$", oOptions );
                                }}
                            ]
                        },
                        { dataField : "objName", caption : "Objective" },
            
                        { dataField : "targetCount",caption : "Targets", dataType : "number", width : 100,
                            cellTemplate : function( container, options ) {
                                if( options.data.linkStatus == "ELIGIBLE" ) {
                                    container.append( options.text );
                                }
                            }
                         },
                        { dataField : "quota", caption : "Quota", dataType : "number", width : 100,
                            cellTemplate : function( container, options ) {
                                if( options.data.linkStatus == "ELIGIBLE" ) {
                                    container.append( options.text );
                                }
                            }
            
                         },
                        { dataField : "quotaAchieved", caption : "Achievement", dataType : "number", width : 100,
                            cellTemplate : function( container, options ) {
                                if( options.data.linkStatus == "ELIGIBLE" ) {
                                    container.append( options.text );
                                }
                            }
            
                         },
                        {
                            caption : "Target",
                            width : 70,
                            name : "operatorSelected",
                            cellTemplate : function( container, options ) {
                                if( options.data.linkStatus == "ELIGIBLE" ) {
            
                                    const objectiveId = options.data.objectiveId;
            
                                    $("<div>").dxCheckBox({
                                        onValueChanged : function( ee ) {
                                           updateTargeting( objectiveId, ee.value );
                                        }
            
            
                                    }).appendTo( container );
                                }
                            }
                        }
                    ]
            
                }).dxDataGrid( "instance" );

                return eligibleObjectivesDataGrid.element();
            },
            onHidden : function( e ) {
                eligiblePopup.element().remove();
                eligiblePopup.dispose();
            },
            toolbarItems : [
                { 
                    toolbar : "bottom",
                    location : "after",
                    template : function() {
                        return submitButton.element();
                    }
                }
            ]
        }).dxPopup( "instance" );

        $("body").append( eligiblePopup.element() );
        eligiblePopup.show();

    }

    linkedObjectivesDataGrid = $("<div>").dxDataGrid( {


        showBorders : true,
        scrolling : { mode : "virtual" },
        height : 450,
        dataSource : Fse.Data.newDataSource( { object : "OPR.operatorObjectives", keyField : "objectiveId", paginate : false, objectParams : { 
            operatorId : data.operatorId
        }}),

        columns : [
           
            { type : "buttons", width : 30,
                name : "viewObjectiveSummary",
                buttons : [
                    { icon : "info", hint : "View Objective Summary", onClick : function( e ) {


                        let objectiveId = e.row.data.objectiveId;
                        let oLink = document.getElementById( "oprHandlerLink" );
                        let sURL = oLink.getAttribute( "href" ) + "?get=objectiveOverview&objectiveId=" + encodeURIComponent( objectiveId );
                    
                        let oOptions = { 
                            title : "Objective Overview",
                            width : "600px",
                            src : sURL,
                            namedButtons : "close"
                        };
                        
                        Fse.DialogManager.show( "objectiveOverviewDialog$", oOptions );
                    }}
                ]
            },
            { dataField : "objName", caption : "Objective" }
            
            
        ]

    }).dxDataGrid( "instance" );

    content.append( linkedObjectivesDataGrid.element() );

    
    $("<div>").dxToolbar( {
        items : [
            { 
                location : "after",
                widget : "dxButton",
                options : {
                    text : "Add Objectives",
                    onClick : function( e ) {
                        addObjectives();
                    }
                }
            }
        ]
    }).css( { "margin-top" : "5px", "margin-bottom" : "5px" } ).appendTo( content );
    

    return content;


}
*/