@visns-studio/visns-components 5.2.14 → 5.2.16

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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/crm/Field.jsx +37 -36
  3. package/src/components/crm/generic/GenericDetail.jsx +4 -2
  4. package/src/components/crm/generic/GenericDynamic.jsx +5 -3
  5. package/src/components/crm/generic/styles/GenericDynamic.module.scss +3 -2
  6. package/src/components/crm/styles/Field.module.scss +38 -27
  7. package/src/components/crm/styles/Form.module.scss +1 -1
  8. package/src/components/styles/global.css +8 -0
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.14",
81
+ "version": "5.2.16",
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/Field.jsx CHANGED
@@ -196,7 +196,7 @@ function Field({
196
196
  setFormItemClass(`${styles.formItem} ${styles.qtrItem}`);
197
197
  break;
198
198
  default:
199
- setFormItemClass(`${styles.formItem}`);
199
+ setFormItemClass(`${styles.formItem} ${styles.halfItem}`);
200
200
  break;
201
201
  }
202
202
  }, [settings, counter]);
@@ -350,32 +350,6 @@ function Field({
350
350
  {settings.label} {settings.required ? '*' : ''}
351
351
  </span>
352
352
  );
353
- } else if (['plaintext'].includes(settings.type)) {
354
- if (settings.description) {
355
- return (
356
- <span>
357
- {settings.description
358
- ? parse(settings.description)
359
- : ''}
360
- </span>
361
- );
362
- } else {
363
- return (
364
- <span
365
- className={`${styles.fi__span} ${styles.prefocus}`}
366
- >
367
- {settings.label} {settings.required ? '*' : ''}
368
- </span>
369
- );
370
- }
371
- } else if (['plaintextheading'].includes(settings.type)) {
372
- return <h2>{settings.label ? settings.label : ''}</h2>;
373
- } else if (['section'].includes(settings.type)) {
374
- return (
375
- <div className={styles.gridtxt__header}>
376
- <span>{settings.label}</span>
377
- </div>
378
- );
379
353
  } else if (['richeditor', 'textarea'].includes(settings.type)) {
380
354
  return settings.label;
381
355
  } else if (['table_radio', 'table_text'].includes(settings.type)) {
@@ -513,7 +487,7 @@ function Field({
513
487
  settings.options.map((option, index) => (
514
488
  <div
515
489
  key={`${settings.id}-checkbox-option-${index}`}
516
- className="fi__checkboxcontainer"
490
+ className={styles.fi__checkboxcontainer}
517
491
  >
518
492
  <input
519
493
  name={settings.id}
@@ -1186,17 +1160,17 @@ function Field({
1186
1160
  );
1187
1161
  case 'radio':
1188
1162
  return settings.options?.length > 0 ? (
1189
- <div className="fi__optionscontainer">
1163
+ <div className={styles.fi__optionscontainer}>
1190
1164
  {settings.options.map((option, index) => (
1191
1165
  <div
1192
1166
  key={`${settings.id}-checkbox-option-${index}`}
1193
- className="fi__checkboxcontainer"
1167
+ className={styles.fi__checkboxcontainer}
1194
1168
  >
1195
1169
  <input
1196
1170
  name={settings.id}
1197
1171
  data-name={settings.id}
1198
1172
  type="radio"
1199
- className="fi__customcheckbox"
1173
+ className={styles.fi__customcheckbox}
1200
1174
  value={option.id}
1201
1175
  checked={
1202
1176
  parseInt(inputValue) ===
@@ -1204,7 +1178,7 @@ function Field({
1204
1178
  }
1205
1179
  onChange={onChange}
1206
1180
  />
1207
- <label className="fi__checkboxlabel">
1181
+ <label className={styles.fi__checkboxlabel}>
1208
1182
  {option.label}
1209
1183
  </label>{' '}
1210
1184
  </div>
@@ -1213,17 +1187,17 @@ function Field({
1213
1187
  ) : null;
1214
1188
  case 'radio-ajax':
1215
1189
  return options?.length > 0 ? (
1216
- <div className="fi__optionscontainer">
1190
+ <div className={styles.fi__optionscontainer}>
1217
1191
  {options.map((option, index) => (
1218
1192
  <div
1219
1193
  key={`${settings.id}-checkbox-option-${index}`}
1220
- className="fi__checkboxcontainer"
1194
+ className={styles.fi__checkboxcontainer}
1221
1195
  >
1222
1196
  <input
1223
1197
  name={settings.id}
1224
1198
  data-name={settings.id}
1225
1199
  type="radio"
1226
- className="fi__customcheckbox"
1200
+ className={styles.fi__customcheckbox}
1227
1201
  value={option.id}
1228
1202
  checked={
1229
1203
  parseInt(inputValue) ===
@@ -1231,7 +1205,7 @@ function Field({
1231
1205
  }
1232
1206
  onChange={onChange}
1233
1207
  />
1234
- <label className="fi__checkboxlabel">
1208
+ <label className={styles.fi__checkboxlabel}>
1235
1209
  {option.label}
1236
1210
  </label>{' '}
1237
1211
  </div>
@@ -1763,6 +1737,33 @@ function Field({
1763
1737
  shouldCloseOnSelect={true}
1764
1738
  />
1765
1739
  );
1740
+ case 'plaintext':
1741
+ if (settings.description) {
1742
+ return (
1743
+ <>
1744
+ {settings.description
1745
+ ? parse(settings.description)
1746
+ : ''}
1747
+ </>
1748
+ );
1749
+ } else {
1750
+ return (
1751
+ <span
1752
+ className={`${styles.fi__span} ${styles.prefocus}`}
1753
+ >
1754
+ {settings.label} {settings.required ? '*' : ''}
1755
+ </span>
1756
+ );
1757
+ }
1758
+ break;
1759
+ case 'plaintextheading':
1760
+ return <h2>{settings.label ? settings.label : ''}</h2>;
1761
+ case 'section':
1762
+ return (
1763
+ <div className={styles.gridtxt__header}>
1764
+ <span>{settings.label}</span>
1765
+ </div>
1766
+ );
1766
1767
  case 'richeditor':
1767
1768
  return (
1768
1769
  <Editor
package/src/components/crm/generic/GenericDetail.jsx CHANGED
@@ -945,13 +945,14 @@ function GenericDetail({
945
945
  .dragAndDrop ||
946
946
  'Event updated via drag and drop!'
947
947
  );
948
- handleReload();
949
948
  } catch (error) {
950
949
  console.error(
951
950
  'Error updating event:',
952
951
  error
953
952
  );
954
953
  toast.error('Error updating event.');
954
+ } finally {
955
+ handleReload();
955
956
  }
956
957
  };
957
958
 
@@ -983,13 +984,14 @@ function GenericDetail({
983
984
  activeTabConfig.config.messages
984
985
  .resize || 'Event resized!'
985
986
  );
986
- handleReload();
987
987
  } catch (error) {
988
988
  console.error(
989
989
  'Error resizing event:',
990
990
  error
991
991
  );
992
992
  toast.error('Error resizing event.');
993
+ } finally {
994
+ handleReload();
993
995
  }
994
996
  };
995
997
 
package/src/components/crm/generic/GenericDynamic.jsx CHANGED
@@ -464,7 +464,7 @@ const GenericDynamic = ({
464
464
  if (showToast) {
465
465
  toast.success('Form added successfully');
466
466
  }
467
- fetchData();
467
+ fetchData(type);
468
468
  }
469
469
  }
470
470
  } catch (err) {
@@ -538,7 +538,7 @@ const GenericDynamic = ({
538
538
 
539
539
  if (res.data.error === '') {
540
540
  toast.success('Form deleted successfully.');
541
- fetchData();
541
+ fetchData(type);
542
542
  } else {
543
543
  toast.error('Error: ' + res.data.error);
544
544
  }
@@ -597,7 +597,7 @@ const GenericDynamic = ({
597
597
 
598
598
  if (res.data.error === '') {
599
599
  toast.success('Form saved successfully.');
600
- fetchData();
600
+ fetchData(type);
601
601
  }
602
602
  } else {
603
603
  toast.error(<div>{parse(error)}</div>);
@@ -665,6 +665,8 @@ const GenericDynamic = ({
665
665
  }
666
666
  }
667
667
  }
668
+
669
+ console.info(activeForm);
668
670
  }, [activeForm]);
669
671
 
670
672
  const shouldDisplayFormList = (data, type) => {
package/src/components/crm/generic/styles/GenericDynamic.module.scss CHANGED
@@ -347,11 +347,12 @@ input[type='file']:hover {
347
347
  display: flex;
348
348
  flex-wrap: wrap;
349
349
  gap: 10px;
350
- margin-top: 8px;
350
+ margin-top: 30px;
351
351
  }
352
352
 
353
353
  .fi__checkboxcontainer {
354
- display: flex;
354
+ display: grid;
355
+ grid-template-columns: auto 1fr;
355
356
  align-items: center;
356
357
  }
357
358
 
package/src/components/crm/styles/Field.module.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  form {
34
34
  width: 100%;
35
35
  display: grid;
36
- grid-template-columns: 1fr 1fr;
36
+ grid-template-columns: 1fr 1fr 1fr 1fr;
37
37
  gap: 1em;
38
38
  }
39
39
  }
@@ -110,7 +110,8 @@
110
110
  }
111
111
 
112
112
  .fi__checkboxcontainer {
113
- display: flex;
113
+ display: grid;
114
+ grid-template-columns: auto 1fr;
114
115
  align-items: center;
115
116
  }
116
117
 
@@ -125,7 +126,17 @@
125
126
 
126
127
  .fwItem,
127
128
  .fwBuilderItem {
128
- grid-column: 1 / -1;
129
+ grid-column: 1 / -1; /* Full width */
130
+ width: 100%;
131
+ }
132
+
133
+ .halfItem {
134
+ grid-column: span 2; /* Takes up 2 out of 4 columns */
135
+ width: 100%;
136
+ }
137
+
138
+ .qtrItem {
139
+ grid-column: span 1; /* Takes up 1 out of 4 columns */
129
140
  width: 100%;
130
141
  }
131
142
 
@@ -142,33 +153,33 @@ select:not(:placeholder-shown) + .fi__span {
142
153
  }
143
154
 
144
155
  .prefocus {
145
- transform: translateY(-130%) translateX(10px) scale(0.9) !important;
146
- opacity: 1 !important;
147
- padding: 0 0.25rem !important;
148
- background: var(--tertiary-color) !important;
149
- font-weight: 400 !important;
150
- transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1) !important;
151
- z-index: 1 !important;
152
- color: rgba(var(--paragraph-rgb), 0.65) !important;
156
+ position: absolute;
157
+ top: -12px; /* Adjust based on label height */
158
+ left: 10px; /* Ensures consistency across all field sizes */
159
+ font-size: 0.85em; /* Keep it proportional */
160
+ transform: scale(0.9);
161
+ opacity: 1;
162
+ background: var(--tertiary-color);
163
+ font-weight: 400;
164
+ transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
165
+ z-index: 1;
166
+ color: rgba(var(--paragraph-rgb), 0.65);
167
+ padding: 0 0.25rem;
153
168
  }
154
169
 
155
170
  .prefocusdate {
156
- transform: translateX(10px) scale(0.9) !important;
157
- opacity: 1 !important;
158
- padding: 0 0.25rem !important;
159
- background: var(--tertiary-color) !important;
160
- font-weight: 400 !important;
161
- transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1) !important;
162
- z-index: 1 !important;
163
- color: rgba(var(--paragraph-rgb), 0.65) !important;
164
- }
165
-
166
- .qtrItem {
167
- flex-basis: 25%;
168
- }
169
-
170
- .fwItem {
171
- flex-basis: 100%;
171
+ position: absolute;
172
+ top: -12px;
173
+ left: 10px;
174
+ font-size: 0.85em;
175
+ transform: scale(0.9);
176
+ opacity: 1;
177
+ background: var(--tertiary-color);
178
+ font-weight: 400;
179
+ transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
180
+ z-index: 1;
181
+ color: rgba(var(--paragraph-rgb), 0.65);
182
+ padding: 0 0.25rem;
172
183
  }
173
184
 
174
185
  .lastItem {
package/src/components/crm/styles/Form.module.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  form {
9
9
  width: 100%;
10
10
  display: grid;
11
- grid-template-columns: 1fr 1fr;
11
+ grid-template-columns: 1fr 1fr 1fr 1fr;
12
12
  gap: 1em;
13
13
  }
14
14
  }
package/src/components/styles/global.css CHANGED
@@ -73,6 +73,14 @@ p {
73
73
  }
74
74
  }
75
75
 
76
+ .Toastify__toast-body p {
77
+ font-size: revert;
78
+ color: revert;
79
+ font-weight: revert;
80
+ line-height: revert;
81
+ margin-bottom: revert;
82
+ }
83
+
76
84
  ul {
77
85
  font-size: clamp(1rem, 2vw, 1.25rem);
78
86
  color: var(--paragraph-color);