# 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

* Begin of the insertionAn optional Segemented Control with the options &quot;All&quot; and &quot;Selected&quot;

* The texts is configurable

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

* Begin of the insertionAn optional checkbox &quot;Include sub-nodes&quot;

* The texts is configurable

* End of the insertion A `TreeView` component Begin of the deletion belowEnd of the deletion


## Behaviour

**TreeView**

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

* it supports Begin of the insertion**only one loading**End of the insertion Begin of the deletion two loadingEnd of the deletion strategies Begin of the insertion(static). This is an exception to the normal `TreeView`.End of the insertion Begin of the deletion (static ~~and dynamic)~~End of the deletion

* it supports multi-select Begin of the insertion

* It is optional to showEnd of the insertion Begin of the deletion forEnd of the deletion the Begin of the insertionmixed state of parent nodes with checkbox (when only part of the children are selected)

End of the insertion Begin of the deletion static loading strategy

End of the deletion * it supports leading and trailing visuals

* it supports leading actions

* etc.


**Search field**

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

* The component itself filters the tree view to show the exact matches of the string (incl. partial matches of that exact search string: eg. &quot;par&quot; matches &quot;partial&quot; but not &quot;Primer&quot;)

* If multi-select is activated:

* the selection before the search is launched is preserved (even if the search results don&#39;t include previously checked items)

* if &#39;include all sub-nodes&#39; is active, checking a parent will also check all sub-nodes including those that are not visible in the search filter result

* Even in a filtered state, when submitting the form, _all_ selected items (including those that are not visible in the current filter results) will be submitted as checked

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

* End of the deletion 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 Begin of the insertion


**Segmented control**

* The segmented control has two options:

1. &quot;All&quot;: All items (Label is configurabel, the function is however always the same)

2. &quot;Selected&quot;: Only the already selected ones (Label is configurabel, the function is however always the same)

* When chosing the option &quot;Selected&quot;:

* If a leaf is selected, but the node is not, the whole hiearchy of the leaf is shown and those items that are not selected are disabled (so greyed out and not clickable)

* if &#39;include all sub-nodes&#39; is active, checking a parent will also check all sub-nodes including those that are not visible

* Unchecking an element will keep it in the view. Only after a user-triggered reload (e.g. save) the elements are updated


**Checkbox &quot;Include sub-nodes&quot;**

* When checked, all children of already selected parents are selected and disabled, so they cannot be deselected

* When I afterwards check a parent, its children are also selected and disabled, so they cannot be deselectedEnd of the insertion


## Use case

**Option 1**

* 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.

* We&#39;ll start with the &#39;Projects&#39; tab in the Project attributes page:

* ##63761


~~**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>

## Open questions:

* Which use case should we use?

* ~~With multi-select activated with the option to include all sub-nodes when selecting a parent:~~

* ~~When I filter and select a parent node: Should all items of the parent be selected or only the visible ones?~~

* ~~When I already selected some items and filter afterwards, will the hidde items still be part of the form data?~~

* ~~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~~