aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/base/dashboard/multiple_select_filter_widget.html
blob: 92aa1ba7780ae379335c710486512b0093179df3 (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
<input name="filter_field" id="filter_field" type="hidden"/>
<div class="row">
    {% for object_class, object_list in display_objects %}
        <div class="col-12 col-lg-6 d-flex flex-column pt-2 mx-0">
            <div class="col mx-0 border rounded py-2 flex-grow-1 d-flex flex-column">
                <div class="w-100">
                    <h4 class="text-capitalize">{{object_class}}</h4>
                </div>
                <div id="{{object_class}}" class="row flex-grow-1">
                {% for obj in object_list %}
                    <div class="col-12 col-md-6 col-xl-4 my-2 d-flex flex-grow-1">
                        <div id="{{ obj.id|default:'not_provided' }}" class="card flex-grow-1">
                            <div class="card-header">
                                <p class="h5 font-weight-bold mt-2">{{obj.name}}</p>
                            </div>
                            <div class="card-body">
                                <p class="grid-item-description">{{obj.description}}</p>
                            </div>
                            <div class="card-footer">
                                <button type="button" class="btn btn-success grid-item-select-btn w-100 stretched-link"
                                        onclick="multi_filter_widget.processClick('{{obj.id}}');">
                                    {% if obj.multiple %}
                                        Add
                                    {% else %}
                                        Select
                                    {% endif %}
                                </button>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    {% endfor %}
</div>

<div id="dropdown_row" class="row">
    <div id="dropdown_wrapper" class="col-12 col-lg-6 d-flex flex-column pt-2 mx-0">
    </div>
</div>
<script>
function multipleSelectFilterWidgetEntry() {
    const graph_neighbors = {{ neighbors|safe }};
    const filter_items = {{ filter_items|safe }};
    const initial_value = {{ initial_value|default_if_none:"{}"|safe }};

    //global variables
    multi_filter_widget = new MultipleSelectFilterWidget(graph_neighbors, filter_items, initial_value);
    form_submission_callbacks.push(() => multi_filter_widget.finish());
}

multipleSelectFilterWidgetEntry();
</script>