Scrappy wiring up for hyperagent to get some mockedmocked data into the wp details view.

app/assets/javascripts/angular/openproject-app.js

@@ -104,6 +104,8 @@ angular.module('openproject.timeEntries.controllers', []);
 
 angular.module('openproject.layout', []);
 
+angular.module('openproject.hal', []);
+
 // main app
 var openprojectApp = angular.module('openproject', [
   'ui.select2',
@@ -121,7 +123,8 @@ var openprojectApp = angular.module('openproject', [
   'truncate',
   'feature-flags',
   'openproject.layout',
-  'cgBusy'
+  'cgBusy',
+  'openproject.hal'
 ]);
 
 window.appBasePath = jQuery('meta[name=app_base_path]').attr('content') || '';

app/assets/javascripts/angular/services/work-package-service.js

@@ -34,10 +34,22 @@ angular.module('openproject.services')
   '$http',
   'PathHelper',
   'WorkPackagesHelper',
+  'HALAPIResource',
   'DEFAULT_FILTER_PARAMS',
-  function($http, PathHelper, WorkPackagesHelper, DEFAULT_FILTER_PARAMS) {
+  function($http, PathHelper, WorkPackagesHelper, HALAPIResource, DEFAULT_FILTER_PARAMS) {
+  var workPackage;
 
   var WorkPackageService = {
+    getWorkPackage: function(id) {
+      var resource = HALAPIResource.setup("work_packages/" + id);
+      return resource.fetch().then(function (wp) {
+        workPackage = wp;
+        return workPackage;
+      }).fail(function(error){
+        // Do something sensible
+      });
+    },
+
     getWorkPackagesByQueryId: function(projectIdentifier, queryId) {
       var url = projectIdentifier ? PathHelper.apiProjectWorkPackagesPath(projectIdentifier) : PathHelper.apiWorkPackagesPath();
 

app/assets/javascripts/angular/work_packages/controllers/work-package-details-controller.js

@@ -31,17 +31,12 @@ angular.module('openproject.workPackages.controllers')
 .controller('WorkPackageDetailsController', [
   '$scope',
   '$stateParams',
-  function($scope, $stateParams) {
+  'WorkPackageService',
+  function($scope, $stateParams, WorkPackageService) {
 
     $scope.workPackageId = $stateParams.workPackageId;
-
-    $scope.$watch('rows', function(rows) {
-      if (rows && rows.length > 0) {
-        var row = $scope.rows.find(function(row) {
-          return row.object.id == $scope.workPackageId;
-        });
-        $scope.workPackage = row ? row.object : {};
-      }
+    WorkPackageService.getWorkPackage($scope.workPackageId).then(function(workPackage) {
+      $scope.workPackage = workPackage;
     });
   }
 ]);

app/assets/javascripts/angular/work_packages/controllers/work-packages-list-controller.js

@@ -42,17 +42,17 @@ angular.module('openproject.workPackages.controllers')
     'PaginationService',
     'AuthorisationService',
     'WorkPackageLoadingHelper',
+    'HALAPIResource',
     'INITIALLY_SELECTED_COLUMNS',
     'OPERATORS_AND_LABELS_BY_FILTER_TYPE',
     function($scope, $rootScope, $q, $location, $stateParams,
       I18n, WorkPackagesTableService,
       WorkPackageService, ProjectService, QueryService, PaginationService,
-      AuthorisationService, WorkPackageLoadingHelper, INITIALLY_SELECTED_COLUMNS,
+      AuthorisationService, WorkPackageLoadingHelper, HALAPIResource, INITIALLY_SELECTED_COLUMNS,
       OPERATORS_AND_LABELS_BY_FILTER_TYPE) {
 
 
   // Setup
-
   function initialSetup() {
     $scope.operatorsAndLabelsByFilterType = OPERATORS_AND_LABELS_BY_FILTER_TYPE;
     $scope.disableFilters = false;

app/assets/javascripts/application.js.erb

@@ -53,6 +53,10 @@
 //= require warn_leaving_unsaved
 //= require openproject_plugins
 //= require versions
+//= require q/q
+//= require uri.js/src/URI
+//= require uri.js/src/URITemplate
+//= require hyperagent/dist/hyperagent
 //= require_tree ./specific
 
 //= require angular

bower.json

@@ -24,7 +24,8 @@
     "momentjs": "~2.6.0",
     "moment-timezone": "~0.0.6",
     "angular-context-menu": "0.1.2",
-    "angular-busy": "~4.0.4"
+    "angular-busy": "~4.0.4",
+    "hyperagent": "latest"
   },
   "devDependencies": {
     "mocha": "~1.14.0",

public/templates/work_packages.list.details.html

@@ -1,26 +1,26 @@
-<div ng-if="workPackage.subject">
+<div ng-if="workPackage.props.subject">
   <h2>
-    <span>{{ workPackage.type.name }}</span>
-    {{ workPackage.subject }}
+    <span>{{ workPackage.props.type }}</span>
+    {{ workPackage.props.subject }}
   </h2>
-  #{{ workPackage.id }}
+  #{{ workPackage.props.id }}
 
   <h3>Description</h3>
-  <p>TODO: Add description</p>
+  <p>{{ workPackage.props.description }}</p>
 
   <dl>
     <dt>Status</dt>
-    <dd>{{ workPackage.status.name }}</dd>
+    <dd>{{ workPackage.props.status }}</dd>
     <dt>Priority</dt>
-    <dd>{{ workPackage.priority.name }}</dd>
+    <dd>{{ workPackage.props.priority }}</dd>
     <dt>Date</dt>
     <dd></dd>
     <dt>Responsible</dt>
-    <dd>{{ workPackage.assigned_to }}</dd>
+    <dd>{{ workPackage.props.responsibleName }}</dd>
     <dt>Assignee</dt>
-    <dd>–</dd>
+    <dd>{{ workPackage.props.assigneeName }}</dd>
     <dt>% Done</dt>
-    <dd>–</dd>
+    <dd>{{ percentageDone }}</dd>
   </dl>
 
   <button class="button" ui-sref="work-packages.list">Close details</button>
@@ -37,6 +37,6 @@
   </div>
 </div>
 
-<div ng-if="!workPackage.subject">
+<div ng-if="!workPackage.props.subject">
   <p>Select a work package for more information.</p>
 </div>