[#369] refactoring an autocomplete form

app/views/platforms/mass_builds/new.html.slim

@@ -42,17 +42,20 @@
                 = arch.name
 
         - if @platform.personal?
-          = render 'autocomplete_form',
+          = render 'shared/autocomplete_form',
                    field:       :ExtraRepositories,
-                   placeholder: 'uxteam_personal'
+                   placeholder: 'uxteam_personal',
+                   ctrl_as:     'newMassBuildCtrl'
 
-        = render 'autocomplete_form',
+        = render 'shared/autocomplete_form',
                  field:       :ExtraMassBuilds,
-                 placeholder: '1000'
+                 placeholder: '1000',
+                 ctrl_as:     'newMassBuildCtrl'
 
-        = render 'autocomplete_form',
+        = render 'shared/autocomplete_form',
                  field:       :ExtraBuildLists,
-                 placeholder: '1000000'
+                 placeholder: '1000000',
+                 ctrl_as:     'newMassBuildCtrl'
 
         h3= t('activerecord.attributes.build_list.preferences')
 

app/views/projects/build_lists/new_build/_autocomplete_form.html.slim

@@ -1,44 +0,0 @@
-- modal_id   = "#{field}Modal"
-- field_name = field.to_s.underscore
-- var_name   = field_name.singularize
-- func_name  = field.to_s.singularize
-- title      = t "activerecord.attributes.build_list.#{field_name}"
-
-div[ ng-hide = "#{field == :ExtraRepositories ? "newBuildCtrl.is_build_for_main_platform" : ''}" ]
-  h4
-    = title
-    a<[ class='fa fa-question-circle' href='#' data-toggle='modal' data-target="##{modal_id}" ]
-
-    .modal.fade[ id=modal_id tabindex='-1' role='dialog'
-                 aria-labelledby="#{modal_id}Label" aria-hidden='true' ]
-      .modal-dialog
-        .modal-content
-          .modal-header
-            button[ class='close' type='button' data-dismiss='modal' ]
-              span[ aria-hidden='true' ] &times;
-              span.sr-only Close
-            h4.modal-title[ id=modal_id ]= title
-          .modal-body== render "shared/autocomplete_docs/#{field_name}"
-  .row
-    .col-md-8
-      input[ class = 'form-control'
-        type                = 'text'
-        ng-model            = "newBuildCtrl.selected_#{var_name}"
-        placeholder         = placeholder
-        typeahead           = "extra.label for extra in newBuildCtrl.get#{field}($viewValue)"
-        typeahead-on-select = "newBuildCtrl.select#{func_name}($item, $model, $label)" ]
-    .col-md-4
-      button[ class='btn btn-default' type='button'
-              ng-click="newBuildCtrl.add#{func_name}()" ]
-        = t('layout.add')
-
-  table.table.offset5
-    tr[ ng-repeat="el in newBuildCtrl.#{field_name}" ]
-      td
-        a[ ng-href='{{ el.path }}' ] {{ el.label }}
-      td
-        a[ class='fa fa-times-circle text-danger' href=''
-           ng-click="newBuildCtrl.remove#{func_name}(el.id)" ]
-        input[ name="build_list[#{field_name}][]" type='hidden'
-               ng-model='el.id' ng-value='el.id' ]
-

app/views/projects/build_lists/new_build/_new_form.html.haml

@@ -32,13 +32,16 @@
       - selected = params[:build_list].try(:[], :update_type) ? {selected: params[:build_list][:update_type]} : {}
       = f.select :update_type, BuildList::UPDATE_TYPES, selected, class: 'form-control boffset20'
 
-      = render 'projects/build_lists/new_build/autocomplete_form',
-               field:       :ExtraRepositories,
-               placeholder: 'uxteam_personal'
+      %div{ 'ng-hide' => 'newBuildCtrl.is_build_for_main_platform' }
+        = render 'shared/autocomplete_form',
+                 field:       :ExtraRepositories,
+                 placeholder: 'uxteam_personal',
+                 ctrl_as:     'newBuildCtrl'
 
-      = render 'projects/build_lists/new_build/autocomplete_form',
+      = render 'shared/autocomplete_form',
                field:       :ExtraBuildLists,
-               placeholder: '1000000'
+               placeholder: '1000000',
+               ctrl_as:     'newBuildCtrl'
 
       = render 'projects/build_lists/new_build/extra_params_and_preferences',
                params: params,

app/views/shared/_autocomplete_form.html.haml

@@ -1,27 +0,0 @@
--#
-  Variables:
-    subject
-    field
-    field_class
-    autocomplete_path
-    placeholder
-    default_values (optional)
-
-- default_values ||= []
-- subject_class = subject.class.name.underscore
-
-%h4
-  = t "activerecord.attributes.build_list.#{field}"
-  - modal_id = "#{field}Modal"
-  %a.fa.fa-question-circle{ href: '#', 'data-toggle' => 'modal', 'data-target' => "##{modal_id}" }
-
-  .modal.fade{ id: modal_id, tabindex: '-1', role: 'dialog',
-               'aria-labelledby' => "#{modal_id}Label", 'aria-hidden' => 'true' }
-    .modal-dialog
-      .modal-content
-        .modal-header
-          %button.close{ type: 'button', 'data-dismiss' => 'modal' }
-            %span{ 'aria-hidden' => 'true' } ×
-            %span.sr-only Close
-          %h4.modal-titleLabel{ id: modal_id }= t "activerecord.attributes.build_list.#{field}"
-        .modal-body= render "shared/autocomplete_docs/#{field}"

app/views/shared/_autocomplete_form.html.slim

@@ -1,9 +1,15 @@
+/
+  Variables:
+    field
+    placeholder
+    ctrl_as       angularjs controllerAs
+
 - modal_id   = "#{field}Modal"
 - field_name = field.to_s.underscore
 - var_name   = field_name.singularize
 - func_name  = field.to_s.singularize
 - title      = t "activerecord.attributes.build_list.#{field_name}"
-
+- ctrl_as    = "#{ctrl_as}."
 
 h4
   = title
@@ -23,22 +29,21 @@ h4
   .col-md-8
     input[ class = 'form-control'
       type                = 'text'
-      ng-model            = "newMassBuildCtrl.selected_#{var_name}"
+      ng-model            = "#{ctrl_as}selected_#{var_name}"
       placeholder         = placeholder
-      typeahead           = "extra.label for extra in newMassBuildCtrl.get#{field}($viewValue)"
-      typeahead-on-select = "newMassBuildCtrl.select#{func_name}($item, $model, $label)" ]
+      typeahead           = "extra.label for extra in #{ctrl_as}get#{field}($viewValue)"
+      typeahead-on-select = "#{ctrl_as}select#{func_name}($item, $model, $label)" ]
   .col-md-4
     button[ class='btn btn-default' type='button'
-            ng-click="newMassBuildCtrl.add#{func_name}()" ]
+            ng-click="#{ctrl_as}add#{func_name}()" ]
       = t('layout.add')
 
 table.table.offset5
-  tr[ ng-repeat="el in newMassBuildCtrl.#{field_name}" ]
+  tr[ ng-repeat="el in #{ctrl_as}#{field_name}" ]
     td
       a[ ng-href='{{ el.path }}' ] {{ el.label }}
     td
       a[ class='fa fa-times-circle text-danger' href=''
-         ng-click="newMassBuildCtrl.remove#{func_name}(el.id)" ]
+         ng-click="#{ctrl_as}remove#{func_name}(el.id)" ]
       input[ name="mass_build[#{field_name}][]" type='hidden'
              ng-model='el.id' ng-value='el.id' ]
-