@visns-studio/visns-components 5.12.10 → 5.12.11

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/generic/GenericEditableTable.jsx +50 -33
  3. package/src/components/styles/GenericEditableTable.module.scss +28 -0
package/package.json CHANGED
@@ -87,7 +87,7 @@
87
87
  "react-dom": "^17.0.0 || ^18.0.0"
88
88
  },
89
89
  "name": "@visns-studio/visns-components",
90
- "version": "5.12.10",
90
+ "version": "5.12.11",
91
91
  "description": "Various packages to assist in the development of our Custom Applications.",
92
92
  "main": "src/index.js",
93
93
  "files": [
package/src/components/generic/GenericEditableTable.jsx CHANGED
@@ -59,13 +59,35 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
59
59
  <div className={styles.cpicker__btn}>
60
60
  <button
61
61
  ref={buttonRef}
62
- style={value ? { background: value } : {}}
62
+ style={value ? {
63
+ background: value,
64
+ border: '1px solid rgba(0,0,0,0.2)',
65
+ borderRadius: '3px',
66
+ width: '20px',
67
+ height: '20px',
68
+ padding: '0',
69
+ cursor: 'pointer',
70
+ display: 'flex',
71
+ alignItems: 'center',
72
+ justifyContent: 'center'
73
+ } : {
74
+ background: 'transparent',
75
+ border: '1px solid rgba(0,0,0,0.2)',
76
+ borderRadius: '3px',
77
+ width: '20px',
78
+ height: '20px',
79
+ padding: '0',
80
+ cursor: 'pointer',
81
+ display: 'flex',
82
+ alignItems: 'center',
83
+ justifyContent: 'center'
84
+ }}
63
85
  onClick={(e) => {
64
86
  e.preventDefault();
65
87
  setColorPickerShow(!colorPickerShow);
66
88
  }}
67
89
  >
68
- <Droplets size={20} style={{ color: 'black' }} />
90
+ <Droplets size={16} style={{ color: value ? 'white' : 'black' }} />
69
91
  </button>
70
92
 
71
93
  {colorPickerShow &&
@@ -203,12 +225,9 @@ const GenericEditableTable = ({
203
225
  const sortBySortOrder = (dataArray) =>
204
226
  [...dataArray].sort((a, b) => a.sort_order - b.sort_order);
205
227
 
206
- // Return background color if there's a column of type 'colour'
228
+ // Return background color from row_colour field
207
229
  const getRowBackground = (entry) => {
208
- const colourColumn = columns.find((col) => col.type === 'colour');
209
- return colourColumn && entry[colourColumn.id]
210
- ? entry[colourColumn.id]
211
- : undefined;
230
+ return entry.row_colour || undefined;
212
231
  };
213
232
 
214
233
  // Calculate total for columns of type 'total'
@@ -625,14 +644,8 @@ const GenericEditableTable = ({
625
644
 
626
645
  switch (column.type) {
627
646
  case 'colour':
628
- return (
629
- <ColourPicker
630
- value={entry[column.id] || ''}
631
- columnId={column.id}
632
- keyCounter={keyCounter}
633
- onChange={handleFieldChange}
634
- />
635
- );
647
+ // Colour picker is now rendered in the action column
648
+ return null;
636
649
  case 'currency':
637
650
  case 'number':
638
651
  return (
@@ -754,16 +767,8 @@ const GenericEditableTable = ({
754
767
  const value = newRowData ? newRowData[column.id] : '';
755
768
  switch (column.type) {
756
769
  case 'colour':
757
- return (
758
- <ColourPicker
759
- value={value}
760
- columnId={column.id}
761
- keyCounter={0}
762
- onChange={(val) =>
763
- handleNewFieldChange(val, column.id, groupId)
764
- }
765
- />
766
- );
770
+ // Colour picker is now rendered in the action column
771
+ return null;
767
772
  case 'currency':
768
773
  case 'number':
769
774
  return (
@@ -991,7 +996,7 @@ const GenericEditableTable = ({
991
996
  </td>
992
997
  </tr>
993
998
  <tr>
994
- {columns.map((column) =>
999
+ {columns.filter(col => col.type !== 'colour').map((column) =>
995
1000
  renderHeaderCell(column, group)
996
1001
  )}
997
1002
  <th style={{ width: '5%' }}></th>
@@ -1027,6 +1032,12 @@ const GenericEditableTable = ({
1027
1032
  <div
1028
1033
  className={styles.tdactions}
1029
1034
  >
1035
+ <ColourPicker
1036
+ value={entry.row_colour || ''}
1037
+ columnId={'row_colour'}
1038
+ keyCounter={entry.keyCounter}
1039
+ onChange={handleFieldChange}
1040
+ />
1030
1041
  {idx > 0 && (
1031
1042
  <ArrowUp
1032
1043
  size={16}
@@ -1081,9 +1092,9 @@ const GenericEditableTable = ({
1081
1092
  (col) => col.type === 'total'
1082
1093
  ) !== -1 && (
1083
1094
  <tr className={styles.subtotalRow}>
1084
- {columns.map((col, index) => {
1095
+ {columns.filter(col => col.type !== 'colour').map((col, index) => {
1085
1096
  const totalColIndex =
1086
- columns.findIndex(
1097
+ columns.filter(col => col.type !== 'colour').findIndex(
1087
1098
  (c) =>
1088
1099
  c.type === 'total'
1089
1100
  );
@@ -1105,7 +1116,7 @@ const GenericEditableTable = ({
1105
1116
  sum +
1106
1117
  calculateTotal(
1107
1118
  entry,
1108
- columns[
1119
+ columns.filter(col => col.type !== 'colour')[
1109
1120
  totalColIndex
1110
1121
  ].keys
1111
1122
  ),
@@ -1143,7 +1154,7 @@ const GenericEditableTable = ({
1143
1154
  <table className={styles.schedulingTable}>
1144
1155
  <thead>
1145
1156
  <tr>
1146
- {columns.map((column) => renderHeaderCell(column))}
1157
+ {columns.filter(col => col.type !== 'colour').map((column) => renderHeaderCell(column))}
1147
1158
  <th style={{ width: '5%' }}></th>
1148
1159
  </tr>
1149
1160
  </thead>
@@ -1173,6 +1184,12 @@ const GenericEditableTable = ({
1173
1184
  ))}
1174
1185
  <td>
1175
1186
  <div className={styles.tdactions}>
1187
+ <ColourPicker
1188
+ value={entry.row_colour || ''}
1189
+ columnId={'row_colour'}
1190
+ keyCounter={idx}
1191
+ onChange={handleFieldChange}
1192
+ />
1176
1193
  {idx > 0 && (
1177
1194
  <ArrowUp
1178
1195
  size={16}
@@ -1216,8 +1233,8 @@ const GenericEditableTable = ({
1216
1233
  {localData.length > 0 && columns.findIndex((col) => col.type === 'total') !==
1217
1234
  -1 && (
1218
1235
  <tr className={styles.subtotalRow}>
1219
- {columns.map((col, index) => {
1220
- const totalColIndex = columns.findIndex(
1236
+ {columns.filter(col => col.type !== 'colour').map((col, index) => {
1237
+ const totalColIndex = columns.filter(col => col.type !== 'colour').findIndex(
1221
1238
  (c) => c.type === 'total'
1222
1239
  );
1223
1240
  if (
@@ -1234,7 +1251,7 @@ const GenericEditableTable = ({
1234
1251
  sum +
1235
1252
  calculateTotal(
1236
1253
  entry,
1237
- columns[totalColIndex].keys
1254
+ columns.filter(col => col.type !== 'colour')[totalColIndex].keys
1238
1255
  ),
1239
1256
  0
1240
1257
  );
package/src/components/styles/GenericEditableTable.module.scss CHANGED
@@ -21,6 +21,11 @@
21
21
 
22
22
  td {
23
23
  background-color: rgba(var(--primary-rgb), 0.05);
24
+
25
+ /* Ensure action column cells don't inherit row background */
26
+ &:has(.tdactions) {
27
+ background: rgba(var(--primary-rgb), 0.05) !important;
28
+ }
24
29
  }
25
30
 
26
31
  /* Compact styling for native input and select elements */
@@ -182,6 +187,7 @@
182
187
  justify-content: flex-start;
183
188
  align-items: center;
184
189
  gap: 0.1rem;
190
+ background: transparent !important; /* Ensure no background color interference */
185
191
 
186
192
  span {
187
193
  display: flex;
@@ -197,6 +203,28 @@
197
203
  }
198
204
  }
199
205
 
206
+ /* Color picker specific styling */
207
+ .cpicker {
208
+ display: flex;
209
+ align-items: center;
210
+
211
+ &__btn {
212
+ display: flex;
213
+ align-items: center;
214
+
215
+ button {
216
+ margin: 0;
217
+ outline: none;
218
+ transition: all 0.2s ease;
219
+
220
+ &:hover {
221
+ opacity: 0.8;
222
+ transform: scale(1.05);
223
+ }
224
+ }
225
+ }
226
+ }
227
+
200
228
  .noDataMessage {
201
229
  text-align: center;
202
230
  color: var(--primary-color);