table.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569
  1. // form
  2. test( "table test", function() {
  3. App.i18n.set('de-de')
  4. $('#table').append('<hr><h1>table simple I</h1><div id="table1"></div>')
  5. var el = $('#table1')
  6. App.TicketPriority.refresh( [
  7. {
  8. id: 1,
  9. name: '1 low',
  10. note: 'some note 1',
  11. active: true,
  12. created_at: '2014-06-10T11:17:34.000Z',
  13. },
  14. {
  15. id: 2,
  16. name: '2 normal',
  17. note: 'some note 2',
  18. active: false,
  19. created_at: '2014-06-10T10:17:34.000Z',
  20. },
  21. ] )
  22. var rowClick = function (id, e) {
  23. e.preventDefault()
  24. console.log('rowClick', id, e.target)
  25. };
  26. var rowDblClick = function (id, e) {
  27. e.preventDefault()
  28. console.log('rowDblClick', id, e.target)
  29. };
  30. var rowMouseover = function (id, e) {
  31. e.preventDefault()
  32. console.log('rowMouseover', id, e.target)
  33. };
  34. var rowMouseout = function (id, e) {
  35. e.preventDefault()
  36. console.log('rowMouseout', id, e.target)
  37. };
  38. var colClick = function (id, e) {
  39. e.preventDefault()
  40. console.log('colClick', id, e.target)
  41. };
  42. var colDblClick = function (id, e) {
  43. e.preventDefault()
  44. console.log('colDblClick', id, e.target)
  45. };
  46. var colMouseover = function (id, e) {
  47. e.preventDefault()
  48. console.log('colMouseover', id, e.target)
  49. };
  50. var colMouseout = function (id, e) {
  51. e.preventDefault()
  52. console.log('colMouseout', id, e.target)
  53. };
  54. new App.ControllerTable({
  55. el: el,
  56. overview: ['name', 'created_at', 'active'],
  57. model: App.TicketPriority,
  58. objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'}),
  59. checkbox: false,
  60. radio: false,
  61. bindRow: {
  62. events: {
  63. 'click': rowClick,
  64. 'mouseover': rowMouseover,
  65. 'mouseout': rowMouseout,
  66. 'dblclick': rowDblClick,
  67. }
  68. },
  69. bindCol: {
  70. name: {
  71. events: {
  72. 'click': colClick,
  73. 'mouseover': colMouseover,
  74. 'mouseout': colMouseout,
  75. 'dblclick': colDblClick,
  76. }
  77. },
  78. created_at: {
  79. events: {
  80. 'mouseover': colMouseover,
  81. 'mouseout': colMouseout,
  82. }
  83. }
  84. },
  85. })
  86. equal( el.find('table > thead > tr').length, 1, 'row count')
  87. equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
  88. equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
  89. equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
  90. equal( el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
  91. equal( el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig', 'check row 1')
  92. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 1')
  93. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
  94. equal( el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
  95. equal( el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '2 normal', 'check row 2')
  96. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 2')
  97. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'false', 'check row 2')
  98. $('#table').append('<hr><h1>table simple II</h1><div id="table2"></div>')
  99. el = $('#table2')
  100. new App.ControllerTable({
  101. el: el,
  102. overview: ['name', 'created_at', 'active'],
  103. model: App.TicketPriority,
  104. objects: App.TicketPriority.search({sortBy:'name', order: 'DESC'}),
  105. checkbox: false,
  106. radio: false,
  107. })
  108. equal( el.find('table > thead > tr').length, 1, 'row count')
  109. equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
  110. equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
  111. equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
  112. equal( el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
  113. equal( el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal', 'check row 1')
  114. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 1')
  115. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'false', 'check row 1')
  116. equal( el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
  117. equal( el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '1 niedrig', 'check row 2')
  118. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 2')
  119. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
  120. $('#table').append('<hr><h1>table simple III</h1><div id="table3"></div>')
  121. el = $('#table3')
  122. new App.ControllerTable({
  123. el: el,
  124. model: App.TicketPriority,
  125. objects: App.TicketPriority.search({sortBy:'created_at', order: 'DESC'}),
  126. checkbox: false,
  127. radio: false,
  128. })
  129. equal( el.find('table > thead > tr').length, 1, 'row count')
  130. equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
  131. notEqual( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
  132. notEqual( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
  133. equal( el.find('tbody > tr:nth-child(2) > td').length, 1, 'check row 2')
  134. equal( el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '2 normal', 'check row 2')
  135. notEqual( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '?', 'check row 2')
  136. notEqual( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
  137. equal( el.find('tbody > tr:nth-child(1) > td').length, 1, 'check row 1')
  138. equal( el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig', 'check row 1')
  139. notEqual( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '?', 'check row 1')
  140. notEqual( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'false', 'check row 1')
  141. App.Group.refresh( [
  142. {
  143. id: 1,
  144. name: 'group 1',
  145. active: true,
  146. created_at: '2014-06-10T11:17:34.000Z',
  147. },
  148. {
  149. id: 2,
  150. name: 'group 2',
  151. active: true,
  152. created_at: '2014-06-10T11:17:34.000Z',
  153. },
  154. ])
  155. App.User.refresh( [
  156. {
  157. id: 55,
  158. login: 'login55',
  159. firstname: 'firstname55',
  160. lastname: 'lastname55',
  161. email: 'email55',
  162. active: true,
  163. created_at: '2014-06-10T11:17:34.000Z',
  164. },
  165. {
  166. id: 56,
  167. login: 'login56',
  168. firstname: 'firstname56',
  169. lastname: 'lastname56',
  170. email: 'email56',
  171. active: true,
  172. created_at: '2014-06-10T11:17:34.000Z',
  173. },
  174. ])
  175. App.TicketState.refresh( [
  176. {
  177. id: 1,
  178. name: 'new',
  179. active: true,
  180. created_at: '2014-06-10T11:17:34.000Z',
  181. },
  182. {
  183. id: 2,
  184. name: 'open',
  185. note: 'some note 2',
  186. active: false,
  187. created_at: '2014-06-10T10:17:34.000Z',
  188. },
  189. ])
  190. App.Ticket.refresh( [
  191. {
  192. id: 1,
  193. title: 'some title 1',
  194. number: '4711',
  195. priority_id: 1,
  196. owner_id: 55,
  197. customer_id: 56,
  198. state_id: 1,
  199. group_id: 2,
  200. created_at: '2014-06-10T11:17:34.000Z',
  201. },
  202. {
  203. id: 3,
  204. title: 'some title 3',
  205. number: '4713',
  206. priority_id: 2,
  207. owner_id: 56,
  208. state_id: 1,
  209. group_id: 2,
  210. created_at: '2014-07-11T11:19:34.000Z',
  211. },
  212. {
  213. id: 2,
  214. title: 'some title 2',
  215. number: '4712',
  216. priority_id: 1,
  217. state_id: 2,
  218. group_id: 1,
  219. created_at: '2014-06-10T11:19:34.000Z',
  220. },
  221. ])
  222. $('#table').append('<hr><h1>table complex I</h1><div id="table4"></div>')
  223. el = $('#table4')
  224. new App.ControllerTable({
  225. el: el,
  226. overview: ['number', 'title', 'owner', 'customer', 'priority', 'group', 'state', 'created_at'],
  227. model: App.Ticket,
  228. objects: App.Ticket.search({sortBy:'created_at', order: 'DESC'}),
  229. checkbox: true,
  230. })
  231. equal( el.find('table > thead > tr').length, 1, 'row count')
  232. equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), '', 'check header')
  233. equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), '#', 'check header')
  234. equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Titel', 'check header')
  235. equal( el.find('table > thead > tr > th:nth-child(4)').text().trim(), 'Besitzer', 'check header')
  236. equal( el.find('table > thead > tr > th:nth-child(5)').text().trim(), 'Kunde', 'check header')
  237. equal( el.find('table > thead > tr > th:nth-child(6)').text().trim(), 'Priorität', 'check header')
  238. equal( el.find('table > thead > tr > th:nth-child(7)').text().trim(), 'Gruppe', 'check header')
  239. equal( el.find('table > thead > tr > th:nth-child(8)').text().trim(), 'Status', 'check header')
  240. equal( el.find('table > thead > tr > th:nth-child(9)').text().trim(), 'Erstellt am', 'check header')
  241. equal( el.find('tbody > tr:nth-child(1) > td').length, 9, 'check row 1')
  242. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) input').val(), '3', 'check row 1')
  243. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) input').prop('checked'), '', 'check row 1')
  244. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), '', 'check row 1')
  245. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '4713', 'check row 1')
  246. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'some title 3', 'check row 1')
  247. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(4)').text().trim(), 'firstname56 lastname56', 'check row 2')
  248. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(5)').text().trim(), '-', 'check row 2')
  249. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(6)').text().trim(), '2 normal', 'check row 1')
  250. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(7)').text().trim(), 'group 2', 'check row 1')
  251. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(8)').text().trim(), 'neu', 'check row 1')
  252. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(9)').text().trim(), '11.07.2014', 'check row 1')
  253. equal( el.find('tbody > tr:nth-child(2) > td').length, 9, 'check row 2')
  254. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').val(), '2', 'check row 2')
  255. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), '', 'check row 2')
  256. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), '', 'check row 2')
  257. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '4712', 'check row 2')
  258. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'some title 2', 'check row 2')
  259. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(4)').text().trim(), '-', 'check row 2')
  260. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(5)').text().trim(), '-', 'check row 2')
  261. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(6)').text().trim(), '1 niedrig', 'check row 2')
  262. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(7)').text().trim(), 'group 1', 'check row 2')
  263. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(8)').text().trim(), 'offen', 'check row 2')
  264. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(9)').text().trim(), '10.06.2014', 'check row 2')
  265. equal( el.find('tbody > tr:nth-child(3) > td').length, 9, 'check row 3')
  266. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) input').val(), '1', 'check row 3')
  267. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) input').prop('checked'), '', 'check row 3')
  268. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1)').text().trim(), '', 'check row 3')
  269. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '4711', 'check row 3')
  270. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'some title 1', 'check row 3')
  271. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(4)').text().trim(), 'firstname55 lastname55', 'check row 2')
  272. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(5)').text().trim(), 'firstname56 lastname56', 'check row 2')
  273. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(6)').text().trim(), '1 niedrig', 'check row 3')
  274. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(7)').text().trim(), 'group 2', 'check row 3')
  275. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(8)').text().trim(), 'neu', 'check row 3')
  276. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(9)').text().trim(), '10.06.2014', 'check row 3')
  277. el.find('input[name="bulk_all"]').click()
  278. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) input').prop('checked'), true, 'check row 1')
  279. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) input').val(), '3', 'check row 1')
  280. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), true, 'check row 2')
  281. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').val(), '2', 'check row 2')
  282. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) input').prop('checked'), true, 'check row 3')
  283. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) input').val(), '1', 'check row 3')
  284. $('#table').append('<hr><h1>table complex II</h1><div id="table5"></div>')
  285. el = $('#table5')
  286. var clickCheckbox = function (id, checked, e) {
  287. console.log('clickCheckbox', id, checked, e.target)
  288. };
  289. new App.ControllerTable({
  290. el: el,
  291. overview: ['number', 'title', 'owner', 'customer', 'priority', 'group', 'state', 'created_at'],
  292. model: App.Ticket,
  293. objects: App.Ticket.search({sortBy:'created_at', order: 'DESC'}),
  294. checkbox: true,
  295. groupBy: 'group',
  296. bindCheckbox: {
  297. events: {
  298. 'click': clickCheckbox,
  299. }
  300. },
  301. })
  302. equal( el.find('table > thead > tr').length, 1, 'row count')
  303. equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), '', 'check header')
  304. equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), '#', 'check header')
  305. equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Titel', 'check header')
  306. equal( el.find('table > thead > tr > th:nth-child(4)').text().trim(), 'Besitzer', 'check header')
  307. equal( el.find('table > thead > tr > th:nth-child(5)').text().trim(), 'Kunde', 'check header')
  308. equal( el.find('table > thead > tr > th:nth-child(6)').text().trim(), 'Priorität', 'check header')
  309. equal( el.find('table > thead > tr > th:nth-child(7)').text().trim(), 'Status', 'check header')
  310. equal( el.find('table > thead > tr > th:nth-child(8)').text().trim(), 'Erstellt am', 'check header')
  311. equal( el.find('tbody > tr:nth-child(1) > td').length, 1, 'check row 1')
  312. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), 'group 1', 'check row 1')
  313. equal( el.find('tbody > tr:nth-child(2) > td').length, 8, 'check row 2')
  314. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').val(), '2', 'check row 2')
  315. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), '', 'check row 2')
  316. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), '', 'check row 2')
  317. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '4712', 'check row 2')
  318. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'some title 2', 'check row 2')
  319. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(4)').text().trim(), '-', 'check row 2')
  320. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(5)').text().trim(), '-', 'check row 2')
  321. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(6)').text().trim(), '1 niedrig', 'check row 2')
  322. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(7)').text().trim(), 'offen', 'check row 2')
  323. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(8)').text().trim(), '10.06.2014', 'check row 2')
  324. equal( el.find('tbody > tr:nth-child(3) > td').length, 1, 'check row 3')
  325. equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1)').text().trim(), 'group 2', 'check row 4')
  326. equal( el.find('tbody > tr:nth-child(4) > td').length, 8, 'check row 4')
  327. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').val(), '3', 'check row 4')
  328. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').prop('checked'), '', 'check row 4')
  329. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1)').text().trim(), '', 'check row 4')
  330. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(2)').text().trim(), '4713', 'check row 4')
  331. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(3)').text().trim(), 'some title 3', 'check row 4')
  332. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(4)').text().trim(), 'firstname56 lastname56', 'check row 2')
  333. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(5)').text().trim(), '-', 'check row 2')
  334. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(6)').text().trim(), '2 normal', 'check row 4')
  335. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(7)').text().trim(), 'neu', 'check row 4')
  336. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(8)').text().trim(), '11.07.2014', 'check row 4')
  337. el.find('input[name="bulk"]:eq(1)').click()
  338. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), '', 'check row 2')
  339. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').val(), '2', 'check row 1')
  340. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').prop('checked'), true, 'check row 4')
  341. equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').val(), '3', 'check row 4')
  342. equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').prop('checked'), '', 'check row 5')
  343. equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').val(), '1', 'check row 5')
  344. el.find('tbody > tr:nth-child(5) > td:nth-child(1) label').click()
  345. equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').prop('checked'), true, 'check row 5')
  346. equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').val(), '1', 'check row 5')
  347. });
  348. test( "table test 2", function() {
  349. App.i18n.set('de-de')
  350. $('#table').append('<hr><h1>table with hash</h1><div id="table-hash1"></div>')
  351. var el = $('#table-hash1')
  352. App.Group.refresh( [
  353. {
  354. id: 5,
  355. name: 'group 5',
  356. active: true,
  357. created_at: '2014-06-10T11:17:34.000Z',
  358. },
  359. ])
  360. App.Channel.configure_delete = true
  361. App.Channel.configure_attributes = [
  362. { name: 'adapter', display: 'Type', tag: 'select', multiple: false, null: false, options: { IMAP: 'IMAP', POP3: 'POP3' } },
  363. { name: 'options::host', display: 'Host', tag: 'input', type: 'text', limit: 120, null: true, autocapitalize: false },
  364. { name: 'options::user', display: 'User', tag: 'input', type: 'text', limit: 120, null: true, autocapitalize: false },
  365. { name: 'options::password', display: 'Password', tag: 'input', type: 'password', limit: 120, null: true, autocapitalize: false },
  366. { name: 'options::ssl', display: 'SSL', tag: 'select', multiple: false, null: true, options: { true: 'yes', false: 'no' }, translate: true, default: true},
  367. { name: 'options::folder', display: 'Folder', tag: 'input', type: 'text', limit: 120, null: true, autocapitalize: false },
  368. { name: 'group_id', display: 'Group', tag: 'select', multiple: false, null: false, nulloption: true, relation: 'Group' },
  369. { name: 'active', display: 'Active', tag: 'select', multiple: false, null: false, options: { true: 'yes', false: 'no' }, translate: true, default: true },
  370. ]
  371. App.Channel.refresh( [
  372. {
  373. id: 1,
  374. adapter: 'adapter1',
  375. options: {
  376. host: 'host1',
  377. user: 'user1',
  378. },
  379. group_id: 5,
  380. active: true,
  381. created_at: '2014-06-10T11:17:34.000Z',
  382. },
  383. {
  384. id: 2,
  385. adapter: 'adapter2',
  386. options: {
  387. host: 'host2',
  388. user: 'user2',
  389. },
  390. group_id: 5,
  391. active: true,
  392. created_at: '2014-06-10T11:17:34.000Z',
  393. },
  394. ] )
  395. new App.ControllerTable({
  396. el: el,
  397. overview: ['adapter', 'options::host', 'options::user', 'active'],
  398. model: App.Channel,
  399. objects: App.Channel.search({sortBy:'adapter', order: 'ASC'}),
  400. })
  401. equal( el.find('table > thead > tr').length, 1, 'row count')
  402. equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Typ', 'check header')
  403. equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Host', 'check header')
  404. equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Benutzer', 'check header')
  405. equal( el.find('table > thead > tr > th:nth-child(4)').text().trim(), 'Aktiv', 'check header')
  406. equal( el.find('table > thead > tr > th:nth-child(5)').text().trim(), 'Löschen', 'check header')
  407. equal( el.find('tbody > tr:nth-child(1) > td').length, 5, 'check row 1')
  408. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), 'adapter1', 'check row 1')
  409. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), 'host1', 'check row 1')
  410. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'user1', 'check row 1')
  411. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(4)').text().trim(), 'ja', 'check row 1')
  412. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(5)').text().trim(), '', 'check row 1')
  413. equal( el.find('tbody > tr:nth-child(2) > td').length, 5, 'check row 2')
  414. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), 'adapter2', 'check row 2')
  415. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), 'host2', 'check row 2')
  416. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'user2', 'check row 2')
  417. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(4)').text().trim(), 'ja', 'check row 2')
  418. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(5)').text().trim(), '', 'check row 2')
  419. });
  420. test( "table test 3", function() {
  421. App.i18n.set('de-de')
  422. $('#table').append('<hr><h1>table with link</h1><div id="table-link1"></div>')
  423. var el = $('#table-link1')
  424. App.EmailAddress.refresh( [
  425. {
  426. id: 55,
  427. realname: 'realname 55',
  428. email: 'email 55',
  429. active: true,
  430. created_at: '2014-06-10T11:17:34.000Z',
  431. },
  432. {
  433. id: 56,
  434. realname: 'realname 56',
  435. email: 'email 56',
  436. active: true,
  437. created_at: '2014-06-10T11:17:34.000Z',
  438. },
  439. ])
  440. var callbackHeader = function (header) {
  441. console.log('current header is', header);
  442. // add new header item
  443. var attribute = {
  444. name: 'some name',
  445. display: 'Some Name',
  446. };
  447. header.push(attribute);
  448. console.log('new header is', header);
  449. return header
  450. }
  451. var callbackAttributes = function(value, object, attribute, header, refObject) {
  452. console.log('data of item col', value, object, attribute, header, refObject)
  453. value = ' '
  454. attribute.class = 'glyphicon glyphicon-user'
  455. attribute.link = '#'
  456. attribute.title = App.i18n.translateInline('Switch to')
  457. if (object.id == 55) {
  458. attribute.data = {
  459. some: 'value55',
  460. xxx: 55,
  461. }
  462. }
  463. else {
  464. attribute.data = {
  465. some: 'value56',
  466. xxx: 56,
  467. }
  468. }
  469. return value
  470. }
  471. var switchTo = function(id, e) {
  472. e.preventDefault()
  473. console.log('switchTo with id', id, e.target)
  474. //@disconnectClient()
  475. //App.Auth._logout()
  476. //window.location = App.Config.get('api_path') + '/sessions/switch/' + id
  477. }
  478. new App.ControllerTable({
  479. el: el,
  480. model: App.EmailAddress,
  481. objects: App.EmailAddress.search({sortBy:'realname', order: 'ASC'}),
  482. callbackHeader: [callbackHeader],
  483. callbackAttributes: {
  484. 'some name': [ callbackAttributes ]
  485. },
  486. bindCol: {
  487. 'some name': {
  488. events: {
  489. 'click': switchTo,
  490. }
  491. },
  492. },
  493. })
  494. equal( el.find('table > thead > tr').length, 1, 'row count')
  495. equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'richtiger Name', 'check header')
  496. equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Some Name', 'check header')
  497. equal( el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
  498. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), 'realname 55', 'check row 1')
  499. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), 'email 55', 'check row 1')
  500. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), '', 'check row 1')
  501. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').hasClass('glyphicon-user'), true, 'check row 1')
  502. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').hasClass('glyphicon'), true, 'check row 1')
  503. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').attr('title'), 'Umschalten zu', 'check row 1')
  504. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').data('some'), 'value55', 'check row 2')
  505. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').data('xxx'), '55', 'check row 2')
  506. equal( el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
  507. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), 'realname 56', 'check row 2')
  508. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), 'email 56', 'check row 2')
  509. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), '', 'check row 2')
  510. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').hasClass('glyphicon-user'), true, 'check row 2')
  511. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').hasClass('glyphicon'), true, 'check row 2')
  512. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').attr('title'), 'Umschalten zu', 'check row 2')
  513. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').data('some'), 'value56', 'check row 2')
  514. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').data('xxx'), '56', 'check row 2')
  515. });
  516. test( "table test 4", function() {
  517. App.i18n.set('de-de')
  518. $('#table').append('<hr><h1>table with data</h1><div id="table-data1"></div>')
  519. var el = $('#table-data1')
  520. data = [
  521. { name: 'some name 1', data: 'some data 1', active: true },
  522. { name: 'some name 2', data: 'some data 2', active: false },
  523. { name: 'some name 3', data: 'some data 3', active: true },
  524. ]
  525. new App.ControllerTable({
  526. el: el,
  527. overview: ['name', 'data', 'active'],
  528. attribute_list: [
  529. { name: 'name', display: 'Name', type: 'text', style: 'width: 10%' },
  530. { name: 'data', display: 'Data', type: 'text' },
  531. { name: 'active', display: 'Active', type: 'text' },
  532. ],
  533. objects: data
  534. });
  535. equal( el.find('table > thead > tr').length, 1, 'row count')
  536. equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
  537. equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Data', 'check header')
  538. equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
  539. equal( el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
  540. equal( el.find('tbody > tr:nth-child(1) > td:first').text().trim(), 'some name 1', 'check row 1')
  541. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), 'some data 1', 'check row 1')
  542. equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
  543. equal( el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
  544. equal( el.find('tbody > tr:nth-child(2) > td:first').text().trim(), 'some name 2', 'check row 2')
  545. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), 'some data 2', 'check row 2')
  546. equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'false', 'check row 2')
  547. });