PMCORE-1583: Case Notes widget must support attach files in web application

fix CR notes

fix CR notes 2

after user press addNote button all upload fields will be cleaned

improve widget add files validations

text area with was updated

workflow/engine/content/translations/english/processmaker.en.po

@@ -1993,6 +1993,12 @@ msgstr "Add Data to PM table"
 msgid "Add field"
 msgstr "Add field"
 
+# TRANSLATION
+# LABEL/ID_ADD_FILE
+#: LABEL/ID_ADD_FILE
+msgid "Add file"
+msgstr "Add file"
+
 # TRANSLATION
 # LABEL/ID_ADD_HORIZONTAL_LINE
 #: LABEL/ID_ADD_HORIZONTAL_LINE
@@ -2575,6 +2581,12 @@ msgstr "Attach"
 msgid "Attached"
 msgstr "Attached"
 
+# TRANSLATION
+# LABEL/ID_ATTACH_FILE
+#: LABEL/ID_ATTACH_FILE
+msgid "Attach file"
+msgstr "Attach file"
+
 # TRANSLATION
 # LABEL/ID_ATTACHED_FILES
 #: LABEL/ID_ATTACHED_FILES

workflow/engine/data/mysql/insert.sql

@@ -57133,6 +57133,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_ADD_CUSTOM_COLUMN','en','Add Custom Column','2014-01-15') ,
 ( 'LABEL','ID_ADD_DATA_PMTABLE','en','Add Data to PM table','2014-10-10') ,
 ( 'LABEL','ID_ADD_FIELD','en','Add field','2014-01-15') ,
+( 'LABEL','ID_ADD_FILE','en','Add file','2020-06-11') ,
 ( 'LABEL','ID_ADD_HORIZONTAL_LINE','en','Add horizontal line','2015-02-20') ,
 ( 'LABEL','ID_ADD_LICENSE','en','Please add a new license','2014-01-15') ,
 ( 'LABEL','ID_ADD_MESSAGE','en','Add message','2014-01-15') ,
@@ -57232,6 +57233,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_ASSIGN_VARIABLES_OUT','en','Assign Variables Out','2014-01-15') ,
 ( 'LABEL','ID_ATTACH','en','Attach','2014-01-15') ,
 ( 'LABEL','ID_ATTACHED_DB','en','Attached','2014-10-08') ,
+( 'LABEL','ID_ATTACH_FILE','en','Attach file','2020-06-11') ,
 ( 'LABEL','ID_ATTACHED_FILES','en','Attached files','2020-06-10') ,
 ( 'LABEL','ID_ATTRIBUTES','en','Attributes','2014-01-15') ,
 ( 'LABEL','ID_ATTRIBUTE_HAS_INVALID_ELEMENT_KEY','en','The attribute {0}, has an invalid element (incorrect keys).','2014-05-20') ,

workflow/engine/templates/app/main.js

@@ -4,8 +4,9 @@ var storeNotes;
 var appUid;
 var title;
 var summaryWindowOpened = false;
-
 var toolTipChkSendMail;
+var caseNotesForm;
+var uploadItemsSize = 5;
 
 function closeCaseNotesWindow(){
   if(Ext.get("caseNotesWindowPanel")){
@@ -173,12 +174,101 @@ function openCaseNotesWindow(appUid1, delIndex, modalSw, appTitle, proUid, taskU
       }
     ]
   });
+  /**
+   * Factory to create upload files field dinamically
+   * @return {Object}
+   */
+  function uploadFileFactory () {
+      return  {
+          xtype: 'fileuploadfield',
+          emptyText: '',
+          fieldLabel: _('ID_ATTACH_FILE'),
+          buttonText: _('ID_SELECT_FILE'),
+          name: 'filesToUpload[]',
+          allowBlank: true,
+          width : '70%',
+          validator: function (filePath) {
+              var flag = false;
+              if (caseNotesWindow.isVisible() === false || filePath === "") {
+                  return true;
+              }
+              filePath = filePath.replace(/^\s|\s$/g, ""); //trims string
+              if (filePath.match(/([^\/\\]+)\.(pdf|gif|jpg|png|doc|docx|xls|xlsx|txt|mp4|mpv|mpeg|mpg|mov)$/i)) {
+                flag = true;
+              } else {
+                  messageError = _('ID_ERROR_UPLOADING_IMAGE_TYPE');
+                  PMExt.notify(_('ID_ERROR'), messageError);
+                  flag = false;
+                  this.setRawValue(null);
+              }
+            return flag;
+          }
+      };
+  };
 
+  // Cases notes form to insert coments and attach files
+  caseNotesForm = new Ext.FormPanel({
+      width: 462,
+      anchor: '100%',
+      baseCls: 'x-plain',
+      fileUpload: true,
+      items:
+          [
+              {
+                  text : _('ID_NEW_NOTE'),  
+                  xtype : 'textarea',
+                  id : 'caseNoteText',
+                  name : 'caseNoteText',
+                  width : '98%',
+                  height : 100,
+                  hideLabel: true,
+                  maxLengthText : 1500,
+                  allowBlank :false,
+                  selectOnFocus :true,
+                  enableKeyEvents: true,
+                  listeners : {
+                    scope : this,
+                    keyup : updateTextCtr,
+                    keydown: updateTextCtr,
+                    'change': function(field, newVal, oldVal) {
+                        var textAreaValue = newVal.replace(/^\s+/,'').replace(/\s+$/,'');
+                        field.setValue(textAreaValue.trim());
+                        Ext.getCmp('caseNoteText').focus(false, 200);
+                    }
+                  }
+              }
+          ],
+      buttons:
+          [
+              {
+                  text: _('ID_ADD_FILE'),
+                  id: 'btnAddFile',
+                  type: 'button',
+                  handler: function () {
+                      var uploadFields = caseNotesForm.findByType('fileuploadfield');
+                      if (uploadFields.length >= 1 && uploadFields.length  < uploadItemsSize) {
+                          if (uploadFields[uploadFields.length - 1].getValue() !== "") {
+                              caseNotesForm.add(uploadFileFactory());
+                              caseNotesForm.doLayout();
+                              caseNotesWindow.doLayout(); 
+                          } else {
+                              messageError = _('ID_PLEASE_SELECT_FILES_TO_UPLOAD');
+                              PMExt.notify(_('ID_ERROR'), messageError);
+                          }
+                      }
+                      if (uploadFields.length === uploadItemsSize - 1) {
+                          this.setDisabled(true);
+                      }
+                     
+                  }
+              }
+          ]
+  });
   caseNotesWindow = new Ext.Window({
     title: _('ID_CASES_NOTES'), //Title of the Window
     id: 'caseNotesWindowPanel', //ID of the Window Panel
     width: 480, //Width of the Window
-    resizable: true, //Resize of the Window, if false - it cannot be resized
+    resizable: false, //Resize of the Window, if false - it cannot be resized
     closable: true, //Hide close button of the Window
     modal: modalSw, //When modal:true it make the window modal and mask everything behind it when displayed
     //iconCls: 'ICON_CASES_NOTES',
@@ -205,33 +295,7 @@ function openCaseNotesWindow(appUid1, delIndex, modalSw, appTitle, proUid, taskU
       }
     }
     ],
-    tbar:[
+    tbar:[caseNotesForm],
-        new Ext.form.TextArea({
-          text : _('ID_NEW_NOTE'),
-          xtype : 'textarea',
-          id : 'caseNoteText',
-          name : 'caseNoteText',
-          width : 440,
-          grow : true,
-          height : 100,
-          growMin: 100,
-          growMax: 80,
-          maxLengthText : 1500,
-          allowBlank :false,
-          selectOnFocus :true,
-          enableKeyEvents: true,
-          listeners : {
-            scope : this,
-            keyup : updateTextCtr,
-            keydown: updateTextCtr,
-            'change': function(field, newVal, oldVal){
-                var textAreaValue = newVal.replace(/^\s+/,'').replace(/\s+$/,'');
-                field.setValue(textAreaValue.trim());
-                Ext.getCmp('caseNoteText').focus(false, 200);
-            }
-          }
-        })
-      ],
     rowtbar: [
       [
         {
@@ -283,6 +347,9 @@ function openCaseNotesWindow(appUid1, delIndex, modalSw, appTitle, proUid, taskU
         this.loadMask = new Ext.LoadMask(this.body, {
           msg:_('ID_LOADING')
         });
+        caseNotesForm.add(uploadFileFactory());
+        caseNotesForm.doLayout();
+        caseNotesWindow.doLayout();
       },
       close:function(){
         if (typeof(parent.setFlag) != 'undefined') {
@@ -322,6 +389,7 @@ function updateTextCtr(body, event) {
 
 function newNoteHandler()
 {
+  var i;
   newNoteAreaActive = newNoteAreaActive ? false : true;
   if (newNoteAreaActive) {
     Ext.getCmp('addCancelBtn').setText('');
@@ -351,6 +419,14 @@ function newNoteHandler()
     document.getElementById('countChar').style.display = 'block';
     Ext.getCmp('caseNoteText').focus();
     Ext.getCmp('caseNoteText').reset();
+    uploadFields = caseNotesForm.findByType('fileuploadfield');
+    // clean the first upload field
+    uploadFields[0].setRawValue(null);
+    for (i = 1; i < uploadFields.length; i += 1) {
+      caseNotesForm.remove(uploadFields[i]);
+    }
+    caseNotesForm.doLayout();
+    Ext.getCmp('btnAddFile').setDisabled(false);
     document.getElementById('countChar').innerHTML = '1500';
     caseNotesWindow.doLayout();
   }
@@ -358,81 +434,76 @@ function newNoteHandler()
   caseNotesWindow.doLayout();
 }
 
-function sendNote()
+function sendNote(){
-{
   var noteText = Ext.getCmp('caseNoteText').getValue();
-
   if (noteText == "") {
     return false;
   }
-
   newNoteHandler();
-
   Ext.getCmp('caseNoteText').focus();
   Ext.getCmp('caseNoteText').reset();
   Ext.getCmp('caseNoteText').setDisabled(true);
   Ext.getCmp('sendBtn').setDisabled(true);
   Ext.getCmp('addCancelBtn').setDisabled(true);
   statusBarMessage( _('ID_CASES_NOTE_POSTING'), true);
-  Ext.Ajax.request({
+
-    url : '../appProxy/postNote' ,
+  caseNotesForm.getForm().submit({
-    params : {
+      clientValidation: true,
-      appUid: appUid,
+      url: '../appProxy/postNote',
-      noteText: noteText,
+      params: {
-      swSendMail: (Ext.getCmp("chkSendMail").checked == true)? 1 : 0
+        appUid: appUid,
-    },
+        noteText: noteText,
-    success: function ( result, request ) {
+        swSendMail: (Ext.getCmp("chkSendMail").checked === true) ? 1 : 0
-      var data = Ext.util.JSON.decode(result.responseText);
+      },
-      if(data.success=="success"){
+      success: function ( result, request ) {
-        Ext.getCmp('caseNoteText').setDisabled(false);
+        var data = Ext.util.JSON.decode(request.response.responseText);
-        Ext.getCmp('sendBtn').setDisabled(false);
+        if(data.success=="success"){
-        Ext.getCmp('addCancelBtn').setDisabled(false);
+          Ext.getCmp('caseNoteText').setDisabled(false);
-        if (data.message != '') {
+          Ext.getCmp('sendBtn').setDisabled(false);
-            Ext.Msg.show({
+          Ext.getCmp('addCancelBtn').setDisabled(false);
+          if (data.message != '') {
+              Ext.Msg.show({
+                  title : _('ID_CASES_NOTE_POST_ERROR'),
+                  msg : data.message,
+                  icon : Ext.MessageBox.WARNING,
+                  buttons : Ext.Msg.OK,
+                  fn : function(btn) {
+                      statusBarMessage( _('ID_CASES_NOTE_POST_SUCCESS'), false,true);
+                      storeNotes.load();
+                  }
+              });
+          } else {
+              statusBarMessage( _('ID_CASES_NOTE_POST_SUCCESS'), false,true);
+              storeNotes.load();
+          }
+        } else if (data.lostSession) {
+          Ext.Msg.show({
                 title : _('ID_CASES_NOTE_POST_ERROR'),
                 msg : data.message,
-                icon : Ext.MessageBox.WARNING,
+                icon : Ext.MessageBox.ERROR,
                 buttons : Ext.Msg.OK,
                 fn : function(btn) {
-                    statusBarMessage( _('ID_CASES_NOTE_POST_SUCCESS'), false,true);
+                    try {
-                    storeNotes.load();
+                        prnt = parent.parent;
+                        top.location = top.location;
+                    } catch (err) {
+                        parent.location = parent.location;
+                    }
                 }
-            });
+           });
         } else {
-            statusBarMessage( _('ID_CASES_NOTE_POST_SUCCESS'), false,true);
+          Ext.getCmp('caseNoteText').setDisabled(false);
-            storeNotes.load();
+          Ext.getCmp('sendBtn').setDisabled(false);
-        }
+          Ext.getCmp('addCancelBtn').setDisabled(false);
-      } else if (data.lostSession) {
+          statusBarMessage( _('ID_CASES_NOTE_POST_ERROR'), false,false);
-        Ext.Msg.show({
+          Ext.MessageBox.alert(_('ID_CASES_NOTE_POST_ERROR'), data.message);
-              title : _('ID_CASES_NOTE_POST_ERROR'),
-              msg : data.message,
-              icon : Ext.MessageBox.ERROR,
-              buttons : Ext.Msg.OK,
-              fn : function(btn) {
-                try
-                     {
-                       prnt = parent.parent;
-                       top.location = top.location;
-                     }
-                   catch (err)
-                      {
-                       parent.location = parent.location;
-                      }
-              }
-         });
-      } else {
-        Ext.getCmp('caseNoteText').setDisabled(false);
-        Ext.getCmp('sendBtn').setDisabled(false);
-        Ext.getCmp('addCancelBtn').setDisabled(false);
-        statusBarMessage( _('ID_CASES_NOTE_POST_ERROR'), false,false);
-        Ext.MessageBox.alert(_('ID_CASES_NOTE_POST_ERROR'), data.message);
   
+        }
+      },
+      failure: function ( result, request) {
+        statusBarMessage( _('ID_CASES_NOTE_POST_FAILED'), false,false);
+        Ext.MessageBox.alert(_('ID_CASES_NOTE_POST_FAILED'), result.responseText);
       }
-    },
-    failure: function ( result, request) {
-      statusBarMessage( _('ID_CASES_NOTE_POST_FAILED'), false,false);
-      Ext.MessageBox.alert(_('ID_CASES_NOTE_POST_FAILED'), result.responseText);
-    }
   });
 }