FE-1065: claim creation (#146)

* FE-1065: claim creation

src/app/domain/domain-obj-modification/domain-obj-modification.service.ts

@@ -36,7 +36,7 @@ export class DomainObjModificationService {
             this.errors$.next(e);
             console.error('Build meta error:', e);
         });
-        this.metaApplicator.errors.subscribe((e) => console.log('Apply meta error:', e));
+        this.metaApplicator.errors.subscribe((e) => console.error('Apply meta error:', e));
     }
 
     init(namespace = 'domain'): Observable<DomainModificationModel> {

src/app/parties/parties.component.html

@@ -9,10 +9,24 @@
                 <button
                     mat-raised-button
                     color="primary"
-                    (click)="goToParty()"
+                    (click)="goToParty(true)"
                     [disabled]="!form.valid"
                 >
-                    <span *ngIf="!isLoading">Go</span>
+                    <span *ngIf="!isLoading">To party details</span>
+                    <mat-progress-spinner
+                        *ngIf="isLoading"
+                        color="accent"
+                        mode="indeterminate"
+                        diameter="30"
+                    ></mat-progress-spinner>
+                </button>
+                <button
+                    mat-raised-button
+                    color="primary"
+                    (click)="goToParty(false)"
+                    [disabled]="!form.valid"
+                >
+                    <span *ngIf="!isLoading">To party claims (new)</span>
                     <mat-progress-spinner
                         *ngIf="isLoading"
                         color="accent"

src/app/parties/parties.component.ts

@@ -26,21 +26,21 @@ export class PartiesComponent implements OnInit {
         this.form = this.partiesService.form;
     }
 
-    goToParty() {
+    goToParty(old: boolean) {
         this.isLoading = true;
         let { partyId } = this.form.value;
         partyId = partyId.trim();
         this.partyService.getParty(partyId).subscribe(
             () => {
                 this.isLoading = false;
-                this.router.navigate(['party-old', partyId]);
+                this.router.navigate([old ? 'party-old' : 'party', partyId]);
             },
             (err) => {
                 this.isLoading = false;
                 this.snackBar
-                    .open(`An error occurred while initializing: ${err}`, 'RETRY')
+                    .open(`An error occurred while receiving party`, 'RETRY')
                     .onAction()
-                    .subscribe(() => this.goToParty());
+                    .subscribe(() => this.goToParty(old));
             }
         );
     }

src/app/sections/party-claims/claims-table/claims-table.component.html

@@ -38,7 +38,10 @@
             </button>
             <mat-menu #menu="matMenu">
                 <button mat-menu-item (click)="navigateToClaim(claim.party_id, claim.id)">
-                    Claim details
+                    Details
+                </button>
+                <button mat-menu-item (click)="navigateToDeprecatedClaim(claim.party_id, claim.id)">
+                    Deprecated details
                 </button>
             </mat-menu>
         </td>

src/app/sections/party-claims/claims-table/claims-table.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { Claim, ClaimID } from '../../../thrift-services/damsel/gen-model/claim_management';
 import { PartyID } from '../../../thrift-services/damsel/gen-model/domain';
@@ -22,7 +23,13 @@ export class ClaimsTableComponent {
         'actions',
     ];
 
+    constructor(private router: Router) {}
+
     navigateToClaim(partyID: PartyID, claimID: ClaimID) {
-        console.log(partyID, claimID.toNumber(), '===========>>>');
+        this.router.navigate([`/party/${partyID}/claim/${claimID}`]);
+    }
+
+    navigateToDeprecatedClaim(partyID: PartyID, claimID: ClaimID) {
+        this.router.navigate([`/claim-mgt/party/${partyID}/claim/${claimID}`]);
     }
 }

src/app/sections/party-claims/create-claim.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BehaviorSubject, EMPTY, Observable, Subject } from 'rxjs';
+import { catchError, pluck, switchMap } from 'rxjs/operators';
+
+import { ClaimManagementService } from '../../thrift-services/damsel/claim-management.service';
+import { Claim } from '../../thrift-services/damsel/gen-model/claim_management';
+
+@Injectable()
+export class CreateClaimService {
+    claimCreation$ = new Subject<string>();
+
+    claim$: Observable<Claim> = this.claimCreation$.pipe(
+        switchMap((partyId) =>
+            this.claimService.createClaim(partyId, []).pipe(
+                catchError(() => {
+                    this.snackBar.open('An error occurred while claim creation', 'OK');
+                    this.error$.next({ hasError: true });
+                    return EMPTY;
+                })
+            )
+        )
+    );
+
+    private error$ = new BehaviorSubject({ hasError: false });
+
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private claimService: ClaimManagementService,
+        private snackBar: MatSnackBar
+    ) {
+        this.claim$.subscribe(({ id, party_id }) => {
+            this.router.navigate([`claim-mgt/party/${party_id}/claim/${id}`]);
+        });
+    }
+
+    createClaim() {
+        this.route.params.pipe(pluck('partyID')).subscribe((partyID) => {
+            this.claimCreation$.next(partyID);
+        });
+    }
+}

src/app/sections/party-claims/party-claims.component.html

@@ -1,29 +1,34 @@
-<div class="mat-headline">Party claims</div>
-<div fxLayout="column" fxLayoutGap="20px">
-    <mat-card>
-        <mat-card-content>
-            <cc-claim-search-form
-                hidePartyId="true"
-                (valueChanges)="search($event)"
-            ></cc-claim-search-form>
-        </mat-card-content>
-        <mat-card-footer *ngIf="doAction$ | async">
-            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </mat-card-footer>
-    </mat-card>
-    <ng-container *ngIf="claims$ | async as claims">
-        <cc-empty-search-result *ngIf="claims.length === 0"></cc-empty-search-result>
-        <mat-card *ngIf="claims.length > 0" fxLayout="column" fxLayoutGap="20px">
-            <cc-claims-table [claims]="claims"></cc-claims-table>
-            <button
-                fxFlex="100"
-                mat-button
-                *ngIf="hasMore$ | async"
-                (click)="fetchMore()"
-                [disabled]="doAction$ | async"
-            >
-                {{ (doAction$ | async) ? 'LOADING...' : 'SHOW MORE' }}
-            </button>
+<div fxLayout="column">
+    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="mat-headline">Party claims</div>
+        <button mat-button color="primary" (click)="createClaim()">CREATE</button>
+    </div>
+    <div fxLayout="column" fxLayoutGap="20px">
+        <mat-card>
+            <mat-card-content>
+                <cc-claim-search-form
+                    hidePartyId="true"
+                    (valueChanges)="search($event)"
+                ></cc-claim-search-form>
+            </mat-card-content>
+            <mat-card-footer *ngIf="doAction$ | async">
+                <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+            </mat-card-footer>
         </mat-card>
-    </ng-container>
+        <ng-container *ngIf="claims$ | async as claims">
+            <cc-empty-search-result *ngIf="claims.length === 0"></cc-empty-search-result>
+            <mat-card *ngIf="claims.length > 0" fxLayout="column" fxLayoutGap="20px">
+                <cc-claims-table [claims]="claims"></cc-claims-table>
+                <button
+                    fxFlex="100"
+                    mat-button
+                    *ngIf="hasMore$ | async"
+                    (click)="fetchMore()"
+                    [disabled]="doAction$ | async"
+                >
+                    {{ (doAction$ | async) ? 'LOADING...' : 'SHOW MORE' }}
+                </button>
+            </mat-card>
+        </ng-container>
+    </div>
 </div>

src/app/sections/party-claims/party-claims.component.ts

@@ -1,12 +1,16 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { filter } from 'rxjs/operators';
 
+import { ConfirmActionDialogComponent } from '../../confirm-action-dialog';
 import { SearchFormValue } from '../claim-search-form';
+import { CreateClaimService } from './create-claim.service';
 import { PartyClaimsService } from './party-claims.service';
 
 @Component({
     templateUrl: 'party-claims.component.html',
-    providers: [PartyClaimsService],
+    providers: [PartyClaimsService, CreateClaimService],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PartyClaimsComponent implements OnInit {
@@ -14,7 +18,12 @@ export class PartyClaimsComponent implements OnInit {
     claims$ = this.partyClaimsService.searchResult$;
     hasMore$ = this.partyClaimsService.hasMore$;
 
-    constructor(private partyClaimsService: PartyClaimsService, private snackBar: MatSnackBar) {}
+    constructor(
+        private partyClaimsService: PartyClaimsService,
+        private snackBar: MatSnackBar,
+        private createClaimService: CreateClaimService,
+        private dialogRef: MatDialog
+    ) {}
 
     ngOnInit() {
         this.partyClaimsService.errors$.subscribe((e) =>
@@ -29,4 +38,14 @@ export class PartyClaimsComponent implements OnInit {
     search(v: SearchFormValue) {
         this.partyClaimsService.search(v);
     }
+
+    createClaim() {
+        const dialog = this.dialogRef.open(ConfirmActionDialogComponent);
+        dialog
+            .afterClosed()
+            .pipe(filter((r) => r === 'confirm'))
+            .subscribe(() => {
+                this.createClaimService.createClaim();
+            });
+    }
 }

src/app/sections/party/party.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
 import { MatTabsModule } from '@angular/material/tabs';
 
 import { SharedModule } from '../../shared/shared.module';
@@ -8,7 +9,14 @@ import { PartyMgtRouting } from './party-routing.module';
 import { PartyComponent } from './party.component';
 
 @NgModule({
-    imports: [PartyMgtRouting, CommonModule, MatTabsModule, SharedModule, FlexModule],
+    imports: [
+        PartyMgtRouting,
+        CommonModule,
+        MatTabsModule,
+        SharedModule,
+        FlexModule,
+        MatButtonModule,
+    ],
     declarations: [PartyComponent],
 })
 export class PartyModule {}

src/app/sections/search-claims/search-claims.component.html

@@ -1,5 +1,5 @@
-<div class="search-claims-container">
-    <h1 class="mat-headline">Claims</h1>
+<div class="search-claims-container" fxLayout="column">
+    <div class="mat-headline">Claims</div>
     <div fxLayout="column" fxLayoutGap="20px">
         <mat-card>
             <mat-card-content>

src/app/sections/search-claims/search-table/search-table.component.html

@@ -36,6 +36,9 @@
                 <button mat-menu-item (click)="navigateToClaim(claim.party_id, claim.id)">
                     Details
                 </button>
+                <button mat-menu-item (click)="navigateToParty(claim.party_id)">
+                    Party claims
+                </button>
             </mat-menu>
         </td>
     </ng-container>

src/app/sections/search-claims/search-table/search-table.component.ts

@@ -17,6 +17,10 @@ export class SearchTableComponent {
     constructor(private router: Router) {}
 
     navigateToClaim(partyID: string, claimID: number) {
-        this.router.navigate(['claim-mgt', 'party', partyID, 'claim', claimID + '']);
+        this.router.navigate([`/claim-mgt/party/${partyID}/claim/${claimID}`]);
+    }
+
+    navigateToParty(party_id: string) {
+        this.router.navigate([`/party/${party_id}`]);
     }
 }

src/main.ts

@@ -10,4 +10,4 @@ if (environment.production) {
 
 platformBrowserDynamic()
     .bootstrapModule(AppModule)
-    .catch((err) => console.log(err));
+    .catch((err) => console.error(err));