contentdb/app/templates/todo/tags.html

114 lines
2.4 KiB
HTML

{% extends "base.html" %}
{% block title %}
Tags
{% endblock %}
{% block content %}
<style>
table {
width:auto;
}
td {
white-space:nowrap;
}
table td:last-child {
width: 100%;
}
</style>
<table class="table">
<tr>
<th>Package</th>
<th>Tags</th>
</tr>
{% for package in packages %}
<tr>
<td>
<a href="{{ package.getDetailsURL() }}">
{{ package.title }}
</a>
by {{ package.author.display_name }}
</td>
<td class="tags">
{% for tag in package.tags %}
<span class="badge badge-primary mr-1">{{ tag.title }}</span>
{% endfor %}
<a class="badge badge-secondary add-btn px-2" href="#">
<i class="fas fa-plus"></i>
</a>
</td>
</tr>
{% endfor %}
</table>
<div class="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ _("Edit tags") }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<select name="tags" multiple>
{% for tag in tags %}
<option value="{{ tag.name }}">{{ tag.title }}</option>
{% endfor %}
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% from "macros/forms.html" import form_scripts %}
{% block scriptextra %}
{{ form_scripts() }}
<script>
$(".add-btn").click(function() {
const row = $(this).parent().parent()
$(".modal select option").removeAttr("selected");
$(".multichoice_selector").remove();
$(".modal .modal-body").prepend(`
<div class="multichoice_selector bulletselector form-control">
<input type="text" placeholder="Start typing to see suggestions">
<div class="clearboth"></div>
</div>
`);
$(".modal").modal("show");
$(".modal input").focus();
$(".multichoice_selector").each(function() {
var ele = $(this);
var sel = ele.parent().find("select");
sel.hide();
var options = [];
sel.find("option").each(function() {
var text = $(this).text();
options.push({
id: $(this).attr("value"),
value: text,
toString: function() { return text; },
});
});
ele.selectSelector(options, sel);
});
});
</script>
{% endblock %}