Update tag list template to allow renaming.

* Add a form on each tag to handle rename action.
* Add JavaScript to handle action on the corresponding page inside the global index.js file.
* Add support for the 2 active themes : material / baggy

The form solution is cleaner than an Ajax one because it let the browser validate input data and make the POST easier without the need to handle JSON response.

2 files changed, 27 insertions, 4 deletions

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Tag/tags.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Tag/tags.html.twig
index 070d5629..35351ab1 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Tag/tags.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Tag/tags.html.twig
@@ -10,10 +10,22 @@
     <ul>
     {% for tag in tags %}
         <li id="tag-{{ tag.id|e }}">
-            <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{tag.label}} ({{ tag.nbEntries }})</a>
-            <a rel="alternate" type="application/rss+xml" href="{{ path('tag_rss', {'username': app.user.username, 'token': app.user.config.rssToken, 'slug': tag.slug}) }}" class="right">
-                <i class="material-icons md-24">rss_feed</i>
+            <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" data-handle="tag-link">{{ tag.label }}&nbsp;({{ tag.nbEntries }})</a>
+
+            {% if renameForms is defined and renameForms[tag.id] is defined %}
+            <form class="card-tag-form hidden" data-handle="tag-rename-form" action="{{ path('tag_rename', {'slug': tag.slug})}}" method="POST">
+                {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label}}) }}
+                {{ form_rest(renameForms[tag.id]) }}
+            </form>
+            <a class="card-tag-rename" data-handler="tag-rename" href="javascript:void(0);">
+                <i class="material-icons">mode_edit</i>
             </a>
+            {% endif %}
+            {% if app.user.config.rssToken %}
+                <a rel="alternate" type="application/rss+xml" href="{{ path('tag_rss', {'username': app.user.username, 'token': app.user.config.rssToken, 'slug': tag.slug}) }}" class="right">
+                    <i class="material-icons md-24">rss_feed</i>
+                </a>
+            {% endif %}
         </li>
     {% endfor %}
     </ul>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig
index c15b5146..21e88a9a 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig
@@ -13,7 +13,18 @@
         <ul class="card-tag-labels">
             {% for tag in tags %}
                 <li title="{{tag.label}} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}">
-                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link">{{tag.label}} ({{ tag.nbEntries }})</a>
+                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link" data-handle="tag-link">
+                        {{ tag.label }}&nbsp;({{ tag.nbEntries }})
+                    </a>
+                    {% if renameForms is defined and renameForms[tag.id] is defined %}
+                    <form class="card-tag-form hidden" data-handle="tag-rename-form" action="{{ path('tag_rename', {'slug': tag.slug})}}" method="POST">
+                        {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label}}) }}
+                        {{ form_rest(renameForms[tag.id]) }}
+                    </form>
+                    <a class="card-tag-rename" data-handler="tag-rename" href="javascript:void(0);">
+                        <i class="material-icons">mode_edit</i>
+                    </a>
+                    {% endif %}
                     {% if app.user.config.rssToken %}
                         <a rel="alternate" type="application/rss+xml" href="{{ path('tag_rss', {'username': app.user.username, 'token': app.user.config.rssToken, 'slug': tag.slug}) }}" class="card-tag-rss"><i class="material-icons">rss_feed</i></a>
                     {% endif %}