@colijnit/transaction 12.1.20 → 12.1.21

package/lib/component/transaction-search/transaction-search-header/style/_layout.scss

@@ -1,8 +1,83 @@
 @include export-module('cc-transaction-search-header-layout') {
   .co-transaction-search-header {
+    .transaction-search-header-wrapper {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+    }
+
+    .upper-header {
+      display: flex;
+      justify-content: flex-end;
+      padding-left: $tp-co-transaction-search-result-upper-header-padding-left;
+
+      .header-buttons-wrapper {
+        display: flex;
+        padding: $tp-co-transaction-search-result-header-buttons-wrapper-padding;
+
+        .button-wrapper {
+          cursor: pointer;
+          align-self: center;
+        }
+      }
+    }
+
+    .toggle-sidebar-button-wrapper {
+      &.sidebar {
+        .toggle-sidebar-button {
+          justify-content: center;
+
+          co-icon {
+            width: $tp-co-transaction-search-result-header-sidebar-button-size;
+            height: $tp-co-transaction-search-result-header-sidebar-button-size;
+          }
+        }
+      }
+
+      .transparent {
+        background-color: transparent;
+      }
+    }
+
+
+    .header-searchbar-wrapper {
+      display: flex;
+      justify-content: center;
+      flex-direction: row;
+    }
+
+    .transaction-search-general {
+
+      co-input-text label,input {
+        margin-left: $tp-co-transaction-search-input-text-label-margin-left !important;
+      }
+
+      &.fullscreen {
+        co-input-text {
+          width: $tp-co-transaction-search-input-text-fullscreen-width;
+          transition: width 0.2s ease-in-out;
+        }
+      }
+
+      &.sidebar {
+        co-input-text {
+          width: $tp-co-transaction-search-input-text-sidebar-width;
+          transition: width 0.2s ease-in-out;
+        }
+      }
+    }
+
+    .transaction-search-filter-button {
+      height: $tp-co-transaction-search-filter-button-size;
+      width: $tp-co-transaction-search-filter-button-size;
+      border-radius: $tp-co-transaction-search-filter-button-border-radius;
+      padding: $tp-co-transaction-search-filter-button-padding;
+      justify-content: center;
+    }
+
 
-    .whitespace {
-      padding-left: 10px;
+    .view-mode-buttons-wrapper {
+      padding: $tp-co-transaction-search-view-modes-wrapper-padding;
     }
   }
 }

package/lib/component/transaction-search/transaction-search-header/style/_material-definition.scss

@@ -0,0 +1 @@
+$tp-co-transaction-search-header-input-text-width: 300px !default;

package/lib/component/transaction-search/transaction-search-header/style/material.scss

@@ -1,3 +1,5 @@
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
+@import "../../../view-mode-buttons/style/material";
+

package/lib/component/transaction-search/transaction-search-result/style/_layout.scss

@@ -4,83 +4,6 @@
   .co-transaction-search-result {
     width: $tp-co-transaction-search-result-width;
 
-    .transaction-search-header-wrapper {
-      display: flex;
-      justify-content: center;
-      flex-direction: column;
-
-      .upper-header {
-        display: flex;
-        justify-content: space-between;
-        padding-left: $tp-co-transaction-search-result-upper-header-padding-left;
-
-        .header-title-wrapper {
-          display: flex;
-          flex-direction: row;
-          align-self: center;
-          justify-content: center;
-          align-items: baseline;
-          width: 100%;
-          .sub-title {
-            margin-left: 10px;
-          }
-        }
-
-        .header-buttons-wrapper {
-          display: flex;
-          justify-content: flex-end;
-          padding: $tp-co-transaction-search-result-header-buttons-wrapper-padding;
-
-
-          .button-wrapper {
-            cursor: pointer;
-            align-self: center;
-          }
-
-          .toggle-sidebar-button-wrapper {
-            &.sidebar {
-              .toggle-sidebar-button {
-                justify-content: center;
-
-                co-icon {
-                  width: $tp-co-transaction-search-result-header-sidebar-button-size;
-                  height: $tp-co-transaction-search-result-header-sidebar-button-size;
-                }
-              }
-            }
-
-            .transparent {
-              background-color: transparent;
-            }
-          }
-        }
-      }
-
-      .header-searchbar-wrapper {
-        display: flex;
-        justify-content: center;
-        flex-direction: row;
-
-        .transaction-search-general {
-          co-input-text {
-            width: $tp-co-transaction-search-input-text-width;
-          }
-        }
-
-        .transaction-search-filter-button {
-          height: $tp-co-transaction-search-filter-button-size;
-          width: $tp-co-transaction-search-filter-button-size;
-          border-radius: $tp-co-transaction-search-filter-button-border-radius;
-          padding: $tp-co-transaction-search-filter-button-padding;
-          justify-content: center;
-        }
-      }
-    }
-
-    .view-mode-buttons-wrapper {
-      padding: $tp-co-transaction-search-view-modes-wrapper-padding;
-    }
-
     .transaction-search-result-content-tiles-wrapper {
       display: flex;
       flex-basis: 100%;

package/lib/component/transaction-search/transaction-search-result/style/material.scss

@@ -1,3 +1,5 @@
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
+@import "../../transaction-search-tile/transaction-search-tile/style/material";
+@import "../../transaction-search-grid/transaction-search-grid/style/material";

package/lib/component/transaction-search/transaction-search-result/transaction-search-result.component.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter, OnInit } from "@angular/core";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
 import { TransactionSearchView } from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
 import { ContentViewMode } from "../../../enum/content-view-mode.enum";
 import { Icon } from "../../../enum/icon.enum";
@@ -9,7 +10,8 @@ export declare class TransactionSearchResultComponent implements OnInit {
     readonly icon: typeof Icon;
     readonly contentViewModes: typeof ContentViewMode;
     readonly searchViewModes: typeof SearchViewMode;
-    transactionType: string;
+    selectedTransaction: TransactionSearchView;
+    transactionType: TransactionKind;
     activeSearchViewMode: SearchViewMode;
     filterClick: EventEmitter<void>;
     transactionClick: EventEmitter<TransactionSearchView>;
@@ -24,4 +26,5 @@ export declare class TransactionSearchResultComponent implements OnInit {
     onResizeClick(): void;
     onCloseClick(): void;
     onFilterClick(): void;
+    onPaginationPageChange(pageNr: number): void;
 }

package/lib/component/transaction-search/transaction-search-tile/transaction-search-purchase-order-tile/style/_layout.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-transaction-search-purchase-order-tile-layout') {
+  .co-transaction-search-purchase-order-tile {
+  }
+}

package/lib/component/transaction-search/transaction-search-tile/transaction-search-purchase-order-tile/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-transaction-search-purchase-order-tile-theme') {
+  .co-transaction-search-purchase-order-tile {
+  }
+}

package/lib/component/transaction-search/transaction-search-tile/transaction-search-purchase-order-tile/style/material.scss

@@ -0,0 +1,3 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/transaction-search/transaction-search-tile/transaction-search-purchase-order-tile/transaction-search-purchase-order-tile.component.d.ts

@@ -0,0 +1,3 @@
+import { TransactionSearchTileBaseComponent } from "../../../core/base/transaction-search-tile-base.component";
+export declare class TransactionSearchPurchaseOrderTileComponent extends TransactionSearchTileBaseComponent {
+}

package/lib/component/transaction-search/transaction-search-tile/transaction-search-purchase-order-tile/transaction-search-purchase-order-tile.module.d.ts

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

package/lib/component/transaction-search/transaction-search-tile/transaction-search-sales-order-tile/style/_layout.scss

@@ -1,89 +1,5 @@
 @include export-module('co-transaction-search-sales-order-tile-layout') {
   .co-transaction-search-sales-order-tile {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: $tp-transaction-tile-height;
-    width: $tp-transaction-tile-width;
-    border-radius: $tp-tile-border-radius;
-    padding: $tp-transaction-tile-padding;
-    row-gap: $tp-transaction-tile-row-gap;
-
-    font-family: $tp-transaction-tile-font-family;
-    font-size: $tp-transaction-tile-font-size;
-
-    .transaction-tile-wrapper {
-      cursor: pointer;
-      width: $tp-transaction-tiles-wrapper-width;
-      height: $tp-transaction-tiles-wrapper-height;
-    }
-
-    .header {
-      font-weight: $tp-transaction-tile-header-font-weight;
-      font-size: $tp-transaction-tile-header-font-size;
-    }
-
-    .transaction-tile-body {
-      display: flex;
-      justify-content: space-between;
-      column-gap: $tp-transaction-tile-column-gap;
-
-      co-avatar {
-        width: $tp-transaction-tile-avatar-width;
-        height: $tp-transaction-tile-avatar-height;
-      }
-
-      .transaction-tile-seller-info {
-        display: flex;
-        flex-direction: column;
-        row-gap: $tp-transaction-tile-row-gap;
-        max-width: 50%;
-      }
-
-      .transaction-tile-order-summary {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-
-        co-button {
-          font-weight: $tp-transaction-tile-button-font-weight;
-          margin-top: $tp-transaction-tile-button-margin-top;
-          border-radius: $tp-transaction-tile-button-border-radius;
-          height: $tp-transaction-tile-button-height;
-        }
-      }
-    }
-
-    .transaction-tile-footer {
-      display: flex;
-      justify-content: space-between;
-      padding: $tp-transaction-tile-padding 0;
-
-      .order-info-section {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .label {
-          font-size: $tp-transaction-tile-font-size-small;
-        }
-
-        .value {
-          display: flex;
-          flex-direction: row;
-          align-items: flex-end;
-          min-width: fit-content;
-          font-size: $tp-transaction-tile-font-size-small;
-          height: $tp-transaction-tile-value-height;
-
-          co-icon {
-            height: $tp-transaction-tile-icon-height;
-            width: $tp-transaction-tile-icon-width;
-          }
-        }
-      }
-    }
   }
 }
 

package/lib/component/transaction-search/transaction-search-tile/transaction-search-sales-order-tile/style/_theme.scss

@@ -1,48 +1,4 @@
 @include export-module('co-transaction-search-sales-order-tile-theme') {
   .co-transaction-search-sales-order-tile {
-    background-color: $tp-tile-background-color;
-    border: 1px solid $tp-tile-border-color;
-
-    &:hover {
-      background-color: $tp-tile-hover-background-color;
-    }
-
-    .header {
-      color: $tp-transaction-tile-header-font-color;
-    }
-
-    .text {
-      color: $tp-transaction-tile-font-color;
-    }
-
-    .transaction-tile-order-summary {
-      co-button {
-        background-color: $tp-transaction-tile-button-color;
-      }
-    }
-
-    .transaction-tile-footer {
-      .order-info-section {
-        &:not(:last-child) {
-          border-right: 1px solid $tp-color-border;
-        }
-
-        .label {
-          color: $tp-transaction-tile-font-color;
-        }
-
-        .value {
-          color: $tp-transaction-tile-font-color-dark;
-
-          .lock-icon [fill] {
-            fill: $tp-transaction-tile-icon-active-color;
-          }
-
-          .unlock-icon [fill] {
-            fill: $tp-transaction-tile-icon-inactive-color;
-          }
-        }
-      }
-    }
   }
 }

package/lib/component/transaction-search/transaction-search-tile/transaction-search-sales-order-tile/transaction-search-sales-order-tile.component.d.ts

@@ -1,13 +1,6 @@
-import { EventEmitter } from "@angular/core";
-import { TransactionSearchView } from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
-import { Icon } from "../../../../enum/icon.enum";
 import { IconCacheService } from "../../../../service/icon-cache.service";
-export declare class TransactionSearchSalesOrderTileComponent {
+import { TransactionSearchTileBaseComponent } from "../../../core/base/transaction-search-tile-base.component";
+export declare class TransactionSearchSalesOrderTileComponent extends TransactionSearchTileBaseComponent {
     iconCacheService: IconCacheService;
-    readonly icons: typeof Icon;
-    transaction: TransactionSearchView;
-    tileClick: EventEmitter<MouseEvent>;
-    showClass(): boolean;
     constructor(iconCacheService: IconCacheService);
-    onTileClick(event: MouseEvent): void;
 }

package/lib/component/transaction-search/transaction-search-tile/transaction-search-tile/style/_layout.scss

@@ -0,0 +1,108 @@
+@include export-module('cc-transaction-search-tile-layout') {
+  .co-transaction-search-tile {
+    .co-transaction-search-tile-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: $tp-transaction-tile-height;
+
+      @media(max-width: 600px) {
+        width: 85vw;
+      }
+
+      @media(min-width: 601px) {
+        width: $tp-transaction-tile-width;
+      }
+      border-radius: $tp-tile-border-radius;
+      padding: $tp-transaction-tile-padding;
+      row-gap: $tp-transaction-tile-row-gap;
+
+      font-family: $tp-transaction-tile-font-family;
+      font-size: $tp-transaction-tile-font-size;
+
+      .transaction-tile-wrapper {
+        cursor: pointer;
+        width: $tp-transaction-tiles-wrapper-width;
+        height: $tp-transaction-tiles-wrapper-height;
+      }
+
+      .header {
+        font-weight: $tp-transaction-tile-header-font-weight;
+        font-size: $tp-transaction-tile-header-font-size;
+      }
+
+      .transaction-tile-body {
+        display: flex;
+        justify-content: space-between;
+        column-gap: $tp-transaction-tile-column-gap;
+        height: 80px;
+
+        co-avatar {
+          width: $tp-transaction-tile-avatar-width;
+          height: $tp-transaction-tile-avatar-height;
+        }
+
+        .transaction-tile-seller-info {
+          display: flex;
+          flex-direction: column;
+          row-gap: $tp-transaction-tile-row-gap;
+          max-width: 50%;
+        }
+
+        .transaction-tile-order-summary {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+
+          co-button {
+            font-weight: $tp-transaction-tile-button-font-weight;
+            margin-top: $tp-transaction-tile-button-margin-top;
+            border-radius: $tp-transaction-tile-button-border-radius;
+            height: $tp-transaction-tile-button-height;
+          }
+        }
+      }
+
+      .transaction-tile-footer {
+        display: flex;
+        justify-content: space-between;
+        padding: 10px 0;
+
+        .order-info-section {
+          width: fit-content;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          &:nth-child(2) {
+            padding: 0 15px;
+          }
+
+          .label {
+            font-size: $tp-transaction-tile-font-size-small;
+          }
+
+          .value {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            min-width: fit-content;
+            font-size: $tp-transaction-tile-font-size-small;
+            height: $tp-transaction-tile-value-height;
+
+            co-icon {
+              height: $tp-transaction-tile-icon-height;
+              width: $tp-transaction-tile-icon-width;
+
+              svg {
+                position: relative;
+                top: 0.22em;
+              }
+            }
+          }
+        }
+      }
+    }
+
+  }
+}

package/lib/component/transaction-search/transaction-search-tile/transaction-search-tile/style/_theme.scss

@@ -0,0 +1,53 @@
+@include export-module('cc-transaction-search-tile-theme') {
+  .co-transaction-search-tile {
+    .co-transaction-search-tile-content {
+      background-color: $tp-transaction-tile-background-color;
+      border: 1px solid $tp-transaction-tile-border-color;
+
+      .header {
+        color: $tp-transaction-tile-header-font-color;
+      }
+
+      .text {
+        color: $tp-transaction-tile-font-color;
+      }
+
+      .transaction-tile-footer {
+        .order-info-section {
+          &:nth-child(2) {
+            border-left: 0.5px solid  $tp-transaction-tile-border-color;
+            border-right: 0.5px solid  $tp-transaction-tile-border-color;
+          }
+
+          .label {
+            color: $tp-transaction-tile-font-color;
+          }
+
+          .value {
+            color: $tp-transaction-tile-font-color-dark;
+
+            .lock-icon [fill] {
+              fill: $tp-transaction-tile-icon-active-color;
+            }
+
+            .unlock-icon [fill] {
+              fill: $tp-transaction-tile-icon-inactive-color;
+            }
+          }
+        }
+      }
+    }
+
+    &:hover {
+      .co-transaction-search-tile-content {
+        background-color: $tp-transaction-tile-hover-background-color;
+      }
+    }
+
+    &.selected {
+      .co-transaction-search-tile-content {
+        background-color:$tp-transaction-tile-selected-background-color;
+      }
+    }
+  }
+}

package/lib/component/transaction-search/transaction-search-tile/transaction-search-tile/style/material.scss

@@ -0,0 +1,3 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/transaction-search/transaction-search-tile/transaction-search-tile/transaction-search-tile.component.d.ts

@@ -0,0 +1,25 @@
+import { ApplicationRef, ComponentFactoryResolver, EventEmitter, Injector } from "@angular/core";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+import { TransactionSearchView } from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
+import { TransactionMappingService } from "../../../../service/transaction-mapping.service";
+import { TransactionSearchService } from "../../service/transaction-search.service";
+export declare class TransactionSearchTileComponent {
+    private _mappingService;
+    private _compFactoryResolver;
+    private appRef;
+    private injector;
+    searchService: TransactionSearchService;
+    set container(content: any);
+    set transactionType(value: TransactionKind);
+    get transactionType(): TransactionKind;
+    set transaction(value: TransactionSearchView);
+    get transaction(): TransactionSearchView;
+    transactionClick: EventEmitter<TransactionSearchView>;
+    showClass(): boolean;
+    private _transactionSearchTileContainer;
+    private _transaction;
+    private _transactionType;
+    private _componentRef;
+    constructor(_mappingService: TransactionMappingService, _compFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector, searchService: TransactionSearchService);
+    private _prepareContent;
+}

package/lib/component/transaction-search/transaction-search-tile/transaction-search-tile/transaction-search-tile.module.d.ts

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

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from "@angular/core";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
 import { TransactionSearchView } from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
 import { SearchViewMode } from "../../enum/search-view-mode.enum";
 import { TransactionSearchService } from "./service/transaction-search.service";
@@ -7,8 +8,8 @@ export declare class TransactionSearchComponent {
     readonly searchViewModes: typeof SearchViewMode;
     activeSearchViewMode: SearchViewMode;
     closeClick: EventEmitter<void>;
-    set transactionType(value: string);
-    get transactionType(): string;
+    set transactionType(value: TransactionKind);
+    get transactionType(): TransactionKind;
     transactionClick: EventEmitter<TransactionSearchView>;
     searchViewModeChange: EventEmitter<SearchViewMode>;
     showClass(): boolean;

package/lib/enum/icon.enum.d.ts

@@ -13,12 +13,15 @@ export declare enum Icon {
     CartFlatbedBoxesSolid = "cart_flatbed_boxes_solid",
     CartShoppingSolid = "cart_shopping_solid",
     CashRegister = "cash_register",
+    CreditCardSolid = "credit_card_solid",
     DeliveryTruck = "delivery_truck",
     EditPencil = "edit_pencil",
     IdealLogo = "ideal_logo",
     ListView = "list_view",
     LocationDotSolid = "location_dot_solid",
     Lock = "lock",
+    LockKeyholeOpenSolid = "lock_keyhole_open_solid",
+    LockKeyholeSolid = "lock_keyhole_solid",
     MapMarker = "map_marker",
     MasterDetail = "master_detail",
     MemoCircleCheckSolid = "memo_circle_check_solid",
@@ -35,6 +38,7 @@ export declare enum Icon {
     ThickLines = "thick_lines",
     ThinLines = "thin_lines",
     TrashBin = "trash_bin",
+    TrashCanLight = "trash_can_light",
     TriangleDown = "triangle_down",
     TriangleUp = "triangle_up",
     Truck = "truck",

package/lib/model/transaction-search-result.d.ts

@@ -0,0 +1,5 @@
+import { TransactionSearchView } from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
+export declare class TransactionSearchResult {
+    transactions: TransactionSearchView[];
+    count: number;
+}

package/lib/service/payment.service.d.ts

@@ -1,9 +1,11 @@
 import { PaymentMethod } from "@colijnit/transactionapi/build/model/payment-method.bo";
 import { TransactionConnectorService } from "./transaction-connector.service";
+import { CreatePaymentLinkResult } from "@colijnit/transactionapi/build/model/create-payment-link-result.bo";
 export declare class PaymentService {
     private _connector;
     constructor(_connector: TransactionConnectorService);
     createOutstandingEntry(uuid: string, amount: number): Promise<boolean>;
-    registerSalesOrderPayment(uuid: string, amount: number, currencyCode: number, paymentMethod: string, cashRegisterGroupId: number): Promise<boolean>;
+    registerSalesOrderPayment(uuid: string, amount: number, currencyId: number, paymentMethod: string, cashRegisterGroupId: number): Promise<boolean>;
+    createIonePaymentLinkAndQRCode(uuid: string, amount: number, paymentMethodCode: string): Promise<CreatePaymentLinkResult>;
     getPaymentMethods(): Promise<PaymentMethod[]>;
 }