goobs-frontend 0.9.18 → 0.9.19
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "goobs-frontend",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.19",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A comprehensive React-based libary that extends the functionality of Material-UI",
|
|
6
6
|
"license": "MIT",
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"@emotion/cache": "^11",
|
|
26
26
|
"@emotion/react": "^11",
|
|
27
27
|
"@emotion/styled": "^11",
|
|
28
|
-
"@mui/icons-material": "^
|
|
29
|
-
"@mui/material": "^
|
|
28
|
+
"@mui/icons-material": "^7",
|
|
29
|
+
"@mui/material": "^7",
|
|
30
30
|
"@storybook/addon-links": "^8",
|
|
31
31
|
"@types/lodash": "^4",
|
|
32
32
|
"formik": "^2",
|
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
"next": "15",
|
|
37
37
|
"otplib": "^12",
|
|
38
38
|
"react-datepicker": "^8",
|
|
39
|
-
"react-native": "^0.78",
|
|
40
39
|
"react-qr-code": "^2",
|
|
41
40
|
"slate": "^0.112",
|
|
42
41
|
"slate-dom": "^0.112",
|
|
@@ -65,7 +64,7 @@
|
|
|
65
64
|
"eslint-config-next": "^15",
|
|
66
65
|
"eslint-config-prettier": "^10",
|
|
67
66
|
"eslint-plugin-prettier": "^5",
|
|
68
|
-
"eslint-plugin-storybook": "^0.
|
|
67
|
+
"eslint-plugin-storybook": "^0.12",
|
|
69
68
|
"prettier": "^3",
|
|
70
69
|
"react": "^19",
|
|
71
70
|
"react-dom": "^19",
|
|
@@ -46,6 +46,7 @@ function CustomButton({
|
|
|
46
46
|
iconlocation = 'left',
|
|
47
47
|
fontlocation = 'center',
|
|
48
48
|
disabled,
|
|
49
|
+
style = {},
|
|
49
50
|
...restProps
|
|
50
51
|
}: CustomButtonProps) {
|
|
51
52
|
// Merge MUI's "disabled" with our "disableButton"
|
|
@@ -119,6 +120,7 @@ function CustomButton({
|
|
|
119
120
|
}
|
|
120
121
|
|
|
121
122
|
// Inline styles for the top-level container (Box)
|
|
123
|
+
// Merge the passed style prop with our containerStyle
|
|
122
124
|
const containerStyle: React.CSSProperties = {
|
|
123
125
|
display: 'flex',
|
|
124
126
|
flexDirection: 'column',
|
|
@@ -127,6 +129,7 @@ function CustomButton({
|
|
|
127
129
|
height: height || (isIconOnly ? '36px' : isIconAbove ? 'auto' : '40px'),
|
|
128
130
|
minHeight: isIconOnly ? '36px' : isIconAbove ? minHeight : 'auto',
|
|
129
131
|
minWidth: isIconOnly ? '36px' : 'fit-content',
|
|
132
|
+
...style, // Apply any custom styles passed through the style prop
|
|
130
133
|
}
|
|
131
134
|
|
|
132
135
|
// Style for the inner content box
|
|
@@ -43,8 +43,15 @@ function ManageRow({
|
|
|
43
43
|
handleClose()
|
|
44
44
|
break
|
|
45
45
|
case 'delete':
|
|
46
|
-
onDelete
|
|
47
|
-
|
|
46
|
+
if (onDelete) {
|
|
47
|
+
// Execute the delete operation
|
|
48
|
+
onDelete()
|
|
49
|
+
// Clear the selection by setting it to empty array
|
|
50
|
+
if (selectedRows.length > 0) {
|
|
51
|
+
// This will properly close the ManageRow component
|
|
52
|
+
handleClose()
|
|
53
|
+
}
|
|
54
|
+
}
|
|
48
55
|
break
|
|
49
56
|
case 'export':
|
|
50
57
|
if (onExport) {
|
|
@@ -125,7 +125,14 @@ function DataGrid({
|
|
|
125
125
|
onDuplicate: onDuplicate
|
|
126
126
|
? () => onDuplicate(selectedRows)
|
|
127
127
|
: undefined,
|
|
128
|
-
onDelete: onDelete
|
|
128
|
+
onDelete: onDelete
|
|
129
|
+
? () => {
|
|
130
|
+
// Call the onDelete handler and clear selection after it completes
|
|
131
|
+
onDelete(selectedRows)
|
|
132
|
+
// Clear the selection after delete operation
|
|
133
|
+
handleSelectionChange([])
|
|
134
|
+
}
|
|
135
|
+
: undefined,
|
|
129
136
|
onManage: handleManage,
|
|
130
137
|
onShow: onShow,
|
|
131
138
|
handleClose: handleManageRowClose,
|
|
@@ -254,6 +254,28 @@ const StyledFormHelperText = styled(FormHelperText)({
|
|
|
254
254
|
marginLeft: '14px',
|
|
255
255
|
})
|
|
256
256
|
|
|
257
|
+
// Create a utility function to check if a field is an ID field
|
|
258
|
+
const isIdField = (fieldName: string): boolean => {
|
|
259
|
+
if (!fieldName) return false
|
|
260
|
+
|
|
261
|
+
// Check if it's a common ID field name
|
|
262
|
+
if (fieldName.toLowerCase() === 'id' || fieldName.toLowerCase() === '_id') {
|
|
263
|
+
return true
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
// Check if it contains "id" or "_id" as a standalone word or suffix
|
|
267
|
+
if (/(\b|_)id$/i.test(fieldName)) {
|
|
268
|
+
return true
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
// Check if it looks like a MongoDB ObjectId
|
|
272
|
+
if (/^[0-9a-f]{24}$/.test(fieldName)) {
|
|
273
|
+
return true
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
return false
|
|
277
|
+
}
|
|
278
|
+
|
|
257
279
|
const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
|
|
258
280
|
label,
|
|
259
281
|
options,
|
|
@@ -982,124 +1004,165 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
|
|
|
982
1004
|
/>
|
|
983
1005
|
)}
|
|
984
1006
|
|
|
985
|
-
{/* For simple variant - show attribute1 and attribute2 on one line */}
|
|
1007
|
+
{/* For simple variant - show attribute1 and attribute2 on one line (excluding ID fields) */}
|
|
986
1008
|
{variant === 'simple' &&
|
|
987
1009
|
!isHistoryItem &&
|
|
988
1010
|
!isCurrentInput &&
|
|
989
1011
|
!isNoHistoryPlaceholder &&
|
|
990
|
-
(
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1012
|
+
(() => {
|
|
1013
|
+
// Filter out ID attributes if showIdColumns is false
|
|
1014
|
+
const filteredAttributes = [
|
|
1015
|
+
option.attribute1,
|
|
1016
|
+
option.attribute2,
|
|
1017
|
+
].filter(attr => showIdColumns || (attr && !isIdField(attr)))
|
|
1018
|
+
|
|
1019
|
+
return filteredAttributes.length > 0 ? (
|
|
1020
|
+
<Typography
|
|
1021
|
+
fontvariant="merriparagraph"
|
|
1022
|
+
text={filteredAttributes.join(' | ')}
|
|
1023
|
+
fontcolor="rgba(0, 0, 0, 0.6)"
|
|
1024
|
+
sx={{
|
|
1025
|
+
fontSize: '12px',
|
|
1026
|
+
lineHeight: '16px',
|
|
1027
|
+
width: '100%',
|
|
1028
|
+
textAlign: 'left',
|
|
1029
|
+
}}
|
|
1030
|
+
/>
|
|
1031
|
+
) : null
|
|
1032
|
+
})()}
|
|
1005
1033
|
|
|
1006
|
-
{/* For complex variant - show attributes on separate lines */}
|
|
1034
|
+
{/* For complex variant - show attributes on separate lines (excluding ID fields) */}
|
|
1007
1035
|
{variant === 'complex' &&
|
|
1008
1036
|
!isHistoryItem &&
|
|
1009
1037
|
!isCurrentInput &&
|
|
1010
1038
|
!isNoHistoryPlaceholder && (
|
|
1011
1039
|
<>
|
|
1012
1040
|
{/* First line of attributes */}
|
|
1013
|
-
{(
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1041
|
+
{(() => {
|
|
1042
|
+
const filteredAttributes = [
|
|
1043
|
+
option.attribute1,
|
|
1044
|
+
option.attribute2,
|
|
1045
|
+
].filter(
|
|
1046
|
+
attr => showIdColumns || (attr && !isIdField(attr))
|
|
1047
|
+
)
|
|
1048
|
+
|
|
1049
|
+
return filteredAttributes.length > 0 ? (
|
|
1050
|
+
<Typography
|
|
1051
|
+
fontvariant="merriparagraph"
|
|
1052
|
+
text={filteredAttributes.join(' | ')}
|
|
1053
|
+
fontcolor="rgba(0, 0, 0, 0.6)"
|
|
1054
|
+
sx={{
|
|
1055
|
+
fontSize: '12px',
|
|
1056
|
+
lineHeight: '16px',
|
|
1057
|
+
width: '100%',
|
|
1058
|
+
textAlign: 'left',
|
|
1059
|
+
}}
|
|
1060
|
+
/>
|
|
1061
|
+
) : null
|
|
1062
|
+
})()}
|
|
1028
1063
|
|
|
1029
1064
|
{/* Second line of attributes */}
|
|
1030
|
-
{(
|
|
1065
|
+
{(() => {
|
|
1066
|
+
const filteredAttributes = [
|
|
1067
|
+
option.attribute3,
|
|
1068
|
+
option.attribute4,
|
|
1069
|
+
].filter(
|
|
1070
|
+
attr => showIdColumns || (attr && !isIdField(attr))
|
|
1071
|
+
)
|
|
1072
|
+
|
|
1073
|
+
return filteredAttributes.length > 0 ? (
|
|
1074
|
+
<Typography
|
|
1075
|
+
fontvariant="merriparagraph"
|
|
1076
|
+
text={filteredAttributes.join(' | ')}
|
|
1077
|
+
fontcolor="rgba(0, 0, 0, 0.6)"
|
|
1078
|
+
sx={{
|
|
1079
|
+
fontSize: '12px',
|
|
1080
|
+
lineHeight: '16px',
|
|
1081
|
+
width: '100%',
|
|
1082
|
+
textAlign: 'left',
|
|
1083
|
+
}}
|
|
1084
|
+
/>
|
|
1085
|
+
) : null
|
|
1086
|
+
})()}
|
|
1087
|
+
|
|
1088
|
+
{/* Third line of attributes */}
|
|
1089
|
+
{(() => {
|
|
1090
|
+
const filteredAttributes = [
|
|
1091
|
+
option.attribute5,
|
|
1092
|
+
option.attribute6,
|
|
1093
|
+
].filter(
|
|
1094
|
+
attr => showIdColumns || (attr && !isIdField(attr))
|
|
1095
|
+
)
|
|
1096
|
+
|
|
1097
|
+
return filteredAttributes.length > 0 ? (
|
|
1098
|
+
<Typography
|
|
1099
|
+
fontvariant="merriparagraph"
|
|
1100
|
+
text={filteredAttributes.join(' | ')}
|
|
1101
|
+
fontcolor="rgba(0, 0, 0, 0.6)"
|
|
1102
|
+
sx={{
|
|
1103
|
+
fontSize: '12px',
|
|
1104
|
+
lineHeight: '16px',
|
|
1105
|
+
width: '100%',
|
|
1106
|
+
textAlign: 'left',
|
|
1107
|
+
}}
|
|
1108
|
+
/>
|
|
1109
|
+
) : null
|
|
1110
|
+
})()}
|
|
1111
|
+
</>
|
|
1112
|
+
)}
|
|
1113
|
+
|
|
1114
|
+
{/* For history items, show additional attributes from original options (excluding ID fields) */}
|
|
1115
|
+
{isHistoryItem && variant === 'complex' && (
|
|
1116
|
+
<>
|
|
1117
|
+
{/* Show attribute3/4 as first additional line for history */}
|
|
1118
|
+
{(() => {
|
|
1119
|
+
const filteredAttributes = [
|
|
1120
|
+
option.attribute3,
|
|
1121
|
+
option.attribute4,
|
|
1122
|
+
].filter(
|
|
1123
|
+
attr => showIdColumns || (attr && !isIdField(attr))
|
|
1124
|
+
)
|
|
1125
|
+
|
|
1126
|
+
return filteredAttributes.length > 0 ? (
|
|
1031
1127
|
<Typography
|
|
1032
1128
|
fontvariant="merriparagraph"
|
|
1033
|
-
text={
|
|
1034
|
-
.filter(Boolean)
|
|
1035
|
-
.join(' | ')}
|
|
1129
|
+
text={filteredAttributes.join(' | ')}
|
|
1036
1130
|
fontcolor="rgba(0, 0, 0, 0.6)"
|
|
1037
1131
|
sx={{
|
|
1038
1132
|
fontSize: '12px',
|
|
1039
1133
|
lineHeight: '16px',
|
|
1040
1134
|
width: '100%',
|
|
1041
1135
|
textAlign: 'left',
|
|
1136
|
+
fontStyle: 'italic',
|
|
1042
1137
|
}}
|
|
1043
1138
|
/>
|
|
1044
|
-
)
|
|
1139
|
+
) : null
|
|
1140
|
+
})()}
|
|
1045
1141
|
|
|
1046
|
-
|
|
1047
|
-
|
|
1142
|
+
{/* Show attribute5/6 as second additional line for history */}
|
|
1143
|
+
{(() => {
|
|
1144
|
+
const filteredAttributes = [
|
|
1145
|
+
option.attribute5,
|
|
1146
|
+
option.attribute6,
|
|
1147
|
+
].filter(
|
|
1148
|
+
attr => showIdColumns || (attr && !isIdField(attr))
|
|
1149
|
+
)
|
|
1150
|
+
|
|
1151
|
+
return filteredAttributes.length > 0 ? (
|
|
1048
1152
|
<Typography
|
|
1049
1153
|
fontvariant="merriparagraph"
|
|
1050
|
-
text={
|
|
1051
|
-
.filter(Boolean)
|
|
1052
|
-
.join(' | ')}
|
|
1154
|
+
text={filteredAttributes.join(' | ')}
|
|
1053
1155
|
fontcolor="rgba(0, 0, 0, 0.6)"
|
|
1054
1156
|
sx={{
|
|
1055
1157
|
fontSize: '12px',
|
|
1056
1158
|
lineHeight: '16px',
|
|
1057
1159
|
width: '100%',
|
|
1058
1160
|
textAlign: 'left',
|
|
1161
|
+
fontStyle: 'italic',
|
|
1059
1162
|
}}
|
|
1060
1163
|
/>
|
|
1061
|
-
)
|
|
1062
|
-
|
|
1063
|
-
)}
|
|
1064
|
-
|
|
1065
|
-
{/* For history items, show additional attributes from original options */}
|
|
1066
|
-
{isHistoryItem && variant === 'complex' && (
|
|
1067
|
-
<>
|
|
1068
|
-
{/* Show attribute3/4 as first additional line for history */}
|
|
1069
|
-
{(option.attribute3 || option.attribute4) && (
|
|
1070
|
-
<Typography
|
|
1071
|
-
fontvariant="merriparagraph"
|
|
1072
|
-
text={[option.attribute3, option.attribute4]
|
|
1073
|
-
.filter(Boolean)
|
|
1074
|
-
.join(' | ')}
|
|
1075
|
-
fontcolor="rgba(0, 0, 0, 0.6)"
|
|
1076
|
-
sx={{
|
|
1077
|
-
fontSize: '12px',
|
|
1078
|
-
lineHeight: '16px',
|
|
1079
|
-
width: '100%',
|
|
1080
|
-
textAlign: 'left',
|
|
1081
|
-
fontStyle: 'italic',
|
|
1082
|
-
}}
|
|
1083
|
-
/>
|
|
1084
|
-
)}
|
|
1085
|
-
|
|
1086
|
-
{/* Show attribute5/6 as second additional line for history */}
|
|
1087
|
-
{(option.attribute5 || option.attribute6) && (
|
|
1088
|
-
<Typography
|
|
1089
|
-
fontvariant="merriparagraph"
|
|
1090
|
-
text={[option.attribute5, option.attribute6]
|
|
1091
|
-
.filter(Boolean)
|
|
1092
|
-
.join(' | ')}
|
|
1093
|
-
fontcolor="rgba(0, 0, 0, 0.6)"
|
|
1094
|
-
sx={{
|
|
1095
|
-
fontSize: '12px',
|
|
1096
|
-
lineHeight: '16px',
|
|
1097
|
-
width: '100%',
|
|
1098
|
-
textAlign: 'left',
|
|
1099
|
-
fontStyle: 'italic',
|
|
1100
|
-
}}
|
|
1101
|
-
/>
|
|
1102
|
-
)}
|
|
1164
|
+
) : null
|
|
1165
|
+
})()}
|
|
1103
1166
|
</>
|
|
1104
1167
|
)}
|
|
1105
1168
|
|