add initial scaffolding for disabling select options (#2903)

add initial scaffolding for disabling select options

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
 

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) });
 });

apps/dashboard/app/javascript/stylesheets/scripts.scss

@@ -16,3 +16,7 @@
 .edit-group {}
 .edit-field {}
 .real-field {}
+
+.text-strike {
+  text-decoration: line-through;
+}

apps/dashboard/app/views/scripts/editable_form_fields/_editable_select.html.erb

@@ -0,0 +1,35 @@
+<%-
+  field_id = "#{form.object_name}_#{attrib.id}"
+-%>
+
+<div class="editable-form-field">
+  <%=  create_widget(form, attrib, format: format) %>
+
+  <div class="d-none edit-group">
+
+    <ol class="list-group text-center col-md-4 mb-3">
+      <%- attrib.select_choices.each do |select_data| %>
+      <%- 
+        choice = parse_select_data(select_data)
+      -%>
+
+      <li class="list-group-item">
+
+        <button class="btn btn-info float-left" data-select-toggler="add" type="button" disabled>
+          <%= t('dashboard.add') %>
+        </button>
+
+        <%= choice %>
+
+        <button class="btn btn-warning float-right" data-select-toggler="remove" type="button">
+          <%= t('dashboard.remove') %>
+        </button>
+
+      </li>
+      <%- end -%>
+    </ol>
+
+  </div>
+
+  <%= render(partial: 'scripts/editable_form_fields/edit_field_buttons',  locals: { field_id: field_id }) %>
+</div>