ngx-render-material-forms 1.2.8 → 1.3.0

package/fesm2020/ngx-render-material-forms.js

@@ -81,7 +81,7 @@ import RadioComponent from 'formiojs/components/radio/Radio.js';
 import SelectBoxesComponent from 'formiojs/components/selectboxes/SelectBoxes.js';
 import SelectComponent from 'formiojs/components/select/Select.js';
 import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { debounceTime, tap, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import * as CryptoJS from 'crypto-js';
 import { isNullOrUndefined } from 'util';
 import * as i9 from 'ngx-mat-select-search';
@@ -2538,6 +2538,9 @@ class MaterialSelectComponent extends MaterialComponent {
         this.holy = '';
         this.grail = '';
         this.productsloadingFlag = false;
+        this.searching = false;
+        // Variable to hold the reference to the current panel element
+        this.currentPanelElement = null;
         this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
         this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
     }
@@ -2573,15 +2576,9 @@ class MaterialSelectComponent extends MaterialComponent {
             padding: CryptoJS.pad.Pkcs7
         });
     }
-    // Method to handle when the mat-select is opened
-    onMatSelectOpen(select) {
-        this.selectElem = select;
-        this.registerPanelScrollEvent();
-    }
-    registerPanelScrollEvent() {
-        if (this.selectElem) {
-            this.selectElem.panel.nativeElement.addEventListener('scroll', this.onScroll.bind(this));
-        }
+    registerPanelScrollEvent(selectElem) {
+        const panelElement = selectElem.panel.nativeElement;
+        panelElement.addEventListener('scroll', this.onScroll.bind(this));
     }
     onScroll(event) {
         if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
@@ -2623,7 +2620,7 @@ class MaterialSelectComponent extends MaterialComponent {
         const enpageSize = this.scrumble(pageSize);
         const ensearchQuery = this.scrumble(searchQuery);
         let enactive = this.scrumble(onlyActive);
-        // Check if enactive is undefined, null, or blank
+        //Check if enactive is undefined, null, or blank
         if (enactive === undefined || enactive === null || enactive === '') {
             enactive = this.scrumble(true); // Set default value to true
         }
@@ -2644,19 +2641,29 @@ class MaterialSelectComponent extends MaterialComponent {
         const baseApiUrl = baseUrlMapping[hostname] || null;
         this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetVendorProducts?vendorId=${envendorId}&pageNumber=${enpageNumber}&pageSize=${enpageSize}&search=${ensearchQuery}&onlyActive=${enactive}&includeDescription=${endescription}`, { headers }).subscribe(response => {
             if (response && response.code === 200) {
-                this.totalPages = response?.data?.totalPages;
                 if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
-                    const transformedData = this.transformResponseData(response.data.dataSource);
+                    this.totalPages = response?.data?.totalPages;
+                    const data = response.data.dataSource;
+                    const transformedData = this.transformResponseData(data);
+                    this.filteredOptionsLength = transformedData.length;
                     // Update filteredOptions with transformedData
                     this.filteredOptions = Promise.resolve(transformedData.map(item => ({
                         label: item.label,
                         value: item.value,
                         date: item.date
                     })));
-                }
-                setTimeout(() => {
+                    this.searching = false;
+                    // Update filteredOptions with transformedData
+                    // this.filteredOptions = this.filteredOptions.then(existingOptions => {
+                    //   const newOptions = transformedData.map(item => ({
+                    //     label: item.label,
+                    //     value: item.value,
+                    //     date: item.date
+                    //   }));
+                    //   return existingOptions.concat(newOptions);
+                    // });
                     this.productsloadingFlag = true;
-                }, 1000);
+                }
             }
         });
     }
@@ -2698,27 +2705,48 @@ class MaterialSelectComponent extends MaterialComponent {
     }
     onClearAll() {
         if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
-            this.loadData(1, 20, '');
+            this.pageNumber = 1;
+            this.pageSize = 20;
+            this.searchQuery = '';
+            this.loadData(this.pageNumber, this.pageSize, this.searchQuery);
         }
     }
     ngAfterViewInit() {
-        this.selectElem.openedChange.subscribe((isOpen) => {
-            if (isOpen) {
-                if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
-                    this.loadData(1, 20, '');
+        if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
+            this.selectElem.openedChange.subscribe((isOpen) => {
+                if (isOpen) {
+                    this.pageNumber = 1;
+                    this.pageSize = 20;
+                    this.searchQuery = '';
+                    this.searching = true;
+                    this.loadData(this.pageNumber, this.pageSize, this.searchQuery);
+                    this.registerPanelScrollEvent(this.selectElem);
                 }
-            }
-        });
+                else {
+                    this.removePanelScrollEvent();
+                    console.log('closed');
+                }
+            });
+        }
+    }
+    removePanelScrollEvent() {
+        // Remove the scroll event listener
+        if (this.currentPanelElement) {
+            this.currentPanelElement.removeEventListener('scroll', this.onScroll.bind(this));
+            this.currentPanelElement = null;
+        }
     }
     ngOnInit() {
         /*new logic */
         if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
             this.websiteMultiFilterCtrl.valueChanges
                 .pipe(debounceTime(1000), // Time in milliseconds between key events
-            distinctUntilChanged(), takeUntil(this._onDestroy))
+            tap(() => this.searching = true), distinctUntilChanged(), takeUntil(this._onDestroy))
                 .subscribe((searchQuery) => {
                 if (searchQuery != '') {
-                    this.loadData(1, 20, searchQuery);
+                    this.pageNumber = 1;
+                    this.pageSize = 20;
+                    this.loadData(this.pageNumber, this.pageSize, searchQuery);
                 }
             });
         }
@@ -2762,17 +2790,16 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 (selectionChange)="onChange()"
                 [compareWith]="compareObjects"
                 #productSelect
-                (openedChange)="onMatSelectOpen($event ? selectElem : null)"
         >
-
         <mat-option>
-        <ngx-mat-select-search (input)="onInputChange($event)" placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"> <mat-icon ngxMatSelectSearchClear (click)="clearProducts()">close</mat-icon></ngx-mat-select-search>
+        <ngx-mat-select-search [searching]="instance.component.key.toLowerCase() === 'vendorproductid' ? searching : false" (input)="onInputChange($event)" placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"> 
+        <mat-icon ngxMatSelectSearchClear (click)="clearProducts()">close</mat-icon>
+        </ngx-mat-select-search>
       </mat-option>
 
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" class="virtual-full-view">
           <span [innerHTML]="option.label"></span>
         </mat-option>   
-
           <mat-option *ngIf="!filteredOptionsLength" disabled>
             <span>Nothing was found</span>
           </mat-option>
@@ -2806,17 +2833,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                 (selectionChange)="onChange()"
                 [compareWith]="compareObjects"
                 #productSelect
-                (openedChange)="onMatSelectOpen($event ? selectElem : null)"
         >
-
         <mat-option>
-        <ngx-mat-select-search (input)="onInputChange($event)" placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"> <mat-icon ngxMatSelectSearchClear (click)="clearProducts()">close</mat-icon></ngx-mat-select-search>
+        <ngx-mat-select-search [searching]="instance.component.key.toLowerCase() === 'vendorproductid' ? searching : false" (input)="onInputChange($event)" placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"> 
+        <mat-icon ngxMatSelectSearchClear (click)="clearProducts()">close</mat-icon>
+        </ngx-mat-select-search>
       </mat-option>
 
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" class="virtual-full-view">
           <span [innerHTML]="option.label"></span>
         </mat-option>   
-
           <mat-option *ngIf="!filteredOptionsLength" disabled>
             <span>Nothing was found</span>
           </mat-option>