diff --git a/apps/dashboard/app/helpers/scripts_helper.rb b/apps/dashboard/app/helpers/scripts_helper.rb index 5b30b2f0c1..75825c2311 100644 --- a/apps/dashboard/app/helpers/scripts_helper.rb +++ b/apps/dashboard/app/helpers/scripts_helper.rb @@ -9,9 +9,23 @@ def create_editable_widget(form, attrib, format: nil) case widget when 'number_field' - render(partial: 'scripts/editable_form_fields/editable_number', locals: locals) + render(partial: editable_partial('editable_number'), locals: locals) + when 'select' + render(partial: editable_partial('editable_select'), locals: locals) else - render(partial: 'scripts/editable_form_fields/generic', locals: locals) + render(partial: editable_partial('generic'), locals: locals) + end + end + + def editable_partial(partial) + "scripts/editable_form_fields/#{partial}" + end + + def parse_select_data(select_data) + if select_data.is_a?(Array) + select_data.first + else + select_data end end diff --git a/apps/dashboard/app/javascript/packs/script_edit.js b/apps/dashboard/app/javascript/packs/script_edit.js index 164da50f35..b0ee273bfc 100644 --- a/apps/dashboard/app/javascript/packs/script_edit.js +++ b/apps/dashboard/app/javascript/packs/script_edit.js @@ -122,6 +122,22 @@ function addInProgressField(event) { entireDiv.remove(); } +function enableOrDisableSelectOption(event) { + const toggleAction = event.target.dataset.selectToggler; + const li = event.target.parentElement; + event.target.disabled = true; + + if(toggleAction == 'add') { + li.classList.remove('list-group-item-danger', 'text-strike'); + const removeButton = $(li).find('[data-select-toggler="remove"]')[0]; + removeButton.disabled = false; + } else { + li.classList.add('list-group-item-danger', 'text-strike'); + const addButton = $(li).find('[data-select-toggler="add"]')[0]; + addButton.disabled = false; + } +} + jQuery(() => { newFieldTemplate = $('#new_field_template'); $('#add_new_field_button').on('click', (event) => { addNewField(event) }); @@ -134,4 +150,7 @@ jQuery(() => { .find('.editable-form-field') .find('.btn-primary') .on('click', (event) => { showEditField(event) }); + + $('[data-select-toggler]') + .on('click', (event) => { enableOrDisableSelectOption(event) }); }); diff --git a/apps/dashboard/app/javascript/stylesheets/scripts.scss b/apps/dashboard/app/javascript/stylesheets/scripts.scss index 0ef9102ff1..0c4d1ffa74 100644 --- a/apps/dashboard/app/javascript/stylesheets/scripts.scss +++ b/apps/dashboard/app/javascript/stylesheets/scripts.scss @@ -16,3 +16,7 @@ .edit-group {} .edit-field {} .real-field {} + +.text-strike { + text-decoration: line-through; +} \ No newline at end of file diff --git a/apps/dashboard/app/views/scripts/editable_form_fields/_editable_select.html.erb b/apps/dashboard/app/views/scripts/editable_form_fields/_editable_select.html.erb new file mode 100644 index 0000000000..9f5e8d8db7 --- /dev/null +++ b/apps/dashboard/app/views/scripts/editable_form_fields/_editable_select.html.erb @@ -0,0 +1,35 @@ +<%- + field_id = "#{form.object_name}_#{attrib.id}" +-%> + +
+ <%= create_widget(form, attrib, format: format) %> + +
+ +
    + <%- attrib.select_choices.each do |select_data| %> + <%- + choice = parse_select_data(select_data) + -%> + +
  1. + + + + <%= choice %> + + + +
  2. + <%- end -%> +
+ +
+ + <%= render(partial: 'scripts/editable_form_fields/edit_field_buttons', locals: { field_id: field_id }) %> +