The idea behind this widget is that i can click on a button and add a input row that i can fill in manually. This is the easiest done by 2 buttons(+ and -) that add and remove input fields.
For example
def add_tag_js(field, UUID) -> str:
return f"""
var x = document.createElement('input')
x.setAttribute('name', '{field.name}')
x.setAttribute('id', '{field.name}')
x.setAttribute('type', 'text')
x.setAttribute('value', '')
var y = document.createElement('br')
document.getElementById('{UUID}').appendChild(x)
document.getElementById('{UUID}').appendChild(y)
"""
def remove_tag_js(UUID) -> str:
return f"""
var select = document.getElementById('{UUID}');
""" + """
if(select.childNodes.length > 4) {
select.removeChild(select.lastChild);
select.removeChild(select.lastChild);
}
"""
def input_field(field, value=""):
return tag.input(
_type="text",
_name=field.name,
_id=field.name,
_value=value,
_class="string multiple",
)
def widget_multiple_field(field, value):
fields_uuid = uuid.uuid4()
if not value:
value = [""]
first_value = value.pop(0)
field_elements = [
input_field(field, first_value),
tag.a(
tag.button("+", _type="button"),
_onclick=add_tag_js(field, fields_uuid),
),
tag.a(
tag.button("-", _type="button"),
_onclick=remove_tag_js(fields_uuid),
),
tag.br(),
]
field_elements.extend(
tag.input(
_type="text",
_name=field.name,
_id=field.name,
_value=v,
_class="string multiple",
) + tag.br()
for v in value
)
return tag.div(*field_elements, _id=f"{fields_uuid}")
The idea behind this widget is that i can click on a button and add a input row that i can fill in manually. This is the easiest done by 2 buttons(+ and -) that add and remove input fields.
For example