#132 | #121: backoffice / dev-1.0-121 (#131)

cfr #121

Co-authored-by: Christophe Siraut <d@tobald.eu.org>
Co-authored-by: bkfox <thomas bkfox net>
Co-authored-by: Thomas Kairos <thomas@bkfox.net>
Reviewed-on: rc/aircox#131
Co-authored-by: Chris Tactic <ctactic@noreply.git.radiocampus.be>
Co-committed-by: Chris Tactic <ctactic@noreply.git.radiocampus.be>

aircox/templates/aircox/forms/form_field.html

@@ -0,0 +1,25 @@
+{% comment %}
+Render a form field instance as field (to be used when no model instance is provided). Value is binded as vue, class to Bulma
+
+Context:
+- name: field name
+- field: form field
+- value: input ":value" attribute
+- vbind: if True, use ":value" instead of "value"
+- hidden: if True, hidden field
+{% endcomment %}
+{% load aircox %}
+
+{% if field.widget.is_hidden or hidden %}
+<input type="hidden" name="{{ name }}" value="{{ value|default:"" }}">
+{% elif field|is_checkbox %}
+<input type="checkbox" class="checkbox" name="{{ name }}" {% if value %}checked{% endif %}>
+{% elif field|is_select %}
+<select name="{{ name }}" class="select" value="{{ value|default:"" }}">
+    {% for value, label in field.widget.choices %}
+    <option value="{{ value }}">{{ label }}</option>
+    {% endfor %}
+</select>
+{% else %}
+<input type="text" class="input" name="{{ name }}" value="{{ value|default:"" }}">
+{% endif %}

aircox/templates/aircox/forms/formset.html

@@ -0,0 +1,53 @@
+{% comment %}
+Base template for list editor based on formsets (tracklist_editor, playlist_editor).
+
+Context:
+- tag_id: id of parent component
+- tag: vue component tag (a-playlist-editor, etc.)
+- related_field: field name that target object
+- object: related object
+- formset: formset used to render the list editor
+- formset_data: formset data
+{% endcomment %}
+
+{% load aircox aircox_admin static i18n %}
+
+{% with formset.form.base_fields as fields %}
+{% block outer %}
+<div id="{{ tag_id }}">
+    {{ formset.non_form_errors }}
+    <!-- formset.management_form -->
+
+    <{{ tag|default:"a-form-set" }} ref="formset"
+            {% block tag-attrs %}
+            :form-data="{{ formset_data|json }}"
+            :labels="window.aircox.labels"
+            :columns="[{% for n, f in fields.items %}{% if not f.widget.is_hidden %}'{{ n }}',{% endif %}{% endfor %} ]"
+            settings-url="{% url "api:user-settings" %}"
+            data-prefix="{{ formset.prefix }}-"
+            {% endblock %}>
+    {% block inner %}
+        <template #rows-header-head>
+            {% block rows-header-head %}
+            <th style="max-width:2em" title="{{ fields.position.help_text }}"
+                    aria-description="{{ fields.position.help_text }}">
+                <span class="icon">
+                    <i class="fa fa-arrow-down-1-9"></i>
+                </span>
+            </th>
+            {% endblock %}
+        </template>
+        {% for name, field in fields.items %}
+        {% if not field.widget.is_hidden and not field.is_readonly %}
+        <template v-slot:control-{{ name }}="{context,item,cell,value,attr,emit,inputName}">
+            {% block row-control %}
+            {% include "./v_form_field.html" with value="item.data."|add:name name="inputName" %}
+            {% endblock %}
+        </template>
+        {% endif %}
+        {% endfor %}
+    {% endblock %}
+    </{{ tag }}>
+</div>
+{% endblock %}
+{% endwith %}

aircox/templates/aircox/forms/v_form_field.html

@@ -0,0 +1,24 @@
+{% comment %}
+Render a form field instance as field (to be used when no model instance is provided). Value is binded as vue, class to Bulma
+
+Context:
+- name: field name
+- field: form field
+- value: input ":v-model" attribute
+- hidden: if True, hidden field
+{% endcomment %}
+{% load aircox %}
+
+{% if field.widget.is_hidden or hidden %}
+<input type="hidden" :name="{{ name }}" :value="{{ value|default:"" }}">
+{% elif field|is_checkbox %}
+<input type="checkbox" class="checkbox" :name="{{ name }}" v-model="{{ value }}">
+{% elif field|is_select %}
+<select :name="{{ name }}" class="select" v-model="{{ value|default:"" }}">
+    {% for value, label in field.widget.choices %}
+    <option value="{{ value }}">{{ label }}</option>
+    {% endfor %}
+</select>
+{% else %}
+<input type="text" class="input" :name="{{ name }}" v-model="{{ value|default:"" }}">
+{% endif %}