Home > Mobile >  How can show the drop down value against the enum value
How can show the drop down value against the enum value

Time:09-16

status is a drop down having values (new, started, completed) if it’s a feature or (new, started and resolved) if it’s a bug. I don't know how can i do this

Model

Class Task
  enum typeOf: %i[feature bug]
  enum status_is: %i[New started completed resolved]
end

erb.html

<%= form_for :task, url: project_tasks_path, :html => {:multipart => true, :cla

   <%= f.hidden_field :project %>
   Title: <%=f.text_field :title, class:"form-control" %><br>
   Description: <%=f.text_field :description, class:"form-control" %><br>
   <label for="deadline">Deadline</label><input type="datetime-local" id="deadline"
                                         name="deadline" ><br>
   Screen Shot: <%=f.file_field :screen_shot, multiple: true, class:"form-control" %>
   <div class="field">
     <%= f.label :typeOf, class:"form-control" %><br />
     <%= f.select(:typeOf, Task.typeOfs.keys.map {|role| [role.titleize,role]}) %>
   </div>

   <div class="field">
     <%= f.label :status_is, class:"form-control" %><br />
     <%= f.select(:status_is, Task.status_is.keys.map {|role| [role.titleize,role]}) %>
   </div>
   <%= f.submit "Add" %>

<%end %>

CodePudding user response:

I would go with two separate select boxes, each with the expected cases:

   <div class="field" data-target="bug">
     <%= f.label :status_is, class:"form-control" %><br />
     <%= f.select(:status_is, (Task.status_is.keys - ['completed']).map {|role| [role.titleize,role]}) %>
   </div>

   <div class="field" data-target="feature">
     <%= f.label :status_is, class:"form-control" %><br />
     <%= f.select(:status_is, (Task.status_is.keys - ['resolved']).map {|role| [role.titleize,role]}) %>
   </div>

And then you use a sprinkle of javascript to toggle them in/out:

function toggleSelects() {
  var value = $('#task_typeOf')[0].value;

  $('[data-target=bug]').toggle(value === 'bug');
  $('[data-target=bug] select').attr('disable', value !== 'bug');

  $('[data-target=feature]').toggle(value === 'feature');
  $('[data-target=feature] select').attr('disable', value !== 'feature');
}

// execute every time the type of task is changed
$('#task_typeOf').on('change', () => toggleSelects());

// also execute at document load
$(toggleSelects);

Of course you can use different strategies or wrappers to hide the fields and disable the selects, but you have to do both (a hidden select will be submitted anyways).

  • Related