PLANET-6981 Remove jQuery from posts_report.js

Ideally we want to avoid using jQuery

admin/js/posts_report.js

@@ -1,5 +1,4 @@
-jQuery(function($) {
-
+const setupPostsReport = () => {
   let postCollection;
   let pageCollection;
   let campaignCollection;
@@ -15,40 +14,36 @@ jQuery(function($) {
     return;
   }
 
-  $('#posts-filter').off('click').on('click', function () {
+  const filterButton = document.querySelector('#posts-filter');
+  filterButton.onclick = () => {
     let filters = {};
-    const from = $('#from').val();
-    const to = $('#to').val();
-    if ('' !== from) {
-      filters.after = from + 'T00:00:00';
+    const from = document.querySelector('#from').value;
+    const to = document.querySelector('#to').value;
+
+    if (from) {
+      filters.after = `${from}T00:00:00`;
     }
-    if ('' !== to) {
-      filters.before = to + 'T23:59:59';
+    if (to) {
+      filters.before = `${to}T23:59:59`;
     }
-
     postsView.refreshPosts(filters);
     pagesView.refreshPages(filters);
-    campaignsView.refreshPages(filters);
-  });
+    campaignsView.refreshCampaigns(filters);
+  };
 
-  p4.PostsView = wp.Backbone.View.extend({
+  const hideSpinner = postType => document.querySelector(`#${postType}_loader`).classList.add('hidden');
+  const showSpinner = postType => document.querySelector(`#${postType}_loader`).classList.remove('hidden');
 
+  // Posts List
+  p4.PostsView = wp.Backbone.View.extend({
     template: wp.template('p4-post-list'),
-
     events: {
       'click .refresh': function () {
         return this.refreshPosts({});
       },
     },
-
-    showSpinner: function () {
-      $('#posts_loader').removeClass('hidden');
-    },
-
-    hideSpinner: function () {
-      $('#posts_loader').addClass('hidden');
-    },
-
+    showSpinner: () => showSpinner('posts'),
+    hideSpinner: () => hideSpinner('posts'),
     refreshPosts: function (filters) {
       this.showSpinner();
       const params = {
@@ -66,51 +61,36 @@ jQuery(function($) {
         url: p4_data.api_url + '/posts',
         data: params,
         headers: {'X-WP-Nonce': p4_data.nonce},
-        success: function () {
-          this.hideSpinner();
-        }.bind(this),
-        error: function () {
-          this.hideSpinner();
-        }.bind(this)
+        success: this.hideSpinner,
+        error: this.hideSpinner,
       });
     },
-
     initialize: function () {
       this.listenTo(this.collection, 'add', this.addPostView);
     },
-
     addPostView: function (post) {
-      this.views.add('.p4-posts', new p4.PostView({model: post}));
+      this.views.add('.p4-posts', new p4.PostView({ model: post }));
     }
   });
 
   p4.PostView = wp.Backbone.View.extend({
     template: wp.template('p4-post'),
     tagName: 'tr',
-
     prepare: function () {
       return this.model.toJSON();
     }
   });
 
-
+  // Pages list
   p4.PagesView = wp.Backbone.View.extend({
     template: wp.template('p4-page-list'),
-
     events: {
       'click .refresh': function () {
         return this.refreshPages({});
       },
     },
-
-    showSpinner: function () {
-      $('#pages_loader').removeClass('hidden');
-    },
-
-    hideSpinner: function () {
-      $('#pages_loader').addClass('hidden');
-    },
-
+    showSpinner: () => showSpinner('pages'),
+    hideSpinner: () => hideSpinner('pages'),
     refreshPages: function (filters) {
       this.showSpinner();
       const params = {
@@ -128,51 +108,37 @@ jQuery(function($) {
         url: p4_data.api_url + '/pages',
         data: params,
         headers: {'X-WP-Nonce': p4_data.nonce},
-        success: function () {
-          this.hideSpinner();
-        }.bind(this),
-        error: function () {
-          this.hideSpinner();
-        }.bind(this)
+        success: this.hideSpinner,
+        error: this.hideSpinner,
       });
     },
-
     initialize: function () {
-      this.listenTo(this.collection, 'add', this.addPostView);
+      this.listenTo(this.collection, 'add', this.addPageView);
     },
-
-    addPostView: function (post) {
-      this.views.add('.p4-pages', new p4.PageView({model: post}));
+    addPageView: function (post) {
+      this.views.add('.p4-pages', new p4.PostView({ model: post }));
     }
   });
 
   p4.PageView = wp.Backbone.View.extend({
     template: wp.template('p4-post'),
     tagName: 'tr',
-
     prepare: function () {
       return this.model.toJSON();
     }
   });
 
+  // Campaigns list
   p4.CampaignsView = wp.Backbone.View.extend({
     template: wp.template('p4-campaign-list'),
-
     events: {
       'click .refresh': function () {
-        return this.refreshPages({});
+        return this.refreshCampaigns({});
       },
     },
-
-    showSpinner: function () {
-      $('#campaigns_loader').removeClass('hidden');
-    },
-
-    hideSpinner: function () {
-      $('#campaigns_loader').addClass('hidden');
-    },
-
-    refreshPages: function (filters) {
+    showSpinner: () => showSpinner('campaigns'),
+    hideSpinner: () => hideSpinner('campaigns'),
+    refreshCampaigns: function (filters) {
       this.showSpinner();
       const params = {
         per_page: 50,
@@ -189,34 +155,27 @@ jQuery(function($) {
         url: p4_data.api_url + '/campaign',
         data: params,
         headers: {'X-WP-Nonce': p4_data.nonce},
-        success: function () {
-          this.hideSpinner();
-        }.bind(this),
-        error: function () {
-          this.hideSpinner();
-        }.bind(this)
+        success: this.hideSpinner,
+        error: this.hideSpinner,
       });
     },
-
     initialize: function () {
-      this.listenTo(this.collection, 'add', this.addPostView);
+      this.listenTo(this.collection, 'add', this.addCampaignView);
     },
-
-    addPostView: function (post) {
-      this.views.add('.p4-campaigns', new p4.CampaignView({model: post}));
+    addCampaignView: function (post) {
+      this.views.add('.p4-campaigns', new p4.PostView({ model: post }));
     }
   });
 
   p4.CampaignView = wp.Backbone.View.extend({
     template: wp.template('p4-post'),
     tagName: 'tr',
-
     prepare: function () {
       return this.model.toJSON();
     }
   });
 
-  p4.initialize = function () {
+  p4.initialize = () => {
     postCollection = new wp.api.collections.Posts();
     pageCollection = new wp.api.collections.Pages();
     campaignCollection = new wp.api.collections.Campaign();
@@ -226,13 +185,14 @@ jQuery(function($) {
     postCollection.fetch();
     pageCollection.fetch();
     campaignCollection.fetch();
-    $('#posts-table').html(postsView.render().el);
-    $('#pages-table').html(pagesView.render().el);
-    $('#campaigns-table').html(campaignsView.render().el);
+
+    document.querySelector('#posts-table').appendChild(postsView.render().el);
+    document.querySelector('#pages-table').appendChild(pagesView.render().el);
+    document.querySelector('#campaigns-table').appendChild(campaignsView.render().el);
   };
 
   // Initialize page when wp api client has finished loading.
-  wp.api.loadPromise.done(function () {
-    p4.initialize();
-  });
-});
+  wp.api.loadPromise.done(p4.initialize);
+};
+
+setupPostsReport();

src/PostReportController.php

@@ -87,12 +87,10 @@ public function filter_post_params_endpoint( $query_params ) {
 	 * Callback function to render posts report page.
 	 */
 	public function render_posts_report_page() {
-		wp_enqueue_script( 'jquery-ui-core' );
 		wp_register_script(
 			'posts-report',
 			$this->theme_dir . '/admin/js/posts_report.js',
 			[
-				'jquery',
 				'wp-api',
 				'wp-backbone',
 			],