Merge pull request #803 from mcneilco/brianbolt/issue798

Switching forms to use editable select2 picklists after fixing issue with fitering and showing the insert select text first

modules/Components/src/client/ACASFormFields.coffee

@@ -382,7 +382,7 @@ class ACASFormLSCodeValueFieldController extends ACASFormAbstractFieldController
 		mdl = @getModel()
 		if @pickList?
 			plOptions =
-				el: @$('select')
+				el: @$('.bv_editablePicklist')
 				collection: @pickList
 				selectedCode: mdl.get('value')
 				parameter: @options.modelKey
@@ -394,7 +394,7 @@ class ACASFormLSCodeValueFieldController extends ACASFormAbstractFieldController
 			else
 				@pickList.url = "/api/codetables/#{mdl.get 'codeType'}/#{mdl.get 'codeKind'}"
 			plOptions =
-				el: @$('select')
+				el: @$('.bv_editablePicklist')
 				collection: @pickList
 				selectedCode: mdl.get('value')
 				parameter: @options.modelKey
@@ -412,7 +412,26 @@ class ACASFormLSCodeValueFieldController extends ACASFormAbstractFieldController
 						code: "unassigned"
 						name: "Select Category"
 
-		@pickListController = new PickListSelectController plOptions
+		# Default is not editable picklist
+		if @options.editablePicklist? && @options.editablePicklist
+			plOptions.editable = true
+		else
+			plOptions.editable = false
+
+		# Default is no role required to edit picklist
+		if @options.editablePicklistRoles?
+			plOptions.roles = @options.editablePicklistRoles
+
+		# Default is to automatically save picklist items to the db
+		# Otherwise the controller will need to explicitly tell editable picklist controller
+		# to save the picklist items to the db.  This is because there is a use case to only save
+		# the picklist items to the db when the user clicks the save button on the thing.
+		plOptions.autoSave = true
+		if @options.autoSavePickListItem? && !@options.autoSavePickListItem
+			plOptions.autoSave = false
+
+		@pickListController = new EditablePickListSelect2Controller plOptions
+		@pickListController.on('change', @handleInputChanged).bind(@)
 		@pickListController.render()
 
 

modules/Components/src/client/ACASFormFieldsView.html

@@ -18,7 +18,7 @@
 <script type="text/template" id="ACASFormLSCodeValueFieldView" xmlns="http://www.w3.org/1999/html">
     <label class="control-label"><span class ="label-text">launching controller must provide or set label</span><i class="icon-info-sign label-tooltip hide" data-toggle="tooltip" style="margin-left:4px;"></i></label>
     <div class="controls">
-        <select class="" ></select>
+        <div class="bv_editablePicklist" ></div>
         <span class="help-inline hide"></span>
         <span class="desc-inline help-block hide"></span>
     </div>

modules/Components/src/client/AbstractFormController.coffee

@@ -157,6 +157,8 @@ class AbstractThingFormController extends AbstractFormController
 				toFixed: field.fieldSettings.toFixed
 				pickList: field.fieldSettings.pickList
 				showDescription: field.fieldSettings.showDescription
+				editablePicklist: field.fieldSettings.editablePicklist
+				editablePicklistRoles: field.fieldSettings.editablePicklistRoles
 
 			switch field.fieldSettings.fieldType
 				when 'label'

modules/Components/src/client/PickList.coffee

@@ -14,6 +14,10 @@ class PickListList extends Backbone.Collection
 		@detect (enu) ->
 			enu.get("code") is code
 
+	getNewModels: () ->
+		@filter (pl) ->
+			pl.isNew()
+
 	getCurrent: ->
 		@filter (pl) ->
 			!(pl.get 'ignored')
@@ -186,17 +190,21 @@ class PickListSelectController extends Backbone.View
 		@rendered = true
 
 	addOne: (enm) =>
-		shouldRender = @showIgnored
+		shouldRender = true
 
 		# Only filter if filtered is set and true
 		# If filter is not set, this will be false
 		if enm.get('filtered') == true
 			shouldRender = false
 		else
 			if enm.get 'ignored'
-				if @selectedCode?
-					if @selectedCode is enm.get 'code'
-						shouldRender = true
+				if @showIgnored
+					shouldRender = true
+				else
+					shouldRender = false
+					if @selectedCode?
+						if @selectedCode is enm.get 'code'
+							shouldRender = true
 			else
 				shouldRender = true
 
@@ -309,7 +317,10 @@ class PickListSelect2Controller extends PickListSelectController
 		if @options?.width?
 			@width = @options.width
 		else
-			@width = "100%"
+			# Select2 https://select2.org/appearance#container-width
+			# Uses the style attribute value if available, falling back to the computed element width as necessary.
+			@width = "resolve"
+
 		@propertyMap = acasPropertyMap
 		if options.propertyMap?
 			if _.isObject(options.propertyMap) and options.propertyMap.id? and options.propertyMap.text?
@@ -321,17 +332,22 @@ class PickListSelect2Controller extends PickListSelectController
 		super(options)
 
 	render: =>
+		$(@el).empty()
+		@collection.each (enm) =>
+			@addOne enm
+
 		# convert model objects to array of json objects which have 'id' and 'text' properties if propertyMap specified
 		mappedData = []
 		for obj in @collection.toJSON()
-			if (not obj.ignored? or (obj.ignored is false) or (@showIgnored? and @showIgnored is true))
+			if (not obj.ignored? or (obj.ignored is false) or (@showIgnored? and @showIgnored is true)) && (!obj.filtered? || obj.filtered == false)
 				if @propertyMap?
 					obj.id = obj[@propertyMap.id]
 					obj.text = obj[@propertyMap.text]
 				mappedData.push(obj)
 		@placeholder = ""
 		if @options?.placeholder?
 			@placeholder = @options.placeholder
+
 		$(@el).select2
 			placeholder: @placeholder
 			data: mappedData
@@ -343,10 +359,6 @@ class PickListSelect2Controller extends PickListSelectController
 		@rendered = true
 		@
 
-	addOne: (enm) =>
-# override to do nothing
-		return
-
 	getSelectedCode: ->
 		result = $(@el).val()
 		# if result is null then we'll return the "unassigned" instead if it
@@ -471,31 +483,43 @@ class EditablePickListSelectController extends Backbone.View
 	setupEditablePickList: ->
 		parameterNameWithSpaces = @options.parameter.replace /([A-Z])/g,' $1'
 		pascalCaseParameterName = (parameterNameWithSpaces).charAt(0).toUpperCase() + (parameterNameWithSpaces).slice(1)
+		if @pickListController?
+			filters = @picklistController.filters
+			@pickListController.remove()
+
 		@pickListController = new PickListSelectController
-			el: @$('.bv_parameterSelectList')
+			el: $(@el).find('.bv_parameterSelectList')
 			collection: @collection
 			insertFirstOption: new PickList
 				code: "unassigned"
 				name: "Select "+pascalCaseParameterName
 			selectedCode: @options.selectedCode
 
 	setupEditingPrivileges: =>
-		if @options.roles?
-			if UtilityFunctions::testUserHasRole window.AppLaunchParams.loginUser, @options.roles
-				@$('.bv_tooltipWrapper').removeAttr('data-toggle')
-				@$('.bv_tooltipWrapper').removeAttr('data-original-title')
+		@editable = true
+		if @options.editable?
+			@editable = @options.editable
+
+		if @editable
+			if @options.roles?
+				if UtilityFunctions::testUserHasRole window.AppLaunchParams.loginUser, @options.roles
+					@$('.bv_tooltipWrapper').removeAttr('data-toggle')
+					@$('.bv_tooltipWrapper').removeAttr('data-original-title')
 
-			else
-				@$('.bv_addOptionBtn').removeAttr('data-toggle')
-				@$('.bv_addOptionBtn').removeAttr('data-target')
-				@$('.bv_addOptionBtn').removeAttr('data-backdrop')
-				@$('.bv_addOptionBtn').css({'color':"#cccccc"})
-				@$('.bv_tooltipWrapper').tooltip()
-				@$("body").tooltip selector: '.bv_tooltipWrapper'
+				else
+					@$('.bv_addOptionBtn').removeAttr('data-toggle')
+					@$('.bv_addOptionBtn').removeAttr('data-target')
+					@$('.bv_addOptionBtn').removeAttr('data-backdrop')
+					@$('.bv_addOptionBtn').css({'color':"#cccccc"})
+					@$('.bv_tooltipWrapper').tooltip()
+					@$("body").tooltip selector: '.bv_tooltipWrapper'
 
+			else
+				@$('.bv_tooltipWrapper').removeAttr('data-toggle')
+				@$('.bv_tooltipWrapper').removeAttr('data-original-title')
 		else
-			@$('.bv_tooltipWrapper').removeAttr('data-toggle')
-			@$('.bv_tooltipWrapper').removeAttr('data-original-title')
+			# This is set us not editable so remove the add option button
+			@$('.bv_addOptionBtn').hide()
 
 	getSelectedCode: ->
 		@pickListController.getSelectedCode()
@@ -549,6 +573,10 @@ class EditablePickListSelectController extends Backbone.View
 		else
 			@$('.bv_errorMessage').show()
 
+		if @options.autoSave? && @options.autoSave
+			@saveNewOption ()=>
+
+
 	hideAddOptionButton: ->
 		@$('.bv_addOptionBtn').hide()
 
@@ -557,30 +585,39 @@ class EditablePickListSelectController extends Backbone.View
 
 	saveNewOption: (callback) =>
 		code = @pickListController.getSelectedCode()
-		selectedModel = @pickListController.collection.getModelWithCode(code)
-		if selectedModel != undefined and selectedModel.get('code') != "unassigned"
-			if selectedModel.get('id')?
-				callback.call()
-			else
-				unless selectedModel.get('codeType')?
-					selectedModel.set 'codeType', @options.codeType
-				unless selectedModel.get('codeKind')?
-					selectedModel.set 'codeKind', @options.codeKind
-				$.ajax
-					type: 'POST'
-					url: "/api/codetables"
-					data:
-						JSON.stringify(codeEntry:(selectedModel))
-					contentType: 'application/json'
-					dataType: 'json'
-					success: (response) =>
-						callback.call()
-					error: (err) =>
-						alert 'could not add option to code table'
-						@serviceReturn = null
+		unsavedModels = @pickListController.collection.getNewModels()
+		unsavedModels = unsavedModels.filter (model) =>
+			model.get('code') != "unassigned"
+		if unsavedModels.length > 0
+			modelToSave = unsavedModels[0]
+			unless modelToSave.get('codeType')?
+				modelToSave.set 'codeType', @options.codeType
+			unless modelToSave.get('codeKind')?
+				modelToSave.set 'codeKind', @options.codeKind
+			$.ajax
+				type: 'POST'
+				url: "/api/codetables"
+				data:
+					JSON.stringify(codeEntry:(modelToSave))
+				contentType: 'application/json'
+				dataType: 'json'
+				success: (response) =>
+					callback.call()
+				error: (err) =>
+					alert 'could not add option to code table'
+					@serviceReturn = null
 		else
 			callback.call()
 
+	removeFilters: () ->
+		@pickListController.removeFilters()
+
+	addFilter: (filter) ->
+		@pickListController.addFilter(filter)
+
+	applyFilters: () =>
+		@pickListController.applyFilters()
+
 #	setupContextMenu: ->
 #		$.fn.contextMenu = (settings) ->
 #
@@ -638,13 +675,18 @@ class EditablePickListSelect2Controller extends EditablePickListSelectController
 	setupEditablePickList: ->
 		parameterNameWithSpaces = @options.parameter.replace /([A-Z])/g,' $1'
 		pascalCaseParameterName = (parameterNameWithSpaces).charAt(0).toUpperCase() + (parameterNameWithSpaces).slice(1)
-		@pickListController = new PickListSelect2Controller #TODO: need to fix addOne function to insert unassigned option as first option
+
+		if @pickListController?
+			filters = @pickListController.filters
+			@pickListController.remove()
+		@pickListController = new PickListSelect2Controller
 			el: @$('.bv_parameterSelectList')
 			collection: @collection
 			insertFirstOption: new PickList
 				code: "unassigned"
 				name: "Select "+pascalCaseParameterName
 			selectedCode: @options.selectedCode
+			filters: filters
 
 class ThingLabelComboBoxController extends PickListSelect2Controller
 

modules/Components/src/client/PickList.html

@@ -40,23 +40,11 @@ <h4 class="modal-title bv_addOptionLabel">Add</h4>
 </script>
 
 <script type="text/template" id="EditablePickListView" xmlns="http://www.w3.org/1999/html">
-    <select class="bv_parameterSelectList" style="width:349px;"></select>
+    <select class="bv_parameterSelectList"></select>
     <span class="bv_tooltipWrapper" style="display: inline-block;" data-toggle="tooltip" data-original-title="You do not have permission to add options to the select list.">
         <button class="btn bv_addOptionBtn" style="padding-left:4px;padding-right:4px;" data-toggle="modal" data-target="bv_addParameterOptionModal" data-backdrop="static">
             <i class="icon-plus-sign"></i>
         </button>
     </span>
     <span class="bv_addOptionPanel"></span>
-
-
-    <!--<ul class="dropdown-menu bv_contextMenu" role="menu" style="display:none" >-->
-    <!--<li><a tabindex="-1" href="#">Edit</a></li>-->
-    <!--<li><a tabindex="-1" href="#">Another action</a></li>-->
-    <!--<li><a tabindex="-1" href="#">Something else here</a></li>-->
-    <!--<li class="divider"></li>-->
-    <!--<li><a tabindex="-1" href="#">Separated link</a></li>-->
-    <!--</ul>-->
-
-
-
 </script>

modules/ModuleMenus/src/client/ModuleMenusConfiguration.coffee

@@ -27,6 +27,10 @@ window.ModuleMenusConfiguration =
 		mainControllerClassName: window.conf.experiment.mainControllerClassName
 		autoLaunchName:"experiment_base"
 		requireUserRoles: [window.conf.roles.acas.userRole]
+	,
+		isHeader: false, menuName: "Example Thing"
+		mainControllerClassName: "ExampleThingController"
+		autoLaunchName:"example_thing"
 	,
 		isHeader: true
 		menuName: "Search and Edit"