fae-rails 2.1.0 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 64efa885d567372d041fc98081e6074e37adb03a
-  data.tar.gz: 9945edf6077be0c1ef698a593da299c422baeb60
+  metadata.gz: 627ef0b4fdd41a840e63ef13d5816702d67109e3
+  data.tar.gz: 2ee2bdb673debee82c40eb3064d44fdaf0143515
 SHA512:
-  metadata.gz: ab50aeecbc77980ccb20b73c742ef4043b74319b658a4e01f5a88432f538f95896e18bdf87cfdfee55331026d03283315e4b6ff1f1f8738274bc869a458f3bc9
-  data.tar.gz: 48c3aae1f2cde1deb1405161f4942328c417733bf2832bac73fc4ca6967d96c30a0a8dfe994121c19e14631bdaabad28f721c9d4be82bdb099343bfff04f1947
+  metadata.gz: 3b31bb1dce450aecd010f337e851fb895ef86c4ccbcc8983d77e7d594e72a28e457a9966d79f238963d8e45fcb32a539167cd2e29666d2c6fb8a7b908cf8e41b
+  data.tar.gz: 0d9775d7d639bc6fbe66ffbfb40ca5aaf1dccf99344c6160fbbdc6e2f7116e57f42bcc0da4b81345d7f504c2fa89fb206bc9235393f9913f14f3955fe6745e16

data/README.md

@@ -27,7 +27,7 @@ $ rails g fae:install
 
 ## Documentation
 
-For full documentation visit:  
+For full documentation visit:
 https://www.faecms.com/documentation
 
 ### Topics
@@ -57,6 +57,8 @@ https://www.faecms.com/documentation
 * [Change Tracker](docs/features/change_tracker.md)
 * [Slugger](docs/features/slugger.md)
 * [Disabling Environments](docs/features/disable_envs.md)
+* [Form Field Label & Helper Text Manager](docs/features/form_manager.md)
+* [Netlify Deploy Monitor](docs/features/netlify.md)
 
 
 ### Tutorials

data/app/assets/javascripts/fae/_deploy.js

@@ -0,0 +1,198 @@
+
+/* global Fae, modal, FCH */
+
+/**
+ * Fae deploy
+ * @namespace
+ */
+
+Fae.deploy = {
+
+  ready: function() {
+    if (!$('body').hasClass('deploy')) return false;
+    this.$deployButtons  = $('.js-run-deploy');
+    this.deployFinished  = true;
+    this.buttonsEnabled  = true;
+    this.pollTimeout     = null;
+    this.pollInterval    = 5000;
+    this.idleStates      = ['ready', 'error']
+
+    this.pollDeployStatus();
+    this.deployButtonListener();
+    this.documentFocusListener();
+    this.notifyIdle();
+    this.refreshDeploysListAndStatuses();
+  },
+
+  deployButtonListener: function() {
+    var _this = this;
+    _this.$deployButtons.click(function(e) {
+      e.preventDefault();
+      _this.disableButtons();
+      var deploy_hook_type = $(this).data('build-hook-type');
+      $.post( '/admin/deploy/deploy_site', { deploy_hook_type: deploy_hook_type }, function(data) {
+        // Netlify returns nothing for deploy hook posts
+      });
+    });
+  },
+
+  documentFocusListener: function() {
+    var _this = this;
+    document.addEventListener('visibilitychange', function(ev) {
+      if (document.visibilityState === 'visible') {
+        _this.pollDeployStatus();
+      } else if (document.visibilityState === 'hidden') {
+        _this.destroyPoll();
+      }
+    });
+  },
+
+  refreshDeploysListAndStatuses: function() {
+    var _this = this;
+    $.get('/admin/deploy/deploys_list', function (data) {
+      if (data) {
+        _this.drawTables(data);
+        _this.stateChecks(data);
+      }
+    });
+  },
+
+  pollDeployStatus: function() {
+    var _this = this;
+    function poll() {
+      _this.refreshDeploysListAndStatuses();
+      _this.pollTimeout = setTimeout(poll, _this.pollInterval);
+    }
+    poll();
+  },
+
+  destroyPoll: function() {
+    clearTimeout(this.pollTimeout);
+  },
+
+  notifyRunning: function() {
+    $('.deploying-heading').addClass('running');
+    $('#js-deploying-section').removeClass('hidden');
+  },
+
+  notifyIdle: function() {
+    $('.deploying-heading').removeClass('running');
+    $('#js-deploying-section').addClass('hidden');
+  },
+
+  enableButtons: function() {
+    var _this = this;
+    if (!_this.buttonsEnabled) {
+      _this.buttonsEnabled = true;
+      _this.$deployButtons.prop('disabled', false);
+    }
+  },
+
+  disableButtons: function() {
+    var _this = this;
+    if (_this.buttonsEnabled) {
+      _this.buttonsEnabled = false;
+      _this.$deployButtons.prop('disabled', true);
+    }
+  },
+
+  afterDeploy: function() {
+    var _this = this;
+    if (!_this.deployFinished) {
+      _this.notifyIdle();
+      _this.enableButtons();
+      _this.deployFinished = true;
+    }
+  },
+
+  drawTables: function(data) {
+    var _this = this;
+    var runningDeploys = _this.getRunningDeploys(data);
+    var pastDeploys = _this.getPastDeploys(data);
+    $('.js-deploys-list').find('tbody').find('tr').remove();
+    _this.injectTableDeployData(runningDeploys, $('.js-deploys-list.running').find('tbody'));
+    _this.injectTableDeployData(pastDeploys, $('.js-deploys-list.past').find('tbody'));
+    Fae.navigation.lockFooter();
+  },
+
+  getRunningDeploys: function(data) {
+    var _this = this;
+    return data.filter(function(deploy) {
+      return $.inArray(deploy.state, _this.idleStates) === -1;
+    });
+  },
+
+  getPastDeploys: function(data) {
+    var _this = this;
+    return data.filter(function(deploy) {
+      return $.inArray(deploy.state, _this.idleStates) !== -1;
+    });
+  },
+
+  injectTableDeployData: function(deploys, $tbody) {
+    var _this = this;
+    $.each(deploys, function(i, deploy) {
+      $tbody.append(
+        $('<tr>').append([
+          $('<td>').text(deploy.commit_ref !== null ? 'FINE dev update' : deploy.title),
+          $('<td>').text(moment(deploy.updated_at).format('MM/DD/YYYY h:mm a')),
+          $('<td>').text(_this.deployDuration(deploy)),
+          $('<td>').text(_this.deployEnvironment(deploy)),
+          $('<td>').html(_this.errorMsg(deploy)),
+        ])
+      );
+    });
+  },
+
+  stateChecks: function(data) {
+    var _this = this;
+    if (_this.deployIsRunning(data)) {
+      _this.notifyRunning();
+      _this.disableButtons();
+      _this.deployFinished = false;
+    } else {
+      _this.afterDeploy();
+    }
+  },
+
+  valCheck: function(val) {
+    if (val !== null) return val;
+  },
+
+  deployIsRunning: function(data) {
+    var _this = this;
+    var running = false;
+    $.each(data, function(i, deploy) {
+      if(_this.idleStates.indexOf(deploy.state) === -1) {
+        running = true;
+        return false;
+      }
+    });
+    return running;
+  },
+
+  deployDuration: function(deploy) {
+    if (deploy.deploy_time === null) {
+      return '–';
+    } else {
+      return moment.utc(parseInt(deploy.deploy_time)*1000).format('HH:mm:ss');
+    }
+  },
+
+  deployEnvironment: function(deploy) {
+    if (deploy.branch === 'master' || deploy.branch === 'main') {
+      return 'Production';
+    }
+    return deploy.branch.charAt(0).toUpperCase() + deploy.branch.slice(1);
+  },
+
+  errorMsg: function(deploy) {
+    if (deploy.error_message) {
+      var out = 'An error occurred. Please contact your ';
+      out += '<a href="/admin/help">FINE team</a>.'
+      return out;
+    }
+  }
+
+};
+

data/app/assets/javascripts/fae/_modals.js

@@ -6,8 +6,19 @@
  */
 Fae.modals = {
   ready: function() {
+    this.$body = $('body');
+    this.openClass = 'modal-open';
+    this.modalClass = 'MODAL_ID-modal-open';
+    this.showEvent = 'modal:show';
+    this.shownEvent = 'modal:shown';
+    this.closeEvent = 'modal:close';
+    this.closedEvent = 'modal:closed';
+    this.modalOpen = false;
+
     this.imageModals();
     this.markdownModalListener();
+
+    this.ajaxModalListener();
   },
 
   /**
@@ -56,5 +67,88 @@ Fae.modals = {
    */
   markdownModalListener: function() {
     FCH.$document.on('click', '.markdown-support', this.markdownModal);
+  },
+
+  /**
+   * load remote data, open modal view
+   * @see {@link modals.formModalListener}
+   * @has_test {features/form_helpers/fae_input_spec.rb}
+   */
+  openAjaxModal: function (remoteUrl, relatedTarget) {
+    var _this = this;
+
+    $.get(remoteUrl, function (data) {
+      //Open remote url content in modal window
+      $(data).modal({
+        minHeight: "75%",
+        minWidth: "75%",
+        overlayClose: true,
+        zIndex: 1100,
+        containerId: "fae-modal",
+        persist: true,
+        opacity: 70,
+        overlayCss: { backgroundColor: "#000" },
+        onOpen: function (dialog) {
+          // Fade in modal + show data
+          dialog.overlay.fadeIn();
+          dialog.container.fadeIn(function() {
+            var shownEvent = $.Event(_this.shownEvent, { dialog: dialog, relatedTarget: relatedTarget });
+            _this.$body.trigger(shownEvent);
+          });
+          dialog.data.show();
+
+          var modalClasses = [_this.createClassFromModalId(relatedTarget.attr('id')), _this.openClass].join(' ');
+
+          _this.modalOpen = true;
+          _this.$body.addClass(modalClasses);
+        },
+        onShow: function (dialog) {
+          var showEvent = $.Event(_this.showEvent, { dialog: dialog, relatedTarget: relatedTarget });
+          _this.$body.trigger(showEvent);
+
+          $(dialog.container).css('height', 'auto')
+        },
+        onClose: function (dialog) {
+          var closeEvent = $.Event(_this.closeEvent, { dialog: dialog, relatedTarget: relatedTarget });
+          _this.$body.trigger(closeEvent);
+
+          // Fade out modal and close
+          dialog.container.fadeOut();
+          dialog.overlay.fadeOut(function () {
+            $.modal.close(); // must call this!
+
+            var closedEvent = $.Event(_this.closedEvent, { dialog: dialog, relatedTarget: relatedTarget });
+            var modalClasses = [_this.createClassFromModalId(relatedTarget.attr('id')), _this.openClass].join(' ');
+
+            _this.modalOpen = false;
+            _this.$body.removeClass(modalClasses);
+            _this.$body.trigger(closedEvent);
+          });
+        }
+      });
+
+    });
+  },
+
+  /**
+   * Click event listener for ajax modal links triggering specific view within modal popup
+   * @fires {@link modals.ajaxModal}
+   * @has_test {features/form_helpers/fae_input_spec.rb}
+   */
+  ajaxModalListener: function () {
+    var _this = this;
+
+    FCH.$document.on('click', '.js-fae-modal', function (e) {
+      e.preventDefault();
+      var $this = $(this);
+      var url = $this.attr('href');
+      var id = $this.attr('id');
+
+      _this.openAjaxModal(url, $this)
+    });
+  },
+
+  createClassFromModalId: function(modalId) {
+    return this.modalClass.replace('MODAL_ID', modalId);
   }
 };

data/app/assets/javascripts/fae/application.js

@@ -46,6 +46,7 @@
 //= require fae/form/_cancel
 //= require fae/form/_ajax
 //= require fae/form/_filtering
+//= require fae/form/_form_manager
 //= require fae/form/fae_chosen
 //= require fae/form/fileinputer
 
@@ -57,6 +58,7 @@
 
 //= require fae/_modals
 //= require fae/_tables
+//= require fae/_deploy
 
 //= require fae
 

data/app/assets/javascripts/fae/form/_ajax.js

@@ -10,7 +10,6 @@ Fae.form.ajax = {
   init: function() {
     this.$addedit_form = $('.js-addedit-form, .js-index-addedit-form');
     this.$filter_form = $('.js-filter-form');
-    this.$nested_form = $('.nested-form');
 
     this.addEditLinks();
     this.addEditSubmission();
@@ -67,6 +66,8 @@ Fae.form.ajax = {
         $wrapper.find('.input.file').fileinputer();
       }
 
+      this.$nested_form = $('.nested-form');
+
       // Bind validation to nested form fields added by AJAX
       Fae.form.validator.bindValidationEvents(this.$nested_form);
 
@@ -80,6 +81,7 @@ Fae.form.ajax = {
       Fae.form.text.initHTML();
       Fae.form.checkbox.setCheckboxAsActive();
       Fae.form.select.init();
+      Fae.form.formManager.setupAllFields($wrapper.find('form'));
 
       // validate nested form fields on submit
       Fae.form.validator.formValidate(this.$nested_form);
@@ -297,7 +299,7 @@ Fae.form.ajax = {
    * @todo Clean this up, moving listeners into their respective component classes (select, checkbox, etc.)
    */
   htmlListeners: function() {
-    $('#js-main-content, .login-form > form')
+    $('#js-main-content, .login-form > form, #simplemodal-data')
 
       /**
        * For the delete button on file input

data/app/assets/javascripts/fae/form/_filtering.js

@@ -25,6 +25,7 @@ Fae.form.filtering = {
       }
 
       this.setFilterDropDowns();
+      this.setTextInputs();
       this.filterFormListeners();
       this.paginationListeners();
       this.sortingSetup();
@@ -87,6 +88,7 @@ Fae.form.filtering = {
       // update search param when form submits
       .on('submit', function(ev) {
         $('.js-reset-btn').show();
+        $('.js-reset-btn').removeClass('hidden');
         _this.updateFryrAndResetPaging('search', $('#filter_search').val());
         return false;
       })
@@ -117,6 +119,17 @@ Fae.form.filtering = {
         _this.updateFryrAndResetPaging(key, value);
 
         $('.js-reset-btn').show();
+        $('.js-reset-btn').removeClass('hidden');
+      })
+
+      // update hash when date inputs changed
+      .on('change', '.datepicker input', function() {
+        var key = $(this).attr('id').split('filter_')[1];
+        var value = $(this).val();
+        timer = setTimeout(function() {
+          _this.updateFryrAndResetPaging(key, value);
+          $('.js-reset-btn').show();
+        }, 500);
       });
   },
 
@@ -147,6 +160,27 @@ Fae.form.filtering = {
     $('.js-reset-btn').show();
   },
 
+  /**
+   * Sets filter dropdowns on page load based on Fryr params
+   */
+  setTextInputs: function() {
+    // Exit early if this.fry.params is blank
+    if ($.isEmptyObject(this.fry.params)) {
+      return;
+    }
+
+    // Loop through all available this.fry.params to find the select menu and the proper option
+    $.each(this.fry.params, function(key, value) {
+      var $input = $('.js-filter-form .table-filter-group.text-input #filter_' + key);
+
+      if($input.length) {
+        $input.val(decodeURIComponent(value));
+      }
+    });
+
+    $('.js-reset-btn').show();
+  },
+
   /**
    * Updates a Fryr param while reseting paging
    * Use for most cases of pushing a single params to Fryr, as paging will always reset in those cases

data/app/assets/javascripts/fae/form/_form.js

@@ -20,6 +20,7 @@ Fae.form = {
     this.ajax.init();
     this.filtering.init();
     this.slugger.init();
+    this.formManager.init();
 
     // input type=file customization
     // This doesn't work in IE. It's not worth figuring out why by this point. IE9 gets plain file uploader.