sf-i-reporting 1.0.53 → 1.0.55

package/sf-i-reporting.js

@@ -153,6 +153,12 @@ let SfIReporting = class SfIReporting extends LitElement {
                             }
                             console.log('selected values form', form.selectedValues(), form.selectedTexts());
                         }
+                        else if (element.type == "sf-i-form-select") {
+                            valueObj[element.id] = element.value;
+                            for (let field of element.selectfields) {
+                                valueObj[field] = element.value[field];
+                            }
+                        }
                         else if (element.type == "sf-i-bricks") {
                             let bricks = this._SfReportingContainer.querySelector('#' + element.id);
                             if (element.savenameseparate == "yes") {
@@ -384,6 +390,7 @@ let SfIReporting = class SfIReporting extends LitElement {
             console.log('dataModel', this.dataModel);
         };
         this.populateView = (scrollTopTarget = 0) => {
+            var _a;
             console.log('populating view');
             let html = "";
             // html += `<div class="d-flex justify-between m-20">
@@ -462,6 +469,20 @@ let SfIReporting = class SfIReporting extends LitElement {
                 </div>
               </div>`;
             }
+            if (this.flow != "details") {
+                html += `
+        <div class="sf-i-form-modal-container d-flex flex-col hide p-10" part="sf-i-form-modal-container" id="sf-i-form-modal-container">
+          <div class="d-flex w-100-m-0 justify-between align-center">
+            <button id="button-back" part="button-icon" class="button-icon-click invisible"><span class="material-icons">keyboard_backspace</span></button>
+            <button id="button-close-form" part="button-icon" class="button-icon-click"><span class="material-icons">cancel</span></button>
+          </div>
+          <div class="d-flex w-100-m-0" id="sf-i-form-container" part="sf-i-form-container"></div>
+          <div class="d-flex w-100-m-0 justify-center align-center">
+            <button id="button-save-form" part="button-icon" class="button-icon-click"><span class="material-icons">check</span></button>
+          </div>
+        </div>
+      `;
+            }
             this._SfReportingContainer.innerHTML = html;
             this._SfReportingContainer.style.display = 'block';
             this.initSectionListeners();
@@ -494,7 +515,7 @@ let SfIReporting = class SfIReporting extends LitElement {
                     }
                     // setTimeout(() => {form.loadMode();},1000)
                 }
-                if (element.type == "sf-i-bricks") {
+                else if (element.type == "sf-i-bricks") {
                     console.log('bricks element value', element.value, element.id);
                     let bricks = this._SfReportingContainer.querySelector('#' + element.id);
                     let selectedDependedValues = [];
@@ -510,11 +531,6 @@ let SfIReporting = class SfIReporting extends LitElement {
                     bricks.namesjson = JSON.stringify(values[0]);
                     bricks.idsjson = JSON.stringify(values[1]);
                     if (element.value != '') {
-                        // let ids = []
-                        // for(let val of element.value){
-                        //   console.log('bricks spliting values', val, element.id)
-                        //   ids.push(val.split(';')[1])
-                        // }
                         bricks.prepopulateValJson = JSON.stringify(element.value);
                     }
                     else {
@@ -527,7 +543,61 @@ let SfIReporting = class SfIReporting extends LitElement {
                     else {
                         bricks.flow = "edit";
                     }
-                    // setTimeout(() => {bricks.loadMode()},500)
+                }
+                else if (element.type == "sf-i-uploader") {
+                    let uploader = this._SfReportingContainer.querySelector('#' + element.id);
+                    uploader.prepopulatedInputArr = JSON.stringify((_a = element.value) !== null && _a !== void 0 ? _a : []);
+                    uploader.readOnly = (this.flow == "details");
+                    uploader.loadMode();
+                }
+                else if (element.type == "sf-i-form-select") {
+                    let buttonEditForm = this._SfReportingContainer.querySelector('#button-edit-form-' + element.id);
+                    buttonEditForm === null || buttonEditForm === void 0 ? void 0 : buttonEditForm.addEventListener('click', () => {
+                        var _a;
+                        let formHtml = `
+            <div part="date-container" class="d-flex flex-col flex-grow">
+              <label id="${element.id}-label" part="date-label">${element.label}</label>
+              <div part="td-body-2"><sf-i-elastic-text text="${element.hint}" minLength="50"></sf-i-elastic-text></div>
+              <sf-i-form exportparts="td-action:form-td-action, td-body" id="${element.id}" class="reporting-sf-i-form" part="input-sf-i-form" name="${element.name}" label="" apiId="${element.apiid}" mode="${element.mode}" searchPhrase="${(element.mode == "multiselect-dropdown" ? (this.projectname + "&") : "") + element.searchstring}" selectProjection="${element.selectprojection}" ignoreProjections="${element.ignoredprojections}" ${parseInt(element.maxselect) == 0 ? "" : `maxselect="${element.maxselect}"`} ${element.mandatory != null ? "mandatory=\"\"" : ""}></sf-i-form>
+            </div>
+          `;
+                        let formContainer = this._SfReportingContainer.querySelector('#sf-i-form-container');
+                        formContainer.innerHTML = formHtml;
+                        let formModalContainer = this._SfReportingContainer.querySelector('#sf-i-form-modal-container');
+                        formModalContainer.style.display = 'block';
+                        let formCloseButton = this._SfReportingContainer.querySelector('#button-close-form');
+                        formCloseButton.addEventListener('click', () => {
+                            formModalContainer.style.display = 'none';
+                        });
+                        let formSaveButton = this._SfReportingContainer.querySelector('#button-save-form');
+                        let formObj = formContainer.querySelector('#' + element.id);
+                        console.log('selectedsearchid', element.value);
+                        if (((_a = element.value.id) !== null && _a !== void 0 ? _a : '') != '') {
+                            formObj.selectedSearchId = element.value.id;
+                            console.log('form selectedsearchid', formObj.selectedSearchId);
+                        }
+                        formSaveButton.addEventListener('click', () => {
+                            var _a, _b, _c, _d;
+                            formModalContainer.style.display = 'none';
+                            let formObj = formContainer.querySelector('#' + element.id);
+                            console.log("selected", formObj, element.id);
+                            for (let dataElement of this.dataModel) {
+                                if (dataElement.id == element.id) {
+                                    let valObj = {};
+                                    let selectedObj = formObj.selectedEntireValues();
+                                    valObj.id = selectedObj.id;
+                                    let cols = JSON.parse((_b = (_a = selectedObj.fields) === null || _a === void 0 ? void 0 : _a.cols) !== null && _b !== void 0 ? _b : '[]');
+                                    let data = JSON.parse((_d = (_c = selectedObj.fields) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : '[]');
+                                    for (let [i, col] of cols.entries()) {
+                                        valObj[col] = data[i];
+                                    }
+                                    dataElement.value = valObj;
+                                }
+                            }
+                            this.populateView();
+                        });
+                        this.updateShortlistedSearchPhrases(element.id);
+                    });
                 }
             }
             let checkboxPublish = this._SfReportingContainer.querySelector('#input-publish-checkbox');
@@ -563,7 +633,7 @@ let SfIReporting = class SfIReporting extends LitElement {
             let buttonDeleteCancel = this._SfReportingContainer.querySelector('#button-delete-cancel');
             buttonDeleteCancel === null || buttonDeleteCancel === void 0 ? void 0 : buttonDeleteCancel.addEventListener('click', this.deleteCancelClick);
             let buttonDeleteConfirm = this._SfReportingContainer.querySelector('#button-delete-confirm');
-            buttonDeleteConfirm === null || buttonDeleteConfirm === void 0 ? void 0 : buttonDeleteConfirm.addEventListener('click', this.submitCancelClick);
+            buttonDeleteConfirm === null || buttonDeleteConfirm === void 0 ? void 0 : buttonDeleteConfirm.addEventListener('click', this.submitDelete);
             let buttonEditCancel = this._SfReportingContainer.querySelector('#button-edit-cancel');
             buttonEditCancel === null || buttonEditCancel === void 0 ? void 0 : buttonEditCancel.addEventListener('click', this.editCancelClick);
             setTimeout(() => {
@@ -572,7 +642,7 @@ let SfIReporting = class SfIReporting extends LitElement {
             }, 500);
         };
         this.prepopulateValues = () => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             console.log('prepopulating', this.getPrepopulateJson());
             for (let [i, element] of this.dataModel.entries()) {
                 if (isAddButtonObject(element)) {
@@ -603,19 +673,22 @@ let SfIReporting = class SfIReporting extends LitElement {
                         else if (element.type == "date") {
                             this.dataModel[i].value = (_c = this.getPrepopulateJson()[element.id]) !== null && _c !== void 0 ? _c : '';
                         }
+                        else if (element.type == "sf-i-form-select") {
+                            this.dataModel[i].value = (_d = this.getPrepopulateJson()[element.id]) !== null && _d !== void 0 ? _d : '';
+                        }
                         else if (element.type == "sf-i-form") {
                             if (element.savenameseparate == "yes") {
                                 this.dataModel[i].value = [this.getPrepopulateJson()[element.id + 'id']];
                                 // this.dataModel[i].value = (this.getPrepopulateJson()[element.id + 'name'].trim() ?? '')  + ';' + (this.getPrepopulateJson()[element.id + 'id'] ?? '')
                             }
-                            else if (((_d = parseInt(element.maxselect)) !== null && _d !== void 0 ? _d : 0) >= 1) {
+                            else if (((_e = parseInt(element.maxselect)) !== null && _e !== void 0 ? _e : 0) >= 1) {
                                 if (this.getPrepopulateJson()[element.id + 'id'] != null) {
-                                    this.dataModel[i].value = [(_e = this.getPrepopulateJson()[element.id + 'id']) !== null && _e !== void 0 ? _e : ''];
+                                    this.dataModel[i].value = [(_f = this.getPrepopulateJson()[element.id + 'id']) !== null && _f !== void 0 ? _f : ''];
                                 }
                                 else {
                                     let tempArr = [];
                                     for (let val of this.getPrepopulateJson()[element.id]) {
-                                        tempArr.push((_f = val.split(';')[1]) !== null && _f !== void 0 ? _f : '');
+                                        tempArr.push((_g = val.split(';')[1]) !== null && _g !== void 0 ? _g : '');
                                     }
                                     this.dataModel[i].value = tempArr;
                                 }
@@ -630,6 +703,9 @@ let SfIReporting = class SfIReporting extends LitElement {
                                 this.dataModel[i].value = this.getPrepopulateJson()[element.id];
                             }
                         }
+                        else if (element.type == "sf-i-uploader") {
+                            this.dataModel[i].value = this.getPrepopulateJson()[element.id];
+                        }
                     }
                 }
             }
@@ -700,6 +776,13 @@ let SfIReporting = class SfIReporting extends LitElement {
                                 sectionChildFilledCount++;
                             }
                         }
+                        else if (element.type == "sf-i-form-select") {
+                            console.log('evalshowprogress sf-i-form-select value', element.value, Object.keys(element.value).length, element.mandatory);
+                            if (Object.keys(element.value).length > 0) {
+                                filled++;
+                                sectionChildFilledCount++;
+                            }
+                        }
                         else if (element.type == "sf-i-bricks") {
                             console.log('evalshowprogress sf-i-bricks value', element.value, element.value.length, element.mandatory, element.mandatory != null);
                             if (element.value.length > 0) {
@@ -707,6 +790,13 @@ let SfIReporting = class SfIReporting extends LitElement {
                                 sectionChildFilledCount++;
                             }
                         }
+                        else if (element.type == "sf-i-uploader") {
+                            console.log('evalshowprogress sf-i-uploader value', element.value, element.value.length, element.mandatory, element.mandatory != null);
+                            if (element.value.length > 0) {
+                                filled++;
+                                sectionChildFilledCount++;
+                            }
+                        }
                         if (element.mandatory != null && flagEval) {
                             if (element.value == "" || element.value.length < 1) {
                                 flagEval = false;
@@ -914,6 +1004,7 @@ let SfIReporting = class SfIReporting extends LitElement {
                             }
                         }
                     }
+                    this.checkDependencies(target.id);
                     if (this.evalTimeout != null) {
                         clearTimeout(this.evalTimeout);
                     }
@@ -980,30 +1071,37 @@ let SfIReporting = class SfIReporting extends LitElement {
                             }
                         }
                     }
-                    for (let element of this.dataModel) {
-                        if (element.type == "sf-i-bricks" && element.dependencies.indexOf(target.id) >= 0) {
-                            let dependantBricks = this._SfReportingContainer.querySelector('#' + element.id);
-                            let selectedDependedValues = [];
-                            for (let dependency of element.dependencies) {
-                                let dependedBricks = this._SfReportingContainer.querySelector('#' + dependency);
-                                selectedDependedValues.push(dependedBricks.selectedValueTexts()[0]);
-                            }
-                            let values = this.getBricksValues(element, selectedDependedValues);
-                            console.log('bricks selecteddependantvalues', selectedDependedValues, element.value.length, values[1], element.id);
-                            dependantBricks.namesjson = JSON.stringify(values[0]);
-                            dependantBricks.idsjson = JSON.stringify(values[1]);
-                            if (element.value != '' && element.value.length > 0) {
-                                // let ids = []
-                                // for(let val of element.value){
-                                //   ids.push(val.split(';')[1])
-                                // }
-                                dependantBricks.prepopulateValJson = JSON.stringify(element.value);
+                    this.checkDependencies(target.id);
+                    if (this.evalTimeout != null) {
+                        clearTimeout(this.evalTimeout);
+                    }
+                    this.evalTimeout = setTimeout(() => {
+                        this.evalShowProgress();
+                    }, 2000);
+                });
+            }
+            let uploaders = this._SfReportingContainer.querySelectorAll('.reporting-sf-i-uploader');
+            for (let uploader of uploaders) {
+                uploader.addEventListener('uploadValid', async (ev) => {
+                    let target = ev.target;
+                    let genId = target.id.slice(0, target.id.lastIndexOf('-'));
+                    console.log('bricks value changed', target.id);
+                    for (let [i, element] of this.dataModel.entries()) {
+                        if (!isAddButtonObject(element)) {
+                            if (element.id == target.id) {
+                                this.dataModel[i].value = target.selectedValues();
                             }
-                            else {
-                                dependantBricks.prepopulateValJson = JSON.stringify([]);
+                        }
+                        else {
+                            if (element.schema.indexOf(genId) >= 0) {
+                                for (let [j, childElementArr] of element.children.entries()) {
+                                    for (let [k, childElement] of childElementArr.entries()) {
+                                        if (childElement.id == target.id) {
+                                            this.dataModel[i].children[j][k].value = target.selectedValues();
+                                        }
+                                    }
+                                }
                             }
-                            dependantBricks.loadMode();
-                            await Util.delay(500);
                         }
                     }
                     if (this.evalTimeout != null) {
@@ -1015,6 +1113,90 @@ let SfIReporting = class SfIReporting extends LitElement {
                 });
             }
         };
+        this.checkDependencies = async (id) => {
+            for (let element of this.dataModel) {
+                if (element.dependencies.indexOf(id) >= 0) {
+                    let dependantElement = this._SfReportingContainer.querySelector('#' + element.id);
+                    console.log('dependant element', dependantElement === null || dependantElement === void 0 ? void 0 : dependantElement.tagName, dependantElement === null || dependantElement === void 0 ? void 0 : dependantElement.id, id);
+                    if ((dependantElement === null || dependantElement === void 0 ? void 0 : dependantElement.tagName.toLowerCase()) == "sf-i-bricks") {
+                        let dependantBricks = dependantElement;
+                        let selectedDependedValues = [];
+                        for (let dependency of element.dependencies) {
+                            let dependedBricks = this._SfReportingContainer.querySelector('#' + dependency);
+                            selectedDependedValues.push(dependedBricks.selectedValueTexts()[0]);
+                        }
+                        let values = this.getBricksValues(element, selectedDependedValues);
+                        console.log('bricks selecteddependantvalues', selectedDependedValues, element.value.length, values[1], element.id);
+                        dependantBricks.namesjson = JSON.stringify(values[0]);
+                        dependantBricks.idsjson = JSON.stringify(values[1]);
+                        if (element.value != '' && element.value.length > 0) {
+                            dependantBricks.prepopulateValJson = JSON.stringify(element.value);
+                        }
+                        else {
+                            dependantBricks.prepopulateValJson = JSON.stringify([]);
+                        }
+                        dependantBricks.loadMode();
+                        await Util.delay(500);
+                    }
+                    else if ((dependantElement === null || dependantElement === void 0 ? void 0 : dependantElement.tagName.toLowerCase()) == "sf-i-form") {
+                        let dependantForm = dependantElement;
+                        if (dependantForm.mode == "select") {
+                            this.updateShortlistedSearchPhrases(dependantForm.id);
+                            dependantForm.loadMode();
+                        }
+                    }
+                    else if ((dependantElement === null || dependantElement === void 0 ? void 0 : dependantElement.tagName.toLowerCase()) == "sf-i-form-select") {
+                        let dependantForm = dependantElement;
+                        if (dependantForm.mode == "select") {
+                            this.updateShortlistedSearchPhrases(dependantForm.id);
+                            dependantForm.loadMode();
+                        }
+                    }
+                }
+            }
+        };
+        this.updateShortlistedSearchPhrases = (id) => {
+            for (let dataObj of this.dataModel) {
+                if (dataObj.id == id) {
+                    let element = dataObj;
+                    let elementForm = this._SfReportingContainer.querySelector('#' + element.id);
+                    let tempSearchPhrases = [];
+                    for (let dependency of element.dependencies) {
+                        console.log('checking dependency', dependency);
+                        let dependencyElement = this._SfReportingContainer.querySelector('#' + dependency);
+                        if ((dependencyElement === null || dependencyElement === void 0 ? void 0 : dependencyElement.tagName.toLowerCase()) == "sf-i-bricks") {
+                            console.log('dependencyelement', dependencyElement.id, dependencyElement.selectedTexts());
+                            for (let selectedText of dependencyElement.selectedTexts()) {
+                                if (selectedText == '') {
+                                    continue;
+                                }
+                                tempSearchPhrases.push(selectedText.replace(/ *\([^)]*\) */g, ""));
+                            }
+                        }
+                        else if ((dependencyElement === null || dependencyElement === void 0 ? void 0 : dependencyElement.tagName.toLowerCase()) == "sf-i-form") {
+                            console.log('dependencyelement', dependencyElement.id, dependencyElement.selectedTexts());
+                            for (let selectedText of dependencyElement.selectedTexts()) {
+                                if (selectedText == '') {
+                                    continue;
+                                }
+                                tempSearchPhrases.push(selectedText.replace(/ *\([^)]*\) */g, ""));
+                            }
+                        }
+                        else if ((dependencyElement === null || dependencyElement === void 0 ? void 0 : dependencyElement.tagName.toLowerCase()) == "sf-i-form-select") {
+                            console.log('dependencyelement', dependencyElement.id, dependencyElement.selectedTexts());
+                            for (let selectedText of dependencyElement.selectedTexts()) {
+                                if (selectedText == '') {
+                                    continue;
+                                }
+                                tempSearchPhrases.push(selectedText.replace(/ *\([^)]*\) */g, ""));
+                            }
+                        }
+                    }
+                    elementForm.searchPhrase = tempSearchPhrases.join('&');
+                    console.log('shortlistedSearchPhrases', tempSearchPhrases, elementForm.searchPhrase);
+                }
+            }
+        };
         this.initSectionListeners = () => {
             let sectionHeads = (this._SfReportingContainer.querySelectorAll('.section-head'));
             for (let sectionHead of sectionHeads) {
@@ -1048,7 +1230,7 @@ let SfIReporting = class SfIReporting extends LitElement {
             return elementHtml;
         };
         this.renderElement = (dataObj) => {
-            var _a;
+            var _a, _b, _c;
             let elementHtml = "";
             console.log('rendering obj', dataObj.type);
             if (dataObj.type == "section") {
@@ -1087,14 +1269,21 @@ let SfIReporting = class SfIReporting extends LitElement {
                 elementHtml += `<div part="date-container" class="d-flex flex-col flex-grow">
                         <label id="${dataObj.id}-label" part="date-label">${dataObj.label}</label>
                         <div part="td-body-2"><sf-i-elastic-text text="${dataObj.hint}" minLength="50"></sf-i-elastic-text></div>
-                        <sf-i-form exportparts="td-action:form-td-action, td-body" id="${dataObj.id}" class="reporting-sf-i-form" part="input-sf-i-form" name="${dataObj.name}" label="" apiId="${dataObj.apiid}" mode="${dataObj.mode}" searchPhrase="${this.projectname + "&" + dataObj.searchstring}" selectProjection="${dataObj.selectprojection}" ignoreProjections="${dataObj.ignoredprojections}" ${parseInt(dataObj.maxselect) == 0 ? "" : `maxselect="${dataObj.maxselect}"`} ${dataObj.mandatory != null ? "mandatory=\"\"" : ""}></sf-i-form>
+                        <sf-i-form exportparts="td-action:form-td-action, td-body" id="${dataObj.id}" class="reporting-sf-i-form" part="input-sf-i-form" name="${dataObj.name}" label="" apiId="${dataObj.apiid}" mode="${dataObj.mode}" searchPhrase="${(dataObj.mode == "multiselect-dropdown" ? (this.projectname + "&") : "") + dataObj.searchstring}" selectProjection="${dataObj.selectprojection}" ignoreProjections="${dataObj.ignoredprojections}" ${parseInt(dataObj.maxselect) == 0 ? "" : `maxselect="${dataObj.maxselect}"`} ${dataObj.mandatory != null ? "mandatory=\"\"" : ""}></sf-i-form>
+                      </div>`;
+            }
+            else if (dataObj.type == "sf-i-form-select") {
+                elementHtml += `<div part="date-container" class="d-flex flex-col flex-grow">
+                        <label id="${dataObj.id}-label" part="date-label">${dataObj.label}</label>
+                        <div part="td-body-2"><sf-i-elastic-text text="${dataObj.hint}" minLength="50"></sf-i-elastic-text></div>
+                        <div class="d-flex flex-col align-start" part="form-select-container">
+                          <div class"d-flex align-center" part="form-selected-value">
+                            ${(_b = dataObj.value.name) !== null && _b !== void 0 ? _b : ((_c = dataObj.value.reference) !== null && _c !== void 0 ? _c : "")}
+                          </div>
+                          ${(this.flow == "details") ? '' :
+                    `<button id="button-edit-form-${dataObj.id}" part="button-icon" class="material-icons button-edit-form button-icon-click">edit</button>`}
+                        </div>
                       </div>`;
-                // elementHtml += `<div part="date-container" class="d-flex flex-col flex-grow">
-                //                   <label id="${dataObj.id}-label" part="date-label">${dataObj.label}</label>
-                //                   <div part="td-body"><sf-i-elastic-text text="${dataObj.hint}" minLength="50"></sf-i-elastic-text></div>
-                //                   <sf-i-form id="${dataObj.id}" class="reporting-sf-i-form" name="${dataObj.name}" label="" apiId="${dataObj.apiid}" mode="${dataObj.mode}" searchPhrase="${this.projectname + "&" + dataObj.searchstring}" selectProjection="${dataObj.selectprojection}" ignoreProjections="${dataObj.ignoredprojections}" ${parseInt(dataObj.maxselect) == 0 ? "" : `maxselect="${dataObj.maxselect}"`} ${dataObj.mandatory != null ? "mandatory=\"\"" : ""}></sf-i-form>
-                //                 </div>`
-                //${dataObj.value != "" ? (dataObj.mode == "select" ? "" : ("selectedSearchId=\"" + JSON.stringify(dataObj.value).replace(/"/g,"&quot;") + "\"")) : ""} 
             }
             else if (dataObj.type == "sf-i-bricks") {
                 elementHtml += `<div part="date-container" class="d-flex flex-col flex-grow">
@@ -1103,6 +1292,13 @@ let SfIReporting = class SfIReporting extends LitElement {
                         <sf-i-bricks exportparts="input-select-single, selected-container, selected-option, input-select-multi-option, select-option-label, selected-option-label" id="${dataObj.id}" mode="${dataObj.mode}" class="reporting-sf-i-bricks" part="input-sf-i-bricks" name="${dataObj.name}" ${parseInt(dataObj.maxselect) == 0 ? "" : `maxselect="${dataObj.maxselect}"`} ${dataObj.mandatory != null ? "mandatory=\"\"" : ""}></sf-i-bricks>
                       </div>`;
             }
+            else if (dataObj.type == "sf-i-uploader") {
+                elementHtml += `<div part="uploader-container" class="d-flex flex-col flex-grow">
+                        <label id="${dataObj.id}-label" part="date-label">${dataObj.label}</label>
+                        <div part="td-body-2"><sf-i-elastic-text text="${dataObj.hint}" minLength="50"></sf-i-elastic-text></div>
+                        <sf-i-uploader class="reporting-sf-i-uploader" part="input-sf-i-uploader" id="${dataObj.id}" max="${dataObj.maxselect}" apiid="${dataObj.apiid}" allowedextensions="${dataObj.allowedextensions}" extract="${dataObj.extract}" projectid="${this.projectid}" maxsize="${dataObj.maxsize}" allowdownload="${dataObj.allowdownload}"></sf-i-uploader>
+                      </div>`;
+            }
             return elementHtml;
         };
         this.populateViewShort = () => {
@@ -1388,6 +1584,7 @@ let SfIReporting = class SfIReporting extends LitElement {
             console.log('adding', this.selectedValues());
             let url = "https://" + this.apiId + "/add";
             let body = { projectid: this.projectid, object: this.selectedValues(), schema: this.getConfigJson(), published: this.published };
+            // console.log('adding', body);
             const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
             const xhr = (await this.prepareXhr(body, url, this._SfLoader, authorization));
             this._SfLoader.innerHTML = '';
@@ -1987,6 +2184,16 @@ SfIReporting.styles = css `
       pointer-events: none
     }
     
+    .sf-i-form-modal-container {
+      position: fixed;
+      width: 80%;
+      height: 80%;
+      top: 10%;
+      right: 10%;
+      background-color: white;
+      border: 1px solid #888;
+      overflow: scroll;
+    }
   `;
 __decorate([
     property()