@colijnit/transaction 12.1.22 → 12.1.25

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

@@ -2,23 +2,21 @@
   .co-transaction-search-tile {
     .co-transaction-search-tile-content {
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+      font-family: $tp-transaction-tile-font-family;
+      font-size: $tp-transaction-tile-font-size;
+      line-height: $tp-transaction-tile-line-height;
       height: $tp-transaction-tile-height;
 
       @media(max-width: 600px) {
-        width: 85vw;
+        width: $tp-transaction-tile-width-mobile;
       }
 
       @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;
@@ -31,78 +29,112 @@
         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;
+      }
 
-        co-avatar {
-          width: $tp-transaction-tile-avatar-width;
-          height: $tp-transaction-tile-avatar-height;
-        }
+      .label {
+        font-size: $tp-transaction-tile-font-size-small;
+      }
 
-        .transaction-tile-seller-info {
-          display: flex;
-          flex-direction: column;
-          row-gap: $tp-transaction-tile-row-gap;
-          max-width: 50%;
+      .value {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        min-width: max-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;
         }
+      }
 
-        .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;
-          }
-        }
+      //grid
+      .tile {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1.5fr 1.5fr 1fr;
+        gap: 10px 10px;
+        height: $tp-transaction-tile-content-height;
+      }
+
+      .tile-header {
+        display: grid;
+        grid-template-columns: 0.4fr 1.4fr 1.2fr;
+        grid-template-rows: 1.5fr;
+        gap: 0 10px;
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      .tile-upper-left {
+        grid-area: 1 / 1 / 2 / 2;
       }
 
-      .transaction-tile-footer {
+      .tile-upper-middle {
+        grid-area: 1 / 2 / 2 / 3;
         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;
-              }
-            }
-          }
-        }
+        flex-direction: column;
+        row-gap: 3px;
       }
-    }
 
+      .tile-upper-right {
+        grid-area: 1 / 3 / 2 / 4;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        row-gap: 3px;
+      }
+
+
+      .tile-body {
+        display: grid;
+        grid-template-columns: 0.4fr 2.6fr 0fr;
+        grid-template-rows: 1.5fr;
+        gap: 0 10px;
+        grid-area: 2 / 1 / 3 / 2;
+      }
+
+      .tile-middle-left {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      .tile-middle-middle {
+        grid-area: 1 / 2 / 2 / 3;
+        overflow: hidden;
+      }
+
+      .tile-middle-right {
+        grid-area: 1 / 3 / 2 / 4;
+      }
+
+      .tile-footer {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 1fr;
+        gap: 0 15px;
+        grid-area: 3 / 1 / 4 / 2;
+      }
+
+      .tile-bottom-left {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      .tile-bottom-middle {
+        grid-area: 1 / 2 / 2 / 3;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .tile-bottom-right {
+        grid-area: 1 / 3 / 2 / 4;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+    }
   }
 }

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

@@ -12,27 +12,29 @@
         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;
-          }
+      .tile-bottom-left {
+        border-right: 1px solid $tp-transaction-tile-border-color;
+      }
+
+      .tile-bottom-right {
+        border-left: 1px solid $tp-transaction-tile-border-color;
+      }
+
+      .order-info-section {
+        .label {
+          color: $tp-transaction-tile-font-color;
+        }
 
-          .value {
-            color: $tp-transaction-tile-font-color-dark;
+        .value {
+          color: $tp-transaction-tile-font-color-dark;
 
-            .lock-icon [fill] {
-              fill: $tp-transaction-tile-icon-active-color;
-            }
+          .lock-icon [fill] {
+            fill: $tp-transaction-tile-icon-active-color;
+          }
 
-            .unlock-icon [fill] {
-              fill: $tp-transaction-tile-icon-inactive-color;
-            }
+          .unlock-icon [fill] {
+            fill: $tp-transaction-tile-icon-inactive-color;
           }
         }
       }
@@ -40,13 +42,13 @@
 
     &:hover {
       .co-transaction-search-tile-content {
-        background-color: $tp-transaction-tile-hover-background-color;
+        background-color: $tp-transaction-tile-background-color-hover;
       }
     }
 
     &.selected {
       .co-transaction-search-tile-content {
-        background-color:$tp-transaction-tile-selected-background-color;
+        background-color: $tp-transaction-tile-background-color-selected;
       }
     }
   }

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

@@ -0,0 +1,162 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-tile-layout') {
+  .co-transaction-tile {
+
+    .transaction-tile-wrapper {
+      //max-width: 500px;
+      background: white;
+      border-radius: 11px;
+      border: 1px solid #5fdbb2;
+      padding: 12px 12px 12px 19px;
+    }
+
+    .header-row {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+
+      .header-transport-container {
+        display: flex;
+        flex-direction: row;
+
+        .transport-method-icon {
+          width: 40px;
+          height: 40px;
+          margin: -10px 5px -10px 0;
+        }
+
+        .transport-method-text {
+          font-family: $tp-font-family;
+          font-size: 12px;
+        }
+      }
+
+      .header-date {
+        font-family: $tp-font-family;
+        font-size: 12px;
+        color: #5fdbb2;
+      }
+
+      .header-side-panel-button {
+        cursor: pointer;
+      }
+    }
+
+    .transaction-details-row {
+      display: flex;
+      height: 60px;
+      justify-content: space-between;
+
+      .transaction-details-container {
+        display: flex;
+        flex-direction: column;
+        width: 75%;
+
+        .transaction-tile-title {
+          font-family: $tp-font-family;
+          font-size: 12px;
+          margin-bottom: 5px;
+          overflow-x: clip;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .transaction-tile-description {
+          font-family: $tp-font-family;
+          font-size: 12px;
+          overflow-y: hidden;
+          color: #7d81a1;
+        }
+      }
+
+      .tile-image {
+        margin-right: 5px;
+        width: 60px;
+        height: 60px;
+      }
+    }
+
+    .transaction-order-status-row {
+      display: flex;
+      width: 100%;
+      padding: 10px;
+      justify-content: flex-end;
+
+      .indicators-wrapper {
+        display: flex;
+        min-width: 70px;
+
+        .transaction-order-status-indicator {
+          width: 12px;
+          height: 8px;
+          margin: 1px;
+        }
+      }
+    }
+
+    .transaction-data-row {
+      display: flex;
+      width: 100%;
+
+      .transaction-data-header {
+        width: inherit;
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .transaction-data-header-label {
+        font-family: $tp-font-family;
+        font-size: 10px;
+        color: #7d81a1;
+      }
+
+      .transaction-data-header-field {
+        font-family: $tp-font-family;
+        font-size: 12px;
+        overflow-x: clip;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .transaction-data-header-divider {
+        display: flex;
+        border-right: 2px solid #ebebeb;
+        margin: 5px;
+      }
+
+      .transaction-data-header-item {
+        display: flex;
+        flex-direction: column;
+        row-gap: 10px;
+
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+      }
+    }
+
+    .center {
+      align-items: center;
+    }
+
+    .bold {
+      font-weight: bold;
+    }
+
+    .amount-input {
+      width: 26px;
+      text-align: center;
+    }
+
+    .mutable {
+      padding: 4px 11px;
+      border-radius: 9px;
+      background: #f5f5fa;
+      margin-left: 3%;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-tile') {
+  .co-transaction-tile {
+
+  }
+}

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

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

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

@@ -0,0 +1,23 @@
+import { EventEmitter } from "@angular/core";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { IconCacheService } from "../../service/icon-cache.service";
+import { Icon } from "../../enum/icon.enum";
+import { TransactionImageService } from "../../service/transaction-image.service";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+export declare class TransactionTileComponent {
+    iconCacheService: IconCacheService;
+    private _imageService;
+    readonly icon: typeof Icon;
+    readonly transactionTypes: typeof TransactionKind;
+    transactionType: TransactionKind;
+    set transactionLine(value: TransactionLineInfo);
+    get transactionLine(): TransactionLineInfo;
+    showSidePanelClicked: EventEmitter<TransactionLineInfo>;
+    image: string;
+    private _transactionLine;
+    showClass(): boolean;
+    constructor(iconCacheService: IconCacheService, _imageService: TransactionImageService);
+    handleSidePanelButtonClicked(): void;
+    getStatusColor(n: number): string;
+    private _loadLineImage;
+}

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

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

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

@@ -14,6 +14,7 @@ export declare enum Icon {
     CartShoppingSolid = "cart_shopping_solid",
     CashRegister = "cash_register",
     CreditCardSolid = "credit_card_solid",
+    DeliveryStatusUncheck = "delivery_status_uncheck",
     DeliveryTruck = "delivery_truck",
     EditPencil = "edit_pencil",
     IdealLogo = "ideal_logo",
@@ -33,6 +34,8 @@ export declare enum Icon {
     ShelvesSolid = "shelves_solid",
     SidePanel = "side_panel",
     SlideIn = "slide_in",
+    SquareFull = "square_full",
+    SquareFullSolid = "square_full_solid",
     SyncAlt = "sync_alt",
     Tag = "tag",
     ThickLines = "thick_lines",

package/lib/service/pending-reason.service.d.ts

@@ -6,6 +6,7 @@ import { CustomerFullObject } from "@colijnit/transactionapi/build/model/custome
 import { DialogService } from "./dialog.service";
 import { ResolveLinePendingReasonRequest } from "@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo";
 import { ArticleConnectorService } from "./article-connector.service";
+import { ResolveHeaderPendingReasonRequest } from "@colijnit/transactionapi/build/model/resolve-header-pending-reason-request.bo";
 export declare class PendingReasonService {
     protected dialogService: DialogService;
     protected options: OptionsService;
@@ -20,10 +21,14 @@ export declare class PendingReasonService {
     init(options: any): Promise<void>;
     cancelAddTransactionLine(lineUuid: string, remember?: boolean): Promise<TransactionInfoResponse>;
     protected handleLineOperationStatuses(response: TransactionInfoResponse): Promise<boolean>;
+    protected handleHeaderOperationStatuses(response: TransactionInfoResponse): Promise<boolean>;
     protected _rememberCurrentTransaction(value: TransactionInfoResponse): Promise<void>;
     private _handleLineOperationStatus;
+    private _handleHeaderOperationStatus;
     resolvePendingLineReason(pendingLineValues: ResolveLinePendingReasonRequest): Promise<void>;
+    resolvePendingHeaderReason(pendingHeaderValues: ResolveHeaderPendingReasonRequest): Promise<boolean>;
     private _confirmAction;
+    private _confirmHeaderAction;
     private _showReasonDialog;
     private _setAmount;
     private _initializeTransaction;

package/lib/service/transaction-connector.service.d.ts

@@ -44,6 +44,7 @@ import { GetPurchasePortalLine } from "@colijnit/transactionapi/build/model/get-
 import { PurchasePortalLine } from "@colijnit/transactionapi/build/model/purchase-portal-line.bo";
 import { CreatePaymentLinkResult } from "@colijnit/transactionapi/build/model/create-payment-link-result.bo";
 import { TransactionSearchResult } from "../model/transaction-search-result";
+import { ResolveHeaderPendingReasonRequest } from "@colijnit/transactionapi/build/model/resolve-header-pending-reason-request.bo";
 export declare class TransactionConnectorService {
     private _optionsService;
     private _collectionService;
@@ -89,6 +90,7 @@ export declare class TransactionConnectorService {
     deleteTransactionLine(uuid: string, lineUuid: string): Promise<TransactionInfoResponse>;
     changeTransactionLineQuantity(uuid: string, lineUuid: string, newQuantity: number): Promise<TransactionInfoResponse>;
     resolvePendingLineReason(pendingLineValues: ResolveLinePendingReasonRequest): Promise<TransactionInfoResponse>;
+    resolvePendingHeaderReason(pendingHeaderValues: ResolveHeaderPendingReasonRequest): Promise<TransactionInfoResponse>;
     getCommissionCodes(languageCode: string): Promise<CoDomainValue[]>;
     getInOutCollection(languageCode: string): Promise<CoDomainValue[]>;
     getTransactionArticleWarehouses(goodId: number): Promise<TransactionArticleWarehouse[]>;
@@ -115,6 +117,7 @@ export declare class TransactionConnectorService {
     changeTransactionLineSupplierArticleNumber(uuid: string, lineUuid: string, articleNumber: string): Promise<TransactionInfoResponse>;
     changeTransactionLineReference(uuid: string, lineUuid: string, reference: string): Promise<TransactionInfoResponse>;
     changeHeaderTransactionDefinitive(uuid: string, definitive: boolean): Promise<TransactionInfoResponse>;
+    changeHeaderTransactionDeliveryDate(uuid: string, date: Date): Promise<TransactionInfoResponse>;
     changeTransactionLineCollectionCode(uuid: string, lineUuid: string, code: string): Promise<TransactionInfoResponse>;
     createOutstandingEntry(uuid: string, amount: number): Promise<TransactionInfoResponse>;
     registerSalesOrderPayment(uuid: string, amount: number, currencyId: number, paymentMethod: string, cashRegisterGroupId: number): Promise<TransactionInfoResponse>;

package/lib/service/transaction.service.d.ts

@@ -46,6 +46,7 @@ export declare class TransactionService extends PendingReasonService {
     updatePriceTransactionLine(uuid: string, lineUuid: string, price: number): Promise<boolean>;
     updateReferenceTransactionLine(uuid: string, lineUuid: string, reference: string): Promise<boolean>;
     updateHeaderTransactionDefinitive(uuid: string, definitive: boolean): Promise<boolean>;
+    updateHeaderTransactionDeliveryDate(uuid: string, date: Date): Promise<boolean>;
     updateQuantityTransactionLine(uuid: string, lineUuid: string, quantity: number): Promise<boolean>;
     updateDeliveryDateTransactionLine(uuid: string, lineUuid: string, date: Date): Promise<boolean>;
     updatePriceListTransactionLine(uuid: string, lineUuid: string, priceList: string): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/transaction",
-  "version": "12.1.22",
+  "version": "12.1.25",
   "description": "Colijn IT transaction module for Angular 12",
   "private": false,
   "peerDependencies": {