FE-942: Details module. Invoice module. (#108)

src/app/sections/invoice-details/index.ts

@@ -0,0 +1,2 @@
+export * from './invoice-details.module';
+export * from './invoice-details.component';

src/app/sections/invoice-details/invoice-details-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { InvoiceDetailsComponent } from './invoice-details.component';
+
+const invoiceDetailsRoutes: Routes = [
+    {
+        path: ':invoiceID',
+        component: InvoiceDetailsComponent
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(invoiceDetailsRoutes)],
+    exports: [RouterModule]
+})
+export class InvoiceDetailsRoutingModule {}

src/app/sections/invoice-details/invoice-details.component.html

@@ -0,0 +1,3 @@
+<div>
+    InvoiceDetailsComponent
+</div>

src/app/sections/invoice-details/invoice-details.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    templateUrl: 'invoice-details.component.html'
+})
+export class InvoiceDetailsComponent {
+    constructor(private route: ActivatedRoute) {
+        this.route.params.subscribe(p => console.log('InvoiceDetailsComponent route params:', p));
+    }
+}

src/app/sections/invoice-details/invoice-details.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { InvoiceDetailsComponent } from './invoice-details.component';
+import { InvoiceDetailsRoutingModule } from './invoice-details-routing.module';
+
+@NgModule({
+    imports: [InvoiceDetailsRoutingModule],
+    declarations: [InvoiceDetailsComponent]
+})
+export class InvoiceDetailsModule {}

src/app/sections/payment-details/invoice-details/invoice-details.component.html

@@ -2,11 +2,11 @@
     <ng-container *transloco="let t; scope: 'payment-details'; read: 'paymentDetails.invoiceDetails'">
         <dsh-card-title>
             <div class="mat-title" fxLayout fxLayoutGap="10px" fxLayoutAlign="start center">
-                <!-- <mat-icon class="dsh-forward-icon" routerLink="/" svgIcon="arrow_back"></mat-icon> -->
                 <div>
                     {{ t?.title }}
                     <span dshSecondaryTitle>#{{ invoice?.id }}</span>
                 </div>
+                <mat-icon class="dsh-forward-icon" (click)="goToInvoiceDetails(invoice)">arrow_forward</mat-icon>
             </div>
         </dsh-card-title>
         <dsh-card-content fxLayout="column" [fxLayoutGap]="layoutGap">

src/app/sections/payment-details/invoice-details/invoice-details.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
+import { Router } from '@angular/router';
 
 import { Invoice, InvoiceStatus } from '../../../api-codegen/capi/swagger-codegen';
 import { StatusColor as Color } from '../../../theme-manager';
@@ -18,7 +19,11 @@ export class InvoiceDetailsComponent implements OnInit {
 
     invoice$: Observable<Invoice>;
 
-    constructor(@Inject(LAYOUT_GAP) public layoutGap: string, private invoiceDetailsService: InvoiceDetailsService) {}
+    constructor(
+        @Inject(LAYOUT_GAP) public layoutGap: string,
+        private invoiceDetailsService: InvoiceDetailsService,
+        private router: Router
+    ) {}
 
     ngOnInit() {
         this.invoice$ = this.invoiceDetailsService.getInvoiceByID(this.invoiceID);
@@ -37,4 +42,8 @@ export class InvoiceDetailsComponent implements OnInit {
                 return { color: Color.pending, text: 'unpaid' };
         }
     }
+
+    goToInvoiceDetails({ id }: Invoice) {
+        this.router.navigate(['invoice', id]);
+    }
 }

src/app/sections/payment-details/payment-details-routing.module.ts

@@ -5,7 +5,7 @@ import { PaymentDetailsComponent } from './payment-details.component';
 
 const paymentDetailsRoutes: Routes = [
     {
-        path: ':invoiceID/payment/:paymentID',
+        path: ':paymentID',
         component: PaymentDetailsComponent
     }
 ];

src/app/sections/payment-section/operations/invoices/table/table.component.ts

@@ -12,7 +12,7 @@ import { InvoicesTableData } from './invoices-table-data';
 export class TableComponent {
     @Input() data: MatTableDataSource<InvoicesTableData>;
 
-    displayedColumns: string[] = ['invoiceID', 'amount', 'status', 'createdAt', 'shop'];
+    displayedColumns: string[] = ['invoiceID', 'amount', 'status', 'createdAt', 'shop', 'actions'];
 
     constructor(private router: Router) {}
 

src/app/sections/sections-routing.module.ts

@@ -17,12 +17,16 @@ const routes: Routes = [
         loadChildren: () => import('./payment-section').then(m => m.PaymentSectionModule)
     },
     {
-        path: 'invoice',
+        path: 'invoice/:invoiceID/payment',
         loadChildren: () => import('./payment-details').then(m => m.PaymentDetailsModule)
     },
+    {
+        path: 'invoice',
+        loadChildren: () => import('./invoice-details').then(m => m.InvoiceDetailsModule)
+    },
     {
         path: 'report',
-        loadChildren: () => import('./report').then(m => m.ReportModule)
+        loadChildren: () => import('./report-details').then(m => m.ReportModule)
     },
     {
         path: 'onboarding',