Ticket #6 : Start to develop UI to display case instance

Author: Thierry Habart

src/CaseManagement.CMMN/Apis/CaseInstancesController.cs

@@ -36,7 +36,7 @@ public CaseInstancesController(ICreateCaseInstanceCommandHandler createCaseInsta
         public async Task<IActionResult> Search()
         {
             var query = HttpContext.Request.Query;
-            var result = await _processFlowInstanceQueryRepository.Find(ExtractFindParameter(query));
+            var result = await _processFlowInstanceQueryRepository.Find(ExtractFindWorkflowInstanceParameter(query));
             return new OkObjectResult(ToDto(result));
         }
 
@@ -77,14 +77,40 @@ public async Task<IActionResult> Get(string id)
             return new OkObjectResult(ToDto(flowInstance));
         }
 
-        private static FindWorkflowInstanceParameter ExtractFindParameter(IQueryCollection query)
+        [HttpGet("{id}/steps/.search")]
+        public async Task<IActionResult> SearchExecutionSteps(string id)
+        {
+            var query = HttpContext.Request.Query;
+            var parameter = ExtractFindExecutionStepsParameter(query);
+            parameter.ProcessFlowInstanceId = id;
+            var executionSteps = await _processFlowInstanceQueryRepository.FindExecutionSteps(parameter);
+            return new OkObjectResult(ToDto(executionSteps));
+        }
+
+        private static FindWorkflowInstanceParameter ExtractFindWorkflowInstanceParameter(IQueryCollection query)
         {
-            int startIndex;
-            int count;
-            string orderBy;
             string templateId;
-            FindOrders findOrder;
             var parameter = new FindWorkflowInstanceParameter();
+            if (query.TryGet("template_id", out templateId))
+            {
+                parameter.ProcessFlowTemplateId = templateId;
+            }
+            ExtractFindParameter(query, parameter);
+            return parameter;
+        }
+
+        private static FindExecutionStepsParameter ExtractFindExecutionStepsParameter(IQueryCollection query)
+        {
+            var parameter = new FindExecutionStepsParameter();
+            ExtractFindParameter(query, parameter);
+            return parameter;
+        }
+
+        private static void ExtractFindParameter(IQueryCollection query, BaseFindParameter parameter)
+        {
+            int startIndex, count;
+            string orderBy;
+            FindOrders findOrder;
             if (query.TryGet("start_index", out startIndex))
             {
                 parameter.StartIndex = startIndex;
@@ -104,13 +130,23 @@ private static FindWorkflowInstanceParameter ExtractFindParameter(IQueryCollecti
             {
                 parameter.Order = findOrder;
             }
+        }
 
-            if (query.TryGet("template_id", out templateId))
+        private static JObject ToDto(FindResponse<ProcessFlowInstanceExecutionStep> resp)
+        {
+            return new JObject
             {
-                parameter.ProcessFlowTemplateId = templateId;
-            }
-
-            return parameter;
+                { "start_index", resp.StartIndex },
+                { "total_length", resp.TotalLength },
+                { "count", resp.Count },
+                { "content", new JArray(resp.Content.Select(r => new JObject
+                {
+                    { "start_datetime", r.StartDateTime },
+                    { "end_datetime", r.EndDateTime },
+                    { "name", r.Element.Name },
+                    { "id", r.Element.Id }
+                })) }
+            };
         }
 
         private static JObject ToDto(FindResponse<ProcessFlowInstance> resp)
@@ -137,6 +173,8 @@ private static JObject ToDto(ProcessFlowInstance flowInstance)
             {
                 { "id", flowInstance.Id },
                 { "create_datetime", flowInstance.CreateDateTime },
+                { "template_id", flowInstance.ProcessFlowTemplateId },
+                { "name", flowInstance.ProcessFlowName },
                 { "status", Enum.GetName(typeof(ProcessFlowInstanceStatus), flowInstance.Status).ToLowerInvariant() }
             };
             var planItems = new JArray();

src/CaseManagement.Website/Startup.cs

@@ -47,13 +47,14 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
         {
             var angularRoutes = new[] {
                  "/home",
-                 "/about"
+                 "/about",
+                 "/casedefinitions",
+                 "/caseinstances"
              };
 
             app.Use(async (context, next) =>
             {
-                if (context.Request.Path.HasValue && null != angularRoutes.FirstOrDefault(
-                    (ar) => context.Request.Path.Value.StartsWith(ar, StringComparison.OrdinalIgnoreCase)))
+                if (context.Request.Path.HasValue && null != angularRoutes.FirstOrDefault((ar) => context.Request.Path.Value.StartsWith(ar, StringComparison.OrdinalIgnoreCase)))
                 {
                     context.Request.Path = new PathString("/");
                 }

src/CaseManagement.Website/angularApp/app/casedefinitions/case-def/case-def.component.html

@@ -107,10 +107,10 @@
                             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                         </table>
-                        <div *ngIf="isCaseInstancesLoading" class="center-spinner">
+                        <div *ngIf="isCaseExecutionStepsLoaded" class="center-spinner">
                             <mat-spinner></mat-spinner>
                         </div>
-                        <div *ngIf="isCaseInstancesErrorLoadOccured" class="error">
+                        <div *ngIf="isCaseExecutionStepsErrorLoadOccured" class="error">
                             <p>{{ "ERROR_LOAD_CASE_INSTANCES" | translate }}</p>
                         </div>
                         <mat-paginator [length]="length" [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

src/CaseManagement.Website/angularApp/app/casedefinitions/models/search-case-execution-steps-result.model.js

@@ -0,0 +1,39 @@
+export class SearchCaseExecutionStepItem {
+    Id: string;
+    Name: string;
+    StartDateTime: Date;
+    EndDateTime: Date;
+
+    public static fromJson(json: any): SearchCaseExecutionStepItem {
+        let result = new SearchCaseExecutionStepItem();
+        result.Id = json["id"];
+        result.Name = json["name"];
+        result.StartDateTime = json["start_datetime"];
+        result.EndDateTime = json["end_datetime"];
+        return result;
+    }
+}
+
+export class SearchCaseExecutionStepsResult {
+    StartIndex: number;
+    Count: number;
+    TotalLength: number;
+    Content: SearchCaseExecutionStepItem[];
+
+    public static fromJson(json: any): SearchCaseExecutionStepsResult
+    {
+        let result = new SearchCaseExecutionStepsResult();
+        result.StartIndex = json["start_index"];
+        result.Count = json["count"];
+        result.TotalLength = json["total_length"];
+        let content: SearchCaseExecutionStepItem[] = [];
+        if (json["content"]) {
+            json["content"].forEach(function (c: any) {
+                content.push(SearchCaseExecutionStepItem.fromJson(c));
+            });
+        }
+
+        result.Content = content;
+        return result;
+    }
+}

src/CaseManagement.Website/angularApp/app/casedefinitions/models/search-case-execution-steps-result.model.js.map

@@ -1,9 +1,24 @@
+export class CaseInstancePlanItem {
+    Id: string;
+    Name: string;
+    Status: string;
+
+    public static fromJson(json: any): CaseInstancePlanItem {
+        let result = new CaseInstancePlanItem();
+        result.Id = json["id"];
+        result.Name = json["name"];
+        result.Status = json["status"];
+        return result;
+    }
+}
+
 export class CaseInstance {
     Id: string;
     Name: string;
     Status: string;
     TemplateId: string;
     CreateDateTime: Date;
+    PlanItems: CaseInstancePlanItem[];
 
     public static fromJson(json: any): CaseInstance {
         let result = new CaseInstance();
@@ -12,6 +27,14 @@ export class CaseInstance {
         result.Status = json["status"];
         result.TemplateId = json["template_id"];
         result.CreateDateTime = json["create_datetime"];
+        let items: CaseInstancePlanItem[] = [];
+        if (json["items"]) {
+            json["items"].forEach(function (i : any) {
+                items.push(CaseInstancePlanItem.fromJson(i));
+            });
+        }
+
+        result.PlanItems = items;
         return result;
     }
 }

src/CaseManagement.Website/angularApp/app/casedefinitions/models/search-case-execution-steps-result.model.ts

@@ -3,13 +3,23 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { SearchCaseInstancesResult, CaseInstance } from '../models/search-case-instances-result.model';
+import { SearchCaseExecutionStepsResult } from '../models/search-case-execution-steps-result.model';
 
 const url = "http://localhost:54942";
 
 @Injectable()
 export class CaseInstancesService {
     constructor(private http: HttpClient) { }
 
+    get(caseInstanceId: string): Observable<CaseInstance> {
+        let targetUrl = url + "/case-instances/" + caseInstanceId;
+        let headers = new HttpHeaders();
+        headers = headers.set('Accept', 'application/json');
+        return this.http.get(targetUrl, { headers: headers }).pipe(map((res: any) => {
+            return CaseInstance.fromJson(res);
+        }));
+    }
+
     create(caseDefId: string, caseId: string) : Observable<CaseInstance> {
         const request = JSON.stringify({ case_definition_id: caseDefId, case_id: caseId });
         let targetUrl = url + "/case-instances";
@@ -44,4 +54,21 @@ export class CaseInstancesService {
             return SearchCaseInstancesResult.fromJson(res);
         }));
     }
+
+    searchExecutionSteps(startIndex: number, count: number, caseInstanceId: string, order: string, direction: string): Observable<SearchCaseExecutionStepsResult> {
+        let headers = new HttpHeaders();
+        headers = headers.set('Accept', 'application/json');
+        let targetUrl = url + "/case-instances/" + caseInstanceId + "/steps/.search?start_index=" + startIndex + "&count=" + count;
+        if (order) {
+            targetUrl = targetUrl + "&order_by=" + order;
+        }
+
+        if (direction) {
+            targetUrl = targetUrl + "&order=" + direction;
+        }
+
+        return this.http.get(targetUrl, { headers: headers }).pipe(map((res: any) => {
+            return SearchCaseExecutionStepsResult.fromJson(res);
+        }));
+    }
 }

src/CaseManagement.Website/angularApp/app/casedefinitions/models/search-case-instances-result.model.ts

@@ -1,2 +1,25 @@
+import { Action } from '@ngrx/store';
+import { CaseDefinition } from '../../casedefinitions/models/case-def.model';
+import { CaseInstance } from '../../casedefinitions/models/search-case-instances-result.model';
+import { SearchCaseExecutionStepsResult } from '../../casedefinitions/models/search-case-execution-steps-result.model';
+
 export enum ActionTypes {
-}
+    CASEINSTANCELOAD = "[CaseInstance] Load",
+    CASEINSTANCELOADED = "[CaseInstance] Loaded",
+    ERRORLOADCASEINSTANCE = "[CaseInstance] Error Load",
+    CASEEXECUTIONSSTEPSLOAD = "[CaseExecutionSteps] Load",
+    CASEEXECUTIONSTEPSLOADED = "[CaseExecutionSteps] Loaded",
+    ERRORLOADCASEEXECUTIONSTEPS = "[CaseExecutionSteps] Error Load"
+}
+
+export class CaseInstanceLoadedAction implements Action {
+    type = ActionTypes.CASEINSTANCELOAD
+    constructor(public caseInstance : CaseInstance, public caseDefinition : CaseDefinition) { }
+}
+
+export class CaseExecutionStepsLoadedAction implements Action {
+    type = ActionTypes.CASEEXECUTIONSTEPSLOADED
+    constructor(public result: SearchCaseExecutionStepsResult) { }
+}
+
+export type ActionsUnion = CaseInstanceLoadedAction | CaseExecutionStepsLoadedAction;

src/CaseManagement.Website/angularApp/app/casedefinitions/services/caseinstances.service.ts

@@ -1,9 +1,50 @@
 import { Injectable } from '@angular/core';
-// import { Actions } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { catchError, mergeMap, map } from 'rxjs/operators';
+import { ActionTypes } from './case-instance-actions';
+import { CaseDefinitionsService } from '../../casedefinitions/services/casedefinitions.service'
+import { CaseInstancesService } from '../../casedefinitions/services/caseinstances.service';
+import { CaseInstance } from '../../casedefinitions/models/search-case-instances-result.model';
+import { of } from 'rxjs';
 
 @Injectable()
-export class CaseDefEffects {
+export class CaseInstanceEffects {
     constructor(
-        // private actions$: Actions
+        private actions$: Actions,
+        private caseDefinitionsService: CaseDefinitionsService,
+        private caseInstancesService : CaseInstancesService
     ) { }
+
+    @Effect()
+    loadCaseDef$ = this.actions$
+        .pipe(
+            ofType(ActionTypes.CASEINSTANCELOAD),
+            mergeMap((evt: any) => {
+                return this.caseInstancesService.get(evt.id)
+                    .pipe(
+                        mergeMap((caseInstance : CaseInstance) => {
+                            return this.caseDefinitionsService.get(caseInstance.TemplateId).pipe(
+                                map(caseDefinition => { return { type: ActionTypes.CASEINSTANCELOADED, caseInstance: caseInstance, caseDefinition: caseDefinition}; }),
+                                catchError(() => of({ type: ActionTypes.ERRORLOADCASEINSTANCE }))
+                            );
+                        }),                        
+                        catchError(() => of({ type: ActionTypes.ERRORLOADCASEINSTANCE }))
+                    );
+            }
+            )
+    );
+
+    @Effect()
+    loadExecutionSteps = this.actions$
+        .pipe(
+            ofType(ActionTypes.CASEEXECUTIONSSTEPSLOAD),
+            mergeMap((evt: any) => {
+                return this.caseInstancesService.searchExecutionSteps(evt.startIndex, evt.count, evt.id, evt.order, evt.direction)
+                    .pipe(
+                        map(r => { return { type: ActionTypes.CASEEXECUTIONSTEPSLOADED, result: r }; }),
+                        catchError(() => of({ type: ActionTypes.ERRORLOADCASEEXECUTIONSTEPS }))
+                    );
+            }
+            )
+        );
 }