para 0.11.4 → 0.12.0

data/app/controllers/para/admin/resources_controller.rb

@@ -25,10 +25,10 @@ module Para
 
         if resource.save
           flash_message(:success, resource)
-          redirect_to after_form_submit_path
+          redirect_to after_form_submit_path, status: 303
         else
           flash_message(:error, resource)
-          render 'new'
+          render 'new', status: 422
         end
       end
 
@@ -39,17 +39,17 @@ module Para
       def update
         if resource.update(resource_params)
           flash_message(:success, resource)
-          redirect_to after_form_submit_path
+          redirect_to after_form_submit_path, status: 303
         else
           flash_message(:error, resource)
-          render 'edit'
+          render 'edit', status: 422
         end
       end
 
       def destroy
         resource.destroy
         flash_message(:success, resource)
-        redirect_to after_form_submit_path
+        redirect_to after_form_submit_path, status: 303
       end
 
       def order
@@ -86,7 +86,12 @@ module Para
           host_redirect_params.merge(
             action: 'edit',
             id: resource.id,
-            anchor: current_anchor
+            # The `anchor` doesn't work with javascript's `fetch` async requests so we
+            # can't redirect an XHR request to an anchor, we need to pass it as an
+            # explicit param.
+            # See : https://github.com/hotwired/turbo/issues/211
+            _current_anchor: params[:_current_anchor].presence,
+            return_to: params[:return_to].presence
           )
         elsif params[:_save_and_add_another]
           host_redirect_params.merge(
@@ -160,12 +165,12 @@ module Para
       end
 
       def self.ensure_resource_name_defined!
-        unless resource_name.presence
-          raise 'Resource not defined in your controller. ' \
-                'You can define the resource of your controller with the ' \
-                '`resource :resource_name` macro when subclassing ' \
-                'Para::Admin::ResourcesController'
-        end
+        return if resource_name.presence
+
+        raise 'Resource not defined in your controller. ' \
+              'You can define the resource of your controller with the ' \
+              '`resource :resource_name` macro when subclassing ' \
+              'Para::Admin::ResourcesController'
       end
 
       def resources_data
@@ -182,12 +187,6 @@ module Para
           end
         end
       end
-
-      def current_anchor
-        @current_anchor ||= if (current_anchor = params[:_current_anchor]).presence
-                              current_anchor.gsub(/^\#/, '')
-                            end
-      end
     end
   end
 end

data/app/controllers/para/admin/settings_component_controller.rb

@@ -10,13 +10,13 @@ module Para
         form.settings_attributes = settings_params[:settings_attributes]
         form.save
         flash_message(:success, form)
-        redirect_to admin_settings_path(@component)
+        redirect_to admin_settings_path(@component), status: 303
       end
 
       private
 
       def settings_params
-        params.require(:resource).permit(settings_attributes: [:key, :_type, :value])
+        params.require(:resource).permit(settings_attributes: %i[key _type value])
       end
     end
   end

data/app/helpers/para/admin/base_helper.rb

@@ -5,10 +5,10 @@ module Para
 
       def find_partial_for(relation, partial, partial_dir: 'admin/resources')
         relation_class = if model?(relation.class)
-          relation = relation.class
-        elsif model?(relation)
-          relation
-        end
+                           relation = relation.class
+                         elsif model?(relation)
+                           relation
+                         end
 
         relation_name = find_relation_name_for(
           plural_file_path_for(relation), partial,
@@ -17,9 +17,9 @@ module Para
         )
 
         if relation_name
-          "admin/#{ relation_name }/#{ partial }"
+          "admin/#{relation_name}/#{partial}"
         else
-          "para/#{ partial_dir }/#{ partial }"
+          "para/#{partial_dir}/#{partial}"
         end
       end
 
@@ -40,7 +40,7 @@ module Para
 
       def template_path_lookup(*paths)
         path = paths.find { |path| lookup_context.find_all(path).any? }
-        path&.gsub(/\/_([^\/]+)\z/, '/\1')
+        path&.gsub(%r{/_([^/]+)\z}, '/\1')
       end
 
       def resource_title_for(resource)
@@ -56,26 +56,37 @@ module Para
       def registered_components_options
         Para::Component.registered_components.keys.map do |identifier|
           [
-            t("para.component.#{ identifier }.name", default: identifier.to_s.humanize),
+            t("para.component.#{identifier}.name", default: identifier.to_s.humanize),
             identifier
           ]
         end
       end
 
-      def flash_message(type, resource = nil)
-        key = "#{ flash_shared_key }.#{ params[:action] }.#{ type }"
-
-        translation = if resource
-          ::I18n.t(key, model: resource.class.model_name.human)
-        else
-          ::I18n.t(key)
-        end
-
-        flash[type] = translation
-      end
-
-      def flash_shared_key
-        'para.flash.shared'
+      def flash_message(type, resource = nil, now: false)
+        flash_shared_key = 'para.flash.shared'
+        key_suffix = "#{params[:action]}.#{type}"
+
+        shared_key = "#{flash_shared_key}.#{key_suffix}"
+
+        shared_translation =
+          if resource
+            ::I18n.t(shared_key, model: resource.class.model_name.human)
+          else
+            ::I18n.t(shared_key)
+          end
+
+        translation =
+          if resource
+            ::I18n.t(
+              "para.flash.#{resource.class.base_class.model_name.i18n_key}.#{key_suffix}",
+              default: shared_translation
+            )
+          else
+            shared_translation
+          end
+
+        flash_receiver = now ? flash.now : flash
+        flash_receiver[type] = translation
       end
 
       private
@@ -88,10 +99,10 @@ module Para
         object.respond_to?(:model_name)
       end
 
-      def partial_exists?(relation, partial, overrides_root: 'admin', **options)
+      def partial_exists?(relation, partial, overrides_root: 'admin', **_options)
         partial_path = partial.to_s.split('/')
-        partial_path[-1] = "_#{ partial_path.last }"
-        lookup_context.find_all("#{ overrides_root }/#{relation}/#{ partial_path.join('/') }").any?
+        partial_path[-1] = "_#{partial_path.last}"
+        lookup_context.find_all("#{overrides_root}/#{relation}/#{partial_path.join('/')}").any?
       end
     end
   end

data/app/helpers/para/admin/page_helper.rb

@@ -4,10 +4,9 @@ module Para
       def page_top_bar(options = {})
         top_bar = content_tag(:div, class: 'page-title row') do
           content_tag(:h1, options[:title]) +
-
-          if (actions = actions_for(options[:type]))
-            actions.map(&method(:build_action)).join('').html_safe
-          end
+            if (actions = actions_for(options[:type]))
+              actions.map(&method(:build_action)).join('').html_safe
+            end
         end
 
         # Return both top bar and component navigation to be displayed at the top of the
@@ -17,7 +16,7 @@ module Para
 
       def build_action(action)
         link_options = action.fetch(:link_options, {})
-        link_options[:class] ||= "btn btn-default btn-shadow"
+        link_options[:class] ||= 'btn btn-default btn-shadow btn-sm'
 
         content_tag(:div, class: 'actions-control pull-right') do
           link_to(action[:url], link_options) do
@@ -49,10 +48,10 @@ module Para
         partial_target = parent_component.try(:model_type) || parent_component
 
         render partial: find_partial_for(partial_target, :navigation),
-                locals: {
-                  parent_component: parent_component,
-                  active_component: @component
-                }
+               locals: {
+                 parent_component: parent_component,
+                 active_component: @component
+               }
       end
     end
   end

data/app/helpers/para/flash_helper.rb

@@ -1,34 +1,13 @@
 module Para
   module FlashHelper
-    def display_admin_flash
-      # Render empty string if no flash
-      return "" if flash.empty?
-
-      # Make a div.alert for each message and join the whole
-      messages = flash.map do |type, message|
-        flash.delete(type)
-        type = homogenize_flash_type(type)
-
-        icon = content_tag(:div, class: "alert-icon-container pull-left") do
-          content_tag(:i, "", class: "fa #{ icon_class_for(type) }") +
-          ' '.html_safe
-        end
-
-        alert(type: type) do
-          icon + content_tag(:p, message.html_safe)
-        end
-      end
-
-      # Join the messages and make sure markup is correctly displayed
-      messages.join.html_safe
+    def flash_partial_path
+      template_path_lookup('admin/shared/_flash', 'para/admin/shared/_flash')
     end
 
-    private
-
     # Converts flash types to :success or :error to conform to what
     # twitter bootstrap can handle
     #
-    def homogenize_flash_type type
+    def homogenize_flash_type(type)
       case type.to_sym
       when :notice then :success
       when :alert then :warning
@@ -37,11 +16,11 @@ module Para
       end
     end
 
-    def icon_class_for type
+    def icon_class_for(type)
       case type
-      when :success then "fa-check"
-      when :error then "fa-warning"
-      else "fa-exclamation-triangle"
+      when :success then 'fa-check'
+      when :error then 'fa-warning'
+      else 'fa-exclamation-triangle'
       end
     end
   end

data/app/helpers/para/model_helper.rb

@@ -46,15 +46,12 @@ module Para
     end
 
     def excerpt_value_for(value)
-      return value unless value.kind_of?(String)
+      return value unless value.is_a?(String)
 
-      value = sanitize(value, tags: [])
-
-      if (truncated = value[0..100]) != value
-        "#{ truncated }..."
-      else
-        value
-      end
+      truncate(
+        sanitize(value, tags: []),
+        length: 100
+      )
     end
   end
 end

data/app/helpers/para/tree_helper.rb

@@ -19,7 +19,7 @@ module Para
         ),
         class: 'btn btn-sm btn-icon-primary btn-shadow hint--left',
         aria: {
-          label: ::I18n.t('para.shared.edit')  
+          label: ::I18n.t('para.shared.edit')
         }
       ) do
         content_tag(:i, '', class: 'fa fa-pencil')
@@ -29,13 +29,13 @@ module Para
     def delete_button(resource)
       link_to(
         component.relation_path(resource),
-        method: :delete,
         data: {
-          confirm: ::I18n.t('para.list.delete_confirmation')
+          'turbo-method': :delete,
+          'turbo-confirm': ::I18n.t('para.list.delete_confirmation')
         },
         class: 'btn btn-sm btn-icon-danger btn-shadow hint--left',
         aria: {
-          label: ::I18n.t('para.shared.destroy')  
+          label: ::I18n.t('para.shared.destroy')
         }
       ) do
         content_tag(:i, '', class: 'fa fa-times')

data/app/javascripts/para/admin/async-progress.js

@@ -0,0 +1,58 @@
+var ref,
+  boundMethodCheck = function(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new Error('Bound instance method accessed before binding'); } };
+
+ref = Para.AsyncProgress = class AsyncProgress extends Vertebra.View {
+  initialize(options) {
+    this.trackProgress = this.trackProgress.bind(this);
+    this.onTrackingDataReceived = this.onTrackingDataReceived.bind(this);
+    this.onJobError = this.onJobError.bind(this);
+    
+    this.targetUrl = options.progressUrl || this.$el.data('async-progress-url');
+    this.$progressBar = this.$el.find('.progress-bar');
+    return this.trackProgress();
+  }
+
+  trackProgress() {
+    boundMethodCheck(this, ref);
+    return $.get(this.targetUrl).done(this.onTrackingDataReceived).fail(this.onJobError);
+  }
+
+  stop() {
+    return clearTimeout(this.progressTimeout);
+  }
+
+  onTrackingDataReceived(data) {
+    boundMethodCheck(this, ref);
+    if (data.status === 'completed') {
+      return this.completed();
+    } else {
+      return this.setProgress(data.progress);
+    }
+  }
+
+  setProgress(progress) {
+    this.$progressBar.css({
+      width: `${progress}%`
+    });
+    this.progressTimeout = setTimeout(this.trackProgress, 1500);
+    return this.trigger('progress');
+  }
+
+  completed() {
+    this.$progressBar.css({
+      width: "100%"
+    });
+    this.$progressBar.removeClass('progress-bar-striped').addClass('progress-bar-success');
+    return this.trigger('completed');
+  }
+
+  onJobError() {
+    boundMethodCheck(this, ref);
+    this.$progressBar.css({
+      width: "100%"
+    });
+    this.$progressBar.removeClass('progress-bar-striped').addClass('progress-bar-error');
+    return this.trigger('failed');
+  }
+
+};

data/app/javascripts/para/admin/filters-form.js

@@ -0,0 +1,12 @@
+function initializeFiltersFormSubmit() {
+  setTimeout(function() {   
+    document.querySelectorAll('[data-filters-form]').forEach(function(form) {
+      $(form).on("change", "input, select, textarea", function() {
+        form.requestSubmit();
+      });
+    });
+  }, 0);
+}
+
+document.documentElement.addEventListener('turbo:load', initializeFiltersFormSubmit);
+document.documentElement.addEventListener('turbo:frame-load', initializeFiltersFormSubmit);

data/app/javascripts/para/admin/job-tracker.js

@@ -0,0 +1,33 @@
+function trackProgressFor(element, jobStatusUrl) {
+  var progressBar = element.querySelector('[data-async-progress]');
+  if (!progressBar) return;
+  
+  var progress = new Para.AsyncProgress({ el: progressBar, progressUrl: jobStatusUrl });
+
+  function handleComplete() {
+    $(element).modal('hide');
+
+    var parentFrame = element.parentNode;
+    
+    parentFrame.addEventListener('turbo:frame-render', function() {
+      parentFrame.dispatchEvent(new Event('job:progress:complete'));
+    });
+
+    parentFrame.src = jobStatusUrl;
+
+  };
+
+  progress.on('completed', handleComplete);
+  progress.on('failed', handleComplete);
+}
+
+document.documentElement.addEventListener('turbo:frame-load', function(e) {
+  if (e.target.id != 'para_admin_modal') return;
+
+  loadedElement = e.target.childNodes[0];
+
+  var jobStatusUrl = loadedElement && loadedElement.dataset.jobStatusUrl;
+  if (!jobStatusUrl) return;
+
+  trackProgressFor(loadedElement, jobStatusUrl);
+});

data/app/javascripts/para/admin/table.js

@@ -0,0 +1,58 @@
+import { PATCH, fetch } from "../lib/fetch";
+
+Para.ResourceTable = class ResourceTable {
+  constructor($table) {
+    this.$table = $table;
+    this.$tbody = this.$table.find('tbody');
+    this.initializeOrderable();
+  }
+
+  initializeOrderable() {
+    this.orderable = this.$table.hasClass('orderable');
+    if (!this.orderable) {
+      return;
+    }
+    this.orderUrl = this.$table.data('order-url');
+    return this.$tbody.sortable({
+      handle: '.order-anchor',
+      draggable: 'tr',
+      ghostClass: 'sortable-placeholder',
+      onUpdate: $.proxy(this.sortUpdate, this)
+    });
+  }
+
+  sortUpdate() {
+    this.$tbody.find('tr').each(function(i, el) {
+      return $(el).find('.resource-position-field').val(i);
+    });
+    return this.updateOrder();
+  }
+
+  updateOrder() {
+    fetch(this.orderUrl, {
+      method: PATCH,
+      body: this.buildOrderedData()
+    });
+  }
+
+  buildOrderedData() {
+    const data = new FormData();
+
+    this.$tbody.find('.resource-position-field').each((i, el) => {
+      const $field = $(el);
+      const resourceKey = `resources[${i}]`;
+
+      data.append(`${resourceKey}[id]`, $field.closest('.order-anchor').data('id'));
+      data.append(`${resourceKey}[position]`, $field.val());  
+    });
+
+    return data;
+  }
+};
+
+// TODO: Add flash message to display ordering success
+$(document).on('turbo:load turbo:frame-load', function() {
+  return $('.para-component-relation-table').each(function(i, el) {
+    return new Para.ResourceTable($(el));
+  });
+});

data/app/javascripts/para/admin/tabs.js

@@ -0,0 +1,110 @@
+  // Tabs hash management adapted from SO answer :
+  //   http://stackoverflow.com/a/21443271/685925
+
+var ref,
+  boundMethodCheck = function(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new Error('Bound instance method accessed before binding'); } };
+
+ref = Para.Tabs = (function() {
+  class Tabs extends Vertebra.View {
+    initialize(options = {}) {
+      this.onTabShown = this.onTabShown.bind(this);
+      
+      this.$anchorInput = options.$anchorInput;
+      this.showActiveTab();
+      this.refreshTabsErrors();
+      return this.initializeAffix();
+    }
+
+    showActiveTab() {
+      var hash, ref1;
+      if ((hash = location.hash || ((ref1 = this.$anchorInput) != null ? ref1.val() : void 0))) {
+        return this.findTab(hash).tab('show');
+      }
+    }
+
+    onTabShown(e) {
+      var $tab, tabHash;
+      boundMethodCheck(this, ref);
+      $tab = $(e.target);
+      if (!$tab.closest('[data-form-tabs]').is('[data-top-level-tabs]')) {
+        return;
+      }
+      tabHash = $tab.attr('href');
+      history.pushState(null, null, tabHash);
+      return this.updateAnchorInput();
+    }
+
+    updateAnchorInput() {
+      if (this.$anchorInput.length) {
+        return this.$anchorInput.val(location.hash);
+      }
+    }
+
+    refreshTabsErrors() {
+      return this.$('[data-toggle="tab"]').each((i, tab) => {
+        return this.refreshTabErrors($(tab));
+      });
+    }
+
+    refreshTabErrors($tab) {
+      var $panel;
+      $panel = this.$($tab.attr('href'));
+      if ($panel.find('.has-error').length) {
+        return $tab.addClass('has-error');
+      }
+    }
+
+    
+    initializeAffix() {
+      var headerHeight, offsetTop, sidebarWidth;
+      if (!(this.$nav = this.$('[data-affix-header="tabs"]')).length) {
+        return;
+      }
+      headerHeight = $('[data-header]').outerHeight();
+      offsetTop = this.$nav.offset().top - headerHeight;
+      sidebarWidth = $('[data-admin-left-sidebar]').outerWidth();
+      this.$nav.affix({
+        offset: {
+          top: offsetTop
+        }
+      }).css({
+        top: headerHeight,
+        left: sidebarWidth
+      });
+      // Fix parent wrapper height to maintain the same scroll position when the
+      // nav tabs are fixed to top
+      return this.$nav.closest('[data-nav-tabs-wrapper]').height(this.$nav.outerHeight());
+    }
+
+    onFormInputUpdate(e) {
+      var $tab;
+      $tab = this.findTab($(e.currentTarget).attr('id'));
+      return this.refreshTabErrors($tab);
+    }
+
+    findTab(id) {
+      if (!(id.indexOf('#') >= 0)) {
+        id = `#${id}`;
+      }
+      return this.$('a[href="' + id + '"]');
+    }
+
+  };
+
+  Tabs.prototype.events = {
+    'shown.bs.tab a[data-toggle="tab"]': 'onTabShown',
+    'change .tab-pane': 'onFormInputUpdate'
+  };
+
+  return Tabs;
+
+}).call(this);
+
+$(document).on('turbo:load turbo:frame-load', function() {
+  return $('[data-form-tabs]').each(function(i, el) {
+    return new Para.Tabs({
+      el: el,
+      $anchorInput: $('[data-current-anchor]')
+    });
+  });
+});

data/app/javascripts/para/admin/theme_actions.js

@@ -0,0 +1,39 @@
+var responsive_sidebar_navigation, scrollToComponentSection;
+
+scrollToComponentSection = function($component, duration = 0) {
+  var headerHeight, sectionOffset;
+  sectionOffset = $component.closest('.component-section-item').offset().top + $('.navmenu').scrollTop();
+  headerHeight = $('.navmenu .navmenu-brand').outerHeight();
+  return $('.navmenu-nav').scrollTo(sectionOffset - headerHeight, {
+    duration: duration
+  });
+};
+
+responsive_sidebar_navigation = function() {
+  var $activeItem;
+  // Scroll to active element's section on page change
+  if (($activeItem = $('.component-item.active')).length) {
+    scrollToComponentSection($activeItem);
+  }
+  return $('.component-item').on('click', 'a', function(e) {
+    return scrollToComponentSection($(e.currentTarget), 150);
+  });
+};
+
+$(document).on('turbo:load turbo:frame-load', function() {
+  responsive_sidebar_navigation();
+  return $(".selectize-tags").selectize({
+    delimiter: ",",
+    persist: false,
+    create: function(input) {
+      return {
+        value: input,
+        text: input
+      };
+    }
+  });
+});
+
+$(window).resize(function() {
+  return responsive_sidebar_navigation();
+});