refactor wp details overview

frontend/app/services/index.js

@@ -34,6 +34,7 @@ angular.module('openproject.services')
   .service('AuthorisationService', require('./authorisation-service'))
   .service('GroupService', ['$http', 'PathHelper', require('./group-service')])
   .service('HookService', require('./hook-service'))
+  .service('OverviewService', require('./overview-service'))
   .service('PaginationService', ['DEFAULT_PAGINATION_OPTIONS', require(
     './pagination-service')])
   .service('PriorityService', ['$http', 'PathHelper', require(

frontend/app/services/overview-service.js

@@ -0,0 +1,57 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2014 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+//++
+
+module.exports = function() {
+
+  var OverviewService = {
+    getInplaceProperties: function() {
+      return {
+        assignee: {
+          type: 'select2',
+          attribute: 'assignee',
+          embedded: false,
+          placeholder: '-'
+        },
+        responsible: {
+          type: 'select2',
+          attribute: 'responsible',
+          embedded: false,
+          placeholder: '-'
+        },
+        status: {
+          type: 'select',
+          attribute: 'status.name',
+          embedded: true,
+          placeholder: '-'
+        }
+      };
+    }
+  };
+
+  return OverviewService;
+};

frontend/app/work_packages/controllers/details-tab-overview-controller.js

@@ -43,9 +43,10 @@ module.exports = function($scope,
            UserService,
            VersionService,
            HookService,
+           OverviewService,
            $q) {
 
-  // work package properties
+  $scope.inplaceProperties = OverviewService.getInplaceProperties();
 
   $scope.userPath = PathHelper.staticUserPath;
   AuthorisationService.initModelAuth('work_package' + $scope.workPackage.id,

frontend/app/work_packages/controllers/index.js

@@ -52,6 +52,7 @@ angular.module('openproject.workPackages.controllers')
     'UserService',
     'VersionService',
     'HookService',
+    'OverviewService',
     '$q',
     require('./details-tab-overview-controller')
   ])

frontend/public/templates/work_packages/tabs/overview.html

@@ -27,64 +27,41 @@
       </dt>
       <dd ng-repeat-end
           ng-show="!(isPropertyEmpty(propertyData.value) && toggleStates.hideAllAttributes)"
-          ng-switch="propertyData.value"
           class="work-package-attributes--value-container">
-        <div ng-switch-when="null" class="work-package-attributes--value">
-          <div class="user-inline-editor" ng-if="propertyData.property == 'assignee'"
-            inplace-editor
-            ined-type="select2"
+        <div ng-if="inplaceProperties[propertyData.property]"
+          ng-class="['work-package-attributes--value', '-' + propertyData.format]">
+          <div inplace-editor
+            ined-type="{{inplaceProperties[propertyData.property].type}}"
             ined-entity="workPackage"
-            ined-attribute="assignee"
-            ined-attribute-embedded="false"
-            placeholder="-"
-          ></div>
-          <div class="user-inline-editor" ng-if="propertyData.property == 'responsible'"
-            inplace-editor
-            ined-type="select2"
-            ined-entity="workPackage"
-            ined-attribute="responsible"
-            ined-attribute-embedded="false"
-            placeholder="-"
-          ></div>
-          <empty-element ng-if="!(propertyData.property == 'assignee' || propertyData.property == 'responsible')"></empty-element>
-        </div>
-        <div class="status-inline-editor" ng-if="propertyData.property == 'status'"
-          inplace-editor
-          ined-type="select"
-          ined-entity="workPackage"
-          ined-attribute="status.name"
-          ined-attribute-title="{{ I18n.t('js.work_packages.properties.status') }}"
-          ined-attribute-embedded="true">
+            ined-attribute="{{inplaceProperties[propertyData.property].attribute}}"
+            ined-attribute-embedded="{{inplaceProperties[propertyData.property].embedded}}"
+            placeholder="{{inplaceProperties[propertyData.property].placeholder}}">
+          </div>
         </div>
-        <div ng-if="propertyData.property != 'status'" ng-switch-default ng-switch="propertyData.format">
-          <div ng-class="['work-package-attributes--value', '-' + propertyData.format]">
-            <div ng-switch-when="user">
-              <div class="user-inline-editor"
-                inplace-editor
-                ined-type="select2"
-                ined-entity="workPackage"
-                ined-attribute="{{propertyData.property}}"
-                ined-attribute-embedded="false"
-                placeholder="-">
-              </div>
+        <div ng-if="!inplaceProperties[propertyData.property]"
+          ng-class="['work-package-attributes--value', '-' + propertyData.format]">
+          <empty-element ng-if="propertyData.value === null"></empty-element>
+          <div ng-if="propertyData.value !== null" ng-switch="propertyData.format">
+            <div ng-class="['work-package-attributes--value', '-' + propertyData.format]">
+              <span ng-switch-when="dynamic" work-package-dynamic-attribute
+                                             html-element="propertyData.value"
+                                             work-package="workPackage">
+              </span>
+              <span ng-switch-when="version">
+                <a ng-if="propertyData.value.viewable" title="{{propertyData.value.title}}"
+                  ng-href="{{propertyData.value.href}}">{{propertyData.value.title}}</a>
+                <span ng-if="!propertyData.value.viewable" title="{{propertyData.value.title}}">{{propertyData.value.title}}</span>
+              </span>
+              <span ng-switch-when="time_entry">
+                <a ng-if="propertyData.value.viewable" title="{{propertyData.value.title}}"
+                  ng-href="{{propertyData.value.href}}">{{propertyData.value.title}}</a>
+                <span ng-if="!propertyData.value.viewable" title="{{propertyData.value.title}}">{{propertyData.value.title}}</span>
+              </span>
+              <span ng-switch-when="category">{{ propertyData.value.props.name }}</span>
+              <span ng-switch-default
+                ng-bind="(propertyData.value !== undefined) ? propertyData.value : '-'"
+                ng-attr-title="{{propertyData.value}}"/>
             </div>
-
-            <span ng-switch-when="dynamic" work-package-dynamic-attribute
-                                           html-element="propertyData.value"
-                                           work-package="workPackage">
-            </span>
-            <span ng-switch-when="version">
-              <a ng-if="propertyData.value.viewable" title="{{propertyData.value.title}}" ng-href="{{propertyData.value.href}}">{{propertyData.value.title}}</a>
-              <span ng-if="!propertyData.value.viewable" title="{{propertyData.value.title}}">{{propertyData.value.title}}</span>
-            </span>
-            <span ng-switch-when="time_entry">
-              <a ng-if="propertyData.value.viewable" title="{{propertyData.value.title}}" ng-href="{{propertyData.value.href}}">{{propertyData.value.title}}</a>
-              <span ng-if="!propertyData.value.viewable" title="{{propertyData.value.title}}">{{propertyData.value.title}}</span>
-            </span>
-            <span ng-switch-when="category">{{ propertyData.value.props.name }}</span>
-            <span ng-switch-default
-              ng-bind="(propertyData.value !== undefined) ? propertyData.value : '-'"
-              ng-attr-title="{{propertyData.value}}"/>
           </div>
         </div>
       </dd>

frontend/tests/integration/work-package-details-spec.js

@@ -133,24 +133,28 @@ describe('OpenProject', function() {
       });
       describe('read state', function() {
         it('should render a span with value', function() {
-          expect($('.status-inline-editor .inplace-editor span.read-value-wrapper').getText())
+          /*jshint multistr: true */
+          expect($('[ined-attribute=\'status.name\'] .inplace-editor \
+            span.read-value-wrapper').getText())
             .to.eventually.equal('specified');
         });
       });
       describe('edit state', function() {
         beforeEach(function() {
-          $('.status-inline-editor .inplace-editor .ined-read-value').then(function(e) {
+          $('[ined-attribute=\'status.name\'] .inplace-editor .ined-read-value').then(function(e) {
             e.click();
           });
         });
         context('dropdown', function() {
           it('should be rendered', function() {
-            expect($('.status-inline-editor select.focus-input').isDisplayed())
+            expect($('[ined-attribute=\'status.name\'] select.focus-input').isDisplayed())
               .to.eventually.be.true;
           });
           it('should have the correct value', function() {
+            /*jshint multistr: true */
             expect(
-              $('.status-inline-editor select.focus-input option:checked').getAttribute('value')
+              $('[ined-attribute=\'status.name\'] \
+                select.focus-input option:checked').getAttribute('value')
             ).to.eventually.equal('1');
           });
         });
@@ -168,7 +172,7 @@ describe('OpenProject', function() {
           });
           /*jshint multistr: true */
           it('should render a span with placeholder', function() {
-            expect($('.user-inline-editor[ined-attribute=\'assignee\'] \
+            expect($('[ined-attribute=\'assignee\'] \
               .inplace-editor \
               span.read-value-wrapper span').getText())
               .to.eventually.equal('-');
@@ -177,7 +181,7 @@ describe('OpenProject', function() {
         /*jshint multistr: true */
         context('with set responsible', function() {
           it('should render a link to user\'s profile', function() {
-            expect($('.user-inline-editor[ined-attribute=\'responsible\'] \
+            expect($('[ined-attribute=\'responsible\'] \
               .inplace-editor \
               span.read-value-wrapper a').getText())
               .to.eventually.equal('OpenProject Admin');
@@ -188,7 +192,7 @@ describe('OpenProject', function() {
       describe('edit state', function() {
         beforeEach(function() {
           /*jshint multistr: true */
-          $('.user-inline-editor[ined-attribute=\'responsible\'] \
+          $('[ined-attribute=\'responsible\'] \
               .inplace-editor \
               .ined-read-value').then(function(e) {
             e.click();
@@ -197,14 +201,14 @@ describe('OpenProject', function() {
         context('select2', function() {
           it('should be rendered', function() {
             /*jshint multistr: true */
-            expect($('.user-inline-editor[ined-attribute=\'responsible\'] \
+            expect($('[ined-attribute=\'responsible\'] \
               .select2-container').isDisplayed())
               .to.eventually.be.true;
           });
           it('should have the correct value', function() {
             /*jshint multistr: true */
             expect(
-              $('.user-inline-editor[ined-attribute=\'responsible\'] \
+              $('[ined-attribute=\'responsible\'] \
                 .select2-container \
                 .select2-choice span').getText()
             ).to.eventually.equal('OpenProject Admin');