ebta-workflow-prod 4.1.0 → 4.1.1
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,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ebta-workflow-prod",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "4.1.
|
|
4
|
+
"version": "4.1.1",
|
|
5
5
|
"description": "",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"author": "",
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
"@mantine/core": "^7.16.0",
|
|
34
34
|
"@mantine/hooks": "^9.5.1",
|
|
35
35
|
"@mui/icons-material": "^5.17.1",
|
|
36
|
+
"@mui/base": "5.0.0-beta.70",
|
|
36
37
|
"@mui/material": "^5.17.1",
|
|
37
38
|
"@mui/x-charts": "^7.6.2",
|
|
38
39
|
"@turf/turf": "^6.5.0",
|
|
@@ -18,14 +18,10 @@ import Box from "@vertigis/web/ui/Box"
|
|
|
18
18
|
import Checkbox from "@vertigis/web/ui/Checkbox"
|
|
19
19
|
import { ThemeProvider } from "@emotion/react";
|
|
20
20
|
import Typography from '@vertigis/web/ui/Typography';
|
|
21
|
-
// import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
|
|
22
21
|
import dayjs, { Dayjs } from 'dayjs';
|
|
23
22
|
import timezone from 'dayjs/plugin/timezone';
|
|
24
23
|
import utc from 'dayjs/plugin/utc';
|
|
25
24
|
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
26
|
-
// import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
|
|
27
|
-
// import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
|
28
|
-
// import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
29
25
|
import 'dayjs/locale/en-au';
|
|
30
26
|
import Chip from '@mui/material/Chip';
|
|
31
27
|
import Button from '@vertigis/web/ui/Button';
|
|
@@ -35,7 +31,7 @@ import FormControlLabel from '@vertigis/web/ui/FormControlLabel';
|
|
|
35
31
|
import AttributeFilterEasyComp from './modules/AttributeFilterEasyComp';
|
|
36
32
|
import Stack from '@vertigis/web/ui/Stack';
|
|
37
33
|
import Graphic from "@arcgis/core/Graphic";
|
|
38
|
-
const { Search, SearchIconWrapper, StyledInputBase, StyledBadge, LightTooltip, defaultTheme } = AttributeFilterEasyComp;
|
|
34
|
+
const { Search, SearchIconWrapper, StyledInputBase, StyledBadge, LightTooltip, defaultTheme, CustomNumberInput} = AttributeFilterEasyComp;
|
|
39
35
|
dayjs.extend(utc);
|
|
40
36
|
dayjs.extend(timezone);
|
|
41
37
|
dayjs.extend(customParseFormat);
|
|
@@ -1392,53 +1388,15 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
|
|
|
1392
1388
|
{attribute.uniqValue ?
|
|
1393
1389
|
(<Collapse in={attribute.display} timeout="auto" unmountOnExit>
|
|
1394
1390
|
{attribute.type && attribute.type == 'date' && (attribute.uniqValue.length > 6) ?
|
|
1395
|
-
// <Box display="flex" alignItems="center" >
|
|
1396
|
-
// <LocalizationProvider dateAdapter={AdapterDayjs} >
|
|
1397
|
-
// <DemoContainer components={['DatePicker', 'DatePicker']} >
|
|
1398
|
-
// <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-au">
|
|
1399
|
-
// <DateRangePicker defaultValue={[dayjs.unix(minDate.current), dayjs.unix(maxDate.current)]} maxDate={dayjs.unix(maxDate.current)} minDate={dayjs.unix(minDate.current)}
|
|
1400
|
-
// value={[startDate, endDate]}
|
|
1401
|
-
// onChange={([newstart, newend]) => handleDateRangeChange(newstart || startDate, newend || endDate)}
|
|
1402
|
-
// sx={{
|
|
1403
|
-
// // Customize the date text color
|
|
1404
|
-
// '& .MuiInputBase-input': {
|
|
1405
|
-
// color: 'var(--accentIconBorder)', // Change text color for the selected date
|
|
1406
|
-
// },
|
|
1407
|
-
|
|
1408
|
-
// // Customize the start & end labels
|
|
1409
|
-
// '& .MuiInputLabel-root': {
|
|
1410
|
-
// color: 'var(--accentIconBorder)', // Change label color for both start and end dates
|
|
1411
|
-
// },
|
|
1412
|
-
|
|
1413
|
-
// // Customize the border color of the input
|
|
1414
|
-
// '& .MuiOutlinedInput-root': {
|
|
1415
|
-
// '& fieldset': {
|
|
1416
|
-
// borderColor: 'var(--accentIconBorder)', // Change border color when the input is not focused
|
|
1417
|
-
// },
|
|
1418
|
-
// '&:hover fieldset': {
|
|
1419
|
-
// borderColor: 'var(--accentIconBorder)', // Change border color on hover
|
|
1420
|
-
// },
|
|
1421
|
-
// '&.Mui-focused fieldset': {
|
|
1422
|
-
// borderColor: 'var(--accentIconBorder)', // Change border color when focused
|
|
1423
|
-
// },
|
|
1424
|
-
// },
|
|
1425
|
-
// }}
|
|
1426
|
-
|
|
1427
|
-
// />
|
|
1428
|
-
// </LocalizationProvider>
|
|
1429
|
-
// </DemoContainer>
|
|
1430
|
-
// </LocalizationProvider>
|
|
1431
|
-
// </Box>
|
|
1432
|
-
|
|
1433
1391
|
<Box display="flex" alignItems="center" gap={1}>
|
|
1434
1392
|
<input
|
|
1435
1393
|
type="date"
|
|
1436
1394
|
value={startDate ? startDate.format('YYYY-MM-DD') : ''}
|
|
1437
1395
|
min={dayjs.unix(minDate.current).format('YYYY-MM-DD')}
|
|
1438
1396
|
max={dayjs.unix(maxDate.current).format('YYYY-MM-DD')}
|
|
1439
|
-
onChange={(
|
|
1440
|
-
const
|
|
1441
|
-
handleDateRangeChange(
|
|
1397
|
+
onChange={(event) => {
|
|
1398
|
+
const newStart = event.target.value ? dayjs(event.target.value) : startDate;
|
|
1399
|
+
handleDateRangeChange(newStart, endDate);
|
|
1442
1400
|
}}
|
|
1443
1401
|
style={{ color: 'var(--accentIconBorder)', border: '1px solid var(--accentIconBorder)', borderRadius: 4, padding: '4px 8px', marginRight: 8 }}
|
|
1444
1402
|
/>
|
|
@@ -1448,9 +1406,9 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
|
|
|
1448
1406
|
value={endDate ? endDate.format('YYYY-MM-DD') : ''}
|
|
1449
1407
|
min={dayjs.unix(minDate.current).format('YYYY-MM-DD')}
|
|
1450
1408
|
max={dayjs.unix(maxDate.current).format('YYYY-MM-DD')}
|
|
1451
|
-
onChange={(
|
|
1452
|
-
const
|
|
1453
|
-
handleDateRangeChange(startDate,
|
|
1409
|
+
onChange={(event) => {
|
|
1410
|
+
const newEnd = event.target.value ? dayjs(event.target.value) : endDate;
|
|
1411
|
+
handleDateRangeChange(startDate, newEnd);
|
|
1454
1412
|
}}
|
|
1455
1413
|
style={{ color: 'var(--accentIconBorder)', border: '1px solid var(--accentIconBorder)', borderRadius: 4, padding: '4px 8px', marginLeft: 8 }}
|
|
1456
1414
|
/>
|
|
@@ -1459,7 +1417,39 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
|
|
|
1459
1417
|
ISnumberAttribute && (attribute.uniqValue.length > 6) ?
|
|
1460
1418
|
//Display String search or number Range , don't display if value amount is limited
|
|
1461
1419
|
<Box display="flex" alignItems="center">
|
|
1462
|
-
|
|
1420
|
+
<CustomNumberInput aria-label="min value input" placeholder={`Min (${attributeMin} ~ ${attributeMax})`} min={attributeMin - 1} max={attributeMax + 1}
|
|
1421
|
+
value={minValue == -Infinity ? undefined : minValue} step={0.1}
|
|
1422
|
+
onChange={(event, val) => {
|
|
1423
|
+
if (((val || val == 0) && (val <= maxValue))) { setProperty("minValue" as any, val) };
|
|
1424
|
+
if (val == undefined || val == null) { setProperty("minValue" as any, -Infinity) };
|
|
1425
|
+
|
|
1426
|
+
if ((val || val == 0) && val > maxValue) {
|
|
1427
|
+
setProperty("minValue" as any, maxValue - 1)
|
|
1428
|
+
const filterrangeResult = filterRange(attribute, maxValue - 1, maxValue)
|
|
1429
|
+
setProperty("filteredValues" as any, filterrangeResult)
|
|
1430
|
+
}
|
|
1431
|
+
else {
|
|
1432
|
+
const filterrangeResult = filterRange(attribute, val !== null ? val : -Infinity, maxValue !== Infinity ? maxValue : Infinity)
|
|
1433
|
+
setProperty("filteredValues" as any, filterrangeResult)
|
|
1434
|
+
}
|
|
1435
|
+
}}
|
|
1436
|
+
/>
|
|
1437
|
+
<CustomNumberInput aria-label="max value input" placeholder={`Max (${attributeMin} ~ ${attributeMax})`} min={attributeMin - 1} max={attributeMax + 1}
|
|
1438
|
+
value={maxValue == Infinity ? undefined : maxValue} step={0.1}
|
|
1439
|
+
onChange={(_event, val) => {
|
|
1440
|
+
if ((val || val == 0) && (val >= minValue)) { setProperty("maxValue" as any, val) };
|
|
1441
|
+
if (val == undefined) { setProperty("maxValue" as any, Infinity) };
|
|
1442
|
+
if ((val || val == 0) && val < minValue) {
|
|
1443
|
+
setProperty("maxValue" as any, minValue + 1)
|
|
1444
|
+
const filterrangeResult = filterRange(attribute, minValue, minValue + 1)
|
|
1445
|
+
setProperty("filteredValues" as any, filterrangeResult)
|
|
1446
|
+
}
|
|
1447
|
+
else {
|
|
1448
|
+
const filterrangeResult = filterRange(attribute, minValue !== -Infinity ? minValue : -Infinity, val !== null ? val : Infinity || Infinity)
|
|
1449
|
+
setProperty("filteredValues" as any, filterrangeResult)
|
|
1450
|
+
}
|
|
1451
|
+
}}
|
|
1452
|
+
/>
|
|
1463
1453
|
</Box>
|
|
1464
1454
|
:
|
|
1465
1455
|
(attribute.uniqValue.length > 6) || searchValue ?
|
|
@@ -4,11 +4,10 @@ import InputBase from '@mui/material/InputBase';
|
|
|
4
4
|
import Badge, { BadgeProps } from '@mui/material/Badge';
|
|
5
5
|
import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
|
|
6
6
|
import { createTheme } from "@mui/material/styles";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
// } from '@mui/base/Unstable_NumberInput';
|
|
7
|
+
import {
|
|
8
|
+
Unstable_NumberInput as BaseNumberInput,
|
|
9
|
+
NumberInputProps,
|
|
10
|
+
} from '@mui/base/Unstable_NumberInput';
|
|
12
11
|
|
|
13
12
|
const Search =styled('div')(({ theme }) => ({
|
|
14
13
|
position: 'relative',
|
|
@@ -143,31 +142,33 @@ const defaultTheme = createTheme({
|
|
|
143
142
|
},
|
|
144
143
|
});
|
|
145
144
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
145
|
+
const CustomNumberInput = React.forwardRef(function CustomNumberInput(
|
|
146
|
+
props: NumberInputProps,
|
|
147
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
148
|
+
) {
|
|
149
|
+
return (
|
|
150
|
+
<BaseNumberInput
|
|
151
|
+
slots={{
|
|
152
|
+
root: StyledInputRoot,
|
|
153
|
+
input: StyledInputElement,
|
|
154
|
+
incrementButton: StyledButton,
|
|
155
|
+
decrementButton: StyledButton,
|
|
156
|
+
}}
|
|
157
|
+
slotProps={{
|
|
158
|
+
incrementButton: {
|
|
159
|
+
children: 'Increase value',
|
|
160
|
+
'aria-label': 'Increase value',
|
|
161
|
+
},
|
|
162
|
+
decrementButton: {
|
|
163
|
+
children: 'Decrease value',
|
|
164
|
+
'aria-label': 'Decrease value',
|
|
165
|
+
},
|
|
166
|
+
}}
|
|
167
|
+
{...props}
|
|
168
|
+
ref={ref}
|
|
169
|
+
/>
|
|
170
|
+
);
|
|
171
|
+
});
|
|
171
172
|
|
|
172
173
|
const StyledInputElement = styled('input')(
|
|
173
174
|
() => `
|
|
@@ -220,4 +221,4 @@ const defaultTheme = createTheme({
|
|
|
220
221
|
`,
|
|
221
222
|
);
|
|
222
223
|
|
|
223
|
-
export default {Search,SearchIconWrapper,StyledInputBase,StyledBadge,StyledInputRoot,StyledInputElement,StyledButton,defaultTheme,LightTooltip}
|
|
224
|
+
export default {Search,SearchIconWrapper,StyledInputBase,StyledBadge,StyledInputRoot,StyledInputElement,StyledButton,CustomNumberInput,defaultTheme,LightTooltip}
|