Usage of opt-group-columns

[fritzek]

Hi,

I consider using TomSelect in my RoR project for some cases and have some questions before making my choice.

Baseline: I have a field called "stakeholders" which keeps users and groups (both different entities). I have a JSON which perfectly matches the options array in the example - the id, a type to diff between users and groups and the name of either user or group. As a result I preferably would like to save the selected values as a JSON to the JSON field in the issue entity - that shouldn't be a TS issue, but suggestions are welcomed ;)

My questions:

1. is there a way to prevent users from selecting a value twice?
2. if someone revisits the page and wants to add or delete from the selected list, how will the options array be refreshed?
3. is there a way to differentiate between the types visually (e.g. color) of the selected values? Custom html?

Thanks in advance for your help and support.
Fritz

[oyejorge]

Hi Fritz,

1. That's the default functionality. You have to add duplicates: true to allow selecting values more than once
2. Two ways to set the selected values
   (a) <select><option selected>Selected value</option><option>Not a selected value
   (b) new TomSelect('#your-input',{items:['Selected value']})
3. Some custom html (see https://tom-select.js.org/docs/#rendering) along with some custom css should do the trick

[fritzek]

First feedback:

I got it working, but ...

1. rails works with webpacker and yarn; running yarn add tom-select seems to add tom-select to webpacker, but it seems to be empty; instead I added the CDN links to the pages and it worked like a charm.
2. to fill the options json I needed to use raw json - else rails makes it html_safe (escaping all "special" characters) - alternatively I can try to use the select options as part of the select field and let TomSelect to make a json out of it, but there I don't know how to add the optgroup (atm too lazy to read ;)

Open vor now: saving in the DB and getting the values back an see how selected works; also add some custom html to make a diff of the option groups. Will report again

Fritz

[fritzek]

Hi Josh,

I need to get back to you as I have a few (hopefully little) questions:

1. creating the record to hold the selected data works -> in the DB field I can find the selected id's; getting the record back from the DB and showing the data seems to be a bit trickier; here is a snippet from the resulting html (I save you the headache to read ruby code) - in the items config option you can see the 2 id's coming from the DB, the id's should be always valid as you only can remove such item only if no longer used, so I assume that the id's are included in the options pool; unfortunately the items are also part of the input field as the field and content belongs to the data model field - how do I get the names to be shown in the field instead of the id's:

  <div class="field">
    <input id="select-stakeholders" type="text" value="u18,u10" name="testmodel[stakeholders]" />
  </div>
  <br/>
  <input type="submit" name="commit" value="Update Testmodel" data-disable-with="Update Testmodel" />
</form>
<script>
new TomSelect("#select-stakeholders",{
	options: [{"type":"user","id":"u18","name":"Fritze Thielemann"},{"type":"user","id":"u1","name":"Ron Sommer"},{"type":"group","id":"g1","name":"firmenweite Gruppe"},{"type":"user","id":"u10","name":"Heidi Klum"},{"type":"user","id":"u11","name":"Dagobert Duck"},{"type":"group","id":"g9","name":"Operations"},{"type":"user","id":"u9","name":"Don Johnson"},{"type":"user","id":"u12","name":"Elizaveta Brisker"}],
	optgroups: [
		{$order: 2, id: 'group', name: 'Group'},
		{$order: 1, id: 'user', name: 'User'}
	],
	labelField: 'name',
	valueField: 'id',
	optgroupField: 'type',
	optgroupLabelField: 'name',
	optgroupValueField: 'id',
	lockOptgroupOrder: true,
	searchField: ['name'],
	items:['u18,u10'],
	plugins: [
		'optgroup_columns',
		'remove_button'
	],
	openOnFocus: true
});
</script>

2. as long as I have a clue about question 1 and I only use the form with the script tag I think I can show the stakeholders; but how about in views I usually don't have access to the script? Do I need to add the script there too and disable all select functions, only use the script to "translate" the id's into names?

Thanks in advance for your help
Fritz

[fritzek]

Oh, by incident I think I found the answer for 1: in the above example I have to items stored, I my further test I just selected one item; getting back to the page showed me the single item -> so I guess my problem as described above is just the quoting of the items - each item needs quotes

[fritzek]

Yes, can confirm my observations.
Using
items:<%= @testmodel.stakeholders.split(',').to_s.html_safe %>,
gives
items:["u18", "g9"],
and works

[oyejorge]

Glad you're getting it all worked out!