FE-964: claim details added. (#94)

src/app/claim-mgt/claim/claim.component.html

@@ -1 +1,3 @@
-Claim
+<cc-card-container>
+    <cc-claim-details [claim]="claim$ | async"></cc-claim-details>
+</cc-card-container>

src/app/claim-mgt/claim/claim.component.ts

@@ -1,6 +1,19 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { ClaimService } from './claim.service';
 
 @Component({
-    templateUrl: 'claim.component.html'
+    templateUrl: 'claim.component.html',
+    providers: [ClaimService]
 })
-export class ClaimComponent {}
+export class ClaimComponent {
+    claim$ = this.claimService.claim$;
+
+    constructor(private route: ActivatedRoute, private claimService: ClaimService) {
+        this.route.params.subscribe(params => {
+            const { party_id, claim_id } = params;
+            this.claimService.getClaim(party_id, Number(claim_id));
+        });
+    }
+}

src/app/claim-mgt/claim/claim.module.ts

@@ -1,9 +1,17 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material';
+import { FlexModule } from '@angular/flex-layout';
+
 import { ClaimComponent } from './claim.component';
 import { ClaimRoutingModule } from './claim-routing.module';
+import { SharedModule } from '../../shared/shared.module';
+import { ClaimManagementService } from '../../thrift/claim-management.service';
+import { DetailsComponent } from './details/details.component';
 
 @NgModule({
-    imports: [ClaimRoutingModule],
-    declarations: [ClaimComponent]
+    imports: [ClaimRoutingModule, SharedModule, CommonModule, MatCardModule, FlexModule],
+    declarations: [ClaimComponent, DetailsComponent],
+    providers: [ClaimManagementService]
 })
 export class ClaimModule {}

src/app/claim-mgt/claim/claim.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { MatSnackBar } from '@angular/material';
+
+import { ClaimManagementService } from '../../thrift/claim-management.service';
+import { Claim } from '../../gen-damsel/claim_management';
+
+@Injectable()
+export class ClaimService {
+    claim$: Subject<Claim> = new Subject();
+
+    constructor(
+        private claimManagementService: ClaimManagementService,
+        private snackBar: MatSnackBar
+    ) {}
+
+    getClaim(partyID: string, claimID: number) {
+        this.claimManagementService.getClaim(partyID, claimID).subscribe(
+            claim => this.claim$.next(claim),
+            e => {
+                console.error(e);
+                this.snackBar.open('An error occurred while claim accepting', 'OK');
+            }
+        );
+    }
+}

src/app/claim-mgt/claim/details/details.component.html

@@ -0,0 +1,33 @@
+<mat-card *ngIf="claim">
+    <mat-card-subtitle>Claim details</mat-card-subtitle>
+    <mat-card-content>
+        <div fxFlex="50" fxLayout="column" fxLayoutGap="10px">
+            <div fxLayout="row" fxLayout.xs="column">
+                <label fxFlex="20">Claim ID:</label>
+                <div>{{ claim.id }}</div>
+            </div>
+            <div fxLayout="row" fxLayout.xs="column">
+                <label fxFlex="20">Status:</label>
+                <div>{{ extractClaimStatus(claim.status) }}</div>
+            </div>
+            <div fxLayout="row" fxLayout.xs="column">
+                <label fxFlex="20">Revision:</label>
+                <div>{{ claim.revision }}</div>
+            </div>
+        </div>
+        <div fxFlex="50" fxLayout="column" fxLayoutGap="10px">
+            <div fxLayout="row" fxLayout.xs="column">
+                <label fxFlex="20">Party ID:</label>
+                <div>{{ claim.party_id }}</div>
+            </div>
+            <div fxLayout="row" fxLayout.xs="column">
+                <label fxFlex="20">Created At:</label>
+                <div>{{ claim.created_at | date: 'dd.MM.yyyy HH:mm:ss' }}</div>
+            </div>
+            <div fxLayout="row" fxLayout.xs="column">
+                <label fxFlex="20">Updated At:</label>
+                <div>{{ claim.updated_at | date: 'dd.MM.yyyy HH:mm:ss' }}</div>
+            </div>
+        </div>
+    </mat-card-content>
+</mat-card>

src/app/claim-mgt/claim/details/details.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+import { Claim, ClaimStatus } from '../../../gen-damsel/claim_management';
+import { extractClaimStatus } from '../../../shared/extract-claim-status';
+
+@Component({
+    selector: 'cc-claim-details',
+    templateUrl: 'details.component.html'
+})
+export class DetailsComponent {
+    @Input() claim: Claim;
+
+    extractClaimStatus(status: ClaimStatus) {
+        return extractClaimStatus(status);
+    }
+}

src/app/thrift/claim-management.service.ts

@@ -1,11 +1,11 @@
 import { Injectable, NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
+import { KeycloakService } from 'keycloak-angular';
 
 import { ThriftService } from '../thrift';
 import * as ClaimManagement from './gen-nodejs/ClaimManagement';
-import { ClaimSearchQuery, ClaimSearchResponse } from '../gen-damsel/claim_management';
+import { Claim, ClaimSearchQuery, ClaimSearchResponse } from '../gen-damsel/claim_management';
 import { ClaimSearchQuery as ClaimSearchQueryType } from './gen-nodejs/claim_management_types';
-import { KeycloakService } from 'keycloak-angular';
 
 @Injectable()
 export class ClaimManagementService extends ThriftService {
@@ -15,4 +15,8 @@ export class ClaimManagementService extends ThriftService {
 
     searchClaims = (query: ClaimSearchQuery): Observable<ClaimSearchResponse> =>
         this.toObservableAction('SearchClaims')(new ClaimSearchQueryType(query));
+
+    getClaim = (partyID: string, claimID: number): Observable<Claim> => {
+        return this.toObservableAction('GetClaim')(partyID, claimID);
+    };
 }