aircox-radiocampus/aircox/templates/aircox/page_form.html

{% 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 %}