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.

3 files changed, 46 insertions, 4 deletions

diff --git a/app/Resources/static/themes/_global/index.js b/app/Resources/static/themes/_global/index.js
index ae598e56..bb3e95b6 100644
--- a/app/Resources/static/themes/_global/index.js
+++ b/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();
+      }
+    };
+  });
 });
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 %}