Feature Assemblies / Custom part state / Part IPN suggest with category prefixes

.env

@@ -60,7 +60,6 @@ ERROR_PAGE_ADMIN_EMAIL=''
 # If this is set to true, solutions to common problems are shown on error pages. Disable this, if you do not want your users to see them...
 ERROR_PAGE_SHOW_HELP=1
 
-
 ###################################################################################
 # SAML Single sign on-settings
 ###################################################################################

assets/controllers/elements/assembly_select_controller.js

@@ -0,0 +1,70 @@
+import {Controller} from "@hotwired/stimulus";
+
+import "tom-select/dist/css/tom-select.bootstrap5.css";
+import '../../css/components/tom-select_extensions.css';
+import TomSelect from "tom-select";
+import {marked} from "marked";
+
+export default class extends Controller {
+    _tomSelect;
+
+    connect() {
+
+        let settings = {
+            allowEmptyOption: true,
+            plugins: ['dropdown_input', 'clear_button'],
+            searchField: ["name", "description", "category", "footprint"],
+            valueField: "id",
+            labelField: "name",
+            preload: "focus",
+            render: {
+                item: (data, escape) => {
+                    return '<span>' + (data.image ? "<img style='height: 1.5rem; margin-right: 5px;' ' src='" + data.image + "'/>" : "") + escape(data.name) +  '</span>';
+                },
+                option: (data, escape) => {
+                    if(data.text) {
+                        return '<span>' + escape(data.text) + '</span>';
+                    }
+
+                    let tmp = '<div class="row m-0">' +
+                        "<div class='col-2 p-0 d-flex align-items-center' style='max-width: 80px;'>" +
+                        (data.image ? "<img class='typeahead-image' src='" + data.image + "'/>" : "") +
+                        "</div>" +
+                        "<div class='col-10'>" +
+                        '<h6 class="m-0">' + escape(data.name) + '</h6>' +
+                        (data.description ? '<p class="m-0">' + marked.parseInline(data.description) + '</p>' : "") +
+                        (data.category ? '<p class="m-0"><span class="fa-solid fa-tags fa-fw"></span> ' + escape(data.category) : "");
+
+                    return tmp + '</p>' +
+                        '</div></div>';
+                }
+            }
+        };
+
+
+        if (this.element.dataset.autocomplete) {
+            const base_url = this.element.dataset.autocomplete;
+            settings.valueField = "id";
+            settings.load = (query, callback) => {
+                const url = base_url.replace('__QUERY__', encodeURIComponent(query));
+
+                fetch(url)
+                    .then(response => response.json())
+                    .then(json => {callback(json);})
+                    .catch(() => {
+                        callback()
+                    });
+            };
+
+
+            this._tomSelect = new TomSelect(this.element, settings);
+            //this._tomSelect.clearOptions();
+        }
+    }
+
+    disconnect() {
+        super.disconnect();
+        //Destroy the TomSelect instance
+        this._tomSelect.destroy();
+    }
+}

assets/controllers/elements/ckeditor_controller.js

@@ -78,6 +78,15 @@ export default class extends Controller {
                         editor_div.classList.add(...new_classes.split(","));
                     }
 
+                    // Automatic synchronization of source input
+                    editor.model.document.on("change:data", () => {
+                        editor.updateSourceElement();
+
+                        // Dispatch the input event for further treatment
+                        const event = new Event("input");
+                        this.element.dispatchEvent(event);
+                    });
+
                     //This return is important! Otherwise we get mysterious errors in the console
                     //See: https://github.com/ckeditor/ckeditor5/issues/5897#issuecomment-628471302
                     return editor;

assets/controllers/elements/ipn_suggestion_controller.js

@@ -0,0 +1,250 @@
+import { Controller } from "@hotwired/stimulus";
+import "../../css/components/autocomplete_bootstrap_theme.css";
+
+export default class extends Controller {
+    static targets = ["input"];
+    static values = {
+        partId: Number,
+        partCategoryId: Number,
+        partDescription: String,
+        suggestions: Object,
+        commonSectionHeader: String, // Dynamic header for common Prefixes
+        partIncrementHeader: String, // Dynamic header for new possible part increment
+        suggestUrl: String,
+    };
+
+    connect() {
+        this.configureAutocomplete();
+        this.watchCategoryChanges();
+        this.watchDescriptionChanges();
+    }
+
+    templates = {
+        commonSectionHeader({ title, html }) {
+            return html`
+                <section class="aa-Source">
+                    <div class="aa-SourceHeader">
+                        <span class="aa-SourceHeaderTitle">${title}</span>
+                        <div class="aa-SourceHeaderLine"></div>
+                    </div>
+                </section>
+            `;
+        },
+        partIncrementHeader({ title, html }) {
+            return html`
+                <section class="aa-Source">
+                    <div class="aa-SourceHeader">
+                        <span class="aa-SourceHeaderTitle">${title}</span>
+                        <div class="aa-SourceHeaderLine"></div>
+                    </div>
+                </section>
+            `;
+        },
+        list({ html }) {
+            return html`
+                <ul class="aa-List" role="listbox"></ul>
+            `;
+        },
+        item({ suggestion, description, html }) {
+            return html`
+                <li class="aa-Item" role="option" data-suggestion="${suggestion}" aria-selected="false">
+                    <div class="aa-ItemWrapper">
+                        <div class="aa-ItemContent">
+                            <div class="aa-ItemIcon aa-ItemIcon--noBorder">
+                                <svg viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9z"></path>
+                                </svg>
+                            </div>
+                            <div class="aa-ItemContentBody">
+                                <div class="aa-ItemContentTitle">${suggestion}</div>
+                                <div class="aa-ItemContentDescription">${description}</div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            `;
+        },
+    };
+
+    configureAutocomplete() {
+        const inputField = this.inputTarget;
+        const commonPrefixes = this.suggestionsValue.commonPrefixes || [];
+        const prefixesPartIncrement = this.suggestionsValue.prefixesPartIncrement || [];
+        const commonHeader = this.commonSectionHeaderValue;
+        const partIncrementHeader = this.partIncrementHeaderValue;
+
+        if (!inputField || (!commonPrefixes.length && !prefixesPartIncrement.length)) return;
+
+        // Check whether the panel should be created at the update
+        if (this.isPanelInitialized) {
+            const existingPanel = inputField.parentNode.querySelector(".aa-Panel");
+            if (existingPanel) {
+                // Only remove the panel in the update phase
+
+                existingPanel.remove();
+            }
+        }
+
+        // Create panel
+        const panel = document.createElement("div");
+        panel.classList.add("aa-Panel");
+        panel.style.display = "none";
+
+        // Create panel layout
+        const panelLayout = document.createElement("div");
+        panelLayout.classList.add("aa-PanelLayout", "aa-Panel--scrollable");
+
+        // Section for prefixes part increment
+        if (prefixesPartIncrement.length) {
+            const partIncrementSection = document.createElement("section");
+            partIncrementSection.classList.add("aa-Source");
+
+            const partIncrementHeaderHtml = this.templates.partIncrementHeader({
+                title: partIncrementHeader,
+                html: String.raw,
+            });
+            partIncrementSection.innerHTML += partIncrementHeaderHtml;
+
+            const partIncrementList = document.createElement("ul");
+            partIncrementList.classList.add("aa-List");
+            partIncrementList.setAttribute("role", "listbox");
+
+            prefixesPartIncrement.forEach((prefix) => {
+                const itemHTML = this.templates.item({
+                    suggestion: prefix.title,
+                    description: prefix.description,
+                    html: String.raw,
+                });
+                partIncrementList.innerHTML += itemHTML;
+            });
+
+            partIncrementSection.appendChild(partIncrementList);
+            panelLayout.appendChild(partIncrementSection);
+        }
+
+        // Section for common prefixes
+        if (commonPrefixes.length) {
+            const commonSection = document.createElement("section");
+            commonSection.classList.add("aa-Source");
+
+            const commonSectionHeader = this.templates.commonSectionHeader({
+                title: commonHeader,
+                html: String.raw,
+            });
+            commonSection.innerHTML += commonSectionHeader;
+
+            const commonList = document.createElement("ul");
+            commonList.classList.add("aa-List");
+            commonList.setAttribute("role", "listbox");
+
+            commonPrefixes.forEach((prefix) => {
+                const itemHTML = this.templates.item({
+                    suggestion: prefix.title,
+                    description: prefix.description,
+                    html: String.raw,
+                });
+                commonList.innerHTML += itemHTML;
+            });
+
+            commonSection.appendChild(commonList);
+            panelLayout.appendChild(commonSection);
+        }
+
+        panel.appendChild(panelLayout);
+        inputField.parentNode.appendChild(panel);
+
+        inputField.addEventListener("focus", () => {
+            panel.style.display = "block";
+        });
+
+        inputField.addEventListener("blur", () => {
+            setTimeout(() => {
+                panel.style.display = "none";
+            }, 100);
+        });
+
+        // Selection of an item
+        panelLayout.addEventListener("mousedown", (event) => {
+            const target = event.target.closest("li");
+
+            if (target) {
+                inputField.value = target.dataset.suggestion;
+                panel.style.display = "none";
+            }
+        });
+
+        this.isPanelInitialized = true;
+    };
+
+    watchCategoryChanges() {
+        const categoryField = document.querySelector('[data-ipn-suggestion="categoryField"]');
+        const descriptionField = document.querySelector('[data-ipn-suggestion="descriptionField"]');
+        this.previousCategoryId = Number(this.partCategoryIdValue);
+
+        if (categoryField) {
+            categoryField.addEventListener("change", () => {
+                const categoryId = Number(categoryField.value);
+                const description = String(descriptionField?.value ?? '');
+
+                // Check whether the category has changed compared to the previous ID
+                if (categoryId !== this.previousCategoryId) {
+                    this.fetchNewSuggestions(categoryId, description);
+                    this.previousCategoryId = categoryId;
+                }
+            });
+        }
+    }
+
+    watchDescriptionChanges() {
+        const categoryField = document.querySelector('[data-ipn-suggestion="categoryField"]');
+        const descriptionField = document.querySelector('[data-ipn-suggestion="descriptionField"]');
+        this.previousDescription = String(this.partDescriptionValue);
+
+        if (descriptionField) {
+            descriptionField.addEventListener("input", () => {
+                const categoryId = Number(categoryField.value);
+                const description = String(descriptionField?.value ?? '');
+
+                // Check whether the description has changed compared to the previous one
+                if (description !== this.previousDescription) {
+                    this.fetchNewSuggestions(categoryId, description);
+                    this.previousDescription = description;
+                }
+            });
+        }
+    }
+
+    fetchNewSuggestions(categoryId, description) {
+        const baseUrl = this.suggestUrlValue;
+        const partId = this.partIdValue;
+        const truncatedDescription = description.length > 150 ? description.substring(0, 150) : description;
+        const encodedDescription = this.base64EncodeUtf8(truncatedDescription);
+        const url = `${baseUrl}?partId=${partId}&categoryId=${categoryId}` + (description !== '' ? `&description=${encodedDescription}` : '');
+
+        fetch(url, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json",
+            },
+        })
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error(`Error when calling up the IPN-suggestions: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then((data) => {
+                this.suggestionsValue = data;
+                this.configureAutocomplete();
+            })
+            .catch((error) => {
+                console.error("Errors when loading the new IPN-suggestions:", error);
+            });
+    };
+
+    base64EncodeUtf8(text) {
+        const utf8Bytes = new TextEncoder().encode(text);
+        return btoa(String.fromCharCode(...utf8Bytes));
+    };
+}

assets/controllers/elements/part_select_controller.js

@@ -12,7 +12,7 @@ export default class extends Controller {
 
         let settings = {
             allowEmptyOption: true,
-            plugins: ['dropdown_input'],
+            plugins: ['dropdown_input', 'clear_button'],
             searchField: ["name", "description", "category", "footprint"],
             valueField: "id",
             labelField: "name",