src/templates/dashboard/searchable_select_multiple.html

   1 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
   2 <script src="/static/js/dashboard.js"></script>
   3 <div id="search_select_outer" class="d-flex flex-column">
   4     {% if incompatible == "true" %}
   5         <div class="alert alert-danger" role="alert">
   6             <h3>Warning: Incompatible Configuration</h3>
   7             <p>Please make a different selection, as the current config conflicts with the selected pod</p>
   8         </div>
   9     {% endif %}
  10     <div id="added_counter" class="text-center">
  11         <span id="added_number">0</span>
  12         <span id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</span>
  13     </div>
  14
  15     <div id="added_list" class="pb-2">
  16
  17     </div>
  18
  19     <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)"
  20     {% if disabled %} disabled {% endif %}
  21     >
  22     </input>
  23
  24     <input type="hidden" id="selector" name="{{ name }}" class="form-control d-none"
  25     {% if disabled %} disabled {% endif %}
  26     >
  27     </input>
  28
  29     <div id="scroll_restrictor" class="d-flex pb-4 position-relative">
  30         <div id="drop_results" class="list-group w-100 z-2 overflow-auto position-absolute mh-30vh"></div>
  31     </div>
  32 </div>
  33
  34 <script type="text/javascript">
  35     function searchableSelectMultipleWidgetEntry() {
  36         let format_vars = {
  37             "show_from_noentry": {{show_from_noentry|yesno:"true,false"}},
  38             "show_x_results": {{show_x_results|default:-1}},
  39             "results_scrollable": {{results_scrollable|yesno:"true,false"}},
  40             "selectable_limit": {{selectable_limit|default:-1}},
  41             "placeholder": "{{placeholder|default:"begin typing"}}"
  42         };
  43
  44         let field_dataset = {{items|safe}};
  45
  46         let field_initial = {{ initial|safe }};
  47
  48         //global
  49         searchable_select_multiple_widget = new SearchableSelectMultipleWidget(format_vars, field_dataset, field_initial);
  50     }
  51
  52     searchableSelectMultipleWidgetEntry();
  53
  54     /*
  55     var show_from_noentry = context(show_from_noentry|yesno:"true,false") // whether to show any results before user starts typing
  56     var show_x_results = context(show_x_results|default:-1) // how many results to show at a time, -1 shows all results
  57     var results_scrollable = {{results_scrollable|yesno:"true,false") // whether list should be scrollable
  58     var selectable_limit = {{selectable_limit|default:-1) // how many selections can be made, -1 allows infinitely many
  59     var placeholder = "context(placeholder|default:"begin typing")" // placeholder that goes in text box
  60
  61     needed info
  62     var items = context(items|safe) // items to add to trie. Type is a dictionary of dictionaries with structure:
  63         {
  64             id# : {
  65                 "id": any, identifiable on backend
  66                 "small_name": string, displayed first (before separator), searchable (use for e.g. username)
  67                 "expanded_name": string, displayed second (after separator), searchable (use for e.g. email address)
  68                 "string": string, not displayed, still searchable
  69             }
  70         }
  71
  72      used later:
  73     context(selectable_limit): changes what number displays for field
  74     context(name): form identifiable name, relevant for backend
  75         // when submitted, form will contain field data in post with name as the key
  76     context(placeholder): "greyed out" contents put into search field initially to guide user as to what they're searching for
  77     context(initial): in search_field_init(), marked safe, an array of id's each referring to an id from items
  78     */
  79 </script>