@colijnit/transaction 12.1.55 → 12.1.56

package/lib/component/core/base/components/characteristic-answer/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
   }
 }

package/lib/component/core/base/components/warehouse/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
   }
 }

package/lib/component/core/base/transaction-line-base.component.d.ts

@@ -13,4 +13,5 @@ export declare abstract class TransactionLineBaseComponent<T extends BusinessObj
     private _transactionInfo;
     protected transactionLineSet(): void;
     protected transactionInfoSet(): void;
+    stopPropagation(event: PointerEvent): void;
 }

package/lib/component/dialog/transaction-header/dialog-transaction-header-delivery-method/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-header-delivery-method-height;

package/lib/component/dialog/transaction-header/dialog-transaction-header-discount/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     .transaction-discount-wrapper {
       display: block;

package/lib/component/dialog/transaction-line/dialog-transaction-line-commission-code/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     //.co-dialog .dialog-content {
     //  max-height: $tp-dialog-transaction-line-commission-code-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-delivery-method/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-delivery-method-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-discount/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     .transaction-line-discount-wrapper {
       display: block;

package/lib/component/dialog/transaction-line/dialog-transaction-line-price-list/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-price-list-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-vat/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-vat-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-warehouse-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse-cc/style/_layout.scss

@@ -7,7 +7,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     .co-transaction-line-checkbox-list .virtual-scroll-container {
       height: $tp-dialog-transaction-line-warehouse-cc-commission-code-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse-cc/style/_material-definition.scss

@@ -3,7 +3,7 @@ $tp-dialog-transaction-line-warehouse-cc-font-size: $tp-font-size !default;
 $tp-dialog-transaction-line-warehouse-cc-font-color: $tp-color-font !default;
 $tp-dialog-transaction-line-warehouse-cc-min-width: 500px !default;
 $tp-dialog-transaction-line-warehouse-cc-commission-code-height: 100px !default;
-$tp-dialog-transaction-line-warehouse-cc-quantity-width: 150px !default;
+$tp-dialog-transaction-line-warehouse-cc-quantity-width: 100px !default;
 $tp-dialog-transaction-line-warehouse-cc-section-margin: 20px 0 !default;
 $tp-dialog-transaction-line-warehouse-cc-section-label-margin: 10px 0 !default;
 $tp-dialog-transaction-line-warehouse-cc-section-label-font-size: $tp-font-size !default;

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse-location/style/_layout.scss

@@ -5,7 +5,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-warehouse-location-height;

package/lib/component/down-payment/down-payment.component.d.ts

@@ -0,0 +1,16 @@
+import { OnInit } from "@angular/core";
+import { DownPaymentViewModel } from "../../model/down-payment-view-model";
+import { PaymentViewmodel } from "../../model/payment.viewmodel";
+import { PaymentService } from "../../service/payment.service";
+export declare class DownPaymentComponent implements OnInit {
+    private _paymentService;
+    transactionUuid: string;
+    downPayments: DownPaymentViewModel[];
+    showLoader: boolean;
+    showClass(): boolean;
+    paymentMethods: PaymentViewmodel[];
+    constructor(_paymentService: PaymentService);
+    ngOnInit(): void;
+    private _getDownpaymentInfo;
+    private _prepareData;
+}

package/lib/component/down-payment/down-payment.module.d.ts

@@ -0,0 +1,2 @@
+export declare class DownPaymentModule {
+}

package/lib/component/down-payment/style/_layout.scss

@@ -0,0 +1,62 @@
+@include export-module('cc-down-payment-layout') {
+  .co-down-payment {
+    position: relative;
+    font-family: $tp-down-payment-font-family;
+    font-size: $tp-down-payment-font-size;
+    display: flex;
+    flex-direction: column;
+    row-gap: $tp-down-payment-row-gap;
+    .co-tile {
+      .co-tile-wrapper {
+        border: none;
+        min-width: initial;
+        min-height: initial;
+        width: auto;
+        height: auto;
+        .co-tile-select-wrapper {
+          display: none;
+        }
+      }
+    }
+    .loader {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .down-payment-payments-wrapper {
+      padding: $tp-down-payment-payments-padding;
+      background-color: $tp-down-payment-payments-background-color;
+      border-style: $tp-down-payment-payments-border-style;
+      border-color: $tp-down-payment-payments-border-color;
+      border-width: $tp-down-payment-payments-border-width;
+      border-radius: $tp-down-payment-payments-border-radius;
+    }
+    .down-payment-payments {
+      display: flex;
+      height: $tp-down-payment-payments-height;
+      padding: $tp-down-payment-payment-padding;
+      border-style: $tp-down-payment-payment-border-style;
+      border-color: $tp-down-payment-payment-border-color;
+      border-width: $tp-down-payment-payment-border-width;
+      border-radius: $tp-down-payment-payment-border-radius;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .down-payment-amount-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      row-gap: $tp-down-payment-amount-row-gap;
+      .down-payment-amount {
+        font-size: $tp-down-payment-amount-font-size;
+        font-weight: $tp-down-payment-amount-font-weight;
+      }
+      .down-payment-date {
+        font-size: $tp-down-payment-date-font-size;
+        font-weight: $tp-down-payment-date-font-weight;
+      }
+    }
+  }
+}

package/lib/component/down-payment/style/_material-definition.scss

@@ -0,0 +1,20 @@
+$tp-down-payment-font-family: $tp-font-family !default;
+$tp-down-payment-font-size: $tp-font-size !default;
+$tp-down-payment-row-gap: 20px !default;
+$tp-down-payment-payments-height: 50px !default;
+$tp-down-payment-payments-padding: 0 !default;
+$tp-down-payment-payments-background-color: white !default;
+$tp-down-payment-payments-border-style: solid !default;
+$tp-down-payment-payments-border-width: 1px !default;
+$tp-down-payment-payments-border-color: $tp-color-border !default;
+$tp-down-payment-payments-border-radius: 5px !default;
+$tp-down-payment-amount-font-size: $tp-font-size !default;
+$tp-down-payment-amount-font-weight: bold !default;
+$tp-down-payment-amount-row-gap: 10px !default;
+$tp-down-payment-date-font-size: $tp-font-size-small !default;
+$tp-down-payment-date-font-weight: normal !default;
+$tp-down-payment-payment-padding: 0 20px !default;
+$tp-down-payment-payment-border-style: solid !default;
+$tp-down-payment-payment-border-width: 0 0 1px 0 !default;
+$tp-down-payment-payment-border-color: $tp-color-border !default;
+$tp-down-payment-payment-border-radius: 0 !default;

package/lib/component/down-payment/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-down-payment-theme') {
+  .co-down-payment {
+  }
+}

package/lib/component/down-payment/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/payment/payment.component.d.ts

@@ -6,19 +6,22 @@ import { PaymentService } from "../../service/payment.service";
 import { SharedService } from "../../service/shared.service";
 import { PaymentMethod } from "@colijnit/transactionapi/build/model/payment-method.bo";
 import { PaymentViewmodel } from "../../model/payment.viewmodel";
+import { DownPaymentViewModel } from "../../model/down-payment-view-model";
 export declare class PaymentComponent implements OnInit, OnDestroy {
     private _transactionService;
     private _sharedService;
     private _paymentService;
     readonly icons: typeof Icon;
     transactionUuid: string;
-    amount: number;
+    set amount(value: number);
+    get amount(): number;
     currencyId: number;
     payed: EventEmitter<void>;
     showClass(): boolean;
     paymentMethodIdx: number;
     cashRegisterIdx: number;
     paymentMethods: PaymentViewmodel[];
+    downPayments: DownPaymentViewModel[];
     cashRegisters: any[];
     showCashRegisters: boolean;
     showKeyPad: boolean;
@@ -26,6 +29,9 @@ export declare class PaymentComponent implements OnInit, OnDestroy {
     currentPaymentMethod: PaymentMethod;
     qrCodeImage: string;
     showLoader: boolean;
+    showLoaderDownPayments: boolean;
+    amountToPay: number;
+    private _amount;
     private _paymentStatusInterval;
     private _paymentStatusPollIntervalMs;
     private _paymentStatusMaxPollInterval;
@@ -38,6 +44,7 @@ export declare class PaymentComponent implements OnInit, OnDestroy {
     cashRegisterSelected(cashRegister: CashRegister, index: number): void;
     handlePayment(): void;
     handleKeyPadModelChange(model: number): void;
+    private _getDownpaymentInfo;
     private _dataUriToBase64;
     private _waitForPaymentStatus;
     private _clearInterval;

package/lib/component/payment/style/_layout.scss

@@ -10,7 +10,7 @@
       width: $tp-payment-tile-width;
       height: $tp-payment-tile-height;
     }
-    .payment-wrapper {
+    .payment-wrapper, .payment-cash-register-wrapper {
       display: flex;
       flex-direction: column;
       row-gap: $tp-payment-row-gap;
@@ -28,15 +28,24 @@
       }
     }
     .payment-methods {
+      position: relative;
+      min-height: 50px;
       display: flex;
       flex-direction: row;
-      column-gap: 5px;
+      column-gap: $tp-payment-methods-column-gap;
+      row-gap: $tp-payment-methods-row-gap;
       flex-wrap: wrap;
+      .loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
     .payment-to-pay-wrapper {
       display: grid;
       grid-template-columns: auto auto;
-      grid-template-rows: auto auto;
+      grid-template-rows: auto auto auto;
       row-gap: 10px;
       column-gap: 10px;
     }
@@ -52,21 +61,33 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      height: $tp-payment-amount-height;
       border: $tp-payment-amount-border;
       font-family: $tp-payment-amount-font-family;
       font-size: $tp-payment-amount-font-size;
       font-weight: $tp-payment-amount-font-weight;
       border-radius: 5px;
-      height: 100%;
       width: 100%;
     }
-    .payment-to-pay-button {
+
+    .payment-downpayment {
       grid-column: 1 / 1;
       grid-row: 2 / 2;
+      &.no-display {
+        display: none;
+      }
+    }
+
+    .payment-to-pay-button {
+      grid-column: 1 / 1;
+      grid-row: 3 / 3;
       .co-button {
         justify-content: center;
         border-radius: 5px;
       }
+      &.no-downpayments {
+        grid-row: 2 / 2;
+      }
     }
     .payment-to-pay-keypad {
       grid-column: 2 / 2;

package/lib/component/payment/style/_material-definition.scss

@@ -7,6 +7,9 @@ $tp-payment-header-font-size: $tp-font-size !default;
 $tp-payment-header-font-weight: bold !default;
 $tp-payment-header-extra-font-color: $tp-color-colijn-orange !default;
 $tp-payment-row-gap: 20px !default;
+$tp-payment-methods-column-gap: 5px !default;
+$tp-payment-methods-row-gap: 5px !default;
+$tp-payment-amount-height: 60px !default;
 $tp-payment-amount-font-family: $tp-font-family !default;
 $tp-payment-amount-font-size: 32px !default;
 $tp-payment-amount-font-weight: bold !default;

package/lib/component/payment/style/material.scss

@@ -3,3 +3,4 @@
 @import "./theme";
 @import "../../payment-tile/style/material";
 @import "../../payment-qr-code/style/material";
+@import "../../down-payment/style/material";

package/lib/component/relation/relation-addresses/style/_layout.scss

@@ -21,7 +21,7 @@
     }
     .dialog-footer-button-wrapper {
       display: flex;
-      justify-content: flex-end;
+      justify-content: $tp-transaction-dialog-footer-justify-content;
     }
   }
 }

package/lib/component/transaction/transaction.component.d.ts

@@ -1,4 +1,4 @@
-import { OnDestroy } from "@angular/core";
+import { ApplicationRef, OnDestroy, QueryList } from "@angular/core";
 import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/transaction-info-response.bo";
 import { TransactionService } from "../../service/transaction.service";
 import { ContentViewMode } from "../../enum/content-view-mode.enum";
@@ -9,11 +9,13 @@ import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transa
 import { TransactionBarButton } from "../../model/transaction-bar-button";
 import { TransactionTypeCategory } from "../../enum/transaction-type-category.enum";
 import { DynamicComponentService } from "../../service/dynamic-component.service";
+import { TransactionLineSidePanelComponent } from "../transaction-line-side-panel/transaction-line-side-panel.component";
 import { RelationAnyType } from "../../model/relation-any-type";
 import { TransactionEventService } from "../../service/transaction-event.service";
 export declare class TransactionComponent implements OnDestroy {
     iconCacheService: IconCacheService;
     private _service;
+    private _appRef;
     private _dynamicComponentService;
     private _transactionEventService;
     readonly viewModes: typeof ContentViewMode;
@@ -27,13 +29,15 @@ export declare class TransactionComponent implements OnDestroy {
     showQuickAccess: boolean;
     showButtonBar: boolean;
     showClass(): boolean;
+    sidePanelComponents: QueryList<TransactionLineSidePanelComponent>;
     activeViewMode: ContentViewMode;
     activeCategory: TransactionTypeCategory;
     sidePanelTransactionLine: TransactionLineInfo;
+    sidePanelOpen: boolean;
     private _subs;
     private _transaction;
     private _transactionId;
-    constructor(iconCacheService: IconCacheService, _service: TransactionService, _dynamicComponentService: DynamicComponentService, _transactionEventService: TransactionEventService);
+    constructor(iconCacheService: IconCacheService, _service: TransactionService, _appRef: ApplicationRef, _dynamicComponentService: DynamicComponentService, _transactionEventService: TransactionEventService);
     ngOnDestroy(): void;
     saveTransactionLine(transactionAddTextLineRequest: TransactionAddTextLineRequest): void;
     handleButtonBarButtonClicked(button: TransactionBarButton): void;

package/lib/component/transaction-button-bar/style/_material-definition.scss

@@ -5,7 +5,8 @@ $tp-co-transaction-button-bar-button-background-color: white !default;
 $tp-co-transaction-button-bar-button-border-radius: 10px !default;
 $tp-co-transaction-button-bar-button-padding: 5px !default;
 $tp-co-transaction-button-bar-button-selected-box-shadow: 0 0 0 1px $tp-color-action inset !default;
-$tp-co-transaction-button-bar-button-selected-box-border: 2px solid $tp-color-action !default;
+$tp-co-transaction-button-bar-button-selected-box-border: none !default;
+$tp-co-transaction-button-bar-button-selected-icon-color: $tp-color-action !default;
 $tp-co-transaction-button-bar-icon-color: $tp-color-font !default;
 $tp-co-transaction-button-bar-icon-size: 20px !default;
 $tp-co-transaction-button-bar-icon-margin: 0 0 5px 0 !default;

package/lib/component/transaction-button-bar/style/_theme.scss

@@ -10,5 +10,26 @@
         fill: $tp-co-transaction-button-bar-icon-color;
       }
     }
+    .button-wrapper {
+      .co-transaction-button-bar-icon {
+        height: $tp-co-transaction-button-bar-icon-size;
+        width: $tp-co-transaction-button-bar-icon-size;
+        margin: $tp-co-transaction-button-bar-icon-margin;
+        svg {
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
+    .selected {
+      .co-transaction-button-bar-icon {
+        svg { // for fontawesome icons
+          fill: $tp-co-transaction-button-bar-button-selected-icon-color;
+        }
+        & [fill] { // for own icons
+          fill: $tp-co-transaction-button-bar-button-selected-icon-color;
+        }
+      }
+    }
   }
 }

package/lib/component/transaction-header/transaction-header-payment/transaction-header-payment.component.d.ts

@@ -3,14 +3,20 @@ import { Icon } from "../../../enum/icon.enum";
 import { IconCacheService } from "../../../service/icon-cache.service";
 import { TransactionService } from "../../../service/transaction.service";
 import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+import { PaymentService } from "../../../service/payment.service";
 export declare class TransactionHeaderPaymentComponent extends TransactionBaseComponent {
     iconService: IconCacheService;
     protected readonly service: TransactionService;
+    private _paymentService;
     readonly icons: typeof Icon;
     readonly transactionKind: typeof TransactionKind;
     showClass(): boolean;
     showDialog: boolean;
     showPaymentDialog: boolean;
-    constructor(iconService: IconCacheService, service: TransactionService);
+    paid: number;
+    toPay: number;
+    constructor(iconService: IconCacheService, service: TransactionService, _paymentService: PaymentService);
     openPayment(event: MouseEvent): void;
+    transactionSet(): void;
+    private _getDownpaymentInfo;
 }

package/lib/component/transaction-line/transaction-base-line/style/_layout.scss

@@ -33,7 +33,7 @@
     }
     .transaction-line-buttons {
       display: flex;
-      align-items: center;
+      align-items: baseline;
       flex-shrink: 0;
       height: $tp-transaction-line-amount-height;
     }
@@ -68,12 +68,24 @@
     .fully-delivered {
       border-color: #e4f9f3;
       background-color: #e5f9f3;
-      color: #5fdcb3;
+
+      input {
+        color: #5fdcb3;
+      }
+      co-icon [fill] {
+        fill: #5fdcb3 !important;
+      }
     }
     .partially-delivered {
       border-color: #fde6db;
       background-color: #feece3;
-      color: #f8854c;
+
+      input {
+        color: #f8854c;
+      }
+      co-icon [fill] {
+        fill: #f8854c !important;
+      }
     }
     &.preview {
       .transaction-line-wrapper {

package/lib/component/transaction-line/transaction-receive-goods-line/service/transaction-receive-goods.service.d.ts

@@ -10,6 +10,7 @@ export declare class TransactionReceiveGoodsService {
     handleReceiveSelectedPurchaseOrders(value: {
         date: Date;
         id: string;
-    }): void;
+    }): Promise<boolean>;
     private _handleAfterCommitReceivedOrders;
+    private _handleTransactionLineChanged;
 }

package/lib/component/transaction-line/transaction-receive-goods-line/style/_layout.scss

@@ -8,14 +8,13 @@
         $tp-transaction-line-button-width
         $tp-transaction-line-button-width
         $tp-transaction-line-button-width
-        $tp-transaction-line-button-width
         90px
         30px
         $tp-transaction-line-button-width;
       grid-template-rows: $tp-transaction-line-button-height;
       gap: 0 10px;
       grid-template-areas:
-    ". . . . . . .";
+    ". . . . . .";
       padding: 8px;
     }
 

package/lib/component/transaction-line/transaction-receive-goods-line/transaction-receive-goods-line.component.d.ts

@@ -1,4 +1,4 @@
-import { OnDestroy, OnInit } from "@angular/core";
+import { OnInit } from "@angular/core";
 import { TransactionLinesLineBaseComponent } from "../../core/base/transaction-lines-line-base.component";
 import { Icon } from "../../../enum/icon.enum";
 import { IconCacheService } from "../../../service/icon-cache.service";
@@ -6,7 +6,7 @@ import { TransactionService } from "../../../service/transaction.service";
 import { TransactionEventService } from "../../../service/transaction-event.service";
 import { TransactionReceiveGoodsService } from "./service/transaction-receive-goods.service";
 import { ReceiveGoodViewModel } from "../../../model/receive-good-view-model";
-export declare class TransactionReceiveGoodsLineComponent extends TransactionLinesLineBaseComponent implements OnInit, OnDestroy {
+export declare class TransactionReceiveGoodsLineComponent extends TransactionLinesLineBaseComponent implements OnInit {
     iconCacheService: IconCacheService;
     service: TransactionService;
     private _transactionService;
@@ -23,5 +23,5 @@ export declare class TransactionReceiveGoodsLineComponent extends TransactionLin
     private _initViewModel;
     handleRowVisible(): Promise<void>;
     changeLineAmount(amount: number): void;
-    handleLineClicked(mouseClick: any): void;
+    handleLineClicked(mouseClick: PointerEvent): void;
 }