@visns-studio/visns-components 5.2.4 → 5.2.6

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 +58 -17
  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.6",
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) ||
@@ -432,7 +454,7 @@ function GenericDashboard({ setting, userProfile }) {
432
454
  <ResponsivePie data={widgetData} {...widget.props} />
433
455
  );
434
456
  case 'bar': {
435
- if (widgetData.keys && widget.props.keys) {
457
+ if (widgetData.keys) {
436
458
  widget.props.keys = widgetData.keys;
437
459
  }
438
460
  let legendMapping = {};
@@ -465,10 +487,12 @@ function GenericDashboard({ setting, userProfile }) {
465
487
  }
466
488
  const barData =
467
489
  widgetData.bar?.data || widgetData.data || widgetData;
490
+
468
491
  if (barData?.length > 0) {
469
492
  return (
470
493
  <div style={{ height: widget.height || '600px' }}>
471
494
  <ResponsiveBar
495
+ key={`${widget.id}-${widget.size}`}
472
496
  data={barData}
473
497
  {...widget.props}
474
498
  />
@@ -481,6 +505,7 @@ function GenericDashboard({ setting, userProfile }) {
481
505
  if (widgetData.length > 0) {
482
506
  return (
483
507
  <ResponsiveLine
508
+ key={`${widget.id}-${widget.size}`}
484
509
  data={widgetData}
485
510
  {...widget.props}
486
511
  />
@@ -816,6 +841,7 @@ function GenericDashboard({ setting, userProfile }) {
816
841
  : styles.editModeWidgetNormal
817
842
  : ''
818
843
  }`}
844
+ style={editMode ? { cursor: 'grab' } : {}}
819
845
  {...(editMode && {
820
846
  'data-swapy-slot': `widget-slot-${index}`,
821
847
  })}
@@ -845,25 +871,40 @@ function GenericDashboard({ setting, userProfile }) {
845
871
  </div>
846
872
  )}
847
873
  {editMode && (
848
- <div className={styles.resizeTools}>
849
- {(widget.size || '1/3') !== '1/3' && (
874
+ <div className={styles.widgetTools}>
875
+ <div className={styles.resizeTools}>
850
876
  <button
851
877
  onClick={() =>
852
- changeSize(widget.id, 'decrease')
878
+ toggleHighlight(widget.id)
853
879
  }
854
880
  >
855
- –
881
+ <Star strokeWidth={2} size={12} />
856
882
  </button>
857
- )}
858
- {(widget.size || '1/3') !== 'full' && (
859
- <button
860
- onClick={() =>
861
- changeSize(widget.id, 'increase')
862
- }
863
- >
864
- +
865
- </button>
866
- )}
883
+ {(widget.size || '1/3') !== '1/3' && (
884
+ <button
885
+ onClick={() =>
886
+ changeSize(
887
+ widget.id,
888
+ 'decrease'
889
+ )
890
+ }
891
+ >
892
+ <Minus strokeWidth={2} size={12} />
893
+ </button>
894
+ )}
895
+ {(widget.size || '1/3') !== 'full' && (
896
+ <button
897
+ onClick={() =>
898
+ changeSize(
899
+ widget.id,
900
+ 'increase'
901
+ )
902
+ }
903
+ >
904
+ <Plus strokeWidth={2} size={12} />
905
+ </button>
906
+ )}
907
+ </div>
867
908
  </div>
868
909
  )}
869
910
  </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 {