namirasoft-site-react 1.3.307 → 1.3.309

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