# Context

This is an the follow-up of <mention class="mention" data-id="62667" data-type="work_package" data-text="##62667">##62667</mention> and at the same time the preparation for <mention class="mention" data-id="63321" data-type="work_package" data-text="##63321">##63321</mention>&nbsp;

# Acceptance criteria

## Anatomy

* There is a new component called `FilterableTreeView`

* It consists of

* A search field at the top (basically a text field with leading search icon)

* A `TreeView` component below


## Behaviour

**TreeView**

* The `TreeView` behaves normally (as specified in ##62667)

* it supports two loading strategies (static Begin of the insertion~~and dynamic)~~End of the insertion Begin of the deletion and dynamic)End of the deletion

* it supports multi-select for the static loading strategy

* it supports leading and trailing visuals

* it supports leading actions

* etc.


**Search field**

* When Begin of the insertionusingEnd of the insertion Begin of the deletion searching for a string inEnd of the deletion the Begin of the insertionsearchEnd of the insertion Begin of the deletion textEnd of the deletion field Begin of the insertionto filter/search for textEnd of the insertion with Begin of the insertiontheEnd of the insertion **static loading strategy:**

* The component itself filters the tree view Begin of the insertionto show theEnd of the insertion Begin of the deletion forEnd of the deletion exact matches of the string Begin of the insertion(incl. partial matches of that exact search string: eg. &quot;par&quot; matches &quot;partial&quot; but not &quot;Primer&quot;)End of the insertion

* If Begin of the insertionmulti-selectEnd of the insertion Begin of the deletion mutli-selectEnd of the deletion is Begin of the insertionactivated:

* End of the insertion Begin of the deletion activated,End of the deletion the selection Begin of the insertionbefore the searchEnd of the insertion is Begin of the insertionlaunched is preserved (even if the search results don&#39;t include previously checked items)

End of the insertion Begin of the deletion kept

End of the deletion * Begin of the insertionif &#39;include all sub-nodes&#39; is active, checkingEnd of the insertion Begin of the deletion When searching forEnd of the deletion a Begin of the insertionparent will also check all sub-nodes including those that are not visibleEnd of the insertion Begin of the deletion stringEnd of the deletion in the Begin of the insertionsearch filter result

End of the insertion Begin of the deletion text field with **dynamic loading strategy:**

End of the deletion * Begin of the insertionEven inEnd of the insertion Begin of the deletion There isEnd of the deletion a Begin of the insertionfiltered state, when submitting the form, _all_ selectedEnd of the insertion Begin of the deletion new request send to get allEnd of the deletion items Begin of the insertion(including thoseEnd of the insertion that Begin of the insertionare not visible inEnd of the insertion Begin of the deletion matchEnd of the deletion the Begin of the insertioncurrent filter results) will be submitted as checkedEnd of the insertion Begin of the deletion stringEnd of the deletion

* Begin of the insertion**\[open\]** This FilterableTreeView does not support **dynamic loading strategy** at all

* End of the insertion If a leaf matches the search, but the node does not, the whole hiearchy of the leaf is shown and those items that do not match the string are disabled (so greyed out and not clickable)

* The letters that match the search string are highlighted in a different color in each found tree view item


## Use case

Begin of the deletion tbd

End of the deletion **Option 1**

* Begin of the deletion This new component will be used as the new transversal/global project selector


**Option 2**

* End of the deletion Use is in the admin settings as a way of selecting projects in which to enable a certain object, like a project attribute, type or custom field.

* Eg. In Administration → Projects → Project attributes → {one attribute} → Projects tab (the same pattern exists in other admin pages like Custom fields and Types)


Begin of the insertion~~**Option 2**~~

* ~~This new component will be used as the new transversal/global project selector~~

* This will be handled by the <mention class="mention" data-id="63321" data-type="work_package" data-text="##63321">##63321</mention> 


<br>

End of the insertion ## Open questions:

* Which use case should we use?

* Begin of the insertion~~WithEnd of the insertion Begin of the deletion WithEnd of the deletion multi-select activated Begin of the insertionwith the option to include all sub-nodes when selecting a parent:~~End of the insertion

* Begin of the insertion~~WhenEnd of the insertion Begin of the deletion WhenEnd of the deletion I filter and select a parent node: Should all items of the parent be selected or only the visible Begin of the insertionones?~~End of the insertion Begin of the deletion ones?End of the deletion

* Begin of the insertion~~WhenEnd of the insertion Begin of the deletion WhenEnd of the deletion I already selected some items and filter afterwards, will the hidde items still be part of the form Begin of the insertiondata?~~

* ~~When using the search field to filter/search for text with **dynamic loading strategy:**~~

* ~~There is a new request send to get all items that match the string, including from nodes that were previously not yet loaded (because unexpanded)~~

* ~~**\[open\]** Does this mean that as soon as you launch a search, that all items are then lodaded? (For the search to be able to traverse all nodes and all items)~~

* ~~**\[open\]** Even if all items are then loaded, effectively making it a static list, when the search is reinitialised, previously collapsed nodes should remain collapsed~~End of the insertion Begin of the deletion data?End of the deletion