@asaleh37/ui-base 25.6.2-0.4 → 25.6.17-1

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 (161) hide show
  1. package/README.md +51 -51
  2. package/dist/index.d.ts +0 -4
  3. package/dist/index.js +6 -6
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +6 -6
  6. package/dist/index.mjs.map +1 -1
  7. package/eslint.config.js +29 -29
  8. package/index.html +13 -13
  9. package/package.json +119 -120
  10. package/rollup.config-1748377725725.cjs +50 -50
  11. package/rollup.config.js +45 -45
  12. package/src/components/App.tsx +123 -123
  13. package/src/components/BaseApp.tsx +53 -53
  14. package/src/components/administration/admin/OrgMemberRoleForm.tsx +83 -83
  15. package/src/components/administration/admin/OrganizationApplicationModuleGrid.tsx +107 -107
  16. package/src/components/administration/admin/OrganizationGrid.tsx +82 -83
  17. package/src/components/administration/admin/OrganizationMemberGrid.tsx +176 -176
  18. package/src/components/administration/admin/OrganizationMemberRoleGrid.tsx +87 -87
  19. package/src/components/administration/admin/OrganizationRankGrid.tsx +133 -133
  20. package/src/components/administration/admin/OrganizationUnitGrid.tsx +143 -143
  21. package/src/components/administration/admin/OrganizationUnitTypeGrid.tsx +108 -108
  22. package/src/components/administration/admin/PersonGrid.tsx +231 -334
  23. package/src/components/administration/admin/RoleAuthoritiesForm.tsx +82 -82
  24. package/src/components/administration/admin/SystemApplicationAuthorityGrid.tsx +126 -117
  25. package/src/components/administration/admin/SystemApplicationGrid.tsx +83 -83
  26. package/src/components/administration/admin/SystemApplicationModuleGrid.tsx +96 -96
  27. package/src/components/administration/admin/SystemApplicationRoleAuthorityGrid.tsx +67 -75
  28. package/src/components/administration/admin/SystemApplicationRoleGrid.tsx +116 -116
  29. package/src/components/administration/dev/AttachmentConfigGrid.tsx +213 -223
  30. package/src/components/administration/dev/AttachmentGrid.tsx +172 -172
  31. package/src/components/administration/dev/BluePrintGrid.tsx +129 -129
  32. package/src/components/administration/dev/DashboardGrid.tsx +173 -173
  33. package/src/components/administration/dev/DashboardWidgetGrid.tsx +164 -164
  34. package/src/components/administration/dev/DataQueryGrid.tsx +206 -206
  35. package/src/components/administration/dev/DataQueryParameterGrid.tsx +191 -191
  36. package/src/components/administration/dev/DataQueryParametersForm.tsx +84 -84
  37. package/src/components/administration/dev/DatasourceConnectionGrid.tsx +150 -150
  38. package/src/components/administration/dev/EntityParameterGrid.tsx +279 -279
  39. package/src/components/administration/dev/LookupGrid.tsx +120 -120
  40. package/src/components/administration/dev/MailAttachmentGrid.tsx +155 -155
  41. package/src/components/administration/dev/MailBodyGrid.tsx +216 -216
  42. package/src/components/administration/dev/MailNotificationQueueGrid.tsx +245 -245
  43. package/src/components/administration/dev/MailRecipientGrid.tsx +169 -169
  44. package/src/components/administration/dev/MailSenderConfigGrid.tsx +478 -478
  45. package/src/components/administration/dev/MailTemplateGrid.tsx +384 -384
  46. package/src/components/administration/dev/NotificationGrid.tsx +432 -432
  47. package/src/components/administration/dev/NotificationQueueGrid.tsx +222 -222
  48. package/src/components/administration/dev/ReportGrid.tsx +504 -506
  49. package/src/components/administration/dev/ReportParameterGrid.tsx +186 -186
  50. package/src/components/administration/dev/ReportParametersForm.tsx +84 -84
  51. package/src/components/administration/dev/WidgetGrid.tsx +431 -431
  52. package/src/components/administration/dev/WorkflowDocumentActionGrid.tsx +264 -264
  53. package/src/components/administration/dev/WorkflowDocumentActionHistoryGrid.tsx +172 -172
  54. package/src/components/administration/dev/WorkflowDocumentActionMailGrid.tsx +161 -161
  55. package/src/components/administration/dev/WorkflowDocumentGrid.tsx +377 -377
  56. package/src/components/administration/dev/WorkflowDocumentMailLogGrid.tsx +218 -218
  57. package/src/components/administration/dev/WorkflowDocumentStatusGrid.tsx +243 -243
  58. package/src/components/common/ChangeOrgForm.tsx +81 -81
  59. package/src/components/common/Home.tsx +44 -43
  60. package/src/components/common/LanguageSwitcher.tsx +25 -25
  61. package/src/components/common/LayoutHandlers.tsx +11 -11
  62. package/src/components/common/LoadingMask.tsx +24 -24
  63. package/src/components/common/Login.tsx +214 -214
  64. package/src/components/common/MyNotificationsPanel.tsx +104 -109
  65. package/src/components/common/NotificationItem.tsx +138 -138
  66. package/src/components/index.ts +9 -9
  67. package/src/components/templates/DataEntryTemplates/DataEntryTypes.ts +324 -324
  68. package/src/components/templates/DataEntryTemplates/DataEntryUtil.ts +248 -248
  69. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormAction.tsx +60 -60
  70. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormElementField.tsx +231 -231
  71. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormElementGroup.tsx +106 -106
  72. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/CheckBox.tsx +64 -64
  73. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/ComboBox.tsx +93 -93
  74. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/Datefield.tsx +65 -65
  75. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/DatetimeField.tsx +64 -64
  76. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/FiltersPanel.tsx +237 -237
  77. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/SystemLookupCombobox.tsx +55 -55
  78. package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField.tsx +17 -17
  79. package/src/components/templates/DataEntryTemplates/TemplateDataForm/TemplateForm.tsx +388 -387
  80. package/src/components/templates/DataEntryTemplates/TemplateDataGrid/DataGridColumnsUtil.tsx +189 -189
  81. package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid.tsx +998 -998
  82. package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGridMultiRecordAction.tsx +89 -89
  83. package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGridRecordAction.tsx +95 -95
  84. package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGridTopBar.tsx +227 -227
  85. package/src/components/templates/TransferList.tsx +257 -257
  86. package/src/components/templates/Window/ConfirmationWindow.tsx +55 -55
  87. package/src/components/templates/attachment/AttachmentCard.tsx +141 -141
  88. package/src/components/templates/attachment/AttachmentImageViewer.tsx +45 -45
  89. package/src/components/templates/attachment/AttachmentPanel.tsx +271 -271
  90. package/src/components/templates/index.ts +33 -33
  91. package/src/components/templates/report/ExcelReportViewer.tsx +72 -71
  92. package/src/components/templates/report/ReportViewer.tsx +383 -382
  93. package/src/components/templates/visuals/DashboardRouteView.tsx +9 -9
  94. package/src/components/templates/visuals/DashboardViewer.tsx +148 -148
  95. package/src/components/templates/visuals/WidgetViewer.tsx +198 -198
  96. package/src/components/templates/visuals/charts/TemplateBarChart.tsx +23 -23
  97. package/src/components/templates/visuals/charts/TemplateDataCard.tsx +35 -35
  98. package/src/components/templates/visuals/charts/TemplateGauge.tsx +21 -21
  99. package/src/components/templates/visuals/charts/TemplateLineChart.tsx +22 -22
  100. package/src/components/templates/visuals/charts/TemplateLineProgress.tsx +42 -42
  101. package/src/components/templates/visuals/charts/TemplatePieChart.tsx +24 -24
  102. package/src/components/templates/workflow/WorkflowDocumentPanel.tsx +606 -606
  103. package/src/components/templates/workflow/WorkflowDocumentTimeLine.tsx +140 -140
  104. package/src/components/templates/workflow/WorkflowRouteComponent.tsx +14 -14
  105. package/src/hooks/UseConfirmationWindow.tsx +54 -54
  106. package/src/hooks/UseMobile.tsx +13 -13
  107. package/src/hooks/UseSession.tsx +40 -59
  108. package/src/hooks/UseWindow.tsx +107 -107
  109. package/src/hooks/index.ts +7 -7
  110. package/src/hooks/useApiActions.ts +124 -124
  111. package/src/hooks/useAxios.tsx +316 -316
  112. package/src/hooks/useInterval.tsx +23 -23
  113. package/src/hooks/useLoadingMask.tsx +16 -16
  114. package/src/hooks/useLookupGridColumn.tsx +35 -35
  115. package/src/index.ts +4 -4
  116. package/src/layout/DrawerHeader.tsx +10 -10
  117. package/src/layout/Layout.tsx +90 -90
  118. package/src/layout/MainContent.tsx +114 -117
  119. package/src/layout/MobileDrawer.tsx +103 -103
  120. package/src/layout/NavigationTree.tsx +291 -298
  121. package/src/layout/NotificationButton.tsx +207 -207
  122. package/src/layout/RouteWrapper.tsx +36 -63
  123. package/src/layout/SideBar.tsx +85 -85
  124. package/src/layout/TopBar.tsx +217 -218
  125. package/src/locales/arabic/adminLocalsAr.json +93 -93
  126. package/src/locales/arabic/common.json +44 -44
  127. package/src/locales/arabic/devLocalsAr.json +317 -317
  128. package/src/locales/arabic/index.ts +9 -9
  129. package/src/locales/english/adminLocalsEn.json +96 -96
  130. package/src/locales/english/common.json +43 -43
  131. package/src/locales/english/devLocalsEn.json +318 -318
  132. package/src/locales/english/index.ts +9 -9
  133. package/src/locales/i18n.ts +8 -8
  134. package/src/locales/index.ts +9 -9
  135. package/src/main.tsx +23 -23
  136. package/src/navigationItems/Administration/adminNavigationItems.tsx +222 -223
  137. package/src/navigationItems/Administration/index.tsx +16 -16
  138. package/src/navigationItems/common/CommonNavigationItems.tsx +12 -12
  139. package/src/navigationItems/common/index.tsx +7 -7
  140. package/src/navigationItems/index.tsx +34 -35
  141. package/src/redux/features/administration/AdministrationStoresMetaData.ts +126 -148
  142. package/src/redux/features/common/AppInfoSlice.ts +63 -65
  143. package/src/redux/features/common/AppLayoutSlice.ts +29 -29
  144. package/src/redux/features/common/CommonStoreSlice.ts +44 -44
  145. package/src/redux/features/common/LoadingMaskSlice.ts +30 -30
  146. package/src/redux/features/common/SideBarSlice.ts +27 -27
  147. package/src/redux/features/common/UserSessionSlice.ts +54 -54
  148. package/src/redux/store.ts +29 -29
  149. package/src/routes/administration/adminRoutes.tsx +99 -99
  150. package/src/routes/administration/devRoutes.tsx +129 -129
  151. package/src/routes/administration/index.ts +8 -8
  152. package/src/routes/index.ts +11 -11
  153. package/src/routes/types/index.ts +5 -6
  154. package/src/styles/index.css +19 -19
  155. package/src/types/index.ts +8 -8
  156. package/src/util/AppUtils.ts +53 -53
  157. package/src/util/constants.ts +6 -6
  158. package/src/util/index.ts +2 -2
  159. package/tsconfig.json +135 -135
  160. package/vite.config.ts +23 -24
  161. package/.github/workflows/publish-npm.yml +0 -49
@@ -1,431 +1,431 @@
1
- import { useState } from "react";
2
- import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
3
- import {
4
- FormActionProps,
5
- FormElementProps,
6
- } from "../../templates/DataEntryTemplates/DataEntryTypes";
7
- import { useTranslation } from "react-i18next";
8
- import { useApiActions } from "../../../hooks";
9
- import { useSelector } from "react-redux";
10
- import { UseFormReturn } from "react-hook-form";
11
-
12
- type ValidationCritria = {
13
- isVisible: boolean;
14
- isMandatory: boolean;
15
- };
16
-
17
- export type WidgetType =
18
- | "LineChart"
19
- | "ColumnChart"
20
- | "PieChart"
21
- | "Card"
22
- | "CircularProgress"
23
- | "LinearProgress";
24
-
25
- type WidgetValidationOptions = {
26
- height: ValidationCritria;
27
- width: ValidationCritria;
28
- horizontalAxisField: ValidationCritria;
29
- horizontalAxisLabel: ValidationCritria;
30
- seriesKeys: ValidationCritria;
31
- verticalAxisField: ValidationCritria;
32
- verticalAxisLabel: ValidationCritria;
33
- };
34
-
35
- type validationObjectType = {
36
- [key in WidgetType]: WidgetValidationOptions;
37
- };
38
-
39
- const validationObject: validationObjectType = {
40
- LineChart: {
41
- height: { isMandatory: true, isVisible: true },
42
- width: { isMandatory: true, isVisible: true },
43
- horizontalAxisField: { isMandatory: true, isVisible: true },
44
- horizontalAxisLabel: { isMandatory: true, isVisible: true },
45
- seriesKeys: { isMandatory: false, isVisible: false },
46
- verticalAxisField: { isMandatory: true, isVisible: true },
47
- verticalAxisLabel: { isMandatory: true, isVisible: true },
48
- },
49
- ColumnChart: {
50
- height: { isMandatory: true, isVisible: true },
51
- width: { isMandatory: true, isVisible: true },
52
- horizontalAxisField: { isMandatory: true, isVisible: true },
53
- horizontalAxisLabel: { isMandatory: true, isVisible: true },
54
- seriesKeys: { isMandatory: false, isVisible: false },
55
- verticalAxisField: { isMandatory: true, isVisible: true },
56
- verticalAxisLabel: { isMandatory: true, isVisible: true },
57
- },
58
- PieChart: {
59
- height: { isMandatory: true, isVisible: true },
60
- width: { isMandatory: true, isVisible: true },
61
- horizontalAxisField: { isMandatory: true, isVisible: true },
62
- horizontalAxisLabel: { isMandatory: false, isVisible: false },
63
- seriesKeys: { isMandatory: false, isVisible: false },
64
- verticalAxisField: { isMandatory: true, isVisible: true },
65
- verticalAxisLabel: { isMandatory: false, isVisible: false },
66
- },
67
- Card: {
68
- height: { isMandatory: true, isVisible: true },
69
- width: { isMandatory: true, isVisible: true },
70
- horizontalAxisField: { isMandatory: true, isVisible: true },
71
- horizontalAxisLabel: { isMandatory: false, isVisible: false },
72
- seriesKeys: { isMandatory: false, isVisible: false },
73
- verticalAxisField: { isMandatory: true, isVisible: true },
74
- verticalAxisLabel: { isMandatory: false, isVisible: false },
75
- },
76
- CircularProgress: {
77
- height: { isMandatory: false, isVisible: false },
78
- width: { isMandatory: false, isVisible: false },
79
- horizontalAxisField: { isMandatory: false, isVisible: false },
80
- horizontalAxisLabel: { isMandatory: false, isVisible: false },
81
- seriesKeys: { isMandatory: false, isVisible: false },
82
- verticalAxisField: { isMandatory: false, isVisible: false },
83
- verticalAxisLabel: { isMandatory: false, isVisible: false },
84
- },
85
- LinearProgress: {
86
- height: { isMandatory: false, isVisible: false },
87
- width: { isMandatory: false, isVisible: false },
88
- horizontalAxisField: { isMandatory: false, isVisible: false },
89
- horizontalAxisLabel: { isMandatory: false, isVisible: false },
90
- seriesKeys: { isMandatory: false, isVisible: false },
91
- verticalAxisField: { isMandatory: false, isVisible: false },
92
- verticalAxisLabel: { isMandatory: false, isVisible: false },
93
- },
94
- };
95
-
96
- const adjustFormAccordingToWidgetType = (
97
- value: any,
98
- formActions: FormActionProps,
99
- formManager: UseFormReturn
100
- ) => {
101
- if (value && validationObject[value]) {
102
- const validationObjects: WidgetValidationOptions = validationObject[value];
103
- const fields = Object.keys(validationObjects);
104
- for (const field of fields) {
105
- const validationCritria: ValidationCritria = validationObjects[field];
106
- if (validationCritria.isVisible) {
107
- formActions.showField(field);
108
- } else {
109
- formActions.hideField(field);
110
- formManager.setValue(field, null);
111
- }
112
- }
113
- } else {
114
- formActions.hideField("height");
115
- formManager.setValue("height", null);
116
- formActions.hideField("width");
117
- formManager.setValue("width", null);
118
- formActions.hideField("horizontalAxisField");
119
- formManager.setValue("horizontalAxisField", null);
120
- formActions.hideField("horizontalAxisLabel");
121
- formManager.setValue("horizontalAxisLabel", null);
122
- formActions.hideField("seriesKeys");
123
- formManager.setValue("seriesKeys", null);
124
- formActions.hideField("verticalAxisField");
125
- formManager.setValue("verticalAxisField", null);
126
- formActions.hideField("verticalAxisLabel");
127
- formManager.setValue("verticalAxisLabel", null);
128
- }
129
- };
130
-
131
- const WidgetGrid: React.FC = () => {
132
- const { t } = useTranslation();
133
- const SystemDataQueries = useSelector(
134
- (state: any) => state.commonStores.stores.SystemDataQueries.data
135
- );
136
- const SystemWidgetTypes = useSelector(
137
- (state: any) => state.commonStores.stores.SystemWidgetTypes.data
138
- );
139
- const [data, setData] = useState([]);
140
- const apiActions = useApiActions({
141
- commonStoreKey: "SystemWidgets",
142
- deleteById: "api/v1/dev/widget",
143
- save: "api/v1/dev/widget",
144
- findById: "api/v1/dev/widget",
145
- setData: setData,
146
- });
147
-
148
- const formElements: Array<FormElementProps> = [
149
- {
150
- type: "field",
151
- mode: "props",
152
- props: {
153
- fieldLabel: "id",
154
- fieldName: "id",
155
- fieldType: "number",
156
- hidden: true,
157
- gridProps: {
158
- hidden: true,
159
- },
160
- },
161
- },
162
- {
163
- type: "field",
164
- mode: "props",
165
- props: {
166
- fieldLabel: "createTime",
167
- fieldName: "createTime",
168
- fieldType: "datetime",
169
- hidden: true,
170
- gridProps: {
171
- hidden: true,
172
- },
173
- },
174
- },
175
- {
176
- type: "field",
177
- mode: "props",
178
- props: {
179
- fieldLabel: "createdBy",
180
- fieldName: "createdBy",
181
- fieldType: "text",
182
- hidden: true,
183
- gridProps: {
184
- hidden: true,
185
- },
186
- },
187
- },
188
- {
189
- type: "field",
190
- mode: "props",
191
- props: {
192
- fieldLabel: "lastUpdateBy",
193
- fieldName: "lastUpdateBy",
194
- fieldType: "text",
195
- hidden: true,
196
- gridProps: {
197
- hidden: true,
198
- },
199
- },
200
- },
201
- {
202
- type: "field",
203
- mode: "props",
204
- props: {
205
- fieldLabel: "lastUpdateTime",
206
- fieldName: "lastUpdateTime",
207
- fieldType: "datetime",
208
- hidden: true,
209
- gridProps: {
210
- hidden: true,
211
- },
212
- },
213
- },
214
- {
215
- type: "field",
216
- mode: "props",
217
- props: {
218
- fieldLabel: "WIDGET_WIDGET_TYPE",
219
- fieldName: "widgetType",
220
- required: true,
221
- fieldType: "combobox",
222
- options: SystemWidgetTypes,
223
- optionDisplayField: "name",
224
- optionValueField: "name",
225
- formProps: {
226
- onValueChangeCallBack(
227
- value,
228
- formManager,
229
- formActions,
230
- selectedRecord
231
- ) {
232
- adjustFormAccordingToWidgetType(value, formActions, formManager);
233
- },
234
- },
235
- },
236
- },
237
- {
238
- type: "field",
239
- mode: "props",
240
- props: {
241
- fieldLabel: "Query",
242
- fieldName: "dataQueryId",
243
- required: true,
244
- fieldType: "combobox",
245
- options: SystemDataQueries,
246
- optionDisplayField: "queryName",
247
- optionValueField: "id",
248
- },
249
- },
250
- {
251
- type: "field",
252
- mode: "props",
253
- props: {
254
- fieldLabel: "WIDGET_WIDGET_NAME",
255
- fieldName: "widgetName",
256
- required: true,
257
- fieldType: "text",
258
- },
259
- },
260
- {
261
- type: "field",
262
- mode: "props",
263
- props: {
264
- fieldLabel: "WIDGET_ICON",
265
- fieldName: "icon",
266
- required: false,
267
- fieldType: "text",
268
- },
269
- },
270
-
271
- {
272
- type: "field",
273
- mode: "props",
274
- props: {
275
- fieldLabel: "WIDGET_TITLE",
276
- fieldName: "title",
277
- required: true,
278
- fieldType: "text",
279
- },
280
- },
281
- {
282
- type: "field",
283
- mode: "props",
284
- props: {
285
- fieldLabel: "WIDGET_WIDGET_DESCRIPTION",
286
- fieldName: "widgetDescription",
287
- required: false,
288
- fieldType: "text",
289
- },
290
- },
291
- {
292
- type: "field",
293
- mode: "props",
294
- props: {
295
- fieldLabel: "WIDGET_HEIGHT",
296
- fieldName: "height",
297
- required: false,
298
- fieldType: "text",
299
- },
300
- },
301
- {
302
- type: "field",
303
- mode: "props",
304
- props: {
305
- fieldLabel: "WIDGET_WIDTH",
306
- fieldName: "width",
307
- required: false,
308
- fieldType: "combobox",
309
- options: [
310
- { value: 1 },
311
- { value: 2 },
312
- { value: 3 },
313
- { value: 4 },
314
- { value: 5 },
315
- { value: 6 },
316
- { value: 7 },
317
- { value: 8 },
318
- { value: 9 },
319
- { value: 10 },
320
- { value: 11 },
321
- { value: 12 },
322
- ],
323
- optionDisplayField: "value",
324
- optionValueField: "value",
325
- },
326
- },
327
-
328
- {
329
- type: "field",
330
- mode: "props",
331
- props: {
332
- fieldLabel: "WIDGET_ENABLED",
333
- fieldName: "enabled",
334
- required: false,
335
- fieldType: "checkbox",
336
- },
337
- },
338
- {
339
- type: "group",
340
- props: {
341
- style: { padding: 1, border: "1px solid black", width: "100%" },
342
- label: "Data Specs",
343
- elements: [
344
- {
345
- type: "field",
346
- mode: "props",
347
- props: {
348
- fieldLabel: "WIDGET_HORIZONTAL_AXIS_FIELD",
349
- fieldName: "horizontalAxisField",
350
- required: false,
351
- fieldType: "text",
352
- },
353
- },
354
- {
355
- type: "field",
356
- mode: "props",
357
- props: {
358
- fieldLabel: "WIDGET_HORIZONTAL_AXIS_LABEL",
359
- fieldName: "horizontalAxisLabel",
360
- required: false,
361
- fieldType: "text",
362
- },
363
- },
364
-
365
- {
366
- type: "field",
367
- mode: "props",
368
- props: {
369
- fieldLabel: "WIDGET_SERIES_KEYS",
370
- fieldName: "seriesKeys",
371
- required: false,
372
- fieldType: "text",
373
- },
374
- },
375
-
376
- {
377
- type: "field",
378
- mode: "props",
379
- props: {
380
- fieldLabel: "WIDGET_VERTICAL_AXIS_FIELD",
381
- fieldName: "verticalAxisField",
382
- required: false,
383
- fieldType: "text",
384
- },
385
- },
386
- {
387
- type: "field",
388
- mode: "props",
389
- props: {
390
- fieldLabel: "WIDGET_VERTICAL_AXIS_LABEL",
391
- fieldName: "verticalAxisLabel",
392
- required: false,
393
- fieldType: "text",
394
- },
395
- },
396
- ],
397
- },
398
- },
399
- ];
400
-
401
- return (
402
- <TemplateGrid
403
- apiActions={apiActions}
404
- data={data}
405
- setData={setData}
406
- editMode={{
407
- editMode: "modal",
408
- specs: { modalIcon: "chart-pie", modalTitle: "Widget" },
409
- }}
410
- formElements={formElements}
411
- keyColumnName={"id"}
412
- gridTitle={t("WIDGET_PLURAL")}
413
- girdIcon="chart-pie"
414
- editAction={{ isEnabled: true, authority: "WIDGET_EDIT" }}
415
- deleteAction={{ isEnabled: true, authority: "WIDGET_DELETE" }}
416
- formLoadCallBk={(
417
- formActions: FormActionProps,
418
- formManager: UseFormReturn,
419
- record: any
420
- ) => {
421
- adjustFormAccordingToWidgetType(
422
- record.widgetType,
423
- formActions,
424
- formManager
425
- );
426
- }}
427
- />
428
- );
429
- };
430
-
431
- export default WidgetGrid;
1
+ import { useState } from "react";
2
+ import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
3
+ import {
4
+ FormActionProps,
5
+ FormElementProps,
6
+ } from "../../templates/DataEntryTemplates/DataEntryTypes";
7
+ import { useTranslation } from "react-i18next";
8
+ import { useApiActions } from "../../../hooks";
9
+ import { useSelector } from "react-redux";
10
+ import { UseFormReturn } from "react-hook-form";
11
+
12
+ type ValidationCritria = {
13
+ isVisible: boolean;
14
+ isMandatory: boolean;
15
+ };
16
+
17
+ export type WidgetType =
18
+ | "LineChart"
19
+ | "ColumnChart"
20
+ | "PieChart"
21
+ | "Card"
22
+ | "CircularProgress"
23
+ | "LinearProgress";
24
+
25
+ type WidgetValidationOptions = {
26
+ height: ValidationCritria;
27
+ width: ValidationCritria;
28
+ horizontalAxisField: ValidationCritria;
29
+ horizontalAxisLabel: ValidationCritria;
30
+ seriesKeys: ValidationCritria;
31
+ verticalAxisField: ValidationCritria;
32
+ verticalAxisLabel: ValidationCritria;
33
+ };
34
+
35
+ type validationObjectType = {
36
+ [key in WidgetType]: WidgetValidationOptions;
37
+ };
38
+
39
+ const validationObject: validationObjectType = {
40
+ LineChart: {
41
+ height: { isMandatory: true, isVisible: true },
42
+ width: { isMandatory: true, isVisible: true },
43
+ horizontalAxisField: { isMandatory: true, isVisible: true },
44
+ horizontalAxisLabel: { isMandatory: true, isVisible: true },
45
+ seriesKeys: { isMandatory: false, isVisible: false },
46
+ verticalAxisField: { isMandatory: true, isVisible: true },
47
+ verticalAxisLabel: { isMandatory: true, isVisible: true },
48
+ },
49
+ ColumnChart: {
50
+ height: { isMandatory: true, isVisible: true },
51
+ width: { isMandatory: true, isVisible: true },
52
+ horizontalAxisField: { isMandatory: true, isVisible: true },
53
+ horizontalAxisLabel: { isMandatory: true, isVisible: true },
54
+ seriesKeys: { isMandatory: false, isVisible: false },
55
+ verticalAxisField: { isMandatory: true, isVisible: true },
56
+ verticalAxisLabel: { isMandatory: true, isVisible: true },
57
+ },
58
+ PieChart: {
59
+ height: { isMandatory: true, isVisible: true },
60
+ width: { isMandatory: true, isVisible: true },
61
+ horizontalAxisField: { isMandatory: true, isVisible: true },
62
+ horizontalAxisLabel: { isMandatory: false, isVisible: false },
63
+ seriesKeys: { isMandatory: false, isVisible: false },
64
+ verticalAxisField: { isMandatory: true, isVisible: true },
65
+ verticalAxisLabel: { isMandatory: false, isVisible: false },
66
+ },
67
+ Card: {
68
+ height: { isMandatory: true, isVisible: true },
69
+ width: { isMandatory: true, isVisible: true },
70
+ horizontalAxisField: { isMandatory: true, isVisible: true },
71
+ horizontalAxisLabel: { isMandatory: false, isVisible: false },
72
+ seriesKeys: { isMandatory: false, isVisible: false },
73
+ verticalAxisField: { isMandatory: true, isVisible: true },
74
+ verticalAxisLabel: { isMandatory: false, isVisible: false },
75
+ },
76
+ CircularProgress: {
77
+ height: { isMandatory: false, isVisible: false },
78
+ width: { isMandatory: false, isVisible: false },
79
+ horizontalAxisField: { isMandatory: false, isVisible: false },
80
+ horizontalAxisLabel: { isMandatory: false, isVisible: false },
81
+ seriesKeys: { isMandatory: false, isVisible: false },
82
+ verticalAxisField: { isMandatory: false, isVisible: false },
83
+ verticalAxisLabel: { isMandatory: false, isVisible: false },
84
+ },
85
+ LinearProgress: {
86
+ height: { isMandatory: false, isVisible: false },
87
+ width: { isMandatory: false, isVisible: false },
88
+ horizontalAxisField: { isMandatory: false, isVisible: false },
89
+ horizontalAxisLabel: { isMandatory: false, isVisible: false },
90
+ seriesKeys: { isMandatory: false, isVisible: false },
91
+ verticalAxisField: { isMandatory: false, isVisible: false },
92
+ verticalAxisLabel: { isMandatory: false, isVisible: false },
93
+ },
94
+ };
95
+
96
+ const adjustFormAccordingToWidgetType = (
97
+ value: any,
98
+ formActions: FormActionProps,
99
+ formManager: UseFormReturn
100
+ ) => {
101
+ if (value && validationObject[value]) {
102
+ const validationObjects: WidgetValidationOptions = validationObject[value];
103
+ const fields = Object.keys(validationObjects);
104
+ for (const field of fields) {
105
+ const validationCritria: ValidationCritria = validationObjects[field];
106
+ if (validationCritria.isVisible) {
107
+ formActions.showField(field);
108
+ } else {
109
+ formActions.hideField(field);
110
+ formManager.setValue(field, null);
111
+ }
112
+ }
113
+ } else {
114
+ formActions.hideField("height");
115
+ formManager.setValue("height", null);
116
+ formActions.hideField("width");
117
+ formManager.setValue("width", null);
118
+ formActions.hideField("horizontalAxisField");
119
+ formManager.setValue("horizontalAxisField", null);
120
+ formActions.hideField("horizontalAxisLabel");
121
+ formManager.setValue("horizontalAxisLabel", null);
122
+ formActions.hideField("seriesKeys");
123
+ formManager.setValue("seriesKeys", null);
124
+ formActions.hideField("verticalAxisField");
125
+ formManager.setValue("verticalAxisField", null);
126
+ formActions.hideField("verticalAxisLabel");
127
+ formManager.setValue("verticalAxisLabel", null);
128
+ }
129
+ };
130
+
131
+ const WidgetGrid: React.FC = () => {
132
+ const { t } = useTranslation();
133
+ const SystemDataQueries = useSelector(
134
+ (state: any) => state.commonStores.stores.SystemDataQueries.data
135
+ );
136
+ const SystemWidgetTypes = useSelector(
137
+ (state: any) => state.commonStores.stores.SystemWidgetTypes.data
138
+ );
139
+ const [data, setData] = useState([]);
140
+ const apiActions = useApiActions({
141
+ commonStoreKey: "SystemWidgets",
142
+ deleteById: "api/v1/dev/widget",
143
+ save: "api/v1/dev/widget",
144
+ findById: "api/v1/dev/widget",
145
+ setData: setData,
146
+ });
147
+
148
+ const formElements: Array<FormElementProps> = [
149
+ {
150
+ type: "field",
151
+ mode: "props",
152
+ props: {
153
+ fieldLabel: "id",
154
+ fieldName: "id",
155
+ fieldType: "number",
156
+ hidden: true,
157
+ gridProps: {
158
+ hidden: true,
159
+ },
160
+ },
161
+ },
162
+ {
163
+ type: "field",
164
+ mode: "props",
165
+ props: {
166
+ fieldLabel: "createTime",
167
+ fieldName: "createTime",
168
+ fieldType: "datetime",
169
+ hidden: true,
170
+ gridProps: {
171
+ hidden: true,
172
+ },
173
+ },
174
+ },
175
+ {
176
+ type: "field",
177
+ mode: "props",
178
+ props: {
179
+ fieldLabel: "createdBy",
180
+ fieldName: "createdBy",
181
+ fieldType: "text",
182
+ hidden: true,
183
+ gridProps: {
184
+ hidden: true,
185
+ },
186
+ },
187
+ },
188
+ {
189
+ type: "field",
190
+ mode: "props",
191
+ props: {
192
+ fieldLabel: "lastUpdateBy",
193
+ fieldName: "lastUpdateBy",
194
+ fieldType: "text",
195
+ hidden: true,
196
+ gridProps: {
197
+ hidden: true,
198
+ },
199
+ },
200
+ },
201
+ {
202
+ type: "field",
203
+ mode: "props",
204
+ props: {
205
+ fieldLabel: "lastUpdateTime",
206
+ fieldName: "lastUpdateTime",
207
+ fieldType: "datetime",
208
+ hidden: true,
209
+ gridProps: {
210
+ hidden: true,
211
+ },
212
+ },
213
+ },
214
+ {
215
+ type: "field",
216
+ mode: "props",
217
+ props: {
218
+ fieldLabel: "WIDGET_WIDGET_TYPE",
219
+ fieldName: "widgetType",
220
+ required: true,
221
+ fieldType: "combobox",
222
+ options: SystemWidgetTypes,
223
+ optionDisplayField: "name",
224
+ optionValueField: "name",
225
+ formProps: {
226
+ onValueChangeCallBack(
227
+ value,
228
+ formManager,
229
+ formActions,
230
+ selectedRecord
231
+ ) {
232
+ adjustFormAccordingToWidgetType(value, formActions, formManager);
233
+ },
234
+ },
235
+ },
236
+ },
237
+ {
238
+ type: "field",
239
+ mode: "props",
240
+ props: {
241
+ fieldLabel: "Query",
242
+ fieldName: "dataQueryId",
243
+ required: true,
244
+ fieldType: "combobox",
245
+ options: SystemDataQueries,
246
+ optionDisplayField: "queryName",
247
+ optionValueField: "id",
248
+ },
249
+ },
250
+ {
251
+ type: "field",
252
+ mode: "props",
253
+ props: {
254
+ fieldLabel: "WIDGET_WIDGET_NAME",
255
+ fieldName: "widgetName",
256
+ required: true,
257
+ fieldType: "text",
258
+ },
259
+ },
260
+ {
261
+ type: "field",
262
+ mode: "props",
263
+ props: {
264
+ fieldLabel: "WIDGET_ICON",
265
+ fieldName: "icon",
266
+ required: false,
267
+ fieldType: "text",
268
+ },
269
+ },
270
+
271
+ {
272
+ type: "field",
273
+ mode: "props",
274
+ props: {
275
+ fieldLabel: "WIDGET_TITLE",
276
+ fieldName: "title",
277
+ required: true,
278
+ fieldType: "text",
279
+ },
280
+ },
281
+ {
282
+ type: "field",
283
+ mode: "props",
284
+ props: {
285
+ fieldLabel: "WIDGET_WIDGET_DESCRIPTION",
286
+ fieldName: "widgetDescription",
287
+ required: false,
288
+ fieldType: "text",
289
+ },
290
+ },
291
+ {
292
+ type: "field",
293
+ mode: "props",
294
+ props: {
295
+ fieldLabel: "WIDGET_HEIGHT",
296
+ fieldName: "height",
297
+ required: false,
298
+ fieldType: "text",
299
+ },
300
+ },
301
+ {
302
+ type: "field",
303
+ mode: "props",
304
+ props: {
305
+ fieldLabel: "WIDGET_WIDTH",
306
+ fieldName: "width",
307
+ required: false,
308
+ fieldType: "combobox",
309
+ options: [
310
+ { value: 1 },
311
+ { value: 2 },
312
+ { value: 3 },
313
+ { value: 4 },
314
+ { value: 5 },
315
+ { value: 6 },
316
+ { value: 7 },
317
+ { value: 8 },
318
+ { value: 9 },
319
+ { value: 10 },
320
+ { value: 11 },
321
+ { value: 12 },
322
+ ],
323
+ optionDisplayField: "value",
324
+ optionValueField: "value",
325
+ },
326
+ },
327
+
328
+ {
329
+ type: "field",
330
+ mode: "props",
331
+ props: {
332
+ fieldLabel: "WIDGET_ENABLED",
333
+ fieldName: "enabled",
334
+ required: false,
335
+ fieldType: "checkbox",
336
+ },
337
+ },
338
+ {
339
+ type: "group",
340
+ props: {
341
+ style: { padding: 1, border: "1px solid black", width: "100%" },
342
+ label: "Data Specs",
343
+ elements: [
344
+ {
345
+ type: "field",
346
+ mode: "props",
347
+ props: {
348
+ fieldLabel: "WIDGET_HORIZONTAL_AXIS_FIELD",
349
+ fieldName: "horizontalAxisField",
350
+ required: false,
351
+ fieldType: "text",
352
+ },
353
+ },
354
+ {
355
+ type: "field",
356
+ mode: "props",
357
+ props: {
358
+ fieldLabel: "WIDGET_HORIZONTAL_AXIS_LABEL",
359
+ fieldName: "horizontalAxisLabel",
360
+ required: false,
361
+ fieldType: "text",
362
+ },
363
+ },
364
+
365
+ {
366
+ type: "field",
367
+ mode: "props",
368
+ props: {
369
+ fieldLabel: "WIDGET_SERIES_KEYS",
370
+ fieldName: "seriesKeys",
371
+ required: false,
372
+ fieldType: "text",
373
+ },
374
+ },
375
+
376
+ {
377
+ type: "field",
378
+ mode: "props",
379
+ props: {
380
+ fieldLabel: "WIDGET_VERTICAL_AXIS_FIELD",
381
+ fieldName: "verticalAxisField",
382
+ required: false,
383
+ fieldType: "text",
384
+ },
385
+ },
386
+ {
387
+ type: "field",
388
+ mode: "props",
389
+ props: {
390
+ fieldLabel: "WIDGET_VERTICAL_AXIS_LABEL",
391
+ fieldName: "verticalAxisLabel",
392
+ required: false,
393
+ fieldType: "text",
394
+ },
395
+ },
396
+ ],
397
+ },
398
+ },
399
+ ];
400
+
401
+ return (
402
+ <TemplateGrid
403
+ apiActions={apiActions}
404
+ data={data}
405
+ setData={setData}
406
+ editMode={{
407
+ editMode: "modal",
408
+ specs: { modalIcon: "chart-pie", modalTitle: "Widget" },
409
+ }}
410
+ formElements={formElements}
411
+ keyColumnName={"id"}
412
+ gridTitle={t("WIDGET_PLURAL")}
413
+ girdIcon="chart-pie"
414
+ editAction={{ isEnabled: true, authority: "WIDGET_EDIT" }}
415
+ deleteAction={{ isEnabled: true, authority: "WIDGET_DELETE" }}
416
+ formLoadCallBk={(
417
+ formActions: FormActionProps,
418
+ formManager: UseFormReturn,
419
+ record: any
420
+ ) => {
421
+ adjustFormAccordingToWidgetType(
422
+ record.widgetType,
423
+ formActions,
424
+ formManager
425
+ );
426
+ }}
427
+ />
428
+ );
429
+ };
430
+
431
+ export default WidgetGrid;