sales

matsen-tool/src/app/sales/sales.component.html

@@ -1,13 +1,28 @@
-<div *ngFor="let saleSummary of saleSummaries">
-    <div>{{ saleSummary.ownerName }} - {{ saleSummary.turnover }} - {{ saleSummary.profit }}</div>
-</div>
-
-
 <div class="spt-container">
     <div class="d-flex justify-content-between align-items-start">
         <h2>{{ 'basic.sales' | translate }}</h2>
         <button class="btn btn-primary" (click)="openModalNewSale()">{{ 'basic.new-sale' | translate }}</button>
     </div>
+
+    <div class="sales-summary-container mb-4" *ngFor="let saleSummary of saleSummaries">
+        <p><strong>{{ saleSummary.ownerName }}</strong></p>
+        <div class="sales-summary-bar">
+            <div>
+                <span class="sales-summary-turnover" [ngStyle]="{ 'width.%': calculateWidthPercentage(Number(saleSummary.turnover), saleSummaryMaxTurnover)}">
+                    {{ 'sales.turnover' | translate }}: <strong>{{ saleSummary.turnover | currency: 'EUR' }}</strong>
+                </span>
+            </div>
+        </div>
+        <div class="sales-summary-bar">
+            <div>
+                <span class="sales-summary-profit" [ngStyle]="{ 'width.%': calculateWidthPercentage(Number(saleSummary.profit), saleSummaryMaxTurnover)}">
+                    {{ 'sales.profit' | translate }}: <strong>{{ saleSummary.profit | currency: 'EUR' }}</strong>
+                </span>
+            </div>
+        </div>
+    </div>
+
+
     <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
            class="mat-elevation-z8 mb-3">
 
@@ -58,7 +73,7 @@
                 {{ 'overview.turnover' | translate }}
             </th>
             <td mat-cell *matCellDef="let element">
-                {{ element.turnover }}
+                {{ element.turnover | currency: 'EUR' }}
             </td>
         </ng-container>
 
@@ -68,7 +83,7 @@
                 {{ 'overview.profit' | translate }}
             </th>
             <td mat-cell *matCellDef="let element">
-                {{ element.profit }}
+                {{ element.profit | currency: 'EUR' }}
             </td>
         </ng-container>
 
@@ -78,7 +93,7 @@
                 {{ 'overview.createdAt' | translate }}
             </th>
             <td mat-cell *matCellDef="let element">
-                {{ element.createdAt }}
+                {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
             </td>
         </ng-container>
 
@@ -93,4 +108,4 @@
                    [pageIndex]="pageIndex"
                    showFirstLastButtons>
     </mat-paginator>
-</div>
+</div>

matsen-tool/src/app/sales/sales.component.ts

@@ -1,6 +1,6 @@
-import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, LOCALE_ID, OnInit, ViewChild} from '@angular/core';
 import {
-    PartnerJsonld, ProductJsonld,
+    ProductJsonld,
     SaleJsonld,
     SaleService,
     SaleSummaryJsonld,
@@ -17,17 +17,26 @@ import {MatTableDataSource} from "@angular/material/table";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {Router} from "@angular/router";
+import {registerLocaleData} from "@angular/common";
+import localeDe from '@angular/common/locales/de';
+
+registerLocaleData(localeDe);
 
 @Component({
-  selector: 'app-sales',
-  templateUrl: './sales.component.html',
-  styleUrl: './sales.component.scss'
+    selector: 'app-sales',
+    templateUrl: './sales.component.html',
+    styleUrl: './sales.component.scss',
+    providers: [
+        {
+            provide: LOCALE_ID,
+            useValue: 'de-DE',
+        },
+    ],
 })
 export class SalesComponent implements OnInit {
     @ViewChild(MatSort) sort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
 
-
     protected displayedColumns: string[];
     protected salesSub: Subscription;
     protected sales: Array<SaleJsonld>;
@@ -40,6 +49,8 @@ export class SalesComponent implements OnInit {
     protected pageSize: number;
     protected pageIndex: number;
 
+    protected saleSummaryMaxTurnover: number;
+
     protected modalOptions: NgbModalOptions = {
         centered: true
     };
@@ -50,7 +61,6 @@ export class SalesComponent implements OnInit {
         private translateService: TranslateService,
         private modalService: NgbModal,
         private router: Router,
-
     ) {
         this.sort = new MatSort();
         this.displayedColumns = ['pos', 'user', 'partner', 'product', 'turnover', 'profit', 'date'];
@@ -65,6 +75,8 @@ export class SalesComponent implements OnInit {
         this.pageEvent = new PageEvent();
         this.pageSize = 10;
         this.pageIndex = 0;
+
+        this.saleSummaryMaxTurnover = 0;
     }
 
     ngOnInit() {
@@ -95,10 +107,20 @@ export class SalesComponent implements OnInit {
             data => {
                 this.saleSummaries = data["hydra:member"];
                 console.log(this.saleSummaries);
+                if (this.saleSummaries.length > 0) {
+                    this.saleSummaryMaxTurnover = Number(this.saleSummaries[0].turnover);
+                }
             }
         )
     }
 
+    calculateWidthPercentage(turnover: number, maxTurnOver: number): number {
+        if (turnover && maxTurnOver && maxTurnOver !== 0) {
+            return (turnover / maxTurnOver) * 100;
+        }
+        return 0;
+    }
+
     onSortChange(sortState: Sort) {
         // Reset page index to first page
         this.pageIndex = 0;
@@ -136,8 +158,8 @@ export class SalesComponent implements OnInit {
     }
 
     navigateToSaleDetails(element: any) {
-        const product: ProductJsonld = element as ProductJsonld;
-        this.router.navigate(['/products', ApiConverter.extractId(product.id)]);
+        // const product: ProductJsonld = element as ProductJsonld;
+        // this.router.navigate(['/products', ApiConverter.extractId(product.id)]);
     }
 
     openModalNewSale() {
@@ -151,4 +173,6 @@ export class SalesComponent implements OnInit {
             }
         });
     }
+
+    protected readonly Number = Number;
 }

matsen-tool/src/assets/i18n/de.json

@@ -108,5 +108,10 @@
     "partner": "Partner",
     "product": "Produkt",
     "send": "Abschicken"
+  },
+  "sales":
+  {
+    "turnover": "Umsatz",
+    "profit": "Gewinn"
   }
 }

matsen-tool/src/assets/scss/_sales.scss

@@ -0,0 +1,35 @@
+.sales-summary-container {
+
+  .sales-summary-bar {
+    border-radius: 5px;
+    background: #bbb;
+    margin: 0 0 0.5rem 0;
+    div {
+      animation: expand 2.5s ease;
+      border-radius: 5px;
+      span {
+        display: block;
+        border-radius: 5px;
+        padding: 15px;
+        white-space: nowrap;
+      }
+    }
+  }
+  .sales-summary-turnover {
+    background: rgb(179,208,47);
+    background: linear-gradient(109deg, rgba(179,208,47,1) 0%, rgba(64,208,70,1) 36%, rgba(44,181,91,1) 100%);
+  }
+  .sales-summary-profit {
+    background: rgb(45,209,159);
+    background: linear-gradient(109deg, rgba(45,209,159,1) 0%, rgba(64,208,203,1) 36%, rgba(44,138,181,1) 100%);
+  }
+}
+
+@keyframes expand {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}

matsen-tool/src/styles.scss

@@ -6,5 +6,6 @@
 @import "assets/scss/modal";
 @import "assets/scss/form";
 @import "assets/scss/table";
+@import "assets/scss/sales";
 @import "assets/scss/button";
 @import "assets/scss/accordion";