@visns-studio/visns-components 5.0.20 → 5.0.21

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 (2) hide show
  1. package/package.json +1 -1
  2. 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.21",
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/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' }}>