namirasoft-site-react 1.3.328 → 1.3.330

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (366) hide show
  1. package/.dockerignore +86 -86
  2. package/Dockerfile +18 -18
  3. package/config-overrides.js +70 -70
  4. package/dist/App.js +3 -2
  5. package/dist/App.js.map +1 -1
  6. package/dist/assets/images/404 image.svg +9 -9
  7. package/dist/assets/images/404 image_mobile.svg +9 -9
  8. package/dist/assets/images/arrow.svg +3 -3
  9. package/dist/assets/images/danger.svg +3 -3
  10. package/dist/assets/images/exit.svg +3 -3
  11. package/dist/assets/images/icon-input-copy.svg +3 -3
  12. package/dist/assets/images/icon-input-date.svg +9 -9
  13. package/dist/assets/images/icon-input-duration.svg +9 -9
  14. package/dist/assets/images/icon-input-email.svg +9 -9
  15. package/dist/assets/images/icon-input-float.svg +9 -9
  16. package/dist/assets/images/icon-input-integer.svg +9 -9
  17. package/dist/assets/images/icon-input-ip.svg +9 -9
  18. package/dist/assets/images/icon-input-phone.svg +9 -9
  19. package/dist/assets/images/icon-input-price.svg +9 -9
  20. package/dist/assets/images/icon-input-search.svg +3 -3
  21. package/dist/assets/images/icon-input-string.svg +9 -9
  22. package/dist/assets/images/icon-input-text.svg +9 -9
  23. package/dist/assets/images/icon-input-time.svg +9 -9
  24. package/dist/assets/images/icon-select-box.svg +3 -3
  25. package/dist/assets/images/logo.svg +9 -9
  26. package/dist/assets/images/menu.svg +3 -3
  27. package/dist/assets/images/namira.svg +9 -9
  28. package/dist/assets/images/rectangle.svg +3 -3
  29. package/dist/components/NSActionMenu.js +2 -2
  30. package/dist/components/NSActionMenu.module.css +75 -75
  31. package/dist/components/NSAssistantButton.module.css +133 -133
  32. package/dist/components/NSBarAction.module.css +87 -87
  33. package/dist/components/NSBarHeroBanner.module.css +42 -42
  34. package/dist/components/NSBarNotification.module.css +34 -34
  35. package/dist/components/NSBarTitle.module.css +9 -9
  36. package/dist/components/NSBox.module.css +123 -123
  37. package/dist/components/NSBoxBoolean.module.css +53 -53
  38. package/dist/components/NSBoxCombo.module.css +16 -16
  39. package/dist/components/NSBoxDate.module.css +39 -39
  40. package/dist/components/NSBoxEntity.module.css +25 -21
  41. package/dist/components/NSBoxErrorNotifier.module.css +2 -2
  42. package/dist/components/NSBoxLabel.module.css +12 -12
  43. package/dist/components/NSBoxOTP.module.css +10 -10
  44. package/dist/components/NSBoxTextArea.module.css +76 -76
  45. package/dist/components/NSButton.module.css +27 -27
  46. package/dist/components/NSButtonBlue.module.css +4 -4
  47. package/dist/components/NSButtonGreen.module.css +4 -4
  48. package/dist/components/NSButtonRed.module.css +4 -4
  49. package/dist/components/NSCard.module.css +108 -108
  50. package/dist/components/NSCopyToClipboard.module.css +39 -39
  51. package/dist/components/NSElectronicCard.module.css +60 -60
  52. package/dist/components/NSEntityBar.module.css +77 -77
  53. package/dist/components/NSEntityCardBackground.module.css +27 -27
  54. package/dist/components/NSFilterBox.module.css +47 -47
  55. package/dist/components/NSFilterBoxDialog.module.css +36 -36
  56. package/dist/components/NSFilterItem.module.css +23 -23
  57. package/dist/components/NSFooter.module.css +123 -123
  58. package/dist/components/NSGroupedList.module.css +72 -72
  59. package/dist/components/NSHeader.module.css +271 -271
  60. package/dist/components/NSLayout.module.css +13 -13
  61. package/dist/components/NSLink.module.css +36 -36
  62. package/dist/components/NSLoading.module.css +29 -29
  63. package/dist/components/NSModal.js +2 -2
  64. package/dist/components/NSModal.module.css +70 -70
  65. package/dist/components/NSNoData.module.css +8 -8
  66. package/dist/components/NSPageSelectionModal.module.css +102 -101
  67. package/dist/components/NSPagination.module.css +101 -101
  68. package/dist/components/NSPanel.module.css +46 -46
  69. package/dist/components/NSRadioButton.d.ts +22 -4
  70. package/dist/components/NSRadioButton.js +38 -13
  71. package/dist/components/NSRadioButton.js.map +1 -1
  72. package/dist/components/NSRadioButton.module.css +53 -28
  73. package/dist/components/NSRadioGroup.d.ts +9 -0
  74. package/dist/components/NSRadioGroup.js +14 -0
  75. package/dist/components/NSRadioGroup.js.map +1 -0
  76. package/dist/components/NSRadioGroup.module.css +29 -0
  77. package/dist/components/NSSection.module.css +10 -10
  78. package/dist/components/NSSectionBars.module.css +10 -10
  79. package/dist/components/NSSectionCards.module.css +38 -38
  80. package/dist/components/NSTabPage.module.css +57 -57
  81. package/dist/components/NSTable.js +3 -0
  82. package/dist/components/NSTable.js.map +1 -1
  83. package/dist/components/NSTable.module.css +230 -229
  84. package/dist/components/NSTag.module.css +44 -44
  85. package/dist/components/NSTitle.module.css +15 -15
  86. package/dist/components/NSVerification.module.css +22 -22
  87. package/dist/main.d.ts +1 -1
  88. package/dist/main.js +1 -1
  89. package/dist/main.js.map +1 -1
  90. package/dist/pages/NSLoginPage.module.css +19 -19
  91. package/dist/pages/NSNotFoundPage.module.css +18 -18
  92. package/package.json +67 -67
  93. package/public/index.html +38 -38
  94. package/src/App.css +16 -16
  95. package/src/App.tsx +168 -166
  96. package/src/CopyToClipboard.ts +6 -6
  97. package/src/Validator.ts +110 -110
  98. package/src/assets/images/404 image.svg +9 -9
  99. package/src/assets/images/404 image_mobile.svg +9 -9
  100. package/src/assets/images/arrow.svg +3 -3
  101. package/src/assets/images/danger.svg +3 -3
  102. package/src/assets/images/exit.svg +3 -3
  103. package/src/assets/images/icon-input-copy.svg +3 -3
  104. package/src/assets/images/icon-input-date.svg +9 -9
  105. package/src/assets/images/icon-input-duration.svg +9 -9
  106. package/src/assets/images/icon-input-email.svg +9 -9
  107. package/src/assets/images/icon-input-float.svg +9 -9
  108. package/src/assets/images/icon-input-integer.svg +9 -9
  109. package/src/assets/images/icon-input-ip.svg +9 -9
  110. package/src/assets/images/icon-input-phone.svg +9 -9
  111. package/src/assets/images/icon-input-price.svg +9 -9
  112. package/src/assets/images/icon-input-search.svg +3 -3
  113. package/src/assets/images/icon-input-string.svg +9 -9
  114. package/src/assets/images/icon-input-text.svg +9 -9
  115. package/src/assets/images/icon-input-time.svg +9 -9
  116. package/src/assets/images/icon-select-box.svg +3 -3
  117. package/src/assets/images/logo.svg +9 -9
  118. package/src/assets/images/menu.svg +3 -3
  119. package/src/assets/images/namira.svg +9 -9
  120. package/src/assets/images/rectangle.svg +3 -3
  121. package/src/components/NSActionMenu.module.css +75 -75
  122. package/src/components/NSActionMenu.tsx +88 -88
  123. package/src/components/NSAssistantButton.module.css +133 -133
  124. package/src/components/NSAssistantButton.tsx +74 -74
  125. package/src/components/NSBarAction.module.css +87 -87
  126. package/src/components/NSBarAction.tsx +86 -86
  127. package/src/components/NSBarHeroBanner.module.css +42 -42
  128. package/src/components/NSBarHeroBanner.tsx +61 -61
  129. package/src/components/NSBarNotification.module.css +34 -34
  130. package/src/components/NSBarNotification.tsx +63 -63
  131. package/src/components/NSBarTitle.module.css +9 -9
  132. package/src/components/NSBarTitle.tsx +28 -28
  133. package/src/components/NSBox.module.css +123 -123
  134. package/src/components/NSBoxBoolean.module.css +53 -53
  135. package/src/components/NSBoxBoolean.tsx +84 -84
  136. package/src/components/NSBoxCombo.module.css +16 -16
  137. package/src/components/NSBoxCombo.tsx +131 -131
  138. package/src/components/NSBoxDate.module.css +39 -39
  139. package/src/components/NSBoxDate.tsx +83 -83
  140. package/src/components/NSBoxDateTime.tsx +83 -83
  141. package/src/components/NSBoxDouble.tsx +88 -88
  142. package/src/components/NSBoxDuration.tsx +88 -88
  143. package/src/components/NSBoxEmail.tsx +104 -104
  144. package/src/components/NSBoxEntity.module.css +25 -21
  145. package/src/components/NSBoxEntity.tsx +134 -134
  146. package/src/components/NSBoxEnum.tsx +56 -56
  147. package/src/components/NSBoxErrorNotifier.module.css +2 -2
  148. package/src/components/NSBoxErrorNotifier.tsx +33 -33
  149. package/src/components/NSBoxIPV4.tsx +93 -93
  150. package/src/components/NSBoxIPV6.tsx +90 -90
  151. package/src/components/NSBoxInteger.tsx +86 -86
  152. package/src/components/NSBoxLabel.module.css +12 -12
  153. package/src/components/NSBoxLabel.tsx +29 -29
  154. package/src/components/NSBoxOTP.module.css +10 -10
  155. package/src/components/NSBoxOTP.tsx +65 -65
  156. package/src/components/NSBoxPassword.tsx +86 -86
  157. package/src/components/NSBoxPhone.tsx +88 -88
  158. package/src/components/NSBoxPrice.tsx +88 -88
  159. package/src/components/NSBoxSearch.tsx +103 -103
  160. package/src/components/NSBoxString.tsx +103 -103
  161. package/src/components/NSBoxTextArea.module.css +76 -76
  162. package/src/components/NSBoxTextArea.tsx +106 -106
  163. package/src/components/NSBoxTime.tsx +88 -88
  164. package/src/components/NSButton.module.css +27 -27
  165. package/src/components/NSButton.tsx +23 -23
  166. package/src/components/NSButtonBlue.module.css +4 -4
  167. package/src/components/NSButtonBlue.tsx +12 -12
  168. package/src/components/NSButtonGreen.module.css +4 -4
  169. package/src/components/NSButtonGreen.tsx +11 -11
  170. package/src/components/NSButtonRed.module.css +4 -4
  171. package/src/components/NSButtonRed.tsx +11 -11
  172. package/src/components/NSCard.module.css +108 -108
  173. package/src/components/NSCard.tsx +70 -70
  174. package/src/components/NSCopyToClipboard.module.css +39 -39
  175. package/src/components/NSCopyToClipboard.tsx +35 -35
  176. package/src/components/NSElectronicCard.module.css +60 -60
  177. package/src/components/NSElectronicCard.tsx +47 -47
  178. package/src/components/NSEntityBar.module.css +77 -77
  179. package/src/components/NSEntityBar.tsx +27 -27
  180. package/src/components/NSEntityCardBackground.module.css +27 -27
  181. package/src/components/NSEntityCardBackground.tsx +34 -34
  182. package/src/components/NSFilterBox.module.css +47 -47
  183. package/src/components/NSFilterBox.tsx +374 -374
  184. package/src/components/NSFilterBoxDialog.module.css +36 -36
  185. package/src/components/NSFilterBoxDialog.tsx +74 -74
  186. package/src/components/NSFilterItem.module.css +23 -23
  187. package/src/components/NSFilterItem.tsx +72 -72
  188. package/src/components/NSFooter.module.css +123 -123
  189. package/src/components/NSFooter.tsx +153 -153
  190. package/src/components/NSGroupedList.module.css +72 -72
  191. package/src/components/NSGroupedList.tsx +107 -107
  192. package/src/components/NSHeader.module.css +271 -271
  193. package/src/components/NSHeader.tsx +191 -191
  194. package/src/components/NSLayout.module.css +13 -13
  195. package/src/components/NSLayout.tsx +75 -75
  196. package/src/components/NSLine.tsx +18 -18
  197. package/src/components/NSLink.module.css +36 -36
  198. package/src/components/NSLink.tsx +25 -25
  199. package/src/components/NSLinkBlue.tsx +20 -20
  200. package/src/components/NSLinkGreen.tsx +5 -5
  201. package/src/components/NSLinkRed.tsx +5 -5
  202. package/src/components/NSLoading.module.css +29 -29
  203. package/src/components/NSLoading.tsx +19 -19
  204. package/src/components/NSModal.module.css +70 -70
  205. package/src/components/NSModal.tsx +49 -49
  206. package/src/components/NSNoData.module.css +8 -8
  207. package/src/components/NSNoData.tsx +24 -24
  208. package/src/components/NSPageSelectionModal.module.css +102 -101
  209. package/src/components/NSPageSelectionModal.tsx +190 -190
  210. package/src/components/NSPagination.module.css +101 -101
  211. package/src/components/NSPagination.tsx +191 -191
  212. package/src/components/NSPanel.module.css +46 -46
  213. package/src/components/NSPanel.tsx +19 -19
  214. package/src/components/NSRadioButton.module.css +53 -28
  215. package/src/components/NSRadioButton.tsx +85 -118
  216. package/src/components/NSRadioGroup.module.css +29 -0
  217. package/src/components/NSRadioGroup.tsx +92 -0
  218. package/src/components/NSSection.module.css +10 -10
  219. package/src/components/NSSection.tsx +23 -23
  220. package/src/components/NSSectionBars.module.css +10 -10
  221. package/src/components/NSSectionBars.tsx +25 -25
  222. package/src/components/NSSectionCards.module.css +38 -38
  223. package/src/components/NSSectionCards.tsx +51 -51
  224. package/src/components/NSSectionTitle.tsx +21 -21
  225. package/src/components/NSSpace.tsx +28 -28
  226. package/src/components/NSTabPage.module.css +57 -57
  227. package/src/components/NSTabPage.tsx +46 -46
  228. package/src/components/NSTable.module.css +230 -229
  229. package/src/components/NSTable.tsx +356 -353
  230. package/src/components/NSTag.module.css +44 -44
  231. package/src/components/NSTag.tsx +49 -49
  232. package/src/components/NSTitle.module.css +15 -15
  233. package/src/components/NSTitle.tsx +19 -19
  234. package/src/components/NSVerification.module.css +22 -22
  235. package/src/components/NSVerification.tsx +41 -41
  236. package/src/index.tsx +7 -7
  237. package/src/main.ts +80 -80
  238. package/src/pages/NSLoginPage.module.css +19 -19
  239. package/src/pages/NSLoginPage.tsx +30 -30
  240. package/src/pages/NSNotFoundPage.module.css +18 -18
  241. package/src/pages/NSNotFoundPage.tsx +11 -11
  242. package/src/props/IBaseComponentProps.ts +8 -8
  243. package/src/props/IHeaderIconProps.ts +9 -9
  244. package/src/props/IHeaderProps.ts +6 -6
  245. package/src/props/IImageProps.ts +4 -4
  246. package/src/props/ILinkProps.ts +5 -5
  247. package/src/props/IValidationNumberProps.ts +4 -4
  248. package/src/props/IValidationProps.ts +7 -7
  249. package/src/props/IValidationRegexProps.ts +4 -4
  250. package/src/props/IValidationStringProps.ts +4 -4
  251. package/src/routing/INSRouterMaker.ts +6 -6
  252. package/src/routing/INSRouterProps.ts +5 -5
  253. package/src/routing/INSRouterState.ts +5 -5
  254. package/src/routing/NSRouterMaker.tsx +33 -33
  255. package/src/routing/Notifier.ts +79 -79
  256. package/tsconfig.json +43 -43
  257. package/dist/App.css +0 -17
  258. package/dist/assets/images/1.png +0 -0
  259. package/dist/assets/images/2.png +0 -0
  260. package/dist/assets/images/3.png +0 -0
  261. package/dist/assets/images/4.png +0 -0
  262. package/dist/assets/images/5.jpg +0 -0
  263. package/dist/assets/images/icon-export.svg +0 -3
  264. package/dist/assets/images/icon-input-id.svg +0 -9
  265. package/dist/assets/images/icon-refresh.svg +0 -3
  266. package/dist/components/NSAccess.d.ts +0 -2
  267. package/dist/components/NSAccess.js +0 -8
  268. package/dist/components/NSAccess.js.map +0 -1
  269. package/dist/components/NSAccess.module.css +0 -39
  270. package/dist/components/NSBoxText.d.ts +0 -25
  271. package/dist/components/NSBoxText.js +0 -56
  272. package/dist/components/NSBoxText.js.map +0 -1
  273. package/dist/components/NSInput.module.css +0 -74
  274. package/dist/components/NSInputDate.d.ts +0 -21
  275. package/dist/components/NSInputDate.js +0 -41
  276. package/dist/components/NSInputDate.js.map +0 -1
  277. package/dist/components/NSInputDate.module.css +0 -42
  278. package/dist/components/NSInputDuration.d.ts +0 -23
  279. package/dist/components/NSInputDuration.js +0 -42
  280. package/dist/components/NSInputDuration.js.map +0 -1
  281. package/dist/components/NSInputEmail.d.ts +0 -22
  282. package/dist/components/NSInputEmail.js +0 -43
  283. package/dist/components/NSInputEmail.js.map +0 -1
  284. package/dist/components/NSInputErrorNotifier.d.ts +0 -5
  285. package/dist/components/NSInputErrorNotifier.js +0 -7
  286. package/dist/components/NSInputErrorNotifier.js.map +0 -1
  287. package/dist/components/NSInputErrorNotifier.module.css +0 -3
  288. package/dist/components/NSInputFloat.d.ts +0 -22
  289. package/dist/components/NSInputFloat.js +0 -41
  290. package/dist/components/NSInputFloat.js.map +0 -1
  291. package/dist/components/NSInputIP.d.ts +0 -22
  292. package/dist/components/NSInputIP.js +0 -43
  293. package/dist/components/NSInputIP.js.map +0 -1
  294. package/dist/components/NSInputInteger.d.ts +0 -22
  295. package/dist/components/NSInputInteger.js +0 -41
  296. package/dist/components/NSInputInteger.js.map +0 -1
  297. package/dist/components/NSInputPassword.d.ts +0 -22
  298. package/dist/components/NSInputPassword.js +0 -42
  299. package/dist/components/NSInputPassword.js.map +0 -1
  300. package/dist/components/NSInputPhone.d.ts +0 -22
  301. package/dist/components/NSInputPhone.js +0 -38
  302. package/dist/components/NSInputPhone.js.map +0 -1
  303. package/dist/components/NSInputPrice.d.ts +0 -22
  304. package/dist/components/NSInputPrice.js +0 -41
  305. package/dist/components/NSInputPrice.js.map +0 -1
  306. package/dist/components/NSInputSearch.d.ts +0 -22
  307. package/dist/components/NSInputSearch.js +0 -41
  308. package/dist/components/NSInputSearch.js.map +0 -1
  309. package/dist/components/NSInputString.d.ts +0 -22
  310. package/dist/components/NSInputString.js +0 -42
  311. package/dist/components/NSInputString.js.map +0 -1
  312. package/dist/components/NSInputText.d.ts +0 -22
  313. package/dist/components/NSInputText.js +0 -42
  314. package/dist/components/NSInputText.js.map +0 -1
  315. package/dist/components/NSInputTime.d.ts +0 -22
  316. package/dist/components/NSInputTime.js +0 -43
  317. package/dist/components/NSInputTime.js.map +0 -1
  318. package/dist/components/NSLayoutAction.d.ts +0 -5
  319. package/dist/components/NSLayoutAction.js +0 -20
  320. package/dist/components/NSLayoutAction.js.map +0 -1
  321. package/dist/components/NSLayoutAction.module.css +0 -88
  322. package/dist/components/NSLayoutHeroBanner.d.ts +0 -2
  323. package/dist/components/NSLayoutHeroBanner.js +0 -8
  324. package/dist/components/NSLayoutHeroBanner.js.map +0 -1
  325. package/dist/components/NSLayoutHeroBanner.module.css +0 -43
  326. package/dist/components/NSLayoutTitle.d.ts +0 -2
  327. package/dist/components/NSLayoutTitle.js +0 -11
  328. package/dist/components/NSLayoutTitle.js.map +0 -1
  329. package/dist/components/NSLayoutTitle.module.css +0 -10
  330. package/dist/components/NSNotification.d.ts +0 -21
  331. package/dist/components/NSNotification.js +0 -37
  332. package/dist/components/NSNotification.js.map +0 -1
  333. package/dist/components/NSNotification.module.css +0 -32
  334. package/dist/components/NSPrintModal.d.ts +0 -15
  335. package/dist/components/NSPrintModal.js +0 -35
  336. package/dist/components/NSPrintModal.js.map +0 -1
  337. package/dist/components/NSPrintModal.module.css +0 -82
  338. package/dist/components/NSSelectBox.d.ts +0 -24
  339. package/dist/components/NSSelectBox.js +0 -61
  340. package/dist/components/NSSelectBox.js.map +0 -1
  341. package/dist/components/NSSelectBox.module.css +0 -42
  342. package/dist/index.css +0 -6
  343. package/dist/props/BaseComponentProps.d.ts +0 -6
  344. package/dist/props/BaseComponentProps.js +0 -2
  345. package/dist/props/BaseComponentProps.js.map +0 -10
  346. package/dist/props/INamirasoftProps.d.ts +0 -4
  347. package/dist/props/INamirasoftProps.js +0 -2
  348. package/dist/props/INamirasoftProps.js.map +0 -1
  349. package/dist/props/ImageProps.d.ts +0 -4
  350. package/dist/props/ImageProps.js +0 -2
  351. package/dist/props/ImageProps.js.map +0 -10
  352. package/dist/props/LinkProps.d.ts +0 -5
  353. package/dist/props/LinkProps.js +0 -2
  354. package/dist/props/LinkProps.js.map +0 -10
  355. package/dist/props/ValidationNumberProps.d.ts +0 -4
  356. package/dist/props/ValidationNumberProps.js +0 -2
  357. package/dist/props/ValidationNumberProps.js.map +0 -10
  358. package/dist/props/ValidationProps.d.ts +0 -6
  359. package/dist/props/ValidationProps.js +0 -2
  360. package/dist/props/ValidationProps.js.map +0 -10
  361. package/dist/props/ValidationRegexProps.d.ts +0 -4
  362. package/dist/props/ValidationRegexProps.js +0 -2
  363. package/dist/props/ValidationRegexProps.js.map +0 -1
  364. package/dist/props/ValidationStringProps.d.ts +0 -4
  365. package/dist/props/ValidationStringProps.js +0 -2
  366. package/dist/props/ValidationStringProps.js.map +0 -10
package/src/components/NSTable.tsx CHANGED
@@ -1,354 +1,357 @@
1
- "use client";
2
-
3
- import NSButton from './NSButton';
4
- import { NSPagination } from './NSPagination';
5
- import { NSSpace, NSSpaceSizeType } from './NSSpace';
6
- import Styles from './NSTable.module.css';
7
- import { Component } from 'react';
8
- import { IBaseComponentProps } from "../props/IBaseComponentProps";
9
- import React from "react";
10
- import { NSModal } from './NSModal';
11
- import { NSPageSelectionModal } from './NSPageSelectionModal';
12
- import { NSLoading } from './NSLoading';
13
- import { NSNoData } from './NSNoData';
14
- import { writeFile, utils } from 'xlsx';
15
-
16
- export interface INSTableProps<RowType> extends IBaseComponentProps
17
- {
18
- columns: { [key: string]: string };
19
- totalItems: number;
20
- checkbox: boolean;
21
- getRows: (page: number, size: number) => Promise<RowType[]>;
22
- getRowKey: (row: RowType, rowIndex: number) => string;
23
- getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
24
- getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
25
- onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
26
- onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
27
- onSelectedIDsChanged?: () => void;
28
- }
29
-
30
- interface NSTableState<RowType>
31
- {
32
- columns: { [key: string]: string };
33
- rows: RowType[] | null;
34
- title?: string;
35
- model: {
36
- show: boolean;
37
- description?: string;
38
- };
39
- selectedIDs: string[];
40
- indeterminate: boolean;
41
- pageSelectionMode: PageSelectionMode;
42
- }
43
-
44
- enum PageSelectionMode
45
- {
46
- Hidden = "Hidden",
47
- Print = "Print",
48
- CSV = "CSV"
49
- }
50
-
51
- export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
52
- {
53
- NSPagination = React.createRef<NSPagination>();
54
- constructor(props: INSTableProps<RowType>)
55
- {
56
- super(props);
57
- this.state = {
58
- columns: props.columns,
59
- rows: null,
60
- model: { show: false },
61
- selectedIDs: [],
62
- indeterminate: false,
63
- pageSelectionMode: PageSelectionMode.Hidden
64
- };
65
- this.setColumns = this.setColumns.bind(this);
66
- this.setRows = this.setRows.bind(this);
67
- this.showModal = this.showModal.bind(this);
68
- this.hideModal = this.hideModal.bind(this);
69
- this.onPageChange = this.onPageChange.bind(this);
70
- this.isSomeChecked = this.isSomeChecked.bind(this);
71
- this.toggleAllCheckboxes = this.toggleAllCheckboxes.bind(this);
72
- this.print = this.print.bind(this);
73
- this.exportCSV = this.exportCSV.bind(this);
74
- this.isAllChecked = this.isAllChecked.bind(this);
75
- this.reload = this.reload.bind(this);
76
- }
77
-
78
- setColumns(columns: { [key: string]: string })
79
- {
80
- this.setState({ columns });
81
- }
82
-
83
- setRows(rows: RowType[] | null)
84
- {
85
- this.setState({ rows });
86
- }
87
-
88
- private showModal(description: string, title?: string)
89
- {
90
- this.setState({ model: { show: true, description }, title });
91
- }
92
- private hideModal()
93
- {
94
- this.setState({ model: { show: false } });
95
- }
96
- private onPageChange(page: number, size: number)
97
- {
98
- this.reload(page, size);
99
- }
100
- override componentDidMount(): void
101
- {
102
- this.reload(null, null);
103
- }
104
- public reload(page: number | null, size: number | null)
105
- {
106
- this.setRows(null);
107
- if (page == null)
108
- page = this.NSPagination.current?.getCurrentPage() ?? 0;
109
- if (size == null)
110
- size = this.NSPagination.current?.getPageSize() ?? 0;
111
- this.props.getRows(page, size).then(rows =>
112
- {
113
- this.setRows(rows);
114
- });
115
- }
116
- private toggleAllCheckboxes()
117
- {
118
- let selectedIDs: string[] = [];
119
- if (this.getSelectedIDs().length == 0)
120
- this.state.rows?.map((row, rowIndex) =>
121
- {
122
- let id = this.props.getRowKey(row, rowIndex);
123
- selectedIDs.push(id);
124
- })
125
- this.setSelectedIDs(selectedIDs);
126
- this.setState({ indeterminate: false });
127
- }
128
-
129
- print(rows: RowType[])
130
- {
131
- const printWindow = window.open('', '', 'height=500,width=800');
132
- printWindow!.document.write('<html><head><title>Print Table</title>');
133
- printWindow!.document.write('<style>table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; }</style>');
134
- printWindow!.document.write('</head><body>');
135
- printWindow!.document.write('<table>');
136
- printWindow!.document.write('<thead><tr>');
137
-
138
- Object.keys(this.state.columns).forEach(column =>
139
- {
140
- printWindow!.document.write('<th>' + this.state.columns[column] + '</th>');
141
- });
142
-
143
- printWindow!.document.write('</tr></thead><tbody>');
144
-
145
- // Add table rows
146
- rows.forEach(row =>
147
- {
148
- printWindow!.document.write('<tr>');
149
- Object.keys(this.state.columns).forEach(column =>
150
- {
151
- printWindow!.document.write('<td>' + (row as any)[column] + '</td>');
152
- });
153
- printWindow!.document.write('</tr>');
154
- });
155
-
156
- printWindow!.document.write('</tbody></table>');
157
- printWindow!.document.write('</body></html>');
158
- printWindow!.document.close();
159
- printWindow!.print();
160
- }
161
- exportCSV(rows: RowType[])
162
- {
163
- const worksheet = utils.json_to_sheet(this.state.rows || []);
164
- const workbook = utils.book_new();
165
- utils.book_append_sheet(workbook, worksheet, "Table Data");
166
- console.log(rows.length); // todo
167
- writeFile(workbook, "TableData.xlsx");
168
- }
169
- getSelectedIDs(): string[]
170
- {
171
- return this.state.selectedIDs;
172
- }
173
- setSelectedIDs(ids: string[])
174
- {
175
- this.setState({ selectedIDs: ids }, () =>
176
- {
177
- if (this.props.onSelectedIDsChanged)
178
- this.props.onSelectedIDsChanged();
179
- });
180
- }
181
- private isAllChecked(): boolean
182
- {
183
- return this.state.rows !== null && this.state.rows.length > 0 && this.state.selectedIDs.length === this.state.rows.length;
184
- }
185
-
186
- private isSomeChecked(): boolean
187
- {
188
- debugger
189
- return this.state.selectedIDs.length > 0 && !this.isAllChecked();
190
- }
191
- override render()
192
- {
193
- let column_keys = Object.keys(this.state.columns);
194
- let getColumnAttributes = (column: string, columnIndex: number) =>
195
- {
196
- if (this.props.getColumnAttributes)
197
- return this.props.getColumnAttributes(column, columnIndex);
198
- return {};
199
- }
200
- let getCell = (row: RowType, column: string, rowIndex: number, columnIndex: number) =>
201
- {
202
- if (this.props.getCell)
203
- return this.props.getCell(row, column, rowIndex, columnIndex);
204
- return (row as any)[column];
205
- }
206
- let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) =>
207
- {
208
- if (this.props.onRowClick)
209
- this.props.onRowClick(e, row, rowIndex);
210
- };
211
- let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) =>
212
- {
213
- let overided = false;
214
- if (this.props.onCellClick)
215
- {
216
- let res = this.props.onCellClick(e, row, column, rowIndex, columnIndex);
217
- if (res === undefined)
218
- {
219
- overided = true;
220
- } else
221
- {
222
- overided = res;
223
- }
224
- }
225
- if (!overided)
226
- {
227
- this.showModal(getCell(row, column, rowIndex, columnIndex), this.state.columns[column]);
228
- }
229
- };
230
- let content;
231
- if (this.state.rows === null)
232
- {
233
- content = (
234
- <NSLoading />
235
- );
236
- }
237
- else if (this.state.rows.length === 0)
238
- {
239
- content = (
240
- <NSNoData lable='No Data' />
241
- );
242
- }
243
- else
244
- {
245
- content = this.state.rows.map((row, rowIndex) =>
246
- <tr key={this.props.getRowKey(row, rowIndex)} onClick={(e) => { onRowClick(e, row, rowIndex); }}>
247
- {
248
- this.props.checkbox && <input className={Styles.ns_td_input} id={`checkbox_device_${this.props.getRowKey(row, rowIndex)}`} type="checkbox" checked={this.state.selectedIDs.includes(this.props.getRowKey(row, rowIndex))} onChange={(e) =>
249
- {
250
- let selectedIDs = this.state.selectedIDs;
251
- let id = this.props.getRowKey(row, rowIndex);
252
- if (e.currentTarget.checked)
253
- selectedIDs.push(id);
254
- else
255
- selectedIDs = selectedIDs.filter(x => x !== id);
256
- this.setSelectedIDs(selectedIDs)
257
- this.setState({ selectedIDs }, () =>
258
- {
259
- this.setState({ indeterminate: this.isSomeChecked() });
260
- });
261
- }} />
262
- }
263
- {
264
- column_keys.map((column, columnIndex) => (
265
- <td {...getColumnAttributes(column, columnIndex + 1)} key={columnIndex + 1} data-label={`${this.state.columns[column]} : `} onClick={(e) => { onCellClick(e, row, column, rowIndex, columnIndex + 1); }}>
266
- {getCell(row, column, rowIndex, columnIndex + 1)}
267
- </td>
268
- ))
269
- }
270
- </tr>);
271
- }
272
- return (
273
- <div id={this.props.id}
274
- className={`${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
275
- style={this.props.style}>
276
- <NSSpace size={NSSpaceSizeType.SMALL} />
277
- <table className={Styles.ns_table} >
278
- <thead className={Styles.ns_thead}>
279
- <tr>
280
- {
281
- this.props.checkbox && <th className={Styles.ns_check_box}>
282
- <input className={`${Styles.ns_check_box_input} ${this.state.indeterminate ? Styles.ns_indeterminate : ""}`} id='checkbox' type='checkbox' onChange={this.toggleAllCheckboxes} checked={this.getSelectedIDs().length > 0}></input>
283
- </th>
284
- }
285
- {
286
- column_keys.map(column_key => <th key={column_key} scope="col">
287
- {this.state.columns[column_key]}
288
- </th>)
289
- }
290
- </tr>
291
- </thead>
292
- <tbody className={Styles.ns_tbody}>
293
- {content}
294
- </tbody >
295
- </table>
296
- <NSSpace size={NSSpaceSizeType.MICRO} />
297
- <section className={Styles.ns_pagination_button}>
298
- <NSPagination ref={this.NSPagination} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
299
- <NSSpace size={NSSpaceSizeType.SMALL} />
300
- <div className={Styles.ns_button}>
301
- {
302
- this.state.pageSelectionMode != PageSelectionMode.Hidden &&
303
- <NSPageSelectionModal<RowType>
304
- current_page={1}
305
- max_page={1}
306
- getItems={async (page, selected) =>
307
- {
308
- if (selected)
309
- {
310
- let rows: RowType[] = [];
311
- if (this.state.rows)
312
- for (let i = 0; i < this.state.rows.length; i++)
313
- {
314
- const row = this.state.rows[i];
315
- let id = this.props.getRowKey(row, i);
316
- if (this.state.selectedIDs.includes(id))
317
- rows.push(row);
318
- }
319
- return rows;
320
- }
321
- return this.props.getRows(page, this.NSPagination.current?.getCurrentPage() ?? 0);
322
- }}
323
- onFinish={(items: RowType[]) =>
324
- {
325
- if (this.state.pageSelectionMode == PageSelectionMode.Print)
326
- this.print(items);
327
- else if (this.state.pageSelectionMode == PageSelectionMode.CSV)
328
- this.exportCSV(items);
329
- }}
330
- onClose={() => { this.setState({ pageSelectionMode: PageSelectionMode.Hidden }); }
331
- }
332
- />
333
- }
334
- <NSButton title='Chart' icon={{ src: "https://static.namirasoft.com/image/concept/chart/blue.svg" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
335
- <NSButton title='Print' icon={{ src: "https://static.namirasoft.com/image/concept/print/blue.svg" }} onClick={() => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
336
- <NSButton title='Export' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
337
- <NSButton title='Refresh' icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }} onClick={() =>
338
- {
339
- this.reload(null, null);
340
- }} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
341
-
342
- </div>
343
- </section>
344
- <NSSpace size={NSSpaceSizeType.SMALL} />
345
- <NSModal
346
- show={this.state.model.show}
347
- description={this.state.model.description}
348
- onClose={() => { this.hideModal(); }}
349
- title={this.state.title}
350
- />
351
- </div >
352
- );
353
- }
1
+ "use client";
2
+
3
+ import NSButton from './NSButton';
4
+ import { NSPagination } from './NSPagination';
5
+ import { NSSpace, NSSpaceSizeType } from './NSSpace';
6
+ import Styles from './NSTable.module.css';
7
+ import { Component } from 'react';
8
+ import { IBaseComponentProps } from "../props/IBaseComponentProps";
9
+ import React from "react";
10
+ import { NSModal } from './NSModal';
11
+ import { NSPageSelectionModal } from './NSPageSelectionModal';
12
+ import { NSLoading } from './NSLoading';
13
+ import { NSNoData } from './NSNoData';
14
+ import { writeFile, utils } from 'xlsx';
15
+
16
+ export interface INSTableProps<RowType> extends IBaseComponentProps
17
+ {
18
+ columns: { [key: string]: string };
19
+ totalItems: number;
20
+ checkbox: boolean;
21
+ getRows: (page: number, size: number) => Promise<RowType[]>;
22
+ getRowKey: (row: RowType, rowIndex: number) => string;
23
+ getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
24
+ getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
25
+ onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
26
+ onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
27
+ onSelectedIDsChanged?: () => void;
28
+ }
29
+
30
+ interface NSTableState<RowType>
31
+ {
32
+ columns: { [key: string]: string };
33
+ rows: RowType[] | null;
34
+ title?: string;
35
+ model: {
36
+ show: boolean;
37
+ description?: string;
38
+ };
39
+ selectedIDs: string[];
40
+ indeterminate: boolean;
41
+ pageSelectionMode: PageSelectionMode;
42
+ }
43
+
44
+ enum PageSelectionMode
45
+ {
46
+ Hidden = "Hidden",
47
+ Print = "Print",
48
+ CSV = "CSV"
49
+ }
50
+
51
+ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
52
+ {
53
+ NSPagination = React.createRef<NSPagination>();
54
+ constructor(props: INSTableProps<RowType>)
55
+ {
56
+ super(props);
57
+ this.state = {
58
+ columns: props.columns,
59
+ rows: null,
60
+ model: { show: false },
61
+ selectedIDs: [],
62
+ indeterminate: false,
63
+ pageSelectionMode: PageSelectionMode.Hidden
64
+ };
65
+ this.setColumns = this.setColumns.bind(this);
66
+ this.setRows = this.setRows.bind(this);
67
+ this.showModal = this.showModal.bind(this);
68
+ this.hideModal = this.hideModal.bind(this);
69
+ this.onPageChange = this.onPageChange.bind(this);
70
+ this.isSomeChecked = this.isSomeChecked.bind(this);
71
+ this.toggleAllCheckboxes = this.toggleAllCheckboxes.bind(this);
72
+ this.print = this.print.bind(this);
73
+ this.exportCSV = this.exportCSV.bind(this);
74
+ this.isAllChecked = this.isAllChecked.bind(this);
75
+ this.reload = this.reload.bind(this);
76
+ }
77
+
78
+ setColumns(columns: { [key: string]: string })
79
+ {
80
+ this.setState({ columns });
81
+ }
82
+
83
+ setRows(rows: RowType[] | null)
84
+ {
85
+ this.setState({ rows });
86
+ }
87
+
88
+ private showModal(description: string, title?: string)
89
+ {
90
+ this.setState({ model: { show: true, description }, title });
91
+ }
92
+ private hideModal()
93
+ {
94
+ this.setState({ model: { show: false } });
95
+ }
96
+ private onPageChange(page: number, size: number)
97
+ {
98
+ this.reload(page, size);
99
+ }
100
+ override componentDidMount(): void
101
+ {
102
+ this.reload(null, null);
103
+ }
104
+ public reload(page: number | null, size: number | null)
105
+ {
106
+ this.setRows(null);
107
+ if (page == null)
108
+ page = this.NSPagination.current?.getCurrentPage() ?? 0;
109
+ if (size == null)
110
+ size = this.NSPagination.current?.getPageSize() ?? 0;
111
+ this.props.getRows(page, size).then(rows =>
112
+ {
113
+ this.setRows(rows);
114
+ });
115
+ }
116
+ private toggleAllCheckboxes()
117
+ {
118
+ let selectedIDs: string[] = [];
119
+ if (this.getSelectedIDs().length == 0)
120
+ this.state.rows?.map((row, rowIndex) =>
121
+ {
122
+ let id = this.props.getRowKey(row, rowIndex);
123
+ selectedIDs.push(id);
124
+ })
125
+ this.setSelectedIDs(selectedIDs);
126
+ this.setState({ indeterminate: false });
127
+ }
128
+
129
+ print(rows: RowType[])
130
+ {
131
+ const printWindow = window.open('', '', 'height=500,width=800');
132
+ printWindow!.document.write('<html><head><title>Print Table</title>');
133
+ printWindow!.document.write('<style>table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; }</style>');
134
+ printWindow!.document.write('</head><body>');
135
+ printWindow!.document.write('<table>');
136
+ printWindow!.document.write('<thead><tr>');
137
+
138
+ Object.keys(this.state.columns).forEach(column =>
139
+ {
140
+ printWindow!.document.write('<th>' + this.state.columns[column] + '</th>');
141
+ });
142
+
143
+ printWindow!.document.write('</tr></thead><tbody>');
144
+
145
+ // Add table rows
146
+ rows.forEach(row =>
147
+ {
148
+ printWindow!.document.write('<tr>');
149
+ Object.keys(this.state.columns).forEach(column =>
150
+ {
151
+ printWindow!.document.write('<td>' + (row as any)[column] + '</td>');
152
+ });
153
+ printWindow!.document.write('</tr>');
154
+ });
155
+
156
+ printWindow!.document.write('</tbody></table>');
157
+ printWindow!.document.write('</body></html>');
158
+ printWindow!.document.close();
159
+ printWindow!.print();
160
+ }
161
+ exportCSV(rows: RowType[])
162
+ {
163
+ const worksheet = utils.json_to_sheet(this.state.rows || []);
164
+ const workbook = utils.book_new();
165
+ utils.book_append_sheet(workbook, worksheet, "Table Data");
166
+ console.log(rows.length); // todo
167
+ writeFile(workbook, "TableData.xlsx");
168
+ }
169
+ getSelectedIDs(): string[]
170
+ {
171
+ return this.state.selectedIDs;
172
+ }
173
+ setSelectedIDs(ids: string[])
174
+ {
175
+ this.setState({ selectedIDs: ids }, () =>
176
+ {
177
+ if (this.props.onSelectedIDsChanged)
178
+ this.props.onSelectedIDsChanged();
179
+ });
180
+ }
181
+ private isAllChecked(): boolean
182
+ {
183
+ return this.state.rows !== null && this.state.rows.length > 0 && this.state.selectedIDs.length === this.state.rows.length;
184
+ }
185
+
186
+ private isSomeChecked(): boolean
187
+ {
188
+ debugger
189
+ return this.state.selectedIDs.length > 0 && !this.isAllChecked();
190
+ }
191
+ override render()
192
+ {
193
+ let column_keys = Object.keys(this.state.columns);
194
+ let getColumnAttributes = (column: string, columnIndex: number) =>
195
+ {
196
+ if (this.props.getColumnAttributes)
197
+ return this.props.getColumnAttributes(column, columnIndex);
198
+ return {};
199
+ }
200
+ let getCell = (row: RowType, column: string, rowIndex: number, columnIndex: number) =>
201
+ {
202
+ if (this.props.getCell)
203
+ return this.props.getCell(row, column, rowIndex, columnIndex);
204
+ return (row as any)[column];
205
+ }
206
+ let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) =>
207
+ {
208
+ if (this.props.onRowClick)
209
+ this.props.onRowClick(e, row, rowIndex);
210
+ };
211
+ let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) =>
212
+ {
213
+ let overided = false;
214
+ if (this.props.onCellClick)
215
+ {
216
+ let res = this.props.onCellClick(e, row, column, rowIndex, columnIndex);
217
+ if (res === undefined)
218
+ {
219
+ overided = true;
220
+ } else
221
+ {
222
+ overided = res;
223
+ }
224
+ }
225
+ if (!overided)
226
+ {
227
+ this.showModal(getCell(row, column, rowIndex, columnIndex), this.state.columns[column]);
228
+ }
229
+ };
230
+ let content;
231
+ if (this.state.rows === null)
232
+ {
233
+ debugger
234
+ content = (
235
+ <NSLoading />
236
+ );
237
+ }
238
+ else if (this.state.rows.length === 0)
239
+ {
240
+ debugger
241
+ content = (
242
+ <NSNoData lable='No Data' />
243
+ );
244
+ }
245
+ else
246
+ {
247
+ debugger
248
+ content = this.state.rows.map((row, rowIndex) =>
249
+ <tr key={this.props.getRowKey(row, rowIndex)} onClick={(e) => { onRowClick(e, row, rowIndex); }}>
250
+ {
251
+ this.props.checkbox && <input className={Styles.ns_td_input} id={`checkbox_device_${this.props.getRowKey(row, rowIndex)}`} type="checkbox" checked={this.state.selectedIDs.includes(this.props.getRowKey(row, rowIndex))} onChange={(e) =>
252
+ {
253
+ let selectedIDs = this.state.selectedIDs;
254
+ let id = this.props.getRowKey(row, rowIndex);
255
+ if (e.currentTarget.checked)
256
+ selectedIDs.push(id);
257
+ else
258
+ selectedIDs = selectedIDs.filter(x => x !== id);
259
+ this.setSelectedIDs(selectedIDs)
260
+ this.setState({ selectedIDs }, () =>
261
+ {
262
+ this.setState({ indeterminate: this.isSomeChecked() });
263
+ });
264
+ }} />
265
+ }
266
+ {
267
+ column_keys.map((column, columnIndex) => (
268
+ <td {...getColumnAttributes(column, columnIndex + 1)} key={columnIndex + 1} data-label={`${this.state.columns[column]} : `} onClick={(e) => { onCellClick(e, row, column, rowIndex, columnIndex + 1); }}>
269
+ {getCell(row, column, rowIndex, columnIndex + 1)}
270
+ </td>
271
+ ))
272
+ }
273
+ </tr>);
274
+ }
275
+ return (
276
+ <div id={this.props.id}
277
+ className={`${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
278
+ style={this.props.style}>
279
+ <NSSpace size={NSSpaceSizeType.SMALL} />
280
+ <table className={Styles.ns_table} >
281
+ <thead className={Styles.ns_thead}>
282
+ <tr>
283
+ {
284
+ this.props.checkbox && <th className={Styles.ns_check_box}>
285
+ <input className={`${Styles.ns_check_box_input} ${this.state.indeterminate ? Styles.ns_indeterminate : ""}`} id='checkbox' type='checkbox' onChange={this.toggleAllCheckboxes} checked={this.getSelectedIDs().length > 0}></input>
286
+ </th>
287
+ }
288
+ {
289
+ column_keys.map(column_key => <th key={column_key} scope="col">
290
+ {this.state.columns[column_key]}
291
+ </th>)
292
+ }
293
+ </tr>
294
+ </thead>
295
+ <tbody className={Styles.ns_tbody}>
296
+ {content}
297
+ </tbody >
298
+ </table>
299
+ <NSSpace size={NSSpaceSizeType.MICRO} />
300
+ <section className={Styles.ns_pagination_button}>
301
+ <NSPagination ref={this.NSPagination} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
302
+ <NSSpace size={NSSpaceSizeType.SMALL} />
303
+ <div className={Styles.ns_button}>
304
+ {
305
+ this.state.pageSelectionMode != PageSelectionMode.Hidden &&
306
+ <NSPageSelectionModal<RowType>
307
+ current_page={1}
308
+ max_page={1}
309
+ getItems={async (page, selected) =>
310
+ {
311
+ if (selected)
312
+ {
313
+ let rows: RowType[] = [];
314
+ if (this.state.rows)
315
+ for (let i = 0; i < this.state.rows.length; i++)
316
+ {
317
+ const row = this.state.rows[i];
318
+ let id = this.props.getRowKey(row, i);
319
+ if (this.state.selectedIDs.includes(id))
320
+ rows.push(row);
321
+ }
322
+ return rows;
323
+ }
324
+ return this.props.getRows(page, this.NSPagination.current?.getCurrentPage() ?? 0);
325
+ }}
326
+ onFinish={(items: RowType[]) =>
327
+ {
328
+ if (this.state.pageSelectionMode == PageSelectionMode.Print)
329
+ this.print(items);
330
+ else if (this.state.pageSelectionMode == PageSelectionMode.CSV)
331
+ this.exportCSV(items);
332
+ }}
333
+ onClose={() => { this.setState({ pageSelectionMode: PageSelectionMode.Hidden }); }
334
+ }
335
+ />
336
+ }
337
+ <NSButton title='Chart' icon={{ src: "https://static.namirasoft.com/image/concept/chart/blue.svg" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
338
+ <NSButton title='Print' icon={{ src: "https://static.namirasoft.com/image/concept/print/blue.svg" }} onClick={() => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
339
+ <NSButton title='Export' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
340
+ <NSButton title='Refresh' icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }} onClick={() =>
341
+ {
342
+ this.reload(null, null);
343
+ }} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
344
+
345
+ </div>
346
+ </section>
347
+ <NSSpace size={NSSpaceSizeType.SMALL} />
348
+ <NSModal
349
+ show={this.state.model.show}
350
+ description={this.state.model.description}
351
+ onClose={() => { this.hideModal(); }}
352
+ title={this.state.title}
353
+ />
354
+ </div >
355
+ );
356
+ }
354
357
  }