diff --git a/assets/controllers/elements/structural_entity_select_controller.js b/assets/controllers/elements/structural_entity_select_controller.js index 93d26d01..05856a31 100644 --- a/assets/controllers/elements/structural_entity_select_controller.js +++ b/assets/controllers/elements/structural_entity_select_controller.js @@ -22,6 +22,8 @@ import '../../css/components/tom-select_extensions.css'; import TomSelect from "tom-select"; import {Controller} from "@hotwired/stimulus"; +import {trans, ENTITY_SELECT_GROUP_NEW_NOT_ADDED_TO_DB} from '../../translator.js' + export default class extends Controller { _tomSelect; @@ -40,7 +42,7 @@ export default class extends Controller { allowEmptyOption: true, selectOnTab: true, maxOptions: null, - create: allowAdd, + create: allowAdd ? this.createItem.bind(this) : false, createFilter: /\D/, //Must contain a non-digit character, otherwise they would be recognized as DB ID searchField: [ @@ -68,6 +70,14 @@ export default class extends Controller { this._tomSelect.sync(); } + createItem(input, callback) { + callback({ + value: input, + text: input, + not_in_db_yet: true, + }); + } + updateValidity() { //Mark this input as invalid, if the selected option is disabled @@ -104,7 +114,13 @@ export default class extends Controller { if (data.parent) { name += escape(data.parent) + " → "; } - name += "" + escape(data.text) + ""; + + if (data.not_in_db_yet) { + //Not yet added items are shown italic and with a badge + name += "" + escape(data.text) + "" + "" + trans(ENTITY_SELECT_GROUP_NEW_NOT_ADDED_TO_DB) + ""; + } else { + name += "" + escape(data.text) + ""; + } return '