Display custom fields in parallel + autoscrolling

8 years ago · 1666b587da
parent ba9c0ce58f
commit 1666b587da
6 changed files with 118 additions and 31 deletions
--- a/app/models/type/attribute_groups.rb
+++ b/app/models/type/attribute_groups.rb
@ -102,8 +102,8 @@ module Type::AttributeGroups
  def default_attribute_groups
    values = work_package_attributes
             .keys
-             .reject { |key| key.start_with? 'custom_field_' }
-             .group_by { |key| default_group_map.fetch(key.to_sym, :details) }
+             .reject { |key| custom_field?(key) && !has_custom_field?(key) }
+             .group_by { |key| default_group_key(key.to_sym) }

    ordered = []
    default_groups.map do |groupkey, label_key|
@ -135,6 +135,16 @@ module Type::AttributeGroups
    }
  end

+  private
+
+  def default_group_key(key)
+    if custom_field?(key)
+      :other
+    else
+      default_group_map.fetch(key.to_sym, :details)
+    end
+  end
+
  ##
  # Collect active attributes from the current form configuration.
  # Using the available attributes from +work_package_attributes+,
--- a/app/models/type/attributes.rb
+++ b/app/models/type/attributes.rb
@ -105,7 +105,7 @@ module Type::Attributes
  end

  def custom_field?(attribute_name)
-    attribute_name.start_with? 'custom_field_'
+    attribute_name.to_s.start_with? 'custom_field_'
  end

  def attr_translate(name)
@ -152,6 +152,15 @@ module Type::Attributes
    constraint.nil? || constraint.call(self, project: project)
  end

+  ##
+  # Returns whether this type has the custom field currently
+  # (e.g. because it was checked in the removed CF view).
+  def has_custom_field?(attribute)
+    custom_field_ids.map { |id| "custom_field_#{id}" }.include? attribute
+  end
+
+  ##
+  # Returns whether the custom field is active in the given project.
  def custom_field_in_project?(attribute, project)
    project
      .work_package_custom_field_ids
--- a/app/views/types/form/_form_configuration.html.erb
+++ b/app/views/types/form/_form_configuration.html.erb
@ -30,30 +30,31 @@ See doc/COPYRIGHT.rdoc for more details.
 <% form_attributes = @type.form_configuration_groups %>

 <section class="form--section">
-  <div class="grid-block wrap">
-    <div class="grid-content small-12 large-6">
-
      <%= 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>
-
-        <%= toolbar title: '' do %>
-          <li class="toolbar-item">
-            <button type="button" class="form-configuration--reset button" ng-click="resetToDefault($event)">
-              <i class="button--icon icon-undo"></i>
-              <span class="button--text"><%= t('types.edit.reset') %></span>
-            </button>
-          </li>
-          <li class="toolbar-item">
-            <button type="button" class="form-configuration--add-group button -alt-highlight" ng-click="addGroup($event)">
-              <i class="button--icon icon-add"></i>
-              <span class="button--text"><%= t('types.edit.add_group') %></span>
-            </button>
-          </li>
-        <% end %>
-
+  <div id="types-form-configuration" op-drag-scroll ng-controller="TypesFormConfigurationCtrl">
+    <div class="grid-block wrap">
+      <div class="grid-content small-12 large-10">
+      <p><%= t('text_form_configuration') %></p>
+
+      <%= toolbar title: '' do %>
+        <li class="toolbar-item">
+          <button type="button" class="form-configuration--reset button" ng-click="resettodefault($event)">
+            <i class="button--icon icon-undo"></i>
+            <span class="button--text"><%= t('types.edit.reset') %></span>
+          </button>
+        </li>
+        <li class="toolbar-item">
+          <button type="button" class="form-configuration--add-group button -alt-highlight" ng-click="addgroup($event)">
+            <i class="button--icon icon-add"></i>
+            <span class="button--text"><%= t('types.edit.add_group') %></span>
+          </button>
+        </li>
+      <% end %>
+      </div>
+    </div>
+    <div class="grid-block wrap">
+      <div class="grid-content small-12 medium-6 large-5">
        <div id="type-form-conf-group-template" class="type-form-conf-group" data-original-key="" data-key="">
          <div class="group-head">
            <span class="group-handle">&#xe0b5;</span>
@ -63,14 +64,13 @@ See doc/COPYRIGHT.rdoc for more details.
              onvaluechange="groupNameChange">
            </group-edit-in-place>
            <div class="attribute-visibility">
-              <%= I18n.t('label_always_visible') %>
+              <%= t('label_always_visible') %>
              <span class="delete-group icon icon-close" ng-click="deleteGroup($event)"></span>
            </div>
          </div>
          <div class="attributes" dragula='"attributes"'>
          </div>
        </div>
-
        <div id="draggable-groups" dragula='"groups"'>
          <% form_attributes[:actives].each do |group, attributes| %>
            <div class="type-form-conf-group" data-original-key="<%= group %>" data-key="<%= group %>">
@ -83,7 +83,7 @@ See doc/COPYRIGHT.rdoc for more details.
                  <%= group %>
                </group-edit-in-place>
                <div class="attribute-visibility">
-                  <%= I18n.t('label_always_visible') %>
+                  <%= t('label_always_visible') %>
                  <span class="delete-group icon icon-close" ng-click="deleteGroup($event)"></span>
                </div>
              </div>
@ -102,7 +102,7 @@ See doc/COPYRIGHT.rdoc for more details.
                      <%= check_box_tag "",
                        'visible',
                        attribute[:always_visible],
-                        title: I18n.t('tooltip.attribute_visibility.visible'),
+                        title: t('tooltip.attribute_visibility.visible'),
                        'ng-click': "updateHiddenFields()" %>
                      <span class="delete-group icon icon-close" ng-click="deactivateAttribute($event)"></span>
                    </div>
@ -112,6 +112,8 @@ See doc/COPYRIGHT.rdoc for more details.
            </div> <!-- END attribute group -->
          <% end %>
        </div>
+      </div>
+      <div class="grid-content small-12 medium-6 large-5">
        <div id="type-form-conf-inactive-group">
          <div class="group-head">
            <span class="group-name"><%= t(:label_inactive) %></span>
@ -132,7 +134,7 @@ See doc/COPYRIGHT.rdoc for more details.
                  <%= check_box_tag "",
                                    'hidden',
                                    false,
-                                    title: I18n.t('tooltip.attribute_visibility.visible'),
+                                    title: t('tooltip.attribute_visibility.visible'),
                                    'ng-click': "updateHiddenFields()" %>
                  <span class="delete-group icon icon-close" ng-click="deactivateAttribute($event)"></span>
                </div>
--- a/frontend/app/components/types/form-configuration/types-form-configuration.controller.ts
+++ b/frontend/app/components/types/form-configuration/types-form-configuration.controller.ts
@ -27,13 +27,28 @@
 //++

 import {openprojectModule} from '../../../angular-modules';
+const autoScroll:any = require('dom-autoscroller');

 function typesFormConfigurationCtrl(
  dragulaService:any,
  NotificationsService:any,
  I18n:op.I18n,
  $scope:any,
+  $element:any,
  $compile:any) {
+
+  // Setup autoscroll
+  var scroll = autoScroll(window, {
+    margin: 20,
+    maxSpeed: 5,
+    scrollWhenOutside: true,
+    autoScroll: function(this:any) {
+      const groups = dragulaService.find($scope, 'groups').drake;
+      const attributes = dragulaService.find($scope, 'attributes').drake;
+      return this.down && (groups.dragging || attributes.dragging);
+    }
+  });
+
  dragulaService.options($scope, 'groups', {
    moves: function (el:any, container:any, handle:any) {
      return handle.className === 'group-handle';
--- a/frontend/npm-shrinkwrap.json
+++ b/frontend/npm-shrinkwrap.json
@ -219,6 +219,11 @@
      "from": "angular-ui-router@>=0.3.1 <0.4.0",
      "resolved": "https://registry.npmjs.org/angular-ui-router/-/angular-ui-router-0.3.2.tgz"
    },
+    "animation-frame-polyfill": {
+      "version": "1.0.1",
+      "from": "animation-frame-polyfill@>=1.0.0 <2.0.0",
+      "resolved": "https://registry.npmjs.org/animation-frame-polyfill/-/animation-frame-polyfill-1.0.1.tgz"
+    },
    "ansi-regex": {
      "version": "2.1.1",
      "from": "ansi-regex@>=2.0.0 <3.0.0",
@ -249,6 +254,11 @@
      "from": "arr-flatten@>=1.0.1 <2.0.0",
      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.0.1.tgz"
    },
+    "array-from": {
+      "version": "2.1.1",
+      "from": "array-from@>=2.1.1 <3.0.0",
+      "resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz"
+    },
    "array-slice": {
      "version": "0.2.3",
      "from": "array-slice@>=0.2.3 <0.3.0",
@ -651,6 +661,11 @@
      "from": "create-hmac@>=1.1.0 <2.0.0",
      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.4.tgz"
    },
+    "create-point-cb": {
+      "version": "1.2.0",
+      "from": "create-point-cb@>=1.0.0 <2.0.0",
+      "resolved": "https://registry.npmjs.org/create-point-cb/-/create-point-cb-1.2.0.tgz"
+    },
    "crossvent": {
      "version": "1.5.5",
      "from": "crossvent@>=1.5.4 <2.0.0",
@ -723,11 +738,31 @@
      "from": "diffie-hellman@>=5.0.0 <6.0.0",
      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.2.tgz"
    },
+    "dom-autoscroller": {
+      "version": "2.2.8",
+      "from": "dom-autoscroller@latest",
+      "resolved": "https://registry.npmjs.org/dom-autoscroller/-/dom-autoscroller-2.2.8.tgz"
+    },
+    "dom-mousemove-dispatcher": {
+      "version": "1.0.1",
+      "from": "dom-mousemove-dispatcher@>=1.0.1 <2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-mousemove-dispatcher/-/dom-mousemove-dispatcher-1.0.1.tgz"
+    },
+    "dom-plane": {
+      "version": "1.0.2",
+      "from": "dom-plane@>=1.0.1 <2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-plane/-/dom-plane-1.0.2.tgz"
+    },
    "dom-serialize": {
      "version": "2.2.1",
      "from": "dom-serialize@>=2.2.0 <3.0.0",
      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz"
    },
+    "dom-set": {
+      "version": "1.1.0",
+      "from": "dom-set@>=1.0.1 <2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-set/-/dom-set-1.1.0.tgz"
+    },
    "domain-browser": {
      "version": "1.1.7",
      "from": "domain-browser@>=1.1.1 <2.0.0",
@ -1875,6 +1910,11 @@
      "from": "invert-kv@>=1.0.0 <2.0.0",
      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz"
    },
+    "is-array": {
+      "version": "1.0.1",
+      "from": "is-array@>=1.0.1 <2.0.0",
+      "resolved": "https://registry.npmjs.org/is-array/-/is-array-1.0.1.tgz"
+    },
    "is-arrayish": {
      "version": "0.2.1",
      "from": "is-arrayish@>=0.2.1 <0.3.0",
@ -1955,6 +1995,11 @@
      "from": "isbinaryfile@>=3.0.0 <4.0.0",
      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-3.0.2.tgz"
    },
+    "iselement": {
+      "version": "1.1.4",
+      "from": "iselement@>=1.1.4 <2.0.0",
+      "resolved": "https://registry.npmjs.org/iselement/-/iselement-1.1.4.tgz"
+    },
    "isobject": {
      "version": "2.1.0",
      "from": "isobject@>=2.0.0 <3.0.0",
@ -2911,6 +2956,11 @@
      "from": "tty-browserify@0.0.0",
      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
    },
+    "type-func": {
+      "version": "1.0.3",
+      "from": "type-func@>=1.0.1 <2.0.0",
+      "resolved": "https://registry.npmjs.org/type-func/-/type-func-1.0.3.tgz"
+    },
    "type-is": {
      "version": "1.6.14",
      "from": "type-is@>=1.6.14 <1.7.0",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -66,15 +66,16 @@
    "awesome-typescript-loader": "^2.2.4",
    "bourbon": "~4.2.1",
    "bundle-loader": "^0.5.4",
+    "clean-webpack-plugin": "^0.1.15",
    "contra": "^1.9.4",
    "crossvent": "^1.5.4",
    "css-loader": "^0.9.0",
    "custom-event": "^1.0.0",
+    "dom-autoscroller": "^2.2.8",
    "dragula": "^3.5.2",
    "exports-loader": "^0.6.2",
    "expose-loader": "^0.6.0",
    "extract-text-webpack-plugin": "^2.0.0-rc.2",
-    "clean-webpack-plugin": "^0.1.15",
    "file-loader": "^0.8.1",
    "foundation-apps": "1.1.0",
    "glob": "^4.5.3",