sf-i-reporting 1.0.69 → 1.0.71

package/sf-i-reporting.js

@@ -38,6 +38,7 @@ let SfIReporting = class SfIReporting extends LitElement {
     constructor() {
         super();
         this.apiId = "";
+        this.apiIdUploader = "";
         this.projectid = "";
         this.projectname = "";
         this.configjson = "[]";
@@ -76,6 +77,7 @@ let SfIReporting = class SfIReporting extends LitElement {
         // selectedItem: any = {};
         this.selectedItem = { id: "2b1d4da9-7cfe-4861-91f2-1727d0cc70b4" };
         this.selectedItemIds = [];
+        this.reopenedItem = {};
         this.decryptProjectId = "";
         this.decryptFileName = "";
         this.truncate = (str, n, useWordBoundary) => {
@@ -384,6 +386,9 @@ let SfIReporting = class SfIReporting extends LitElement {
                 else {
                     if (element.type == "section") {
                         let dataObj = createDataObject({ id: 'section-' + sectionCount, name: element.name, type: element.type });
+                        if (this.editdisable == "true") {
+                            dataObj.collapse = "true";
+                        }
                         this.dataModel.push(dataObj);
                         sectionCount++;
                     }
@@ -404,7 +409,7 @@ let SfIReporting = class SfIReporting extends LitElement {
             //           <h3 part="results-title" class="m-0">${this.name}</h3>
             //           <button id="button-detail-close" part="button-icon" class="material-icons">close</button>
             //         </div>`
-            html += `<div class="d-flex flex-col md-20-ml-10" part="title-section">
+            html += `${this.name.length > 1 ? `<div class="d-flex flex-col md-20-ml-10" part="title-section">
               <div class="d-flex w-100-m-0 justify-between align-center">
                 ${this.editdisable != "true" ? `
                 <button id="button-back" part="button-icon" class="button-icon-click"><span class="material-icons">keyboard_backspace</span></button>` : ''}
@@ -434,7 +439,7 @@ let SfIReporting = class SfIReporting extends LitElement {
                 <div class="progress-bar-finished" part="progress-bar-finished"></div>
                 <div class="progress-bar-incomplete" part="progress-bar-incomplete"></div>
               </div>
-            </div>
+            </div>` : ``}
             <div class="d-flex ${this.formviewclass} form-container align-stretch p-10" part="${this.published ? "form-container-published" : "form-container"}">`;
             let firstFlag = true;
             for (let element of this.dataModel) {
@@ -488,9 +493,6 @@ let SfIReporting = class SfIReporting extends LitElement {
         </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>
             this._SfReportingContainer.innerHTML = html;
             this._SfReportingContainer.style.display = 'block';
             this.initSectionListeners();
@@ -515,7 +517,7 @@ let SfIReporting = class SfIReporting extends LitElement {
             for (let element of this.dataModel) {
                 if (element.type == "sf-i-form") {
                     let form = this._SfReportingContainer.querySelector('#' + element.id);
-                    if (this.flow == "details") {
+                    if (this.mode == "view" || this.flow == "details") {
                         form.flow = "read";
                     }
                     if (element.value != '') {
@@ -545,7 +547,7 @@ let SfIReporting = class SfIReporting extends LitElement {
                         bricks.prepopulateValJson = JSON.stringify([]);
                     }
                     console.log('bricks element values', bricks.prepopulateValJson, element.id);
-                    if (this.flow == "details") {
+                    if (this.mode == "view" || this.flow == "details") {
                         bricks.flow = "view";
                     }
                     else {
@@ -555,7 +557,7 @@ let SfIReporting = class SfIReporting extends LitElement {
                 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.readOnly = (this.mode == "view" || this.flow == "details");
                     uploader.loadMode();
                 }
                 else if (element.type == "sf-i-form-select") {
@@ -637,7 +639,7 @@ let SfIReporting = class SfIReporting extends LitElement {
                     });
                 }
             }
-            if (this.flow != 'details') {
+            if (this.mode != "view" && this.flow != 'details') {
                 let selectedOptions = this._SfReportingContainer.querySelectorAll('.selected-option');
                 for (let selectedOption of selectedOptions) {
                     selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.addEventListener('click', async (ev) => {
@@ -701,7 +703,129 @@ let SfIReporting = class SfIReporting extends LitElement {
                 this.evalShowProgress();
                 this._SfReportingContainer.querySelector('.form-container').scrollTo({ top: scrollTopTarget, left: 0 });
                 this.hideLoader();
+                let customEvent = new CustomEvent('valueChanged');
+                this.dispatchEvent(customEvent);
             }, 500);
+            if (this.getPrepopulateJson().history != null && Object.keys(this.getPrepopulateJson().history).length > 0) {
+                this.populateHistory();
+            }
+        };
+        this.populateHistory = () => {
+            var _a;
+            let formContainer = this._SfReportingContainer.querySelector('.form-container');
+            if (formContainer != null) {
+                let html = '';
+                html += `
+        <div class="d-flex flex-col" part="section-container"><div id="history" class="section-head d-flex align-center justify-between" part="section-head-collapsed"><h3 part="section-title-collapsed" id="section-history-title">History</h3><div class="material-icons" id="section-history-icon">keyboard_arrow_down</div></div><div id="section-history-body" class="section-body d-flex ${this.formviewclass} hide" part="section-body">
+      `;
+                for (let [indexDate, historyDate] of Object.keys(this.getPrepopulateJson().history).entries()) {
+                    console.log('history', historyDate);
+                    html += `
+          <div class="d-flex flex-col" part="section-container"><div id="history-date-${indexDate}" class="history-section-head section-head d-flex align-center justify-between" part="section-head-collapsed"><h3 part="section-title-collapsed" id="section-history-title-${indexDate}">${historyDate}</h3><div class="material-icons" id="section-history-icon-${indexDate}">keyboard_arrow_down</div></div><div id="section-history-body-${indexDate}" class="section-body d-flex ${this.formviewclass} hide" part="section-body">
+        `;
+                    for (let [index, historyItem] of this.getPrepopulateJson().history[historyDate].entries()) {
+                        html += `<sf-i-reporting name="" id="history-reporting-${historyDate}-${index}" class="history-reporting" exportparts="uploader-extracted-text:reporting-uploader-extracted-text, uploader-sf-upload-message:reporting-uploader-sf-upload-message, uploader-sf-upload-submessage:reporting-uploader-sf-upload-submessage, uploader-extracted-text-chip:reporting-uploader-extracted-text-chip, uploader-extracted-text-chip-failed:reporting-uploader-extracted-text-chip-failed, uploader-doctype-verify-badge:reporting-uploader-doctype-verify-badge,span-submit-published:reporting-span-submit-published, span-submit-unpublished:reporting-span-submit-unpublished, reporting-container:reporting-reporting-container, button-icon:reporting-button-icon, uploader-button-icon:reporting-uploader-button-icon, sf-i-form-modal-container:reporting-sf-i-form-modal-container, next-calendar-date:reporting-next-calendar-date, last-calendar-date:reporting-last-calendar-date, input-publish-checkbox:reporting-input-publish-checkbox, button-icon-light:reporting-button-icon-light, button-icon-small:reporting-button-icon-small, uploader-input-label:reporting-uploader-input-label, input-radio:reporting-input-radio, radio-label:reporting-radio-label, input-textarea:reporting-input-textarea, input-date:reporting-input-date, input-select-single:reporting-input-select-single, textarea-container:reporting-textarea-container, section-body:reporting-section-body, section-container:reporting-section-container, date-container:reporting-date-container, input-sf-i-uploader:reporting-input-sf-i-uploader, published-container:reporting-published-container, selected-option:reporting-selected-option, input-select-multi-option:reporting-input-select-multi-option, select-option-label:reporting-select-option-label, input-sf-i-form:reporting-input-sf-i-form, input-sf-i-bricks:reporting-input-sf-i-bricks, uploader-input:reporting-uploader-input, form-container:reporting-form-container, published-container:reporting-published-container, form-container-published:reporting-form-container-published, subsection:reporting-subsection, results-title:reporting-results-title, td-head:reporting-td-head, td-action:reporting-td-action, td-body:reporting-td-body, td-body-2:reporting-td-body-2, add-button:reporting-add-button, uploader-button:reporting-uploader-button, section-head-collapsed:reporting-section-head-collapsed, section-title-expanded:reporting-section-title-expanded, section-title-collapsed:reporting-section-title-collapsed, section-head-expanded:reporting-section-head-expanded, progress-bar-finished:reporting-progress-bar-finished, progress-bar-complete:reporting-progress-bar-complete, progress-bar-incomplete:reporting-progress-bar-incomplete, section-success-icon:reporting-section-success-icon, section-body:reporting-section-body, title-section:reporting-title-section, button-lg:reporting-button-lg, uploader-detail-container:reporting-uploader-detail-container, textarea-label:reporting-textarea-label, date-label:reporting-date-label, commentbox:reporting-commentbox, comment-username:reporting-comment-username, detail-head:reporting-detail-head" name="Notice Details" mode="view" editdisable="true" formviewclass="flex-wrap" prepopulatevaljson="${JSON.stringify(historyItem.object).replace(/"/g, '&quot;')}"></sf-i-reporting>`;
+                        let comments = (_a = historyItem.object.comments) !== null && _a !== void 0 ? _a : [];
+                        if (historyItem.object.documents != null && historyItem.object.documents.length > 0) {
+                            html += '<div class="d-flex justify-between m-20">';
+                            html += '<h3 part="history-docs-title" class="m-0"><br />Documents</h3>';
+                            html += '</div>';
+                            html += `
+              <sf-i-uploader prepopulatedInputArr="${JSON.stringify(historyItem.object.documents).replace(/"/g, '&quot;')}" exportparts="detail-container:uploader-detail-container, errmsg:uploader-errmsg, successmsg:uploader-successmsg, sf-upload-message:uploader:sf-upload-message, sf-upload-submessage: uploader-sf-upload-submessage, doctype-verify-badge: uploader-doctype-verify-badge, details-controls-container: uploader-details-controls-container, button-icon: uploader-button-icon, pdf-controls-container: uploader-pdf-controls-container, pdf-pages: uploader-pdf-pages, pdf-page-num: uploader-pdf-page-num, pdf-page-count: uploader-pdf-page-count, pdf-canvas: uploader-pdf-canvas, image-container: uploader-image-container, image-component: uploader-image-component, pdf-thumbnail-container: uploader-pdf-thumbnail-container, pdf-canvas-thumbnail: uploader-pdf-canvas-thumbnail, sf-uploader-download-message: uploader-sf-uploader-download-message, input: uploader-input, upload-buttons-container: uploader-upload-buttons-container, doctype-badge: uploader-doctype-badge, upload-status: uploader-upload-status, ext-badge:uploader-ext-badge, extracted-meta: uploader-extracted-meta, extracted-text-chip: uploader-extracted-text-chip, extracted-text-chip-parsed: uploader-extracted-text-chip-parsed, extracted-text-chip-failed: uploader-extracted-text-chip-failed, matches-title: uploader-matches-title, matches:uploader-matches, extracted-title: uploader-extracted-title, extracted-text: uploader-extracted-text, disclaimer-message-container: uploader-disclaimer-message-container, message-container: uploader-message-container, button: uploader-button" class="reporting-sf-i-uploader" part="input-sf-i-uploader" id="history-doc-uploader-${index}" maximize="yes" max="${historyItem.object.documents.length}" apiid="${this.apiIdUploader}" projectid="${this.projectid}" mode="view"></sf-i-uploader>
+            `;
+                        }
+                        html += '<div class="d-flex justify-between m-20">';
+                        html += '<h3 part="history-comments-title" class="m-0"><br />Comments</h3>';
+                        html += '</div>';
+                        html += '<div class="m-20">';
+                        html += '<div class="d-flex flex-col">';
+                        for (var i = 0; i < comments.length; i++) {
+                            html += '<div part="commentbox" class="d-flex commentbox ' + (comments[i].author + "").toLowerCase() + 'box">';
+                            html += '<div class="mr-20 d-flex flex-col align-end"><span part="comment-username">' + (comments[i].username != null ? comments[i].username : '') + '</span><span part="td-head">' + comments[i].author + '</span></div>';
+                            const onlyCommentText = (comments[i].comment + "").replace(/ *\([^)]*\) */g, "").trim();
+                            try {
+                                const jsonComments = JSON.parse(onlyCommentText);
+                                if (Util.isInteger(jsonComments)) {
+                                    html += '<div class="">' + comments[i].comment + '<br /><small><span class="muted">' + comments[i].timestamp + '</span></small></div>';
+                                }
+                                else {
+                                    //console.log('json comments', jsonComments);
+                                    var htmlTable = '';
+                                    for (var j = 0; j < Object.keys(jsonComments).length; j++) {
+                                        htmlTable += '<div class="mb-20">';
+                                        htmlTable += ('<div part="detail-head">' + Object.keys(jsonComments)[j] + '</div>');
+                                        htmlTable += ('<sf-i-elastic-text text="' + jsonComments[Object.keys(jsonComments)[j]] + '" minLength="20"></sf-i-elastic-text>');
+                                        htmlTable += '</div>';
+                                    }
+                                    html += '<div class="">' + htmlTable + '<small><span class="muted">' + comments[i].timestamp + '</span></small></div>';
+                                }
+                            }
+                            catch (e) {
+                                //console.log('json comments exception', comments[i]);
+                                html += '<div class="">' + comments[i].comment + '<br /><small><span class="muted">' + comments[i].timestamp + '</span></small></div>';
+                            }
+                            html += '</div>';
+                        }
+                        if (comments.length === 0) {
+                            html += '<div><strong>No comments!</strong></div>';
+                        }
+                        html += '</div>';
+                        html += '</div>';
+                    }
+                    html += '</div>';
+                }
+                html += '</div>';
+                formContainer.insertAdjacentHTML('beforeend', html);
+                let sectionHistory = formContainer.querySelector('#history');
+                sectionHistory.addEventListener('click', () => {
+                    let sectionHistoryBody = formContainer.querySelector('#section-history-body');
+                    let sectionHistoryTitle = formContainer.querySelector('#section-history-title');
+                    let sectionHistoryIcon = formContainer.querySelector('#section-history-icon');
+                    if (sectionHistoryBody.style.display == 'block') {
+                        sectionHistory.setAttribute('part', 'section-head-collapsed');
+                        sectionHistoryBody.style.display = 'none';
+                        sectionHistoryTitle.setAttribute('part', 'section-title-collapsed');
+                        sectionHistoryIcon.innerHTML = 'keyboard_arrow_down';
+                    }
+                    else {
+                        sectionHistory.setAttribute('part', 'section-head-expanded');
+                        sectionHistoryBody.style.display = 'block';
+                        sectionHistoryTitle.setAttribute('part', 'section-title-expanded');
+                        sectionHistoryIcon.innerHTML = 'keyboard_arrow_up';
+                    }
+                });
+                let sectionHistoryDates = formContainer.querySelectorAll('.history-section-head');
+                for (let sectionHistoryDate of sectionHistoryDates) {
+                    sectionHistoryDate.addEventListener('click', () => {
+                        let id = sectionHistoryDate.id;
+                        let dateIndex = id.split('-')[2];
+                        let sectionHistoryDateBody = formContainer.querySelector('#section-history-body-' + dateIndex);
+                        let sectionHistoryDateTitle = formContainer.querySelector('#section-history-title-' + dateIndex);
+                        let sectionHistoryDateIcon = formContainer.querySelector('#section-history-icon-' + dateIndex);
+                        if (sectionHistoryDateBody.style.display == 'block') {
+                            sectionHistory.setAttribute('part', 'section-head-collapsed');
+                            sectionHistoryDateBody.style.display = 'none';
+                            sectionHistoryDateTitle.setAttribute('part', 'section-title-collapsed');
+                            sectionHistoryDateIcon.innerHTML = 'keyboard_arrow_down';
+                        }
+                        else {
+                            sectionHistory.setAttribute('part', 'section-head-expanded');
+                            sectionHistoryDateBody.style.display = 'block';
+                            sectionHistoryDateTitle.setAttribute('part', 'section-title-expanded');
+                            sectionHistoryDateIcon.innerHTML = 'keyboard_arrow_up';
+                        }
+                    });
+                }
+                let historyReportings = formContainer.querySelectorAll('.history-reporting');
+                for (let historyReporting of historyReportings) {
+                    let id = historyReporting.id;
+                    let date = id.split('-')[2] + '-' + id.split('-')[3] + '-' + id.split('-')[4];
+                    let index = id.split('-')[5];
+                    console.log('historyConfigJSON', this.getPrepopulateJson().history[date][index].schema);
+                    historyReporting.configjson = JSON.stringify(this.getPrepopulateJson().history[date][index].schema);
+                    // historyReporting.loadMode();
+                }
+            }
         };
         this.prepopulateValues = () => {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -722,7 +846,7 @@ let SfIReporting = class SfIReporting extends LitElement {
                     }
                 }
                 else {
-                    if (element.type == "section") {
+                    if (element.type == "section" && this.editdisable != "true") {
                         this.dataModel[i].collapse = "false";
                     }
                     else {
@@ -1309,10 +1433,15 @@ let SfIReporting = class SfIReporting extends LitElement {
             return elementHtml;
         };
         this.renderElement = (dataObj) => {
-            var _a, _b;
+            var _a, _b, _c;
             let elementHtml = "";
             console.log('rendering obj', dataObj.type);
+            let elementLabel = (_a = dataObj.label) !== null && _a !== void 0 ? _a : "";
+            if (this.editdisable == "true") {
+                elementLabel = elementLabel.replace(/ */g, '');
+            }
             if (dataObj.type == "section") {
+                console.log('renderingSection', dataObj);
                 elementHtml += `<div class="d-flex flex-col" part="section-container"><div id="${dataObj.id}" class="section-head d-flex align-center justify-between" part="${dataObj.collapse == "true" ? 'section-head-collapsed' : 'section-head-expanded'}"><h3 part="${dataObj.collapse == "true" ? 'section-title-collapsed' : 'section-title-expanded'}">${dataObj.name}</h3><div id="${dataObj.id}-success" part="section-success-icon"><div class="material-icons">${dataObj.collapse == "true" ? "keyboard_arrow_down" : "keyboard_arrow_up"}</div></div></div><div class="section-body d-flex ${this.formviewclass} ${dataObj.collapse == "true" ? 'hide' : ''}" part="section-body"> `;
             }
             else if (dataObj.type == "subsection") {
@@ -1320,33 +1449,33 @@ let SfIReporting = class SfIReporting extends LitElement {
             }
             else if (dataObj.type == "textarea") {
                 elementHtml += `<div part="textarea-container" class="d-flex flex-col flex-grow">
-                        <label id="${dataObj.id}-label" part="textarea-label">${dataObj.label}</label>
+                        <label id="${dataObj.id}-label" part="textarea-label">${elementLabel}</label>
                         <div part="td-body-2"><sf-i-elastic-text text="${dataObj.hint}" minLength="50"></sf-i-elastic-text></div>
-                        <textarea rows="${dataObj.size == "small" ? "4" : (dataObj.size == "smallest" ? "1" : "10")}" id="${dataObj.id}" type="text" class=" reporting-textarea" part="input-textarea" ${this.mode == "view" || this.flow == "details" ? "readonly" : ""}>${dataObj.value}</textarea>
+                        <${this.editdisable == "true" ? 'div' : 'textarea'} rows="${dataObj.size == "small" ? "4" : (dataObj.size == "smallest" ? "1" : "10")}" id="${dataObj.id}" type="text" class=" reporting-textarea" part="input-textarea" ${this.mode == "view" || this.flow == "details" ? "readonly" : ""}>${dataObj.value}</${this.editdisable == "true" ? 'div' : 'textarea'}>
                       </div>`;
             }
             else if (dataObj.type == "yesno+textarea") {
                 elementHtml += `<div part="textarea-container"  class="d-flex flex-col flex-grow">
-                        <label id="${dataObj.id}-label" part="textarea-label">${dataObj.label}</label>
+                        <label id="${dataObj.id}-label" part="textarea-label">${elementLabel}</label>
                         <div part="td-body-2"><sf-i-elastic-text text="${dataObj.hint}" minLength="50"></sf-i-elastic-text></div>
                         <div class="d-flex">`;
                 for (let option of dataObj.options) {
                     elementHtml += `<input type="radio" id="${dataObj.id}-${option.toLowerCase().replace(/ /g, '_')}" name="${dataObj.id}" class="reporting-radio" part="input-radio" value="${option}" ${this.mode == "view" || this.flow == "details" ? "disabled" : ""} ${dataObj.value[0] == option ? "checked" : ""}><label id="${dataObj.id}-${option.toLowerCase().replace(/ /g, '_')}-label" part="radio-label">${option}</label>`;
                 }
                 elementHtml += `</div>
-                        <textarea rows="${dataObj.size == "small" ? "4" : "10"}" id="${dataObj.id}-textarea" type="text" class="reporting-textarea" part="input-textarea" ${this.mode == "view" || this.flow == "details" ? "readonly" : ""}>${(_a = dataObj.value[1]) !== null && _a !== void 0 ? _a : ""}</textarea>
+                        <${this.editdisable == "true" ? 'div' : 'textarea'} rows="${dataObj.size == "small" ? "4" : "10"}" id="${dataObj.id}-textarea" type="text" class="reporting-textarea" part="input-textarea" ${this.mode == "view" || this.flow == "details" ? "readonly" : ""}>${(_b = dataObj.value[1]) !== null && _b !== void 0 ? _b : ""}</${this.editdisable == "true" ? 'div' : 'textarea'}>
                       </div>`;
             }
             else if (dataObj.type == "date") {
                 elementHtml += `<div part="date-container" class="d-flex flex-col flex-grow">
-                        <label id="${dataObj.id}-label" part="date-label">${dataObj.label}</label>
+                        <label id="${dataObj.id}-label" part="date-label">${elementLabel}</label>
                         <div part="td-body-2"><sf-i-elastic-text text="${dataObj.hint}" minLength="50"></sf-i-elastic-text></div>
                         <input class="reporting-date" id="${dataObj.id}" part="input-date" type="date" ${this.mode == "view" || this.flow == "details" ? "readonly" : ""} value="${dataObj.value}"/>
                       </div>`;
             }
             else if (dataObj.type == "sf-i-form") {
                 elementHtml += `<div part="date-container" class="d-flex flex-col flex-grow">
-                        <label id="${dataObj.id}-label" part="date-label">${dataObj.label}</label>
+                        <label id="${dataObj.id}-label" part="date-label">${elementLabel}</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="${(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>`;
@@ -1365,16 +1494,16 @@ let SfIReporting = class SfIReporting extends LitElement {
                     valToBeShown = dataObj.value.reference;
                 }
                 elementHtml += `<div part="date-container" class="d-flex flex-col flex-grow">
-                        <label id="${dataObj.id}-label" part="date-label">${dataObj.label}</label>
+                        <label id="${dataObj.id}-label" part="date-label">${elementLabel}</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 = Object.keys(dataObj.value)) !== null && _b !== void 0 ? _b : []).length > 0 ? (`
+                            ${((_c = Object.keys(dataObj.value)) !== null && _c !== void 0 ? _c : []).length > 0 ? (`
                               <div class="selected-option d-flex justtify-center align-center" part="selected-option" id="selected-option-${dataObj.id}">
-                                ${this.flow == "details" ? '' : '<span class="material-icons selected-option-icon mr-10">cancel</span>'}
+                                ${this.mode == "view" || this.flow == "details" ? '' : '<span class="material-icons selected-option-icon mr-10">cancel</span>'}
                                 <label class="selected-option-label" part="selected-option-label">${valToBeShown}</label>
                               </div>`) : (`
-                                ${(this.flow == "details") ? '' :
+                                ${(this.mode == "view" || 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>
@@ -1383,15 +1512,15 @@ let SfIReporting = class SfIReporting extends LitElement {
             }
             else if (dataObj.type == "sf-i-bricks") {
                 elementHtml += `<div part="date-container" class="d-flex flex-col flex-grow">
-                        <label id="${dataObj.id}-label" part="date-label">${dataObj.label}</label>
+                        <label id="${dataObj.id}-label" part="date-label">${elementLabel}</label>
                         <div part="td-body-2"><sf-i-elastic-text text="${dataObj.hint}" minLength="50"></sf-i-elastic-text></div>
                         <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}" 
-                        ${this.flow == 'details' ? 'flow="view"' : ''} 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>
+                        ${this.mode == "view" || this.flow == 'details' ? 'flow="view"' : ''} 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>
+                        <label id="${dataObj.id}-label" part="date-label">${elementLabel}</label>
                         <div part="td-body-2"><sf-i-elastic-text text="${dataObj.hint}" minLength="50"></sf-i-elastic-text></div>
                         <sf-i-uploader exportparts="detail-container:uploader-detail-container, errmsg:uploader-errmsg, successmsg:uploader-successmsg, sf-upload-message:uploader:sf-upload-message, sf-upload-submessage: uploader-sf-upload-submessage, doctype-verify-badge: uploader-doctype-verify-badge, details-controls-container: uploader-details-controls-container, button-icon: uploader-button-icon, pdf-controls-container: uploader-pdf-controls-container, pdf-pages: uploader-pdf-pages, pdf-page-num: uploader-pdf-page-num, pdf-page-count: uploader-pdf-page-count, pdf-canvas: uploader-pdf-canvas, image-container: uploader-image-container, image-component: uploader-image-component, pdf-thumbnail-container: uploader-pdf-thumbnail-container, pdf-canvas-thumbnail: uploader-pdf-canvas-thumbnail, sf-uploader-download-message: uploader-sf-uploader-download-message, input: uploader-input, upload-buttons-container: uploader-upload-buttons-container, doctype-badge: uploader-doctype-badge, upload-status: uploader-upload-status, ext-badge:uploader-ext-badge, extracted-meta: uploader-extracted-meta, extracted-text-chip: uploader-extracted-text-chip, extracted-text-chip-parsed: uploader-extracted-text-chip-parsed, extracted-text-chip-failed: uploader-extracted-text-chip-failed, matches-title: uploader-matches-title, matches:uploader-matches, extracted-title: uploader-extracted-title, extracted-text: uploader-extracted-text, disclaimer-message-container: uploader-disclaimer-message-container, message-container: uploader-message-container, button: uploader-button" 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>`;
@@ -1433,6 +1562,7 @@ let SfIReporting = class SfIReporting extends LitElement {
                 html += '<tr class="tablerow">';
                 let bgClass = i % 2 == 0 ? 'td-light' : 'td-dark';
                 html += `<td part="td-body" class="td-body"><span class="mrl-5 material-icons" part="span-submit-${item.published ? 'published' : 'unpublished'}" >${item.published ? 'radio_button_checked' : 'edit_note'}</span></td>`;
+                html += `<td part="td-action" class="td-action"><button part="button-icon" class="material-symbols-outlined button-reopen" id="button-reopen-${i}">reopen_window</button></td>`;
                 html += `<td part="td-action" class="td-action"><button part="button-icon" class="material-icons button-details" id="button-details-${i}">open_in_new</button></td>`;
                 for (let property of Object.keys(item)) {
                     if (this.getIgnoreProjections().indexOf(property) < 0) {
@@ -1449,6 +1579,37 @@ let SfIReporting = class SfIReporting extends LitElement {
             html += '</table>';
             this._SfReportingContainer.innerHTML = html;
             this._SfReportingContainer.style.display = 'block';
+            let reopenButtons = this._SfReportingContainer.querySelectorAll('.button-reopen');
+            for (let reopenButton of reopenButtons) {
+                reopenButton.addEventListener('click', async (ev) => {
+                    var _a;
+                    let target = ev.target;
+                    let index = target.id.split('-')[2];
+                    this.reopenedItem = this.list[index];
+                    let oldObj = this.reopenedItem;
+                    console.log('item selected', this.reopenedItem);
+                    await this.fetchSchema();
+                    this.published = (_a = this.list[index].published) !== null && _a !== void 0 ? _a : false;
+                    let copyVals = {};
+                    for (let obj of this.dataModel) {
+                        if (obj.copytoreopen) {
+                            console.log('copyVals copying', obj.id, obj.type, oldObj[obj.id]);
+                            if (obj.type == "sf-i-bricks" && obj.savenameseparate == "yes") {
+                                copyVals[obj.id + 'id'] = oldObj[obj.id + 'id'];
+                                copyVals[obj.id + 'name'] = oldObj[obj.id + 'name'];
+                            }
+                            else {
+                                copyVals[obj.id] = oldObj[obj.id];
+                            }
+                            console.log('copyVals copied', copyVals);
+                        }
+                    }
+                    console.log('copyVals', JSON.parse(JSON.stringify(copyVals)));
+                    this.prepopulateValJson = JSON.stringify(copyVals);
+                    this.flow = "edit";
+                    this.loadMode();
+                });
+            }
             let detailsButtons = this._SfReportingContainer.querySelectorAll('.button-details');
             for (let detailsButton of detailsButtons) {
                 detailsButton.addEventListener('click', (ev) => {
@@ -1460,39 +1621,6 @@ let SfIReporting = class SfIReporting extends LitElement {
                     this.loadMode();
                 });
             }
-            // let selectInputs = (this._SfReportingContainer as HTMLDivElement).querySelectorAll('.input-select') as NodeListOf<HTMLInputElement>
-            // for(let selectInput of selectInputs){
-            //   selectInput.addEventListener('change',(ev: any) => {
-            //     let target = ev.target
-            //     let index = target.id.split('-')[2]
-            //     if(target.checked){
-            //       if(this.selectedItemIds.indexOf(this.list[index].id) < 0){
-            //         this.selectedItemIds.push(this.list[index].id)
-            //       }
-            //     }else{
-            //       if(this.selectedItemIds.indexOf(this.list[index].id) >= 0){
-            //         this.selectedItemIds.splice(this.selectedItemIds.indexOf(this.list[index].id), 1)
-            //       }
-            //     }
-            //     if(this.selectedItemIds.length > 0){
-            //       ((this._SfReportingContainer as HTMLDivElement).querySelector('#button-publish') as HTMLButtonElement).style.display = 'flex'
-            //     }else{
-            //       ((this._SfReportingContainer as HTMLDivElement).querySelector('#button-publish') as HTMLButtonElement).style.display = 'none'
-            //     }
-            //   })
-            // }
-            // let inputSelectAll = (this._SfReportingContainer as HTMLDivElement).querySelector('#input-select-all') as HTMLInputElement
-            // inputSelectAll.addEventListener('click',(ev: any)=>{
-            //   let target = ev.target;
-            //   let selectInputs = (this._SfReportingContainer as HTMLDivElement).querySelectorAll('.input-select') as NodeListOf<HTMLInputElement>
-            //   for(let selectInput of selectInputs){
-            //     selectInput.checked = target.checked
-            //     var event = document.createEvent("HTMLEvents");
-            //     event.initEvent('change', false, true);
-            //     selectInput.dispatchEvent(event);
-            //   }
-            // })
-            // inputSelectAll.style.display = this.list.length > 0 ? 'flex' : 'none';
             let buttonNew = this._SfReportingContainer.querySelector('#button-new');
             buttonNew.addEventListener('click', () => {
                 this.newClick();
@@ -1628,8 +1756,10 @@ let SfIReporting = class SfIReporting extends LitElement {
             if (xhr.status == 200) {
                 const jsonRespose = JSON.parse(xhr.responseText);
                 this.configjson = JSON.stringify(jsonRespose.schema);
+                // if(this.flow == "new"){
                 this.populateDataModel();
                 this.populateView();
+                // }
             }
             else {
                 const jsonRespose = JSON.parse(xhr.responseText);
@@ -1686,7 +1816,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);
+            // console.log('adding', body, url);
             const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
             const xhr = (await this.prepareXhr(body, url, this._SfLoader, authorization));
             this._SfLoader.innerHTML = '';
@@ -1707,6 +1837,11 @@ let SfIReporting = class SfIReporting extends LitElement {
         this.submitEdit = async () => {
             let url = "https://" + this.apiId + "/update";
             let body = { projectid: this.projectid, noticeid: this.selectedItem.id, object: this.selectedValues(), schema: this.getConfigJson(), published: this.published };
+            if (Object.keys(this.reopenedItem).length > 0) {
+                url = "https://" + this.apiId + "/reopen";
+                body = { projectid: this.projectid, object: this.selectedValues(), schema: this.getConfigJson(), noticeid: this.reopenedItem.id, published: this.published };
+            }
+            console.log('updating', body, url);
             const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
             const xhr = (await this.prepareXhr(body, url, this._SfLoader, authorization));
             this._SfLoader.innerHTML = '';
@@ -1787,9 +1922,10 @@ let SfIReporting = class SfIReporting extends LitElement {
                 this.decryptFileName = this._SfDecryptFileInput.value;
                 this.evalDecrypt();
             });
-            this._SfDecryptButton.addEventListener('click', () => {
+            let decryptButton = this._SfDecryptContainer.querySelector("#button-decrypt");
+            decryptButton === null || decryptButton === void 0 ? void 0 : decryptButton.addEventListener('click', () => {
                 console.log('decrypt clicked', this.decryptProjectId, this.decryptFileName);
-                // this.submitDecrypt()
+                this.submitDecrypt();
             });
         };
         this.evalDecrypt = () => {
@@ -1881,7 +2017,7 @@ let SfIReporting = class SfIReporting extends LitElement {
                   <label>Decrypt Utility</label>
                   <div class="d-flex align-end">
                     <input part="input" id="input-decrypt" type="text" placeholder="file key" />.json&nbsp;&nbsp;
-                    <button id="button-decrypt" part="button-icon-small" class="material-icons button-icon">download</button>
+                    <button id="button-decrypt">download</button>
                   </div>
                   <div class="loader-element"></div>
                 </div>
@@ -2362,6 +2498,9 @@ SfIReporting.styles = css `
 __decorate([
     property()
 ], SfIReporting.prototype, "apiId", void 0);
+__decorate([
+    property()
+], SfIReporting.prototype, "apiIdUploader", void 0);
 __decorate([
     property()
 ], SfIReporting.prototype, "projectid", void 0);