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.

diff --git a/app/Resources/static/themes/_global/index.js b/app/Resources/static/themes/_global/index.js
index ae598e56e1374a45cb59be9b74f9d69a327e4ee1..bb3e95b6d4bceec69e6e208298a38553d7de9352 100644 (file)
--- 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 070d5629a4474a9a4afcc69e4de383eabe495b18..35351ab157f3f3717da8f5e49c775c1fbf134ba5 100644 (file)
--- 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 c15b5146e3f561d87bd83098e0acb445d2671e4a..21e88a9a2ecc244d90253734af4dc0213c924c16 100644 (file)
--- 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 %}