app/templates/todo/tags.html

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