summaryrefslogtreecommitdiffstats
path: root/src/templates/dashboard/searchable_select_multiple.html
blob: be519897e2dfd28f0e14cab212bf80e64227615e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<div id="search_select_outer" class="d-flex flex-column">
    {% if incompatible == "true" %}
        <div class="alert alert-danger" role="alert">
            <h3>Warning: Incompatible Configuration</h3>
            <p>Please make a different selection, as the current config conflicts with the selected pod</p>
        </div>
    {% endif %}
    <div id="added_counter" class="text-center">
        <span id="added_number">0</span>
        <span id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</span>
    </div>

    <div id="added_list" class="pb-2">

    </div>

    <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="" oninput="searchable_select_multiple_widget.search(this.value)"
    {% if disabled %} disabled {% endif %}
    >
    </input>

    <input type="hidden" id="selector" name="{{ name }}" class="form-control d-none"
    {% if disabled %} disabled {% endif %}
    >
    </input>

    <div id="scroll_restrictor" class="d-flex pb-4 position-relative">
        <div id="drop_results" class="list-group w-100 z-2 overflow-auto position-absolute mh-30vh"></div>
    </div>
</div>

<script type="text/javascript">
    function searchableSelectMultipleWidgetEntry() {
        let format_vars = {
            "show_from_noentry": {{show_from_noentry|yesno:"true,false"}},
            "show_x_results": {{show_x_results|default:-1}},
            "results_scrollable": {{results_scrollable|yesno:"true,false"}},
            "selectable_limit": {{selectable_limit|default:-1}},
            "placeholder": "{{placeholder|default:"begin typing"}}"
        };

        let field_dataset = {{items|safe}};

        let field_initial = {{ initial|safe }};

        //global
        searchable_select_multiple_widget = new SearchableSelectMultipleWidget(format_vars, field_dataset, field_initial);
    }

    searchableSelectMultipleWidgetEntry();

    /*
    var show_from_noentry = context(show_from_noentry|yesno:"true,false") // whether to show any results before user starts typing
    var show_x_results = context(show_x_results|default:-1) // how many results to show at a time, -1 shows all results
    var results_scrollable = {{results_scrollable|yesno:"true,false") // whether list should be scrollable
    var selectable_limit = {{selectable_limit|default:-1) // how many selections can be made, -1 allows infinitely many
    var placeholder = "context(placeholder|default:"begin typing")" // placeholder that goes in text box

    needed info
    var items = context(items|safe) // items to add to trie. Type is a dictionary of dictionaries with structure:
        {
            id# : {
                "id": any, identifiable on backend
                "small_name": string, displayed first (before separator), searchable (use for e.g. username)
                "expanded_name": string, displayed second (after separator), searchable (use for e.g. email address)
                "string": string, not displayed, still searchable
            }
        }

     used later:
    context(selectable_limit): changes what number displays for field
    context(name): form identifiable name, relevant for backend
        // when submitted, form will contain field data in post with name as the key
    context(placeholder): "greyed out" contents put into search field initially to guide user as to what they're searching for
    context(initial): in search_field_init(), marked safe, an array of id's each referring to an id from items
    */
</script>