Part-DB.Part-DB-server/templates/AdminPages/_attachments.html.twig

{% set delete_btn %}
    <button type="button" class="btn btn-danger lot_btn_delete" onclick="delete_attachment_entry(this);">
        <i class="fas fa-trash-alt fa-fw"></i>
        {% trans %}attachment.delete{% endtrans %}
    </button>
{% endset %}

{#{{ form_row(form.master_picture_attachment) }} #}

<table class="table table-striped table-sm" id="attachments_table" data-prototype="{% if form.attachments.vars.prototype is defined %}{{ form_widget(form.attachments.vars.prototype)|e('html_attr') }}{% endif %}">
    <tbody>
    {% for attachment in form.attachments %}
        <tr>
            <td class="row">
                <div class="col-9">
                    {{ form_widget(attachment) }}
                </div>
                <div class="pl-0 col-3">
                    {{ delete_btn }}

                    {% set attach = attachment.vars.value %}
                    {# @var attach \App\Entity\Attachments\Attachment #}


                    {% if attachment_helper.fileExisting(attach) %}
                        {% if not attach.external %}
                            <br><br>
                            <h6>
                                <span class="badge badge-primary">
                                    <i class="fas fa-fw fa-file"></i> {{ attach.filename }}
                                </span>
                                <br>
                                <span class="badge badge-secondary">
                                    <i class="fas fa-hdd fa-fw"></i> {{ attachment_helper.humanFileSize(attach) }}
                                </span>
                            </h6>
                        {% else %}
                            <br><br>
                            <h6>
                        <span class="badge badge-primary">
                            <i class="fas fa-fw fa-globe"></i> {% trans %}attachment.external{% endtrans %}
                        </span>
                            </h6>
                        {% endif %}
                        {% if attach.picture %}
                            <a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax>
                                <img class="img-fluid img-thumbnail thumbnail-sm" src="{{ attachment_thumbnail(attach, 'thumbnail_md') }}" alt="{% trans %}attachment.preview.alt{% endtrans %}" />
                            </a>
                        {% else %}
                            <a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax class="link-external">{% trans %}attachment.view{% endtrans %}</a>
                        {% endif %}
                    {% else %}
                        <br><br>
                        <h6>
                    <span class="badge badge-warning">
                        <i class="fas fa-exclamation-circle fa-fw"></i> {% trans %}attachment.file_not_found{% endtrans %}
                    </span>
                        </h6>
                    {% endif %}

                    {% if attach.secure %}
                        <h6>
                            <span class="badge badge-primary">
                                <i class="fas fa-fw fa-shield-alt"></i> {% trans %}attachment.secure{% endtrans %}
                            </span>
                        </h6>
                    {% endif %}
                </div>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<button type="button" class="btn btn-success" onclick="create_attachment_entry(this)">
    <i class="fas fa-plus-square fa-fw"></i>
    {% trans %}attachment.create{% endtrans %}
</button>

<script>
    function delete_attachment_entry(btn) {
        window.bootbox.confirm('{% trans %}part_lot.edit.delete.confirm{% endtrans %}', function (result) {
            if(result) {
                $(btn).parents("tr").remove();
            }
        })
    }

    function create_attachment_entry(btn) {
        //Determine the table, so we can determine, how many entries there are already.
        $holder = $("#attachments_table");

        var index = $holder.find(":input").length;
        var newForm = $holder.data("prototype");

        //Increase the index
        newForm = newForm.replace(/__name__/g, index);
        newForm = '<div class="col-9">' + newForm + '</div>';
        $newFormRow = $('<tr></tr>').html("<td class='row'>" + newForm + "</td>");

        //Add delete button
        $btn = '<div class="col-3">' + '{{ delete_btn|e('js') }}' + '</div>';
        $('td' ,$newFormRow).append($btn);

        $holder.append($newFormRow);

        //Reinit the selectpickers
        $(".selectpicker").selectpicker();
        $(".file").fileinput();

        //Reinit typeahead:
        $(document).trigger('attachment:create');
    }
</script>