datasette-edit-schema/datasette_edit_schema/templates/edit_schema_table.html
{% extends "base.html" %}
{% block title %}Edit table {{ table }} in {{ database.name }}{% endblock %}
{% block extra_head %}
<style>
html body input[type="text"],
html body input[type="search"] {
border: 1px solid #ccc;
border-radius: 3px;
width: 60%;
padding: 9px 4px;
display: inline-block;
font-size: 1em;
font-family: Helvetica, sans-serif;
}
select {
border: 1px solid #ccc;
border-radius: 3px;
padding: 9px 4px;
display: inline-block;
font-size: 1em;
font-family: Helvetica, sans-serif;
}
html body label {
font-weight: bold;
display: inline-block;
width: auto;
}
.sortable-columns {
margin: 0;
padding: 0;
list-style-type: none;
}
.sortable-columns li {
/* Without this the element width reduces while being dragged: */
width: 100%;
margin-bottom: 5px;
}
.sort-order {
display: none;
}
.handle {
content: '....';
width: 10px;
height: 20px;
display: inline-block;
overflow: hidden;
line-height: 5px;
padding: 3px 4px;
cursor: move;
cursor: grab;
vertical-align: middle;
margin-top: -.7em;
margin-right: .3em;
font-size: 12px;
font-family: sans-serif;
letter-spacing: 2px;
color: #666;
text-shadow: 1px 0 1px black;
}
.handle::after {
content: '.. .. .. ..';
}
</style>
<script src="{{ base_url }}-/static-plugins/datasette-edit-schema/draggable.1.0.0-beta.11.bundle.min.js"></script>
<style>
.draggable-source--is-dragging {
visibility: hidden;
}
</style>
{% endblock %}
{% block crumbs %}
{{ crumbs.nav(request=request, database=database.name, table=table) }}
{% endblock %}
{% block content %}
<h1>Edit table <a href="{{ base_url }}{{ database.name|quote_plus }}/{{ table|quote_plus }}">{{ database.name }}/{{ table }}</a></h1>
<form action="{{ base_url }}-/edit-schema/{{ database.name|quote_plus }}/{{ table|quote_plus }}" method="post">
<h2>Change existing columns</h2>
<ul class="sortable-columns">
{% for column in columns %}
<li data-original-name="{{ column.name }}">
<input style="width: 30%" type="text" size="10" name="name.{{ column.name }}" value="{{ column.name }}">
<label>Type: <select name="type.{{ column.name }}">
{% for type in types %}
<option{% if type.value == column.type %} selected="selected"{% endif %} value="{{ type.value }}">{{ type.name }}</option>
{% endfor %}
</select></label>
<label class="sort-order">Sort order
<input type="number" class="column-sort-input" size="2" name="sort.{{ column.name }}" value="{{ loop.index }}">
</label>
<label>Delete
<input name="delete.{{ column.name }}" type="checkbox">
</label>
<span class="handle"></span></span>
</li>
{% endfor %}
</ul>
<p>
<input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
<input type="hidden" name="action" value="update_columns">
<input type="submit" value="Apply changes">
</p>
</form>
<h2>Add a column</h2>
<form action="{{ base_url }}-/edit-schema/{{ database.name|quote_plus }}/{{ table|quote_plus }}" method="post">
<input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
<input type="hidden" name="add_column" value="1">
<p><label>Name <input type="text" name="name"></label>
<label>Column type <select name="type">
{% for type in types %}
<option value="{{ type.value }}">{{ type.name }}</option>
{% endfor %}
</select></label></p>
<input type="submit" value="Add column">
</form>
<h2>Delete table</h2>
<form action="{{ base_url }}-/edit-schema/{{ database.name|quote_plus }}/{{ table|quote_plus }}" method="post">
<input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
<input type="hidden" name="delete_table" value="1">
<input type="submit" value="Delete this table">
</form>
<h2>Rename table</h2>
<form action="{{ base_url }}-/edit-schema/{{ database.name|quote_plus }}/{{ table|quote_plus }}" method="post">
<input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
<p><label>New name <input type="text" name="name"></label>
<input type="hidden" name="rename_table" value="1">
<input type="submit" value="Rename this table">
</form>
<h2>Current table schema</h2>
<pre>{{ schema }}</pre>
<script>
let sortableColumns = new Draggable.Sortable(document.querySelectorAll('ul'), {
draggable: 'li',
handle: '.handle'
});
sortableColumns.on('sortable:stop', (ev) => {
// Update the .column-sort-input inputs
setTimeout(() => Array.from(document.querySelectorAll('.column-sort-input')).forEach((el, i) => {
el.value = i + 1;
}), 200);
});
</script>
{% endblock %}