@colijnit/transaction 12.1.23 → 12.1.24

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

@@ -17,5 +17,16 @@
         fill: white;
       }
     }
+
+    .co-image-display {
+      width: 30px;
+      height: 30px;
+      overflow: hidden;
+      border-radius: 50px;
+
+      .image {
+        object-fit: cover;
+      }
+    }
   }
 }

package/lib/component/core/image-display/style/_layout.scss

@@ -37,6 +37,7 @@
       }
       .no-image-label {
         font-size: $tp-image-display-no-image-label-font-size;
+        text-align: center;
       }
     }
 

package/lib/component/status-bar/status-bar.component.d.ts

@@ -0,0 +1,8 @@
+import { Icon } from "../../enum/icon.enum";
+import { IconCacheService } from "../../service/icon-cache.service";
+export declare class StatusBarComponent {
+    iconCacheService: IconCacheService;
+    readonly icons: typeof Icon;
+    showClass(): boolean;
+    constructor(iconCacheService: IconCacheService);
+}

package/lib/component/status-bar/status-bar.module.d.ts

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

package/lib/component/status-bar/style/_layout.scss

@@ -0,0 +1,14 @@
+@include export-module('cc-status-bar-layout') {
+  .co-status-bar {
+    .status-bar-icons-wrapper {
+      display: flex;
+      flex-direction: row;
+      column-gap: 2px;
+    }
+
+    co-icon {
+      height: $tp-status-bar-icon-height;
+      width: $tp-status-bar-icon-width;
+    }
+  }
+}

package/lib/component/status-bar/style/_material-definition.scss

@@ -0,0 +1,5 @@
+$tp-status-bar-icon-width: 0.8rem !default;
+$tp-status-bar-icon-height: 0.8rem !default;
+$tp-status-bar-icon-color: $tp-color-grey !default;
+$tp-status-bar-icon-active-color: $tp-color-active-light !default;
+$tp-status-bar-icon-warning-color: $tp-color-warning !default;

package/lib/component/status-bar/style/_theme.scss

@@ -0,0 +1,15 @@
+@include export-module('cc-status-bar-theme') {
+  .co-status-bar {
+    co-icon {
+      fill: $tp-status-bar-icon-color;
+
+      &.color-green {
+        fill: $tp-status-bar-icon-active-color;
+      }
+
+      &.color-orange {
+        fill: $tp-status-bar-icon-warning-color;
+      }
+    }
+  }
+}

package/lib/component/status-bar/style/material.scss

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

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

@@ -28,5 +28,23 @@
         justify-content: space-between;
       }
     }
+    .transaction-tiles-wrapper {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-column-gap: 5px;
+      grid-row-gap: 5px;
+
+      @media(max-width: 1500px) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      @media(max-width: 1200px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @media(max-width: 900px) {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
   }
 }

package/lib/component/transaction-grid/transaction-history-grid/style/_layout.scss

@@ -11,5 +11,19 @@
       display: flex;
       justify-content: flex-end;
     }
+
+    .row-container {
+      display: flex;
+      flex-direction: column;
+
+      .row {
+
+      }
+
+      .correction {
+        margin-top: 8px;
+        color: #DB2C2C ;
+      }
+    }
   }
 }

package/lib/component/transaction-receiving-goods-history/style/_layout.scss

@@ -3,5 +3,18 @@
 @include export-module('co-transaction-receiving-goods-history') {
   .co-transaction-receiving-goods-history {
 
+    .row-container {
+      display: flex;
+      flex-direction: column;
+
+      .row {
+
+      }
+
+      .correction {
+        margin-top: 8px;
+        color: #DB2C2C;
+      }
+    }
   }
 }

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

@@ -47,8 +47,9 @@ $tp-co-transaction-search-filter-button-size: 50px !default;
 $tp-co-transaction-search-filter-button-border-radius: 5px !default;
 
 $tp-co-transaction-search-result-width: 100% !default;
-$tp-co-transaction-search-result-wrapper-padding: 10px !default;
+$tp-co-transaction-search-result-wrapper-padding: 0 10px !default;
 $tp-co-transaction-search-result-upper-header-padding-left: 27px !default;
+$tp-co-transaction-search-result-upper-header-height: 20px !default;
 $tp-co-transaction-search-result-header-buttons-wrapper-padding: 0 27px !default;
 $tp-co-transaction-search-result-header-sidebar-button-size: 21px !default;
 
@@ -58,6 +59,9 @@ $tp-co-transaction-search-input-text-label-margin-left: 5% !default;
 
 $tp-co-transaction-search-view-modes-wrapper-padding: 0 35px !default;
 
+$tp-transaction-tile-background-color: $tp-color-light  !default;
+$tp-transaction-tile-background-color-hover: $tp-color-less-light !default;
+$tp-transaction-tile-background-color-selected: #F0F5FF !default;
 $tp-transaction-tiles-wrapper-padding: 20px !default;
 $tp-transaction-tiles-wrapper-row-gap: 5px !default;
 $tp-transaction-tiles-wrapper-width: 100% !default;
@@ -65,8 +69,10 @@ $tp-transaction-tiles-wrapper-height: 100% !default;
 $tp-transaction-tiles-wrapper-column-gap: 5px !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-height: 170px !default;
+$tp-transaction-tile-body-height: 100px !default;
 $tp-transaction-tile-width: 300px !default;
+$tp-transaction-tile-width-mobile: 85 vw !default;
 $tp-transaction-tile-padding: 10px 15px !default;
 $tp-transaction-tile-row-gap: 10px !default;
 $tp-transaction-tile-column-gap: 10px !default;
@@ -77,6 +83,8 @@ $tp-transaction-tile-header-font-size: $tp-font-size !default;
 $tp-transaction-tile-header-font-weight: bold !default;
 $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-button-color: $tp-color-active-light !default;
@@ -91,7 +99,4 @@ $tp-transaction-tile-icon-height: 1.2rem !default;
 $tp-transaction-tile-icon-active-color: $tp-color-active !default;
 $tp-transaction-tile-icon-inactive-color: $tp-color-font !default;
 
-$tp-transaction-tile-background-color: $tp-color-light  !default;
-$tp-transaction-tile-hover-background-color: $tp-color-less-light !default;
-$tp-transaction-tile-selected-background-color: #F0F5FF !default;
 

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

@@ -9,6 +9,7 @@
     .upper-header {
       display: flex;
       justify-content: flex-end;
+      height: $tp-co-transaction-search-result-upper-header-height;
       padding-left: $tp-co-transaction-search-result-upper-header-padding-left;
 
       .header-buttons-wrapper {

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

@@ -2,23 +2,18 @@
   .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;
+        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 +26,117 @@
         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;
+
+          svg {
+            position: relative;
+            top: 0.22em;
+          }
         }
+      }
 
-        .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;
+      }
+
+      .tile-header {
+        display: grid;
+        grid-template-columns: 0.4fr 1.3fr 1.3fr;
+        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;
+        flex-direction: column;
+        row-gap: 3px;
+      }
 
-        .order-info-section {
-          width: fit-content;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
+      .tile-upper-right {
+        grid-area: 1 / 3 / 2 / 4;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        row-gap: 3px;
+      }
 
-          &:nth-child(2) {
-            padding: 0 15px;
-          }
 
-          .label {
-            font-size: $tp-transaction-tile-font-size-small;
-          }
+      .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;
+      }
 
-          .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;
-              }
-            }
-          }
-        }
+      .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 {
+}