feat(workitemtypes): WorkItemTypes are now retrieves using jsonapi. (#…

…1068)

* feat(workitemtypes): WorkItemTypes are now retrieves using jsonapi.
* fix(workitemtypes): added proper type descriptions.

src/app/shared/mock-http.ts

@@ -171,7 +171,7 @@ export class MockHttp extends Http {
       // add new paths here
       switch (path.path) {
         case '/workitemtypes':
-          return this.createResponse(url.toString(), 200, 'ok', this.mockDataService.getWorkItemTypes() );
+          return this.createResponse(url.toString(), 200, 'ok', { data: this.mockDataService.getWorkItemTypes() } );
         case '/workitems':
           if (path.extraPath) {
             return this.createResponse(url.toString(), 200, 'ok', this.mockDataService.getWorkItemOrEntity(path.extraPath) );

src/app/work-item/work-item-detail/work-item-comment/work-item-comment.component.spec.ts

@@ -169,12 +169,12 @@ describe('Comment section for the work item detailed view - ', () => {
     } as User;
 
     fakeWorkItemTypes = [
-      { name: 'system.userstory' },
-      { name: 'system.valueproposition' },
-      { name: 'system.fundamental' },
-      { name: 'system.experience' },
-      { name: 'system.feature' },
-      { name: 'system.bug' }
+      { attributes: { name: 'system.userstory' } },
+      { attributes: { name: 'system.valueproposition' } },
+      { attributes: { name: 'system.fundamental' } },
+      { attributes: { name: 'system.experience' } },
+      { attributes: { name: 'system.feature' } },
+      { attributes: { name: 'system.bug' } }
     ] as WorkItemType[];
 
     fakeComments = [

src/app/work-item/work-item-detail/work-item-detail.component.spec.ts

@@ -166,12 +166,12 @@ describe('Detailed view and edit a selected work item - ', () => {
     } as User;
 
     fakeWorkItemTypes = [
-      { name: 'system.userstory' },
-      { name: 'system.valueproposition' },
-      { name: 'system.fundamental' },
-      { name: 'system.experience' },
-      { name: 'system.feature' },
-      { name: 'system.bug' }
+      { attributes: { name: 'system.userstory' } },
+      { attributes: { name: 'system.valueproposition' } },
+      { attributes: { name: 'system.fundamental' } },
+      { attributes: { name: 'system.experience' } },
+      { attributes: { name: 'system.feature' } },
+      { attributes: { name: 'system.bug' } }
     ] as WorkItemType[];
 
     fakeWorkItemLinkTypes = {'forwardLinks': [

src/app/work-item/work-item-list/work-item-list.component.spec.ts

@@ -161,12 +161,12 @@ describe('Work item list view - ', () => {
     } as User;
 
     fakeWorkItemTypes = [
-      { name: 'system.userstory' },
-      { name: 'system.valueproposition' },
-      { name: 'system.fundamental' },
-      { name: 'system.experience' },
-      { name: 'system.feature' },
-      { name: 'system.bug' }
+      { attributes: { name: 'system.userstory' } },
+      { attributes: { name: 'system.valueproposition' } },
+      { attributes: { name: 'system.fundamental' } },
+      { attributes: { name: 'system.experience' } },
+      { attributes: { name: 'system.feature' } },
+      { attributes: { name: 'system.bug' } }
     ] as WorkItemType[];
 
 

src/app/work-item/work-item-type.ts

@@ -1,13 +1,21 @@
 export class WorkItemType {
-    name: string;
-    version: number;
-    fields:
-    {
-        'system.assignee': {},        
-        'system.creator': {},
-        'system.description': {},            
-        'system.remote_item_id': {},            
-        'system.state': {},            
-        'system.title': {},
+    id: string;
+    type: string;
+    attributes: {
+        name: string;
+        version: number;
+        description: string;
+        fields:
+        {
+            'system.area': {}, 
+            'system.created_at': {}, 
+            'system.assignee': {},        
+            'system.creator': {},
+            'system.description': {},            
+            'system.iteration': {},            
+            'system.remote_item_id': {},            
+            'system.state': {},            
+            'system.title': {},
+        };
     };
 }

src/app/work-item/work-item.component.html

@@ -8,16 +8,16 @@ <h2 class="header-text margin-0">Choose a new work item type</h2>
       </div>
     </div>
     <div class="row row-cards-pf">
-      <div *ngFor="let type of workItemTypes" class="col-xs-12 col-sm-6 col-md-4 col-lg-3" (click)="onChangeType(type.name)">
+      <div *ngFor="let type of workItemTypes" class="col-xs-12 col-sm-6 col-md-4 col-lg-3" (click)="onChangeType(type.attributes.name)">
         <div class="card-pf card-pf-view card-pf-view-select">
           <div class="card-pf-body">
             <div class="card-pf-top-element">
-              <i almIcon [iconType]="type.name" class="card-pf-icon-circle"></i>
+              <i almIcon [iconType]="type.attributes.name" class="card-pf-icon-circle"></i>
             </div>
             <h2 class="card-pf-title text-center">
-              {{type.name}}
+              {{type.attributes.name}}
             </h2>
-            <p class="card-pf-info">Definition goes here. Lorem Ipsum dolor sit amet, consectetur adpisicing</p>
+            <p class="card-pf-info">{{type.attributes.description}}</p>
           </div>
         </div>
       </div>

src/app/work-item/work-item.service.ts

@@ -549,7 +549,7 @@ export class WorkItemService {
         .get(this.workItemTypeUrl)
         .toPromise()
         .then((response) => {
-          this.workItemTypes = response.json() as WorkItemType[];
+          this.workItemTypes = response.json().data as WorkItemType[];
           return this.workItemTypes;
         })
       .catch ((e) => {
@@ -578,7 +578,7 @@ export class WorkItemService {
     } else {
       return this.getWorkItemTypes()
         .then((response) => {
-          this.availableStates = response[0].fields['system.state'].type.values.map((item: string, index: number) => {
+          this.availableStates = response[0].attributes.fields['system.state'].type.values.map((item: string, index: number) => {
             return {
               option: item,
             };