mmhglobal-dynamicform 2.6.3 → 2.6.4

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -11768,11 +11768,11 @@ class ZudfComponent extends ContainerFieldBase {
      * @param group The ZGroup object to which the field elements will be added.
      * @param jsonString The JSON string representing the field elements.
      */
-    renderFieldElementByJsonString(group, jsonString) {
+    renderFieldElementByJsonString(group, jsonString, fieldElementName = '') {
         // Parse the JSON string into an array of field elements.
         const fieldElementMasterCodeJsonArray = JSON.parse(jsonString);
         // Render the field elements.
-        this.renderFieldElement(fieldElementMasterCodeJsonArray);
+        this.renderFieldElement(fieldElementMasterCodeJsonArray, fieldElementName);
     }
     //#region Display model
     /**
@@ -11865,7 +11865,7 @@ class ZudfComponent extends ContainerFieldBase {
      * Renders field elements as form controls in a new form group.
      * @param {any} fieldElements - The field elements to be rendered.
      */
-    renderFieldElement(fieldElements) {
+    renderFieldElement(fieldElements, fieldElementName = '') {
         this.clearZModel();
         if (fieldElements) {
             this.loadedFieldsSequence = {};
@@ -11908,6 +11908,12 @@ class ZudfComponent extends ContainerFieldBase {
                         }
                     });
                 }
+                // need to call back field element "<field name>_loaded"
+                if (fieldElementName != '') {
+                    if (this.group[fieldElementName + '_loaded']) {
+                        this.group[fieldElementName + '_loaded'](this.group);
+                    }
+                }
                 // To consider: Trigger the "onchange" event or perform any other necessary actions here
             });
         }
@@ -12743,8 +12749,11 @@ class SfquerybuilderComponent {
         this.inOperators = ['in', 'notin'];
         this.dropdownOperators = [
             this.equalOperator,
+            this.notequalOperator,
             this.inOperator,
-            this.notinOperator
+            this.notinOperator,
+            this.isnullOperator,
+            this.isnotnullOperator
         ];
         this.stringOperators = [
             this.equalOperator,
@@ -12763,7 +12772,9 @@ class SfquerybuilderComponent {
             this.greaterthanOperator,
             this.greaterthanorequalOperator,
             this.lessthanOperator,
-            this.lessthanorequalOperator
+            this.lessthanorequalOperator,
+            this.isnullOperator,
+            this.isnotnullOperator
         ];
         this.dateOperators = [
             this.equalOperator,
@@ -12771,16 +12782,26 @@ class SfquerybuilderComponent {
             this.greaterthanOperator,
             this.greaterthanorequalOperator,
             this.lessthanOperator,
-            this.lessthanorequalOperator
+            this.lessthanorequalOperator,
+            this.isnullOperator,
+            this.isnotnullOperator
+        ];
+        this.booleanOperators = [
+            this.equalOperator,
+            this.notequalOperator,
+            this.isnullOperator,
+            this.isnotnullOperator
         ];
         this.selectionComponentList = [];
     }
     ngOnInit() {
         ZComponentHelper.setComponentProperties(this);
         ZComponentHelper.registerComponent(this);
-        of(true).pipe(switchMap$1(cont => {
+        of(true).pipe(switchMap$1(_ => {
             return this.beforeLoadField(this.data);
-        }), switchMap$1(cont2 => {
+        }), tap$1(data => {
+            this.data = data;
+        }), switchMap$1(_ => {
             return this.loadQueryBuilder();
         })).subscribe(() => {
             // Where to update operator syntax
@@ -12802,67 +12823,78 @@ class SfquerybuilderComponent {
         }
         this.fields = this.fieldService.getFormFieldCode(this.data.Value, "FormField", null, null);
         try {
+            let isGrouped = true;
             return this.fields.pipe(tap$1((data) => {
+                // if [isGrouped = true] include grouping name as prefix
+                if (data.length > 1) {
+                    isGrouped = false;
+                }
                 data.forEach(async (field) => {
-                    //sf //todo: later change to base on other attribute single or multi select for field element
-                    if (field.Type == 'category' || field.Type == 'multiselect') {
-                        this.sdFilter.push({
-                            field: field.Value,
-                            label: field.Name,
-                            type: 'string',
-                            operators: this.dropdownOperators,
-                            template: await this.generateColumnSelection(field),
-                        });
-                    }
-                    else if (field.Type === 'string') {
-                        this.sdFilter.push({
-                            field: field.Value,
-                            label: field.Name,
-                            operators: this.stringOperators,
-                            type: 'string'
-                        });
-                    }
-                    else if (field.Type === 'date') {
-                        this.sdFilter.push({
-                            field: field.Value,
-                            label: field.Name,
-                            operators: this.dateOperators,
-                            type: 'date'
-                        });
-                    }
-                    else if (field.Type === 'number') {
-                        this.sdFilter.push({
-                            field: field.Value,
-                            label: field.Name,
-                            operators: this.integerOperators,
-                            type: 'number'
-                        });
-                    }
-                    else if (field.Value === 'boolean') {
-                        this.sdFilter.push({
-                            field: field.Value,
-                            label: field.Name,
-                            type: 'boolean',
-                            template: await this.generateColumnCheckbox(field.Name, false)
-                        });
-                    }
-                    else {
-                        this.sdFilter.push({
-                            field: field.Value,
-                            label: field.Name,
-                            type: 'string',
-                            operators: this.stringOperators,
-                        });
-                    }
+                    this.renderComponentType(field, isGrouped);
                 }); //end foreach
                 this.issfLoaded = true;
             }));
+            return of(true);
         }
         catch (error) {
             console.error("error: ", error);
             return of(false);
         }
     }
+    async renderComponentType(field, isGrouped, fieldTitle) {
+        let componentLabel = field.SubType ? field.Label : field.Label ?? field.Name;
+        componentLabel = !isGrouped && !ZComponentHelper.isNullUndefinedEmpty(fieldTitle) ? "[" + fieldTitle + "] " + field.Label : !ZComponentHelper.isNullUndefinedEmpty(field.Label) ? field.Label : field.Name;
+        let componentField = !ZComponentHelper.isNullUndefinedEmpty(fieldTitle) ? fieldTitle + "_" + field.Value : field.Value;
+        if (field.Type === 'category' || field.Type === 'multiselect' || field.Type === 'zuiselectmultiple') {
+            this.sdFilter.push({
+                field: componentField,
+                label: componentLabel,
+                type: 'string',
+                operators: this.dropdownOperators,
+                template: await this.generateColumnSelection(field),
+            });
+        }
+        else if (field.Type === 'date') {
+            this.sdFilter.push({
+                field: componentField,
+                label: componentLabel,
+                operators: this.dateOperators,
+                type: 'date'
+            });
+        }
+        else if (field.Type === 'number') {
+            this.sdFilter.push({
+                field: componentField,
+                label: componentLabel,
+                operators: this.integerOperators,
+                type: 'number'
+            });
+        }
+        else if (field.Value === 'boolean') {
+            this.sdFilter.push({
+                field: componentField,
+                label: componentLabel,
+                type: 'boolean',
+                operators: this.booleanOperators,
+                template: await this.generateColumnCheckbox(field.Name, false)
+            });
+        }
+        else if (field.Type === 'kcard') {
+            if (field.Value.length > 0) {
+                field.Value.forEach(async (item) => {
+                    this.renderComponentType(item, isGrouped, field.Title);
+                });
+            }
+        }
+        else {
+            this.sdFilter.push({
+                field: componentField,
+                label: componentLabel,
+                operators: this.stringOperators,
+                type: 'string'
+            });
+        }
+    }
     //#region checkbox
     generateColumnCheckbox(label, value) {
         return {
@@ -12894,7 +12926,8 @@ class SfquerybuilderComponent {
                 if (this.data['Filters']) {
                     this.filters = ZComponentHelper.getGroupEvalValue.call(this, this.data['Filters'], this.group);
                 }
-                return createElement('input', { attrs: { 'type': 'text', 'style': 'display: none' } }); //createElement('input', { attrs: { 'type': 'text' } });
+                //return createElement('input', { attrs: { 'type': 'text', 'style': 'display: none' } });
+                return createElement('input', { attrs: { 'type': 'text' } });
             },
             // Destroy the custom component
             destroy: (args) => {
@@ -12932,49 +12965,102 @@ class SfquerybuilderComponent {
                     const selectionComponent = this.generateSelectionComponent(args, optionList);
                     selectionComponent.appendTo('#' + args.elements.id);
                 }
+                // manual dropdown or zudf manual dropdown
+                else if (fieldElementData['SelectOptions'] && Array.isArray(fieldElementData['SelectOptions'])) {
+                    // convert to property name used in the component rendering
+                    const optionList = [];
+                    fieldElementData['SelectOptions'].forEach((item) => {
+                        optionList.push({
+                            text: item['text'],
+                            value: item['value']
+                        });
+                    });
+                    const selectionComponent = this.generateSelectionComponent(args, optionList);
+                    selectionComponent.appendTo('#' + args.elements.id);
+                }
+                // zudf ResourceURL / Common Master dropdown
                 else {
                     const selectOptions = fieldElementData['SelectOptions'];
                     const selectOptionsResourceURL = selectOptions['ResourceURL'];
-                    const prefixResourceURLChecking = selectOptionsResourceURL + '_' + args.elements.id;
-                    if (!this.loadedDropdownOptions.includes(prefixResourceURLChecking)) {
-                        this.loadedDropdownOptions.push(prefixResourceURLChecking);
-                        if (this.filters) {
-                            selectOptions['Filters'] = this.filters;
+                    // ResourceURL dropdown
+                    if (selectOptionsResourceURL) {
+                        const prefixResourceURLChecking = selectOptionsResourceURL + '_' + args.elements.id;
+                        if (!this.loadedDropdownOptions.includes(prefixResourceURLChecking)) {
+                            this.loadedDropdownOptions.push(prefixResourceURLChecking);
+                            if (this.filters) {
+                                selectOptions['Filters'] = this.filters;
+                            }
+                            const param = Object.assign({}, DefaultPageSettingParams);
+                            param.pageSize = selectOptions['PageSize'];
+                            param.columns = selectOptions['Columns'];
+                            param.filters += selectOptions['Filters'];
+                            param.sortColumnName = selectOptions['SortColumnName'];
+                            param.sortOrder = selectOptions['SortOrder'];
+                            // Need delay 400ms if not 3rd segment (value) will not be rendered.
+                            this.webApiService.httpPost$(this.resourceApiService.getPageUrl(selectOptionsResourceURL), param).pipe(delay(400), map((resp) => {
+                                const optionList = [];
+                                resp.dataSet.forEach((item) => {
+                                    optionList.push({
+                                        text: item[selectOptions['Name']],
+                                        value: item[selectOptions['Value']]
+                                    });
+                                });
+                                const selectionComponent = this.generateSelectionComponent(args, optionList);
+                                selectionComponent.appendTo('#' + args.elements.id);
+                                //const xxx = document.getElementById(args.elements.id);
+                                ////xxx.appendChild(inputElement);
+                                //xxx.style.display = 'block';
+                                //#region used for updateSelectionOption
+                                const existingIndex = this.selectionComponentList.findIndex((item) => item.componentId === args.elements.id);
+                                if (existingIndex !== -1) {
+                                    // Object with the same componentId exists, replace resourceUrl
+                                    this.selectionComponentList[existingIndex].resourceUrl = selectOptionsResourceURL;
+                                }
+                                else {
+                                    // Object with componentId doesn't exist, push a new object
+                                    this.selectionComponentList.push({
+                                        resourceUrl: selectOptionsResourceURL,
+                                        componentId: args.elements.id
+                                    });
+                                }
+                                //#endregion
+                            })).subscribe();
                         }
-                        const param = Object.assign({}, DefaultPageSettingParams);
-                        param.pageSize = selectOptions['PageSize'];
-                        param.columns = selectOptions['Columns'];
-                        param.filters += selectOptions['Filters'];
-                        param.sortColumnName = selectOptions['SortColumnName'];
-                        param.sortOrder = selectOptions['SortOrder'];
-                        this.webApiService.httpPost$(this.resourceApiService.getPageUrl(selectOptionsResourceURL), param).pipe(delay(300), map((resp) => {
+                    }
+                    // zudf Common Master dropdown
+                    else if (fieldElementData.zudfDataSourceType && fieldElementData.zudfDataSourceType === "resource") {
+                        // extract zudf_dropdown from session storage
+                        const zudf_dropdown = sessionStorage.getItem("zudf_dropdown") ? JSON.parse(sessionStorage.getItem("zudf_dropdown")) : null;
+                        if (zudf_dropdown) {
                             const optionList = [];
-                            resp.dataSet.forEach((item) => {
-                                optionList.push({
-                                    text: item[selectOptions['Name']],
-                                    value: item[selectOptions['Value']]
-                                });
+                            zudf_dropdown.forEach(res => {
+                                const name = res.text.split("Options")[0];
+                                if (fieldElementData.Label === name) {
+                                    res.value.forEach(val => {
+                                        optionList.push({
+                                            text: val['Name'],
+                                            value: val['Id']
+                                        });
+                                    });
+                                }
                             });
                             const selectionComponent = this.generateSelectionComponent(args, optionList);
                             selectionComponent.appendTo('#' + args.elements.id);
-                            const xxx = document.getElementById(args.elements.id);
-                            //xxx.appendChild(inputElement);
-                            xxx.style.display = 'block';
-                            //#region used for updateSelectionOption
-                            const existingIndex = this.selectionComponentList.findIndex((item) => item.componentId === args.elements.id);
-                            if (existingIndex !== -1) {
-                                // Object with the same componentId exists, replace resourceUrl
-                                this.selectionComponentList[existingIndex].resourceUrl = selectOptionsResourceURL;
-                            }
-                            else {
-                                // Object with componentId doesn't exist, push a new object
-                                this.selectionComponentList.push({
-                                    resourceUrl: selectOptionsResourceURL,
-                                    componentId: args.elements.id
-                                });
-                            }
-                            //#endregion
-                        })).subscribe();
+                        }
+                    }
+                    // User List dropdown
+                    else if (fieldElementData.zudfDataSourceType && fieldElementData.zudfDataSourceType === "user") {
+                        const optionList = [];
+                        const userList = JSON.parse(sessionStorage?.getItem("userList") ?? 'null');
+                        //const arrayTest = userList.map(({ SelectionName, Id }) => ({ text: SelectionName, value: Id }));
+                        userList.forEach((item) => {
+                            optionList.push({
+                                text: item['SelectionName'],
+                                value: item['Id']
+                            });
+                        });
+                        const selectionComponent = this.generateSelectionComponent(args, optionList);
+                        selectionComponent.appendTo('#' + args.elements.id);
                     }
                 }
             } //end write
@@ -13076,10 +13162,10 @@ class SfquerybuilderComponent {
             const callFunc = eval('this.' + beforeLoadField);
             if (typeof callFunc === "function") {
                 const newFunc = callFunc.bind(this);
-                return newFunc(event, this);
+                return newFunc(event, this, fieldElementData);
             }
         }
-        return of(true);
+        return of(fieldElementData);
     }
 }
 SfquerybuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SfquerybuilderComponent, deps: [{ token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WebApiService }], target: i0.ɵɵFactoryTarget.Component });