From a0b0fa0495b0f9fc5e89c52de5cb16dedb5737f6 Mon Sep 17 00:00:00 2001
From: Karmalakas <cronus.raven@gmail.com>
Date: Sun, 7 Feb 2021 06:36:28 +0200
Subject: [PATCH] Add item at the top if top button is clicked in list field
 (#2055)

* Add item at the top if top button is clicked in list field

Pretty much title says it all. IMO it makes much more sense, that top button would add item at the top, because if list is long enough, you are not even seeing if something happens when item is added at the bottom. Created this PR because of [the question asked in forum](https://discourse.getgrav.org/t/blueprint-type-list-new-data-on-top-of-array/15254).

So the solution would be either like this PR suggests, or button actions should be configurable via Admin config somewhere.

* Change added item placement for List field

Add field `palecement` property check.

If `top` or `bottom`, both buttons add item to top or bottom.
If `position`, item is added depending on a clicked button position -
  if top button is clicked, item added to top and if bottom button - item added to bottom.

Defaults to bottom

* Revert empty line at EOF
---
 .../grav/templates/forms/fields/list/list.html.twig  | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/themes/grav/templates/forms/fields/list/list.html.twig b/themes/grav/templates/forms/fields/list/list.html.twig
index 53617984..eddbaf51 100644
--- a/themes/grav/templates/forms/fields/list/list.html.twig
+++ b/themes/grav/templates/forms/fields/list/list.html.twig
@@ -56,8 +56,10 @@
                         <button class="button{{ not value|length ? ' hidden' : '' }}" type="button" data-action="sort" data-action-sort="{{ field.sortby }}" data-action-sort-dir="{{ field.sortby_dir|default('asc') }}"
                                 {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-sort-amount-{{ field.sortby_dir|default('asc') }}"></i> {{ btnSortLabel|e|tu }} '{{ field.sortby }}'</button>
                     {% endif %}
-                    <button class="button" type="button" data-action="add" data-action-add="bottom"
-                            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-plus"></i> {{ btnLabel|e|tu }}</button>
+                    <button class="button" type="button" data-action="add"
+                            data-action-add="{{ field.placement is same as('position') ? 'top' : field.placement|default('bottom') }}"
+                            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                    ><i class="fa fa-plus"></i> {{ btnLabel|e|tu }}</button>
                 </div>
             {% endif %}
             <ul  {% if field.classes is defined %}class="{{ field.classes }}"{% endif %} data-collection-holder="{{ name }}"
@@ -131,8 +133,10 @@
                     <button class="button{{ not value|length ? ' hidden' : '' }}" type="button" data-action="sort" data-action-sort="{{ field.sortby }}" data-action-sort-dir="{{ field.sortby_dir|default('asc') }}"
                             {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-sort-amount-{{ field.sortby_dir|default('asc') }}"></i> {{ btnSortLabel|e|tu }} '{{ field.sortby }}'</button>
                 {% endif %}
-                <button class="button" type="button" data-action="add" data-action-add="bottom"
-                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-plus"></i> {{ btnLabel|e|tu }}</button>
+                <button class="button" type="button" data-action="add"
+                        data-action-add="{{ field.placement is same as('position') ? 'bottom' : field.placement|default('bottom') }}"
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                ><i class="fa fa-plus"></i> {{ btnLabel|e|tu }}</button>
             </div>
             {% endif %}