ManageIQ/manageiq-ui-classic

- url = url_for_only_path(:action => 'prov_field_changed', :id => (@edit[:req_id] || 'new')) if @edit
- options = @options ? @options : @edit[:new]
- draw_fields = true
- counter = 1

%h3
  = label

- if @edit && !options[:readonly]
  .form-horizontal
    .form-group
      .col-md-2
      .col-md-8
        %button.btn.btn-primary.pull-right.add-additional-volume-button
          Add Volume
  %hr

.form-horizontal#add-volumes-form
  - while (draw_fields)
    .add-volume-fieldset
      - keys.each do |key|
        .form-group
          %label.col-md-4.control-label{:valign => "top"}
            = _(workflow.get_field(key, dialog)[:description])
            - if @edit && workflow.get_field(key, dialog)[:required] && workflow.get_field(key, dialog)[:display] == :edit
              *
            - if key == :size
              - if @record
                %span.pf-blue-info.pficon.pficon-info{:tabindex           => 0,
                                                      "data-trigger"      => "focus",
                                                      "data-placement"    => "top",
                                                      "data-toggle"       => "popover",
                                                      "data-content"      => @record.try(:decorate).try(:provisioning_volume_size_tooltip) ? @record.try(:decorate).try(:provisioning_volume_size_tooltip) : _("Default value is 1") }
          .col-md-6
            - if workflow.get_field(key, dialog)[:data_type] == :string
              - if @edit && workflow.get_field(key, dialog)[:display] == :edit && !@edit[:stamp_typ]
                %input.form-control{:type              => "text",
                                    :required          => workflow.get_field(key, dialog)[:required],
                                    :value             => options[:"#{key}_#{counter}"],
                                    :id                => "volumes__#{key}_#{counter}",
                                    :name              => "volumes__#{key}_#{counter}",
                                    "data-miq_observe" => {:interval => ".1", :url => url}.to_json}
              - else
                = options[:"#{key}_#{counter}"]
            - elsif workflow.get_field(key, dialog)[:data_type] == :boolean
              - isChecked = [nil, 'null'].exclude?(options[:"#{key}_#{counter}"])
              %input{:checked           => isChecked,
                     :type              => "checkbox",
                     :id                => "volumes__#{key}_#{counter}",
                     :required          => workflow.get_field(key, dialog)[:required],
                     :name              => "volumes__#{key}_#{counter}",
                     :disabled          => !(@edit && workflow.get_field(key, dialog)[:display] == :edit && !@edit[:stamp_typ]),
                     "data-miq_observe_checkbox" => {:url => url}.to_json}
          .col-md-2
      %hr
      %div
    - counter += 1
    - draw_fields = options.has_key?(:"name_#{counter}") || options.has_key?(:"size_#{counter}")

:javascript
  (function(){
      var button = $(".add-additional-volume-button");

      button.click(function() {
        var sourceNode = $(".add-volume-fieldset").first();
        var node = duplicateNode(sourceNode, ["id", "name"]);

        sourceNode.parent().append(node);
      });

      var counter = #{counter};
      function duplicateNode(sourceNode, attributesToBump) {
        var out = sourceNode.clone(true);
        var nodes = out.find('*');

        $.each(nodes, function (ix, node) {
          $.each(attributesToBump, function (ix, attr) {
            if (node.hasAttribute(attr)) {
              $(node).prop(attr, increment_attr($(node).prop(attr)));
            }
            // reset the observed flag so that the listener properly tracks
            // changes to this field
            $(node).data('isObserved', false);
          });
          node.value = '';
          node.checked = false;
        });

        function increment_attr(str) {
          str_pieces = str.split("_")
          str_pieces[str_pieces.length - 1] = counter;
          return str_pieces.join("_")
        }
        counter++;
        return out;
      }
      $('[data-toggle=popover]').popovers()
        .on('hidden.bs.popover', function (e) {
          $(e.target).data('bs.popover').inState.click = false;
        });
  })();