@colijnit/sharedcomponents 1.0.51 → 1.0.53

package/fesm2015/colijnit-sharedcomponents.js

@@ -24,7 +24,9 @@ import { SendMethod as SendMethod$1 } from '@colijnit/mainapi/build/model/send-m
 import { BusinessObjectFactory } from '@colijnit/ioneconnector/build/service/business-object-factory';
 import { TagTreeItem } from '@colijnit/mainapi/build/model/tag-tree-item.bo';
 import { PrintStockStickers } from '@colijnit/sharedapi/build/model/print-stock-stickers';
+import { ArticleExtended } from '@colijnit/articleapi/build/model/article-extended.bo';
 import { ArticleStock as ArticleStock$1 } from '@colijnit/articleapi/build/model/article-stock';
+import { ArticleExtendedRequest } from '@colijnit/articleapi/build/model/article-extended-request';
 import { IconModule, InputCheckboxModule, CoDialogModule, ButtonModule, ListOfValuesModule, OverlayService, ClickoutsideModule, OverlayModule, InputRadioButtonModule, SimpleGridModule, ImageModule, InputTextModule, InputNumberPickerModule, CoDialogWizardModule, InputTextareaModule, PopupModule, ResponsiveTextModule, InputDatePickerModule, InputSearchModule } from '@colijnit/corecomponents_v12';
 import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -788,6 +790,38 @@ class SharedConnectorService {
             });
         });
     }
+    getArticleFlat(sku) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getArticleFlat(sku).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject) {
+                            resolve(result.resultObject);
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    searchArticles(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.searchArticles(request, false).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObjects) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(StockManagementWarehouses, result.resultObjects));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
     getStockManagementWarehouses() {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
@@ -1064,6 +1098,16 @@ class StockService {
     commit() {
         return this._sharedService.commit();
     }
+    getArticleFlat(sku) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getArticleFlat(sku);
+        });
+    }
+    searchArticles(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.searchArticles(request);
+        });
+    }
 }
 StockService.ɵprov = i0.ɵɵdefineInjectable({ factory: function StockService_Factory() { return new StockService(i0.ɵɵinject(SharedConnectorService)); }, token: StockService, providedIn: "root" });
 StockService.decorators = [
@@ -1107,15 +1151,17 @@ LocalizeService.decorators = [
 ];
 
 class StockComponent {
-    constructor(stockService, _optionsService, _dictionary, _changeDetector, _localizeService) {
-        this.stockService = stockService;
+    constructor(_stockService, _optionsService, _dictionary, _changeDetector, _localizeService, _connector) {
+        this._stockService = _stockService;
         this._optionsService = _optionsService;
         this._dictionary = _dictionary;
         this._changeDetector = _changeDetector;
         this._localizeService = _localizeService;
+        this._connector = _connector;
         this.handleStickerClicked = new EventEmitter();
         this.okButtonClicked = new EventEmitter();
         this.cancelButtonClicked = new EventEmitter();
+        this.loaded = false;
         this.showStockInformationGrid = true;
         this.showStockTransfer = false;
         this.allAvailableStock = 0;
@@ -1128,26 +1174,31 @@ class StockComponent {
         this._localizeService.translation = value;
         this._changeDetector.markForCheck();
     }
-    set article(article) {
-        this.articleExtended = article;
-        this.getStockInformation(article);
+    set article(articleOrGoodId) {
+        if (articleOrGoodId instanceof ArticleExtended) {
+            this.articleExtended = articleOrGoodId;
+            this._goodId = articleOrGoodId.goodId;
+        }
+        else if (typeof articleOrGoodId === "number") {
+            this._goodId = articleOrGoodId;
+        }
     }
     ;
     showClass() {
         return true;
     }
     ngOnDestroy() {
+        this.articleExtended = undefined;
+        this.articleFlat = undefined;
         this._subscriptions.forEach(subscription => subscription.unsubscribe());
     }
     ngOnInit() {
-        this.getArtStockStatus();
-        this.getStockManagementWarehouses();
     }
     handleStockTransferClick(event) {
         this.stockTransferArticleDetails = event;
         this.showStockTransfer = !this.showStockTransfer;
         this.showStockInformationGrid = !this.showStockInformationGrid;
-        this.stockService.stockStickers = new PrintStockStickers();
+        this._stockService.stockStickers = new PrintStockStickers();
     }
     handleSendMethodClick(event) {
         this.showSendMethodDialog = true;
@@ -1156,23 +1207,23 @@ class StockComponent {
         this.showStockTransfer = !this.showStockTransfer;
         this.showStockInformationGrid = !this.showStockInformationGrid;
     }
-    getStockInformation(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const articleData = new ArticleStock$1();
-            articleData.goodId = data.goodId.toString();
-            articleData.viewKind = "M";
-            this.stockInformation = yield this.stockService.getStockInformation(articleData);
+    getStockInformation(goodId) {
+        const articleData = new ArticleStock$1();
+        articleData.goodId = goodId.toString();
+        articleData.viewKind = "M";
+        this._stockService.getStockInformation(articleData).then(result => {
+            this.stockInformation = result;
             this.stockInformation.forEach((articleStock) => this.allAvailableStock += articleStock.availableStock);
             this.stockInformation.forEach((articleStock) => this.allTechnicalStock += articleStock.technicalStock);
         });
     }
     getArtStockStatus() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.articleStockState = yield this.stockService.getArtStockStatus(this.articleExtended.goodId);
+        this._stockService.getArtStockStatus(this.articleExtended ? this.articleExtended.goodId : this._goodId).then(result => {
+            this.articleStockState = result;
         });
     }
     getStockManagementWarehouses() {
-        this.stockService.getStockManagementWarehouses().then((warehouses) => {
+        this._stockService.getStockManagementWarehouses().then((warehouses) => {
             this.warehouses = warehouses;
         });
     }
@@ -1185,7 +1236,7 @@ class StockComponent {
     }
     _initConnection() {
         return __awaiter(this, void 0, void 0, function* () {
-            // await this._connector.connect(this._optionsService.options);
+            yield this._connector.connect();
             if (this._optionsService.options.url) {
                 this._dictionary.rootUrl = this._optionsService.options.url.replace("/ajaxservice", "");
             }
@@ -1193,14 +1244,33 @@ class StockComponent {
             setTimeout(() => {
                 this._changeDetector.detectChanges();
             });
+            this.loaded = true;
+            this.loadData();
         });
     }
+    loadData() {
+        if (this.loaded) {
+            if (this._goodId && !this.articleExtended) {
+                let request = new ArticleExtendedRequest();
+                request.goodId = this._goodId;
+                this._stockService.searchArticles(request).then((articleExtended) => {
+                    this.articleExtended = articleExtended[0];
+                });
+            }
+            this._stockService.getArticleFlat(this.articleExtended.articleNumber).then(result => {
+                this.articleFlat = result;
+            });
+            this.getArtStockStatus();
+            this.getStockManagementWarehouses();
+            this.getStockInformation(this.articleExtended ? this.articleExtended.goodId : this._goodId);
+        }
+    }
 }
 StockComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-stock",
                 template: `
-      <div class="stock-info-container">
+      <div class="stock-info-container" *ngIf="loaded && articleExtended">
         <co-stock-information [article]="articleExtended"
                               [articleStockState]="articleStockState"
                               [allAvailableStockInformation]="allAvailableStock"
@@ -1210,6 +1280,7 @@ StockComponent.decorators = [
         <hr>
         <co-stock-tabs [stockInformation]="stockInformation"
                        [article]="articleExtended"
+                       [articleFlat]="articleFlat"
                        (transferIconClicked)="handleStockTransferClick($event)"
                        (sendMethodDialogClicked)="handleSendMethodClick($event)"
                        [warehouses]="warehouses"
@@ -1240,10 +1311,10 @@ StockComponent.ctorParameters = () => [
     { type: OptionsService },
     { type: DictionaryService },
     { type: ChangeDetectorRef },
-    { type: LocalizeService }
+    { type: LocalizeService },
+    { type: SharedConnectorService }
 ];
 StockComponent.propDecorators = {
-    stock: [{ type: ViewChild, args: [StockComponent,] }],
     translation: [{ type: Input }],
     handleStickerClicked: [{ type: Output }],
     article: [{ type: Input }],
@@ -1313,6 +1384,7 @@ const IconSvg = {
     "bring_forward_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"#183153\" d=\"M224 464H448C456.8 464 464 456.8 464 448V224C464 215.2 456.8 208 448 208H384V160H448C483.3 160 512 188.7 512 224V448C512 483.3 483.3 512 448 512H224C188.7 512 160 483.3 160 448V384H208V448C208 456.8 215.2 464 224 464zM64 352C28.65 352 0 323.3 0 288V64C0 28.65 28.65 0 64 0H288C323.3 0 352 28.65 352 64V288C352 323.3 323.3 352 288 352H64z\"/></svg>",
     "check_duotone": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><defs><style>.fa-secondary{opacity:.4}</style></defs><path class=\"fa-primary\" d=\"M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z\"/></svg>",
     "check_round": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,10A15,15,0,1,0,40,25,15,15,0,0,0,25,10ZM23,34l-6.24-9.09,2.81-3.59L23,26.45,27.66,16h5.58Z\" fill=\"#484f60\"/></svg>",
+    "cross_skinny": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\"><g ><polygon points=\"25.35 5.52 24.65 4.81 15 14.46 5.35 4.81 4.65 5.52 14.29 15.17 4.65 24.81 5.35 25.52 15 15.87 24.65 25.52 25.35 24.81 15.71 15.17 25.35 5.52\" fill=\"#484f60\"/></g></svg>",
     "delete_left_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M432.1 208.1L385.9 256L432.1 303C442.3 312.4 442.3 327.6 432.1 336.1C423.6 346.3 408.4 346.3 399 336.1L352 289.9L304.1 336.1C295.6 346.3 280.4 346.3 271 336.1C261.7 327.6 261.7 312.4 271 303L318.1 256L271 208.1C261.7 199.6 261.7 184.4 271 175C280.4 165.7 295.6 165.7 304.1 175L352 222.1L399 175C408.4 165.7 423.6 165.7 432.1 175C442.3 184.4 442.3 199.6 432.1 208.1V208.1zM512 64C547.3 64 576 92.65 576 128V384C576 419.3 547.3 448 512 448H205.3C188.3 448 172 441.3 160 429.3L9.372 278.6C3.371 272.6 0 264.5 0 256C0 247.5 3.372 239.4 9.372 233.4L160 82.75C172 70.74 188.3 64 205.3 64L512 64zM528 128C528 119.2 520.8 112 512 112H205.3C201 112 196.9 113.7 193.9 116.7L54.63 256L193.9 395.3C196.9 398.3 201 400 205.3 400H512C520.8 400 528 392.8 528 384V128z\"/></svg>",
     "delivery_truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"15.35\" y=\"16.56\" width=\"15.14\" height=\"10.94\" transform=\"translate(-1.83 2.08) rotate(-5)\" fill=\"#484f60\"/><path d=\"M38.5,18.1l-6.9.61L32.41,28l-7.63.67a3.76,3.76,0,0,1,1.43,2.25l7.25-.63A3.83,3.83,0,0,1,41,29.6l1-.1-.52-6Zm.29,5.84-3.91.34a.51.51,0,0,1-.55-.46L34,20.1a.49.49,0,0,1,.45-.54l2.27-.2a.5.5,0,0,1,.48.25l2,3.59A.5.5,0,0,1,38.79,23.94Z\" fill=\"#484f60\"/><path d=\"M19.66,29.09a3.8,3.8,0,0,0-1,2.46l-.74.07-1.82-.94L16,29.41Z\" fill=\"#484f60\"/><path d=\"M34.56,30.62a2.74,2.74,0,1,0,2.49-3A2.73,2.73,0,0,0,34.56,30.62Z\" fill=\"#484f60\"/><path d=\"M19.74,31.91a2.74,2.74,0,1,0,2.49-3A2.74,2.74,0,0,0,19.74,31.91Z\" fill=\"#484f60\"/><rect x=\"7.96\" y=\"17.63\" width=\"5\" height=\"1\" transform=\"translate(-1.54 0.98) rotate(-5)\" fill=\"#484f60\"/><rect x=\"11.02\" y=\"29.71\" width=\"3\" height=\"1\" transform=\"translate(-2.59 1.21) rotate(-5)\" fill=\"#484f60\"/><rect x=\"9.48\" y=\"23.53\" width=\"4\" height=\"1\" transform=\"matrix(1, -0.09, 0.09, 1, -2.05, 1.09)\" fill=\"#484f60\"/></svg>",
     "email": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.79,38.45A17.82,17.82,0,0,1,23.86,40,13.09,13.09,0,0,1,10.41,26.42C10.41,17.63,16.83,10,26.53,10c7.63,0,13.06,5.21,13.06,12.46,0,6.33-3.53,10.3-8.19,10.3a3.42,3.42,0,0,1-3.71-3.32h-.08A6.5,6.5,0,0,1,22,32.76c-2.75,0-4.82-2.11-4.82-5.65a9.85,9.85,0,0,1,10.13-10,12.89,12.89,0,0,1,5.13,1l-1.3,8c-.43,2.54-.13,3.71,1.08,3.75,1.85.09,4.18-2.28,4.18-7.28,0-5.65-3.62-10-10.3-10S13.73,17.76,13.73,26c0,7.25,4.57,11.3,11,11.3A14.81,14.81,0,0,0,31,36ZM28,20.65a5.34,5.34,0,0,0-1.33-.18c-2.85,0-5.09,2.81-5.09,6.12,0,1.64.73,2.68,2.16,2.68,1.59,0,3.27-2,3.66-4.53Z\" fill=\"#484f60\"/></svg>",
@@ -1396,6 +1468,7 @@ var Icon;
     Icon["BringForwardRegular"] = "bring_forward_regular";
     Icon["CheckDuotone"] = "check_duotone";
     Icon["CheckRound"] = "check_round";
+    Icon["CrossSkinny"] = "cross_skinny";
     Icon["DeleteLeftRegular"] = "delete_left_regular";
     Icon["DeliveryTruck"] = "delivery_truck";
     Icon["Email"] = "email";
@@ -1885,10 +1958,9 @@ class StockTransferComponent {
         this.getStockState();
     }
     handleOkClick(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            data.selected = true;
-            data.entryDate = new Date;
-            yield this._stockService.updateArticleDetails(data);
+        data.selected = true;
+        data.entryDate = new Date;
+        this._stockService.updateArticleDetails(data).then(result => {
             this.handleClick.emit();
         });
     }
@@ -1907,10 +1979,8 @@ class StockTransferComponent {
         this.articleToTransfer.stockStateId = event.stockStateId;
     }
     handleStickerClick() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.handleStickerClicked.emit();
-            this.showSendMethodDialog = true;
-        });
+        this.handleStickerClicked.emit();
+        this.showSendMethodDialog = true;
     }
     getStockManagementWarehouses() {
         this._stockService.getStockManagementWarehouses().then((warehouses) => {
@@ -2258,17 +2328,23 @@ SendMethodDialogComponent.decorators = [
     <co-dialog id="sendOptionsDialog" [headerTemplate]="headerTemplate" [footerTemplate]="footerTemplate"
                (closeClick)="closeClick.emit($event)">
       <ng-template #headerTemplate>
-        <div class="co-dialog-header-title" [textContent]="headerTitle"></div>
-      </ng-template>
-      <div class="dialog-content-wrapper">
-        <div class="send-methods-wrapper">
+        <div class="co-dialog-header-title-wrapper">
+          <co-icon [iconData]="iconCacheService.getIcon(icons.EnvelopeRegular)"></co-icon>
+          <div class="co-dialog-header-title" [textContent]="headerTitle"></div>
+        </div>
+        <div class="dialog-navigation-wrapper">
           <div class="send-button-wrapper" *ngFor="let sendMethod of sendMethods; let index = index"
                [class.selected]="activeSendMethod ? sendMethod.code === activeSendMethod.code : index === 0"
                (click)="handleSendMethodClick(sendMethod)">
-            <co-icon class="custom-button-icon" [iconData]="iconCacheService.getIcon(sendMethod.icon)"></co-icon>
             <div class="custom-button-title" [textContent]="sendMethod.description"></div>
           </div>
         </div>
+      </ng-template>
+
+      <div class="dialog-content-wrapper">
+        <div class="send-methods-wrapper">
+
+        </div>
         <div #navigationItems class="send-method-navigation-wrapper" [class.smooth-scrolling]="!startUp">
           <div #faxItems class="send-method-navigation-content co-small-scrollbar">
 
@@ -2301,7 +2377,12 @@ SendMethodDialogComponent.decorators = [
       </div>
       <ng-template #footerTemplate>
         <div class="co-dialog-footer-button-wrapper">
-          <co-button [label]="'Ok'" (click)="okClick.emit(activeSendMethod ? activeSendMethod.code : '0')"></co-button>
+          <co-button class="save-button"
+                     [iconData]="iconCacheService.getIcon(icons.CheckDuotone)"
+                     (click)="okClick.emit(activeSendMethod ? activeSendMethod.code : '0')"></co-button>
+          <co-button class="close-button"
+                     [iconData]="iconCacheService.getIcon(icons.CrossSkinny)"
+                     (click)="closeClick.emit($event)"></co-button>
         </div>
       </ng-template>
     </co-dialog>
@@ -2421,7 +2502,9 @@ SendMethodEmailComponent.propDecorators = {
 };
 
 class LayoutSelectionComponent {
-    constructor() {
+    constructor(iconCacheService) {
+        this.iconCacheService = iconCacheService;
+        this.icons = Icon;
         this.layouts = [];
         this.requestChange = new EventEmitter();
         this.showLayoutList = false;
@@ -2432,6 +2515,9 @@ class LayoutSelectionComponent {
     ngOnInit() {
         if (this.layouts && this.layouts.length > 0) {
             this.currentLayout = this.layouts.find(l => l.reportId === this.request.reportId);
+            if (!this.currentLayout) {
+                this.currentLayout = this.layouts[0];
+            }
         }
     }
     handleSelectLayout(reportLayout) {
@@ -2440,6 +2526,9 @@ class LayoutSelectionComponent {
         this.requestChange.emit(this.request);
         this.showLayoutList = false;
     }
+    closeSelectLayout() {
+        this.showLayoutList = false;
+    }
 }
 LayoutSelectionComponent.decorators = [
     { type: Component, args: [{
@@ -2450,6 +2539,15 @@ LayoutSelectionComponent.decorators = [
       <div class="layout-description" [textContent]="currentLayout?.description || 'Layout kiezen'"></div>
     </div>
     <div class="layouts-wrapper co-small-scrollbar" *ngIf="showLayoutList" @showHideLayouts>
+      <div class="layouts-wrapper-header">
+        <div class="title" [textContent]="'Lay-out'"></div>
+        <div class="close-layouts">
+          <div class="dialog-close-button" (click)="closeSelectLayout()">
+            <co-icon [iconData]="iconCacheService.getIcon(icons.XSolid)"></co-icon>
+          </div>
+        </div>
+      </div>
+
       <div class="layout-selection-wrapper" *ngFor="let reportLayout of layouts"
            [class.selected]="reportLayout.reportId === currentLayout?.reportId"
            (click)="handleSelectLayout(reportLayout)">
@@ -2460,7 +2558,7 @@ LayoutSelectionComponent.decorators = [
                 animations: [
                     trigger("showHideLayouts", [
                         state("void", style({ height: 0 })),
-                        state("*", style({ height: "50%" })),
+                        state("*", style({ height: "100%" })),
                         transition("void => *", animate("200ms ease-in-out")),
                         transition("* => void", animate("200ms ease-out"))
                     ])
@@ -2468,6 +2566,9 @@ LayoutSelectionComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+LayoutSelectionComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
 LayoutSelectionComponent.propDecorators = {
     request: [{ type: Input }],
     layouts: [{ type: Input }],
@@ -2480,7 +2581,8 @@ class LayoutSelectionModule {
 LayoutSelectionModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
-                    CommonModule
+                    CommonModule,
+                    IconModule
                 ],
                 declarations: [
                     LayoutSelectionComponent
@@ -2585,15 +2687,17 @@ SendMethodPrinterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-send-method-printer',
                 template: `
-    <co-printer-selection [printers]="printerList"></co-printer-selection>
-    <div class="layout-signature-wrapper">
-      <co-layout-selection
-        [(request)]="sendMethodService.reportingDocumentPrintSignDocBaseRequest"
-        [layouts]="layouts"
-      ></co-layout-selection>
-      <co-signature-button
-        [request]="sendMethodService.reportingDocumentPrintSignDocBaseRequest"
-      ></co-signature-button>
+    <div class="printer-layout-selections-wrapper">
+      <co-printer-selection [printers]="printerList"></co-printer-selection>
+      <div class="layout-signature-wrapper">
+        <co-layout-selection
+          [(request)]="sendMethodService.reportingDocumentPrintSignDocBaseRequest"
+          [layouts]="layouts"
+        ></co-layout-selection>
+        <co-signature-button
+          [request]="sendMethodService.reportingDocumentPrintSignDocBaseRequest"
+        ></co-signature-button>
+      </div>
     </div>
     <co-input-checkbox
       [model]="sendMethodService.reportingDocumentPrintSignDocBaseRequest.saveDefaultPrinterForUser"
@@ -2644,6 +2748,9 @@ class PrinterSelectionComponent {
         this.sendMethodService.reportingDocumentPrintSignDocBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintSignDocBaseRequest);
         this.showPrinterList = false;
     }
+    closePrinterClicked() {
+        this.showPrinterList = false;
+    }
 }
 PrinterSelectionComponent.decorators = [
     { type: Component, args: [{
@@ -2654,6 +2761,14 @@ PrinterSelectionComponent.decorators = [
       <div class="printer-name" [textContent]="sendMethodService.reportingDocumentPrintSignDocBaseRequest.printerName || 'Printer kiezen'"></div>
     </div>
     <div class="layouts-wrapper co-small-scrollbar" *ngIf="showPrinterList" @showHideLayouts>
+      <div class="layouts-wrapper-header">
+        <div class="title" [textContent]="'Printer'"></div>
+        <div class="close-layouts">
+          <div class="dialog-close-button" (click)="closePrinterClicked()">
+            <co-icon [iconData]="iconService.getIcon(icons.XSolid)"></co-icon>
+          </div>
+        </div>
+      </div>
       <div class="printer-list-item" *ngFor="let printer of printers"
            [class.selected]="sendMethodService.reportingDocumentPrintSignDocBaseRequest.printerName === printer.name"
            (click)="handlePrinterClicked(printer)">
@@ -2668,7 +2783,7 @@ PrinterSelectionComponent.decorators = [
                 animations: [
                     trigger('showHideLayouts', [
                         state('void', style({ height: 0 })),
-                        state('*', style({ height: '50%' })),
+                        state('*', style({ height: '100%' })),
                         transition('void => *', animate('200ms ease-in-out')),
                         transition('* => void', animate('200ms ease-out'))
                     ])
@@ -2954,78 +3069,78 @@ class StockTabsComponent {
         this.handleWarehouseSelected(this.selectedWarehouse);
     }
     getStockHistory() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.stockHistory) {
-                const stockHistoryInformation = new GetStockHistoryRequest();
-                stockHistoryInformation.type = "V";
-                stockHistoryInformation.goodId = this.article.goodId;
-                this.stockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
-            }
-        });
+        if (!this.stockHistory) {
+            const stockHistoryInformation = new GetStockHistoryRequest();
+            stockHistoryInformation.type = "V";
+            stockHistoryInformation.goodId = this.article.goodId.toString();
+            this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+                this.stockHistory = result;
+            });
+        }
     }
     getOrderSupplyStockHistory() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.orderSupplyStockHistory) {
-                const stockHistoryInformation = new GetStockHistoryRequest();
-                stockHistoryInformation.type = "O";
-                stockHistoryInformation.goodId = this.article.goodId;
-                this.orderSupplyStockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
-            }
-        });
+        if (!this.orderSupplyStockHistory) {
+            const stockHistoryInformation = new GetStockHistoryRequest();
+            stockHistoryInformation.type = "O";
+            stockHistoryInformation.goodId = this.article.goodId.toString();
+            this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+                this.orderSupplyStockHistory = result;
+            });
+        }
     }
     getOrderCommissionStockHistory() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.orderCommissionStockHistory) {
-                const stockHistoryInformation = new GetStockHistoryRequest();
-                stockHistoryInformation.type = "C";
-                stockHistoryInformation.goodId = this.article.goodId;
-                this.orderCommissionStockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
-            }
-        });
+        if (!this.orderCommissionStockHistory) {
+            const stockHistoryInformation = new GetStockHistoryRequest();
+            stockHistoryInformation.type = "C";
+            stockHistoryInformation.goodId = this.article.goodId.toString();
+            this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+                this.orderCommissionStockHistory = result;
+            });
+        }
     }
     getOrderStockHistory() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.orderStockHistory) {
-                const stockHistoryInformation = new GetStockHistoryRequest();
-                stockHistoryInformation.type = "B";
-                stockHistoryInformation.goodId = this.article.goodId;
-                this.orderStockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
-            }
-        });
+        if (!this.orderStockHistory) {
+            const stockHistoryInformation = new GetStockHistoryRequest();
+            stockHistoryInformation.type = "B";
+            stockHistoryInformation.goodId = this.article.goodId.toString();
+            this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+                this.orderStockHistory = result;
+            });
+        }
     }
     getAllocationStockHistory() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.orderAllocationStockHistory) {
-                const stockHistoryInformation = new GetStockHistoryRequest();
-                stockHistoryInformation.type = "T";
-                stockHistoryInformation.goodId = this.article.goodId;
-                this.orderAllocationStockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
-            }
-        });
+        if (!this.orderAllocationStockHistory) {
+            const stockHistoryInformation = new GetStockHistoryRequest();
+            stockHistoryInformation.type = "T";
+            stockHistoryInformation.goodId = this.article.goodId.toString();
+            this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+                this.orderAllocationStockHistory = result;
+            });
+        }
     }
     getInOrderData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.inOrderInformation) {
-                const inOrderData = new ArticleTransaction$1();
-                inOrderData.type = "V";
-                inOrderData.goodId = this.stockInformation[0].goodId.toString();
-                this.inOrderInformation = yield this._stockService.getArticleTransaction(inOrderData);
-            }
-        });
+        if (!this.inOrderInformation) {
+            const inOrderData = new ArticleTransaction$1();
+            inOrderData.type = "V";
+            inOrderData.goodId = this.stockInformation[0].goodId.toString();
+            this._stockService.getArticleTransaction(inOrderData).then(result => {
+                this.inOrderInformation = result;
+            });
+        }
     }
     getOrderData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.orderInformation) {
-                const orderData = new ArticleTransaction$1();
-                orderData.type = "I";
-                orderData.goodId = this.stockInformation[0].goodId.toString();
-                this.orderInformation = yield this._stockService.getArticleTransaction(orderData);
-            }
-        });
+        if (!this.orderInformation) {
+            const orderData = new ArticleTransaction$1();
+            orderData.type = "I";
+            orderData.goodId = this.stockInformation[0].goodId.toString();
+            this._stockService.getArticleTransaction(orderData).then(result => {
+                this.orderInformation = result;
+            });
+        }
     }
     getStockPrognose(warehouseNo) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.stockPrognose = yield this._stockService.stockPrognose(this.article.goodId, warehouseNo);
+        this._stockService.stockPrognose(this.article.goodId, warehouseNo).then(result => {
+            this.stockPrognose = result;
         });
     }
     handleWarehouseSelected(event) {
@@ -3036,7 +3151,7 @@ class StockTabsComponent {
         }
         if (this.tabs[2].active) {
             this.articleDetailsInformation.warehouseNumber = event.warehouseNo;
-            this.articleDetailsInformation.goodId = this.article.goodId;
+            this.articleDetailsInformation.goodId = this.article.goodId.toString();
             this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
                 this.articleDetails = details;
             });
@@ -3074,11 +3189,11 @@ StockTabsComponent.decorators = [
                        [articleStockInfo]="articleDetails"
                        [articleStockInformation]="stockInformation"
                        [article]="article"
+                       [articleFlat]="articleFlat"
                        [selectedWarehouse]="selectedWarehouse"
                        [dataWareHouseCode]="warehouses"
                        (transferIconClicked)="transferIconClicked.emit($event)"
                        (sendMethodDialogClicked)="sendMethodDialogClicked.emit($event)"
-                       (locationAddedOrUpdated)="articleDetails = $event"
 
     ></co-stock-location>
 
@@ -3124,6 +3239,7 @@ StockTabsComponent.ctorParameters = () => [
 StockTabsComponent.propDecorators = {
     stockInformation: [{ type: Input }],
     article: [{ type: Input }],
+    articleFlat: [{ type: Input }],
     warehouses: [{ type: Input }],
     transferIconClicked: [{ type: Output }],
     sendMethodDialogClicked: [{ type: Output }]
@@ -3210,24 +3326,28 @@ class StockLocationComponent {
         this.icons = Icon;
         this.transferIconClicked = new EventEmitter();
         this.sendMethodDialogClicked = new EventEmitter();
-        this.locationAddedOrUpdated = new EventEmitter();
         this.showConfirmationDialog = false;
         this.articleDetailsInformation = new ArticleStockManagement();
         this.stockStatus = [];
         this.selectedArticleDetailsData = new ArticleDetailsBo();
         this._subs = [];
     }
+    set article(article) {
+    }
+    ;
     ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.stockStatus = yield this._stockService.getStockState();
-            this._subs.push(this._stockService.warehouseSelected.subscribe((selectedWarehouse) => __awaiter(this, void 0, void 0, function* () {
-                this.stockLocations = yield this._stockService.getStockManagementLocations(selectedWarehouse.warehouseNo);
-            })));
+        this._stockService.getStockState().then(result => {
+            this.stockStatus = result;
         });
+        this._subs.push(this._stockService.warehouseSelected.subscribe(selectedWarehouse => {
+            this._stockService.getStockManagementLocations(selectedWarehouse.warehouseNo).then(result => {
+                this.stockLocations = result;
+            });
+        }));
     }
     lockSelectedRow(row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.stockLocations = yield this._stockService.getStockManagementLocations(this.selectedWarehouse.warehouseNo);
+        this._stockService.getStockManagementLocations(this.selectedWarehouse.warehouseNo).then(result => {
+            this.stockLocations = result;
             this.selectedLocationNo = row.locationNo;
             this._stockService.lockArticleDetails(row);
             this.selectedArticleDetailsData = row;
@@ -3252,25 +3372,23 @@ class StockLocationComponent {
         this.transferIconClicked.emit(event);
     }
     onOkClickSendLocations() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.showConfirmationDialog = true;
-        });
+        this.showConfirmationDialog = true;
     }
     handleOkClick() {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            this.selectedArticleDetailsData.selected = true;
-            this.selectedArticleDetailsData.goodId = this.article.goodId;
-            this.selectedArticleDetailsData.entryDate = new Date();
-            this.selectedArticleDetailsData.warehouseNo = this.selectedWarehouse.warehouseNo;
-            this.selectedArticleDetailsData.locationNo = (_a = this.selectedLocationNo) === null || _a === void 0 ? void 0 : _a.toString();
-            yield this._stockService.updateArticleDetails(this.selectedArticleDetailsData);
-            this.articleDetailsInformation.goodId = (_b = this.selectedArticleDetailsData.goodId) === null || _b === void 0 ? void 0 : _b.toString();
+        var _a;
+        this.selectedArticleDetailsData.selected = true;
+        this.selectedArticleDetailsData.goodId = this.articleFlat.goodId;
+        this.selectedArticleDetailsData.entryDate = new Date();
+        this.selectedArticleDetailsData.warehouseNo = this.selectedWarehouse.warehouseNo;
+        this.selectedArticleDetailsData.locationNo = (_a = this.selectedLocationNo) === null || _a === void 0 ? void 0 : _a.toString();
+        this._stockService.updateArticleDetails(this.selectedArticleDetailsData).then(result => {
+            var _a;
+            this.articleDetailsInformation.goodId = (_a = this.selectedArticleDetailsData.goodId) === null || _a === void 0 ? void 0 : _a.toString();
             this.articleDetailsInformation.warehouseNumber = this.selectedArticleDetailsData.warehouseNo;
-            yield this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
+            this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
                 this.showConfirmationDialog = false;
                 this._changeDetector.detectChanges();
-                this.locationAddedOrUpdated.emit(details);
+                this.articleStockInfo = details;
             });
         });
     }
@@ -3332,9 +3450,18 @@ StockLocationComponent.decorators = [
                       (keydown.enter)="onOkClickSendLocations()"
 
       >
-        <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'locationNo'">
+        <co-simple-grid-column [headerText]="'STOCK' | localize" [field]="'amountInStock'">
           <ng-template #editTemplate let-row="row">
-            <co-list-of-values [model]="locationForNumber(row['locationNo'])"
+            <co-input-text [(model)]="row['amountInStock']"
+                           [label]="'STOCK' | localize"
+                           (modelChange)="amountInStockChanged($event)"
+            ></co-input-text>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column *ngIf="articleFlat?.locationRegistered" [headerText]="'LOCATION' | localize" [field]="'locationNo'">
+          <ng-template #editTemplate let-row="row">
+            <co-list-of-values
+                               [model]="locationForNumber(row['locationNo'])"
                                [collection]="stockLocations"
                                [displayField]="'description'"
                                [label]="'LOCATION' | localize"
@@ -3344,51 +3471,45 @@ StockLocationComponent.decorators = [
             ></co-list-of-values>
           </ng-template>
         </co-simple-grid-column>
-        <co-simple-grid-column *ngIf="articleDetails" [headerText]="'BATCH' | localize" [field]="'batchNo'">
+        <co-simple-grid-column [headerText]="'BATCH' | localize" [field]="'batchNo'">
           <ng-template #editTemplate let-row="row">
-            <co-input-text [(model)]="row.batchNo"
+            <co-input-text *ngIf="articleFlat?.batch" [model]="selectedArticleDetailsData.batchNo"
                            [placeholder]="'BATCH' | localize"
+                           (modelChange)="row['batchNo'] = $event"
             ></co-input-text>
           </ng-template>
         </co-simple-grid-column>
-        <co-simple-grid-column *ngIf="articleDetails" [headerText]="'SERIAL_NO' | localize" [field]="'serialNo'">
+        <co-simple-grid-column [headerText]="'SERIAL_NO' | localize" [field]="'serialNo'">
           <ng-template #editTemplate let-row="row">
-            <co-input-text [(model)]="row.serialNo"
+            <co-input-text *ngIf="articleFlat?.serial" [model]="selectedArticleDetailsData.serialNo"
                            [placeholder]="'SERIAL_NO' | localize"
-            ></co-input-text>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'STOCK' | localize" [field]="'amountInStock'">
-          <ng-template #editTemplate let-row="row">
-            <co-input-text [(model)]="row.amountInStock"
-                           [label]="'STOCK' | localize"
-                           (modelChange)="amountInStockChanged($event)"
+                           (modelChange)="row['serialNo'] = $event"
             ></co-input-text>
           </ng-template>
         </co-simple-grid-column>
         <co-simple-grid-column [headerText]="'ALLOCATED' | localize" [field]="'stockAssigned'">
           <ng-template #editTemplate let-row="row">
-            <span [textContent]="row.stockAssigned"></span>
+            <span [textContent]="row['stockAssigned']"></span>
           </ng-template>
         </co-simple-grid-column>
         <co-simple-grid-column [headerText]="'AVAILABLE_STOCK' | localize" [field]="'amountInStockFree'">
           <ng-template #editTemplate let-row="row">
-            <span [textContent]="row.amountInStockFree"></span>
+            <span [textContent]="row['amountInStockFree']"></span>
           </ng-template>
         </co-simple-grid-column>
         <co-simple-grid-column [headerText]="'VALUTA' | localize" [field]="'currency'">
           <ng-template #editTemplate let-row="row">
-            <span [textContent]="row.currency"></span>
+            <span [textContent]="row['currency']"></span>
           </ng-template>
         </co-simple-grid-column>
         <co-simple-grid-column [headerText]="'PURCHASE_PRICE' | localize" [field]="'purchasePrice'">
           <ng-template #editTemplate let-row="row">
-            <span [textContent]="row.purchasePrice"></span>
+            <span [textContent]="row['purchasePrice']"></span>
           </ng-template>
         </co-simple-grid-column>
         <co-simple-grid-column [headerText]="'SUPPLIERNR' | localize" [field]="'supplierNo'">
           <ng-template #editTemplate let-row="row">
-            <span [textContent]="row.supplierNo"></span>
+            <span [textContent]="row['supplierNo']"></span>
           </ng-template>
         </co-simple-grid-column>
         <co-simple-grid-column [headerText]="'TRANSFER' | localize" [field]="'transfer'">
@@ -3396,12 +3517,14 @@ StockLocationComponent.decorators = [
             <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.DeliveryTruck)"
                      (click)="handleStockTransferClick(row)"></co-icon>
           </ng-template>
+          <ng-template #editTemplate></ng-template>
         </co-simple-grid-column>
         <co-simple-grid-column [headerText]="'STICKER' | localize" [field]="'sticker'">
           <ng-template #template let-row="row">
             <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.Print)"
                      (click)="openSendMethodDialog(row)"></co-icon>
           </ng-template>
+          <ng-template #editTemplate></ng-template>
         </co-simple-grid-column>
       </co-simple-grid>
     </div>
@@ -3418,10 +3541,10 @@ StockLocationComponent.propDecorators = {
     articleStockInfo: [{ type: Input }],
     articleStockInformation: [{ type: Input }],
     article: [{ type: Input }],
+    articleFlat: [{ type: Input }],
     dataWareHouseCode: [{ type: Input }],
     transferIconClicked: [{ type: Output }],
     sendMethodDialogClicked: [{ type: Output }],
-    locationAddedOrUpdated: [{ type: Output }],
     selectedWarehouse: [{ type: Input }]
 };
 
@@ -6613,7 +6736,7 @@ SimpleTagsComponent.decorators = [
       </ng-template>
 
       <div class="dialog-content-wrapper">
-        <div class="collection-navigation">
+        <div class="collection-navigation co-small-scrollbar">
           <span class="title" [textContent]="'Beschikbare tags'"></span>
           <co-input-search
             [(model)]="searchString"
@@ -6693,17 +6816,15 @@ SimpleTagsComponent.decorators = [
 
       <ng-template #footerTemplate>
         <div class="co-dialog-footer-button-wrapper">
-          <div class="commit-button-wrapper">
-            <co-button
-              [iconData]="iconCacheService.getIcon(icon.CheckDuotone)"
-              (click)="handleSaveTags()"
-            ></co-button>
-            <co-button
-              class="cancel-button"
-              [iconData]="iconCacheService.getIcon(icon.XSolid)"
-              (click)="closeClick.next()"
-            ></co-button>
-          </div>
+          <co-button class="save-button"
+            [iconData]="iconCacheService.getIcon(icon.CheckDuotone)"
+            (click)="handleSaveTags()"
+          ></co-button>
+          <co-button
+            class="close-button"
+            [iconData]="iconCacheService.getIcon(icon.CrossSkinny)"
+            (click)="closeClick.next()"
+          ></co-button>
         </div>
       </ng-template>
     </co-dialog>