From 545b32ec1808b6444b78275468fee2455c13b5d5 Mon Sep 17 00:00:00 2001 From: Rodrigo Quelca Date: Mon, 23 Mar 2020 15:30:48 -0400 Subject: [PATCH 1/2] PMCORE-1205 Columns from process list are not correctly displayed - depending on the other columns width could get hidden --- workflow/engine/templates/processes/main.js | 30 ++++++++++----------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/workflow/engine/templates/processes/main.js b/workflow/engine/templates/processes/main.js index d40ef5e35..4d3c1a97e 100644 --- a/workflow/engine/templates/processes/main.js +++ b/workflow/engine/templates/processes/main.js @@ -439,32 +439,32 @@ Ext.onReady(function(){ // make sure it is added there or sorting will not work. {id:'PRO_UID', dataIndex: 'PRO_UID', hidden:true, hideable:false}, - {header: "", dataIndex: 'PRO_STATUS', width: 50, hidden:true, hideable:false}, + {header: "", dataIndex: 'PRO_STATUS', width: 10, hidden:true, hideable:false}, {header: _('ID_PRO_DESCRIPTION'), dataIndex: 'PRO_DESCRIPTION', hidden:true, hideable:false}, - {header: _('ID_PRO_TITLE'), dataIndex: 'PRO_TITLE', width: 380, hideable:false, renderer:function(v,p,r){ + {header: _('ID_PRO_TITLE'), dataIndex: 'PRO_TITLE', width: 25, minWidth: 15, hideable:false, renderer:function(v,p,r){ // TODO Labels for var 'type' are hardcoded, they must be replaced on the future var color = r.get('PROJECT_TYPE') == 'bpmn'? 'green': 'blue'; var type = r.get('PROJECT_TYPE') == 'bpmn'? ' (BPMN Project)': ''; return Ext.util.Format.htmlEncode(v) + ' ' + String.format("{1}", color, type); }}, - {header: _('ID_TYPE'), dataIndex: 'PROJECT_TYPE', width: 60, hidden:false}, - {header: _('ID_CATEGORY'), dataIndex: 'PRO_CATEGORY_LABEL', width: 100, hidden:false}, - {header: _('ID_STATUS'), dataIndex: 'PRO_STATUS_LABEL', width: 60, renderer:function(v,p,r){ + {header: _('ID_TYPE'), dataIndex: 'PROJECT_TYPE', width: 5, hidden:false}, + {header: _('ID_CATEGORY'), dataIndex: 'PRO_CATEGORY_LABEL', width: 10, hidden:false}, + {header: _('ID_STATUS'), dataIndex: 'PRO_STATUS_LABEL', width: 5, renderer:function(v,p,r){ color = r.get('PRO_STATUS') == 'ACTIVE'? 'green': 'red'; return String.format("{1}", color, v); }}, - {header: _('ID_OWNER'), dataIndex: 'PRO_CREATE_USER_LABEL', width: 150}, - {header: _('ID_PRO_CREATE_DATE'), dataIndex: 'PRO_CREATE_DATE', width: 70}, - {header: _('ID_INBOX'), dataIndex: 'CASES_COUNT_TO_DO', width: 60, align:'right'}, - {header: _('ID_DRAFT'), dataIndex: 'CASES_COUNT_DRAFT', width: 60, align:'right'}, - {header: _('ID_COMPLETED'), dataIndex: 'CASES_COUNT_COMPLETED', width: 60, align:'right'}, - {header: _('ID_CANCELLED'), dataIndex: 'CASES_COUNT_CANCELLED', width: 60, align:'right'}, - {header: _('ID_TOTAL_CASES'), dataIndex: 'CASES_COUNT', width: 60, renderer:function(v){return ""+v+"";}, align:'right'}, - {header: _('ID_PRO_DEBUG'), dataIndex: 'PRO_DEBUG_LABEL', width: 50, align:'center'} + {header: _('ID_OWNER'), dataIndex: 'PRO_CREATE_USER_LABEL', width: 10}, + {header: _('ID_PRO_CREATE_DATE'), dataIndex: 'PRO_CREATE_DATE', width: 5}, + {header: _('ID_INBOX'), dataIndex: 'CASES_COUNT_TO_DO', width: 5, align:'right'}, + {header: _('ID_DRAFT'), dataIndex: 'CASES_COUNT_DRAFT', width: 5, align:'right'}, + {header: _('ID_COMPLETED'), dataIndex: 'CASES_COUNT_COMPLETED', width: 5, align:'right'}, + {header: _('ID_CANCELLED'), dataIndex: 'CASES_COUNT_CANCELLED', width: 5, align:'right'}, + {header: _('ID_TOTAL_CASES'), dataIndex: 'CASES_COUNT', width: 5, renderer:function(v){return ""+v+"";}, align:'right'}, + {header: _('ID_PRO_DEBUG'), dataIndex: 'PRO_DEBUG_LABEL', width: 5, align:'center'} /*----------------------------------********---------------------------------*/ - ,{header: _("ID_TYPE_PROCESS"), dataIndex: "PRO_TYPE_PROCESS", width: 70, align:"left"} + ,{header: _("ID_TYPE_PROCESS"), dataIndex: "PRO_TYPE_PROCESS", width: 5, minWidth: 5, align:"left"} /*----------------------------------********---------------------------------*/ - ,{header: _("ID_LAN_UPDATE_DATE"), dataIndex: "PRO_UPDATE_DATE", width: 70, align:"left"} + ,{header: _("ID_LAN_UPDATE_DATE"), dataIndex: "PRO_UPDATE_DATE", width: 5, minWidth: 5, align:"left"} ] }), store: store, From ef82f1c44312f7587f6e32bac2bf8a6c0c8286dc Mon Sep 17 00:00:00 2001 From: Rodrigo Quelca Date: Thu, 26 Mar 2020 12:38:16 -0400 Subject: [PATCH 2/2] MCORE-1205: Columns from process list are not correctly displayed - depending on the other columns width could get hidden --- workflow/engine/templates/processes/main.js | 45 ++++++++++++--------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/workflow/engine/templates/processes/main.js b/workflow/engine/templates/processes/main.js index 4d3c1a97e..5e8c3bba7 100644 --- a/workflow/engine/templates/processes/main.js +++ b/workflow/engine/templates/processes/main.js @@ -401,7 +401,13 @@ Ext.onReady(function(){ } /*----------------------------------********---------------------------------*/ //End code export - exportGranular (handle) - + var proSelModel = new Ext.grid.CheckboxSelectionModel({ + listeners: { + selectionchange: function (sm) { + //TODO selection change handler + } + } + }); processesGrid = new Ext.grid.GridPanel( { region: 'center', layout: 'fit', @@ -415,7 +421,6 @@ Ext.onReady(function(){ enableHdMenu: true, frame:false, plugins: expander, - cls : 'grid_with_checkbox', columnLines: true, viewConfig: { forceFit:true, @@ -424,12 +429,12 @@ Ext.onReady(function(){ }, cm: new Ext.grid.ColumnModel({ defaults: { - width: 200, + width: 50, sortable: true }, columns: [ + proSelModel, expander, - // There is a list of allowed columns to sort: // workflow/engine/methods/cases/proxyProcessList.php // This is to prevent ORDER BY injection attacks @@ -437,36 +442,36 @@ Ext.onReady(function(){ // It is identical to this list. // If you need to add a new column that is sortable, please // make sure it is added there or sorting will not work. - {id:'PRO_UID', dataIndex: 'PRO_UID', hidden:true, hideable:false}, - {header: "", dataIndex: 'PRO_STATUS', width: 10, hidden:true, hideable:false}, + {header: "", dataIndex: 'PRO_STATUS', width: 50, hidden:true, hideable:false}, {header: _('ID_PRO_DESCRIPTION'), dataIndex: 'PRO_DESCRIPTION', hidden:true, hideable:false}, - {header: _('ID_PRO_TITLE'), dataIndex: 'PRO_TITLE', width: 25, minWidth: 15, hideable:false, renderer:function(v,p,r){ + {header: _('ID_PRO_TITLE'), dataIndex: 'PRO_TITLE', width: 200, hideable:false, renderer:function(v,p,r){ // TODO Labels for var 'type' are hardcoded, they must be replaced on the future var color = r.get('PROJECT_TYPE') == 'bpmn'? 'green': 'blue'; var type = r.get('PROJECT_TYPE') == 'bpmn'? ' (BPMN Project)': ''; return Ext.util.Format.htmlEncode(v) + ' ' + String.format("{1}", color, type); }}, - {header: _('ID_TYPE'), dataIndex: 'PROJECT_TYPE', width: 5, hidden:false}, - {header: _('ID_CATEGORY'), dataIndex: 'PRO_CATEGORY_LABEL', width: 10, hidden:false}, - {header: _('ID_STATUS'), dataIndex: 'PRO_STATUS_LABEL', width: 5, renderer:function(v,p,r){ + {header: _('ID_TYPE'), dataIndex: 'PROJECT_TYPE', width: 60, hidden:false}, + {header: _('ID_CATEGORY'), dataIndex: 'PRO_CATEGORY_LABEL', width: 100, hidden:false}, + + {header: _('ID_STATUS'), dataIndex: 'PRO_STATUS_LABEL', width: 50, renderer:function(v,p,r){ color = r.get('PRO_STATUS') == 'ACTIVE'? 'green': 'red'; return String.format("{1}", color, v); }}, - {header: _('ID_OWNER'), dataIndex: 'PRO_CREATE_USER_LABEL', width: 10}, - {header: _('ID_PRO_CREATE_DATE'), dataIndex: 'PRO_CREATE_DATE', width: 5}, - {header: _('ID_INBOX'), dataIndex: 'CASES_COUNT_TO_DO', width: 5, align:'right'}, - {header: _('ID_DRAFT'), dataIndex: 'CASES_COUNT_DRAFT', width: 5, align:'right'}, - {header: _('ID_COMPLETED'), dataIndex: 'CASES_COUNT_COMPLETED', width: 5, align:'right'}, - {header: _('ID_CANCELLED'), dataIndex: 'CASES_COUNT_CANCELLED', width: 5, align:'right'}, - {header: _('ID_TOTAL_CASES'), dataIndex: 'CASES_COUNT', width: 5, renderer:function(v){return ""+v+"";}, align:'right'}, - {header: _('ID_PRO_DEBUG'), dataIndex: 'PRO_DEBUG_LABEL', width: 5, align:'center'} + {header: _('ID_OWNER'), dataIndex: 'PRO_CREATE_USER_LABEL', width: 90}, + {header: _('ID_PRO_CREATE_DATE'), dataIndex: 'PRO_CREATE_DATE', width: 90}, + {header: _('ID_INBOX'), dataIndex: 'CASES_COUNT_TO_DO', width: 50, align:'right'}, + {header: _('ID_DRAFT'), dataIndex: 'CASES_COUNT_DRAFT', width: 50, align:'right'}, + {header: _('ID_COMPLETED'), dataIndex: 'CASES_COUNT_COMPLETED', width: 50, align:'right'}, + {header: _('ID_CANCELLED'), dataIndex: 'CASES_COUNT_CANCELLED', width: 50, align:'right'}, + {header: _('ID_TOTAL_CASES'), dataIndex: 'CASES_COUNT', width: 75, renderer:function(v){return ""+v+"";}, align:'right'} /*----------------------------------********---------------------------------*/ - ,{header: _("ID_TYPE_PROCESS"), dataIndex: "PRO_TYPE_PROCESS", width: 5, minWidth: 5, align:"left"} + ,{header: _("ID_TYPE_PROCESS"), dataIndex: "PRO_TYPE_PROCESS", width: 75, align:"right"} /*----------------------------------********---------------------------------*/ - ,{header: _("ID_LAN_UPDATE_DATE"), dataIndex: "PRO_UPDATE_DATE", width: 5, minWidth: 5, align:"left"} + ,{header: _("ID_LAN_UPDATE_DATE"), dataIndex: "PRO_UPDATE_DATE", width: 90, align:"right"} ] }), + sm: proSelModel, store: store, tbar:[ newTypeProcess,/*