archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Node type editing, with FormField and FormList

Browse Source 
This allows adding and removing custom fields from node types.
Currently does not work if the Node Type does not have any initial
custom field.
This commit is contained in:
Francesco Siddi
2015-02-04 01:45:11 +01:00
parent 2ac2917645
commit 2badde4ff4
7 changed files with 244 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
attract/application/templates/layout.html
View File

@@ -94,7 +94,8 @@
"assets/js/jquery.attract.js" %}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}
{% block footer_scripts %}
{% endblock %}
</body>
</html>

65
attract/application/templates/node_types/add.html
View File

@@ -23,9 +23,74 @@
{{ form.is_extended.label }}
{{ form.is_extended(class='form-control') }}
</div>
<div data-toggle="fieldset" id="custom_field-fieldset">
{{ form.custom_fields.label }} <button type="button" id="add_another_button">+</button>
<table>
<tr>
<th>Name</th>
<th>Url</th>
<th>Description</th>
<th>Is required</th>
<th></th>
</tr>
{% for custom_field in form.custom_fields %}
<tr data-toggle="fieldset-entry">
{% for field in custom_field %}
{% if field.type == 'HiddenField' %}
{{field}}
{% else %}
<td>{{field}}</td>
{% endif %}
{% endfor %}
<td><button type="button" data-toggle="fieldset-remove-row" id="custom_fields-{{loop.index0}}-remove">-</button></td>
</tr>
{% endfor %}
</table>
</div>
<input class="btn btn-default" type="submit" value="Add Node Type">
</form>
</div>
</div>
</div>
{% endblock %}
{% block footer_scripts %}
<script type="text/javascript">
$(function() {
$("div[data-toggle=fieldset]").each(function() {
var $this = $(this);
//Add new entry
$this.find("button[data-toggle=fieldset-add-row]").click(function() {
var target = $($(this).data("target"))
console.log(target);
var oldrow = target.find("tr[data-toggle=fieldset-entry]:last");
var row = oldrow.clone(true, true);
console.log(row.find(":input")[0]);
var elem_id = row.find(":input")[0].id;
var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
row.attr('data-id', elem_num);
row.find(":input").each(function() {
console.log(this);
var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + (elem_num) + '-');
$(this).attr('name', id).attr('id', id).val('').removeAttr("checked");
});
oldrow.after(row);
}); //End add new entry
//Remove row
$this.find("button[data-toggle=fieldset-remove-row]").click(function() {
if($this.find("tr[data-toggle=fieldset-entry]").length > 1) {
var thisRow = $(this).closest("tr[data-toggle=fieldset-entry]");
thisRow.remove();
}
}); //End remove row
});
});
</script>
{% endblock %}

100
attract/application/templates/node_types/edit.html Normal file
View File

@@ -0,0 +1,100 @@
{% extends 'layout.html' %}
{% block body %}
<div class="col-md-9">
<h2>Edit Node type</h2>
<div class="row">
<div class="col-md-6">
<form method="POST" action="{{url_for('node_types.edit', node_type_id=node_type.id)}}">
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.name.label }}
{{ form.name(size=20, class='form-control') }}
</div>
<div class="form-group">
{{ form.description.label }}
{{ form.description(size=20, class='form-control') }}
</div>
<div class="form-group">
{{ form.url.label }}
{{ form.url(size=20, class='form-control') }}
</div>
<div class="form-group">
{{ form.is_extended.label }}
{{ form.is_extended(class='form-control') }}
</div>
<div data-toggle="fieldset" id="custom_fields-fieldset">
{{ form.custom_fields.label }} <button type="button" data-toggle="fieldset-add-row" data-target="#custom_fields-fieldset">+</button>
<table>
<tr>
<th>Type</th>
<th>Name</th>
<th>Url</th>
<th>Description</th>
<th>Is required</th>
<th></th>
</tr>
{% for custom_field in form.custom_fields %}
<tr data-toggle="fieldset-entry">
{% for field in custom_field %}
{% if field.type == 'HiddenField' %}
{{field}}
{% else %}
<td>{{field}}</td>
{% endif %}
{% endfor %}
<td><button type="button" data-toggle="fieldset-remove-row" id="custom_fields-{{loop.index0}}-remove">-</button></td>
</tr>
{% endfor %}
</table>
</div>
<input class="btn btn-default" type="submit" value="Edit Node Type">
</form>
</div>
</div>
</div>
{% endblock %}
{% block footer_scripts %}
<script type="text/javascript">
$(function() {
$("div[data-toggle=fieldset]").each(function() {
var $this = $(this);
//Add new entry
$this.find("button[data-toggle=fieldset-add-row]").click(function() {
var target = $($(this).data("target"))
console.log(target);
var oldrow = target.find("tr[data-toggle=fieldset-entry]:last");
var row = oldrow.clone(true, true);
console.log(row.find(":input")[0]);
var elem_id = row.find(":input")[0].id;
var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
row.attr('data-id', elem_num);
row.find(":input").each(function() {
console.log(this);
var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + (elem_num) + '-');
$(this).attr('name', id).attr('id', id).val('').removeAttr("checked");
});
oldrow.after(row);
}); //End add new entry
//Remove row
$this.find("button[data-toggle=fieldset-remove-row]").click(function() {
if($this.find("tr[data-toggle=fieldset-entry]").length > 1) {
var thisRow = $(this).closest("tr[data-toggle=fieldset-entry]");
thisRow.remove();
}
}); //End remove row
});
});
</script>
{% endblock %}

2
attract/application/templates/node_types/index.html
View File

@@ -24,7 +24,7 @@
{% endif %}
</td>
<td>
<a class="btn btn-default btn-xs" href="#"><i class="glyphicon glyphicon-edit"></i> Edit</a>
<a class="btn btn-default btn-xs" href="{{url_for('node_types.edit', node_type_id=node_type.id)}}"><i class="glyphicon glyphicon-edit"></i> Edit</a>
</td>
</tr>
{% endfor %}