modx.panel.dashboard.widget.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. MODx.panel.DashboardWidget = function(config) {
  2. config = config || {};
  3. var itms = [];
  4. itms.push({
  5. title: _('general_information')
  6. ,cls: 'main-wrapper'
  7. ,border: false
  8. ,defaults: { border: false ,msgTarget: 'side' }
  9. ,layout: 'form'
  10. ,id: 'modx-dashboard-widget-form'
  11. ,labelAlign: 'top'
  12. ,items: [{
  13. layout: 'column'
  14. ,defaults: {
  15. layout: 'form'
  16. ,labelAlign: 'top'
  17. ,anchor: '100%'
  18. ,border: false
  19. // ,cls:'main-wrapper'
  20. ,labelSeparator: ''
  21. }
  22. ,items: [{
  23. columnWidth: .6
  24. ,items: [{
  25. xtype: 'hidden'
  26. ,name: 'id'
  27. ,fieldLabel: _('id')
  28. ,id: 'modx-dashboard-widget-id'
  29. ,value: config.record.id
  30. },{
  31. name: 'name'
  32. ,id: 'modx-dashboard-widget-name'
  33. ,xtype: 'textfield'
  34. ,fieldLabel: _('name')
  35. ,description: _('widget_name_desc')
  36. ,allowBlank: false
  37. ,enableKeyEvents: true
  38. ,anchor: '100%'
  39. ,listeners: {
  40. 'keyup': {scope:this,fn:function(f,e) {
  41. var s = _(f.getValue());
  42. if (s == undefined) { s = f.getValue(); }
  43. Ext.getCmp('modx-dashboard-widget-name-trans').setValue(s);
  44. if (!Ext.isEmpty(s)) {
  45. Ext.getCmp('modx-dashboard-widget-header').getEl().update(_('widget')+': '+s);
  46. }
  47. }}
  48. }
  49. },{
  50. xtype: MODx.expandHelp ? 'label' : 'hidden'
  51. ,forId: 'modx-dashboard-widget-name'
  52. ,html: _('widget_name_desc')
  53. ,cls: 'desc-under'
  54. },{
  55. xtype: 'displayfield'
  56. ,hideLabel: true
  57. ,name: 'name_trans'
  58. ,cls: 'desc-under desc-trans'
  59. ,id: 'modx-dashboard-widget-name-trans'
  60. },{
  61. name: 'description'
  62. ,id: 'modx-dashboard-widget-description'
  63. ,xtype: 'textarea'
  64. ,fieldLabel: _('description')
  65. ,description: _('widget_description_desc')
  66. ,anchor: '100%'
  67. ,enableKeyEvents: true
  68. ,listeners: {
  69. 'keyup': {scope:this,fn:function(f,e) {
  70. var s = _(f.getValue());
  71. if (s == undefined) { s = f.getValue(); }
  72. Ext.getCmp('modx-dashboard-widget-description-trans').setValue(s);
  73. }}
  74. }
  75. },{
  76. xtype: MODx.expandHelp ? 'label' : 'hidden'
  77. ,forId: 'modx-dashboard-widget-description'
  78. ,html: _('widget_description_desc')
  79. ,cls: 'desc-under'
  80. },{
  81. xtype: 'displayfield'
  82. ,hideLabel: true
  83. ,name: 'description_trans'
  84. ,cls: 'desc-under desc-trans'
  85. ,id: 'modx-dashboard-widget-description-trans'
  86. },{
  87. xtype: 'modx-combo-dashboard-widget-type'
  88. ,id: 'modx-dashboard-widget-type'
  89. ,name: 'type'
  90. ,hiddenName: 'type'
  91. ,fieldLabel: _('widget_type')
  92. ,description: _('widget_type_desc')
  93. ,anchor: '100%'
  94. ,value: config.record.type || 'html'
  95. },{
  96. xtype: MODx.expandHelp ? 'label' : 'hidden'
  97. ,forId: 'modx-dashboard-widget-type'
  98. ,html: _('widget_type_desc')
  99. ,cls: 'desc-under'
  100. }]
  101. },{
  102. columnWidth: .4
  103. ,items: [{
  104. xtype: 'modx-combo-dashboard-widget-size'
  105. ,name: 'size'
  106. ,hiddenName: 'size'
  107. ,id: 'modx-dashboard-widget-size'
  108. ,fieldLabel: _('widget_size')
  109. ,description: _('widget_size_desc')
  110. ,anchor: '100%'
  111. ,value: config.record.size || 'half'
  112. },{
  113. xtype: MODx.expandHelp ? 'label' : 'hidden'
  114. ,forId: 'modx-dashboard-widget-size'
  115. ,html: _('widget_size_desc')
  116. ,cls: 'desc-under'
  117. },{
  118. xtype: 'modx-combo-namespace'
  119. ,name: 'namespace'
  120. ,hiddenName: 'namespace'
  121. ,id: 'modx-dashboard-widget-namespace'
  122. ,fieldLabel: _('widget_namespace')
  123. ,description: _('widget_namespace_desc')
  124. ,anchor: '100%'
  125. ,value: config.record.namespace || 'core'
  126. },{
  127. xtype: MODx.expandHelp ? 'label' : 'hidden'
  128. ,forId: 'modx-dashboard-widget-namespace'
  129. ,html: _('widget_namespace_desc')
  130. ,cls: 'desc-under'
  131. },{
  132. xtype: 'textfield'
  133. ,name: 'lexicon'
  134. ,hiddenName: 'lexicon'
  135. ,id: 'modx-dashboard-widget-lexicon'
  136. ,fieldLabel: _('lexicon')
  137. ,description: _('widget_lexicon_desc')
  138. ,anchor: '100%'
  139. ,value: config.record.lexicon || 'core:dashboards'
  140. },{
  141. xtype: MODx.expandHelp ? 'label' : 'hidden'
  142. ,forId: 'modx-dashboard-widget-lexicon'
  143. ,html: _('widget_lexicon_desc')
  144. ,cls: 'desc-under'
  145. }]
  146. }]
  147. },{
  148. xtype: 'panel'
  149. ,border: false
  150. ,layout: 'form'
  151. // ,cls:'main-wrapper'
  152. ,style: 'padding-top: 15px' // new form panel, first label is not gonna have top padding
  153. ,labelAlign: 'top'
  154. ,items: [/*{
  155. html: '<h4>'+_('widget_content')+'</h4>'
  156. ,border: false
  157. ,anchor: '100%'
  158. },*/{
  159. xtype: 'textarea'
  160. ,name: 'content'
  161. ,fieldLabel: _('widget_content')
  162. // ,hideLabel: true
  163. ,anchor: '100%'
  164. ,height: 400
  165. }]
  166. }]
  167. });
  168. if (!Ext.isEmpty(config.record.id)) {
  169. itms.push({
  170. title: _('dashboards')
  171. ,hideMode: 'offsets'
  172. ,id: 'modx-panel-widget-dashboards'
  173. ,items: [{
  174. html: '<p>'+_('widget_dashboards.intro_msg')+'</p>'
  175. ,xtype: 'modx-description'
  176. },{
  177. xtype: 'modx-grid-dashboard-widget-dashboards'
  178. ,cls: 'main-wrapper'
  179. ,preventRender: true
  180. ,widget: config.record.id
  181. ,autoHeight: true
  182. ,listeners: {
  183. 'afterRemoveRow': {fn:this.markDirty,scope:this}
  184. ,'updateRole': {fn:this.markDirty,scope:this}
  185. ,'addMember': {fn:this.markDirty,scope:this}
  186. }
  187. }]
  188. });
  189. }
  190. Ext.applyIf(config,{
  191. id: 'modx-panel-dashboard-widget'
  192. ,url: MODx.config.connector_url
  193. ,baseParams: {
  194. action: 'system/dashboard/widget/update'
  195. }
  196. ,cls: 'container'
  197. ,defaults: { collapsible: false ,autoHeight: true }
  198. ,items: [{
  199. html: _('widget_new')
  200. ,id: 'modx-dashboard-widget-header'
  201. ,xtype: 'modx-header'
  202. },{
  203. xtype: 'modx-tabs'
  204. ,defaults: {
  205. autoHeight: true
  206. ,border: false
  207. }
  208. //,border: true
  209. ,id: 'modx-dashboard-widget-tabs'
  210. ,forceLayout: true
  211. ,deferredRender: false
  212. ,stateful: true
  213. ,stateId: 'modx-dashboard-widget-tabpanel' + ((Ext.isEmpty(config.record.id)) ? '-new' : '')
  214. ,stateEvents: ['tabchange']
  215. ,getState:function() {
  216. return {activeTab:this.items.indexOf(this.getActiveTab())};
  217. }
  218. ,items: itms
  219. }]
  220. ,listeners: {
  221. 'setup': {fn:this.setup,scope:this}
  222. ,'success': {fn:this.success,scope:this}
  223. ,'beforeSubmit': {fn:this.beforeSubmit,scope:this}
  224. }
  225. });
  226. MODx.panel.DashboardWidget.superclass.constructor.call(this,config);
  227. };
  228. Ext.extend(MODx.panel.DashboardWidget,MODx.FormPanel,{
  229. initialized: false
  230. ,setup: function() {
  231. if (this.initialized) { return false; }
  232. if (Ext.isEmpty(this.config.record.id)) {
  233. this.fireEvent('ready');
  234. return false;
  235. }
  236. this.getForm().setValues(this.config.record);
  237. Ext.defer(function() {
  238. Ext.get('modx-dashboard-widget-header').update(_('widget')+': '+this.config.record.name_trans);
  239. }, 250, this);
  240. var d = this.config.record.dashboards;
  241. var g = Ext.getCmp('modx-grid-dashboard-widget-dashboards');
  242. if (d && g) {
  243. g.getStore().loadData(d);
  244. }
  245. this.fireEvent('ready',this.config.record);
  246. MODx.fireEvent('ready');
  247. this.initialized = true;
  248. }
  249. ,beforeSubmit: function(o) {
  250. var g = Ext.getCmp('modx-grid-dashboard-widget-dashboards');
  251. if (g) {
  252. Ext.apply(o.form.baseParams,{
  253. dashboards: g.encode()
  254. });
  255. }
  256. }
  257. ,success: function(o) {
  258. if (Ext.isEmpty(this.config.record) || Ext.isEmpty(this.config.record.id)) {
  259. MODx.loadPage('system/dashboards/widget/update', 'id='+o.result.object.id);
  260. } else {
  261. Ext.getCmp('modx-abtn-save').setDisabled(false);
  262. var g = Ext.getCmp('modx-grid-dashboard-widget-dashboards');
  263. if (g) { g.getStore().commitChanges(); }
  264. }
  265. }
  266. });
  267. Ext.reg('modx-panel-dashboard-widget',MODx.panel.DashboardWidget);
  268. MODx.grid.DashboardWidgetDashboards = function(config) {
  269. config = config || {};
  270. Ext.applyIf(config,{
  271. id: 'modx-grid-dashboard-widget-dashboards'
  272. ,url: MODx.config.connector_url
  273. ,action: 'system/dashboard/getList'
  274. ,fields: ['id','name','description']
  275. ,autoHeight: true
  276. ,primaryKey: 'widget'
  277. ,columns: [{
  278. header: _('dashboard')
  279. ,dataIndex: 'name'
  280. ,width: 200
  281. },{
  282. header: _('description')
  283. ,dataIndex: 'description'
  284. ,width: 300
  285. }]
  286. });
  287. MODx.grid.DashboardWidgetDashboards.superclass.constructor.call(this,config);
  288. this.propRecord = Ext.data.Record.create(['id','name','description']);
  289. };
  290. Ext.extend(MODx.grid.DashboardWidgetDashboards,MODx.grid.LocalGrid);
  291. Ext.reg('modx-grid-dashboard-widget-dashboards',MODx.grid.DashboardWidgetDashboards);
  292. /* seems unused */
  293. MODx.window.WidgetAddDashboard = function(config) {
  294. config = config || {};
  295. this.ident = config.ident || 'dbugadd'+Ext.id();
  296. Ext.applyIf(config,{
  297. title: _('widget_place')
  298. // ,frame: true
  299. ,id: 'modx-window-widget-add-dashboard'
  300. ,fields: [{
  301. xtype: 'modx-combo-dashboard'
  302. ,fieldLabel: _('dashboard')
  303. ,name: 'dashboard'
  304. ,hiddenName: 'dashboard'
  305. ,id: 'modx-'+this.ident+'-dashboard'
  306. ,allowBlank: false
  307. ,msgTarget: 'under'
  308. }]
  309. });
  310. MODx.window.WidgetAddDashboard.superclass.constructor.call(this,config);
  311. };
  312. Ext.extend(MODx.window.WidgetAddDashboard,MODx.Window,{
  313. submit: function() {
  314. var f = this.fp.getForm();
  315. var fld = f.findField('widget');
  316. var g = Ext.getCmp('modx-grid-dashboard-widget-dashboards');
  317. var s = g.getStore();
  318. if (s.find('widget',fld.getValue()) != -1) {
  319. fld.markInvalid(_('dashboard_widget_err_placed'));
  320. return false;
  321. }
  322. if (id != '' && this.fp.getForm().isValid()) {
  323. var r = s.getTotalCount();
  324. if (this.fireEvent('success',{
  325. widget: fld.getValue()
  326. ,dashboard: g.config.dashboard
  327. ,name: fld.getRawValue()
  328. ,rank: r
  329. })) {
  330. this.fp.getForm().reset();
  331. this.hide();
  332. return true;
  333. }
  334. } else {
  335. MODx.msg.alert(_('error'),_('dashboard_err_ns'));
  336. }
  337. return true;
  338. }
  339. });
  340. Ext.reg('modx-window-widget-add-dashboard',MODx.window.WidgetAddDashboard);
  341. MODx.combo.DashboardWidgetType = function(config) {
  342. config = config || {};
  343. Ext.applyIf(config,{
  344. store: new Ext.data.SimpleStore({
  345. fields: ['d','v']
  346. ,data: [
  347. [_('widget_html'),'html']
  348. ,[_('widget_file'),'file']
  349. ,[_('widget_snippet'),'snippet']
  350. ,[_('widget_php'),'php']
  351. ]
  352. })
  353. ,name: 'type'
  354. ,hiddenName: 'type'
  355. ,displayField: 'd'
  356. ,valueField: 'v'
  357. ,mode: 'local'
  358. ,triggerAction: 'all'
  359. ,editable: false
  360. ,selectOnFocus: false
  361. ,preventRender: true
  362. ,forceSelection: true
  363. ,enableKeyEvents: true
  364. });
  365. MODx.combo.DashboardWidgetType.superclass.constructor.call(this,config);
  366. };
  367. Ext.extend(MODx.combo.DashboardWidgetType,MODx.combo.ComboBox);
  368. Ext.reg('modx-combo-dashboard-widget-type',MODx.combo.DashboardWidgetType);
  369. MODx.combo.DashboardWidgetSize = function(config) {
  370. config = config || {};
  371. Ext.applyIf(config,{
  372. store: new Ext.data.SimpleStore({
  373. fields: ['d','v']
  374. ,data: [
  375. [_('widget_size_half'),'half']
  376. ,[_('widget_size_full'),'full']
  377. ,[_('widget_size_double'),'double']
  378. ]
  379. })
  380. ,name: 'size'
  381. ,hiddenName: 'size'
  382. ,displayField: 'd'
  383. ,valueField: 'v'
  384. ,mode: 'local'
  385. ,triggerAction: 'all'
  386. ,editable: false
  387. ,selectOnFocus: false
  388. ,preventRender: true
  389. ,forceSelection: true
  390. ,enableKeyEvents: true
  391. });
  392. MODx.combo.DashboardWidgetSize.superclass.constructor.call(this,config);
  393. };
  394. Ext.extend(MODx.combo.DashboardWidgetSize,MODx.combo.ComboBox);
  395. Ext.reg('modx-combo-dashboard-widget-size',MODx.combo.DashboardWidgetSize);