Skip to content

Commit

Permalink
Add pop-up when you click on the names
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikantonelli
nikantonelli committed Jun 27, 2016
1 parent faaf72b commit e0a0545
Show file tree
Hide file tree
Showing 5 changed files with 176 additions and 16 deletions.
92 changes: 86 additions & 6 deletions App.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,56 @@
Ext.define('Rally.ui.popover.UserPopover', {
alias: 'widget.rallyuserpopover',
extend: Rally.ui.popover.ListViewPopover ,

id: 'user-popover',
cls: 'userstory-popover',
title: 'Users',
titleIconCls: 'icon-story',

constructor: function(config) {

var app = Ext.getCmp('projectApp');

var fieldName = (app.getSetting('userGroup') && app.getSetting('userGroup').getValue()) || 'TeamMembers';

config.listViewConfig = Ext.merge({
model: Ext.identityFn('User'),
childField: fieldName,
addNewConfig: null,
gridConfig: {
storeConfig: {
context: config.context,
fetch: true,
listeners: {
load: this._onStoreLoad,
scope: this
}
},
columnCfgs: [
{
dataIndex: 'DisplayName',
width: 90
},
{
dataIndex: 'EmailAddress',
flex: 90
},
{
dataIndex: 'Phone',
width: 180
},
{
dataIndex: 'UserName',
width: 180
}
]
}
}, config.listViewConfig);

this.callParent(arguments);
}
});

Ext.define( 'Rally.ui.tree.extendedTreeItem' , {
alias: 'widget.extendedTreeItem',
extend: 'Rally.ui.tree.TreeItem',
Expand Down Expand Up @@ -85,9 +138,9 @@ Ext.define( 'Rally.ui.tree.extendedTreeItem' , {
layout: '100%'
},
style: {
marginLeft: '50px'
marginLeft: '50px',
border: 15
},
overflowX: true,
listeners: {
afterrender: function(cmp) {
var treeItem = me;
Expand Down Expand Up @@ -117,22 +170,48 @@ Ext.define( 'Rally.ui.tree.extendedTreeItem' , {
filters: filters
}).load().then({
success: function(data) {
var popOver;
var thisPopoverCfg = {
record: record,
target: cmp.getTargetEl(),
field: fieldName,
autoShow: true
};
if (data.length > 0) {
cmp.getTargetEl().on('click', function() { Ext.create('Rally.ui.popover.UserPopover', thisPopoverCfg);});
}
cmp.suspendLayouts();

_.each(data, function(member) {
cmp.add(
var mseSelected;
var user =
{ xtype: 'textfield',
cls: 'rally-textfield-component',
readOnly: true,
style: { marginLeft: '10px'},
value: member.get('_refObjectName')
}
);
};

cmp.add(user);
});
cmp.resumeLayouts();
}
});
}
}
}
// ,{
// xtype: 'image',
// id: 'helpIcon-' + me.getRecord().get('ObjectID'),
// autoEl: 'div',
// hidden: true,
// hideMode: 'offsets',
// src: '/slm/images/icon_help.gif',
// listeners: {
// click: function(arg1, arg2, arg3, arg4) {
// debugger;
// }
// }
// }
]
});

Expand All @@ -144,6 +223,7 @@ Ext.define('CustomApp', {
componentCls: 'app',

itemId: 'projectApp',
id: 'projectApp',
stateful: true,
stateId: 'projectApp-' + Ext.id(),

Expand Down
2 changes: 1 addition & 1 deletion config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "ProjectTree",
"className": "CustomApp",
"server": "https://rally1.rallydev.com",
"sdk": "2.0",
"sdk": "2.1",
"javascript": [
"App.js"
],
Expand Down
2 changes: 1 addition & 1 deletion deploy/App-external.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<script type="text/javascript">
Rally.onReady(function () {
Ext.define("Rally.ui.tree.extendedTreeItem",{alias:"widget.extendedTreeItem",extend:"Rally.ui.tree.TreeItem",config:{displayedFields:["Name","Description","TeamMembers"]},getContentTpl:function(){var me=this;return Ext.create("Ext.XTemplate",'<tpl if="this.canDrag()"><div class="icon drag"></div></tpl>',"{[this.getActionsGear()]}",'<div class="textContent ellipses">{[this.getFormattedId()]} {[this.getSeparator()]}{Name} ({[this.getOwner()]})</div>','<div class="rightSide">',"</div>",{canDrag:function(){return me.getCanDrag()},getActionsGear:function(){return me._buildActionsGearHtml()},getFormattedId:function(){var record=me.getRecord();return record.getField("FormattedID")?Rally.ui.renderer.RendererFactory.renderRecordField(record,"FormattedID"):""},getSeparator:function(){return this.getFormattedId()?"- ":""},getOwner:function(){var record=me.getRecord();return record.getField("Owner")?Rally.ui.renderer.RendererFactory.renderRecordField(record,"Owner"):""}})},draw:function(){var me=this;this.content&&this.content.destroy();var cls="treeItemContent";this.getSelectable()&&(cls+=" selectable"),this.expander?this.toggleExpander():this.expander=this.drawExpander(),this.insert(1,{xtype:"container",itemId:"treeItemContent",cls:cls,layout:{type:"hbox"},items:[{xtype:"component",renderTpl:this.getContentTpl(),renderData:this.getRenderData(),listeners:{afterrender:function(){this.setupListeners(),this.fireEvent("draw")},scope:this}},{xtype:"fieldcontainer",itemId:"userInfoRecord",layout:{type:"anchor"},defaults:{layout:"100%"},style:{marginLeft:"50px"},overflowX:!0,listeners:{afterrender:function(cmp){var treeItem=me,record=me.getRecord(),app=this.up("#projectApp"),filters=[{property:"WorkspacePermission",operator:"<",value:"Workspace Admin"}];app.getSetting("projectAdminsOnly").value===!0&&(filters=[{property:"WorkspacePermission",value:"Project Admin"}]);var fieldName=app.getSetting("userGroup")&&app.getSetting("userGroup").getValue()||"TeamMembers";record.getCollection(fieldName,{filters:filters}).load().then({success:function(data){cmp.suspendLayouts(),_.each(data,function(member){cmp.add({xtype:"textfield",cls:"rally-textfield-component",style:{marginLeft:"10px"},value:member.get("_refObjectName")})}),cmp.resumeLayouts()}})}}}]})}}),Ext.define("CustomApp",{extend:"Rally.app.App",componentCls:"app",itemId:"projectApp",stateful:!0,stateId:"projectApp-"+Ext.id(),getSettingsFields:function(){return[{xtype:"rallycheckboxfield",fieldLabel:"Show Project Admins Only",labelWidth:200,name:"projectAdminsOnly"},{xtype:"radiogroup",name:"userGroup",fieldLabel:"User Type Selection",columns:1,items:[{boxLabel:"Editors",name:"rb",inputValue:"Editors"},{boxLabel:"Team Members",name:"rb",inputValue:"TeamMembers",checked:!0}]}]},launch:function(){var app=this,pt=Ext.create("Rally.ui.tree.ProjectTree",{config:{treeItemConfigForRecordFn:function(record){return"workspace"===record.get("_type")?{xtype:"rallyplaintreeitem"}:{xtype:"extendedTreeItem",selectable:!0}},topLevelStoreConfig:{fetch:["Name","State","Workspace"],filters:[{property:"State",value:"Open"},{property:"Projects.State",value:"Open"}],sorters:[{property:"Name",direction:"ASC"}],context:function(){app._getContext(app)}},childItemsStoreConfigForParentRecordFn:function(record){var storeConfig={fetch:["Name","Description","Owner","Children:summary[State]","State","Workspace"],hydrate:["Owner"],sorters:[{property:"Name",direction:"ASC"}]};return"workspace"===record.get("_type")?Ext.apply(storeConfig,{filters:[{property:"Parent",value:"null"}],context:{workspace:record.get("_ref"),project:null}}):Ext.apply(storeConfig,{filters:[{property:"Parent",value:record.get("_ref")}],context:{workspace:record.get("Workspace")._ref,project:null}})}}});this.add(pt)}});
Ext.define("Rally.ui.popover.UserPopover",{alias:"widget.rallyuserpopover",extend:Rally.ui.popover.ListViewPopover,id:"user-popover",cls:"userstory-popover",title:"Users",titleIconCls:"icon-story",constructor:function(config){var app=Ext.getCmp("projectApp"),fieldName=app.getSetting("userGroup")&&app.getSetting("userGroup").getValue()||"TeamMembers";config.listViewConfig=Ext.merge({model:Ext.identityFn("User"),childField:fieldName,addNewConfig:null,gridConfig:{storeConfig:{context:config.context,fetch:!0,listeners:{load:this._onStoreLoad,scope:this}},columnCfgs:[{dataIndex:"DisplayName",width:90},{dataIndex:"EmailAddress",flex:90},{dataIndex:"Phone",width:180},{dataIndex:"UserName",width:180}]}},config.listViewConfig),this.callParent(arguments)}}),Ext.define("Rally.ui.tree.extendedTreeItem",{alias:"widget.extendedTreeItem",extend:"Rally.ui.tree.TreeItem",config:{displayedFields:["Name","Description","TeamMembers"]},getContentTpl:function(){var me=this;return Ext.create("Ext.XTemplate",'<tpl if="this.canDrag()"><div class="icon drag"></div></tpl>',"{[this.getActionsGear()]}",'<div class="textContent ellipses">{[this.getFormattedId()]} {[this.getSeparator()]}{Name} ({[this.getOwner()]})</div>','<div class="rightSide">',"</div>",{canDrag:function(){return me.getCanDrag()},getActionsGear:function(){return me._buildActionsGearHtml()},getFormattedId:function(){var record=me.getRecord();return record.getField("FormattedID")?Rally.ui.renderer.RendererFactory.renderRecordField(record,"FormattedID"):""},getSeparator:function(){return this.getFormattedId()?"- ":""},getOwner:function(){var record=me.getRecord();return record.getField("Owner")?Rally.ui.renderer.RendererFactory.renderRecordField(record,"Owner"):""}})},draw:function(){var me=this;this.content&&this.content.destroy();var cls="treeItemContent";this.getSelectable()&&(cls+=" selectable"),this.expander?this.toggleExpander():this.expander=this.drawExpander(),this.insert(1,{xtype:"container",itemId:"treeItemContent",cls:cls,layout:{type:"hbox"},items:[{xtype:"component",renderTpl:this.getContentTpl(),renderData:this.getRenderData(),listeners:{afterrender:function(){this.setupListeners(),this.fireEvent("draw")},scope:this}},{xtype:"fieldcontainer",itemId:"userInfoRecord",layout:{type:"anchor"},defaults:{layout:"100%"},style:{marginLeft:"50px",border:15},listeners:{afterrender:function(cmp){var treeItem=me,record=me.getRecord(),app=this.up("#projectApp"),filters=[{property:"WorkspacePermission",operator:"<",value:"Workspace Admin"}];app.getSetting("projectAdminsOnly").value===!0&&(filters=[{property:"WorkspacePermission",value:"Project Admin"}]);var fieldName=app.getSetting("userGroup")&&app.getSetting("userGroup").getValue()||"TeamMembers";record.getCollection(fieldName,{filters:filters}).load().then({success:function(data){var popOver,thisPopoverCfg={record:record,target:cmp.getTargetEl(),field:fieldName,autoShow:!0};data.length>0&&cmp.getTargetEl().on("click",function(){Ext.create("Rally.ui.popover.UserPopover",thisPopoverCfg)}),cmp.suspendLayouts(),_.each(data,function(member){var mseSelected,user={xtype:"textfield",readOnly:!0,style:{marginLeft:"10px"},value:member.get("_refObjectName")};cmp.add(user)}),cmp.resumeLayouts()}})}}}]})}}),Ext.define("CustomApp",{extend:"Rally.app.App",componentCls:"app",itemId:"projectApp",id:"projectApp",stateful:!0,stateId:"projectApp-"+Ext.id(),getSettingsFields:function(){return[{xtype:"rallycheckboxfield",fieldLabel:"Show Project Admins Only",labelWidth:200,name:"projectAdminsOnly"},{xtype:"radiogroup",name:"userGroup",fieldLabel:"User Type Selection",columns:1,items:[{boxLabel:"Editors",name:"rb",inputValue:"Editors"},{boxLabel:"Team Members",name:"rb",inputValue:"TeamMembers",checked:!0}]}]},launch:function(){var app=this,pt=Ext.create("Rally.ui.tree.ProjectTree",{config:{treeItemConfigForRecordFn:function(record){return"workspace"===record.get("_type")?{xtype:"rallyplaintreeitem"}:{xtype:"extendedTreeItem",selectable:!0}},topLevelStoreConfig:{fetch:["Name","State","Workspace"],filters:[{property:"State",value:"Open"},{property:"Projects.State",value:"Open"}],sorters:[{property:"Name",direction:"ASC"}],context:function(){app._getContext(app)}},childItemsStoreConfigForParentRecordFn:function(record){var storeConfig={fetch:["Name","Description","Owner","Children:summary[State]","State","Workspace"],hydrate:["Owner"],sorters:[{property:"Name",direction:"ASC"}]};return"workspace"===record.get("_type")?Ext.apply(storeConfig,{filters:[{property:"Parent",value:"null"}],context:{workspace:record.get("_ref"),project:null}}):Ext.apply(storeConfig,{filters:[{property:"Parent",value:record.get("_ref")}],context:{workspace:record.get("Workspace")._ref,project:null}})}}});this.add(pt)}});

Rally.launchApp('CustomApp', {
name:"ProjectTree",
Expand Down
94 changes: 87 additions & 7 deletions deploy/App-uncompressed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,60 @@

<script type="text/javascript">
Rally.onReady(function () {
Ext.define( 'Rally.ui.tree.extendedTreeItem' , {
Ext.define('Rally.ui.popover.UserPopover', {
alias: 'widget.rallyuserpopover',
extend: Rally.ui.popover.ListViewPopover ,

id: 'user-popover',
cls: 'userstory-popover',
title: 'Users',
titleIconCls: 'icon-story',

constructor: function(config) {

var app = Ext.getCmp('projectApp');

var fieldName = (app.getSetting('userGroup') && app.getSetting('userGroup').getValue()) || 'TeamMembers';

config.listViewConfig = Ext.merge({
model: Ext.identityFn('User'),
childField: fieldName,
addNewConfig: null,
gridConfig: {
storeConfig: {
context: config.context,
fetch: true,
listeners: {
load: this._onStoreLoad,
scope: this
}
},
columnCfgs: [
{
dataIndex: 'DisplayName',
width: 90
},
{
dataIndex: 'EmailAddress',
flex: 90
},
{
dataIndex: 'Phone',
width: 180
},
{
dataIndex: 'UserName',
width: 180
}
]
}
}, config.listViewConfig);

this.callParent(arguments);
}
});

Ext.define( 'Rally.ui.tree.extendedTreeItem' , {
alias: 'widget.extendedTreeItem',
extend: 'Rally.ui.tree.TreeItem',
config: {
Expand Down Expand Up @@ -94,9 +147,9 @@
layout: '100%'
},
style: {
marginLeft: '50px'
marginLeft: '50px',
border: 15
},
overflowX: true,
listeners: {
afterrender: function(cmp) {
var treeItem = me;
Expand Down Expand Up @@ -126,22 +179,48 @@
filters: filters
}).load().then({
success: function(data) {
var popOver;
var thisPopoverCfg = {
record: record,
target: cmp.getTargetEl(),
field: fieldName,
autoShow: true
};
if (data.length > 0) {
cmp.getTargetEl().on('click', function() { Ext.create('Rally.ui.popover.UserPopover', thisPopoverCfg);});
}
cmp.suspendLayouts();

_.each(data, function(member) {
cmp.add(
var mseSelected;
var user =
{ xtype: 'textfield',
cls: 'rally-textfield-component',
readOnly: true,
style: { marginLeft: '10px'},
value: member.get('_refObjectName')
}
);
};

cmp.add(user);
});
cmp.resumeLayouts();
}
});
}
}
}
// ,{
// xtype: 'image',
// id: 'helpIcon-' + me.getRecord().get('ObjectID'),
// autoEl: 'div',
// hidden: true,
// hideMode: 'offsets',
// src: '/slm/images/icon_help.gif',
// listeners: {
// click: function(arg1, arg2, arg3, arg4) {
// debugger;
// }
// }
// }
]
});

Expand All @@ -153,6 +232,7 @@
componentCls: 'app',

itemId: 'projectApp',
id: 'projectApp',
stateful: true,
stateId: 'projectApp-' + Ext.id(),

Expand Down
Loading

0 comments on commit e0a0545

Please sign in to comment.