@colijnit/transaction 12.1.6 → 12.1.7

package/app/component/core/icon/icon.component.scss

@@ -0,0 +1,85 @@
+@import "src/style/variables";
+@import "src/style/styles";
+
+:host {
+  @extend %icon-size;
+  @extend %inline-flex;
+
+  &.dark ::ng-deep {
+    @include icon-fill($tp-color-dark);
+  }
+
+  &.light ::ng-deep {
+    @include icon-fill($tp-color-light);
+  }
+
+  &.red ::ng-deep {
+    @include icon-fill($tp-color-error);
+  }
+
+  &.grey ::ng-deep {
+    @include icon-fill($tp-color-grey);
+  }
+
+  &.action ::ng-deep {
+    @extend %cursor-pointer;
+  }
+
+  &.action-color ::ng-deep {
+    @include icon-fill($tp-color-action);
+  }
+
+  &.circle {
+    @extend %circle;
+  }
+
+  &.pico {
+    @extend %icon-size-pico;
+  }
+
+  &.nano {
+    @extend %icon-size-nano;
+  }
+
+  &.small {
+    @extend %icon-size-small;
+  }
+
+  &.big {
+    @extend %icon-size-big;
+  }
+
+  &.very-big {
+    @extend %icon-size-very-big;
+  }
+
+  &.humongous {
+    @extend %icon-size-humongous;
+  }
+
+  &.massive {
+    @extend %icon-size-massive;
+  }
+
+  &.inactive {
+    opacity: 0.25;
+  }
+
+  &.disabled {
+    opacity: 0.25 !important;
+  }
+
+  &.no-shrink {
+    @extend %flex-no-shrink;
+  }
+
+  &:hover {
+    &.action ::ng-deep {
+      @include icon-fill($tp-color-action);
+    }
+  }
+
+  ::ng-deep svg {
+    @extend %full-width-height;
+  }
+}

package/app/component/core/image-display/image-display.component.d.ts

@@ -10,4 +10,5 @@ export declare class ImageDisplayComponent {
     cover: boolean;
     pointerOnHover: boolean;
     get shouldBeHidden(): boolean;
+    showClass(): boolean;
 }

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

@@ -0,0 +1,39 @@
+@import "../../../../../style/mixin";
+
+@include export-module('co-image-display-layout') {
+  .co-image-display {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    .image-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+
+    .image {
+      height: 100%;
+      width: 100%;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center center;
+    }
+
+    &.cover-image {
+      div.image {
+        background-size: cover;
+      }
+    }
+    &.circle {
+      .img-wrapper,
+      .image {
+        border-radius: 50%;
+      }
+    }
+  }
+}

package/app/component/core/image-display/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../../style/mixin";
+
+@include export-module('co-image-display-theme') {
+  .co-image-display {
+  }
+}

package/app/component/core/image-display/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/app/component/core/relation/customer-groups.component.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter, OnInit } from "@angular/core";
+import { IOneConnectorAdapterService } from "../../../service/ione-connector-adapter.service";
+import { CustomerGroup } from "@colijnit/transactionapi/build/model/customer-group.bo";
+export declare class CustomerGroupsComponent implements OnInit {
+    private _connector;
+    required: boolean;
+    model: string;
+    modelChange: EventEmitter<CustomerGroup>;
+    customerGroups: CustomerGroup[];
+    fields: Object;
+    constructor(_connector: IOneConnectorAdapterService);
+    ngOnInit(): Promise<void>;
+}

package/app/component/core/stock-status-indicator/stock-status-indicator.component.scss

@@ -0,0 +1,45 @@
+@import "src/style/variables";
+@import "src/style/styles";
+
+:host {
+  @extend %inline-block;
+  background-color: rgba(white, 0.25);
+  width: 30px;
+  height: 20px;
+
+  > div {
+    @extend %flex-center;
+    @extend %full-width-height;
+    > div {
+      width: 5px;
+      height: 5px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      margin-right: 2px;
+    }
+
+    &.low, &.empty, &.none {
+      > div.square-1 {
+        background-color: $tp-color-stock-low;
+      }
+      > div.square-2, div.square-3 {
+        background-color: $tp-color-stock-empty;
+      }
+    }
+
+    &.medium {
+      > div.square-1, div.square-2 {
+        background-color: $tp-color-stock-medium;
+      }
+      > div.square-3 {
+        background-color: $tp-color-stock-empty;
+      }
+    }
+
+    &.high {
+      > div.square-1, div.square-2, div.square-3 {
+        background-color: $tp-color-stock-high;
+      }
+    }
+  }
+}

package/app/component/service-order/service-order.component.scss

@@ -0,0 +1,152 @@
+@import "src/style/variables";
+@import "src/style/styles";
+
+:host {
+  %transaction-tab {
+    @extend %flex-column;
+    @extend %full-width;
+    @extend %overflow-hidden;
+    padding-bottom: 60px;
+  }
+
+  @extend %transaction-tab;
+  .page-wrapper & {
+    padding: 20px;
+    margin-bottom: 60px;
+  }
+  transaction-order-totals {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .transaction-totals-show {
+    padding: 20px;
+  }
+
+  .transaction-totals-hide {
+    position: relative;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+::ng-deep #transaction_planning_agenda {
+  //transform: scale(1) translate(-50%, 0) !important;
+  top: 160px !important;
+  width: calc(100vw - 80px) !important;
+  .popup-card-title {
+    padding: 10px 20px;
+    background: $tp-color-active-light;
+    color: white;
+    .header-wrapper {
+      align-items: center !important;
+    }
+    .separator {
+      border-color: white !important;
+    }
+    .header {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    .sub-header {
+      font-size: 18px;
+      color: white !important;
+      font-weight: bold !important;
+    }
+    button-select {
+      icon {
+        [fill] {
+          fill: white;
+        }
+      }
+    }
+  }
+  .popup-card-content {
+    overflow: hidden;
+  }
+  @include screen-xs() {
+    width: 100vw !important;
+    .popup-card-content {
+      padding: 0;
+    }
+  }
+
+}
+
+$block_content_height: 60px;
+$color-border: #dedede;
+.column-separator {
+  padding-right: 25px;
+  border-right: 1px solid #0000001c;
+}
+
+.floating-icon-wrapper {
+  position: fixed;
+  bottom: 50px;
+  right: 50px;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  background: $tp-color-dark-accent;
+  height: 50px;
+  width: 50px;
+  opacity: 0.5;
+  transition: opacity 0.4s ease-in-out;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.6);
+  -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.6);
+  -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.6);
+  cursor: pointer;
+  &:hover {
+    opacity: 1;
+    transition: opacity 0.4s ease-in-out;
+  }
+  ::ng-deep icon {
+    height: 44px !important;
+    width: 44px !important;
+    color: white !important;
+    flex-shrink: 0;
+  }
+}
+.transaction-wrapper {
+  padding: 0 20px;
+}
+
+.view-mode-buttons co-button {
+  padding: 0;
+}
+
+.transaction-view {
+  display: flex;
+  margin-top: 10px;
+  justify-content: stretch;
+
+  .view-mode-buttons {
+    display: flex;
+    flex-direction: row;
+    @extend %margin-left-medium;
+    button-select {
+      ::ng-deep button-colijn {
+        border-radius: 0;
+      }
+      &:first-child {
+        margin-right: 5px;
+        ::ng-deep button-colijn {
+          @include border-left-radius(3px);
+          @include border-right-radius(3px);
+        }
+      }
+
+      &:nth-child(2) ::ng-deep button-colijn {
+        @include border-left-radius(3px);
+      }
+      &:last-child ::ng-deep button-colijn {
+        @include border-right-radius(3px);
+      }
+    }
+  }
+
+}

package/app/component/service-order/summary/transaction-delivery-summary.component.scss

@@ -0,0 +1,20 @@
+@import "src/style/variables";
+@import "src/style/styles";
+
+:host {
+  .planning-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    color: $tp-color-action;
+    margin-top: -10px;
+    font-size: 13px;
+    ::ng-deep icon {
+      cursor: pointer;
+      [fill] {
+        fill: $tp-color-action;
+      }
+    }
+  }
+}

package/app/component/service-order/summary/transaction-summary-block.component.scss

@@ -0,0 +1,107 @@
+@import "src/style/variables";
+@import "src/style/styles";
+
+$block_content_height: 60px;
+$summary-block-width: 368px;
+$summary-block-min-height: 130px;
+
+:host {
+  width: $summary-block-width;
+  min-height: $summary-block-min-height;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  //  border: 1px solid $color_border;
+  //  outline: 1px solid $color-border;
+  margin-top: 1px;
+  margin-left: 1px;
+  padding: 30px 20px;
+  .content-wrapper {
+    .value-block {
+      margin-bottom: 10px;
+      ::ng-deep .planning-wrapper {
+        justify-content: flex-start;
+        arrow-link {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .disabled-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: none;
+  }
+  &.disabled {
+    .disabled-indicator {
+      display: block;
+    }
+  }
+  ::ng-deep image-display {
+    height: $block_content_height;
+    width: $block_content_height;
+    flex-shrink: 0;
+    span {
+      display: none;
+    }
+  }
+
+  .icon-wrapper {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    background: #F8FBFA;
+    height: $block_content_height;
+    width: $block_content_height;
+    border-radius: 50%;
+    border: 1px solid $tp-color-border;
+    overflow: hidden;
+    ::ng-deep icon {
+      height: 60px !important;
+      width: 60px !important;
+      flex-shrink: 0;
+    }
+  }
+
+  .title {
+    font-size: 13px;
+    color: $tp-color-dark;
+  }
+
+  .block-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .border {
+    border-radius: 3px;
+    padding: 15px;
+    background: white;
+    border: 1px solid $tp-color-border;
+  }
+
+  .content-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+    min-height: $block_content_height;
+    height: auto;
+    width: 100%;
+  }
+
+  .header-label, .subheader-label {
+    font-size: 11px;
+    line-height: 13px;
+    color: $tp-color-label;
+  }
+
+  .header, .subheader {
+    font-size: 13px;
+    font-weight: bold;
+    color: $tp-color-dark;
+  }
+}

package/app/component/service-order/transaction-article-text/transaction-article-text.component.scss

@@ -0,0 +1,6 @@
+:host {
+  .e-toolbar-wrapper {
+    height: 50px;
+  }
+
+}

package/app/component/service-order/transaction-header-block/transaction-header-block.component.scss

@@ -0,0 +1,65 @@
+@import "src/style/variables";
+@import "src/style/styles";
+
+:host {
+  display: block;
+  padding: 15px 0 30px 0;
+  //border: 1px solid $color_border;
+}
+
+.name {
+  font-size: 13px;
+  font-weight: bold;
+  color: $tp-color-dark;
+  margin-bottom: 5px;
+}
+
+.address, .phone, .email {
+  font-size: 13px;
+  line-height: 16px;
+  color: $tp-color-label;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.link {
+  color: $tp-color-action;
+}
+.summary-block {
+  width: calc(25% - 15px);
+  border: 2px dashed #DCE4EA;
+  margin: 7px;
+  border-radius: 15px;
+  position: relative;
+  .block-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 30px 20px;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    left: -1px;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    border: 1px solid #FFF;
+    pointer-events: none;
+    border-radius: 15px;
+  }
+}
+@include screen-md {
+  .summary-block {
+    width: calc(50% - 15px);
+  }
+}
+@include screen-xs {
+  .summary-block {
+    width: calc(100%);
+    margin: 7px 0;
+  }
+}
+

package/app/component/service-order/transaction-manager/transaction-manager.component.scss

@@ -0,0 +1,52 @@
+@import "src/style/variables";
+@import "src/style/styles";
+
+::ng-deep #warehouseDialog {
+  align-items: center;
+  max-height: 100%;
+
+  ::ng-deep co-form {
+    height: 100%;
+    width: 500px;
+  }
+
+  ::ng-deep .form-content {
+    height: calc(100% - 80px);
+    width: 100%;
+
+    .message-field {
+      @extend %margin-left-medium;
+      height: 20px;
+      word-wrap: break-word;
+      white-space: normal;
+    }
+  }
+
+}
+
+co-button:not(:last-child) {
+  margin-right: 10px;
+}
+
+.commission-fields {
+  @extend %margin-left-medium;
+  justify-content: space-between;
+  margin: 10px 0 10px;
+}
+
+.warehouse-line-container {
+  @extend %flex;
+  @extend %flex-row;
+}
+
+.warehouse-description-item {
+  width: 15rem;
+}
+
+.warehouse-nr-item {
+  width: 5rem;
+}
+
+co-input-number-picker co-button {
+  max-width: 20px;
+}

package/app/component/service-order/transaction-order-line-view/transaction-order-line-view.component.scss

@@ -0,0 +1,88 @@
+@import "src/style/variables";
+@import "src/style/styles";
+
+:host {
+  display: block;
+  padding: 20px;
+
+  ::ng-deep collapseable {
+    width: 100% !important;
+  }
+}
+
+.horizontal {
+  display: flex;
+  flex-direction: row;
+}
+
+.service-request-button-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.transaction-order-line-r {
+  display: flex;
+  justify-content: stretch;
+  flex-direction: row;
+
+  @media (max-width: 800px) {
+    flex-direction: column;
+  }
+
+  .transaction-order-line-image {
+    @extend %margin-vertical-big;
+    display: flex;
+    flex: 1 0 auto !important;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-right: 10px;
+    image-display {
+      @include square(6em);
+    }
+    ::ng-deep no-image-display {
+      display: none;
+    }
+  }
+  .transaction-order-line-description {
+    @extend %margin-big;
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    max-width: 355px;
+    margin-left: 10px;
+    .cart-line-description-main {
+      font-weight: bold;
+    }
+    .cart-line-description-artnr {
+      @extend %font-small;
+    }
+  }
+  .transaction-order-line-right {
+    justify-content: flex-end;
+    align-items: center;
+    .transaction-order-line-stock {
+      @extend %margin-vertical-big;
+      width: 10em;
+    }
+
+    .transaction-order-line-amount {
+      @extend %margin-big;
+      width: 15em;
+    }
+
+    .transaction-order-line-totals {
+      display: flex;
+      @extend %margin-vertical-big;
+      @extend %margin-left-big;
+      justify-content: flex-end;
+      min-width: 100px;
+      font-weight: bold;
+
+      span {
+        text-align: right;
+      }
+    }
+  }
+}