Refactor ministry + organization into organization unit with tree structure

[robbertbos]

No description provided.

In general, the fix is to avoid interpreting potentially tainted strings as HTML. Instead of using innerHTML with template literals that directly interpolate name and type/id, construct the DOM using safe APIs: set textContent for textual content and set attributes via setAttribute or direct property assignment. If you truly need to insert HTML fragments, sanitize the input first with a robust HTML sanitizer, but in this case everything we build can be pure DOM.

Concretely for this file:

• Keep using innerHTML only for constant, hardcoded HTML that contains no user data (like the “Geen opdrachtgevers geselecteerd” message).
• For the selected items, replace:

li.innerHTML = `
  <span class="org-filter-modal__selected-name">${name}</span>
  <button ... onclick="removeOrgTypeFromModalSelection('${type}')" aria-label="Verwijder ${name}">
    <c-icon ...></c-icon>
  </button>
`;

and the similar block for orgs, with explicit DOM construction:

• Create span elements, set their className and textContent to name.
• Create button elements, set type, className, aria-label, and attach a click event listener instead of using an onclick string.
• Create the <c-icon> element and append it to the button.
• Append the span and button to the li.

This keeps all untrusted data (name, type, id) out of innerHTML and out of string-based event handlers, preventing HTML interpretation and XSS. The changes are all within wies/core/static/js/placement_filter_sidebar.js in the block that updates selectedList around lines 1077–1105, and they require no new imports or external libraries.

In general, the fix is to avoid inserting untrusted text into the DOM via innerHTML. Instead, create elements and text nodes with document.createElement and textContent/setAttribute, so user-controlled strings are treated strictly as text, not parsed as HTML. For event handlers, use addEventListener instead of inline onclick attributes, so you don’t need to interpolate IDs into HTML strings.

Concretely for this file:

• Keep the overall structure (UL with LI items, buttons, icon component).
• Replace li.innerHTML = \ ... ${name} ... ${type/id} ...`` blocks with:
  • Create the <span> and set textContent = name.
  • Create the <button>, set class, type, aria-label via setAttribute.
  • Attach the appropriate click handler with addEventListener("click", ...) instead of onclick HTML.
  • Create the <c-icon> element (custom element) and append it to the button.
• Ensure we do not rely on innerHTML for the dynamic parts. We can leave the static “empty” message string (Geen opdrachtgevers geselecteerd) as a fixed string assigned to innerHTML since it contains no user data.

All changes are confined to the snippet shown in wies/core/static/js/placement_filter_sidebar.js, around lines 1075–1107. No new external dependencies are needed; we only use standard DOM APIs that are already in use elsewhere in the file.