Dom structure to input type hidden

app/assets/stylesheets/content/_types_form_configuration.sass

@@ -1,5 +1,5 @@
 .type-form-conf-group,
-.type-form-conf-inactive-group
+#type-form-conf-inactive-group
   border-radius: 2px
   padding: 0px 4px 2px 4px
   margin-bottom: 20px
@@ -26,13 +26,15 @@
       text-transform: uppercase
       float: right
   .attributes
+    min-height: 29px
 
 .type-form-conf-group
   @include varprop(background, primary-color)
-.type-form-conf-inactive-group
+
+#type-form-conf-inactive-group
   background: $gray-dark
-  .attributes
-    min-height: 40px
+  .attribute-visibility
+    visibility: hidden
 
 .type-form-conf-attribute
   padding: 5px 4px 5px 0px
@@ -53,3 +55,6 @@
     float: right
     .delete-group:before
       color: $light-gray
+
+#type-form-conf-group-template
+  display: none

app/models/permitted_params.rb

@@ -621,6 +621,8 @@ class PermittedParams
           :is_default,
           :move_to],
         type: [
+          :attribute_groups,
+          :attribute_visibility,
           :name,
           :is_in_roadmap,
           :in_aggregation,

app/services/base_type_service.rb

@@ -38,8 +38,16 @@ class BaseTypeService
 
   def update(attributes)
     success = Type.transaction do
+      if attributes[:attribute_groups].present?
+        attributes[:attribute_groups] = JSON.parse(attributes[:attribute_groups])
+      end
+      if attributes[:attribute_visibility].present?
+        attributes[:attribute_visibility] = JSON.parse(attributes[:attribute_visibility])
+      end
+
       type.attributes = attributes
 
+      # TODO: What is this?
       set_date_attribute_visibility
       set_active_custom_fields
 

app/views/types/form/_form_configuration.html.erb

@@ -30,26 +30,42 @@ See doc/COPYRIGHT.rdoc for more details.
 <section class="form--section">
   <div class="grid-block wrap">
     <div class="grid-content small-12 large-6">
+      <% attributes = ::TypesHelper
+      .work_package_form_attributes(merge_date: true)
+      .reject { |name, attr|
+        # display all custom fields     don't display required fields without a default
+        not name =~ /custom_field_/ and (attr[:required] and not attr[:has_default])
+      }
+      keys = attributes.keys.sort_by do |name|
+        translated_attribute_name(name, attributes[name])
+      end %>
+
+      <%= f.hidden_field :attribute_groups, value: @type.attribute_groups.to_json %>
+      <%= f.hidden_field :attribute_visibility, value: @type.attribute_visibility.to_json %>
+
       <div id="types-form-configuration" ng-controller="TypesFormConfigurationCtrl">
         <p><%= I18n.t('text_form_configuration') %></p>
 
         <button class="button"><i class="button--icon icon-add"></i> Add Group</button>
         <button class="button"><i class="button--icon icon-undo"></i> Reset to defaults</button>
 
-        <div dragula="'groups'">
-
-          <% attributes = ::TypesHelper
-            .work_package_form_attributes(merge_date: true)
-            .reject { |name, attr|
-              # display all custom fields     don't display required fields without a default
-              not name =~ /custom_field_/ and (attr[:required] and not attr[:has_default])
-            }
-          keys = attributes.keys.sort_by do |name|
-            translated_attribute_name(name, attributes[name])
-          end %>
-          
+        <div id="type-form-conf-group-template" class="type-form-conf-group" data-key="">
+          <div class="group-head">
+            <span class="group-handle">&#xe0b5;</span>
+            <span class="group-name"></span>
+
+            <div class="attribute-visibility">
+              <%= I18n.t('label_always_visible') %>
+              <span class="delete-group icon icon-close"></span>
+            </div>
+          </div>
+          <div class="attributes" dragula='"attributes"'>
+          </div>
+        </div>
+
+        <div dragula='"groups"'>
           <% @type.attribute_groups.each do |group_name, group_attributes| %>
-            <div class="type-form-conf-group">
+            <div class="type-form-conf-group" data-key="<%= group_name %>">
               <div class="group-head">
                 <span class="group-handle">&#xe0b5;</span>
                 <span class="group-name"><%= group_name %></span>
@@ -59,7 +75,7 @@ See doc/COPYRIGHT.rdoc for more details.
                   <span class="delete-group icon icon-close"></span>
                 </div>
               </div>
-              <div class="attributes" dragula="'attributes'">
+              <div class="attributes" dragula='"attributes"'>
                 <% group_attributes.each do |name| %>
                   <% next if (
                     [ nil,
@@ -67,18 +83,19 @@ See doc/COPYRIGHT.rdoc for more details.
                       'visible' ].exclude?(attr_visibility(name, @type)) ||
                     attributes[name].nil?
                   ) %>
-                  <div class="type-form-conf-attribute">
+                  <div class="type-form-conf-attribute" data-key="<%= name %>">
                     <span class="attribute-handle">&#xe0b5;</span>
                     <span class="attribute-name">
                       <%= translated_attribute_name(name, attributes[name]) %>
                     </span>
 
                     <div class="attribute-visibility">
-                      <%= check_box_tag "type[attribute_visibility][#{name}]",
+                      <%= check_box_tag "",
                         'visible',
                         attr_visibility(name, @type) == 'visible',
                         id: "type_attribute_visibility_visible_#{name}",
-                        title: I18n.t('tooltip.attribute_visibility.visible') %>
+                        title: I18n.t('tooltip.attribute_visibility.visible'),
+                        'ng-click': "updateHiddenFields()" %>
                       <span class="delete-group icon icon-close"></span>
                     </div>
                   </div>
@@ -86,36 +103,35 @@ See doc/COPYRIGHT.rdoc for more details.
               </div>
             </div> <!-- END attribute group -->
           <% end %>
+        </div>
+        <div id="type-form-conf-inactive-group">
+          <div class="group-head">
+            <span class="group-name">Inactive attributes</span>
+            <span class="advice">(Drag attributes from here to activate them)</span>
+          </div>
+          <div class="attributes" dragula='"attributes"'>
+            <% keys.each do |name| %>
+              <% next if ([nil, 'default', 'visible'].include?(
+                  attr_visibility(name, @type))) %>
+              <div class="type-form-conf-attribute" data-key="<%= name %>">
+                <span class="attribute-handle">&#xe0b5;</span>
+                <span class="attribute-name">
+                  <%= translated_attribute_name(name, attributes[name]) %>
+                </span>
 
-          <div class="type-form-conf-inactive-group">
-            <div class="group-head">
-              <span class="group-name">Inactive attributes</span>
-              <span class="advice">(Drag attributes from here to activate them)</span>
-            </div>
-            <div class="attributes" dragula="'attributes'">
-              <% keys.each do |name| %>
-                <% next if ([nil, 'default', 'visible'].include?(
-                    attr_visibility(name, @type))) %>
-                <div class="type-form-conf-attribute">
-                  <span class="attribute-handle">&#xe0b5;</span>
-                  <span class="attribute-name">
-                    <%= translated_attribute_name(name, attributes[name]) %>
-                  </span>
-
-                  <div class="attribute-visibility hidden">
-                    <%= check_box_tag "type[attribute_visibility][#{name}]",
-                                      'visible',
-                                      attr_visibility(name, @type) == 'visible',
-                                      id: "type_attribute_visibility_visible_#{name}",
-                                      title: I18n.t('tooltip.attribute_visibility.visible') %>
-                    <span class="delete-group icon icon-close"></span>
-                  </div>
+                <div class="attribute-visibility">
+                  <%= check_box_tag "",
+                                    'visible',
+                                    attr_visibility(name, @type) == 'visible',
+                                    id: "type_attribute_visibility_visible_#{name}",
+                                    title: I18n.t('tooltip.attribute_visibility.visible'),
+                                    'ng-click': "updateHiddenFields()" %>
+                  <span class="delete-group icon icon-close"></span>
                 </div>
-              <% end %>
-            </div>
+              </div>
+            <% end %>
           </div>
-
-        </types-form-configuration> <!-- END type form configurator -->
+        </div><!-- END type form configurator -->
       </div>
     </div>
   </div>

frontend/app/components/types/form-configuration/types-form-configuraiton.controller.ts

@@ -28,19 +28,72 @@
 
 import {openprojectModule} from '../../../angular-modules';
 
-function typesFormConfigurationCtrl(I18n:op.I18n, dragulaService:any, $scope:any) {
+function typesFormConfigurationCtrl(dragulaService:any, $scope:any) {
   dragulaService.options($scope, 'groups', {
     moves: function (el:any, container:any, handle:any) {
       return handle.className === 'group-handle';
     }
-    // containment: element[0]
   });
 
   dragulaService.options($scope, 'attributes', {
     moves: function (el:any, container:any, handle:any) {
       return handle.className === 'attribute-handle';
     }
-    // containment: element
+  });
+
+  $scope.updateHiddenFields = (): void => {
+    let groups: HTMLElement[] = angular.element('.type-form-conf-group').not('#type-form-conf-group-template').toArray();
+    let newAttrGroups: Array<Array<(string | Array<string>)>> = [];
+    let newAttrVisibility: any = {};
+    let inputAttributeGroups: JQuery;
+    let inputAttributeVisibility: JQuery;
+
+    // Extract new grouping and visibility setup from DOM structure, starting
+    // with the active groups.
+    groups.forEach((group:HTMLElement) => {
+      let groupKey: string = angular.element(group).data('key');
+      let attributes: HTMLElement[] = angular.element('.type-form-conf-attribute', group).toArray();
+      let attrKeys: string[] = [];
+
+      attributes.forEach((attribute:HTMLElement) => {
+        let attr: JQuery = angular.element(attribute)
+        let key: string = attr.data('key')
+        attrKeys.push(key);
+        newAttrVisibility[key] = 'default';
+        if (angular.element('input[type=checkbox]', attr)) {
+          let checkbox: any = angular.element('input[type=checkbox]', attr)[0];
+          if (checkbox.checked) {
+            console.log(key, "is visible");
+            newAttrVisibility[key] = 'visible';
+          }
+        }
+      });
+
+      if (attrKeys.length > 0) {
+        newAttrGroups.push([groupKey, attrKeys]);
+      }
+    });
+
+    // Then get visibility states for inactive attributes.
+    let inactiveAttributes: HTMLElement[] = angular.element('#type-form-conf-inactive-group .type-form-conf-attribute').toArray();
+    inactiveAttributes.forEach((attr: HTMLElement) => {
+      let key: string = angular.element(attr).data('key');
+      newAttrVisibility[key] = 'hidden';
+    });
+
+    // Finally update hidden input fields
+    inputAttributeGroups = angular.element('input#type_attribute_groups').first();
+    inputAttributeVisibility = angular.element('input#type_attribute_visibility').first();
+
+    inputAttributeGroups.val(JSON.stringify(newAttrGroups));
+    inputAttributeVisibility.val(JSON.stringify(newAttrVisibility));
+  };
+
+  $scope.$on('groups.drop', function (e:any, el:any) {
+    $scope.updateHiddenFields();
+  });
+  $scope.$on('attributes.drop', function (e:any, el:any) {
+    $scope.updateHiddenFields();
   });
 };