@visns-studio/visns-components 5.2.4 → 5.2.5

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/generic/GenericDashboard.jsx +56 -16
  3. package/src/components/crm/generic/styles/GenericDashboard.module.scss +23 -5
package/package.json CHANGED
@@ -78,7 +78,7 @@
78
78
  "react-dom": "^17.0.0 || ^18.0.0"
79
79
  },
80
80
  "name": "@visns-studio/visns-components",
81
- "version": "5.2.4",
81
+ "version": "5.2.5",
82
82
  "description": "Various packages to assist in the development of our Custom Applications.",
83
83
  "main": "src/index.js",
84
84
  "files": [
package/src/components/crm/generic/GenericDashboard.jsx CHANGED
@@ -8,7 +8,7 @@ import Popup from 'reactjs-popup';
8
8
  import dayjs from 'dayjs';
9
9
  import parse from 'html-react-parser';
10
10
  import { createSwapy } from 'swapy';
11
- import { CircleX } from 'akar-icons';
11
+ import { CircleX, Minus, Plus, Star } from 'akar-icons';
12
12
 
13
13
  import CustomFetch from '../../crm/Fetch';
14
14
  import MultiSelect from '../../crm/MultiSelect';
@@ -207,6 +207,7 @@ function GenericDashboard({ setting, userProfile }) {
207
207
  } else if (direction === 'decrease' && currentIndex > 0) {
208
208
  newSize = order[currentIndex - 1];
209
209
  }
210
+
210
211
  return { ...widget, size: newSize };
211
212
  }
212
213
  return widget;
@@ -217,6 +218,21 @@ function GenericDashboard({ setting, userProfile }) {
217
218
  });
218
219
  };
219
220
 
221
+ // Toggle the highlight state of a widget
222
+ const toggleHighlight = (widgetId) => {
223
+ setDashboardSetting((prevSetting) => {
224
+ const updatedWidgets = prevSetting.widgets.map((widget) => {
225
+ if (widget.id === widgetId) {
226
+ return { ...widget, highlight: !widget.highlight };
227
+ }
228
+ return widget;
229
+ });
230
+ const newSetting = { ...prevSetting, widgets: updatedWidgets };
231
+ updateDashboardSetting(newSetting);
232
+ return newSetting;
233
+ });
234
+ };
235
+
220
236
  // Map widget size to a CSS class
221
237
  const getGridClass = (size) => {
222
238
  switch (size) {
@@ -398,7 +414,13 @@ function GenericDashboard({ setting, userProfile }) {
398
414
  case 'counter':
399
415
  return (
400
416
  <>
401
- <div className={styles.widgetNo}>
417
+ <div
418
+ className={`${
419
+ widget.highlight
420
+ ? styles['widgetNo-alt']
421
+ : styles.widgetNo
422
+ }`}
423
+ >
402
424
  <span>
403
425
  {(Array.isArray(widgetData) &&
404
426
  widgetData.length === 0) ||
@@ -469,6 +491,7 @@ function GenericDashboard({ setting, userProfile }) {
469
491
  return (
470
492
  <div style={{ height: widget.height || '600px' }}>
471
493
  <ResponsiveBar
494
+ key={`${widget.id}-${widget.size}`}
472
495
  data={barData}
473
496
  {...widget.props}
474
497
  />
@@ -481,6 +504,7 @@ function GenericDashboard({ setting, userProfile }) {
481
504
  if (widgetData.length > 0) {
482
505
  return (
483
506
  <ResponsiveLine
507
+ key={`${widget.id}-${widget.size}`}
484
508
  data={widgetData}
485
509
  {...widget.props}
486
510
  />
@@ -816,6 +840,7 @@ function GenericDashboard({ setting, userProfile }) {
816
840
  : styles.editModeWidgetNormal
817
841
  : ''
818
842
  }`}
843
+ style={editMode ? { cursor: 'grab' } : {}}
819
844
  {...(editMode && {
820
845
  'data-swapy-slot': `widget-slot-${index}`,
821
846
  })}
@@ -845,25 +870,40 @@ function GenericDashboard({ setting, userProfile }) {
845
870
  </div>
846
871
  )}
847
872
  {editMode && (
848
- <div className={styles.resizeTools}>
849
- {(widget.size || '1/3') !== '1/3' && (
873
+ <div className={styles.widgetTools}>
874
+ <div className={styles.resizeTools}>
850
875
  <button
851
876
  onClick={() =>
852
- changeSize(widget.id, 'decrease')
877
+ toggleHighlight(widget.id)
853
878
  }
854
879
  >
855
- –
880
+ <Star strokeWidth={2} size={12} />
856
881
  </button>
857
- )}
858
- {(widget.size || '1/3') !== 'full' && (
859
- <button
860
- onClick={() =>
861
- changeSize(widget.id, 'increase')
862
- }
863
- >
864
- +
865
- </button>
866
- )}
882
+ {(widget.size || '1/3') !== '1/3' && (
883
+ <button
884
+ onClick={() =>
885
+ changeSize(
886
+ widget.id,
887
+ 'decrease'
888
+ )
889
+ }
890
+ >
891
+ <Minus strokeWidth={2} size={12} />
892
+ </button>
893
+ )}
894
+ {(widget.size || '1/3') !== 'full' && (
895
+ <button
896
+ onClick={() =>
897
+ changeSize(
898
+ widget.id,
899
+ 'increase'
900
+ )
901
+ }
902
+ >
903
+ <Plus strokeWidth={2} size={12} />
904
+ </button>
905
+ )}
906
+ </div>
867
907
  </div>
868
908
  )}
869
909
  </div>
package/src/components/crm/generic/styles/GenericDashboard.module.scss CHANGED
@@ -190,6 +190,22 @@
190
190
  padding: 0 0 2rem 0;
191
191
  box-sizing: border-box;
192
192
 
193
+ span {
194
+ width: 100%;
195
+ display: block;
196
+ text-align: center;
197
+ font-weight: 400;
198
+ font-size: 3em;
199
+ color: var(--primary-color);
200
+ }
201
+ }
202
+
203
+ .widgetNo-alt {
204
+ width: 100%;
205
+ height: auto;
206
+ padding: 0 0 2rem 0;
207
+ box-sizing: border-box;
208
+
193
209
  span {
194
210
  width: 100%;
195
211
  display: block;
@@ -210,11 +226,12 @@
210
226
  display: block;
211
227
  padding: 0.25em 3em;
212
228
  background: none;
213
- border-color: rgba(var(--tertiary-color-rgb), 0.05);
229
+ border-color: rgba(var(--primary-rgb), 0.05);
230
+ border-radius: 5px;
214
231
 
215
232
  &:hover {
216
233
  background: none;
217
- color: var(--tertiary-color);
234
+ border-color: rgba(var(--primary-rgb), 0.5);
218
235
  }
219
236
  }
220
237
 
@@ -437,9 +454,10 @@
437
454
 
438
455
  // Container for the edit mode toggle button.
439
456
  .editButtonContainer {
440
- display: flex;
441
- justify-content: flex-end;
442
- margin-bottom: 1rem;
457
+ position: fixed;
458
+ bottom: 1rem;
459
+ right: 1rem;
460
+ z-index: 1000; // Ensures the button stays on top of other elements
443
461
  }
444
462
 
445
463
  .editButtonContainer .btn {