BUG 0000 Case Notes improvements

workflow/engine/skinEngine/base/css/pmos-xtheme-gray.css

@@ -916,6 +916,128 @@ antes funcionaba.
     clear:none;
 }
 
+/*!
+ * Ext JS Library 3.3.3
+ * Copyright(c) 2006-2011 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+/* StatusBar - structure */
+.x-statusbar .x-status-text {
+    cursor: default;
+/*
+    height: 21px;
+    line-height: 21px;
+    padding: 0 4px;
+*/
+}
+.x-statusbar .x-status-busy {
+    padding-left: 25px !important;
+    background: transparent no-repeat 3px 2px;
+}
+
+.x-toolbar div.xtb-text
+
+.x-statusbar .x-status-text-panel {
+    border-top: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-left: 1px solid;
+    padding: 2px 8px 2px 5px;
+}
+
+/* StatusBar word processor example styles */
+
+#word-status .x-status-text-panel .spacer {
+    width: 60px;
+    font-size:0;
+    line-height:0;
+}
+#word-status .x-status-busy {
+    padding-left: 25px !important;
+    background: transparent no-repeat 3px 2px;
+}
+#word-status .x-status-saved {
+    padding-left: 25px !important;
+    background: transparent no-repeat 3px 2px;
+}
+
+/* StatusBar form validation example styles */
+
+.x-statusbar .x-status-error {
+    cursor: pointer;
+    padding-left: 25px !important;
+    background: transparent no-repeat 3px 2px;
+}
+.x-statusbar .x-status-valid {
+    padding-left: 25px !important;
+    background: transparent no-repeat 3px 2px;
+}
+.x-status-error-list {
+    font: 11px tahoma,arial,verdana,sans-serif;
+    position: absolute;
+    z-index: 9999;
+    border-top: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-left: 1px solid;
+    padding: 5px 10px;
+}
+.x-status-error-list li {
+    cursor: pointer;
+    list-style: disc;
+    margin-left: 10px;
+}
+.x-status-error-list li a {
+    text-decoration: none;
+}
+.x-status-error-list li a:hover {
+    text-decoration: underline;
+}
+
+
+/* *********************************************************** */
+/* *********************************************************** */
+/* *********************************************************** */
+
+
+/* StatusBar - visual */
+
+.x-statusbar .x-status-busy {
+    background-image: url(../images/ext/default/loading.gif);
+}
+.x-statusbar .x-status-text-panel {
+    border-color: #99bbe8 #fff #fff #99bbe8;
+}
+
+/* StatusBar word processor example styles */
+
+#word-status .x-status-text {
+    color: #777;
+}
+#word-status .x-status-busy {
+    background-image: url(../images/ext/default/saving.gif);
+}
+#word-status .x-status-saved {
+    background-image: url(../images/ext/default/saved.png);
+}
+
+/* StatusBar form validation example styles */
+
+.x-statusbar .x-status-error {
+    color: #C33;
+    background-image: url(../images/ext/default/exclamation.gif);
+}
+.x-statusbar .x-status-valid {
+    background-image: url(../images/ext/default/accept.png);
+}
+.x-status-error-list {
+    border-color: #C33;
+}
+.x-status-error-list li a {
+    color: #15428B;
+}
+
 .x-pm-startcase-btn {
   background-image:url(/images/start.png)  !important;
   color: #000 !important;
@@ -946,7 +1068,7 @@ antes funcionaba.
 .x-toolbar1 .x-btn-br { background-position: -3px -3px; }
 .x-toolbar1 .x-btn-bc { background-position: 0 -15px; }
 
-
+.x-text-plain { font-weight: bold; }
 
 
 /* Case Notes styles */

workflow/engine/templates/app/main.js

@@ -1,6 +1,8 @@
-/* Case Notes - Start */
+var newNoteAreaActive;
-var newNoteAreaActive = false;
 var caseNotesWindow;
+var storeNotes;
+var appUid;
+var title;
 
 function closeCaseNotesWindow(){
   if(Ext.get("caseNotesWindowPanel")){
@@ -8,14 +10,15 @@ function closeCaseNotesWindow(){
   }
 }
 
-function openCaseNotesWindow(appUid,modalSw)
+function openCaseNotesWindow(appUid1, modalSw, appTitle)
 {
-  if(!appUid) appUid="";
+  Ext.QuickTips.init();
-
+  appUid = !appUid1 ? "": appUid1;
+  title  = appTitle;
   var startRecord=0;
   var loadSize=10;
 
-  var storeNotes = new Ext.data.JsonStore({
+  storeNotes = new Ext.data.JsonStore({
     url : '../appProxy/getNotesList?appUid='+appUid,
     root: 'notes',
     totalProperty: 'totalCount',
@@ -41,7 +44,6 @@ function openCaseNotesWindow(appUid,modalSw)
   
   var panelNotes = new Ext.Panel({
     id:'notesPanel',
-
     frame:true,
     autoWidth:true,
     autoHeight:true,
@@ -50,7 +52,6 @@ function openCaseNotesWindow(appUid,modalSw)
       new Ext.DataView({
         store: storeNotes,
         loadingtext:_('ID_CASE_NOTES_LOADING'),
-        // autoScroll:true,
         emptyText: _('ID_CASE_NOTES_EMPTY'),
         cls: 'x-cnotes-view',
         tpl: '<tpl for=".">' +
@@ -114,33 +115,166 @@ function openCaseNotesWindow(appUid,modalSw)
     ]
   });
 
-  var tbar = [
+  caseNotesWindow = new Ext.Window({
+    title: _('ID_CASES_NOTES'), //Title of the Window
+    id: 'caseNotesWindowPanel', //ID of the Window Panel
+    width:300, //Width of the Window
+    resizable: true, //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',
+    autoCreate: true,
+    height:400,
+    shadow:true,
+    minWidth:300,
+    minHeight:200,
+    proxyDrag: true,
+    constrain: true,
+    keys: {
+      key: 27,
+      fn  : function(){
+        caseNotesWindow.hide();
+      }
+    },
+    autoScroll:true,
+    items:[panelNotes],
+    tools:[
     {
-      //xtype:'textfield',
+      id:'refresh',
+      handler:function() {
+        storeNotes.load();
+      }
+    }
+    ],
+    tbar:[
+        new Ext.form.TextArea({
+          text   : 'New Note',
           xtype  : 'textarea',
           id     : 'caseNoteText',
           name   : 'caseNoteText',
-      hideLabel : true,
+          width  : 280,
-      blankText : '...',
-      //anchor: '100%',
-      width     : 248,
           grow   : true,
-      maxLenght : 150,
+          height : 40,
+          growMin: 40,
+          growMax: 80,
+          maxLengthText  : 150,
           allowBlank     :true,
           selectOnFocus  :true,
-      height : 40,
+          enableKeyEvents: true,
-      growMin: 39,
+          listeners : {
-      growMax: 80
+            scope  : this,
-     },
+            keyup  : updateTextCtr,
+            keydown: updateTextCtr
+          }
+        })
+      ],
+    rowtbar: [
+      [
+        '->',
+        '<span id="countChar">150</span>',
         ' ',
         {
+          id: 'sendBtn',
+          text: 'Send',
           cls: 'x-toolbar1',
-      text: _('ID_SEND'),
+          handler: sendNote
-      //iconCls: 'x-pm-notes-btn',
+        }, ' ',
-      scale: 'large',
+        {
-      stype:'button',
+          id: 'addCancelBtn',
-      iconAlign: 'top',
+          text: 'Cancel',
-      handler: function(){
+          cls: 'x-toolbar1',
+          //iconCls: 'xx',
+          icon: '/images/add_notes.png',
+          handler: newNoteHandler,
+          tooltip: {
+            title: 'Add new note',
+            text: 'Case: ' + title
+          }
+        }
+      ]
+    ],
+    bbar:[
+      new Ext.ux.StatusBar({
+        defaultText : _('ID_NOTES_READY'),
+        id : 'notesStatusPanel',
+        //defaultIconCls: 'ICON_CASES_NOTES',
+        text: _('ID_NOTES_READY'), // values to set initially:
+        //iconCls: 'ready-icon',
+        statusAlign: 'left',
+        items: [] // any standard Toolbar items:
+      })
+    ],
+    listeners: {
+      show:function() {
+        this.loadMask = new Ext.LoadMask(this.body, {
+          msg:_('ID_LOADING')
+        });
+      },
+      close:function(){
+        if (Ext.get("caseNotes")) {
+          Ext.getCmp("caseNotes").toggle(false);
+          //Ext.getCmp('caseNotes').show();
+        }
+      }
+    }
+  });
+
+  newNoteAreaActive = false;
+  caseNotesWindow.show();
+  newNoteHandler();
+}
+
+function updateTextCtr(body, event) {
+  
+  ctr = document.getElementById('countChar').innerHTML;
+  
+  text = Ext.getCmp('caseNoteText').getValue();
+  maxLength = 150;
+
+  if (text.length > maxLength) {
+    Ext.getCmp('caseNoteText').setValue(Ext.getCmp('caseNoteText').getValue().substr(0,150));
+  }
+  else {
+    document.getElementById('countChar').innerHTML = maxLength - text.length;
+  }
+}
+
+function newNoteHandler()
+{
+  newNoteAreaActive = newNoteAreaActive ? false : true;
+  if (newNoteAreaActive) {
+    Ext.getCmp('addCancelBtn').setText('');
+    Ext.getCmp('addCancelBtn').setTooltip({
+      title: _('ID_CASES_NOTES_ADD'),
+      text: _('ID_CASE') +': '+ title
+    });
+
+    Ext.getCmp('addCancelBtn').setIcon('/images/comment_add.gif');
+
+    caseNotesWindow.getTopToolbar().hide();
+    Ext.getCmp('sendBtn').hide();
+    document.getElementById('countChar').style.display = 'none';
+    caseNotesWindow.doLayout();
+  }
+  else {
+    Ext.getCmp('addCancelBtn').setText('');
+    Ext.getCmp('addCancelBtn').setTooltip({title: _('ID_CASES_NOTES_CANCEL')});
+    Ext.getCmp('addCancelBtn').setIcon('/images/cancel.png');
+
+    caseNotesWindow.getTopToolbar().show();
+    Ext.getCmp('sendBtn').show();
+    document.getElementById('countChar').style.display = 'block';
+    Ext.getCmp('caseNoteText').focus();
+    Ext.getCmp('caseNoteText').reset();
+    document.getElementById('countChar').innerHTML = '150';
+    caseNotesWindow.doLayout();
+  }
+  
+  caseNotesWindow.doLayout();
+}
+
+function sendNote()
+{
   var noteText = Ext.getCmp('caseNoteText').getValue();
     
   if (noteText == "") {
@@ -163,7 +297,8 @@ function openCaseNotesWindow(appUid,modalSw)
       if(data.success=="success"){
         statusBarMessage( _('ID_CASES_NOTE_POST_SUCCESS'), false,true);
         storeNotes.load();
-            }else{
+      }
+      else{
         statusBarMessage( _('ID_CASES_NOTE_POST_ERROR'), false,false);
         Ext.MessageBox.alert(_('ID_CASES_NOTE_POST_ERROR'), data.message);
 
@@ -175,105 +310,11 @@ function openCaseNotesWindow(appUid,modalSw)
     }
   });
 }
-    }
-  ];
-
-  
-  caseNotesWindow = new Ext.Window({
-    title: _('ID_CASES_NOTES'), //Title of the Window
-    id: 'caseNotesWindowPanel', //ID of the Window Panel
-    width:300, //Width of the Window
-    resizable: true, //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',
-    autoCreate: true,
-    height:400,
-    shadow:true,
-    minWidth:300,
-    minHeight:200,
-    proxyDrag: true,
-    keys: {
-      key: 27,
-      fn  : function(){
-        caseNotesWindow.hide();
-      }
-    },
-    autoScroll:true,
-    items:[panelNotes],
-    tools:[
-    {
-      id:'refresh',
-      handler:function() {
-        storeNotes.load();
-      }
-    }
-    ],
-    tbar:tbar,
-    bbar:[
-      new Ext.ux.StatusBar({
-        defaultText : _('ID_NOTES_READY'),
-        id : 'notesStatusPanel',
-        //defaultIconCls: 'ICON_CASES_NOTES',
-        text: _('ID_NOTES_READY'), // values to set initially:
-        //iconCls: 'ready-icon',
-        statusAlign: 'left',
-        items: [] // any standard Toolbar items:
-      }), '->',
-      {
-        id: 'newNoteButton',
-        text: _('ID_NEW_NOTE'),
-        handler: newNoteHandler
-      },
-      {
-        text: _('ID_CANCEL'),
-        handler: function()
-        {
-          caseNotesWindow.close();
-        }
-      }
-    ],
-    listeners: {
-      show:function() {
-        this.loadMask = new Ext.LoadMask(this.body, {
-          msg:_('ID_LOADING')
-        });
-      },
-      close:function(){
-        if (Ext.get("caseNotes")) {
-          Ext.getCmp("caseNotes").toggle(false);
-          //Ext.getCmp('caseNotes').show();
-        }
-      }
-    }
-  });
-
-  caseNotesWindow.getTopToolbar().hide();
-  caseNotesWindow.show();
-}
-
-function newNoteHandler()
-{
-  newNoteAreaActive = newNoteAreaActive ? false : true;
-  if (newNoteAreaActive) {
-    Ext.getCmp('newNoteButton').setText(_('ID_CANCEL_NEW_NOTE'));
-    caseNotesWindow.getTopToolbar().show();
-    Ext.getCmp('caseNoteText').focus();
-    Ext.getCmp('caseNoteText').reset();
-  } 
-  else {
-    Ext.getCmp('newNoteButton').setText(_('ID_NEW_NOTE'));
-    caseNotesWindow.getTopToolbar().hide();
-  }
-  caseNotesWindow.doLayout();
-}
 
 function statusBarMessage( msg, isLoading, success ) {
-  // console.log("Status Bar needed");
-  // console.log(msg);
   var statusBar = Ext.getCmp('notesStatusPanel');
   if( !statusBar ) return;
-  // console.log("Status bar acceced: "+msg);
+  
   if( isLoading ) {
     statusBar.showBusy(msg);
   }
@@ -283,13 +324,13 @@ function statusBarMessage( msg, isLoading, success ) {
     if( success ) {
       statusBar.setStatus({
         text: '' + msg,
-        //iconCls: 'success',
+        iconCls: 'x-status-valid',
         clear: true
       });
     } else {
       statusBar.setStatus({
         text: 'Error: ' + msg,
-        //iconCls: 'error',
+        iconCls: 'x-status-error',
         clear: true
       });
     }
@@ -297,7 +338,11 @@ function statusBarMessage( msg, isLoading, success ) {
 }
 
 
+
+//-------------------------------------------------------------------------------------
+
 /* Case Notes - End */
+
 /* Case Summary - Start */
 var openSummaryWindow = function(appUid, delIndex) 
 {
@@ -367,3 +412,34 @@ var openSummaryWindow = function(appUid, delIndex)
   });
 }
 /* Case Summary - End*/
+
+
+
+Ext.Panel.prototype.originalonRender = Ext.Panel.prototype.onRender;
+
+// override onRender method
+Ext.Panel.prototype.onRender = function(ct, position) {
+    this.originalonRender(ct, position);
+    
+    // use the custom rowtbar argument to add it to this TopToolbar
+    if(this.tbar && this.rowtbar){
+        var rowtbar = this.rowtbar;
+        if(!Ext.isArray(rowtbar))
+            return;
+        
+        for(var i = 0; i < rowtbar.length; i ++) {
+            new Ext.Toolbar(rowtbar[i]).render(this.tbar);
+        }
+    }
+    
+    // use the custom rowbbar argument to add it to this BottomToolbar
+    if(this.bbar && this.rowbbar) {
+        var rowbbar = this.rowbbar;
+        if(!Ext.isArray(rowbbar))
+            return;
+            
+        for(var i = 0; i < rowbbar.length; i ++) {
+            new Ext.Toolbar(rowbbar[i]).render(this.bbar);
+        }
+    }
+}  

workflow/engine/templates/cases/casesList.js

@@ -375,8 +375,9 @@ Ext.onReady ( function() {
   };
 
   function renderNote(val,p,r) {
-    appUid="'"+r.data['APP_UID']+"'";
+    appUid = r.data['APP_UID'];
-    return '<img src="/images/ext/default/s.gif" class="x-tree-node-icon ICON_CASES_NOTES" unselectable="off" id="extdd-17" onClick="openCaseNotesWindow('+appUid+',true)">';
+    title  = r.data['APP_TITLE'];
+    return '<img src="/images/ext/default/s.gif" class="x-tree-node-icon ICON_CASES_NOTES" unselectable="off" id="extdd-17" onClick="openCaseNotesWindow(\''+appUid+'\', true, \''+title+'\')">';
   }
 
   function showField (value,p,r) {