src/templates/base/dashboard/multiple_select_filter_widget.html

   1 <input name="filter_field" id="filter_field" type="hidden"/>
   2 <div class="row">
   3     {% for object_class, object_list in display_objects %}
   4         <div class="col-12 col-lg-6 d-flex flex-column pt-2 mx-0">
   5             <div class="col mx-0 border rounded py-2 flex-grow-1 d-flex flex-column">
   6                 <div class="w-100">
   7                     <h4 class="text-capitalize">{{object_class}}</h4>
   8                 </div>
   9                 <div id="{{object_class}}" class="row flex-grow-1">
  10                 {% for obj in object_list %}
  11                     <div class="col-12 col-md-6 col-xl-4 my-2 d-flex flex-grow-1">
  12                         <div id="{{ obj.id|default:'not_provided' }}" class="card flex-grow-1">
  13                             <div class="card-header">
  14                                 <p class="h5 font-weight-bold mt-2">{{obj.name}}</p>
  15                             </div>
  16                             <div class="card-body">
  17                                 <p class="grid-item-description">{{obj.description}}</p>
  18                             </div>
  19                             <div class="card-footer">
  20                                 <button type="button" class="btn btn-success grid-item-select-btn w-100 stretched-link"
  21                                         onclick="multi_filter_widget.processClick('{{obj.id}}');">
  22                                     {% if obj.multiple %}
  23                                         Add
  24                                     {% else %}
  25                                         Select
  26                                     {% endif %}
  27                                 </button>
  28                             </div>
  29                         </div>
  30                     </div>
  31                 {% endfor %}
  32                 </div>
  33             </div>
  34         </div>
  35     {% endfor %}
  36 </div>
  37
  38 <div id="dropdown_row" class="row">
  39     <div id="dropdown_wrapper" class="col-12 col-lg-6 d-flex flex-column pt-2 mx-0">
  40     </div>
  41 </div>
  42 <script>
  43 function multipleSelectFilterWidgetEntry() {
  44     const graph_neighbors = {{ neighbors|safe }};
  45     const filter_items = {{ filter_items|safe }};
  46     const initial_value = {{ initial_value|default_if_none:"{}"|safe }};
  47
  48     //global variables
  49     multi_filter_widget = new MultipleSelectFilterWidget(graph_neighbors, filter_items, initial_value);
  50     form_submission_callbacks.push(() => multi_filter_widget.finish());
  51 }
  52
  53 multipleSelectFilterWidgetEntry();
  54 </script>