@visns-studio/visns-components 5.0.20 → 5.0.22

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/crm/DataGrid.jsx +36 -17
  3. package/src/components/crm/generic/GenericDashboard.jsx +83 -55
package/package.json CHANGED
@@ -77,7 +77,7 @@
77
77
  "react-dom": "^17.0.0 || ^18.0.0"
78
78
  },
79
79
  "name": "@visns-studio/visns-components",
80
- "version": "5.0.20",
80
+ "version": "5.0.22",
81
81
  "description": "Various packages to assist in the development of our Custom Applications.",
82
82
  "main": "src/index.js",
83
83
  "files": [
package/src/components/crm/DataGrid.jsx CHANGED
@@ -31,15 +31,18 @@ import { toast } from 'react-toastify';
31
31
  import {
32
32
  Alarm,
33
33
  ArrowCounterClockwise,
34
+ ArrowCycle,
34
35
  Backspace,
35
36
  Check,
36
37
  CircleCheck,
37
38
  CircleX,
38
39
  Clock,
39
40
  CloudDownload,
41
+ CloudUpload,
40
42
  Copy,
41
43
  Edit,
42
44
  Envelope,
45
+ File,
43
46
  Folder,
44
47
  Image,
45
48
  Inbox,
@@ -82,25 +85,32 @@ const loadData = async (
82
85
 
83
86
  if (filterValue) {
84
87
  filterValue.forEach((fv) => {
85
- const identifier = fv.key ? fv.key : fv.name;
88
+ const identifier = fv.whereHas?.column || fv.key || fv.name;
86
89
  const existingIndex = params.where.findIndex(
87
90
  (w) => w.id === identifier
88
91
  );
89
92
 
90
- if (fv.value !== null && fv.value !== '') {
93
+ if (
94
+ fv.value !== undefined &&
95
+ fv.value !== null &&
96
+ fv.value !== ''
97
+ ) {
98
+ const tempParamsObject = {
99
+ id: identifier,
100
+ value: fv.value,
101
+ operator: fv.operator,
102
+ ...(fv.whereHas?.relation && {
103
+ whereHas: fv.whereHas.relation,
104
+ }),
105
+ };
106
+
91
107
  if (existingIndex !== -1) {
92
- params.where[existingIndex].value = fv.value;
108
+ params.where[existingIndex] = tempParamsObject;
93
109
  } else {
94
- params.where.push({
95
- id: identifier,
96
- value: fv.value,
97
- operator: fv.operator,
98
- });
99
- }
100
- } else {
101
- if (existingIndex !== -1) {
102
- params.where.splice(existingIndex, 1);
110
+ params.where.push(tempParamsObject);
103
111
  }
112
+ } else if (existingIndex !== -1) {
113
+ params.where.splice(existingIndex, 1);
104
114
  }
105
115
  });
106
116
  }
@@ -376,6 +386,11 @@ const DataGrid = forwardRef(
376
386
  const handleSettingClick = (s, d) => {
377
387
  switch (s.id) {
378
388
  case 'activate':
389
+ case 'arrowCycle':
390
+ case 'cloudUpload':
391
+ case 'envelope':
392
+ case 'file':
393
+ case 'image':
379
394
  CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
380
395
  toast.success(result.message);
381
396
  });
@@ -500,11 +515,6 @@ const DataGrid = forwardRef(
500
515
  ],
501
516
  });
502
517
  break;
503
- case 'envelope':
504
- CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
505
- toast.success(result.message);
506
- });
507
- break;
508
518
  case 'gallery':
509
519
  // Function to access nested property using a series of keys
510
520
  const getNestedValue = (data, keys) =>
@@ -1100,6 +1110,10 @@ const DataGrid = forwardRef(
1100
1110
  return getIconComponent(CircleCheck);
1101
1111
  case 'archive':
1102
1112
  return getIconComponent(ShippingBoxV1);
1113
+ case 'arrowCycle':
1114
+ return getIconComponent(ArrowCycle);
1115
+ case 'cloudUpload':
1116
+ return getIconComponent(CloudUpload);
1103
1117
  case 'oauth2':
1104
1118
  return getIconComponent(LockOn);
1105
1119
  case 'clone':
@@ -1114,8 +1128,12 @@ const DataGrid = forwardRef(
1114
1128
  return getIconComponent(Envelope);
1115
1129
  case 'family':
1116
1130
  return getIconComponent(Network);
1131
+ case 'file':
1132
+ return getIconComponent(File);
1117
1133
  case 'gallery':
1118
1134
  return getIconComponent(Image);
1135
+ case 'image':
1136
+ return getIconComponent(Image);
1119
1137
  case 'link':
1120
1138
  return getIconComponent(LinkOut);
1121
1139
  case 'primary':
@@ -2487,6 +2505,7 @@ const DataGrid = forwardRef(
2487
2505
  operator: column.filter.operator,
2488
2506
  type: column.filter.type,
2489
2507
  value: filterValue,
2508
+ whereHas: column.filter.whereHas || {},
2490
2509
  reset: column.filter.reset
2491
2510
  ? column.filter.reset
2492
2511
  : [],
package/src/components/crm/generic/GenericDashboard.jsx CHANGED
@@ -23,56 +23,55 @@ function GenericDashboard({ setting }) {
23
23
  const [modalShow, setModalShow] = useState(false);
24
24
  const [modalContent, setModalContent] = useState(null);
25
25
 
26
- useEffect(() => {
27
- const fetchData = async () => {
28
- try {
29
- const promises = setting.widgets.map(async (widget) => {
30
- // If filters have a URL key, fetch initial data
31
- if (widget.filters) {
32
- for (const filter of widget.filters) {
33
- if (filter.url) {
34
- const initialFilterData = await CustomFetch(
35
- filter.url,
36
- 'POST',
37
- filter.defaultParams || {}
38
- );
39
-
40
- setDropdowns((prevFilters) => ({
41
- ...prevFilters,
42
- [widget.id]: {
43
- ...prevFilters[widget.id],
44
- [filter.id]:
45
- initialFilterData?.data?.data || [],
46
- },
47
- }));
48
- }
26
+ const fetchData = async (appliedFilters = {}) => {
27
+ try {
28
+ const promises = setting.widgets.map(async (widget) => {
29
+ const widgetFilters = appliedFilters[widget.id] || {};
30
+
31
+ // Fetch dropdown data if required
32
+ if (widget.filters) {
33
+ for (const filter of widget.filters) {
34
+ if (filter.url) {
35
+ const initialFilterData = await CustomFetch(
36
+ filter.url,
37
+ 'POST',
38
+ filter.defaultParams || {}
39
+ );
40
+ setDropdowns((prevFilters) => ({
41
+ ...prevFilters,
42
+ [widget.id]: {
43
+ ...prevFilters[widget.id],
44
+ [filter.id]:
45
+ initialFilterData?.data?.data || [],
46
+ },
47
+ }));
49
48
  }
50
49
  }
50
+ }
51
51
 
52
- // Fetch widget data
53
- return CustomFetch(
54
- widget.api.url,
55
- widget.api.method,
56
- widget.api.params || {}
57
- );
58
- });
59
-
60
- const results = await Promise.all(promises);
61
- const fetchedData = setting.widgets.reduce(
62
- (acc, widget, index) => {
63
- acc[widget.id] = results[index].data;
64
- return acc;
65
- },
66
- {}
52
+ // Fetch widget data with filters
53
+ return CustomFetch(
54
+ widget.api.url,
55
+ widget.api.method,
56
+ widgetFilters
67
57
  );
58
+ });
68
59
 
69
- setData(fetchedData);
70
- } catch (error) {
71
- console.error('Error fetching dashboard data:', error);
72
- }
73
- };
60
+ const results = await Promise.all(promises);
61
+
62
+ const fetchedData = setting.widgets.reduce((acc, widget, index) => {
63
+ acc[widget.id] = results[index]?.data;
64
+ return acc;
65
+ }, {});
74
66
 
75
- fetchData();
67
+ setData(fetchedData);
68
+ } catch (error) {
69
+ console.error('Error fetching dashboard data:', error);
70
+ }
71
+ };
72
+
73
+ useEffect(() => {
74
+ fetchData(); // Fetch initial data
76
75
  }, [setting]);
77
76
 
78
77
  const openModal = (widgetId) => {
@@ -94,7 +93,36 @@ function GenericDashboard({ setting }) {
94
93
  }));
95
94
  };
96
95
 
97
- const handleFilterSelectChange = (id, action, value) => {};
96
+ const handleFilterSelectChange = (value, action, id) => {
97
+ const widgetId = id.split('.')[0];
98
+ const filterId = id.split('.')[1];
99
+
100
+ if (action.action === 'select-option') {
101
+ setFilters((prevFilters) => ({
102
+ ...prevFilters,
103
+ [widgetId]: {
104
+ ...prevFilters[widgetId],
105
+ [filterId]: value,
106
+ },
107
+ }));
108
+ } else if (action.action === 'clear') {
109
+ setFilters((prevFilters) => ({
110
+ ...prevFilters,
111
+ [widgetId]: {
112
+ ...prevFilters[widgetId],
113
+ [filterId]: [],
114
+ },
115
+ }));
116
+ } else if (action.action === 'remove-value') {
117
+ setFilters((prevFilters) => ({
118
+ ...prevFilters,
119
+ [widgetId]: {
120
+ ...prevFilters[widgetId],
121
+ [filterId]: value,
122
+ },
123
+ }));
124
+ }
125
+ };
98
126
 
99
127
  const renderFilters = (widget) => {
100
128
  if (!widget.filters || widget.filters.length === 0) return null;
@@ -144,19 +172,21 @@ function GenericDashboard({ setting }) {
144
172
  {filter.label}
145
173
  </label>
146
174
  <MultiSelect
147
- id={filter.id}
148
- isMulti
175
+ settings={{
176
+ id: `${widget.id}.${filter.id}`,
177
+ }}
178
+ multi={true}
149
179
  options={
150
180
  dropdowns[widget.id]?.[
151
181
  filter.id
152
182
  ] || []
153
183
  }
154
- value={
184
+ inputValue={
155
185
  filters[widget.id]?.[
156
186
  filter.id
157
187
  ] || []
158
188
  }
159
- onChange={handleFilterChange}
189
+ onChange={handleFilterSelectChange}
160
190
  style={{
161
191
  multi_select_height: '52px',
162
192
  }}
@@ -171,11 +201,7 @@ function GenericDashboard({ setting }) {
171
201
  <button
172
202
  className={`${styles.btn} ${styles['btn-primary']}`}
173
203
  onClick={() => {
174
- console.log(
175
- 'Filters applied:',
176
- filters[widget.id]
177
- );
178
- // Logic to apply filters can be added here
204
+ fetchData(filters); // Trigger fetchData with the current filters
179
205
  }}
180
206
  >
181
207
  Apply Filters
@@ -187,6 +213,8 @@ function GenericDashboard({ setting }) {
187
213
  ...prevFilters,
188
214
  [widget.id]: {},
189
215
  }));
216
+
217
+ fetchData(); // Reset filters and fetch data
190
218
  }}
191
219
  >
192
220
  Clear Filters
@@ -211,7 +239,7 @@ function GenericDashboard({ setting }) {
211
239
  widget.props.keys = widgetData.keys;
212
240
  }
213
241
 
214
- const barData = widgetData.bar.data || widgetData;
242
+ const barData = widgetData.bar?.data || widgetData;
215
243
 
216
244
  return (
217
245
  <div style={{ height: '600px' }}>