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.

app/Resources/static/themes/_global/index.js

@@ -70,4 +70,23 @@ $(document).ready(() => {
       retrievePercent(x.entryId, true);
     });
   }
+
+  document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {
+    const current = item;
+    current.wallabag_edit_mode = false;
+    current.onclick = (event) => {
+      const target = event.currentTarget;
+
+      if (target.wallabag_edit_mode === false) {
+        $(target.parentNode.querySelector('[data-handle=tag-link]')).addClass('hidden');
+        $(target.parentNode.querySelector('[data-handle=tag-rename-form]')).removeClass('hidden');
+        target.parentNode.querySelector('[data-handle=tag-rename-form] input').focus();
+        target.querySelector('.material-icons').innerHTML = 'done';
+
+        target.wallabag_edit_mode = true;
+      } else {
+        target.parentNode.querySelector('[data-handle=tag-rename-form]').submit();
+      }
+    };
+  });
 });

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 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>

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 %}