From 5242271b604b0a8cbf600a8ddbff6f9fbd85c438 Mon Sep 17 00:00:00 2001 From: JoKer Date: Wed, 21 Sep 2022 14:06:34 +0200 Subject: [PATCH 1/2] adds sortable option to select2 tags input field * it allows the user to sort the tags in the select2 field when a 'sortable' option is specified * it uses the sortable plugin from jquery-ui since it is included in activeadmin * it remove the sorting in `array_to_select_options` because it shouldn't change the original order --- app/assets/javascripts/activeadmin_addons/all.js | 7 +++++++ app/inputs/tags_input.rb | 1 + app/javascript/activeadmin_addons/inputs/tags.js | 9 +++++++++ .../support/input_helpers/select_helpers.rb | 2 +- package.json | 2 +- 5 files changed, 19 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/activeadmin_addons/all.js b/app/assets/javascripts/activeadmin_addons/all.js index 0846df99..95a859b3 100644 --- a/app/assets/javascripts/activeadmin_addons/all.js +++ b/app/assets/javascripts/activeadmin_addons/all.js @@ -457,6 +457,13 @@ $(el).on("select2:select", onItemAdded); $(el).on("select2:unselect", onItemRemoved); $(el).select2(selectOptions); + if ($(el).data("sortable")) addSorting(); + function addSorting() { + $(el).next().find("ul.select2-selection__rendered").sortable({ + containment: "parent", + update: fillHiddenInput + }); + } function getSelectedItems() { var choices = $(el).parent("li.input").find(".select2-selection__choice"); return $.map(choices, function(item) { diff --git a/app/inputs/tags_input.rb b/app/inputs/tags_input.rb index 470e1292..e0be753c 100644 --- a/app/inputs/tags_input.rb +++ b/app/inputs/tags_input.rb @@ -13,6 +13,7 @@ def load_control_attributes load_data_attr(:model, value: model_name) load_data_attr(:method, value: method) load_data_attr(:width, default: "80%") + load_data_attr(:sortable) if active_record_select? load_data_attr(:relation, value: true) diff --git a/app/javascript/activeadmin_addons/inputs/tags.js b/app/javascript/activeadmin_addons/inputs/tags.js index 09bf9d9b..7f12e2be 100644 --- a/app/javascript/activeadmin_addons/inputs/tags.js +++ b/app/javascript/activeadmin_addons/inputs/tags.js @@ -30,6 +30,15 @@ var initializer = function() { $(el).on('select2:unselect', onItemRemoved); $(el).select2(selectOptions); + if ($(el).data('sortable')) addSorting() + + function addSorting() { + $(el).next().find('ul.select2-selection__rendered').sortable({ + containment: 'parent', + update: fillHiddenInput + }) + } + function getSelectedItems() { var choices = $(el).parent('li.input').find('.select2-selection__choice'); return $.map(choices, function(item) { diff --git a/lib/activeadmin_addons/support/input_helpers/select_helpers.rb b/lib/activeadmin_addons/support/input_helpers/select_helpers.rb index c5c881eb..500a8a45 100644 --- a/lib/activeadmin_addons/support/input_helpers/select_helpers.rb +++ b/lib/activeadmin_addons/support/input_helpers/select_helpers.rb @@ -6,7 +6,7 @@ module SelectHelpers def array_to_select_options selected_values = input_value.is_a?(Array) ? input_value : input_value.to_s.split(",") array = collection.map(&:to_s) + selected_values - array.sort.map do |value| + array.map do |value| option = { id: value, text: value } option[:selected] = "selected" if selected_values.include?(value) option diff --git a/package.json b/package.json index 626e0f04..f779c27b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "activeadmin_addons", - "version": "1.0.0", + "version": "1.0.1", "description": "Set of addons to help with the activeadmin ui", "main": "src/all.js", "files": [ From 50b7efabef44af3298aeaf7e23c296d5781eecd0 Mon Sep 17 00:00:00 2001 From: JoKer Date: Thu, 22 Sep 2022 14:21:32 +0200 Subject: [PATCH 2/2] updates documentation --- docs/select2_tags.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/select2_tags.md b/docs/select2_tags.md index 1450f5b2..e4fdb88a 100644 --- a/docs/select2_tags.md +++ b/docs/select2_tags.md @@ -43,3 +43,4 @@ f.input :performer_ids, as: :tags, collection: Performer.all, display_name: :ful * `display_name`: **(optional)** You can pass an optional `display_name` to set the attribute (or method) to show results on the select. It **defaults to**: `name` * `value`: **(optional)** You can pass an optional `value` to set the attribute (or method) to use when an item is selected. It **defaults to**: `id` * `width`: **(optional)** You can set the select input width (px or %). +* `sortable`: **(optional)** It **defaults** to: `false`