sf-i-reporting 1.0.69 → 1.0.71

package/src/dataObjects.ts

@@ -21,7 +21,9 @@ export interface DataObject {
     maxsize: string,
     allowdownload: string,
     selectfields: string[]
-    mandatory: any
+    mandatory: any,
+    copytoreopen: boolean,
+    displayinhistory: boolean
 }
 
 export function createDataObject(element: any, iter?: number): DataObject {
@@ -49,7 +51,9 @@ export function createDataObject(element: any, iter?: number): DataObject {
             maxsize: element.maxsize ?? "",
             allowdownload: element.allowdownload ?? "",
             selectfields: element.selectfields ?? [],
-            mandatory: element.mandatory
+            mandatory: element.mandatory,
+            copytoreopen: (element.copytoreopen ?? "") == "yes",
+            displayinhistory: (element.displayinhistory ?? "") == "yes"
         }
     }else{
         return{
@@ -75,7 +79,9 @@ export function createDataObject(element: any, iter?: number): DataObject {
             maxsize: element.maxsize ?? "",
             allowdownload: element.allowdownload ?? "",
             selectfields: element.selectfields ?? [],
-            mandatory: element.mandatory
+            mandatory: element.mandatory,
+            copytoreopen: (element.copytoreopen ?? "") == "yes",
+            displayinhistory: (element.displayinhistory ?? "") == "yes"
         }
     }
 }

package/src/sf-i-reporting.ts

@@ -39,6 +39,9 @@ export class SfIReporting extends LitElement {
   @property()
   apiId: string = "";
 
+  @property()
+  apiIdUploader: string = "";
+
   @property()
   projectid: string = "";
 
@@ -108,6 +111,8 @@ export class SfIReporting extends LitElement {
 
   selectedItemIds: any = [];
 
+  reopenedItem: any = {};
+
   static override styles = css`
 
     
@@ -819,6 +824,9 @@ export class SfIReporting extends LitElement {
         }else{
           if(element.type == "section"){
             let dataObj: DataObject = createDataObject({id: 'section-' + sectionCount, name: element.name, type: element.type})
+            if(this.editdisable == "true"){
+              dataObj.collapse = "true"
+            }
             this.dataModel.push(dataObj)
             sectionCount ++;
           }else{
@@ -838,7 +846,7 @@ export 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>` : ''}
@@ -869,7 +877,7 @@ export 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
@@ -924,9 +932,7 @@ export 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 as HTMLDivElement).innerHTML = html;
     (this._SfReportingContainer as HTMLDivElement).style.display = 'block';
     this.initSectionListeners();
@@ -950,7 +956,7 @@ export class SfIReporting extends LitElement {
     for(let element of this.dataModel){
       if(element.type == "sf-i-form"){
         let form: SfIForm = (this._SfReportingContainer as HTMLDivElement).querySelector('#'+element.id) as SfIForm;
-        if(this.flow == "details"){
+        if(this.mode == "view" || this.flow == "details"){
           form.flow = "read"
         }
         if(element.value != ''){
@@ -979,7 +985,7 @@ export 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{
           bricks.flow = "edit"
@@ -987,7 +993,7 @@ export class SfIReporting extends LitElement {
       }else if(element.type == "sf-i-uploader"){
         let uploader: SfIUploader = (this._SfReportingContainer as HTMLDivElement).querySelector('#'+element.id) as SfIUploader
         uploader.prepopulatedInputArr = JSON.stringify(element.value ?? []);
-        uploader.readOnly = (this.flow == "details")
+        uploader.readOnly = (this.mode == "view" || this.flow == "details")
         uploader.loadMode()
       }else if(element.type == "sf-i-form-select"){
         let buttonEditForm = (this._SfReportingContainer as HTMLDivElement).querySelector('#button-edit-form-'+element.id) as HTMLButtonElement
@@ -1064,7 +1070,7 @@ export class SfIReporting extends LitElement {
         })
       }
     }
-    if(this.flow != 'details'){
+    if(this.mode != "view" && this.flow != 'details'){
       let selectedOptions = (this._SfReportingContainer as HTMLDivElement).querySelectorAll('.selected-option') as NodeListOf<HTMLDivElement>
       for(let selectedOption of selectedOptions){
         selectedOption?.addEventListener('click',async (ev: any) => {
@@ -1086,15 +1092,15 @@ export class SfIReporting extends LitElement {
     }
     let checkboxPublish = (this._SfReportingContainer as HTMLDivElement).querySelector('#input-publish-checkbox') as HTMLInputElement
     checkboxPublish?.addEventListener('click',(ev:any) => {
-      let target = ev.target as HTMLInputElement
-      this.published = target.checked
-      let publishedContainer = (this._SfReportingContainer as HTMLDivElement).querySelector('#published-container') as HTMLDivElement
-      publishedContainer.setAttribute('part', this.published ? "published-container-published" : "published-container-unpublished")
-      let formContainer = this._SfReportingContainer.querySelector('.form-container') as HTMLDivElement
-      formContainer.setAttribute('part',this.published ? "form-container-published" : "form-container")
-      console.log('publish checked', this.published);
-    }
-  ) 
+        let target = ev.target as HTMLInputElement
+        this.published = target.checked
+        let publishedContainer = (this._SfReportingContainer as HTMLDivElement).querySelector('#published-container') as HTMLDivElement
+        publishedContainer.setAttribute('part', this.published ? "published-container-published" : "published-container-unpublished")
+        let formContainer = this._SfReportingContainer.querySelector('.form-container') as HTMLDivElement
+        formContainer.setAttribute('part',this.published ? "form-container-published" : "form-container")
+        console.log('publish checked', this.published);
+      }
+    ) 
     let checkboxPublishLabel = (this._SfReportingContainer as HTMLDivElement).querySelector('#input-publish-checkbox-label') as HTMLLabelElement
     checkboxPublishLabel?.addEventListener('click',() => {
       checkboxPublish.click()
@@ -1135,8 +1141,135 @@ export class SfIReporting extends LitElement {
       this.evalShowProgress();
       (this._SfReportingContainer.querySelector('.form-container') as HTMLDivElement).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()
+    }
+  }
+
+  populateHistory = () => {
+    let formContainer = (this._SfReportingContainer.querySelector('.form-container') as HTMLElement)
+    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 = historyItem.object.comments ?? []
+          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: any) {
+                  //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') as HTMLDivElement
+      sectionHistory.addEventListener('click',() => {
+        let sectionHistoryBody = formContainer.querySelector('#section-history-body') as HTMLDivElement
+        let sectionHistoryTitle = formContainer.querySelector('#section-history-title') as HTMLHeadingElement
+        let sectionHistoryIcon = formContainer.querySelector('#section-history-icon') as HTMLHeadingElement
+        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') as NodeListOf<HTMLDivElement>
+      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) as HTMLDivElement
+          let sectionHistoryDateTitle = formContainer.querySelector('#section-history-title-' + dateIndex) as HTMLHeadingElement
+          let sectionHistoryDateIcon = formContainer.querySelector('#section-history-icon-' + dateIndex) as HTMLHeadingElement
+          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') as NodeListOf<SfIReporting>
+      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();
+      }
+    }
   }
 
   prepopulateValues = () => {
@@ -1156,7 +1289,7 @@ export class SfIReporting extends LitElement {
           }
         }
       }else{
-        if(element.type == "section"){
+        if(element.type == "section" && this.editdisable != "true"){
           this.dataModel[i].collapse = "false"
         }else{
           if(this.dataModel[i].type == "textarea"){
@@ -1731,36 +1864,41 @@ export class SfIReporting extends LitElement {
   renderElement = (dataObj: DataObject) => {
     let elementHtml = ""
     console.log('rendering obj',dataObj.type)
+    let elementLabel = dataObj.label ?? ""
+    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"){
       elementHtml += `<div class="d-flex align-center" part="subsection-container"><h4 part="subsection">${dataObj.name}</h4></div>`
     }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" : ""}>${dataObj.value[1] ?? ""}</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" : ""}>${dataObj.value[1] ?? ""}</${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>`
@@ -1776,16 +1914,16 @@ export 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">
                             ${(Object.keys(dataObj.value) ?? []).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>`
                                 }
                                 `)
@@ -1795,14 +1933,14 @@ export class SfIReporting extends LitElement {
                       </div>`
     }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>`
@@ -1847,6 +1985,7 @@ export 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){
@@ -1865,6 +2004,35 @@ export class SfIReporting extends LitElement {
     (this._SfReportingContainer as HTMLDivElement).innerHTML = html;
     (this._SfReportingContainer as HTMLDivElement).style.display = 'block';
 
+    let reopenButtons = (this._SfReportingContainer as HTMLDivElement).querySelectorAll('.button-reopen') as NodeListOf<HTMLButtonElement>
+    for(let reopenButton of reopenButtons){
+      reopenButton.addEventListener('click', async (ev: any) => {
+        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 = this.list[index].published ?? false
+        let copyVals: any = {}
+        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 as HTMLDivElement).querySelectorAll('.button-details') as NodeListOf<HTMLButtonElement>
     for(let detailsButton of detailsButtons){
       detailsButton.addEventListener('click',(ev: any) => {
@@ -1876,40 +2044,6 @@ export 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 as HTMLDivElement).querySelector('#button-new') as HTMLButtonElement)
     buttonNew.addEventListener('click',()=>{
@@ -2059,8 +2193,10 @@ export class SfIReporting extends LitElement {
     if(xhr.status == 200) {
       const jsonRespose = JSON.parse(xhr.responseText);
       this.configjson = JSON.stringify(jsonRespose.schema);
-      this.populateDataModel();
-      this.populateView();
+      // if(this.flow == "new"){
+        this.populateDataModel();
+        this.populateView();
+      // }
     } else {
       const jsonRespose = JSON.parse(xhr.responseText);
       this.setError(jsonRespose.error);
@@ -2114,8 +2250,10 @@ export class SfIReporting extends LitElement {
   submitNew = async () => {
     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);
+    
+    let body:any = {projectid: this.projectid, object: this.selectedValues(), schema: this.getConfigJson(), published: this.published}
+    
+    // console.log('adding', body, url);
     const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
     const xhr : any = (await this.prepareXhr(body, url, this._SfLoader, authorization)) as any;
     this._SfLoader.innerHTML = '';
@@ -2136,6 +2274,11 @@ export class SfIReporting extends LitElement {
   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 : any = (await this.prepareXhr(body, url, this._SfLoader, authorization)) as any;
     this._SfLoader.innerHTML = '';
@@ -2217,9 +2360,10 @@ export class SfIReporting extends LitElement {
       this.decryptFileName = (this._SfDecryptFileInput as HTMLInputElement).value;
       this.evalDecrypt()
     });
-    (this._SfDecryptButton as HTMLButtonElement).addEventListener('click', () => {
+    let decryptButton = this._SfDecryptContainer.querySelector("#button-decrypt") as HTMLButtonElement
+    decryptButton?.addEventListener('click', () => {
       console.log('decrypt clicked', this.decryptProjectId, this.decryptFileName);
-      // this.submitDecrypt()
+      this.submitDecrypt()
     })
   }
 
@@ -2325,7 +2469,7 @@ export 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>

package/src/util.ts

@@ -167,8 +167,12 @@ const timeSince = (date: number) => {
     }
 }
 
+function isInteger(value: string) {
+    return /^-?\d+$/.test(value);
+}
+
 const exportFunctions = {
-   callApi, callApiPresignedDelete, callApiPresignedGet, validateName, readCookie, delay, timeSince
+   callApi, callApiPresignedDelete, callApiPresignedGet, validateName, readCookie, delay, timeSince, isInteger
 };
 
 export default exportFunctions;

package/util.d.ts

@@ -2,6 +2,7 @@ declare function readCookie(key: string): string;
 declare function callApi(url: string, data: string, authorization: any): Promise<unknown>;
 declare function callApiPresignedDelete(url: string): Promise<unknown>;
 declare function callApiPresignedGet(url: string): Promise<unknown>;
+declare function isInteger(value: string): boolean;
 declare const exportFunctions: {
     callApi: typeof callApi;
     callApiPresignedDelete: typeof callApiPresignedDelete;
@@ -10,6 +11,7 @@ declare const exportFunctions: {
     readCookie: typeof readCookie;
     delay: (delayInms: number) => Promise<unknown>;
     timeSince: (date: number) => string;
+    isInteger: typeof isInteger;
 };
 export default exportFunctions;
 //# sourceMappingURL=util.d.ts.map

package/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["src/util.ts"],"names":[],"mappings":"AAQA,iBAAS,UAAU,CAAC,GAAG,EAAE,MAAM,UAc9B;AAED,iBAAe,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,oBAyBnE;AAED,iBAAe,sBAAsB,CAAC,GAAG,EAAE,MAAM,oBAsBhD;AAED,iBAAe,mBAAmB,CAAC,GAAG,EAAE,MAAM,oBAsB7C;AAwED,QAAA,MAAM,eAAe;;;;yBAxKO,MAAM;;uBAiGR,MAAM;sBAIP,MAAM;CAqE9B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["src/util.ts"],"names":[],"mappings":"AAQA,iBAAS,UAAU,CAAC,GAAG,EAAE,MAAM,UAc9B;AAED,iBAAe,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,oBAyBnE;AAED,iBAAe,sBAAsB,CAAC,GAAG,EAAE,MAAM,oBAsBhD;AAED,iBAAe,mBAAmB,CAAC,GAAG,EAAE,MAAM,oBAsB7C;AAwED,iBAAS,SAAS,CAAC,KAAK,EAAE,MAAM,WAE/B;AAED,QAAA,MAAM,eAAe;;;;yBA5KO,MAAM;;uBAiGR,MAAM;sBAIP,MAAM;;CAyE9B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/util.js

@@ -133,8 +133,11 @@ const timeSince = (date) => {
         return Math.floor(Math.abs(seconds)) + " seconds";
     }
 };
+function isInteger(value) {
+    return /^-?\d+$/.test(value);
+}
 const exportFunctions = {
-    callApi, callApiPresignedDelete, callApiPresignedGet, validateName, readCookie, delay, timeSince
+    callApi, callApiPresignedDelete, callApiPresignedGet, validateName, readCookie, delay, timeSince, isInteger
 };
 export default exportFunctions;
 //# sourceMappingURL=util.js.map