#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/page_form.html

@@ -0,0 +1,129 @@
+{% extends "./dashboard/base.html" %}
+{% load static aircox aircox_admin i18n %}
+
+{% block init-scripts %}
+aircox.labels = {% inline_labels %}
+{{ block.super }}
+{% endblock %}
+
+{% block header-cover %}{% endblock %}
+
+{% block title %}
+{% if not object %}
+    {% with view.model|verbose_name as model %}
+    {% blocktranslate %}Create a {{model}}{% endblocktranslate %}
+    {% endwith %}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock %}
+
+
+{% block content-container %}
+<a-select-file ref="cover-select"
+    :labels="window.aircox.labels"
+    list-url="{% url "api:image-list" %}"
+    upload-url="{% url "api:image-list" %}"
+    delete-url="{% url "api:image-detail" pk=123 %}"
+    title="{% translate "Select an image" %}"            list-class="grid-4"
+    @select="(event) => fileSelected('cover-select', 'cover-input', $refs.cover)"
+    >
+    <template #upload-preview="{upload}">
+        <img :src="upload.fileURL" class="upload-preview blink"/>
+    </template>
+    <template #default="{item, load, lastUrl}">
+        <div class="flex-column is-fullheight" v-if="item">
+            <figure class="flex-grow-1">
+                <img :src="item.file"/>
+            </figure>
+            <div>
+                <label class="label small">[[ item.name || item.original_filename ]]</label>
+                <a-action-button
+                    class="has-text-danger small float-right"
+                    icon="fa fa-trash"
+                    confirm="{% translate "Are you sure you want to remove this item from server?" %}"
+                    method="DELETE"
+                    :url="'{% url "api:image-detail" pk="123" %}'.replace('123', item.id)"
+                    @done="load(lastUrl)">
+                </a-action-button>
+            </div>
+        </div>
+    </template>
+</a-select-file>
+
+<section class="container">
+<form method="post" enctype="multipart/form-data">
+    {% block page-form %}
+    {% csrf_token %}
+    <div class="flex-row">
+        <div class="flex-grow-3">
+            {% for field in form %}
+            {% if field.name not in "cover,content" %}
+            <div class="field {% if field.name != "content" %}is-horizontal{% endif %}">
+                <label class="label">{{ field.label }}</label>
+                <div class="control clear-unset">
+                    {% if field.name == "pub_date" %}
+                    <input type="datetime-local" class="input" name="{{ field.name }}"
+                        value="{{ field.value|date:"Y-m-d" }}T{{ field.value|date:"H:i" }}"/>
+                    {% else %}
+                    {% include "aircox/forms/form_field.html" with field=field.field name=field.name value=field.initial %}
+                    {% endif %}
+                </div>
+                <p class="help">{{ field.help_text }}</p>
+            </div>
+            {% endif %}
+            {% if field.errors %}
+            <p class="help is-danger">{{ field.errors }}</p>
+            {% endif %}
+            {% if field.help_text %}
+            <p class="help">{{ field.help_text|safe }}</p>
+            {% endif %}
+            {% endfor %}
+        </div>
+        <div class="flex-grow-1">
+            {% with form.cover as field %}
+            {% block page-form-cover %}
+            <input type="hidden" name="{{ field.name }}" value="{{ field.value }}" ref="cover-input"/>
+            {% spaceless %}
+            <figure class="header-cover">
+                <img src="{{ cover }}" ref="cover" class="cover">
+                <button type="button" class="button" @click="$refs['cover-select'].open()">
+                    {% translate "Change cover" %}
+                </button>
+            </figure>
+            {% endspaceless %}
+            {% endblock %}
+            {% endwith %}
+        </div>
+    </div>
+
+    {% with form.content as field %}
+    {% block page-form-content %}
+    <div>
+        <div class="field {% if field.name != "content" %}is-horizontal{% endif %}">
+            <label class="label">{{ field.label }}</label>
+            <div class="control clear-unset">
+                <textarea name="{{ field.name }}" class="is-fullwidth height-25">{{ field.value|default:""|striptags|safe }}</textarea>
+            </div>
+            <p class="help">{{ field.help_text }}</p>
+        </div>
+        {% if field.errors %}
+        <p class="help is-danger">{{ field.errors }}</p>
+        {% endif %}
+        {% if field.help_text %}
+        <p class="help">{{ field.help_text|safe }}</p>
+        {% endif %}
+    </div>
+    {% endblock %}
+    {% endwith %}
+
+    {% endblock %}
+    <hr/>
+    <div class="flex-row">
+        <div class="flex-grow-1">{% block page-form-actions %}{% endblock %}</div>
+        <div class="has-text-right">
+            <button type="submit" class="button">{% translate "Update" %}</button>
+        </div>
+</form>
+</section>
+{% endblock %}