@colijnit/transaction 256.1.13 → 256.1.15

package/lib/component/avatar/avatar.component.d.ts

@@ -34,4 +34,5 @@ export declare class AvatarComponent implements OnInit {
     private _setRelationInitials;
     private _getImageContent;
     private _setBackgroundColor;
+    private _detectChanges;
 }

package/lib/component/purchase-confirmation-lines/style/_layout.scss

@@ -46,19 +46,18 @@
   .purchase-confirmation-lines-drag-drop-list.cdk-drop-list-dragging .draggable-confirmation-line:not(.cdk-drag-placeholder) {
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
+  .purchase-confirmation-lines-drag-drop-list {
+    padding: 30px 15px;
+    background: #FFF;
+    border-radius: 5px;
+  }
   .purchase-confirmation-table {
     width: 100%;
     border-collapse: collapse;
     text-align: left;
-
-    td, th {
-      padding: 0 5px;
-    }
-
-    .right-align {
-      text-align: end;
-      white-space: nowrap;
-    }
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
   }
   .purchase-confirmation-line-drag-handle.co-icon {
     cursor: grab;
@@ -68,27 +67,73 @@
   .draggable-purchase-confirmation-line {
     font-family: $tp-co-purchase-confirmation-font-family;
     font-size: $tp-co-purchase-confirmation-font-size;
-    //display: flex;
-    //align-items: center;
     height: $tp-co-purchase-confirmation-height;
-    margin-bottom: 5px;
-    //.confirmation-wrapper {
-    //  width: 100%;
-    //  display: grid;
-    //  align-items: center;
-    //  grid-template-columns:
-    //          minmax(auto, $tp-co-purchase-confirmation-quantity-width)
-    //          minmax(auto, $tp-co-purchase-confirmation-article-nr-width)
-    //          minmax(auto, $tp-co-purchase-confirmation-description-width)
-    //          minmax(auto, $tp-co-purchase-confirmation-date-width)
-    //          minmax(auto, $tp-co-purchase-confirmation-price-width)
-    //          minmax(auto, $tp-co-purchase-confirmation-link-button-width);
-    //  grid-column-gap: $tp-co-purchase-confirmation-column-gap;
-    //}
+    border-width: $tp-co-draggable-purchase-confirmation-border-width;
+    border-style: solid;
+    border-color: $tp-co-draggable-purchase-confirmation-border-color;
+    border-radius: $tp-co-draggable-purchase-confirmation-border-radius;
+    padding: $tp-co-draggable-purchase-confirmation-padding;
+    position: relative;
     .link-button {
       cursor: pointer;
       text-align: center;
       vertical-align: middle;
+      position: absolute;
+      right: $tp-co-draggable-purchase-confirmation-link-right;
+      top: $tp-co-draggable-purchase-confirmation-link-top;
+      co-button {
+        width: $tp-co-draggable-purchase-confirmation-link-icon-size;
+        height: $tp-co-draggable-purchase-confirmation-link-icon-size;
+      }
+    }
+    .draggable-color-drag {
+      position: absolute;
+      left: $tp-co-draggable-purchase-confirmation-color-right;
+      height: 100%;
+      top: $tp-co-draggable-purchase-confirmation-color-top;
+      display: flex;
+      align-items: center;
+      .color-drag {
+        height: 100%;
+        width: $tp-co-draggable-purchase-confirmation-color-width;
+        border-radius: $tp-co-draggable-purchase-confirmation-color-border-radius;
+      }
+    }
+    .draggable-content-line {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+    }
+    .draggable-description {
+      font-size: $tp-co-draggable-purchase-confirmation-description-font-size;
+      height: $tp-co-draggable-purchase-confirmation-description-height;
+      line-height: $tp-co-draggable-purchase-confirmation-description-height;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: $tp-co-draggable-purchase-confirmation-description-padding;
+    }
+    .draggable-top-line {
+      display: flex;
+      flex-direction: column;
+      gap: $tp-co-draggable-purchase-confirmation-top-line-gap;
+    }
+    .draggable-bottom-line {
+      display: flex;
+      justify-content: space-between;
+      > div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $tp-co-draggable-purchase-confirmation-bottom-line-gap;
+      }
+      label {
+        font-size: $tp-co-draggable-purchase-confirmation-bottom-label-font-size;
+        color: $tp-co-draggable-purchase-confirmation-bottom-label-font-color;
+      }
     }
   }
 

package/lib/component/purchase-confirmation-lines/style/_material-definition.scss

@@ -7,7 +7,7 @@ $tp-co-purchase-confirmation-header-font-weight: bold !default;
 $tp-co-purchase-confirmation-header-height: 50px !default;
 
 $tp-co-purchase-confirmation-background: white !default;
-$tp-co-purchase-confirmation-height: 50px !default;
+$tp-co-purchase-confirmation-height: 120px !default;
 $tp-co-purchase-confirmation-drag-handle-width: 30px !default;
 
 $tp-co-purchase-confirmation-icon-size: 40px !default;
@@ -22,3 +22,23 @@ $tp-co-purchase-confirmation-link-button-width: 50px !default;
 $tp-co-purchase-confirmation-column-gap: 10px !default;
 
 $tp-co-purchase-confirmation-linked-color-width: 10px !default;
+
+$tp-co-draggable-purchase-confirmation-border-width: 1px !default;
+$tp-co-draggable-purchase-confirmation-border-color: #cccccc !default;
+$tp-co-draggable-purchase-confirmation-border-radius: 5px !default;
+$tp-co-draggable-purchase-confirmation-padding: 15px 30px 15px 45px !default;
+$tp-co-draggable-purchase-confirmation-link-right: 5px !default;
+$tp-co-draggable-purchase-confirmation-link-top: 5px !default;
+$tp-co-draggable-purchase-confirmation-link-icon-size: 26px !default;
+$tp-co-draggable-purchase-confirmation-color-right: 0px !default;
+$tp-co-draggable-purchase-confirmation-color-top: 0px !default;
+$tp-co-draggable-purchase-confirmation-color-border-radius: 5px 0 0 5px !default;
+$tp-co-draggable-purchase-confirmation-color-width: 5px !default;
+$tp-co-draggable-purchase-confirmation-description-font-size: 14px !default;
+$tp-co-draggable-purchase-confirmation-description-height: 17px !default;
+$tp-co-draggable-purchase-confirmation-description-padding: 0 10px 0 0 !default;
+$tp-co-draggable-purchase-confirmation-top-line-gap: 3px !default;
+$tp-co-draggable-purchase-confirmation-bottom-line-gap: 2px !default;
+$tp-co-draggable-purchase-confirmation-bottom-label-font-size: 10px !default;
+$tp-co-draggable-purchase-confirmation-bottom-label-font-color: #8083A3 !default;
+

package/lib/component/service-wizard-qa/question-answer-item/style/_material-definition.scss

@@ -7,7 +7,7 @@ $tp-co-purchase-confirmation-header-font-weight: bold !default;
 $tp-co-purchase-confirmation-header-height: 50px !default;
 
 $tp-co-purchase-confirmation-background: white !default;
-$tp-co-purchase-confirmation-height: 50px !default;
+$tp-co-purchase-confirmation-height: 120px !default;
 $tp-co-purchase-confirmation-drag-handle-width: 30px !default;
 
 $tp-co-purchase-confirmation-icon-size: 40px !default;

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

@@ -2,6 +2,79 @@
 
 @include export-module('co-transaction-overview-line-layout') {
   .co-transaction-overview-line {
+    .co-transaction-base-line {
+      .line-start {
+        width: 350px;
+      }
+      .line-end {
+        width: calc(100% - 350px);
+        max-width: 100%;
+        gap: 10px;
+      }
+    }
+    .transaction-base-line-section {
+      .transaction-line-description {
+        .article-text-expand {
+          &.large-article {
+            max-height: 0;
+          }
+        }
+        .description-wrapper {
+          gap: 10px;
+          justify-content: space-between;
+        }
+        .transaction-line-article-number-wrapper {
+          gap: 10px;
+          font-size: 10px;
+          align-items: center;
+          .delete-icon {
+            height: 12px;
+            width: 11px;
+          }
+        }
+      }
+      .transaction-field-label {
+        display: none;
+      }
+      .transaction-line-extended-wrapper {
+        gap: 10px;
+        .column1 {
+          flex-wrap: wrap;
+          max-width: 130px;
+          margin-right: 0;
+          gap: 10px;
+        }
+        .column2 {
+          max-width: 100%;
+          flex-direction: row;
+          flex-wrap: wrap;
+          margin-right: 0;
+          gap: 10px;
+          .co-transaction-button {
+            width: 100%;
+            max-width: 150px;
+          }
+        }
+        .column3 {
+          flex-direction: row;
+          flex-wrap: wrap;
+          margin-right: 0;
+          gap: 10px;
+        }
+        .column4 {
+          display: flex;
+          grid-row-gap: 5px;
+          row-gap: 5px;
+          grid-column-gap: 15px;
+          column-gap: 15px;
+          margin-right: 0;
+          flex: 2;
+          position: relative;
+          flex-wrap: wrap;
+          gap: 10px;
+        }
+      }
+    }
 
     .transaction-line-section {
       display: flex;
@@ -15,11 +88,63 @@
       display: flex;
       align-items: center;
       column-gap: $tp-default-column-gap;
-      height: $tp-transaction-default-button-height;
       .co-input-date {
         height: auto;
         padding: 0;
       }
     }
+    .transaction-field-wrapper {
+      flex: 1;
+      .inside-field {
+        position: relative;
+      }
+      .transaction-inside-label {
+        position: absolute;
+        transform: translateX(-50%);
+        top: -5px;
+        left: 50%;
+        font-size: 8px;
+        color: #171721;
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        background: #FFF;
+        padding: 0 10px;
+        z-index: 2;
+      }
+      .co-transaction-button {
+        height: 30px;
+        &.big {
+          width: 100%;
+          max-width: 150px;
+        }
+      }
+      .co-input-number-picker {
+        width: 100%;
+        max-width: 100px;
+        height: 30px;
+        .co-button {
+          background-color: transparent;
+        }
+        input {
+          font-size: 11px;
+        }
+      }
+      .transaction-line-totals-price,
+      .transaction-line-totals-discount,
+      .transaction-line-totals-total,
+      .transaction-line-confirmed-price,
+      .transaction-line-purchase-price,
+      .transaction-line-purchase-description,
+      .co-transaction-line-vat-button, {
+        white-space: nowrap;
+        height: 30px;
+        font-weight: 600;
+        font-size: 11px;
+        max-width: 100px;
+        width: 100%;
+      }
+    }
   }
 }

package/lib/component/transaction-line/transaction-overview-line/transaction-overview-line.component.d.ts

@@ -29,6 +29,7 @@ export declare class TransactionOverviewLineComponent extends TransactionBaseCom
     handleMouseLeave(event: MouseEvent): void;
     stock: StockStatus;
     mouseOver: boolean;
+    noLabel: boolean;
     statusBarConfigNames: StatusBarCfgNames;
     discountConfigNames: LineDiscountCfgNames;
     constructor(transactionEventService: TransactionEventService, iconCacheService: IconCacheService, screenConfigService: TransactionScreenConfigurationService, orderLineSetService: OrderLineSetService, imageService: TransactionImageService, dictionaryService: DictionaryService, transactionService: TransactionService, changeDetector: ChangeDetectorRef);

package/lib/component/transaction-line-action-buttons/style/_layout.scss

@@ -29,7 +29,7 @@
       display: flex;
       position: fixed;
       flex-direction: column;
-      z-index: 1;
+      z-index: 2;
       animation: buttonsIn 0.5s forwards;
       overflow: hidden;
       max-height: 0;

package/lib/component/transaction-line-fields/transaction-line-warehouse-location.component.d.ts

@@ -18,11 +18,14 @@ export declare class TransactionLineWarehouseLocationComponent extends Transacti
     protected imageService: TransactionImageService;
     protected changeDetector: ChangeDetectorRef;
     private _articleService;
-    warehouseNr: number;
+    set warehouseNr(value: number);
+    get warehouseNr(): number;
     protected codeField: string;
     protected checkField: string;
     protected propsForLabel: CheckboxListPropertyInterface[];
+    private _warehouseNr;
     constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, transactionScreenConfigurationService: TransactionScreenConfigurationService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _articleService: ArticleService);
     ngOnInit(): void;
     commit(locationNr: string): Promise<boolean>;
+    private _getLocations;
 }

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

@@ -7,6 +7,7 @@ import { TransactionScreenConfigurationService } from '../../../service/transact
 import { DeliveryPlanningService } from "../../delivery-planning/service/delivery-planning.service";
 import { TransactionService } from "../../../service/transaction.service";
 import { DialogService } from "../../../service/dialog.service";
+import { BatchTransactionSendingRequest } from "@colijnit/transactionapi/build/model/batch-transaction-sending-request";
 export declare class TransactionSearchResultComponent implements OnInit, OnChanges, OnDestroy {
     searchService: TransactionSearchService;
     screenConfigService: TransactionScreenConfigurationService;
@@ -31,6 +32,7 @@ export declare class TransactionSearchResultComponent implements OnInit, OnChang
     showBatchOptions: boolean;
     showShippingMethodDialog: boolean;
     selectedTransactions: TransactionSearchView[];
+    batchTransactionSendingRequest: BatchTransactionSendingRequest;
     private _activeContentViewMode;
     private _fullscreen;
     private _subs;
@@ -52,7 +54,7 @@ export declare class TransactionSearchResultComponent implements OnInit, OnChang
     onProcessOrders(): Promise<void>;
     onSelectAllOrders(allSelected: boolean): void;
     shippingDialogCancelClicked(): void;
-    shippingDialogSaveClicked(): void;
+    shippingDialogSaveClicked(request: BatchTransactionSendingRequest): void;
     private _createRequestLines;
     private _showBatchOptions;
 }

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

@@ -6,7 +6,7 @@
       font-size: $tp-transaction-tile-font-size;
       line-height: $tp-transaction-tile-line-height;
       height: $tp-transaction-tile-height;
-
+      position: relative;
       @media(max-width: 600px) {
         width: $tp-transaction-tile-width-mobile;
       }
@@ -30,18 +30,6 @@
         display: flex;
         align-items: center;
         column-gap: 10px;
-
-        .type-indicator {
-          width: 20px;
-          height: 20px;
-          font-size: 10px;
-          color: white;
-          background-color: #569eee;
-          border-radius: 9px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
       }
 
       .text {
@@ -53,23 +41,60 @@
         display: -webkit-box;
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
+        font-size: 11px;
       }
 
       co-avatar {
         width: $tp-transaction-tile-avatar-width;
         height: $tp-transaction-tile-avatar-height;
+        background: #F4F4F9;
+        .co-image-display {
+          width: $tp-transaction-tile-avatar-width;
+          height: $tp-transaction-tile-avatar-height;
+        }
       }
 
       .status-bar-wrapper {
+        .co-statusbar-wrapper {
+          height: auto;
+          .statuses {
+            gap: 1px;
+          }
+          .co-linear-gauge {
+            .linear-gauge {
+              margin: 0;
+              border-radius: 0;
+              min-width: 11px;
+              height: 11px;
+            }
+          }
+        }
+      }
+      .type-indicator {
         position: absolute;
+        left: 0;
         top: 0;
-        right: 0;
+        height: 100%;
+        width: 5px;
+        border-radius: 5px 0 0 5px;
+        &.color-V {
+          background: #569eee;
+        }
+        &.color-I {
+          background: #45b8bf;
+        }
+        &.color-S {
+          background: #d0a46b;
+        }
+        &.color-O {
+          background: #8083a3;
+        }
+        &.color-K {
+          background: #0b378c;
+        }
       }
-
       .total-price-vat {
-        position: absolute;
-        top: 17px;
-        right: 0;
+
       }
 
       .label {
@@ -79,11 +104,11 @@
       .value {
         display: flex;
         flex-direction: row;
-        align-items: flex-end;
+        align-items: center;
         min-width: max-content;
         font-size: $tp-transaction-tile-font-size-small;
-        height: $tp-transaction-tile-value-height;
-
+        line-height: $tp-transaction-tile-value-height;
+        gap: 5px;
         co-icon {
           height: $tp-transaction-tile-icon-height;
           width: $tp-transaction-tile-icon-width;
@@ -100,45 +125,65 @@
       }
 
       .tile-header {
-        display: grid;
-        grid-template-columns: 0.4fr 2.4fr 1.2fr;
-        grid-template-rows: 1.5fr;
-        gap: 0 10px;
-        grid-area: 1 / 1 / 2 / 2;
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        align-items: center;
+      }
+      .transaction-tile-avatar {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        span {
+          font-weight: 600;
+        }
       }
-
       .tile-upper-left {
-        grid-area: 1 / 1 / 2 / 2;
+
       }
 
       .tile-upper-middle {
-        grid-area: 1 / 2 / 2 / 3;
         display: flex;
-        flex-direction: column;
-        row-gap: 3px;
+        flex-direction: row;
+        align-items: center;
+        gap: 5px;
+        co-icon {
+          width: 14px;
+          height: 14px;
+        }
+        .text {
+          line-height: 14px;
+          font-weight: 600;
+        }
       }
 
       .tile-upper-right {
-        grid-area: 1 / 3 / 2 / 4;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
-        row-gap: 3px;
         position: relative;
       }
 
 
       .tile-body {
         display: grid;
-        grid-template-columns: 0.4fr 2.6fr 0fr;
-        grid-template-rows: 1.5fr;
+        grid-template-columns: 24px 2.6fr 0fr;
         gap: 0 10px;
-        grid-area: 2 / 1 / 3 / 2;
         align-items: center;
       }
 
       .tile-middle-left {
         grid-area: 1 / 1 / 2 / 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        co-input-checkbox {
+          .checkbox {
+            width: 16px;
+            height: 16px;
+            margin: 0;
+          }
+        }
       }
 
       .tile-middle-middle {
@@ -151,29 +196,38 @@
       }
 
       .tile-footer {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-template-rows: 1fr;
-        gap: 0 15px;
-        grid-area: 3 / 1 / 4 / 2;
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        align-items: center;
+        padding-left: 5px;
       }
 
       .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;
+
+      }
+      .order-info-section {
         display: flex;
-        flex-direction: column;
-        align-items: flex-end;
+        align-items: center;
+        gap: 5px;
+        co-icon {
+          width: 14px;
+          height: 14px;
+          &.unlock-icon, &.lock-icon {
+            position: relative;
+            left: -5px;
+          }
+        }
       }
     }
   }

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

@@ -4,8 +4,8 @@ $tp-transaction-tile-background-color-selected: $tp-color-select !default;
 
 $tp-transaction-tile-font-family: $tp-font-family !default;
 $tp-transaction-tile-font-size: $tp-font-size !default;
-$tp-transaction-tile-height: 150px !default;
-$tp-transaction-tile-content-height: 130px !default;
+$tp-transaction-tile-height: auto !default;
+$tp-transaction-tile-content-height: 90px !default;
 $tp-transaction-tile-body-height: 100px !default;
 $tp-transaction-tile-width: 300px !default;
 $tp-transaction-tile-width-mobile: 85 vw !default;
@@ -13,7 +13,9 @@ $tp-transaction-tile-padding: 10px 15px !default;
 $tp-transaction-tile-row-gap: 10px !default;
 $tp-transaction-tile-column-gap: 10px !default;
 $tp-transaction-tile-font-size-small: $tp-font-size-small !default;
-$tp-transaction-tile-font-color: #6E7694 !default;
+$tp-transaction-tile-font-color: #171721 !default;
+$tp-transaction-tile-left-border-size: 0 0 0 0 !default;
+$tp-transaction-tile-right-border-size: 0 0 0 0 !default;
 $tp-transaction-tile-font-color-dark: $tp-color-font !default;
 $tp-transaction-tile-header-font-size: $tp-font-size !default;
 $tp-transaction-tile-header-font-weight: bold !default;
@@ -21,15 +23,16 @@ $tp-transaction-tile-header-font-color: $tp-color-font !default;
 $tp-transaction-tile-footer-border-color: $tp-transaction-tile-font-color !default;
 $tp-transaction-tile-footer-padding: 10px 0 !default;
 $tp-transaction-tile-footer-middle-section-padding: 0 15px !default;
-$tp-transaction-tile-value-height: 20px !default;
-$tp-transaction-tile-border-color: $tp-color-border !default;
+$tp-transaction-tile-value-height: 14px !default;
+$tp-transaction-tile-border-color: #F4F4F9 !default;
+$tp-transaction-tile-box-shadow: 1px 1px 3px 1px rgb(157 157 157 / 10%) !default;
 $tp-transaction-tile-button-color: $tp-color-active-light !default;
 $tp-transaction-tile-button-border-radius: $tp-default-border-radius !default;
 $tp-transaction-tile-button-height: 25px !default;
 $tp-transaction-tile-button-margin-top: 10px !default;
 $tp-transaction-tile-button-font-weight: bold !default;
-$tp-transaction-tile-avatar-height: 30px !default;
-$tp-transaction-tile-avatar-width: 30px !default;
+$tp-transaction-tile-avatar-height: 24px !default;
+$tp-transaction-tile-avatar-width: 24px !default;
 $tp-transaction-tile-icon-width: 1.2rem !default;
 $tp-transaction-tile-icon-height: 1.2rem !default;
 $tp-transaction-tile-icon-active-color: $tp-color-active !default;

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

@@ -3,7 +3,7 @@
     .co-transaction-search-tile-content {
       background-color: $tp-transaction-tile-background-color;
       border: 1px solid $tp-transaction-tile-border-color;
-
+      box-shadow: $tp-transaction-tile-box-shadow;
       .header {
         color: $tp-transaction-tile-header-font-color;
       }
@@ -14,11 +14,15 @@
 
 
       .tile-bottom-left {
-        border-right: 1px solid $tp-transaction-tile-border-color;
+        border-width: $tp-transaction-tile-left-border-size;
+        border-style: solid;
+        border-color: $tp-transaction-tile-border-color;
       }
 
       .tile-bottom-right {
-        border-left: 1px solid $tp-transaction-tile-border-color;
+        border-width: $tp-transaction-tile-right-border-size;
+        border-style: solid;
+        border-color: $tp-transaction-tile-border-color;
       }
 
       .order-info-section {