@rangertechnologies/ngnxt 2.1.67 → 2.1.69

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -1821,94 +1821,110 @@ class CustomDropdownComponent {
     valueField;
     subscription;
     apiObj;
+    uniqueKey;
     ngOnInit() {
+    }
+    getOptions() {
+        console.log('test click');
         // console.log('inside oninit of custom-dropdown of ' + this.id);
         // console.log(this.apiMeta);
         //VD 07Aug24 - isDependentField change
+        // VD 25Oct24 - changes
         this.placeholder = this.placeholder ? this.placeholder : '---Select option---';
-        if (this.apiMeta !== undefined) {
-            this.apiObj = JSON.parse(this.apiMeta);
-            if (!this.apiObj.isDependentField) {
-                this.options = [];
-                this.labelField = this.apiObj.field;
-                // VD 09Sep24- setup the query param for api call
-                let fullEndPoint;
-                if (this.apiObj.endpoint) {
-                    if (this.apiObj.queryValueReference && this.apiObj.queryField) {
-                        // process the end point with query param
-                        let queryReferences = this.apiObj.queryValueReference.split(',');
-                        let queryParams = [];
-                        // Iterate over queryReferences and find the corresponding element in referenceData
-                        queryReferences.forEach(reference => {
-                            // Find the element in referenceData that matches the current reference
-                            let matchingElement = this.question?.referenceQueryData.find(element => element.Reference_Field__c === reference);
-                            // If a matching element is found, get its input value and create a query parameter
-                            if (matchingElement) {
-                                queryParams.push(`${reference}=${matchingElement.input}`);
-                            }
-                        });
-                        fullEndPoint = this.apiObj.endpoint + '?' + queryParams.join('&');
-                        console.log(fullEndPoint);
-                    }
-                    else {
-                        // if no query param get the actual endPoint
-                        fullEndPoint = this.apiObj.endpoint;
-                    }
-                    // VD 19JAN24 - added one more param for authentication
-                    this.dataService.apiResponse(fullEndPoint)?.subscribe((apiResponse) => {
-                        // HA 18-JAN-24 Assigned apiresponse directly if we have the response in array also
-                        // VD 19JAN24 - if response has key with value(which is array)
-                        let responses;
-                        if (this.apiObj.variable) {
-                            // VD 21May24 - handling multiple child objects
-                            // VD 22May24 - used common service file
-                            responses = this.dataService.getValue(apiResponse, this.apiObj.variable);
-                            let results = [];
-                            // HA 19JAN24 To avoid undefined error in console
-                            for (let i = 0; i < responses?.length; i++) {
-                                var resp = responses[i];
-                                results.push(resp);
-                            }
-                            this.options = results;
+        const cachedOptions = localStorage.getItem(this.uniqueKey);
+        if (cachedOptions) {
+            this.options = JSON.parse(cachedOptions);
+        }
+        else {
+            if (this.apiMeta !== undefined) {
+                this.apiObj = JSON.parse(this.apiMeta);
+                if (!this.apiObj.isDependentField) {
+                    this.options = [];
+                    this.labelField = this.apiObj.field;
+                    // VD 09Sep24- setup the query param for api call
+                    let fullEndPoint;
+                    if (this.apiObj.endpoint) {
+                        if (this.apiObj.queryValueReference && this.apiObj.queryField) {
+                            // process the end point with query param
+                            let queryReferences = this.apiObj.queryValueReference.split(',');
+                            let queryParams = [];
+                            // Iterate over queryReferences and find the corresponding element in referenceData
+                            queryReferences.forEach(reference => {
+                                // Find the element in referenceData that matches the current reference
+                                let matchingElement = this.question?.referenceQueryData.find(element => element.Reference_Field__c === reference);
+                                // If a matching element is found, get its input value and create a query parameter
+                                if (matchingElement) {
+                                    queryParams.push(`${reference}=${matchingElement.input}`);
+                                }
+                            });
+                            fullEndPoint = this.apiObj.endpoint + '?' + queryParams.join('&');
+                            console.log(fullEndPoint);
                         }
-                        else { // VD 19JAN24 - if response has value(which is array) only
-                            responses = apiResponse;
-                            this.options = responses;
+                        else {
+                            // if no query param get the actual endPoint
+                            fullEndPoint = this.apiObj.endpoint;
                         }
-                        // Reference https://www.npmjs.com/package/@ng-select/ng-select
-                    });
-                }
-            }
-            // VD NOV23 - handle the dependent update for dropdown
-            // // VD 09Sep24- push the dependent field values for dropdown
-            let sourceId = this.apiObj.sourceQuestionId;
-            if (sourceId && this.apiObj.variable || this.apiObj.valueField) {
-                // Subscribe for the changes
-                this.subscription = this.changeService.changeAnnounced$.subscribe((changeValue) => {
-                    if (changeValue != undefined) {
-                        // console.log('inside subscription for the change');
-                        if (changeValue.valueObj != undefined && changeValue.fromQuestionId == this.apiObj.sourceQuestionId) {
-                            //  this.selectedValue = changeValue.valueObj[this.apiObj.valueField];
-                            //  let value ={};
-                            //  value['name'] = this.selectedValue;
+                        // VD 19JAN24 - added one more param for authentication
+                        this.dataService.apiResponse(fullEndPoint)?.subscribe((apiResponse) => {
+                            // HA 18-JAN-24 Assigned apiresponse directly if we have the response in array also
+                            // VD 19JAN24 - if response has key with value(which is array)
+                            this.uniqueKey = apiResponse[this.apiObj.uniqueKey];
                             let responses;
                             if (this.apiObj.variable) {
-                                responses = this.dataService.getValue(changeValue.valueObj, this.apiObj.variable);
+                                // VD 21May24 - handling multiple child objects
+                                // VD 22May24 - used common service file
+                                responses = this.dataService.getValue(apiResponse, this.apiObj.variable);
                                 let results = [];
+                                // HA 19JAN24 To avoid undefined error in console
                                 for (let i = 0; i < responses?.length; i++) {
                                     var resp = responses[i];
                                     results.push(resp);
                                 }
                                 this.options = results;
                             }
-                            else {
-                                responses = changeValue.valueObj;
+                            else { // VD 19JAN24 - if response has value(which is array) only
+                                responses = apiResponse;
                                 this.options = responses;
                             }
-                        }
-                        this.changeService.confirmChange(this.apiObj.sourceQuestionId);
+                            // VD 25Oct24 - Store fetched options in local storage
+                            if (this.uniqueKey) {
+                                localStorage.setItem(this.uniqueKey, JSON.stringify(this.options));
+                            }
+                            // Reference https://www.npmjs.com/package/@ng-select/ng-select
+                        });
                     }
-                });
+                }
+                // VD NOV23 - handle the dependent update for dropdown
+                // // VD 09Sep24- push the dependent field values for dropdown
+                let sourceId = this.apiObj.sourceQuestionId;
+                if (sourceId && this.apiObj.variable || this.apiObj.valueField) {
+                    // Subscribe for the changes
+                    this.subscription = this.changeService.changeAnnounced$.subscribe((changeValue) => {
+                        if (changeValue != undefined) {
+                            // console.log('inside subscription for the change');
+                            if (changeValue.valueObj != undefined && changeValue.fromQuestionId == this.apiObj.sourceQuestionId) {
+                                //  this.selectedValue = changeValue.valueObj[this.apiObj.valueField];
+                                //  let value ={};
+                                //  value['name'] = this.selectedValue;
+                                let responses;
+                                if (this.apiObj.variable) {
+                                    responses = this.dataService.getValue(changeValue.valueObj, this.apiObj.variable);
+                                    let results = [];
+                                    for (let i = 0; i < responses?.length; i++) {
+                                        var resp = responses[i];
+                                        results.push(resp);
+                                    }
+                                    this.options = results;
+                                }
+                                else {
+                                    responses = changeValue.valueObj;
+                                    this.options = responses;
+                                }
+                            }
+                            this.changeService.confirmChange(this.apiObj.sourceQuestionId);
+                        }
+                    });
+                }
             }
         }
     }
@@ -1928,11 +1944,11 @@ class CustomDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", question: "question", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- VD 07Aug24 - isDependentField change-->\n<ng-select\n            [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n            [(ngModel)]=\"selectedValue\" \n            [placeholder]=\"placeholder\"\n            [disabled]=\"readOnly\"\n            (change)=\"selectChange($event)\"\n            [id]=\"id\">\n  <ng-option *ngFor=\"let option of options\" [value]=\"apiObj !== undefined && !apiObj.isDependentField ? option : option.Value__c\">{{ apiObj !== undefined && !apiObj.isDependentField ? option[labelField] : option.Value__c  }}</ng-option> \n</ng-select>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", question: "question", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- VD 07Aug24 - isDependentField change-->\n<!-- VD 25Oct24 - changes-->\n<ng-select\n            [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n            [(ngModel)]=\"selectedValue\" \n            [placeholder]=\"placeholder\"\n            [disabled]=\"readOnly\"\n            (click) = \"getOptions()\"\n            (change)=\"selectChange($event)\"\n            [id]=\"id\">\n  <ng-option *ngFor=\"let option of options\" [value]=\"apiObj !== undefined && !apiObj.isDependentField ? option : option.Value__c\">{{ apiObj !== undefined && !apiObj.isDependentField ? option[labelField] : option.Value__c  }}</ng-option> \n</ng-select>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-dropdown', template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- VD 07Aug24 - isDependentField change-->\n<ng-select\n            [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n            [(ngModel)]=\"selectedValue\" \n            [placeholder]=\"placeholder\"\n            [disabled]=\"readOnly\"\n            (change)=\"selectChange($event)\"\n            [id]=\"id\">\n  <ng-option *ngFor=\"let option of options\" [value]=\"apiObj !== undefined && !apiObj.isDependentField ? option : option.Value__c\">{{ apiObj !== undefined && !apiObj.isDependentField ? option[labelField] : option.Value__c  }}</ng-option> \n</ng-select>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"] }]
+            args: [{ selector: 'app-custom-dropdown', template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- VD 07Aug24 - isDependentField change-->\n<!-- VD 25Oct24 - changes-->\n<ng-select\n            [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n            [(ngModel)]=\"selectedValue\" \n            [placeholder]=\"placeholder\"\n            [disabled]=\"readOnly\"\n            (click) = \"getOptions()\"\n            (change)=\"selectChange($event)\"\n            [id]=\"id\">\n  <ng-option *ngFor=\"let option of options\" [value]=\"apiObj !== undefined && !apiObj.isDependentField ? option : option.Value__c\">{{ apiObj !== undefined && !apiObj.isDependentField ? option[labelField] : option.Value__c  }}</ng-option> \n</ng-select>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"] }]
         }], ctorParameters: function () { return [{ type: ChangeService }, { type: DataService }, { type: I18nService }]; }, propDecorators: { options: [{
                 type: Input
             }], placeholder: [{
@@ -6148,7 +6164,8 @@ class BookletComponent {
             }
         });
         // VD 13Sep24 - databind changes
-        if (this.dataBind) {
+        // VD 23 Oct24 - file type changes
+        if (this.dataBind && Object.keys(this.dataBind).length > 0) {
             this.changeService.dataChanges('dataBind');
         }
     }