/pimcore/static/js/pimcore/asset/listfolder.js

https://github.com/benawv/bogor-city-guide · JavaScript · 323 lines · 259 code · 46 blank · 18 comment · 6 complexity · 44af67adfafc738e387f876a756b9548 MD5 · raw file

  1. /**
  2. * Pimcore
  3. *
  4. * LICENSE
  5. *
  6. * This source file is subject to the new BSD license that is bundled
  7. * with this package in the file LICENSE.txt.
  8. * It is also available through the world-wide-web at this URL:
  9. * http://www.pimcore.org/license
  10. *
  11. * @copyright Copyright (c) 2009-2013 pimcore GmbH (http://www.pimcore.org)
  12. * @license http://www.pimcore.org/license New BSD License
  13. */
  14. pimcore.registerNS("pimcore.asset.listfolder");
  15. pimcore.asset.listfolder = Class.create({
  16. onlyDirectChildren: false,
  17. initialize: function (element) {
  18. this.element = element;
  19. },
  20. getLayout: function () {
  21. this.filterField = new Ext.form.TextField({
  22. xtype: "textfield",
  23. width: 200,
  24. style: "margin: 0 10px 0 0;",
  25. enableKeyEvents: true,
  26. value: this.preconfiguredFilter,
  27. listeners: {
  28. "keydown" : function (field, key) {
  29. if (key.getKey() == key.ENTER) {
  30. var input = field;
  31. this.store.baseParams.filter = input.getValue();
  32. this.store.load();
  33. }
  34. }.bind(this)
  35. }
  36. });
  37. var proxy = new Ext.data.HttpProxy({
  38. url: "/admin/asset/grid-proxy/",
  39. method: 'post'
  40. });
  41. var readerFields = [
  42. {name: 'id', allowBlank: true},
  43. {name: 'fullpath', allowBlank: true},
  44. {name: 'type', allowBlank: true},
  45. {name: 'creationDate', allowBlank: true},
  46. {name: 'modificationDate', allowBlank: true},
  47. {name: 'size', allowBlank: true},
  48. {name: 'idPath', allowBlank: true}
  49. ];
  50. this.selectionColumn = new Ext.grid.CheckboxSelectionModel();
  51. var typesColumns = [
  52. this.selectionColumn,
  53. {header: t("id"), sortable: true, dataIndex: 'id', editable: false, width: 40},
  54. {header: t("filename"), sortable: true, dataIndex: 'fullpath', editable: false},
  55. {header: t("type"), sortable: true, dataIndex: 'type', editable: false, width: 50}
  56. ];
  57. typesColumns.push({header: t("creationDate"), sortable: true, dataIndex: 'creationDate', editable: false,
  58. renderer: function(d) {
  59. var date = new Date(d * 1000);
  60. return date.format("Y-m-d H:i:s");
  61. }});
  62. typesColumns.push({header: t("modificationDate"), sortable: true, dataIndex: 'modificationDate', editable: false,
  63. renderer: function(d) {
  64. var date = new Date(d * 1000);
  65. return date.format("Y-m-d H:i:s");
  66. }});
  67. typesColumns.push(
  68. {header: t("size"), sortable: false, dataIndex: 'size', editable: false}
  69. );
  70. var reader = new Ext.data.JsonReader({
  71. totalProperty: 'total',
  72. successProperty: 'success',
  73. root: 'data',
  74. idProperty: 'key'
  75. }, readerFields);
  76. // var writer = new Ext.data.JsonWriter();
  77. var itemsPerPage = 20;
  78. this.store = new Ext.data.Store({
  79. id: 'translation_store',
  80. restful: false,
  81. proxy: proxy,
  82. reader: reader,
  83. // writer: writer,
  84. remoteSort: true,
  85. listeners: {
  86. write : function(store, action, result, response, rs) {
  87. }
  88. },
  89. filter: this.filterField,
  90. baseParams: {
  91. limit: itemsPerPage,
  92. test: "test",
  93. folderId: this.element.data.id
  94. }
  95. });
  96. // this.store.load();
  97. this.pagingtoolbar = new Ext.PagingToolbar({
  98. pageSize: itemsPerPage,
  99. store: this.store,
  100. displayInfo: true,
  101. displayMsg: '{0} - {1} / {2}',
  102. emptyMsg: t("no_assets_found")
  103. });
  104. // add per-page selection
  105. this.pagingtoolbar.add("-");
  106. this.pagingtoolbar.add(new Ext.Toolbar.TextItem({
  107. text: t("items_per_page")
  108. }));
  109. this.pagingtoolbar.add(new Ext.form.ComboBox({
  110. store: [
  111. [10, "10"],
  112. [20, "20"],
  113. [40, "40"],
  114. [60, "60"],
  115. [80, "80"],
  116. [100, "100"]
  117. ],
  118. mode: "local",
  119. width: 50,
  120. value: 20,
  121. triggerAction: "all",
  122. listeners: {
  123. select: function (box, rec, index) {
  124. this.pagingtoolbar.pageSize = intval(rec.data.field1);
  125. this.pagingtoolbar.moveFirst();
  126. }.bind(this)
  127. }
  128. }));
  129. this.checkboxOnlyDirectChildren = new Ext.form.Checkbox({
  130. name: "onlyDirectChildren",
  131. style: "margin-bottom: 5px; margin-left: 5px",
  132. checked: this.onlyDirectChildren,
  133. listeners: {
  134. "check" : function (field, checked) {
  135. this.gridfilters.clearFilters();
  136. this.store.baseparams = {};
  137. this.store.setBaseParam("only_direct_children", checked);
  138. this.onlyDirectChildren = checked;
  139. this.pagingtoolbar.moveFirst();
  140. }.bind(this)
  141. }
  142. });
  143. this.gridfilters = this.getGridFilters();
  144. this.grid = new Ext.grid.EditorGridPanel({
  145. title: "List",
  146. iconCls: "pimcore_icon_table_tab",
  147. frame: false,
  148. autoScroll: true,
  149. store: this.store,
  150. columnLines: true,
  151. stripeRows: true,
  152. columns : typesColumns,
  153. plugins: [this.gridfilters],
  154. trackMouseOver: true,
  155. bbar: this.pagingtoolbar,
  156. sm: this.selectionColumn,
  157. viewConfig: {
  158. forceFit: true
  159. },
  160. listeners: {
  161. activate: function() {
  162. this.store.setBaseParam("only_direct_children", this.onlyDirectChildren);
  163. this.store.load();
  164. }.bind(this),
  165. rowdblclick: function(grid, rowIndex, e) {
  166. var data = this.store.getAt(rowIndex).data;
  167. pimcore.helpers.openAsset(data.id);
  168. }.bind(this)
  169. },
  170. tbar: [
  171. "->"
  172. ,this.checkboxOnlyDirectChildren,t("only_children")
  173. ]
  174. });
  175. this.grid.on("rowcontextmenu", this.onRowContextmenu);
  176. return this.grid;
  177. },
  178. getGridFilters: function() {
  179. var configuredFilters = [{
  180. type: "date",
  181. dataIndex: "creationDate"
  182. },{
  183. type: "date",
  184. dataIndex: "modificationDate"
  185. },{
  186. type:"string",
  187. dataIndex: "fullpath"
  188. },{
  189. type:"string",
  190. dataIndex: "type"
  191. },{
  192. type:"string",
  193. dataIndex: "size"
  194. }
  195. ];
  196. // filters
  197. var gridfilters = new Ext.ux.grid.GridFilters({
  198. encode: true,
  199. local: false,
  200. filters: configuredFilters
  201. });
  202. return gridfilters;
  203. },
  204. onRowContextmenu: function (grid, rowIndex, event) {
  205. $(grid.getView().getRow(rowIndex)).animate( { backgroundColor: '#E0EAEE' }, 100).animate( {
  206. backgroundColor: '#fff' }, 400);
  207. var menu = new Ext.menu.Menu();
  208. var data = grid.getStore().getAt(rowIndex);
  209. var selectedRows = grid.getSelectionModel().getSelections();
  210. if (selectedRows.length <= 1) {
  211. menu.add(new Ext.menu.Item({
  212. text: t('open'),
  213. iconCls: "pimcore_icon_open",
  214. handler: function (data) {
  215. pimcore.helpers.openAsset(data.data.id, data.data.type);
  216. }.bind(this, data)
  217. }));
  218. menu.add(new Ext.menu.Item({
  219. text: t('show_in_tree'),
  220. iconCls: "pimcore_icon_show_in_tree",
  221. handler: function (data) {
  222. try {
  223. try {
  224. Ext.getCmp("pimcore_panel_tree_assets").expand();
  225. var tree = pimcore.globalmanager.get("layout_asset_tree");
  226. pimcore.helpers.selectPathInTree(tree.tree, data.data.idPath);
  227. } catch (e) {
  228. console.log(e);
  229. }
  230. } catch (e2) { console.log(e2); }
  231. }.bind(grid, data)
  232. }));
  233. menu.add(new Ext.menu.Item({
  234. text: t('delete'),
  235. iconCls: "pimcore_icon_delete",
  236. handler: function (data) {
  237. var store = this.getStore();
  238. pimcore.helpers.deleteAsset(data.data.id, function() {
  239. this.getStore().reload();
  240. pimcore.globalmanager.get("layout_asset_tree").tree.getRootNode().reload();
  241. }.bind(this));
  242. }.bind(grid, data)
  243. }));
  244. } else {
  245. menu.add(new Ext.menu.Item({
  246. text: t('open_selected'),
  247. iconCls: "pimcore_icon_open",
  248. handler: function (data) {
  249. var selectedRows = grid.getSelectionModel().getSelections();
  250. for (var i = 0; i < selectedRows.length; i++) {
  251. var data = selectedRows[i].data;
  252. pimcore.helpers.openAsset(data.id, data.type);
  253. }
  254. }.bind(this, data)
  255. }));
  256. menu.add(new Ext.menu.Item({
  257. text: t('delete_selected'),
  258. iconCls: "pimcore_icon_delete",
  259. handler: function (data) {
  260. var ids = [];
  261. var selectedRows = grid.getSelectionModel().getSelections();
  262. for (var i = 0; i < selectedRows.length; i++) {
  263. ids.push(selectedRows[i].data.id);
  264. }
  265. ids = ids.join(',');
  266. pimcore.helpers.deleteAsset(ids, function() {
  267. this.getStore().reload();
  268. pimcore.globalmanager.get("layout_asset_tree").tree.getRootNode().reload();
  269. }.bind(this)
  270. );
  271. }.bind(grid, data)
  272. }));
  273. }
  274. event.stopEvent();
  275. menu.showAt(event.getXY());
  276. }
  277. });