ngx-render-material-forms 2.2.5 → 2.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/add-on-products/add-on-products.component.mjs +31 -6
- package/esm2020/lib/components/datagrid/datagrid.component.mjs +86 -17
- package/fesm2015/ngx-render-material-forms.js +117 -22
- package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
- package/fesm2020/ngx-render-material-forms.js +115 -21
- package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
- package/lib/components/add-on-products/add-on-products.component.d.ts +12 -0
- package/lib/components/datagrid/datagrid.component.d.ts +10 -0
- package/package.json +1 -1
|
@@ -3423,7 +3423,7 @@ class AddOnProductsComponent {
|
|
|
3423
3423
|
this.filteredDropdownThree = [];
|
|
3424
3424
|
this.filteredDropdownFour = [];
|
|
3425
3425
|
this.addProductsColumns = ['select', 'productName', 'skuNumber', 'inventory'];
|
|
3426
|
-
this.showAllproductsColumns = ['delete', 'productName', 'categoryName', 'subCategory', 'Quantity', 'price', 'skuNumber', 'inventory'];
|
|
3426
|
+
this.showAllproductsColumns = ['delete', 'productName', 'categoryName', 'subCategory', 'Quantity', 'price', 'skuNumber', 'inventory', 'cost'];
|
|
3427
3427
|
this.quantityList = [5, 10, 15, 20, 25];
|
|
3428
3428
|
this.ELEMENT_DATA = [];
|
|
3429
3429
|
this.dataSource = new MatTableDataSource();
|
|
@@ -3472,6 +3472,17 @@ class AddOnProductsComponent {
|
|
|
3472
3472
|
this.activeFiltersCount = 0;
|
|
3473
3473
|
this.emptyImage = '/i/table-grid-empty-state.svg';
|
|
3474
3474
|
this.getTotalRecords = 0;
|
|
3475
|
+
this.priceFieldLable = 'Price';
|
|
3476
|
+
this.targetCost = 'Your Target Cost';
|
|
3477
|
+
this.showCost = false;
|
|
3478
|
+
this.skuTweek = 'SKU Number';
|
|
3479
|
+
this.costTweek = 'Your Target Cost';
|
|
3480
|
+
this.priceTweek = 'Price';
|
|
3481
|
+
this.productTweek = 'Product Name';
|
|
3482
|
+
this.quantityTweek = 'Quantity';
|
|
3483
|
+
this.categoryTweek = 'Category Name';
|
|
3484
|
+
this.subCategoryTweek = 'Sub Category';
|
|
3485
|
+
this.inventoryTweek = 'Inventory';
|
|
3475
3486
|
this.showCategory = data.dropdownsFlag.showDialogCategory;
|
|
3476
3487
|
this.showSubcategory = data.dropdownsFlag.showDialogSubCategory;
|
|
3477
3488
|
this.showPrice = data.dropdownsFlag.showDialogPrice;
|
|
@@ -3491,6 +3502,15 @@ class AddOnProductsComponent {
|
|
|
3491
3502
|
this.dropDownCount = this.countTrueDropdowns(data.dropdownsFlag);
|
|
3492
3503
|
this.selection = new SelectionModel(true, data.selectedProducts || []);
|
|
3493
3504
|
this.isPriceDisable = data.dropdownsFlag.priceDisable;
|
|
3505
|
+
this.skuTweek = data.dropdownsFlag?.skuTweek || "SKU Number";
|
|
3506
|
+
this.costTweek = data.dropdownsFlag?.costTweek || "Your Target Cost";
|
|
3507
|
+
this.priceTweek = data.dropdownsFlag?.priceTweek || "Price";
|
|
3508
|
+
this.productTweek = data.dropdownsFlag?.productTweek || "Product Name";
|
|
3509
|
+
this.quantityTweek = data.dropdownsFlag?.quantityTweek || "Quantity";
|
|
3510
|
+
this.showCost = data.dropdownsFlag.showDialogCost;
|
|
3511
|
+
this.categoryTweek = data.dropdownsFlag?.categoryTweek || "Category Name";
|
|
3512
|
+
this.subCategoryTweek = data.dropdownsFlag?.subCategoryTweek || "Sub Category";
|
|
3513
|
+
this.inventoryTweek = data.dropdownsFlag?.inventoryTweek || "Inventory";
|
|
3494
3514
|
if (!this.showCategory) {
|
|
3495
3515
|
this.removeColumn('categoryName');
|
|
3496
3516
|
}
|
|
@@ -3509,6 +3529,9 @@ class AddOnProductsComponent {
|
|
|
3509
3529
|
if (!this.showInventory) {
|
|
3510
3530
|
this.removeColumn('inventory');
|
|
3511
3531
|
}
|
|
3532
|
+
if (!this.showCost) {
|
|
3533
|
+
this.removeColumn('cost');
|
|
3534
|
+
}
|
|
3512
3535
|
}
|
|
3513
3536
|
removeColumn(columnName) {
|
|
3514
3537
|
this.showAllproductsColumns = this.showAllproductsColumns.filter(column => column !== columnName);
|
|
@@ -3529,7 +3552,8 @@ class AddOnProductsComponent {
|
|
|
3529
3552
|
subCategory: [product?.subCategory || ''],
|
|
3530
3553
|
value: [product?.value || ''],
|
|
3531
3554
|
otherInformation0: [product?.otherInformation0 || ''],
|
|
3532
|
-
otherInformation1: [product?.otherInformation1 || '']
|
|
3555
|
+
otherInformation1: [product?.otherInformation1 || ''],
|
|
3556
|
+
otherInformation2: [product?.otherInformation2 || '', Validators.required]
|
|
3533
3557
|
}));
|
|
3534
3558
|
});
|
|
3535
3559
|
selectedProductsArray.controls.forEach(control => {
|
|
@@ -3744,7 +3768,8 @@ class AddOnProductsComponent {
|
|
|
3744
3768
|
subCategory: [product?.subCategory || ''],
|
|
3745
3769
|
value: [product?.value || ''],
|
|
3746
3770
|
otherInformation0: [product?.otherInformation0 || ''],
|
|
3747
|
-
otherInformation1: [product?.otherInformation1 || '']
|
|
3771
|
+
otherInformation1: [product?.otherInformation1 || ''],
|
|
3772
|
+
otherInformation2: [product?.otherInformation2 ?? '', this.showCost ? Validators.required : []]
|
|
3748
3773
|
});
|
|
3749
3774
|
if (productFormGroup) {
|
|
3750
3775
|
selectedProductsArray.push(productFormGroup);
|
|
@@ -4093,7 +4118,7 @@ class AddOnProductsComponent {
|
|
|
4093
4118
|
}
|
|
4094
4119
|
}
|
|
4095
4120
|
AddOnProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AddOnProductsComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: i1$1.MatDialog }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4096
|
-
AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"basic-search-wrp\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n (input)=\"clearIfEmpty($event)\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune\r\n </mat-icon>\r\n <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n </button>\r\n </div> -->\r\n </div>\r\n <div class=\"search-btn\">\r\n <button mat-raised-button color=\"primary\"\r\n (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n </div>\r\n </div>\r\n <!--Search End-->\r\n <div class=\"product-selector\">\r\n <div [hidden]=\"currentPage !== 'select-products'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"product-selection-container\" *ngIf=\"isVisible && dropdownL1\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <div class=\"title-adv\">\r\n <h5>Advanced Filters</h5>\r\n <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\" *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\"\r\n (input)=\"onInputChange($event, 'category1')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n (click)=\"clearField('dropdownLevel1', 'category1', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\"\r\n (input)=\"onInputChange($event, 'category2')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n (click)=\"clearField('dropdownLevel2', 'category2', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto5\"\r\n (input)=\"onInputChange($event, 'category3')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n (click)=\"clearField('dropdownLevel3', 'category3', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto6\"\r\n (input)=\"onInputChange($event, 'category4')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n (click)=\"clearField('dropdownLevel4', 'category4', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 0 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n [class.selected]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n <ng-template #noData>\r\n <div class=\"no-data-message\">\r\n <!--No data found.-->\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No records to show at the moment</h3>\r\n <p>Please modify your search criteria to find the desired result</p>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <div [hidden]=\"currentPage !== 'edit-save'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"new-class\"\r\n [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\r\n <table mat-table [dataSource]=\"selectedDataSource\"\r\n *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button class=\"delete-btn-picker\" mat-button\r\n (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef>Price</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-price\">\r\n <mat-label>Price</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n placeholder=\"Please enter price\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n Price is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>Quantity</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n Quantity can not be less than 1\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n Decimals not allowed\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <!-- <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template> -->\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No Product added</h3>\r\n <p>Please go back and start adding products</p>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }], animations: [
|
|
4121
|
+
AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"basic-search-wrp\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n (input)=\"clearIfEmpty($event)\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune\r\n </mat-icon>\r\n <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n </button>\r\n </div> -->\r\n </div>\r\n <div class=\"search-btn\">\r\n <button mat-raised-button color=\"primary\"\r\n (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n </div>\r\n </div>\r\n <!--Search End-->\r\n <div class=\"product-selector\">\r\n <div [hidden]=\"currentPage !== 'select-products'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"product-selection-container\" *ngIf=\"isVisible && dropdownL1\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <div class=\"title-adv\">\r\n <h5>Advanced Filters</h5>\r\n <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\"\r\n *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\"\r\n (input)=\"onInputChange($event, 'category1')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n (click)=\"clearField('dropdownLevel1', 'category1', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\"\r\n (input)=\"onInputChange($event, 'category2')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n (click)=\"clearField('dropdownLevel2', 'category2', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto5\"\r\n (input)=\"onInputChange($event, 'category3')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n (click)=\"clearField('dropdownLevel3', 'category3', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto6\"\r\n (input)=\"onInputChange($event, 'category4')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n (click)=\"clearField('dropdownLevel4', 'category4', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 0 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n [class.selected]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n <ng-template #noData>\r\n <div class=\"no-data-message\">\r\n <!--No data found.-->\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No records to show at the moment</h3>\r\n <p>Please modify your search criteria to find the desired result</p>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <div [hidden]=\"currentPage !== 'edit-save'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"new-class\"\r\n [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\r\n <table mat-table [dataSource]=\"selectedDataSource\"\r\n *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button class=\"delete-btn-picker\" mat-button\r\n (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n <th mat-header-cell *matHeaderCellDef> {{categoryTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n <th mat-header-cell *matHeaderCellDef> {{subCategoryTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef>{{priceTweek}}</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-price\">\r\n <mat-label>{{priceTweek}}</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n [placeholder]=\"'Please enter ' + priceTweek\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n {{priceTweek}} is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n <th mat-header-cell *matHeaderCellDef> {{quantityTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>{{quantityTweek}}</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n Quantity can not be less than 1\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n Decimals not allowed\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"cost\" *ngIf=\"showCost\">\r\n <th mat-header-cell *matHeaderCellDef>{{costTweek}}</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-cost\">\r\n <mat-label>{{costTweek}}</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('otherInformation2')\"\r\n [placeholder]=\"'Please enter ' + costTweek\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('otherInformation2').hasError('required')\">\r\n {{costTweek}} is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <!-- <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template> -->\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No Product added</h3>\r\n <p>Please go back and start adding products</p>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }], animations: [
|
|
4097
4122
|
trigger('slideDown', [
|
|
4098
4123
|
state('hidden', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
|
|
4099
4124
|
state('visible', style({ height: '*', opacity: 1 })),
|
|
@@ -4118,7 +4143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
4118
4143
|
animate('300ms ease-in')
|
|
4119
4144
|
])
|
|
4120
4145
|
])
|
|
4121
|
-
], template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"basic-search-wrp\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n (input)=\"clearIfEmpty($event)\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune\r\n </mat-icon>\r\n <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n </button>\r\n </div> -->\r\n </div>\r\n <div class=\"search-btn\">\r\n <button mat-raised-button color=\"primary\"\r\n (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n </div>\r\n </div>\r\n <!--Search End-->\r\n <div class=\"product-selector\">\r\n <div [hidden]=\"currentPage !== 'select-products'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"product-selection-container\" *ngIf=\"isVisible && dropdownL1\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <div class=\"title-adv\">\r\n <h5>Advanced Filters</h5>\r\n <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\" *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\"\r\n (input)=\"onInputChange($event, 'category1')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n (click)=\"clearField('dropdownLevel1', 'category1', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\"\r\n (input)=\"onInputChange($event, 'category2')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n (click)=\"clearField('dropdownLevel2', 'category2', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto5\"\r\n (input)=\"onInputChange($event, 'category3')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n (click)=\"clearField('dropdownLevel3', 'category3', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto6\"\r\n (input)=\"onInputChange($event, 'category4')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n (click)=\"clearField('dropdownLevel4', 'category4', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 0 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n [class.selected]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n <ng-template #noData>\r\n <div class=\"no-data-message\">\r\n <!--No data found.-->\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No records to show at the moment</h3>\r\n <p>Please modify your search criteria to find the desired result</p>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <div [hidden]=\"currentPage !== 'edit-save'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"new-class\"\r\n [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\r\n <table mat-table [dataSource]=\"selectedDataSource\"\r\n *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button class=\"delete-btn-picker\" mat-button\r\n (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef>Price</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-price\">\r\n <mat-label>Price</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n placeholder=\"Please enter price\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n Price is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>Quantity</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n Quantity can not be less than 1\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n Decimals not allowed\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <!-- <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template> -->\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No Product added</h3>\r\n <p>Please go back and start adding products</p>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"] }]
|
|
4146
|
+
], template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"basic-search-wrp\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n (input)=\"clearIfEmpty($event)\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune\r\n </mat-icon>\r\n <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n </button>\r\n </div> -->\r\n </div>\r\n <div class=\"search-btn\">\r\n <button mat-raised-button color=\"primary\"\r\n (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n </div>\r\n </div>\r\n <!--Search End-->\r\n <div class=\"product-selector\">\r\n <div [hidden]=\"currentPage !== 'select-products'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"product-selection-container\" *ngIf=\"isVisible && dropdownL1\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <div class=\"title-adv\">\r\n <h5>Advanced Filters</h5>\r\n <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\"\r\n *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\"\r\n (input)=\"onInputChange($event, 'category1')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n (click)=\"clearField('dropdownLevel1', 'category1', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\"\r\n (input)=\"onInputChange($event, 'category2')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n (click)=\"clearField('dropdownLevel2', 'category2', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto5\"\r\n (input)=\"onInputChange($event, 'category3')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n (click)=\"clearField('dropdownLevel3', 'category3', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto6\"\r\n (input)=\"onInputChange($event, 'category4')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n (click)=\"clearField('dropdownLevel4', 'category4', $event)\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 0 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n [class.selected]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n <ng-template #noData>\r\n <div class=\"no-data-message\">\r\n <!--No data found.-->\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No records to show at the moment</h3>\r\n <p>Please modify your search criteria to find the desired result</p>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <div [hidden]=\"currentPage !== 'edit-save'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"new-class\"\r\n [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\r\n <table mat-table [dataSource]=\"selectedDataSource\"\r\n *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button class=\"delete-btn-picker\" mat-button\r\n (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n <th mat-header-cell *matHeaderCellDef> {{categoryTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n <th mat-header-cell *matHeaderCellDef> {{subCategoryTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef>{{priceTweek}}</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-price\">\r\n <mat-label>{{priceTweek}}</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n [placeholder]=\"'Please enter ' + priceTweek\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n {{priceTweek}} is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n <th mat-header-cell *matHeaderCellDef> {{quantityTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>{{quantityTweek}}</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n Quantity can not be less than 1\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n Decimals not allowed\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"cost\" *ngIf=\"showCost\">\r\n <th mat-header-cell *matHeaderCellDef>{{costTweek}}</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-cost\">\r\n <mat-label>{{costTweek}}</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('otherInformation2')\"\r\n [placeholder]=\"'Please enter ' + costTweek\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('otherInformation2').hasError('required')\">\r\n {{costTweek}} is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <!-- <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template> -->\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No Product added</h3>\r\n <p>Please go back and start adding products</p>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"] }]
|
|
4122
4147
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
4123
4148
|
type: Inject,
|
|
4124
4149
|
args: [MAT_DIALOG_DATA]
|
|
@@ -4137,7 +4162,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
|
|
|
4137
4162
|
this.commonService = commonService;
|
|
4138
4163
|
this.dataSource = new MatTableDataSource();
|
|
4139
4164
|
this.dataSourceNew = ELEMENT_DATA;
|
|
4140
|
-
this.displayedColumnsNew = ['productName', 'category', 'subCategory', 'quantity', 'price', 'skuNumber', 'inventory'];
|
|
4165
|
+
this.displayedColumnsNew = ['productName', 'category', 'subCategory', 'quantity', 'price', 'skuNumber', 'inventory', 'cost'];
|
|
4141
4166
|
this.showNewProductPicker = false;
|
|
4142
4167
|
this.showCategory = false;
|
|
4143
4168
|
this.showSubcategory = false;
|
|
@@ -4166,6 +4191,16 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
|
|
|
4166
4191
|
this.isCustomerCountryFiltered = false;
|
|
4167
4192
|
this.emptyArray = false;
|
|
4168
4193
|
this.isPriceDisable = true;
|
|
4194
|
+
this.priceTweek = 'Price';
|
|
4195
|
+
this.skuTweek = 'SKU Number';
|
|
4196
|
+
this.costTweek = 'Your Target Cost';
|
|
4197
|
+
this.showCost = false;
|
|
4198
|
+
this.showDialogCost = false;
|
|
4199
|
+
this.quantityTweek = 'Qunatity';
|
|
4200
|
+
this.productTweek = 'Product Name';
|
|
4201
|
+
this.categoryTweek = 'Category Name';
|
|
4202
|
+
this.subCategoryTweek = 'Sub Category';
|
|
4203
|
+
this.inventoryTweek = 'Inventory';
|
|
4169
4204
|
if (this.element && this.element.nativeElement && this.instance) {
|
|
4170
4205
|
// Add custom classes to elements.
|
|
4171
4206
|
if (this.instance.component.customClass) {
|
|
@@ -4204,14 +4239,32 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
|
|
|
4204
4239
|
this.showDialogSubCategory = this.commonService.checkIsAttributeTrue(checkAttribute, "showDialogSubCategory");
|
|
4205
4240
|
this.isCustomerCountryFiltered = this.commonService.checkIsAttributeTrue(checkAttribute, "filterProductBasedOnCustomerCountry");
|
|
4206
4241
|
this.isPriceDisable = this.commonService.checkIsAttributeTrue(checkAttribute, "isPriceDisable");
|
|
4242
|
+
this.showCost = this.commonService.checkIsAttributeTrue(checkAttribute, "showCost");
|
|
4243
|
+
this.showDialogCost = this.commonService.checkIsAttributeTrue(checkAttribute, "showDialogCost");
|
|
4207
4244
|
const l1 = this.getLabelName(checkAttribute, "dropdownL1");
|
|
4208
4245
|
const l2 = this.getLabelName(checkAttribute, "dropdownL2");
|
|
4209
4246
|
const l3 = this.getLabelName(checkAttribute, "dropdownL3");
|
|
4210
4247
|
const l4 = this.getLabelName(checkAttribute, "dropdownL4");
|
|
4248
|
+
const price = this.getLabelName(checkAttribute, "priceLabel");
|
|
4249
|
+
const sku = this.getLabelName(checkAttribute, "skuLabel");
|
|
4250
|
+
const cost = this.getLabelName(checkAttribute, "costLabel");
|
|
4251
|
+
const quantity = this.getLabelName(checkAttribute, "quantityLabel");
|
|
4252
|
+
const product = this.getLabelName(checkAttribute, "productLabel");
|
|
4253
|
+
const category = this.getLabelName(checkAttribute, "categoryLabel");
|
|
4254
|
+
const subCategory = this.getLabelName(checkAttribute, "subCategoryLabel");
|
|
4255
|
+
const inventory = this.getLabelName(checkAttribute, "inventoryLabel");
|
|
4211
4256
|
this.dropdownL1 = l1 !== null && l1 !== undefined && (typeof l1 === 'string' ? l1.trim() !== "" : l1 !== "") ? true : false;
|
|
4212
4257
|
this.dropdownL2 = l2 !== null && l2 !== undefined && (typeof l2 === 'string' ? l2.trim() !== "" : l2 !== "") ? true : false;
|
|
4213
4258
|
this.dropdownL3 = l3 !== null && l3 !== undefined && (typeof l3 === 'string' ? l3.trim() !== "" : l3 !== "") ? true : false;
|
|
4214
4259
|
this.dropdownL4 = l4 !== null && l4 !== undefined && (typeof l4 === 'string' ? l4.trim() !== "" : l4 !== "") ? true : false;
|
|
4260
|
+
const priceTweek = price !== null && price !== undefined && (typeof price === 'string' ? price.trim() !== "" : price !== "") ? true : false;
|
|
4261
|
+
const skuTweek = sku !== null && sku !== undefined && (typeof sku === 'string' ? sku.trim() !== "" : sku !== "") ? true : false;
|
|
4262
|
+
const costTweek = cost !== null && cost !== undefined && (typeof cost === 'string' ? cost.trim() !== "" : cost !== "") ? true : false;
|
|
4263
|
+
const quantityTweek = quantity !== null && quantity !== undefined && (typeof quantity === 'string' ? quantity.trim() !== "" : quantity !== "") ? true : false;
|
|
4264
|
+
const productTweek = product !== null && product !== undefined && (typeof product === 'string' ? product.trim() !== "" : product !== "") ? true : false;
|
|
4265
|
+
const categoryTweek = category !== null && category !== undefined && (typeof category === 'string' ? category.trim() !== "" : category !== "") ? true : false;
|
|
4266
|
+
const subCategoryTweek = subCategory !== null && subCategory !== undefined && (typeof subCategory === 'string' ? subCategory.trim() !== "" : subCategory !== "") ? true : false;
|
|
4267
|
+
const inventoryTweek = inventory !== null && inventory !== undefined && (typeof inventory === 'string' ? inventory.trim() !== "" : inventory !== "") ? true : false;
|
|
4215
4268
|
if (this.dropdownL1) {
|
|
4216
4269
|
this.dropdownL1Label = l1;
|
|
4217
4270
|
}
|
|
@@ -4224,6 +4277,30 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
|
|
|
4224
4277
|
if (this.dropdownL4) {
|
|
4225
4278
|
this.dropdownL4Label = l4;
|
|
4226
4279
|
}
|
|
4280
|
+
if (priceTweek) {
|
|
4281
|
+
this.priceTweek = price;
|
|
4282
|
+
}
|
|
4283
|
+
if (skuTweek) {
|
|
4284
|
+
this.skuTweek = sku;
|
|
4285
|
+
}
|
|
4286
|
+
if (costTweek) {
|
|
4287
|
+
this.costTweek = cost;
|
|
4288
|
+
}
|
|
4289
|
+
if (quantityTweek) {
|
|
4290
|
+
this.quantityTweek = quantity;
|
|
4291
|
+
}
|
|
4292
|
+
if (productTweek) {
|
|
4293
|
+
this.productTweek = product;
|
|
4294
|
+
}
|
|
4295
|
+
if (categoryTweek) {
|
|
4296
|
+
this.categoryTweek = category;
|
|
4297
|
+
}
|
|
4298
|
+
if (subCategoryTweek) {
|
|
4299
|
+
this.subCategoryTweek = subCategory;
|
|
4300
|
+
}
|
|
4301
|
+
if (inventoryTweek) {
|
|
4302
|
+
this.inventoryTweek = inventory;
|
|
4303
|
+
}
|
|
4227
4304
|
this.checkSubmissionStatus = this.commonService.checkIsAttributeTrue(checkAttribute, 'isProductOptional');
|
|
4228
4305
|
this.hasValueAndEditMode = (checkAttribute?.hasValue === 'yes') && (checkAttribute?.editMode === 'true');
|
|
4229
4306
|
const retrievedObject = JSON.parse(localStorage.getItem('storageObject'));
|
|
@@ -4248,6 +4325,9 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
|
|
|
4248
4325
|
if (!this.showInventory) {
|
|
4249
4326
|
this.removeColumn('inventory');
|
|
4250
4327
|
}
|
|
4328
|
+
if (!this.showCost) {
|
|
4329
|
+
this.removeColumn('cost');
|
|
4330
|
+
}
|
|
4251
4331
|
this.dealId = this.getLabelName(checkAttribute, "dealId");
|
|
4252
4332
|
localStorage.setItem("currentDealId", this.dealId);
|
|
4253
4333
|
const storedData = localStorage.getItem(`showGridPickerProducts-${this.dealId}`) || '';
|
|
@@ -4315,16 +4395,18 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
|
|
|
4315
4395
|
addAnother() {
|
|
4316
4396
|
this.showDataGrid = true;
|
|
4317
4397
|
if (this.showNewProductPicker) {
|
|
4398
|
+
localStorage.setItem('currentDealId', this.dealId);
|
|
4318
4399
|
const diologeRef = this.dialog.open(AddOnProductsComponent, {
|
|
4319
4400
|
disableClose: true,
|
|
4320
4401
|
width: '90%',
|
|
4321
4402
|
maxWidth: '1000px',
|
|
4322
4403
|
autoFocus: false,
|
|
4323
|
-
data: { dropdownsFlag: {
|
|
4404
|
+
data: { dropdownsFlag: { showDialogInventory: this.showDialogInventory, showInventory: this.showInventory, inventoryTweek: this.inventoryTweek, quantityTweek: this.quantityTweek, subCategoryTweek: this.subCategoryTweek, categoryTweek: this.categoryTweek, productTweek: this.productTweek, costTweek: this.costTweek, skuTweek: this.skuTweek, priceTweek: this.priceTweek, showDialogCost: this.showDialogCost, showNewProductPicker: this.showNewProductPicker, showDialogSubCategory: this.showDialogSubCategory, showDialogSkuNumber: this.showDialogSkuNumber, showDialogCategory: this.showDialogCategory, showDialogPrice: this.showDialogPrice, showDialogQuantity: this.showDialogQuantity, dropdownL1: this.dropdownL1, dropdownL2: this.dropdownL2, dropdownL3: this.dropdownL3, dropdownL4: this.dropdownL4, dropdownL1Label: this.dropdownL1Label, dropdownL2Label: this.dropdownL2Label, dropdownL3Label: this.dropdownL3Label, dropdownL4Label: this.dropdownL4Label, checkSubmissionStatus: this.checkSubmissionStatus, priceDisable: this.isPriceDisable, showCost: this.showDialogCost }, selectedProducts: this.dataSourceNew }
|
|
4324
4405
|
})
|
|
4325
4406
|
.afterClosed().subscribe(response => {
|
|
4326
4407
|
this.instance.addRow();
|
|
4327
4408
|
if (response?.data?.status) {
|
|
4409
|
+
this.instance.addRow();
|
|
4328
4410
|
if (!this.showCategory) {
|
|
4329
4411
|
this.removeColumn('category');
|
|
4330
4412
|
}
|
|
@@ -4492,46 +4574,52 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
|
|
|
4492
4574
|
<table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
|
|
4493
4575
|
<!-- Product Name Column -->
|
|
4494
4576
|
<ng-container matColumnDef="productName">
|
|
4495
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4577
|
+
<th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>
|
|
4496
4578
|
<td mat-cell *matCellDef="let element"> {{element.text}} </td>
|
|
4497
4579
|
</ng-container>
|
|
4498
4580
|
|
|
4499
4581
|
<!-- Quantity Column -->
|
|
4500
4582
|
<ng-container matColumnDef="quantity" *ngIf="showQuantity">
|
|
4501
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4583
|
+
<th mat-header-cell *matHeaderCellDef> {{ quantityTweek }} </th>
|
|
4502
4584
|
<td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
|
|
4503
4585
|
</ng-container>
|
|
4504
4586
|
|
|
4505
4587
|
<!-- Price Column -->
|
|
4506
4588
|
<ng-container matColumnDef="price" *ngIf="showPrice">
|
|
4507
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4589
|
+
<th mat-header-cell *matHeaderCellDef> {{priceTweek}} </th>
|
|
4508
4590
|
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
|
|
4509
4591
|
</ng-container>
|
|
4510
4592
|
|
|
4511
4593
|
<!-- Category Column -->
|
|
4512
4594
|
<ng-container matColumnDef="category" *ngIf="showCategory">
|
|
4513
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4595
|
+
<th mat-header-cell *matHeaderCellDef> {{categoryTweek}} </th>
|
|
4514
4596
|
<td mat-cell *matCellDef="let element"> {{element.category}} </td>
|
|
4515
4597
|
</ng-container>
|
|
4516
4598
|
|
|
4517
4599
|
<!-- Category Column -->
|
|
4518
4600
|
<ng-container matColumnDef="subCategory" *ngIf="showSubcategory">
|
|
4519
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4601
|
+
<th mat-header-cell *matHeaderCellDef> {{subCategoryTweek}} </th>
|
|
4520
4602
|
<td mat-cell *matCellDef="let element"> {{element.subCategory}} </td>
|
|
4521
4603
|
</ng-container>
|
|
4522
4604
|
|
|
4523
4605
|
<!-- SKU Column -->
|
|
4524
4606
|
<ng-container matColumnDef="skuNumber" *ngIf="showSkuNumber">
|
|
4525
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4607
|
+
<th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>
|
|
4526
4608
|
<td mat-cell *matCellDef="let element"> {{element?.otherInformation0}} </td>
|
|
4527
4609
|
</ng-container>
|
|
4528
4610
|
|
|
4529
4611
|
<!-- Inventory Column -->
|
|
4530
4612
|
<ng-container matColumnDef="inventory" *ngIf="showInventory">
|
|
4531
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4613
|
+
<th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>
|
|
4532
4614
|
<td mat-cell *matCellDef="let element"> {{element?.otherInformation1}} </td>
|
|
4533
4615
|
</ng-container>
|
|
4534
4616
|
|
|
4617
|
+
<!-- Your Target Cost -->
|
|
4618
|
+
<ng-container matColumnDef="cost" *ngIf="showCost">
|
|
4619
|
+
<th mat-header-cell *matHeaderCellDef> {{costTweek}} </th>
|
|
4620
|
+
<td mat-cell *matCellDef="let element"> {{element?.otherInformation2}} </td>
|
|
4621
|
+
</ng-container>
|
|
4622
|
+
|
|
4535
4623
|
<tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
|
|
4536
4624
|
<tr mat-row *matRowDef="let row; columns: displayedColumnsNew;"></tr>
|
|
4537
4625
|
</table>
|
|
@@ -4640,46 +4728,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
4640
4728
|
<table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
|
|
4641
4729
|
<!-- Product Name Column -->
|
|
4642
4730
|
<ng-container matColumnDef="productName">
|
|
4643
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4731
|
+
<th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>
|
|
4644
4732
|
<td mat-cell *matCellDef="let element"> {{element.text}} </td>
|
|
4645
4733
|
</ng-container>
|
|
4646
4734
|
|
|
4647
4735
|
<!-- Quantity Column -->
|
|
4648
4736
|
<ng-container matColumnDef="quantity" *ngIf="showQuantity">
|
|
4649
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4737
|
+
<th mat-header-cell *matHeaderCellDef> {{ quantityTweek }} </th>
|
|
4650
4738
|
<td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
|
|
4651
4739
|
</ng-container>
|
|
4652
4740
|
|
|
4653
4741
|
<!-- Price Column -->
|
|
4654
4742
|
<ng-container matColumnDef="price" *ngIf="showPrice">
|
|
4655
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4743
|
+
<th mat-header-cell *matHeaderCellDef> {{priceTweek}} </th>
|
|
4656
4744
|
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
|
|
4657
4745
|
</ng-container>
|
|
4658
4746
|
|
|
4659
4747
|
<!-- Category Column -->
|
|
4660
4748
|
<ng-container matColumnDef="category" *ngIf="showCategory">
|
|
4661
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4749
|
+
<th mat-header-cell *matHeaderCellDef> {{categoryTweek}} </th>
|
|
4662
4750
|
<td mat-cell *matCellDef="let element"> {{element.category}} </td>
|
|
4663
4751
|
</ng-container>
|
|
4664
4752
|
|
|
4665
4753
|
<!-- Category Column -->
|
|
4666
4754
|
<ng-container matColumnDef="subCategory" *ngIf="showSubcategory">
|
|
4667
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4755
|
+
<th mat-header-cell *matHeaderCellDef> {{subCategoryTweek}} </th>
|
|
4668
4756
|
<td mat-cell *matCellDef="let element"> {{element.subCategory}} </td>
|
|
4669
4757
|
</ng-container>
|
|
4670
4758
|
|
|
4671
4759
|
<!-- SKU Column -->
|
|
4672
4760
|
<ng-container matColumnDef="skuNumber" *ngIf="showSkuNumber">
|
|
4673
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4761
|
+
<th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>
|
|
4674
4762
|
<td mat-cell *matCellDef="let element"> {{element?.otherInformation0}} </td>
|
|
4675
4763
|
</ng-container>
|
|
4676
4764
|
|
|
4677
4765
|
<!-- Inventory Column -->
|
|
4678
4766
|
<ng-container matColumnDef="inventory" *ngIf="showInventory">
|
|
4679
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
4767
|
+
<th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>
|
|
4680
4768
|
<td mat-cell *matCellDef="let element"> {{element?.otherInformation1}} </td>
|
|
4681
4769
|
</ng-container>
|
|
4682
4770
|
|
|
4771
|
+
<!-- Your Target Cost -->
|
|
4772
|
+
<ng-container matColumnDef="cost" *ngIf="showCost">
|
|
4773
|
+
<th mat-header-cell *matHeaderCellDef> {{costTweek}} </th>
|
|
4774
|
+
<td mat-cell *matCellDef="let element"> {{element?.otherInformation2}} </td>
|
|
4775
|
+
</ng-container>
|
|
4776
|
+
|
|
4683
4777
|
<tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
|
|
4684
4778
|
<tr mat-row *matRowDef="let row; columns: displayedColumnsNew;"></tr>
|
|
4685
4779
|
</table>
|