WYGIWYH/app/templates/rules/fragments/transaction_rule/dry_run/visual.html

{% load i18n %}
<div class="tw:card tw:bg-base-100 tw:shadow-xl tw:max-h-full tw:overflow-auto tw:overflow-x-auto">
  <div class="tw:card-header tw:bg-base-200 tw:p-4">
    <div role="tablist" class="tw:tabs tw:tabs-lifted">
      <button class="tw:tab tw:tab-active" id="visual-tab" data-bs-toggle="tab" data-bs-target="#visual-tab-pane"
              type="button" role="tab" aria-controls="visual-tab-pane"
              aria-selected="true">{% translate 'Visual' %}</button>
      <button class="tw:tab" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs-tab-pane" type="button"
              role="tab" aria-controls="logs-tab-pane" aria-selected="false">{% translate 'Logs' %}</button>
    </div>
  </div>
  <div class="tw:card-body">
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="visual-tab-pane" role="tabpanel" aria-labelledby="home-tab"
           tabindex="0">
        {% if not results %}
          {% translate 'Run a test to see...' %}
        {% else %}
          {% for result in results %}

            {% if result.type == 'header' %}
              <div class="tw:my-3">
                <h6 class="tw:text-center tw:mb-3">
                  <span class="tw:badge tw:badge-secondary">
                  {% if result.header_type == "edit_transaction" %}
                    {% translate 'Edit transaction' %}
                  {% elif result.header_type == "update_or_create_transaction" %}
                    {% translate 'Update or create transaction' %}
                  {% endif %}
                  </span>
                </h6>
              </div>
            {% endif %}


            {% if result.type == 'triggering_transaction' %}
              <div class="tw:mt-4">
                <h6 class="tw:text-center tw:mb-3"><span class="tw:badge tw:badge-secondary">{% translate 'Start' %}</span></h6>
                <c-transaction.item :transaction="result.transaction" :dummy="True"
                                    :disable-selection="True"></c-transaction.item>
              </div>
            {% endif %}

            {% if result.type == 'edit_transaction' %}
              <div>
                <div>
                  {% translate 'Set' %} <span
                    class="tw:badge tw:badge-secondary">{{ result.field }}</span> {% translate 'to' %}
                  <span class="tw:badge tw:badge-secondary">{{ result.new_value }}</span>
                </div>
                <c-transaction.item :transaction="result.transaction" :dummy="True"
                                    :disable-selection="True"></c-transaction.item>
              </div>
            {% endif %}

            {% if result.type == 'update_or_create_transaction' %}
              <div>
                <div class="tw:alert tw:alert-info" role="alert">
                  {% translate 'Search' %}: {{ result.query }}
                </div>
                {% if result.start_transaction %}
                  <c-transaction.item :transaction="result.start_transaction" :dummy="True"
                                      :disable-selection="True"></c-transaction.item>
                {% else %}
                  <div class="tw:alert tw:alert-error" role="alert">
                    {% translate 'No transaction found, a new one will be created' %}
                  </div>
                {% endif %}
                <div class="tw:text-center tw:text-3xl tw:my-2"><i class="fa-solid fa-arrow-down"></i></div>
                <c-transaction.item :transaction="result.end_transaction" :dummy="True"
                                    :disable-selection="True"></c-transaction.item>
              </div>
            {% endif %}

            {% if result.type == 'error' %}
              <div>
                <div class="tw:alert tw:alert-{% if result.level == 'error' %}error{% elif result.level == 'warning' %}warning{% else %}info{% endif %}" role="alert">
                  {{ result.error }}
                </div>
              </div>
            {% endif %}

          {% endfor %}
        {% endif %}
      </div>
      <div class="tab-pane fade" id="logs-tab-pane" role="tabpanel" aria-labelledby="logs-tab" tabindex="0">
        {% if not logs %}
          {% translate 'Run a test to see...' %}
        {% else %}
          <pre>
              {{ logs|linebreaks }}
            </pre>
        {% endif %}
      </div>
    </div>
  </div>
</div>