ManageUserDashboardsPopup = function( dashboard ) {
	let instance = this;
	instance.dashboard = dashboard;
	instance.userDashboardItems = [];
	instance.userDashboardDataGrid = null;
}

ManageUserDashboardsPopup.prototype.constructor = ManageUserDashboardsPopup;

ManageUserDashboardsPopup.prototype.loadUserDashboardDataGrid = function() {

	let instance = this;
	let dashboard = instance.dashboard;

	let dataStore = Fse.Data.newDataSource( { object : "STP.userDashboards", paginate : false, keyField : "dashboard", objectParams : { dashboard : dashboard.dashboardOptions.dashboard } });

	let loadPromise = dataStore.load();

	loadPromise.done( function( items ) {

		instance.userDashboardItems = items;
		
		instance.userDashboardDataGrid.option( {
			dataSource : { 
				store : {
					type : "array", 
					data : instance.userDashboardItems, 
					key : "dashboard"
				}
			}
		});

	})

	return loadPromise;
}

ManageUserDashboardsPopup.prototype.saveUserDashboardOrder = function() {

	let instance = this;

	let items = instance.userDashboardDataGrid.getVisibleRows();
	let dashboardsToSave = [];

	let sortRank = 0;
	items.forEach( function( item ) {
		sortRank = sortRank + 10;
		dashboardsToSave.push( {
			dashboard : item.data.dashboard,
			sortRank : sortRank
		} );
	})
	

	let saveURL =  $("link#PortalDocRootURL").attr("href") + "/apps/CRM/index.cfm?do=saveUserDashboardOrder&mode=direct";
	$.post( saveURL, $.param( { dashboards : JSON.stringify(dashboardsToSave) } ), function(saveResponse) {
		instance.popup.option( "dashboardsChanged", true );
	})

}

ManageUserDashboardsPopup.prototype.createUserDashboardDataGrid = function(){

	let instance = this;
	let dashboard = instance.dashboard;

	instance.userDashboardDataGrid = $("<div>").dxDataGrid( {
		showBorders : true,
		height : 250,
		rowDragging : {
			allowReordering : true,
			onReorder : function(e) {
				const visibleRows = e.component.getVisibleRows();
				const toIndex = instance.userDashboardItems.findIndex((item) => item.dashboard === visibleRows[e.toIndex].data.dashboard);
				const fromIndex = instance.userDashboardItems.findIndex((item) => item.dashboard === e.itemData.dashboard);
		
				instance.userDashboardItems.splice(fromIndex, 1);
				instance.userDashboardItems.splice(toIndex, 0, e.itemData);
		
				e.component.refresh().done( function() {
					instance.saveUserDashboardOrder();
				});
			  }
		},
		rowAlternationEnabled : true,
		scrolling : { mode : "virtual" },
		columns : [
			{ 
				dataField : "dashboardName", caption : "View"
			},
			{
				visible : Fse.Portal.checkPermission( 'DashboardSharing' ) ? true : false,
				name : "sharedWith", caption : "Sharing", width : 80,
				cellTemplate : function( container, options ) {

					if( options.data.shared == "N") {

						let linkText = "Shared";
						if( options.data.private == "Y" ) {
							linkText = "Not shared";
						}

						$("<a>").css( { "cursor" : "pointer", "text-decoration" : "underline" } ).text( linkText ).appendTo( container );

					} 
				}
			},
			{ name : "buttons", width : 65, type : "buttons", alignment : "left",
				buttons : [
					{ icon : "edit", 
					  visible: function( options ) {
						if( options.row.data.shared == "Y" ) {
							return false;
						} else {
							return true;
						}
					  },
						onClick : function( e ) {
							dashboard.showPreferencesPopup( { dashboard : e.row.data, afterApply : function( ) {
								instance.loadUserDashboardDataGrid();
								instance.popup.option( "dashboardsChanged", true );
								// alert( "Saved" )
								}
							});
						} 
					},
					{
						icon : "trash", 
						visible : function( options ) {

							if( options.row.data.shared == "Y" || options.row.data.home == "Y" ) {
								return false
							} else {
								return true
							}

						},
						onClick : function( e ) {

							if( e.row.data.home == 'Y' || e.row.data.private == 'N' ) {
								alert( "This dashboard view cannot be deleted" );
								return;
							} else {
								if( confirm( `Delete '${e.row.data.dashboardName}?`)) {

									let saveURL =  $("link#PortalDocRootURL").attr("href") + "/apps/CRM/index.cfm?do=deleteUserDashboard&mode=direct";

									$.post( saveURL, $.param( { dashboard : e.row.data.dashboard } ), function() {
										instance.popup.option( "dashboardsChanged", true );
										instance.loadUserDashboardDataGrid();
									});
	

								}
							}

						}
					}
				]
			}
			
		],

		onCellClick : function( e ) {

			if( e.column.name == "sharedWith" ) {
				let usdp = new UserDashboardSharingPopup( e.data );
				usdp.show( { onSaved : function() {
					instance.loadUserDashboardDataGrid();
				}});
			}
		},
		onToolbarPreparing : function( e ) {

			if( ! e.toolbarOptions.items ) {
				e.toolbarOptions.items = [];
			}

			e.toolbarOptions.items.push( 
				{
					location : "before",
					template : function() {
						return $("<div>").text( 'The first dashboard view is the default view. Use the plus sign icon to generate a new dashboard view.' );
					}
				},
				{
					location: "after",
					widget : "dxButton",
					options : {
						icon : "plus",
						hint : "New Dashboard View",
						onClick : function( e ) {

							dashboard.showPreferencesPopup( { newDashboard : true, afterApply : function( ) {
								instance.loadUserDashboardDataGrid();
								instance.popup.option( "dashboardsChanged", true );
								// alert( "Saved" )
								}
							});

						}
					}
				}
			)
		},
		
		onOptionChanged : function( e ) {
			if( e.fullName == "editing.changes" ) {
				if( e.value && e.value.length ) {
					applyButton.option( { "disabled" : false } )
				} else {
					applyButton.option( { "disabled" : true } )

				}
			}
		}
	}).dxDataGrid( "instance" )

	return instance.userDashboardDataGrid;

}

ManageUserDashboardsPopup.prototype.show = function() {

	let instance = this;

	let annotations = $("<div>");

 	instance.popup = $("<div>").dxPopup( {

		title : "Dashboard Views",
		width : 650,
		height : 350,
		dashboardsChanged : false,

		onOptionChanged : function( e ) {
			if( e.name == "dashboardsChanged" && e.value ) {
				annotations.text( "Changes will take effect when this window closes, or the page is refreshed" );
			}
		},

		contentTemplate : function() {
			return instance.createUserDashboardDataGrid().element();
		},

		toolbarItems : [
			{
				location : "before",
				toolbar : "bottom",
				template : function() {
					return annotations;
				}
			},
			{
				location : "after",
				toolbar : "bottom",
				widget : "dxButton",
				options : {
					text : "Close",
					onClick : function( e ) {
						instance.popup.hide();
					}
				}
			}
		],

		onHidden : function( e ) {

			if( e.component.option( "dashboardsChanged" ) ) {

				$("<div>").dxLoadPanel( {
					message : "Refreshing..."
				}).appendTo( $("body")).dxLoadPanel("show");


				window.location.reload();
			} else {
				e.component.element().remove();
				e.component.dispose();
			}

			instance.popup = null;
		},
		
		onShown : function( e ) {
			instance.loadUserDashboardDataGrid();
		}

	} ).dxPopup( "instance" );

	$("body").append( instance.popup.element() );
	instance.popup.show();
}


UserDashboardSharingPopup = function( dashboard ) {

	let instance = this;

	instance.dashboard = dashboard.dashboard;
	instance.shareConfig = dashboard.shareConfig;
	instance.fspro_userId =  Fse.Portal.appConfiguration.STP.userId;


	instance.sharedWithData = [];

	instance.sharedWithDataGrid = null;
	instance.saveButton = null;

}

UserDashboardSharingPopup.prototype.constructor = UserDashboardSharingPopup;

UserDashboardSharingPopup.prototype.show = function( options ) {

	let instance = this;

	instance.saveButton = $("<div>").dxButton( {
		text : "Save",
		disabled : true,
		type : "default",
		onClick : function( e ) {
			let savePromise = instance.saveSharedWithData();

			if( options.onSaved ) {
				savePromise.done( function( saveResult ) {
					options.onSaved( saveResult );
				})
			}
			instance.popup.hide();
		}
	}).dxButton( "instance" );

	instance.sharedWithDataGrid = $("<div>").dxDataGrid( {

		showBorders : true,
		scrolling : { mode : "virtual" },
		height : "100%",
		width : 450,
		rowAlternationEnabled : true,
		dataSource : { store : { type : "array", data : instance.sharedWithData, key : [ "linkType", "linkId" ] }},
		columns : [
			{ dataField : "text", caption : "Shared With" },
			{ width : 30, name : "buttons", type : "buttons", buttons : [
				{ icon : "trash", onClick : function( e ) {
					instance.removeSharedWithData( e.row.data );
				} }
			]}
		],

		onToolbarPreparing : function( e ) {
			if( ! e.toolbarOptions.items ) {
				e.toolbarOptions.items = [];
			}

			e.toolbarOptions.items.push( 

				{ location : "after", widget : "dxButton", options : {
					text : "Add Users",
					icon : "plus",
					onClick : function( e ) {
						instance.addUsers();
					}
				}},
				{ location : "after", widget : "dxButton", options : {
					text : "Add Groups",
					icon : "plus",
					onClick : function( e ) {
						instance.addGroups();
					}
				}}			
			)
		}

	}).dxDataGrid( "instance" );


	instance.form = $("<div>").dxForm( {
		formData : {
			shareConfig : instance.shareConfig
		},
		items : [
			{ dataField : "shareConfig", label : { text : "Share Widget Preferences" }, editorType : "dxSwitch" }
		],
		onFieldDataChanged : function( e ) {
			instance.saveButton.option( { disabled : false } ) 
		}
	}).dxForm( "instance" );

	instance.popup = $("<div>").dxPopup( {

		title : "User Dashboard Sharing",

		width : 475,
		height : 400,
		hideOnOutsideClick : true,
		onHidden : function( e ) {
			e.component.element().remove();
			e.component.dispose();
		},

		contentTemplate : function() {
			return $("<div>").dxBox( {
				height : "100%",
				direction : "col",
				items : [
					{
						ratio : 1,
						template : function() {
							return instance.sharedWithDataGrid.element();
						}
					},
					{
						baseSize : 25,
						template : function() {
							return instance.form.element();
						}
					}
				]
			})
			
		},

		toolbarItems : [
			{
				toolbar : "bottom",
				location : "after", 
				template : function() {
				return instance.saveButton.element();
			}
			}
		],

		onShown : function() {
			instance.load();
		}


	}).dxPopup( "instance" );

	instance.popup.element().appendTo( $("body"));
	instance.popup.show();

}


UserDashboardSharingPopup.prototype.load = function() {

	let instance = this;


	// clear storage, keeping the same array
	while( instance.sharedWithData.length ) {
		instance.sharedWithData.pop();
	}


	let ds = Fse.Data.newDataSource( { object : "STP.userDashboardSharing", paginate : false, objectParams : { dashboard  : instance.dashboard, fspro_userId : instance.fspro_userId } } );
	let loadPromise = ds.load()
	
	loadPromise.done( function( data ) {

		data.forEach( function( i ) {
			instance.sharedWithData.push( i );
		})

		instance.sharedWithDataGrid.refresh();

	})

	return loadPromise;

}

UserDashboardSharingPopup.prototype.addSharedWithData = function( data ) {

	let instance = this;

	let store = instance.sharedWithDataGrid.getDataSource().store();

	let added = false;

	store.byKey( { linkId : data.linkId, linkType : data.linkType } )
		.fail( function( ) {
			// this one is not aready there so we can add it
			instance.sharedWithData.push( data );
			added = true;
		})


	if( added ) {
		instance.saveButton.option( { disabled : false } ) 
	}

	return added;

}

UserDashboardSharingPopup.prototype.removeSharedWithData = function( data ){

	let instance = this;

	let deleteIdx = -1;
	for( let  idx = 0; idx < instance.sharedWithData.length; idx++ ) {

		let item = instance.sharedWithData[idx];
		if( item.linkId === data.linkId && item.linkType === data.linkType ) {
			deleteIdx = idx;
			break;
		}

	}

	if( deleteIdx >= 0 ) {
		instance.sharedWithData.splice(deleteIdx, 1);
		instance.sharedWithDataGrid.refresh();

		instance.saveButton.option( { disabled : false } ) 
	}

}

UserDashboardSharingPopup.prototype.saveSharedWithData = function() {

	let instance = this;

	console.log( "Save Shared With Data" );
	console.log( instance.sharedWithData );


	let formData = instance.form.option( "formData" );


	let dataToSave = {
		dashboard : instance.dashboard,
		fspro_userId : instance.fspro_userId,
		sharedWith : instance.sharedWithData,
		shareConfig : formData.shareConfig
	}

	let savePromise = Fse.Ajax.performAction( {
		object : "STP.saveUserDashboardSharing", 
		data : dataToSave
	})
	
	savePromise.done( function( saveResult ) {
		console.log( "SAVED" );
		console.log( saveResult );

		instance.load();
		instance.saveButton.option( "disabled", true );

	} );

	return savePromise;

}

UserDashboardSharingPopup.prototype.addUsers = function() {

	let instance = this;

	let popup = null;
	let userList = null;

	let selectionCountElement = $("<div>");

	let addButton = $("<div>").dxButton( {
			text : "Add Selected",
			type : "default",
			dislabled : true,
			onClick : function( e ) {


			let refresh = false;
			let selectedItems = userList.option( "selectedItems" );
			selectedItems.forEach( function( i ) {

				let item = {
					text : i.fullName,
					linkId : i.fspro_userId,
					linkType : 'USR'
				}

				if( instance.addSharedWithData( item ) ) {
					refresh = true;
				}


			})

			if( refresh ) {
				instance.sharedWithDataGrid.refresh();
			}
			


			popup.hide();
			}
	}).dxButton( "instance" );

	userList = $("<div>").dxList( {
		dataSource : Fse.Data.newDataSource( { object : "SEC.users", keyField : "fspro_userId", paginate : false } ),
		displayExpr : "fullName",
		keyExpr : "fspro_userId",
		selectionMode : "multiple",
		searchEnabled : true,
		searchExpr : "fullName",
		searchMode : "contains",
		showSelectionControls : true,
		onOptionChanged : function( e ) {
			if( e.name == "selectedItems" ) {
				if( e.value && e.value.length ) {
					selectionCountElement.text( `${e.value.length} users selected` );
					addButton.option( "disabled", false );
				} else {
					selectionCountElement.empty();
					addButton.option( "disabled", true );
				}
			}
		}
	}).dxList( "instance" );

	popup = $("<div>").dxPopup( {

		title : "Add Users",
		hideOnOutsideClick : true,
		width : 400,
		height : 400,

		contentTemplate : function() {

			return userList.element();

		},

		toolbarItems : [
			{ toolbar : "bottom",
			location : "before",
			template : function() {
				return selectionCountElement;
			}
			},
			{ toolbar : "bottom",
				location : "after",
				template : function() {
				return addButton.element();
				}
			}
		],

		onHidden : function( e ) {
			e.component.element().remove();
			e.component.dispose();
		}

	}).dxPopup( "instance" );
	popup.element().appendTo( $("body"));
	popup.show();

}

UserDashboardSharingPopup.prototype.addGroups = function() {

	let instance = this;

	let popup = null;

	let selectionCountElement = $("<div>");

	let groupsDataSource = Fse.Data.newDataSource( { object : "SEC.groups", keyField : "groupId", paginate : false } );
	groupsDataSource.filter( [ "reportDistributionGroup", "=", "Y" ] );

	let addButton = $("<div>").dxButton( {
			text : "Add Selected",
			type : "default",
			dislabled : true,
			onClick : function( e ) {

			let selectedItems = groupList.option( "selectedItems" );
			selectedItems.forEach( function( i ) {

				let item = {
					text : i.groupName,
					linkId : i.groupId,
					linkType : 'GRP'
				}

				if( instance.addSharedWithData( item ) ) {
					refresh = true;
				}


			})

			if( refresh ) {
				instance.sharedWithDataGrid.refresh();				
			}
			
			popup.hide();
			}
	}).dxButton( "instance" );

	let groupList = $("<div>").dxList( {
		dataSource : groupsDataSource,
		displayExpr : "groupName",
		keyExpr : "groupId",
		selectionMode : "multiple",
		searchEnabled : true,
		searchExpr : "groupName",
		searchMode : "contains",
		showSelectionControls : true,
		onOptionChanged : function( e ) {
			if( e.name == "selectedItems" ) {
				if( e.value && e.value.length ) {
					selectionCountElement.text( `${e.value.length} groups selected` );
					addButton.option( "disabled", false );
				} else {
					selectionCountElement.empty();
					addButton.option( "disabled", true );
				}
			}
		}
	}).dxList( "instance" );

	popup = $("<div>").dxPopup( {

		title : "Add Groups",
		hideOnOutsideClick : true,
		width : 400,
		height : 400,

		contentTemplate : function() {

			return groupList.element();

		},

		toolbarItems : [
			{ toolbar : "bottom",
			location : "before",
			template : function() {
				return selectionCountElement;
			}
			},
			{ toolbar : "bottom",
				location : "after",
				template : function() {
				return addButton.element();
				}
			}
		],

		onHidden : function( e ) {
			e.component.element().remove();
			e.component.dispose();
		}

	}).dxPopup( "instance" );
	popup.element().appendTo( $("body"));
	popup.show();

}


DashboardPreferencesPopup = function( dashboard, preferenceOptions ) {

	let instance = this;
	instance.dashboard = dashboard;
	instance.preferenceOptions = preferenceOptions;

	if( ! instance.preferenceOptions ) {
		instance.preferenceOptions = {};
	}

	instance.userDashboard = dashboard.dashboardOptions.dashboard;;
	instance.userDashboardName = null;

	instance.shared = false;
	instance.userWidgetsData = [];
	instance.availableWidgetsData = [];

	instance.allowDelete = false;

	if( instance.preferenceOptions.dashboard ) {

		instance.userDashboard = instance.preferenceOptions.dashboard.dashboard;
		instance.userDashboardName = instance.preferenceOptions.dashboard.dashboardName;


		if( instance.preferenceOptions.dashboard.private == "Y" && instance.preferenceOptions.dashboard.home == "N" ) {
			instance.allowDelete = true;
		}

		instance.shared = instance.preferenceOptions.dashboard.shared == "Y";

	} else	if( instance.dashboard.currentUserDashboard ) {
		instance.userDashboard = instance.dashboard.currentUserDashboard.dashboard;
		instance.userDashboardName = instance.dashboard.currentUserDashboard.dashboardName;

		if( instance.dashboard.currentUserDashboard.private == "Y" && instance.dashboard.currentUserDashboard.home == "N" ) {
			instance.allowDelete = true;
		}

		instance.shared = instance.dashboard.currentUserDashboard.shared == "Y";
	}
	
	if( instance.preferenceOptions.newDashboard ) {
		instance.userDashboard = `${instance.dashboard.dashboardOptions.dashboard}_new`;
		instance.userDashboardName = null;
		instance.allowDelete = false;
		instance.shared = false;
	}

	if( instance.shared ) {
		instance.allowDelete = false;
	}


}

DashboardPreferencesPopup.prototype.constructor = DashboardPreferencesPopup;

DashboardPreferencesPopup.prototype.load = function() {

	let instance = this;
	let dashboard = instance.dashboard;

	instance.userWidgetsData = [];
	instance.availableWidgetsData = [];

	let dataSource = Fse.Data.newDataSource( { paginate : false, object : "STP.userDashboardWidgets", keyField : "widgetKey", objectParams : { dashboard : instance.userDashboard, includeAvailable : true }});

	let loadPromise = dataSource.load()
	
	loadPromise.done( function( data ) {


		let availablePortletIds = {};
		data.forEach( function( widgetData ) {
			if( widgetData.widgetId ) {
				instance.userWidgetsData.push( widgetData );
			}
			if( ! availablePortletIds[widgetData.portletId]) {
				availablePortletIds[widgetData.portletId] = widgetData;
				instance.availableWidgetsData.push( {
					portletId : widgetData.portletId,
					initialPortletName : widgetData.initialPortletName,
					displayMode : widgetData.displayMode,
					teaserTxt : widgetData.teaserTxt
				})
			}
		} )

		if( instance.availableWidgetsList ) {

			let availableWidgetsDataSource = new DevExpress.data.DataSource( {
				store : {
					type : "array",
					data : instance.availableWidgetsData,
					key : "portletId"
				}
			});
			availableWidgetsDataSource.sort( { selector : "initialPortletName" } );
			instance.availableWidgetsList.option( "dataSource", availableWidgetsDataSource );	
	
		}

		instance.userWidgetsDataGrid.option( "dataSource", instance.userWidgetsData );	
	})	

	return loadPromise;
}


DashboardPreferencesPopup.prototype.createAvailableWidgetsList = function() {

	let instance = this;

	instance.availableWidgetsList = $("<div>").dxList( {
		height : 312,
		displayExpr : "initialPortletName",
		keyExpr : "portletId",
		pageLoadMode : "scrollBottom",
		selectionMode : "multiple",
		showSelectionControls : true,
		
		onSelectionChanged : function( e ) {
			let buttonOptions = {
				disabled : true
			}

			let selectedItems = e.component.option( "selectedItems")
			if( selectedItems && selectedItems.length ) {
				buttonOptions.disabled = false;
			}

			if( e.addedItems.length ) {

				if( e.addedItems[0].teaserTxt ) {
					instance.teaserTextContent.text( e.addedItems[0].teaserTxt )
				} else {
					instance.teaserTextContent.empty();
				}

			} else {
					instance.teaserTextContent.empty();
			}

			instance.teaserTextDisplay.update();							

			instance.addWidgetButton.option( buttonOptions );
		}

	}).dxList( "instance" );

	return instance.availableWidgetsList;

}

DashboardPreferencesPopup.prototype.createTeaserTextDisplay = function() {

	let instance = this;

	let teaserText = $("<div>").css( { "margin-top" : "15px", "padding": "5px", "border-style" : "solid", "border-width" : "1px" } ).addClass( "dx-theme-border-color" );
	instance.teaserTextContent = $("<div>").appendTo( teaserText );

	instance.teaserTextDisplay = teaserText.dxScrollView( {
		height : 50
	}).dxScrollView( "instance" );

	return instance.teaserTextDisplay;


}

DashboardPreferencesPopup.prototype.createAddWidgetsButton = function() {

	let instance = this;


	instance.addWidgetButton = $("<div>").dxButton( {
		text : "Add Selected Widget",
		disabled : true,
		onClick : function( e ) {
			let selectedItems = instance.availableWidgetsList.option( "selectedItems" );
			selectedItems.forEach( function( widgetData ) {

				let widgetId = 0;
				let added = false;
				let widgetKey = null;
				let userWidget = null;
				while( ! added ) {

					widgetKey = `${widgetData.portletId}:${widgetId}`;

					let index = instance.userWidgetsData.findIndex((item) => item.widgetKey === widgetKey);
					if( index >= 0 ) {
						widgetId = widgetId -1;
					} else {
						userWidget = {
							widgetKey : widgetKey,
							widgetId : null,
							portletId : widgetData.portletId,
							initialPortletName : widgetData.initialPortletName,
							portletName : widgetData.initialPortletName,
							displayMode : widgetData.displayMode
						}

						let dataSource = instance.userWidgetsDataGrid.getDataSource();
						dataSource.store().insert(userWidget).then(function() {
							dataSource.reload().done( function( x ) {
								instance.userWidgetsDataGrid.navigateToRow( userWidget.widgetKey );

																

							});
						})
						
						added = true;
					}
				}

				instance.availableWidgetsList.option( "selectedItems", [] );

			

			})

		}
	}).dxButton("instance");	

	return instance.addWidgetButton;
}

DashboardPreferencesPopup.prototype.createUserWidgetsDataGrid = function () {

	let instance = this;

	instance.userWidgetsDataGrid = $("<div>").dxDataGrid( {

		scrolling : { mode : "virtual" },
		height : 312, // 350,
		showBorders : true,
		editing : {
			allowUpdating : instance.shared ? false : true,
			allowDeleting : instance.shared ? false : true,
			mode : "batch",
			useIcons : true
		},
		onToolbarPreparing : function( e ) {

			let newItems = [];
			if( e.toolbarOptions.items ) {
				e.toolbarOptions.items.forEach( function( item ) {
					if( item.name == "saveButton" || item.name == "revertButton" ) {
						return;
					}
					newItems.push( item )
				})
			}
			e.toolbarOptions.items = newItems;
			//console.log( newItems );
		},
		keyExpr : "widgetKey",
		sorting : {
			mode : "none" // because we are using row dragging to put them in a specific order
		},
		rowDragging : {
			allowReordering : instance.shared ? false : true,
			onReorder : function(e) {
				const visibleRows = e.component.getVisibleRows();
				const toIndex = instance.userWidgetsData.findIndex((item) => item.widgetKey === visibleRows[e.toIndex].data.widgetKey);
				const fromIndex = instance.userWidgetsData.findIndex((item) => item.widgetKey === e.itemData.widgetKey);
		
				instance.userWidgetsData.splice(fromIndex, 1);
				instance.userWidgetsData.splice(toIndex, 0, e.itemData);
		
				e.component.refresh();
			  }
		},
		columns : [
			{ dataField : "initialPortletName", caption : "Widget Type", allowEditing : false },
			{ dataField : "portletName", caption : "Display Name", editorOptions : { maxLength : 50 } },
			{ dataField : "displayMode", caption : "Size", width : 100,
				calculateCellValue : function( rowData ) {
					return rowData.displayMode ? rowData.displayMode : "?"
				},
				lookup : {
					dataSource : {
						store : { 
							type : "array",
							data : [
								{ text : "normal", value : "normal" },
								{ text : "wide", value : "wide" },
								{ text : "tall", value : "tall" },
								{ text : "wide & tall", value : "wideAndTall" },
								{ text : "1 Wide x 1 Tall", value :  "1x1" },
								{ text : "1 Wide x 2 Tall", value :  "1x2" },
								{ text : "1 Wide x 3 Tall", value :  "1x3" },
								{ text : "2 Wide x 1 Tall", value :  "2x1" },
								{ text : "2 Wide x 2 Tall", value :  "2x2" },
								{ text : "2 Wide x 3 Tall", value :  "2x3" },
								{ text : "3 Wide x 1 Tall", value :  "3x1" },
								{ text : "3 Wide x 2 Tall", value :  "3x2" },
								{ text : "3 Wide x 3 Tall", value :  "3x3" },
								{ text : "default", value :  '?' }											
							],
							key : "value"
						}
					},
					displayExpr : "text",
					valueExpr : "value",
					allowClearing : false
				}}
		]


	}).dxDataGrid( "instance" );

	return instance.userWidgetsDataGrid;
}


DashboardPreferencesPopup.prototype.createDashboardForm = function() {

	let instance = this;

	instance.dashboardForm = $("<div>").dxForm( {
		items : [
			{ dataField : "dashboardName", label : { text : "View Name" }, editorOptions : { maxLength : 50 }, isRequired : true }
		],
		formData : { 
			dashboard : instance.userDashboard,
			dashboardName : instance.userDashboardName
		}
	}).dxForm( "instance" );
	
	return instance.dashboardForm;

}

DashboardPreferencesPopup.prototype.applyPreferences = function() {

	let instance = this;
	let dashboard = instance.dashboard;



	let selectedPortlets = [];
	let items = instance.userWidgetsDataGrid.getVisibleRows();


	items.forEach( function( item ) {
		if( item.removed ) return;
		selectedPortlets.push( {
			portletId : item.data.portletId,
			widgetId : item.data.widgetId ? item.data.widgetId : 0,
			portletName : item.data.portletName,
			displayMode : item.data.displayMode
		} );
	})
	

	let formData = instance.dashboardForm.option( "formData" );
	

	let saveURL =  $("link#PortalDocRootURL").attr("href") + "/apps/CRM/index.cfm?do=saveDashboardPreferences&mode=direct";
	$.post( saveURL, $.param( { dashboard : formData.dashboard, dashboardName : formData.dashboardName, portlets : JSON.stringify(selectedPortlets) } ), function(saveResponse) {

	
		if( ! instance.preferenceOptions.afterApply ) {

			let userDashboardsDS = Fse.Data.newDataSource( { object : "STP.userDashboards", keyField : "dashboard", objectParams : { dashboard : dashboard.dashboardOptions.dashboard } } );
			userDashboardsDS.load().done( function( userDashboards ) {
				dashboard.userDashboards = userDashboards;

				let selectOptions = {
					dataSource : {
						store : { type : "array", data : dashboard.userDashboards, key : "dashboard" }
					},
					value : saveResponse.dashboard
				}

				// dashboard.userDashboardAdded = true;
				if( instance.preferenceOptions.newDashboard ) {
					dashboard.loadDashboardOnChange = false;
				}

				dashboard.userDashboardSelectBox.option( selectOptions );

				if( instance.preferenceOptions.newDashboard ) {
					setTimeout( function() {
						dashboard.loadDashboard().done( function() {
							dashboard.loadDashboardOnChange = true;
						});
					}, 50 );
				}


			})
		} else {
			instance.preferenceOptions.afterApply( instance.preferenceOptions.newDashboard, saveResponse )
		}

	
    	
    } );	

}


DashboardPreferencesPopup.prototype.show = function() {
	let instance = this;


	let popupToolbarItems = [];

	if( instance.allowDelete ) {
		popupToolbarItems.push( 
			{ toolbar : "bottom", location : "after", widget : "dxButton", 
				options : { 
					text : "Delete View",  
					onClick : function( e ) {

						if( confirm( "Delete this dashboard?" )) {

							let saveURL =  $("link#PortalDocRootURL").attr("href") + "/apps/CRM/index.cfm?do=deleteUserDashboard&mode=direct";

							$.post( saveURL, $.param( { dashboard : instance.userDashboard } ), function() {
								window.location.reload();
							});
				
							instance.popup.hide();

						}
					} 
				}
			}
		);			
	}


	if( instance.shared ) {
		popupToolbarItems.push( 
			{ toolbar : "bottom", location : "after", widget : "dxButton", options : { text : "Close", onClick : function( e ) {
				instance.popup.hide();
			} }}
		);
	} else {
		popupToolbarItems.push( 
			{ toolbar : "bottom", location : "after", widget : "dxButton", options : { text : "Apply", type : "default", onClick : function( e ) {
	
				let vr = instance.dashboardForm.validate();
				if( ! vr.isValid ) {
					return;
				}
				instance.popup.hide();
				instance.applyPreferences();
			} }}
		);
	
	}


	instance.popup = $("<div>").dxPopup( {

		visible : false,
		title : instance.shared ? "Shared Dashboard View" : "Dashboard View Options",
		width : instance.shared ? 545 : 825,
		height : instance.shared ? "auto" : 620,
		contentTemplate : function() {	




			if( instance.shared ) {

				let content = $("<div>")
    				.append( instance.createUserWidgetsDataGrid().element() );
				return content;


			} else {

				let availableWidgetsToolbar = $("<div>").dxToolbar( {
					items : [
						{ location : "after",
							template : function() { return instance.createAddWidgetsButton().element() }
						 }
					]
				}).dxToolbar( "instance" );
	
	
				let box = $("<div>").dxBox( {
					width : 800,
					items : [
						{ 
							ratio : 2,
							template : function() { 
								let content = $("<div>")
									.append( $("<div>").text( "Selected Widgets" ).css( { "font-size" : "16px", "margin-top" : "3px", "margin-bottom" : "4px" }))
									.append( instance.createUserWidgetsDataGrid().element() );
								return content;
							}
						},
						{
							ratio : 1,
							template : function() {
	
								return $("<div>")
									.css( { "padding-left": "8px" })
									.append( $("<div>").text( "Available Widgets" ).css( { "font-size" : "16px", "margin-top" : "3px", "margin-bottom" : "4px" }))
									.append( instance.createAvailableWidgetsList().element().addClass( "dx-theme-border-color" ).css( { "border-width" : "1px", "border-style" : "solid" } ) )
									.append( availableWidgetsToolbar.element().css( { "margin-top" : "5px" } ) )
	
							}
						}
					]
				}).dxBox( "instance" );
	
	
	
				let contentElement = $("<div>")
	
					.append( instance.createDashboardForm().element() )
	
					.append( $("<p>").append( "Select the desired widgets on the right and click add, drag the icon at the left up and down to rearrange.  Click the Display Name and Size of a widget to change values.") )
					.append( box.element() )
	
					.append( instance.createTeaserTextDisplay().element() );	
					
				return contentElement;

			}


			

		},
		onHidden : function( e ) {
			instance.popup = null;
			e.component.dispose();
		},
		onShown : function( e ) {
			instance.load();
		},
		toolbarItems : popupToolbarItems

	}).dxPopup("instance");

	$("body").append( instance.popup.element() );
	instance.popup.show();
}