fix(board): send patch and reorder requests

src/app/actions/column-workitem.action.ts

@@ -0,0 +1,57 @@
+import { Action } from '@ngrx/store';
+import { WorkItemService, WorkItemUI } from './../models/work-item';
+
+export const UPDATE = '[column workitem] Update';
+export const UPDATE_SUCCESS = '[column workitem] UpdateSuccess';
+export const UPDATE_ERROR = '[column workitem] UpdateError';
+
+export class Update implements Action {
+  payload: {
+    workItem: WorkItemUI,
+    reorder: {
+        workitem: WorkItemUI,
+        destinationWorkitemID: string,
+        direction: string
+      },
+    prevColumnId: string
+  };
+
+  constructor(payload: {
+    workItem: WorkItemUI,
+    reorder: {
+        workitem: WorkItemUI,
+        destinationWorkitemID: string,
+        direction: string
+      },
+    prevColumnId: string
+  }) {
+    this.payload = payload;
+  }
+  readonly type = UPDATE;
+}
+
+export class UpdateSuccess implements Action {
+  payload: {
+    workItemId: string,
+    prevColumnId: string,
+    newColumnIds: string[]
+  };
+
+  constructor(payload: {
+    workItemId: string,
+    prevColumnId: string,
+    newColumnIds: string[]
+  }) {
+    this.payload = payload;
+  }
+  readonly type = UPDATE_SUCCESS;
+}
+
+export class UpdateError implements Action {
+  readonly type = UPDATE_ERROR;
+}
+
+export type All
+  = Update
+  | UpdateSuccess
+  | UpdateError;

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

@@ -115,7 +115,7 @@ export class UpdateError implements Action {
   readonly type = UPDATE_ERROR;
 }
 
-export class Reoder implements Action {
+export class Reorder implements Action {
   readonly type = REORDER;
   payload: {
     workitem: WorkItemUI,
@@ -184,7 +184,7 @@ export type All
   | GetChildren
   | GetChildrenSuccess
   | GetChildrenError
-  | Reoder
+  | Reorder
   | UpdateWorkitemIteration
   | CreateLink
   | DeleteLink;

src/app/components_ngrx/assignee/assignee.component.html

@@ -1,6 +1,6 @@
   <ng-container *ngIf="assignees.length < 1">
     <span class="dib fa fa-user-plus user-assign-icon margin-right-5"></span>
-    <small class="dib">Unassigned</small>
+    <small *ngIf="!overlapAvatar" class="dib">Unassigned</small>
   </ng-container>
   <ng-container *ngIf="showFullName">
     <div class="f8-assignees dib margin-right-15 margin-bottom-7"
@@ -17,7 +17,7 @@
   </ng-container>
   <ng-container *ngIf="!showFullName">
     <div class="f8-assignees dib margin-bottom-7">
-      <user-avatar 
+      <user-avatar
         *ngFor="let assignee of assignees | slice:0:truncateAfter"
         [imgTooltip]="assignee?.name"
         [imgPlacement]="'left'"

src/app/components_ngrx/planner-board/planner-board.component.ts

@@ -13,8 +13,11 @@ import { sortBy } from 'lodash';
 import { DragulaService } from 'ng2-dragula';
 import { Subject } from 'rxjs';
 import { BoardQuery } from '../../models/board.model';
+import { cleanObject } from '../../models/common.model';
+import { WorkItemQuery, WorkItemUI } from '../../models/work-item';
 import { AppState } from '../../states/app.state';
 import * as BoardActions from './../../actions/board.actions';
+import * as ColumnWorkItemAction from './../../actions/column-workitem.action';
 import { GroupTypeQuery, GroupTypeUI } from './../../models/group-types.model';
 import { IterationQuery } from './../../models/iteration.model';
 import { SpaceQuery } from './../../models/space';
@@ -43,9 +46,11 @@ export class PlannerBoardComponent implements AfterViewChecked, OnInit, OnDestro
       private route: ActivatedRoute,
       private store: Store<AppState>,
       private boardQuery: BoardQuery,
-      private router: Router
+      private router: Router,
+      private workItemQuery: WorkItemQuery
     ) {
       this.dragulaService.drop.asObservable().takeUntil(this.destroy$).subscribe((value) => {
+        console.log(value, '#### - 0');
         this.onDrop(value.slice(1));
       });
     }
@@ -124,26 +129,37 @@ export class PlannerBoardComponent implements AfterViewChecked, OnInit, OnDestro
 
     onDrop(args) {
       const [el, target, source, sibling] = args;
-      let direction;
-      let destinationWorkItemID;
+      let direction: string;
+      let destinationWorkItemID: string;
       if (sibling === null && el.previousElementSibling !== null) {
         direction = 'below';
         destinationWorkItemID = el.previousElementSibling.children[0].getAttribute('data-id');
-        console.log(el.previousElementSibling, '####-1');
       } else if (sibling !== null) {
         direction = 'above';
         destinationWorkItemID = sibling.children[0].getAttribute('data-id');
       } else if (sibling === null && el.previousElementSibling === null) {
         // no reorder action dispatch only update action will dispatch
       }
-      console.log(el.previousElementSibling, '####-1');
-      const payload = {
-        workItem: el.children[0].getAttribute('data-id'),
-        destinationWorkItemID: destinationWorkItemID,
-        direction: direction
-      };
-      console.log(el.children[0].getAttribute('data-id'), '####-34');
-      console.log(destinationWorkItemID, '####-35');
-      console.log(direction, '####-36');
+      this.workItemQuery.getWorkItemWithId(el.children[0].getAttribute('data-id')).take(1).subscribe((workItem: WorkItemUI) => {
+        console.log('#### -1', target.getAttribute('data-id'), source.getAttribute('data-id'));
+        let workitem = {} as WorkItemUI;
+        workitem['version'] = workItem.version;
+        workitem['link'] = workItem.link;
+        workitem['id'] = workItem.id;
+        workitem['type'] = workItem.type;
+        const payload = {
+          workitem: workitem,
+          destinationWorkitemID: destinationWorkItemID,
+          direction: direction
+        };
+        workitem.columnIds = target.getAttribute('data-id');
+        this.store.dispatch(new ColumnWorkItemAction.Update(
+          {
+            workItem: workitem,
+            reorder: payload,
+            prevColumnId: source.getAttribute('data-id')
+          }
+        ));
+      });
     }
 }

src/app/components_ngrx/planner-list/planner-list.component.ts

@@ -532,7 +532,7 @@ export class PlannerListComponent implements OnInit, OnDestroy, AfterViewChecked
       destinationWorkitemID: event.target.id,
       direction: 'above'
     };
-    this.store.dispatch(new WorkItemActions.Reoder(payload));
+    this.store.dispatch(new WorkItemActions.Reorder(payload));
   }
 
   ngOnDestroy() {

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

@@ -6,13 +6,15 @@ import { Notification, Notifications, NotificationType } from 'ngx-base';
 import { Observable } from 'rxjs';
 import { cleanObject } from '../models/common.model';
 import { FilterService } from '../services/filter.service';
+import * as ColumnWorkItemActions from './../actions/column-workitem.action';
 import * as WorkItemActions from './../actions/work-item.actions';
 import { WorkItem, WorkItemMapper, WorkItemResolver, WorkItemService, WorkItemUI } from './../models/work-item';
 import { WorkItemService as WIService } from './../services/work-item.service';
 import { AppState } from './../states/app.state';
 import * as util from './work-item-utils';
 
-export type Action = WorkItemActions.All;
+
+export type Action = WorkItemActions.All | ColumnWorkItemActions.All;
 
 @Injectable()
 export class WorkItemEffects {
@@ -282,7 +284,7 @@ export class WorkItemEffects {
 
 
     @Effect() Reorder: Observable<Action> = this.actions$
-      .ofType<WorkItemActions.Reoder>(WorkItemActions.REORDER)
+      .ofType<WorkItemActions.Reorder>(WorkItemActions.REORDER)
       .withLatestFrom(this.store.select('planner'))
       .map(([action, state]) => {
         return {
@@ -314,4 +316,64 @@ export class WorkItemEffects {
             return Observable.of(new WorkItemActions.UpdateError());
           });
       });
+
+    @Effect() updateWorkItemFromBoard: Observable<Action> = this.actions$
+    .ofType<ColumnWorkItemActions.Update>(ColumnWorkItemActions.UPDATE)
+    .withLatestFrom(this.store.select('planner'))
+    .map(([action, state]) => {
+      return {
+        payload: action.payload,
+        state: state
+      };
+    })
+    .switchMap(wp => {
+      console.log('#### - 2');
+      // This order must be followed
+        // because baseType is needed for dynamic fields
+        const dynamicPayload = this.workItemMapper.toDyanmicServiceModel(wp.payload.workItem);
+        const staticPayload = this.workItemMapper.toServiceModel(wp.payload.workItem);
+
+        // We don't update work item type
+        // So we remove it from the payload
+        const payload = cleanObject({
+          ...staticPayload,
+          ...{ attributes: {
+               ...staticPayload.attributes,
+               ...dynamicPayload.attributes
+          }}
+        }, ['baseType']);
+        const state = wp.state;
+        return this.workItemService.update(payload)
+        .switchMap((workitem) => {
+          console.log('#### - 3');
+          let reorderPayload = wp.payload.reorder;
+          reorderPayload.workitem.version = workitem.attributes['version'];
+          const workItem = this.workItemMapper.toServiceModel(reorderPayload.workitem);
+          return this.workItemService.reOrderWorkItem(workItem, reorderPayload.destinationWorkitemID, reorderPayload.direction)
+          .map(w => {
+            console.log('#### - 4');
+            return this.resolveWorkItems([w], wp.state)[0];
+          });
+        })
+        .switchMap((w: WorkItemUI) => {
+          return [
+            new WorkItemActions.UpdateSuccess(w),
+            new ColumnWorkItemActions.UpdateSuccess({
+              workItemId: w.id,
+              prevColumnId: wp.payload.prevColumnId,
+              newColumnIds: w.columnIds
+            })];
+        })
+        .catch((e) => {
+          try {
+            this.notifications.message({
+              message: `Problem loading workitems.`,
+              type: NotificationType.DANGER
+            } as Notification);
+          } catch (e) {
+            console.log('Problem loading workitems.');
+          }
+          return Observable.of(new WorkItemActions.UpdateError());
+        });
+    });
 }

src/app/models/work-item.ts

@@ -409,6 +409,15 @@ export class WorkItemMapper implements Mapper<WorkItemService, WorkItemUI> {
           )
         );
       }.bind(this)
+    }, {
+      toPath: ['relationships', 'system.boardcolumns', 'data'],
+      fromPath: ['columnIds'],
+      toFunction: (data) => {
+        return [{
+          id: data,
+          type: 'boardcolumn'
+        }];
+      }
     }, {
       fromPath: ['hasChildren'],
       toPath: ['relationships', 'children', 'meta', 'hasChildren']
@@ -648,4 +657,12 @@ export class WorkItemQuery {
     );
     return this.store.select(selector);
   }
+
+  getWorkItemWithId(id: string): Observable<WorkItemUI> {
+    const selector = createSelector(
+      workItemEntities,
+      state => this.resolveWorkItem(state[id])
+    );
+    return this.store.select(selector);
+  }
 }

src/app/reducers/column-workitem.reducer.ts

@@ -1,9 +1,10 @@
 import { ActionReducer } from '@ngrx/store';
 import * as  WorkItemActions  from '../actions/work-item.actions';
 import { ColumnWorkItemState, InitialColumnWorkItemState } from '../states/index.state';
+import * as ColumnWorkItemActions from './../actions/column-workitem.action';
 
 
-export type Action = WorkItemActions.All;
+export type Action = WorkItemActions.All | ColumnWorkItemActions.All;
 
 export const ColumnWorkItemReducer: ActionReducer<ColumnWorkItemState> = (state = InitialColumnWorkItemState, action: Action) => {
   switch (action.type) {
@@ -22,6 +23,14 @@ export const ColumnWorkItemReducer: ActionReducer<ColumnWorkItemState> = (state
       });
       return {...cwState};
     }
+    case ColumnWorkItemActions.UPDATE_SUCCESS: {
+      const cwState = {...state};
+      cwState[action.payload.prevColumnId].delete(action.payload.workItemId);
+      action.payload.newColumnIds.forEach(id => {
+        cwState[id].add(action.payload.workItemId);
+      });
+      return cwState;
+    }
     default:  {
       return {...state};
     }