blob: e3a0c9abfd209b5227486de08105fa933cd1d00e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
{% extends "base.html" %}
{% macro form_field_errors(field) -%}
{% if field.errors %}
<ul class="errors">
{% for err in field.errors %}
<li>{{ err }}
{% endfor %}
</ul>
{% endif %}
{%- endmacro %}
{% macro form_field_basic(field, div_classes="") -%}
<div class="field {{ div_classes }} {% if field.errors %}error{% endif %}">
{{ field.label }}
{{ field() }}
{{ form_field_errors(field) }}
</div>
{%- endmacro %}
{% macro form_field_inline(field, div_classes="") -%}
<div class="ui grid">
<div class="three wide column middle aligned right aligned" {# style="padding-right: 0.5rem;" #}>
<div class="field inline {% if field.errors %}error{% endif %}">
{{ field.label }}
</div>
</div>
<div class="twelve wide column" {# style="padding-left: 0.5rem;" #}>
<div class="field {% if field.errors %}error{% endif %}">
{{ field() }}
{{ form_field_errors(field) }}
</div>
</div>
<div class="one wide column">
</div>
</div>
{%- endmacro %}
{% block body %}
<div class="ui segment">
<h1 class="ui header">Create New Release Entity</h1>
<form class="ui form" id="add_work_form" method="POST" action="/release/create">
{{ form.hidden_tag() }}
<h3 class="ui dividing header">Edit Meta</h3>
{{ form_field_inline(form.editgroup_id) }}
{{ form_field_inline(form.editgroup_description) }}
{{ form_field_inline(form.edit_description) }}
<h3 class="ui dividing header">The Basics</h3>
<div class="ui grid">
<div class="three wide column" style="padding-bottom: 0px;"></div>
<div class="twelve wide column" style="padding-bottom: 0px;">
<div class="ui equal width fields">
{{ form_field_basic(form.release_type) }}
{{ form_field_basic(form.release_status) }}
</div>
</div>
<div class="one wide column" style="padding-bottom: 0px;"></div>
</div>
{{ form_field_inline(form.title, "required") }}
{{ form_field_inline(form.original_title) }}
{{ form_field_inline(form.work_id) }}
{{ form_field_inline(form.release_date) }}
<div class="ui grid">
<div class="three wide column" style="padding-bottom: 0px;"></div>
<div class="twelve wide column" style="padding-bottom: 0px;">
<div class="ui equal width fields">
{{ form_field_basic(form.language) }}
{{ form_field_basic(form.license_slug) }}
</div>
</div>
<div class="one wide column" style="padding-bottom: 0px;"></div>
</div>
<h3 class="ui dividing header">Contributors</h3>
<div class="list-group" id="contrib_list" name="contrib_list">
{% for cform in form.contribs %}
<div class="list-group-item ui grid" style="padding-right: 1em;">
<div class="one wide column middle aligned center aligned sortable-handle" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
<i class="arrows alternate vertical icon"></i>
</div>
<div class="three wide column" style="padding-bottom: 0px; padding-left: 0px;">
{{ cform.role }}
</div>
<div class="eleven wide column" style="padding-bottom: 0px;">
{{ cform.raw_name}}
</div>
<div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;">
<button type="button" class="ui icon red button delete-contrib-button"><i class="trash icon"></i></button>
</div>
</div>
{% endfor %}
</div>
<br>
<button type="button" id="add-contrib-button" class="ui right floated icon green button" style="margin-right: 0.3rem;">
<i class="plus icon"></i>
</button>
<br>
<h3 class="ui dividing header">Identifers</h3>
<br>
{{ form_field_inline(form.doi) }}
{{ form_field_inline(form.wikidata_qid) }}
{{ form_field_inline(form.isbn13) }}
<div class="ui equal width fields">
{{ form_field_basic(form.pmid) }}
{{ form_field_basic(form.pmcid) }}
</div>
<h3 class="ui dividing header">Container</h3>
<br>
{{ form_field_inline(form.container_id) }}
{{ form_field_inline(form.publisher) }}
<br>
<div class="ui equal width fields">
{{ form_field_basic(form.pages) }}
{{ form_field_basic(form.volume) }}
{{ form_field_basic(form.issue) }}
</div>
<input class="ui primary submit button" type="submit" value="Create Release!">
</form>
</div>
{% endblock %}
{% block postscript %}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
<!-- Form code -->
$(document).ready(function() {
$('#release_type').dropdown();
$('#release_status').dropdown();
var fixup_contrib_numbering = function(group_item) {
items = Array.from(group_item.querySelectorAll(".list-group-item"))
for (var i = 0; i < items.length; i++) {
var item_el = items[i];
input_el = item_el.querySelectorAll("input")[0];
select_el = item_el.querySelectorAll("select")[0];
//console.log(input_el.id);
//console.log(select_el.id);
input_el.id = "contribs-" + i + "-raw_name";
input_el.name = input_el.id;
select_el.id = "contribs-" + i + "-role";
select_el.name = select_el.id;
//console.log(input_el.id);
//console.log(select_el.id);
};
console.log("re-named contrib rows up to i=" + i);
};
var contrib_list = document.getElementById('contrib_list');
var contrib_sortable = Sortable.create(contrib_list, {
handle: '.sortable-handle',
animation: 150,
onSort: function(evt) {
fixup_contrib_numbering(contrib_list);
},
});
fixup_contrib_numbering(contrib_list);
var contrib_delete_handler = function(ev) {
row = ev.target.parentNode.parentNode;
// I don't understand why this hack is needed; maybe because of the sortable stuff?
if(!row.classList.contains("list-group-item")) {
row = row.parentNode;
}
// console.log(row);
console.assert(row.classList.contains("list-group-item"));
row.parentNode.removeChild(row);
fixup_contrib_numbering(contrib_list);
};
var attach_contrib_delete_handler = function(topthing) {
Array.from(topthing.querySelectorAll(".delete-contrib-button")).forEach((el) => {
el.addEventListener("click", contrib_delete_handler);
});
};
attach_contrib_delete_handler(document);
// XXX: really need some way to not duplicate this code from above...
var contrib_template = `
<div class="list-group-item ui grid" style="padding-right: 1em;">
<div class="one wide column middle aligned center aligned sortable-handle" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
<i class="arrows alternate vertical icon"></i>
</div>
<div class="three wide column" style="padding-bottom: 0px; padding-left: 0px;">
<select id="contribs-X-role" name="contribs-X-role"><option value="author">Author</option><option value="editor">Editor</option><option value="translator">Translator</option></select>
</div>
<div class="eleven wide column" style="padding-bottom: 0px;">
<input id="contribs-X-raw_name" name="contribs-X-raw_name" type="text" value="">
</div>
<div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;">
<button type="button" class="ui icon red button delete-contrib-button"><i class="trash icon"></i></button>
</div>
</div>
`;
var add_contrib_button = document.getElementById("add-contrib-button");
add_contrib_button.addEventListener("click", function(){
contrib_list.insertAdjacentHTML('beforeend', contrib_template);
attach_contrib_delete_handler(contrib_list.lastElementChild);
fixup_contrib_numbering(contrib_list);
});
console.log("Page loaded");
});
</script>
{% endblock %}
|
