PLANET-7250 Add Actions list to posts report (#2131)

This is for the new IA
greenpeace · Oct 23, 2023 · 0be0676 · 0be0676
1 parent 198ecc8
commit 0be0676
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 4 deletions.
diff --git a/admin/js/posts_report.js b/admin/js/posts_report.js
@@ -2,9 +2,11 @@ const setupPostsReport = () => {
   let postCollection;
   let pageCollection;
   let campaignCollection;
+  let actionCollection;
   let postsView;
   let pagesView;
   let campaignsView;
+  let actionsView;
 
   const p4 = window.p4 || {};
   const p4_data = window.p4_data || {};
@@ -29,6 +31,7 @@ const setupPostsReport = () => {
     postsView.refreshPosts(filters);
     pagesView.refreshPages(filters);
     campaignsView.refreshCampaigns(filters);
+    actionsView.refreshActions(filters);
   };
 
   const hideSpinner = postType => document.querySelector(`#${postType}_loader`).classList.add('hidden');
@@ -175,20 +178,74 @@ const setupPostsReport = () => {
     },
   });
 
+  // Actions list
+  p4.ActionsView = wp.Backbone.View.extend({
+    template: wp.template('p4-action-list'),
+    events: {
+      'click .refresh'() {
+        return this.refreshActions({});
+      },
+    },
+    showSpinner: () => showSpinner('actions'),
+    hideSpinner: () => hideSpinner('actions'),
+    refreshActions(filters) {
+      this.showSpinner();
+      const params = {
+        per_page: 50,
+        status: 'publish',
+        orderby: 'modified',
+        order: 'desc',
+        date_query_column: 'post_modified',
+      };
+      Object.assign(params, filters);
+      this.collection.reset();
+      this.views.remove();
+      this.render();
+      this.collection.fetch({
+        url: p4_data.api_url + '/p4_action',
+        data: params,
+        headers: {'X-WP-Nonce': p4_data.nonce},
+        success: this.hideSpinner,
+        error: this.hideSpinner,
+      });
+    },
+    initialize() {
+      this.listenTo(this.collection, 'add', this.addActionView);
+    },
+    addActionView(post) {
+      this.views.add('.p4-actions', new p4.PostView({model: post}));
+    },
+  });
+
+  p4.ActionView = wp.Backbone.View.extend({
+    template: wp.template('p4-post'),
+    tagName: 'tr',
+    prepare() {
+      return this.model.toJSON();
+    },
+  });
+
   p4.initialize = () => {
     postCollection = new wp.api.collections.Posts();
     pageCollection = new wp.api.collections.Pages();
     campaignCollection = new wp.api.collections.Campaign();
+    actionCollection = new wp.api.collections.P4_action();
     postsView = new p4.PostsView({collection: postCollection});
     pagesView = new p4.PagesView({collection: pageCollection});
     campaignsView = new p4.CampaignsView({collection: campaignCollection});
+    actionsView = new p4.ActionsView({collection: actionCollection});
     postCollection.fetch();
     pageCollection.fetch();
     campaignCollection.fetch();
+    actionCollection.fetch();
 
     document.querySelector('#posts-table').appendChild(postsView.render().el);
     document.querySelector('#pages-table').appendChild(pagesView.render().el);
     document.querySelector('#campaigns-table').appendChild(campaignsView.render().el);
+    const actionsTable = document.querySelector('#actions-table');
+    if (actionsTable) {
+      actionsTable.appendChild(actionsView.render().el);
+    }
   };
 
   // Initialize page when wp api client has finished loading.

diff --git a/posts-report.php b/posts-report.php
@@ -10,6 +10,7 @@
 
 Timber::render([ 'posts_report.twig' ], [
     'spinner_gif' => get_template_directory_uri() . '/images/wpspin_light-2x.gif',
+    'new_ia' => !empty(planet4_get_option('new_ia')),
 ]);
 
 require dirname(__FILE__) . '/underscore_templates/posts_reports.tpl.php';
diff --git a/templates/posts_report.twig b/templates/posts_report.twig
@@ -17,25 +17,35 @@
     <div class="wrap">
         <h1>{{ __( 'Posts List', 'planet4-master-theme-backend' ) }}</h1>
         <div class="hidden" id="posts_loader">
-            <img src={{ spinner_gif }} />
+            <img src={{ spinner_gif }} alt="Spinner" />
         </div>
         <div id="posts-table"></div>
     </div>
     <br>
     <div class="wrap">
         <h1>{{ __( 'Pages List', 'planet4-master-theme-backend' ) }}</h1>
         <div class="hidden" id="pages_loader">
-            <img src={{ spinner_gif }} />
+            <img src={{ spinner_gif }} alt="Spinner" />
         </div>
         <div id="pages-table"></div>
     </div>
     <br>
     <div class="wrap">
         <h1>{{ __( 'Campaigns List', 'planet4-master-theme-backend' ) }}</h1>
         <div class="hidden" id="campaigns_loader">
-            <img src={{ spinner_gif }} />
+            <img src={{ spinner_gif }} alt="Spinner" />
         </div>
         <div id="campaigns-table"></div>
     </div>
+    {% if new_ia %}
+        <br>
+        <div class="wrap">
+            <h1>{{ __( 'Actions List', 'planet4-master-theme-backend' ) }}</h1>
+            <div class="hidden" id="actions_loader">
+                <img src={{ spinner_gif }} alt="Spinner" />
+            </div>
+            <div id="actions-table"></div>
+        </div>
+    {% endif %}
 
 {% endblock %}
diff --git a/tests/e2e/env/.env.ci b/tests/e2e/env/.env.ci
@@ -1,6 +1,6 @@
 PW_TIMEOUT=30000
 PW_EXPECT_TIMEOUT=5000
-PW_ACTION_TIMEOUT=10000
+PW_ACTION_TIMEOUT=20000
 PW_WORKERS=4
 PW_RETRIES=2
 PW_TEST_HTML_REPORT_OPEN="never"
diff --git a/underscore_templates/posts_reports.tpl.php b/underscore_templates/posts_reports.tpl.php
@@ -52,3 +52,18 @@
         <button class="button button-primary refresh"><?php _e( 'Refresh', 'planet4-master-theme-backend' ) ?></button>
     </p>
 </script>
+
+<script type="text/template" id="tmpl-p4-action-list">
+    <table class="wp-list-table widefat">
+        <thead>
+            <th><?php _e( 'Title', 'planet4-master-theme-backend' ) ?></th>
+            <th><?php _e( 'Publish Status', 'planet4-master-theme-backend' ) ?></th>
+            <th><?php _e( 'Published at', 'planet4-master-theme-backend' ) ?></th>
+            <th><?php _e( 'Modified at', 'planet4-master-theme-backend' ) ?></th>
+        </thead>
+        <tbody class="p4-actions"></tbody>
+    </table>
+    <p>
+        <button class="button button-primary refresh"><?php _e( 'Refresh', 'planet4-master-theme-backend' ) ?></button>
+    </p>
+</script>