feat: Added redirections bulk delete action

roadiz · Sep 14, 2023 · 6652e67 · 6652e67
1 parent a98a9e1
commit 6652e67
Show file tree

Hide file tree

Showing 24 changed files with 240 additions and 81 deletions.
diff --git a/lib/RoadizRozierBundle/config/routing/redirections.yml b/lib/RoadizRozierBundle/config/routing/redirections.yml
@@ -12,3 +12,8 @@ redirectionsDeletePage:
     defaults:
         _controller: Themes\Rozier\Controllers\RedirectionsController::deleteAction
     requirements: { id : "[0-9]+" }
+redirectionsBulkDeletePage:
+    methods: [GET, POST]
+    path:     /bulk-delete
+    defaults:
+        _controller: Themes\Rozier\Controllers\RedirectionsController::bulkDeleteAction
diff --git a/lib/RoadizRozierBundle/src/Controller/Realm/RealmController.php b/lib/RoadizRozierBundle/src/Controller/Realm/RealmController.php
@@ -9,9 +9,9 @@
 use RZ\Roadiz\CoreBundle\Form\RealmType;
 use RZ\Roadiz\CoreBundle\Model\RealmInterface;
 use Symfony\Component\HttpFoundation\Request;
-use Themes\Rozier\Controllers\AbstractAdminController;
+use Themes\Rozier\Controllers\AbstractAdminWithBulkController;
 
-class RealmController extends AbstractAdminController
+class RealmController extends AbstractAdminWithBulkController
 {
     /**
      * @inheritDoc

diff --git a/lib/Rozier/src/Controllers/RedirectionsController.php b/lib/Rozier/src/Controllers/RedirectionsController.php
@@ -13,7 +13,7 @@
 use Symfony\Component\HttpFoundation\Request;
 use Themes\Rozier\Forms\RedirectionType;
 
-class RedirectionsController extends AbstractAdminController
+class RedirectionsController extends AbstractAdminWithBulkController
 {
     /**
      * @inheritDoc
@@ -129,4 +129,9 @@ protected function createDeleteEvent(PersistableInterface $item): RedirectionEve
         }
         return new PostDeletedRedirectionEvent($item);
     }
+
+    protected function getBulkDeleteRouteName(): ?string
+    {
+        return 'redirectionsBulkDeletePage';
+    }
 }
diff --git a/lib/Rozier/src/Resources/app/Lazyload.js b/lib/Rozier/src/Resources/app/Lazyload.js
@@ -263,10 +263,10 @@ export default class Lazyload {
 
         $tempData = $container.find('.new-content-global')
 
-        $old.fadeOut(100, () => {
+        $old.eq(0).fadeOut(100, () => {
             $old.remove()
             this.generalBind()
-            $tempData.fadeIn(200, () => {
+            $tempData.eq(0).fadeIn(200, () => {
                 $tempData.removeClass('new-content-global')
                 let pageShowEndEvent = new CustomEvent('pageshowend')
                 window.dispatchEvent(pageShowEndEvent)

diff --git a/lib/Rozier/src/Resources/app/Rozier.js b/lib/Rozier/src/Resources/app/Rozier.js
@@ -159,7 +159,7 @@ export default class Rozier {
          * init generic bulk actions widget
          */
         bulkActions()
-        window.addEventListener('pageload', () => {
+        window.addEventListener('pageshowend', () => {
             bulkActions()
         })
     }

diff --git a/lib/Rozier/src/Resources/app/less/bulk/bulk.less b/lib/Rozier/src/Resources/app/less/bulk/bulk.less
@@ -160,8 +160,13 @@
     & > input {
         cursor: pointer;
     }
+
+    th.table-actions-row & {
+        margin-left: -8px;
+    }
 }
 
+
 // You must prefix you item container with .bulk-layout
 .bulk-layout {
     .bulk-actions {

diff --git a/lib/Rozier/src/Resources/app/widgets/GenericBulkActions.js b/lib/Rozier/src/Resources/app/widgets/GenericBulkActions.js
@@ -3,8 +3,21 @@ export default function () {
     const bulkFormCollapsedClassName = 'bulk-actions--collapsed'
     const bulkFormCollapsingClassName = 'bulk-actions--collapsing'
     const bulkActionsForms = document.querySelectorAll('.bulk-layout .' + bulkFormCollapsedClassName)
-    const bulkActionsDeselect = document.querySelector('.bulk-layout a.uk-button-bulk-deselect')
+    /**
+     * @var {HTMLElement|null}
+     */
+    const bulkActionsDeselect = document.querySelector('.bulk-layout .uk-button-bulk-deselect')
+    /**
+     * @var {HTMLInputElement|null}
+     */
+    const bulkActionsSelectAll = document.querySelector(".bulk-layout input[name='bulk-selection-all']")
+    /**
+     * @var {NodeListOf<HTMLInputElement>}
+     */
     const bulkFormValue = document.querySelectorAll('.bulk-layout input.bulk-form-value')
+    /**
+     * @var {NodeListOf<HTMLInputElement>}
+     */
     const bulkCheckboxes = document.querySelectorAll(".bulk-layout input[name='bulk-selection[]']")
 
     bulkActionsForms.forEach((f) =>
@@ -15,6 +28,18 @@ export default function () {
         })
     )
 
+    const deselectAll = () => {
+        bulkCheckboxes.forEach((element) => {
+            element.checked = false
+            bulkSelection.splice(0, bulkSelection.length)
+            bulkFormValue.forEach((e) => (e.value = ''))
+        })
+        if (bulkActionsSelectAll) {
+            bulkActionsSelectAll.checked = false
+        }
+        closeBulkActionsForms()
+    }
+
     const closeBulkActionsForms = () => {
         window.requestAnimationFrame(() => {
             bulkActionsForms.forEach((f) => f.classList.add(bulkFormCollapsingClassName))
@@ -39,7 +64,10 @@ export default function () {
                 bulkActionsForms.forEach((f) => f.classList.remove(bulkFormCollapsedClassName))
                 bulkFormValue.forEach((e) => (e.value = JSON.stringify(bulkSelection)))
             } else {
-                bulkActionsForms.forEach((f) => f.classList.add(bulkFormCollapsedClassName))
+                closeBulkActionsForms()
+                if (bulkActionsSelectAll) {
+                    bulkActionsSelectAll.checked = false
+                }
             }
         })
     })
@@ -48,13 +76,26 @@ export default function () {
         bulkActionsDeselect.addEventListener('click', (e) => {
             e.preventDefault()
             e.stopPropagation()
+            deselectAll()
+        })
+    }
 
-            bulkCheckboxes.forEach((element) => {
-                element.checked = false
-                bulkSelection.splice(0, bulkSelection.length)
-                closeBulkActionsForms()
-                bulkFormValue.forEach((e) => (e.value = ''))
-            })
+    if (bulkActionsSelectAll) {
+        bulkActionsSelectAll.addEventListener('change', (e) => {
+            if (bulkActionsSelectAll.checked) {
+                bulkCheckboxes.forEach((element) => {
+                    element.checked = true
+                    bulkSelection.push(element.value)
+                })
+            } else {
+                deselectAll()
+            }
+            if (bulkSelection.length > 0) {
+                bulkActionsForms.forEach((f) => f.classList.remove(bulkFormCollapsedClassName))
+                bulkFormValue.forEach((e) => (e.value = JSON.stringify(bulkSelection)))
+            } else {
+                bulkActionsForms.forEach((f) => f.classList.add(bulkFormCollapsedClassName))
+            }
         })
     }
 }
diff --git a/lib/Rozier/src/Resources/translations/messages.xlf b/lib/Rozier/src/Resources/translations/messages.xlf
@@ -798,6 +798,10 @@
             <trans-unit id="are_you_sure.bulk_delete.webhooks" xml:space="preserve"><source>are_you_sure.bulk_delete.webhooks</source></trans-unit>
             <trans-unit id="webhooks.bulk_delete.title" xml:space="preserve"><source>webhooks.bulk_delete.title</source></trans-unit>
 
+            <trans-unit id="no_redirections" xml:space="preserve"><source>no_redirections</source></trans-unit>
+            <trans-unit id="are_you_sure.bulk_delete.redirections" xml:space="preserve"><source>are_you_sure.bulk_delete.redirections</source></trans-unit>
+            <trans-unit id="redirections.bulk_delete.title" xml:space="preserve"><source>redirections.bulk_delete.title</source></trans-unit>
+
             <trans-unit xml:space="preserve" id="reset.marker"><source>reset.marker</source></trans-unit>
             <trans-unit xml:space="preserve" id="geotag.type_an_address.then_type_enter"><source>geotag.type_an_address.then_type_enter</source></trans-unit>
             <trans-unit xml:space="preserve" id="geographic.coordinates.type"><source>geographic.coordinates.type</source></trans-unit>
@@ -1329,6 +1333,8 @@
             <trans-unit xml:space="preserve" id="%namespace%.%item%.was_created"><source>%namespace%.%item%.was_created</source><note>Default controller addAction result message.</note></trans-unit>
             <trans-unit xml:space="preserve" id="%namespace%.%item%.was_updated"><source>%namespace%.%item%.was_updated</source><note>Default controller editAction result message.</note></trans-unit>
             <trans-unit xml:space="preserve" id="%namespace%.%item%.was_deleted"><source>%namespace%.%item%.was_deleted</source><note>Default controller deleteAction result message.</note></trans-unit>
+            <trans-unit xml:space="preserve" id="%namespace%.%item%.was_published"><source>%namespace%.%item%.was_published</source><note>Default controller bulkPublishAction result message.</note></trans-unit>
+            <trans-unit xml:space="preserve" id="%namespace%.%item%.was_unpublished"><source>%namespace%.%item%.was_unpublished</source><note>Default controller bulkUnpublishAction result message.</note></trans-unit>
 
             <trans-unit xml:space="preserve" id="document.document_display_gallery"><source>document.document_display_gallery</source></trans-unit>
             <trans-unit xml:space="preserve" id="documents.document_display_list"><source>documents.document_display_list</source></trans-unit>

diff --git a/lib/Rozier/src/Resources/views/admin/bulk_actions.html.twig b/lib/Rozier/src/Resources/views/admin/bulk_actions.html.twig
@@ -5,7 +5,10 @@
         </div>
         {% apply spaceless %}
             <div class="bulk-actions__actions">
-                <a class="uk-button uk-button-bulk uk-button-bulk-deselect uk-button-bulk-deselect-tags" href="#" title="{% trans %}deselect.all{% endtrans %}" data-uk-tooltip="{animation:true}"><i class="uk-icon-square-o"></i></a>
+                <button type="button"
+                        class="uk-button uk-button-bulk uk-button-bulk-deselect uk-button-bulk-deselect-tags"
+                        title="{% trans %}deselect.all{% endtrans %}"
+                        data-uk-tooltip="{animation:true}"><i class="uk-icon-square-o"></i></button>
                 {# Links #}
                 {% if bulkDeleteForm %}
                     {% form_theme bulkDeleteForm '@RoadizRozier/horizontalForms.html.twig' %}

diff --git a/lib/Rozier/src/Resources/views/admin/webhooks/webhook_row_header.html.twig b/lib/Rozier/src/Resources/views/admin/webhooks/webhook_row_header.html.twig
@@ -18,4 +18,11 @@
     } only %}
     {% endif %}
 </th>
-<th class="table-actions-row table-actions-row-3">{% trans %}actions{% endtrans %}</th>
+<th class="table-actions-row table-actions-row-3">
+    {% if hasBulkActions %}
+        <div class="bulk-selection">
+            <input class="checkbox" type="checkbox" name="bulk-selection-all" />
+        </div>
+    {% endif %}
+    {% trans %}actions{% endtrans %}
+</th>
diff --git a/lib/Rozier/src/Resources/views/attributes/attribute_row_header.html.twig b/lib/Rozier/src/Resources/views/attributes/attribute_row_header.html.twig
@@ -9,4 +9,11 @@
 </th>
 <th>{% trans %}attributes.form.type{% endtrans %}</th>
 <th>{% trans %}attributes.group{% endtrans %}</th>
-<th class="table-actions-row table-actions-row-3">{% trans %}actions{% endtrans %}</th>
+<th class="table-actions-row table-actions-row-3">
+    {% if hasBulkActions %}
+        <div class="bulk-selection">
+            <input class="checkbox" type="checkbox" name="bulk-selection-all" />
+        </div>
+    {% endif %}
+    {% trans %}actions{% endtrans %}
+</th>
diff --git a/lib/Rozier/src/Resources/views/partials/css-inject.html.twig b/lib/Rozier/src/Resources/views/partials/css-inject.html.twig
@@ -1,7 +1,7 @@
 
 <link href="{{ asset('css/vendor.00b2be12b114cc414b2c.css', 'Rozier') }}" rel="stylesheet">
 
-<link href="{{ asset('css/app.364f0ee7940cb54fa4dc.css', 'Rozier') }}" rel="stylesheet">
+<link href="{{ asset('css/app.44c39cecf098349e8d63.css', 'Rozier') }}" rel="stylesheet">
 
 
 

diff --git a/lib/Rozier/src/Resources/views/partials/js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/js-inject.html.twig
@@ -1,5 +1,5 @@
 
-<script src="{{ asset('js/vendor.114786243d392ad06f4d.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/vendor.118e12fff2243a310d56.js', 'Rozier') }}" defer type="text/javascript"></script>
 
-<script src="{{ asset('js/app.114786243d392ad06f4d.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/app.118e12fff2243a310d56.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig
@@ -1,3 +1,3 @@
 
-<script src="{{ asset('js/simple.114786243d392ad06f4d.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/simple.118e12fff2243a310d56.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/lib/Rozier/src/Resources/views/redirections/bulk_base.html.twig b/lib/Rozier/src/Resources/views/redirections/bulk_base.html.twig
@@ -0,0 +1,39 @@
+{% extends '@RoadizRozier/admin/base.html.twig' %}
+
+{% block title %}{{ block('bulk_title') }} | {{ parent() }}{% endblock %}
+{% block content_title %}{% block bulk_title %}{% endblock %}{% endblock %}
+
+{% block content_count_filters %}
+    {% include '@RoadizRozier/widgets/countFiltersBar.html.twig' %}
+{% endblock %}
+
+{% block content_header_nav %}
+    <a class="content-header-nav-back uk-navbar-content"
+       href="{{ path('redirectionsHomePage') }}"
+       title="{% trans %}back_to.redirections{% endtrans %}"
+       data-uk-tooltip="{animation:true}"><i class="uk-icon-rz-back-parent"></i></a>
+{% endblock %}
+
+{% block content_body %}
+    <article class="content content-no-action-menu">
+        <div class="content-table-cont">
+            <table class="items content-table uk-table">
+                <thead>
+                    <tr>
+                        {% include '@RoadizRozier/redirections/redirection_row_header.html.twig' with { no_sort: true } %}
+                    </tr>
+                </thead>
+                <tbody>
+                {% for item in items %}
+                    <tr>
+                        {% include '@RoadizRozier/redirections/redirection_row.html.twig' %}
+                    </tr>
+                {% else %}
+                    <tr><td colspan="4">{% trans %}no_redirections{% endtrans %}</td></tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% block bulk_form %}{% endblock %}
+    </article>
+{% endblock %}
diff --git a/lib/Rozier/src/Resources/views/redirections/bulk_delete.html.twig b/lib/Rozier/src/Resources/views/redirections/bulk_delete.html.twig
@@ -0,0 +1,20 @@
+{% extends '@RoadizRozier/redirections/bulk_base.html.twig' %}
+{% block bulk_title %}{% trans %}redirections.bulk_delete.title{% endtrans %}{% endblock %}
+{% block bulk_form %}
+    {% if form %}
+        <article class="content content-delete content-no-action-menu">
+            {% form_theme form '@RoadizRozier/forms.html.twig' %}
+            {{ form_start(form, {
+                'attr': {
+                    'class': 'uk-form uk-form-stacked'
+                }
+            }) }}{{ form_widget(form) }}
+            <fieldset data-uk-margin>
+                <legend class="uk-alert uk-alert-danger"><i class="uk-icon uk-icon-warning"></i> {% trans %}are_you_sure.bulk_delete.redirections{% endtrans %}</legend>
+                <a href="{{ path('redirectionsHomePage') }}" class="uk-button"><i class="uk-icon-rz-back-parent"></i> {% trans %}cancel{% endtrans %}</a>
+                <button class="uk-button uk-button-danger" type="submit"><i class="uk-icon-rz-trash-mini-o"></i> {% trans %}delete{% endtrans %}</button>
+            </fieldset>
+            {{ form_end(form) }}
+        </article>
+    {% endif %}
+{% endblock %}
diff --git a/lib/Rozier/src/Resources/views/redirections/list.html.twig b/lib/Rozier/src/Resources/views/redirections/list.html.twig
@@ -7,7 +7,7 @@
 {%- endblock -%}
 
 {% block content %}
-<section class="content-global  content-nav-and-filters">
+<section class="bulk-layout content-global content-nav-and-filters">
     <header class="content-header header-redirection header-redirection-list">
         <h1 class="content-title redirection-title">{% trans %}manage.redirections{% endtrans %}</h1>
         {% include '@RoadizRozier/widgets/countFiltersBar.html.twig' %}
@@ -22,70 +22,19 @@
     </header>
 
     {% include '@RoadizRozier/widgets/filtersBar.html.twig' %}
+    {% include '@RoadizRozier/admin/bulk_actions.html.twig' %}
     <article class="content content-no-action-menu content-node-types-list">
         <div class="content-table-cont">
             <table class="content-table redirections uk-table">
                 <thead>
                     <tr>
-                        <th>
-                            {% trans %}redirection.query{% endtrans %}
-                            {% include '@RoadizRozier/includes/column_ordering.html.twig' with {
-                                'field': 'query',
-                                'filters': filters,
-                            } only %}
-                        </th>
-                        <th>
-                            {% trans %}redirection.redirect_uri{% endtrans %}
-                            {% include '@RoadizRozier/includes/column_ordering.html.twig' with {
-                                'field': 'redirectUri',
-                                'filters': filters,
-                            } only %}
-                        </th>
-                        <th>{% trans %}redirection.type{% endtrans %}</th>
-                        <th>
-                            {% trans %}redirection.use_count{% endtrans %}
-                            {% include '@RoadizRozier/includes/column_ordering.html.twig' with {
-                                'field': 'useCount',
-                                'filters': filters,
-                            } only %}
-                        </th>
-                        <th class="table-actions-row table-actions-row-3">{% trans %}actions{% endtrans %}</th>
+                        {% include '@RoadizRozier/redirections/redirection_row_header.html.twig' %}
                     </tr>
                 </thead>
                 <tbody>
                     {% for item in items %}
-                        {% set url = path('redirectionsEditPage', { id: item.id }) %}
-                        {% if item.redirectNodeSource %}
-                            {% set url = path('nodesEditSEOPage', {
-                                'nodeId': item.redirectNodeSource.node.id,
-                                'translationId': item.redirectNodeSource.translation.id
-                            }) ~ '#manage-redirections' %}
-                        {% endif %}
                     <tr>
-                        <td>
-                            <a href="{{ url }}">{{ item.query }}</a>
-                        </td>
-                        <td>
-                            {% if item.redirectNodeSource %}
-                                <i class="uk-icon uk-icon-magic"></i> {{ path(item.redirectNodeSource) -}}
-                            {% else %}
-                                {{- item.redirectUri|u.truncate(80, '…') -}}
-                            {% endif %}
-                        </td>
-                        <td>{{ item.typeAsString|trans }}</td>
-                        <td>{{ item.useCount }}</td>
-                        <td class="table-actions-row">
-                        {% apply spaceless %}
-                            <a class="uk-button uk-button-content uk-button-small"
-                               href="{{ url }}"
-                               title="{% trans %}edit{% endtrans %}"
-                               data-uk-tooltip="{animation:true}"><i class="uk-icon-rz-pencil"></i></a>
-                            <a class="uk-button uk-button-content uk-button-small uk-button-table-delete"
-                               href="{{ path('redirectionsDeletePage', { id: item.id }) }}"
-                               title="{% trans %}delete{% endtrans %}"
-                               data-uk-tooltip="{animation:true}"><i class="uk-icon-rz-trash-o"></i></a>
-                        {% endapply %}
-                        </td>
+                        {% include '@RoadizRozier/redirections/redirection_row.html.twig' %}
                     </tr>
                     {% endfor %}
                 </tbody>