mediacms/templates/admin/socialaccount/socialapp/custom_tabular_inline.html

{% load i18n admin_urls static admin_modify %}

<style type="text/css">
.help-text-inline {
    color: #999;
    font-size: 12px;
    margin: 0;
    padding: 2px 0 0 0;
}

.inline-group .tabular td {
    vertical-align: top;
}
</style>


<div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group"
     data-inline-type="tabular"
     data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
    <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
        {{ inline_admin_formset.formset.management_form }}
        <fieldset class="module {{ inline_admin_formset.classes }}">
            {{ inline_admin_formset.formset.non_form_errors }}
            <table class="table table-hover text-nowrap">
                <thead><tr>
                    <th class="original"></th>
                    {% for field in inline_admin_formset.fields %}
                        {% if not field.widget.is_hidden %}
                            <th class="column-{{ field.name }}{% if field.required %} required{% endif %}">{{ field.label|capfirst }}
                                {% if field.help_text %}<img src="{% static "admin/img/icon-unknown.svg" %}" class="help help-tooltip" width="10" height="10" alt="({{ field.help_text|striptags }})" title="{{ field.help_text|striptags }}">{% endif %}
                            </th>
                        {% endif %}
                    {% endfor %}
                    {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}<th>Actions</th>{% endif %}
                </tr></thead>

                <tbody>
                {% for inline_admin_form in inline_admin_formset %}
                    {% if inline_admin_form.form.non_field_errors %}
                        <tr class="row-form-errors"><td colspan="{{ inline_admin_form|cell_count }}">{{ inline_admin_form.form.non_field_errors }}</td></tr>
                    {% endif %}
                    <tr class="form-row{% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form{% endif %}"
                        id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
                        <td class="original">
                            {% if inline_admin_form.original or inline_admin_form.show_url %}
                            <p>
                                {% if inline_admin_form.original %}
                                    {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
                                        <a
                                            href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}"
                                            class="{% if inline_admin_formset.has_change_permission %}inlinechangelink{% else %}inlineviewlink{% endif %}">
                                            {% if inline_admin_formset.has_change_permission %}
                                                <i class="fas fa-pencil-alt fa-sm"> </i>
                                            {% else %}
                                                <i class="fas fa-eye fa-sm"> </i>
                                            {% endif %}
                                        </a>
                                    {% endif %}

                                    {% if inline_admin_form.show_url %}
                                        <a href="{{ inline_admin_form.absolute_url }}" title="{% trans "View on site" %}">
                                            <i class="fas fa-eye fa-sm"> </i>
                                        </a>
                                    {% endif %}
                                {% endif %}
                            </p>
                            {% else %}
                            <i class="fas fa-plus fa-sm text-success"> </i>
                            {% endif %}
                            {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
                            {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
                            {% spaceless %}
                                {% for fieldset in inline_admin_form %}
                                    {% for line in fieldset %}
                                        {% for field in line %}
                                            {% if not field.is_readonly and field.field.is_hidden %}{{ field.field }}{% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                {% endfor %}
                            {% endspaceless %}
                        </td>
                        {% for fieldset in inline_admin_form %}
                            {% for line in fieldset %}
                                {% for field in line %}
                                    {% if field.is_readonly or not field.field.is_hidden %}
                                        <td {% if field.field.name %} class="field-{{ field.field.name }}"{% endif %}>
                                            {% if field.is_readonly %}
                                                <p>{{ field.contents }}</p>
                                            {% else %}
                                                {{ field.field }}
                                                <div class="help-block text-red">
                                                    {{ field.field.errors.as_ul }}
                                                </div>
                                            {% endif %}
                                        </td>
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}
                        {% endfor %}

                        {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
                          <td class="delete">
                            {{ inline_admin_form.deletion_field.field.as_hidden }}
                            {% if inline_admin_form.original %}
                              <div>
                                <a href="#" class="inline-deletelink remove-row">{% trans "Remove" %}</a>
                                {{ inline_admin_form.field_should_delete }}
                              </div> 
                            {% endif %}
                          </td>
                        {% endif %}


                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </fieldset>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {

    function initRemoveButtons() {
        const removeButtons = document.querySelectorAll('.inline-deletelink.remove-row');
        
        removeButtons.forEach(function(button) {
            button.removeEventListener('click', handleRemoveClick);
            button.addEventListener('click', handleRemoveClick);
        });
    }
    
    function handleRemoveClick(e) {
        e.preventDefault();
        
        const row = this.closest('tr');
        
        fadeOut(row, 300);
        console.log(1)
        const formPrefix = row.id.split('-')[0];
        const rowNum = row.id.split('-')[1];
        const deleteField = document.getElementById('id_' + formPrefix + '-' + rowNum + '-should_delete');
        console.log(2)
        if (deleteField) {
            console.log(deleteField)
            deleteField.value = '1';
        }
        
        return false;
    }
    
    function fadeOut(element, duration) {
        let opacity = 1;
        const interval = 50;
        const delta = interval / duration;
        
        function decreaseOpacity() {
            opacity -= delta;
            element.style.opacity = opacity;
            
            if (opacity <= 0) {
                element.style.display = 'none';
                clearInterval(timer);
            }
        }
        
        const timer = setInterval(decreaseOpacity, interval);
    }
    
    initRemoveButtons();
    
    const addRowButtons = document.querySelectorAll('.add-row a');
    addRowButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            setTimeout(initRemoveButtons, 100);
        });
    });
	
    function addHelpText() {
        var fields = document.querySelectorAll('.with-help-text');
        fields.forEach(function(field) {
            var helpText = field.getAttribute('data-help-text');
            if (helpText && !field.nextElementSibling?.classList.contains('help-text-inline')) {
                var helpElement = document.createElement('p');
                helpElement.className = 'help-text-inline';
                helpElement.textContent = helpText;
                field.parentNode.insertBefore(helpElement, field.nextSibling);
            }
        });
    }

    addHelpText();

    document.addEventListener('formset:added', function(event) {
        setTimeout(addHelpText, 10);
    });
});
</script>