app/templates/todo/tags.html

   1 {% extends "base.html" %}
   2
   3 {% block title %}
   4         Tags
   5 {% endblock %}
   6
   7 {% block content %}
   8
   9 <style>
  10         table {
  11                 width:auto;
  12         }
  13         td {
  14                 white-space:nowrap;
  15         }
  16         table td:last-child {
  17                 width: 100%;
  18         }
  19 </style>
  20
  21 <table class="table">
  22         <tr>
  23                 <th>Package</th>
  24                 <th>Tags</th>
  25         </tr>
  26         {% for package in packages %}
  27                 <tr>
  28                         <td>
  29                                 <a href="{{ package.getDetailsURL() }}">
  30                                         {{ package.title }}
  31                                 </a>
  32
  33                                 by {{ package.author.display_name }}
  34                         </td>
  35                         <td class="tags">
  36                                 {% for tag in package.tags %}
  37                                         <span class="badge badge-primary mr-1">{{ tag.title }}</span>
  38                                 {% endfor %}
  39                                 <!-- <a class="badge badge-secondary add-btn px-2" href="#">
  40                                         <i class="fas fa-plus"></i>
  41                                 </a> -->
  42                         </td>
  43                 </tr>
  44         {% endfor %}
  45 </table>
  46
  47 <div class="modal">
  48         <div class="modal-dialog" role="document">
  49                 <div class="modal-content">
  50                         <div class="modal-header">
  51                                 <h5 class="modal-title">{{ _("Edit tags") }}</h5>
  52                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  53                                         <span aria-hidden="true">&times;</span>
  54                                 </button>
  55                         </div>
  56                         <div class="modal-body">
  57                                 <select name="tags" multiple>
  58                                         {% for tag in tags %}
  59                                                 <option value="{{ tag.name }}">{{ tag.title }}</option>
  60                                         {% endfor %}
  61                                 </select>
  62                         </div>
  63                         <div class="modal-footer">
  64                                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  65                                 <button type="button" class="btn btn-primary">Update</button>
  66                         </div>
  67                 </div>
  68         </div>
  69 </div>
  70 {% endblock %}
  71
  72 {% from "macros/forms.html" import form_scripts %}
  73
  74 {% block scriptextra %}
  75 {{ form_scripts() }}
  76
  77 <script>
  78         $(".add-btn").click(function() {
  79                 const row = $(this).parent().parent()
  80
  81                 $(".modal select option").removeAttr("selected");
  82                 $(".multichoice_selector").remove();
  83
  84                 $(".modal .modal-body").prepend(`
  85                         <div class="multichoice_selector bulletselector form-control">
  86                                 <input type="text" placeholder="Start typing to see suggestions">
  87                                 <div class="clearboth"></div>
  88                         </div>
  89                 `);
  90
  91                 $(".modal").modal("show");
  92                 $(".modal input").focus();
  93                 $(".multichoice_selector").each(function() {
  94                         var ele = $(this);
  95                         var sel = ele.parent().find("select");
  96                         sel.hide();
  97
  98                         var options = [];
  99                         sel.find("option").each(function() {
 100                                 var text = $(this).text();
 101                                 options.push({
 102                                         id: $(this).attr("value"),
 103                                         value: text,
 104                                         toString: function() { return text; },
 105                                 });
 106                         });
 107
 108                         ele.selectSelector(options, sel);
 109                 });
 110         });
 111
 112 </script>
 113 {% endblock %}