takahe/templates/forms/_json_name_value_list.html

93 wiersze
4.0 KiB
HTML

{% with name_one=field_name_one|default:"name" name_two=field_name_two|default:"value" %}
<script type="text/hyperscript">
{# fmt:off #}
def {{ field.name }}.collect{{ field.name|title }}Fields()
set newdata to []
for item in <div.{{ field.name }}-row/>
get the (value of the first <input.{{ field.name }}-{{ name_one }}/> in item)
set n to it
get the (value of the last <input.{{ field.name }}-{{ name_two }}/> in item)
set val to it
if n != '' and val != '' then
append {'{{ name_one }}': n, '{{ name_two }}': val} to newdata
end
set #id_{{ field.name }}@value to newdata as JSON
end
def {{ field.name }}.addEmptyField()
get #blank_{{ field.name }}'s outerHTML
put it before #new_{{ field.name }}
get #new_{{ field.name }}'s previousSibling
set foo to it
set foo@id to ''
remove .hidden from foo
add .{{ field.name }}-row to foo
return foo
end
{# fmt:on #}
</script>
<div class="field">
<div class="label-input">
<label for="{{ field.id_for_label }}">
{{ field.label }}
{% if field.field.required %}<small>(Required)</small>{% endif %}
</label>
{% if field.help_text %}
<p class="help">
{{ field.help_text|safe|linebreaksbr }}
</p>
{% endif %}
{{ field.errors }}
{{ field }}
<div class="multi-option">
{# fmt:off #}
<span id="new_{{ field.name }}" style="display: none"
_="on load
get the (value of #id_{{ field.name }}) as Object
set items to it
for item in items
set f to {{ field.name }}.addEmptyField()
set one to the first <input.{{ field.name }}-{{ name_one }}/> in f then
set one@value to item.{{ name_one }}
set two to the first <input.{{ field.name }}-{{ name_two }}/> in f then
set two@value to item.{{ name_two }}
end
get the (@data-min-empty of #id_{{ field.name }})
set min_empty to it
if items.length < min_empty then
repeat (min_empty - items.length) times
call {{ field.name }}.addEmptyField()
end
"></span>
{# fmt:on #}
<div class="option">
<span class="option-field">
<button class="fa-solid fa-add" title="Add Row" _="on click {{ field.name }}.addEmptyField() then halt"></button>
</span>
</div>
<div id="blank_{{ field.name }}" class="option option-row hidden">
<span class="option-field">
<input type=text class="{{ field.name }}-{{ name_one }}" name="{{ field.name }}_{{ name_one }}" value="">
</span>
<span class="option-field">
<input type=text class="{{ field.name }}-{{ name_two }}" name="{{ field.name }}_{{ name_two }}" value="">
</span>
<div class="right">
<button class="fa-solid fa-trash delete" title="Delete Row"
_="on click remove (closest parent .option)
then {{ field.name }}.collect{{ field.name|title }}Fields()
then halt" />
</div>
</div>
</div>
</div>
</div>
{% endwith %}