Mark newly created entities better in structural entity selector

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 += "<b>" + escape(data.text) + "</b>";
+
+        if (data.not_in_db_yet) {
+            //Not yet added items are shown italic and with a badge
+            name += "<i><b>" + escape(data.text) + "</b></i>" + "<span class='ms-3 badge bg-info badge-info'>" + trans(ENTITY_SELECT_GROUP_NEW_NOT_ADDED_TO_DB) + "</span>";
+        } else {
+            name += "<b>" + escape(data.text) + "</b>";
+        }
 
         return '<div>' + (data.image ? "<img class='structural-entity-select-image' style='margin-right: 5px;' ' src='" + data.image + "'/>" : "") + name + '</div>';
     }

src/Form/Type/Helper/StructuralEntityChoiceHelper.php

@@ -86,6 +86,9 @@ class StructuralEntityChoiceHelper
             $tmp += ['data-filetype_filter' => $choice->getFiletypeFilter()];
         }
 
+        //Show entities that are not added to DB yet separately from other entities
+        $tmp['data-not_in_db_yet'] = $choice->getID() === null;
+
         return $tmp;
     }