NEW Add loading animation to Create Report button, fix bug in CurlLinkChecker

2017-11-29 12:14:39 +13:00 · 2017-11-29 12:14:39 +13:00 · 44fbc027f3
parent a119add32e
commit 44fbc027f3
7 changed files with 154 additions and 88 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -10,8 +10,5 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true

-[{*.yml,package.json}]
+[*.{yml,js,scss,css,json}]
 indent_size = 2
-
-# The indent size used in the package.json file cannot be changed:
-# https://github.com/npm/npm/pull/3180#issuecomment-16336516
--- a/composer.json
+++ b/composer.json
@ -29,7 +29,10 @@
        }
    },
    "extra": {
-        "expose": ["javascript"],
+        "expose": [
+            "css",
+            "javascript"
+        ],
        "branch-alias": {
            "dev-master": "2.x-dev"
        }
--- a/css/BrokenExternalLinksReport.css
+++ b/css/BrokenExternalLinksReport.css
@ -0,0 +1,4 @@
+.external-links-report__create-report,
+.external-links-report__report-progress {
+  margin-top: 20px;
+}
--- a/javascript/BrokenExternalLinksReport.js
+++ b/javascript/BrokenExternalLinksReport.js
@ -1,69 +1,135 @@
 (function($) {
-	$.entwine('ss', function($) {
-		$('#externalLinksReport').entwine({
-			PollTimeout: null,
-			onclick: function() {
-				this.start();
-			},
-			onmatch: function() {
-				// poll the current job and update the front end status
-				$('#externalLinksReport').hide();
-				this.poll();
-			},
-			start: function() {
-				// initiate a new job
-				$('#ReportHolder').empty();
-				$('#ReportHolder').text('Running report 0%');
-				$('#ReportHolder').append('<span class="ss-ui-loading-icon"></span>');
-				$('#externalLinksReport').hide();
-				$.ajax({url: "admin/externallinks/start", async: false, timeout: 3000 });
-				this.poll();
-			},
-			poll: function() {
-				var self = this;
+  $.entwine('ss', function($) {
+    $('.external-links-report__create-report').entwine({
+      PollTimeout: null,
+      ButtonIsLoading: false,

-				$.ajax({
-					url: "admin/externallinks/getJobStatus",
-					async: true,
-					success: function(data) {
-						// No report, so let user create one
-						if (!data) {
-							$('#externalLinksReport').show();
-							return;
-						}
+      onclick: function(e) {
+        e.preventDefault();

-						// Parse data
-						var completed = data.Completed ? data.Completed : 0;
-						var total = data.Total ? data.Total : 0;
-						
-						// If complete status
-						if (data.Status === 'Completed') {
-							$('#ReportHolder').text('Report Finished ' + completed + '/' + total);
-							$('#externalLinksReport').show();
-							return;
-						}
-						
-						// If incomplete update status
-						if (completed < total) {
-							var percent = (completed / total) * 100;
-							$('#ReportHolder')
-								.text('Running report  ' + completed + '/' +  total + ' (' + percent.toFixed(2) + '%)')
-								.append('<span class="ss-ui-loading-icon"></span>');
-						}
+        this.buttonLoading();
+        this.start();
+      },

-						// Ensure the regular poll method is run
-						// kill any existing timeout
-						if(self.getPollTimeout() !== null) {
-							clearTimeout(self.getPollTimeout());
-						}
+      onmatch: function() {
+        // poll the current job and update the front end status
+        this.poll();
+      },

-						self.setPollTimeout(setTimeout(function() { $('#externalLinksReport').poll(); }, 1000));
-					},
-					error: function(e) {
-						if(typeof console !== 'undefined') console.log(e);
-					}
-				});
-			}
-		});
-	});
+      start: function() {
+        // initiate a new job
+        $('.external-links-report__report-progress')
+          .empty()
+          .text('Running report 0%');
+
+        $.ajax({
+          url: "admin/externallinks/start",
+          async: true,
+          timeout: 3000
+        });
+
+        this.poll();
+      },
+
+      /**
+       * Get the "create report" button selector
+       *
+       * @return {Object}
+       */
+      getButton: function() {
+        return $('.external-links-report__create-report');
+      },
+
+      /**
+       * Sets the button into a loading state. See LeftAndMain.js.
+       */
+      buttonLoading: function() {
+        if (this.getButtonIsLoading()) {
+          return;
+        }
+        this.setButtonIsLoading(true);
+
+        var $button = this.getButton();
+
+        // set button to "submitting" state
+        $button.addClass('btn--loading loading');
+
+        if ($button.is('button')) {
+          $button.append($(
+            '<div class="btn__loading-icon">'+
+              '<span class="btn__circle btn__circle--1" />'+
+              '<span class="btn__circle btn__circle--2" />'+
+              '<span class="btn__circle btn__circle--3" />'+
+            '</div>'));
+
+          $button.css($button.outerWidth() + 'px');
+        }
+      },
+
+      /**
+       * Reset the button back to its original state after loading. See LeftAndMain.js.
+       */
+      buttonReset: function() {
+        this.setButtonIsLoading(false);
+
+        var $button = this.getButton();
+
+        $button.removeClass('btn--loading loading');
+        $button.find('.btn__loading-icon').remove();
+        $button.css('width', 'auto');
+      },
+
+      poll: function() {
+        var self = this;
+        this.buttonLoading();
+
+        $.ajax({
+          url: "admin/externallinks/getJobStatus",
+          async: true,
+          success: function(data) {
+            // No report, so let user create one
+            if (!data) {
+              this.buttonReset();
+              return;
+            }
+
+            // Parse data
+            var completed = data.Completed ? data.Completed : 0;
+            var total = data.Total ? data.Total : 0;
+
+            // If complete status
+            if (data.Status === 'Completed') {
+              $('.external-links-report__report-progress')
+                .text('Report finished ' + completed + '/' + total);
+
+              self.buttonReset();
+              return;
+            }
+
+            // If incomplete update status
+            if (completed < total) {
+              var percent = (completed / total) * 100;
+              $('.external-links-report__report-progress')
+                .text('Running report  ' + completed + '/' +  total + ' (' + percent.toFixed(2) + '%)');
+            }
+
+            // Ensure the regular poll method is run
+            // kill any existing timeout
+            if (self.getPollTimeout() !== null) {
+              clearTimeout(self.getPollTimeout());
+            }
+
+            self.setPollTimeout(setTimeout(function() {
+              $('.external-links-report__create-report').poll();
+            }, 1000));
+          },
+          error: function(e) {
+            if (typeof console !== 'undefined') {
+              console.log(e);
+            }
+          }
+        });
+      }
+    });
+  });
 }(jQuery));
--- a/src/Controllers/CMSExternalLinksController.php
+++ b/src/Controllers/CMSExternalLinksController.php
@ -3,6 +3,7 @@
 namespace SilverStripe\ExternalLinks\Controllers;

 use SilverStripe\Control\HTTP;
+use SilverStripe\Core\Convert;
 use SilverStripe\ExternalLinks\Model\BrokenExternalPageTrackStatus;
 use SilverStripe\ExternalLinks\Jobs\CheckExternalLinksJob;
 use SilverStripe\ExternalLinks\Tasks\CheckExternalLinksTask;
@ -35,7 +36,7 @@ class CMSExternalLinksController extends Controller
        // Format status
        $track = BrokenExternalPageTrackStatus::get_latest();
        if ($track) {
-            return json_encode([
+            return Convert::array2json([
                'TrackID' => $track->ID,
                'Status' => $track->Status,
                'Completed' => $track->getCompletedPages(),
--- a/src/Reports/BrokenExternalLinksReport.php
+++ b/src/Reports/BrokenExternalLinksReport.php
@ -2,11 +2,11 @@

 namespace SilverStripe\ExternalLinks\Reports;

-use SilverStripe\ORM\ArrayList;
-use SilverStripe\ExternalLinks\Model\BrokenExternalPageTrackStatus;
 use SilverStripe\Core\Convert;
-use SilverStripe\View\HTML;
+use SilverStripe\ExternalLinks\Model\BrokenExternalPageTrackStatus;
 use SilverStripe\Forms\LiteralField;
+use SilverStripe\Forms\FormAction;
+use SilverStripe\ORM\ArrayList;
 use SilverStripe\Reports\Report;
 use SilverStripe\View\Requirements;

@ -78,25 +78,20 @@ class BrokenExternalLinksReport extends Report

    public function getCMSFields()
    {
+        Requirements::css('silverstripe/externallinks: css/BrokenExternalLinksReport.css');
        Requirements::javascript('silverstripe/externallinks: javascript/BrokenExternalLinksReport.js');
+
        $fields = parent::getCMSFields();

-        $reportResultSpan = '</ br></ br><h3 id="ReportHolder"></h3>';
+        $runReportButton = FormAction::create('createReport', _t(__CLASS__ . '.RUNREPORT', 'Create new report'))
+            ->addExtraClass('btn-primary external-links-report__create-report')
+            ->setUseButtonTag(true);
+        $fields->push($runReportButton);
+
+        $reportResultSpan = '<p class="external-links-report__report-progress"></p>';
        $reportResult = LiteralField::create('ResultTitle', $reportResultSpan);
        $fields->push($reportResult);

-        $button = HTML::createTag(
-            'button',
-            [
-                'id' => 'externalLinksReport',
-                'type' => 'button',
-                'class' => 'btn btn-primary'
-            ],
-            _t(__CLASS__ . '.RUNREPORT', 'Create new report')
-        );
-        $runReportButton = LiteralField::create('runReport', $button);
-        $fields->push($runReportButton);
-
        return $fields;
    }
 }
--- a/src/Tasks/CurlLinkChecker.php
+++ b/src/Tasks/CurlLinkChecker.php
@ -14,7 +14,7 @@ class CurlLinkChecker implements LinkChecker
    /**
     * Return cache
     *
-     * @return Zend_Cache_Frontend
+     * @return CacheInterface
     */
    protected function getCache()
    {
@ -36,7 +36,7 @@ class CurlLinkChecker implements LinkChecker

        // Check if we have a cached result
        $cacheKey = md5($href);
-        $result = $this->getCache()->get($cacheKey);
+        $result = $this->getCache()->get($cacheKey, false);
        if ($result !== false) {
            return $result;
        }
@ -51,7 +51,7 @@ class CurlLinkChecker implements LinkChecker
        curl_close($handle);

        // Cache result
-        $this->getCache()->set($httpCode, $cacheKey);
+        $this->getCache()->set($cacheKey, $httpCode);
        return $httpCode;
    }
 }