active_scaffold_config_list 3.6.3 → 4.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 50364f3882bef87059e8b9355d09cd218d237f6a5a4932fd647117c655d64e11
-  data.tar.gz: e7bcab07d7f032be6174a2cd3ea8295cd1f6ec6a1742f0ad567bc1b4ec0cc950
+  metadata.gz: cd4aa6db1cf82232099715da904d5927b2b8a91d578745e58cdfac14fced1f8e
+  data.tar.gz: a789114e4b22710b30eb90df83a544f2861c188013f158e9aa51bb4edd468ee2
 SHA512:
-  metadata.gz: 114309cc4df41633688338ad1495ab848e056b1b8698a9f2046ed4bd76e54bb20a61850affec8c4cc46453e23c0d98a7119eac463a6c9d8e46b2847687be0f65
-  data.tar.gz: 94b48977865381533466595356b71cfe4c16b5aff4c4ae499a0d22c2a6480c57d6a206b66c3dcb2b61ad11d410f80c7e2aacc3928eec741a6e1b2e575ee3d523
+  metadata.gz: 3d8f89d0344fd9cef930a2b670bb5c2c77f42e80d3636b188cb4370cac1319097bc50b91e3cde4581f316b3414b0f04c8832f69dc30183deac8a3c33426a35c0
+  data.tar.gz: cc9420929d95e2503b7732816f8cdffaf5adfbb8a43f810fd59735b1c1670da125c20e46f5353de83ca5eb42824be83239144172bd13fa2fb4e51e3dbf4d11c3

data/README.md

@@ -16,12 +16,13 @@ Overview
 ========
 
 A plugin for Active Scaffold that provides the ability to choose the column to show in the scaffold list at run-time.
+Also, it adds the ability to define named views with other set of columns to choose between the default list view and
+the named views.
 
 You have the option of defining a default set of columns for the controller. For example:
 ```rb
 config.config_list.default_columns = [:name, :project, :amount]
 ```
-If this is not defined then active_scaffold_config.list.columns is used.
 
 This is useful when you want the option to look at a potentially large number of columns but be able to 
 easily reset back to something that fits on the screen without horizontal scrolling.
@@ -30,24 +31,127 @@ The available columns in the configure action are the columns defined in `list.c
 `config_list.default_columns` is not defined, then it will default to `list.columns`, and the users only will be able
 to remove some columns, they won't be able to add other columns.
 
-The configuration data will be saved on the session. It can be saved on the DB defining a method on the user model
-(the one returned by current_user method) to return a record for current controller, or empty record if user has no
-list configuration, and setting config_list to use that method.
+The configuration data will be saved in the session.
+
+## Named Views
+
+It's possible to define named views, with a set of columns, so users can switch between default view and other defined views. Adding a view is done with `add_view` method, and passing a name (symbol or string) and an array of columns:
 
 ```rb
-conf.config_list.save_to_user = :config_list_for
+conf.config_list.add_view :simple, [:number, :status]
 ```
 
-It can be changed globally for the app in `ActiveScaffold.defaults` in an initializer, such as:
+Although it's possible to use a block too, to change other view settings, such as label, sorting, security method and the partial used to render the list. If the label is set, it can be a string, or a symbol to be localized, and the name is used in the URL parameters. When using a block, the columns can be defined in the view instead of the `add_view` call:
 
 ```rb
-ActiveScaffold.defaults do |config|
-  config.config_list.save_to_user
+conf.config_list.add_view :simple do |view|
+  view.label = 'Number and Status'
+  view.columns = [:number, :status]
+  view.sorting = {number: :desc}
+  view.security_method = :simple_view_authorized?
+  view.view = 'compact_list'
+end
+```
+
+When `view` is set, the named view renders that partial instead of ActiveScaffold's default list partial. The custom partial can use the same assigns and helpers as the normal list.
+
+The columns defined in the view are not required to be in the `conf.list.columns`, so it's possible to add views including columns that are not available in the normal config list.
+
+Set `tooltip` to add a title to the view in the selector:
+
+```rb
+view.tooltip = 'PTO and HR policy'
+```
+
+The security method is a controller method used to check if the view is available for the user, it must return true when the view is allowed:
+
+```rb
+def simple_view_authorized?
+  current_user.is_admin?
 end
 ```
 
-The model storing list configuration must have a config_list text column storing the columns list, and config_list_sort
-serialized text column. For example:
+When a named view is selected, the configure action link is not rendered.
+
+The view selector is displayed in the title header, and it's rendered as a menu of links, displaying the selected view, and the list of available views on hover. The selector can be changed to a list of radio buttons or select field with `conf.config_list.named_views_selector`, per controller, or it can be changed globally in `ActiveScaffold.defaults`:
+
+```rb
+conf.config_list.named_views_selector = :radio  # use radio buttons
+conf.config_list.named_views_selector = :select # use select field
+conf.config_list.named_views_selector = :links  # use a menu of links (default)
+```
+
+A named view can be selected by default when the request does not contain `config_list_view`:
+
+```rb
+conf.config_list.default_view = 'Calendar'
+```
+
+An explicit empty `config_list_view` still selects the ordinary, unnamed list view. For a request-dependent default, set the parameter in a controller callback before ActiveScaffold processes the index action instead of using this static setting.
+
+The unnamed choice, shown as "Default" in the selector, is included unless `unnamed_view_security_method` is configured. It is the configurable list that uses saved/session columns or `config_list.default_columns`; it is separate from the named view selected by `default_view`. The method runs on the controller and must return true to include the unnamed choice. This controls selector visibility; applications must still enforce authorization for the underlying list action.
+
+```rb
+conf.config_list.unnamed_view_security_method = :unnamed_list_view_authorized?
+```
+
+The position of the views selector can be changed with `conf.config_list.named_views_position`, setting it to `:center` (default, between the title and actions), `:left` (next to the title) or `:right` (at the right of the actions). Although the position of the `div.config-list-views` doesn't change, it just adds a class (center, right or left) and use CSS of flexbox layout to change the position (changing `flex-grow` and `order`). It can be changed per controller or globally in `ActiveScaffold.defaults`:
+
+```rb
+conf.config_list.named_views_position = :center
+conf.config_list.named_views_position = :left
+conf.config_list.named_views_position = :right
+```
+
+The selector and configuration form expose their markup through ActiveScaffold's UI registry. Elements rendered with `as_element` have a default tag that applications may replace with `ActiveScaffold.set_element_tag`. Attribute-only entries are applied to tags produced by Rails helpers such as `form_tag`, `select_tag`, or `radio_button_tag`.
+
+Named-view selector elements:
+
+| UI element | Rendered control | Purpose |
+| --- | --- | --- |
+| `config_list_views` | `<div>` | Outer container when the selector is `:links`; it receives `config-list-views` and the configured position class. |
+| `config_list_views_form` | `<form>` attributes | Outer form when the selector is `:radio` or `:select`; use it for layout or behavior classes such as `no-autofocus`. |
+| `config_list_view_selected` | `<div>` | Currently selected view displayed by the links selector. |
+| `config_list_views_list` | `<ul>` | Dropdown list containing the links-selector choices. |
+| `config_list_view_item` | `<li>` | One links-selector choice; the current choice also receives `selected`. |
+| `config_list_view_link` | `<a>` attributes | Remote link that selects a view; its `title` contains the named-view tooltip. |
+| `config_list_view_select` | `<select>` attributes | Select control used by the `:select` selector. |
+| `config_list_view_option` | `<option>` attributes | One option in the select selector; its `title` contains the named-view tooltip. |
+| `config_list_view_label` | `<label>` | Label wrapping a radio and its text; its `title` contains the named-view tooltip. |
+| `config_list_view_radio` | `<input type="radio">` attributes | Radio control used by the `:radio` selector. |
+
+For example:
+
+```rb
+ActiveScaffold.add_element_attributes(:config_list_view_label, class: 'label text-sm')
+ActiveScaffold.add_element_attributes(:config_list_view_radio, class: 'radio radio-xs')
+ActiveScaffold.add_element_attributes(:config_list_view_link, class: 'link')
+ActiveScaffold.add_element_attributes(:config_list_view_select, class: 'select select-sm')
+ActiveScaffold.add_element_attributes(:config_list_views_form, class: 'no-autofocus')
+```
+
+Configuration-form elements:
+
+| UI element | Rendered control | Purpose |
+| --- | --- | --- |
+| `config_list_columns` | `<ul>` attributes | Checkbox-list container used to select and order visible columns. |
+| `config_list_column` | `<li>` attributes | One entry in the columns checkbox list; it receives `sortable`. |
+| `config_list_sorting` | `<ol>` | Container for the configurable sorting levels. |
+| `config_list_sorting_item` | `<li>` | One sorting level containing its column and direction controls. |
+| `config_list_sorting_column` | `<select>` attributes | Column selector for one sorting level; it receives `column`. |
+| `config_list_sorting_order` | `<select>` attributes | Ascending/descending selector for one sorting level; it receives `order`. |
+| `config_list_view_name` | `<input type="text">` attributes | Name field used to save or rename a view; core ActiveScaffold text-input attributes are also applied. |
+| `config_list_view_rename` | `<label>` | Rename option wrapper; it receives the `rename-view` class required by the JavaScript behavior. |
+| `config_list_view_rename_checkbox` | `<input type="checkbox">` attributes | Checkbox inside the rename option. |
+| `config_list_view_global` | `<label>` | Global-view option wrapper; it receives the `global-view` class required by the JavaScript behavior. |
+| `config_list_view_global_checkbox` | `<input type="checkbox">` attributes | Checkbox choosing whether a saved view is global. |
+
+## Saving to DB
+
+The configuration data can be saved on the DB. Define a model to store the list configuration, it must have a config_list
+text column storing the columns list, and config_list_sort serialized text column, a foreign key for the user and a column
+saving the controller name or ID. Also, if using saving named views feature, it must have a column to store the view name,
+and a column to store the slug if global views are enabled. For example:
 
 ```rb
 # == Schema Information
@@ -61,6 +165,8 @@ serialized text column. For example:
 #  updated_at          :datetime         not null
 #  controller_id       :string(255)
 #  user_id             :bigint
+#  view_name           :string
+#  slug                :string
 #
 # Indexes
 #
@@ -73,16 +179,125 @@ class ListConfiguration < ApplicationRecord
 end
 ```
 
-Then in the User model, define the association, and the method returning the config list for the requested controller.
-The method has 2 arguments, `controller_id` and `controller_name`, so only need to save one of them, depending if user
-configuration must be shared on different conditions for embedded controllers, and each parent for nested controllers,
-or save unique configurations. The `controller_id` argument will be different in embedded controllers, nested controllers
-and regular controllers, as it will use `active_scaffold_session_storage_key`, and the controller_name will be the same
-always.
+Then in your user model call `has_config_lists 'ModelName'` to define the `has_many` association to the model storing
+the list configuration. The method `has_config_lists` requires a model name, and a hash of options:
+
+* association_name: defaults to `list_configurations`
+* association_options: the options for the `has_many` association, for example, `dependent`, `as` if the model has a
+polymorphic association because it's used by different user models, foreign_key, and any other option accepted by
+`has_many`.
+* controller_column: the column storing the controller name or ID.
+* controller_matcher: :controller_id, :controller_name, or a proc. If you want to match the controller column with the
+controller name or controller ID (see below for the difference between controller name and ID).
+* view_name_column: the name for the column storing the view name (see Saving Named Views)
+* slug_column: the name of the column storing the slug for the view (see Global Views)
+
+```rb
+class User < ApplicationRecord
+  has_config_lists 'ListConfiguration', association_options: {dependent: :delete_all}
+end
+```
+
+Finally, set the setting `config_list.save_to_user` to `:config_list_for` in the controllers using config_list.
 
 ```rb
-class User < ActiveRecord::Base
-  has_many :list_configurations
+conf.config_list.save_to_user = :config_list_for
+```
+
+It can be changed globally for the app in `ActiveScaffold.defaults` in an initializer, such as:
+
+```rb
+ActiveScaffold.defaults do |config|
+  config.config_list.save_to_user = :config_list_for
+end
+```
+
+There are 2 ways to store the list configuration for a controller. Saving the controller name or the controller ID.
+If the user configuration must be shared on different conditions for embedded controllers, and each parent for nested
+controllers, or save unique configurations. The controller ID argument will be different in embedded controllers,
+nested controllers and regular controllers, as it will use `active_scaffold_session_storage_key`, and the controller
+name will always be the same.
+
+## Saving Named Views
+
+It's possible to save the list configuration with a name, and change between default view, named views defined in the
+config and user named views. Config list will have a field to set the name, when no name is set, it's saved as a normal
+config list, overriding the default view.
+
+When a user named view is selected, configure will open the form with that view's settings. If the name is changed, a
+checkbox will show up that allows renaming the current view. Submitting the form without checking that checkbox will
+create a new named view, and will rename the current view if the checkbox is selected. In this case, it isn't possible
+to override the default view, clearing the view's name won't be allowed.
+
+Also, when an user named view is selected, the config list form will have a delete link instead of the reset link.
+
+![screenshot](./images/config-named-view.png)
+
+Enabling this feature requires enabling saving views to the DB, with `conf.config_list.save_to_user`, as it will use
+the same method to get the named view, and set another method in `conf.config_list.named_views_method`. Both options
+can be set per controller, or globally in `ActiveScaffold.defaults`. Set `named_views_method` to `:config_list_views`.
+
+## Global Views
+
+It's possible to define global views, so they are available to all users. It's enabled with `conf.config_list.global_views`, and requires to use `save_to_user` and `named_views_method` too, as they work as saved named views.
+
+When configuring the list, a global view checkbox will show up when the view name is set, but the global checkbox can be
+changed only if a new view is going to be created (the name of the view is changed, and rename is unchecked). Otherwise,
+global view will be disabled, showing if the view is global or not, but can't be changed until the name is edited.
+
+The user association in ListConfiguration must be set as optional, as global views will be saved without the user
+foreign key.
+
+```rb
+class ListConfiguration < ApplicationRecord
+  belongs_to :user, optional: true
+  serialize :config_list_sorting, JSON
+end
+```
+
+These views require having a name, then when a name is typed, a global view checkbox will show up. It requires another
+column in the list configuration model, `slug`, as there may be a name collision, and it's hard to prevent, because
+it's weird to forbid creating a global view with a name, because some other user already used it for a private view.
+The slug will be built prefixing the view name with `user-` or `global-` by default.
+
+If you want to change how slugs are built globally, you can define a method in ApplicationController, and configure it
+with `conf.config_list.slug_builder` in `ActiveScaffold.defaults`. It's a global setting only, can't be set per controller.
+To customize slug builder in a controller, define `config_list_slug` in the controller. The `config_list_slug` method,
+and the slug builder method, will get the view name and global_view boolean, and must return the slug. It's called when
+saving a view. Changing how slugs are generated can break the default `config_list_for` method if the slug for user views
+doesn't start with `user-`.
+
+If you want to override a global view with a private view having the same name, so user don't see 2 options with the same
+name in the views selector, override `config_list_views` in your user model, after calling `has_config_lists`, and get
+uniq views by name:
+
+```rb
+def config_list_views(*)
+  super.uniq { |(name, _)| name }
+end
+```
+
+Also, it's possible to override it to change the name of the views, appending an indicator for user views or global views
+when the name is not unique.
+
+## Custom model methods
+
+It's possible to write custom code in the user model, instead of using `has_config_lists`. Although it's more
+complicated, especially if global views feature is enabled.
+
+Define the `has_many` association in the user model, and the method or methods configured in `save_to_user` and
+`named_views_method`.
+
+The method configured in `save_to_user` must return the record storing the list configuration for the requested
+controller. The method has 2 arguments, `controller_id` and `controller_name`, so only need to save one of them.
+
+```rb
+ActiveScaffold.defaults do |config|
+  config.config_list.save_to_user = :config_list_for
+end
+
+class User < ApplicationRecord
+  has_many :list_configurations, dependent: :delete_all
   def config_list_for(controller_id, controller_name)
     # Use controller_id to allow having different columns on different nested or embedded conditions
     list_configurations.where(controller_id: controller_id).first_or_initialize
@@ -91,3 +306,55 @@ class User < ActiveRecord::Base
   end
 end
 ```
+
+When `named_views_method` is set, the method in `save_to_user` must accept options with double splat (or keyword
+arguments `view_name` and `attributes`), and it's responsible to look for a named view for the user using view_name,
+and return a new model when none is found. Also, it's responsible to set the view_name from opts[:attributes] (or
+`attributes` keyword arg) in the right column. It can use the same model explained before. When selecting the default
+view, and saving it, the keyword arguments will be nil.
+
+```rb
+  def config_list_for(controller_id, controller_name, **opts)
+    list_configurations.where(controller_id: controller_name, view_name: opts[:view_name]).first_or_initialize.tap do |r|
+      r.view_name == opts[:attributes][:view_name] if opts[:attributes]
+    end
+  end
+```
+
+The method in `named_views_method` must return an array with the saved named views for the user, and each item will be an array with the label and name in URL parameter (for example, `view_name` and `slug` columns), or just a string to use for both label and name. This method will receive `controller_id` and `controller_name` arguments, just like the method in `save_to_user`.
+
+```rb
+ActiveScaffold.defaults do |config|
+  config.config_list.named_views_method = :config_list_views
+end
+
+class User < ApplicationRecord
+  def config_list_views(controller_id, controller_name)
+    list_configurations.where(controller_id: controller_name).where.not(view_name: nil).pluck(:view_name)
+  end
+end
+```
+
+When using global views, the method configured in `save_to_user` will get another keyword argument, `slug`, instead of `view_name`, and must use this one to find the view. The `attributes` keyword argument will have `slug` key and
+`view_name` key. When the provided slug is for a global view, and no view is found, it shouldn't set the user id, but
+when there is no slug, or the slug is for an user view, the user id should be set:
+
+```rb
+def config_list_for(controller_id, controller_name, slug: nil, attributes: nil)
+  query = list_configurations
+  query = ListConfiguration.where(user_id: nil).or(list_configurations) unless slug.to_s.start_with?('user-')
+  query.where(controller_id: controller_name, slug: slug).first_or_initialize.tap do |record|
+    record.attributes = attributes if attributes
+  end
+end
+```
+
+And the method configured in `named_views_method` should return the view name and the slug, so user see the view name, and slug is used in the URL:
+
+```rb
+def config_list_views(controller_id, controller_name)
+  list_configurations.or(ListConfiguration.where(user_id: nil)).where.not(slug: nil).pluck(:view_name, :slug)
+end
+```
+
+It's possible to user other column names than `view_name` and `slug`, just ensure the values are set from `attributes[:view_name]` and `attributes[:slug]`, and use the right column names in the queries.

data/app/assets/javascripts/active_scaffold_config_list.js

@@ -0,0 +1,41 @@
+jQuery(document).ready(function () {
+    jQuery(document).on('change', '.config-list-views[data-remote]', function () {
+        jQuery(this).closest('form').submit();
+    });
+    jQuery(document).on('ajax:success', '.config-list-views', function () {
+        var form = jQuery(this), link = form.parent().find('.actions [data-action="show_config_list"]'),
+            href = new URL(link.attr('href'), window.location.origin);
+        href.searchParams.set('config_list_view', form.find('select,input[checked]').val());
+        link.attr('href', href.toString());
+    });
+    jQuery(document).on('input', '.show_config_list-view [name="config_list_view_name"]', function () {
+        var field = jQuery(this),
+            rename = field.parent().find('.rename-view'),
+            global = field.parent().find('.global-view'),
+            global_hidden = global.find('input[type=hidden]'),
+            global_cb = global.find('input[type=checkbox]'),
+            rename_cb = rename.find('input[type=checkbox]');
+        if (field.val().trim()) global.show();
+        else global.hide();
+        if (field.val() !== field.attr('value')) {
+            rename.show();
+            global_hidden.prop('disabled', rename_cb.length ? !rename_cb.prop('checked') : true);
+            global_cb.prop('disabled', rename_cb.length ? rename_cb.prop('checked') : false);
+        } else {
+            rename.hide();
+            rename_cb.prop('checked', false);
+            global_hidden.prop('disabled', false);
+            global_cb.prop('disabled', true);
+            global_cb.prop('checked', global_hidden.val() === '1');
+        }
+    });
+    jQuery(document).on('change', '.show_config_list-view .rename-view input[type=checkbox]', function () {
+        var rename_cb = jQuery(this),
+            global = rename_cb.closest('.form-element').find('.global-view'),
+            global_hidden = global.find('input[type=hidden]'),
+            global_cb = global.find('input[type=checkbox]');
+        global_hidden.prop('disabled', !rename_cb.prop('checked'));
+        global_cb.prop('disabled', rename_cb.prop('checked'));
+        if (global_cb.prop('disabled')) global_cb.prop('checked', global_hidden.val() === '1');
+    });
+});

data/app/assets/stylesheets/active_scaffold_config_list.scss

@@ -0,0 +1,66 @@
+.active-scaffold-header {
+  display: flex;
+  justify-content: space-between;
+
+  > .actions {
+    order: 1;
+  }
+
+  > h2 {
+    flex-grow: 1;
+    &:has(~ .config-list-views.left) {
+      flex-grow: 0;
+    }
+  }
+
+  > .config-list-views {
+    &.left {
+      flex-grow: 1;
+      margin-left: 1em;
+    }
+    &.right {
+      order: 2
+    }
+    display: flex;
+    gap: 10px;
+
+    input[type=radio] {
+      margin-right: 5px;
+    }
+
+    &:has(.views) {
+      position: relative;
+      > .selected-view, a {
+        display: block;
+        padding: 8px 12px;
+        white-space: nowrap;
+        text-decoration: none;
+        color: #333;
+      }
+      .selected a {
+        color: #06c;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+
+      > .views {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        border: 1px solid #ccc;
+        display: none;
+        background: white;
+      }
+      &:hover {
+        > .views {
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 1;
+        }
+      }
+    }
+  }
+}

data/app/views/active_scaffold_overrides/_list.html.erb

@@ -0,0 +1 @@
+<%= render named_view&.view || :super %>

data/app/views/active_scaffold_overrides/_list_header.html.erb

@@ -0,0 +1,2 @@
+<%= render :super %>
+<%= render 'named_views' if config_list_named_views? %>

data/app/views/active_scaffold_overrides/_named_views.html.erb

@@ -0,0 +1,11 @@
+<% selector_class = "config-list-views #{active_scaffold_config.config_list.named_views_position}" %>
+<% if active_scaffold_config.config_list.named_views_selector == :links %>
+  <%= as_element :config_list_views, class: selector_class do %>
+    <%= active_scaffold_named_view_selector %>
+  <% end %>
+<% else %>
+  <% attributes = as_element_attributes(:config_list_views_form, class: selector_class, remote: true, method: :get) %>
+  <%= form_tag params_for(action: :index, config_list_view: nil), attributes do %>
+    <%= active_scaffold_named_view_selector %>
+  <% end %>
+<% end %>

data/app/views/active_scaffold_overrides/_show_config_list_form.html.erb

@@ -1,16 +1,14 @@
-<% url_options = params_for(action: :index, escape: false, config_list: nil) -%>
-<%=
-options = {id: element_form_id(action: :config_list),
-           class: "as_form config_list",
-           remote: request.xhr?,
-           method: :get,
-           'data-loading' => true}
-form_tag url_options, options %>
-  <h4><%= active_scaffold_config.config_list.label -%></h4>
-  <%= render 'show_config_list_form_body' %>
-  <p class="form-footer">
-    <%= submit_tag as_(:config_list), class: "submit" %>
-    <%= link_to as_(:reset), url_for(url_options.merge(config_list: '')), class: 'as_cancel', remote: true, data: {refresh: true} %>
-    <%= loading_indicator_tag(action: :config_list) %>
-  </p>
-</form>
+<% url_options = params_for(action: :config_list) -%>
+<%= render partial: 'base_form', locals: {form_action: :config_list,
+                                          method: :post,
+                                          url_options: url_options,
+                                          body_partial: 'show_config_list_form_body',
+                                          multipart: false,
+                                          persistent: false,
+                                          field_descriptions: :show,
+                                          cancel_link: true,
+                                          cancel_text: params[:config_list_view].present? ? :delete : :reset,
+                                          cancel_attrs: {data: {refresh: true, method: :post}},
+                                          cancel_url: url_for(url_options.merge(config_list: '')),
+                                          headline: active_scaffold_config.config_list.label} %>
+

data/app/views/active_scaffold_overrides/_show_config_list_form_body.html.erb

@@ -1,33 +1,69 @@
-<ol class="form">
+<%= as_element :fields_container, class: 'form' do %>
   <% if config_list_columns? %>
-  <li class="form-element">
-    <dl><dt><label><%= as_ :columns %></label></dt>
-    <dd>
-      <%= active_scaffold_check_all_buttons(nil, {}, ui_options: {}) if respond_to? :active_scaffold_check_all_buttons %>
-      <ul class="<%= active_scaffold_config.config_list.draggable ? 'checkbox-list draggable-lists' : 'sortable-container' %>" id="<%= element_form_id(action: :config_list) %>-columns">
-<% config_list_columns.each do |label, column| %>
-      <li class="sortable">
-        <%= check_box_tag 'config_list[]', column.to_s, (config_list_params.nil? ? true : config_list_params.include?(column)), {id: nil}%>
-        <label><%= label %></label>
-      </li>
-<% end %>
-    </ul></dd></dl>
-  </li>
+    <%= as_element :form_element, class: 'form-element' do %>
+      <%
+        columns_options = as_element_attributes(
+          :config_list_columns,
+          name: 'config_list',
+          id: "#{element_form_id(action: :config_list)}-columns",
+          class: ('sortable-container' unless active_scaffold_config.config_list.draggable)
+        ).to_h
+        content = active_scaffold_checkbox_list(
+          nil,
+          config_list_columns,
+          config_list_params || config_list_columns.map(&:last),
+          columns_options,
+          ui_options: {
+            draggable_lists: active_scaffold_config.config_list.draggable,
+            item_options: as_element_attributes(:config_list_column, class: 'sortable').to_h
+          }
+        )
+      %>
+      <%= form_attribute_html(nil, as_(:columns), content, nil, {}) %>
+    <% end %>
   <% end %>
+
   <% if config_list_sorting? %>
-  <li class="form-element">
-    <dl><dt><label><%= as_ :default_sorting %></label></dt>
-    <dd><ol>
-<%
-  columns_options = list_columns.select(&:sortable?).map { |c| [c.label, c.name] }
-  order_options = ['asc', 'desc'].map { |v| [as_(v), v] }
-  selected = config_list_sorting || []
-  3.times do |i|
-%>
-      <li><%= select_tag "config_list_sorting[#{i}][]", options_for_select(columns_options, selected: selected[i]&.first), include_blank: as_(:_select_), class: 'column' %>
-      <%= select_tag "config_list_sorting[#{i}][]", options_for_select(order_options, selected: selected[i]&.last), include_blank: as_(:_select_), class: 'order' %></li>
-<% end %>
-    </ol></dd></dl>
-  </li>
+    <%= as_element :form_element, class: 'form-element' do %>
+      <% content = capture do %>
+        <%= as_element :config_list_sorting do %>
+          <%
+            columns_options = list_columns.select(&:sortable?).map { |c| [c.label, c.name] }
+            order_options = ['asc', 'desc'].map { |v| [as_(v), v] }
+            selected = config_list_sorting || []
+            3.times do |i|
+          %>
+            <%= as_element :config_list_sorting_item do %>
+              <%= select_tag "config_list_sorting[#{i}][]", options_for_select(columns_options, selected: selected[i]&.first), as_element_attributes(:config_list_sorting_column, include_blank: as_(:_select_), class: 'column') %>
+              <%= select_tag "config_list_sorting[#{i}][]", options_for_select(order_options, selected: selected[i]&.last), as_element_attributes(:config_list_sorting_order, include_blank: as_(:_select_), class: 'order') %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+      <%= form_attribute_html(nil, as_(:default_sorting), content, nil, {}) %>
+    <% end %>
   <% end %>
-</ol>
+
+  <% if config_list_save_named_views? %>
+    <%= as_element :form_element, class: 'form-element' do %>
+      <% content = capture do %>
+        <% name_options = active_scaffold_input_text_options(required: @config_list_view_name.present?) %>
+        <%= text_field_tag "config_list_view_name", @config_list_view_name.to_s, as_element_attributes(:config_list_view_name, **name_options) %>
+        <% if @config_list_view_name.present? %>
+          <%= as_element :config_list_view_rename, class: 'rename-view', style: 'display: none;' do %>
+            <%= check_box_tag 'config_list_old_view_name', params[:config_list_view], false, **as_element_attributes(:config_list_view_rename_checkbox, id: nil).to_h %>
+            <%= as_ :rename_view, view_name: @config_list_view_name %>
+          <% end %>
+        <% end %>
+        <% if config_list_global_views? %>
+          <%= as_element :config_list_view_global, class: 'global-view', style: ('display: none;' if @config_list_view_name.blank?) do %>
+            <%= hidden_field_tag 'global_view', @global_view ? '1' : '' %>
+            <%= check_box_tag 'global_view', '1', @global_view, **as_element_attributes(:config_list_view_global_checkbox, id: nil, disabled: true).to_h %>
+            <%= as_ :global_view %>
+          <% end %>
+        <% end %>
+      <% end %>
+      <%= form_attribute_html(nil, as_(:view_name), content, nil, {}) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/active_scaffold_overrides/show_config_list_form.html.erb

@@ -2,4 +2,4 @@
   <div class="config_list-view view">
     <%= render 'show_config_list_form' -%>
   </div>
-</div>
+</div>

data/config/locales/de.yml

@@ -5,4 +5,8 @@ de:
     config_list_model: "Konfiguriere Spalten für %{model}"
     columns: Columns
     default_sorting: Default Sorting
+    default_view: Default
     desc: desc
+    global_view: Global view
+    rename_view: 'Rename the view "%{view_name}"'
+    view_name: View Name

data/config/locales/en.yml

@@ -5,4 +5,8 @@ en:
     config_list_model: "Configure Columns for %{model}"
     columns: Columns
     default_sorting: Default Sorting
+    default_view: Default
     desc: desc
+    global_view: Global view
+    rename_view: 'Rename the view "%{view_name}"'
+    view_name: View Name