ebta-workflow-prod 4.0.15 → 4.0.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ebta-workflow-prod",
   "private": false,
-  "version": "4.0.15",
+  "version": "4.0.17",
   "description": "",
   "license": "UNLICENSED",
   "author": "",

package/src/elements/AttributeFilter.tsx

@@ -8,6 +8,8 @@ import ListItemButton from '@vertigis/web/ui/ListItemButton';
 import ListItemIcon from '@vertigis/web/ui/ListItemIcon';
 import ListItemText from '@vertigis/web/ui/ListItemText';
 import Collapse from '@vertigis/web/ui/Collapse';
+import Menu from '@vertigis/web/ui/Menu';
+import MenuItem from '@vertigis/web/ui/MenuItem';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
@@ -135,6 +137,9 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
     const maxDate = React.useRef(2209004187)
     //const [filteredValues, setFilteredValues] = React.useState<fieldValue[]>([]); // New state for filtered data
     const [showAll, setShowAll] = React.useState(false);
+    const [sortModes, setSortModes] = React.useState<Record<string, string>>({});
+    const [sortAnchor, setSortAnchor] = React.useState<null | { el: HTMLElement; name: string }>(null);
+
     // const [minValue, setMinValue] = React.useState<number>(-Infinity)
     // const [maxValue, setMaxValue] = React.useState<number>(Infinity)
     // const [startDate, setStartDate] = React.useState<Dayjs>(defaultStart)
@@ -269,7 +274,16 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
             const filteredAttributes = {};
             for (const key of attributeList) {
                 if (key in feature.attributes) {
-                    filteredAttributes[key] = originalData.find(attri => attri.name === key)?.type == 'date' ? epoch2MelbDate(Number(feature.attributes[key]) / 1000) : feature.attributes[key];
+                    const isDate = originalData.find(attri => attri.name === key)?.type == 'date';
+                    const rawVal = feature.attributes[key];
+                    if (isDate) {
+                        const epoch = Number(rawVal);
+                        filteredAttributes[key] = (rawVal !== null && rawVal !== undefined && epoch > 0)
+                            ? epoch2MelbDate(epoch / 1000)
+                            : null;  // keep as null, generateAttributeSummary will skip it
+                    } else {
+                        filteredAttributes[key] = rawVal;
+                    }
                 }
             }
             return filteredAttributes;
@@ -890,7 +904,9 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
         // Iterate through the features array
         features.forEach((feature) => {
             const value = feature[attributeName];
+            if (value === null || value === undefined || value === '') return;
             if (value) {
+
                 // Count the occurrence of each value for the attribute
                 if (!attributeSummary[value]) {
                     attributeSummary[value] = 0;
@@ -1019,7 +1035,13 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
 
         }
         else if (attri.display) {
+
             const dataCopy = structuredClone(data)
+            setSortModes(prev => {
+                const copy = { ...prev };
+                delete copy[attri.name];
+                return copy;
+            });
             let result: Attribute[]
             if (recordTable !== undefined && recordTable.length > 0) {
                 result = dataCopy.map(item =>
@@ -1204,6 +1226,48 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
 
 
     const renderAttribute = (attribute: Attribute): React.ReactNode => {
+        // --- sort mode for this attribute ---
+        const defaultSort = attribute.type === 'date' ? 'late-early' : 'count';
+        const sortMode = sortModes[attribute.name] ?? defaultSort;
+
+        const sortOptions: Record<string, string[]> = {
+            date: ['late-early', 'early-late', 'count'],
+            number: ['count', 'big-small', 'small-big'],
+            string: ['count', 'a-z', 'z-a'],
+        };
+        const fieldKind = attribute.type === 'date' ? 'date'
+            : (attribute.type && ['integer', 'number', 'float', 'short', 'long', 'big integer'].includes(attribute.type)) || detectNumberAttribute(attribute) ? 'number'
+                : 'string';
+        const modes = sortOptions[fieldKind];
+        const modeLabels: Record<string, string> = {
+            'count': 'By count',
+            'a-z': 'A → Z',
+            'z-a': 'Z → A',
+            'late-early': 'Latest first',
+            'early-late': 'Earliest first',
+            'big-small': 'Biggest first',
+            'small-big': 'Smallest first',
+        };
+
+        function applySortMode(values: fieldValue[]): fieldValue[] {
+            const copy = [...values];
+            switch (sortMode) {
+                case 'count': return copy.sort((a, b) => b.count - a.count || a.value.localeCompare(b.value));
+                case 'a-z': return copy.sort((a, b) => a.value.localeCompare(b.value));
+                case 'z-a': return copy.sort((a, b) => b.value.localeCompare(a.value));
+                case 'late-early': return copy.sort((a, b) => {
+                    const da = dayjs(a.value, 'DD/MM/YYYY'), db = dayjs(b.value, 'DD/MM/YYYY');
+                    return db.valueOf() - da.valueOf();
+                });
+                case 'early-late': return copy.sort((a, b) => {
+                    const da = dayjs(a.value, 'DD/MM/YYYY'), db = dayjs(b.value, 'DD/MM/YYYY');
+                    return da.valueOf() - db.valueOf();
+                });
+                case 'big-small': return copy.sort((a, b) => Number(b.value) - Number(a.value));
+                case 'small-big': return copy.sort((a, b) => Number(a.value) - Number(b.value));
+                default: return copy;
+            }
+        }
 
         let ISnumberAttribute = false
         let attributeMin = -Infinity
@@ -1217,6 +1281,9 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
         }
 
 
+
+
+
         let displayedValues: fieldValue[] = []
         let displayedFilterValues: fieldValue[] = []
         let limitInUse
@@ -1227,13 +1294,19 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
             limitInUse = (attribute.type == 'date' && (dayjs.unix(minDate.current).format('DD/MM/YYYY') != startDate.format('DD/MM/YYYY') || (dayjs.unix(maxDate.current).format('DD/MM/YYYY') != endDate.format('DD/MM/YYYY')))) || searchValue.length > 0 || (minValue !== -Infinity || maxValue !== Infinity)
         }
         if (attribute.uniqValue && attribute.uniqValue.length > 0) {
-            displayedValues = (attribute.uniqValue.length < defaultNumber + 2) || showAll ? attribute.uniqValue : attribute.uniqValue.slice(0, defaultNumber);
+            const sorted = applySortMode(attribute.uniqValue);
+            displayedValues = (sorted.length < defaultNumber + 2) || showAll
+                ? sorted
+                : sorted.slice(0, defaultNumber);
         }
-
         if (limitInUse && filteredValues.length > 0) {
-            displayedFilterValues = ((filteredValues.length < defaultNumber + 2) || showAll) ? filteredValues : filteredValues.slice(0, defaultNumber)
+            const sorted = applySortMode(filteredValues);
+            displayedFilterValues = ((sorted.length < defaultNumber + 2) || showAll)
+                ? sorted
+                : sorted.slice(0, defaultNumber)
         }
 
+
         const handleDateRangeChange = (newStart: Dayjs, newEnd: Dayjs) => {
             setProperty("startDate" as any, newStart || defaultStart);
             setProperty("endDate" as any, newEnd || defaultEnd)
@@ -1424,21 +1497,85 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
                             }
                             {((!limitInUse && attribute.uniqValue && attribute.uniqValue.length > 2) ||
                                 (limitInUse && filteredValues.length > 2)) ?
-
-                                <ListItemButton sx={{ pl: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} onClick={handleShowAllClick}>
+                                <ListItemButton
+                                    sx={{ pl: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+                                    onClick={handleShowAllClick}
+                                >
+                                    {/* Show more/less label */}
                                     <div style={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
-                                        {
-                                            // Display SHOW-ALL or not
-                                            ((!limitInUse && attribute.uniqValue && attribute.uniqValue.length >= defaultNumber + 2) ||
-                                                (limitInUse && filteredValues.length >= defaultNumber + 2)) ?
-                                                <ListItemText primary={`Show ${showAll ? 'less' : 'all others▼'}  ${showAll ? '▲' : `(${filteredValues.length > defaultNumber && limitInUse ? filteredValues.length - defaultNumber : attribute.uniqValue.length - defaultNumber})`}`} primaryTypographyProps={{ style: { fontWeight: '500' } }} />
-                                                : null
-                                        }
+                                        {((!limitInUse && attribute.uniqValue && attribute.uniqValue.length >= defaultNumber + 2) ||
+                                            (limitInUse && filteredValues.length >= defaultNumber + 2)) ?
+                                            <ListItemText
+                                                primary={`Show ${showAll ? 'less' : 'all others▼'} ${showAll ? '▲' : `(${filteredValues.length > defaultNumber && limitInUse ? filteredValues.length - defaultNumber : attribute.uniqValue.length - defaultNumber})`}`}
+                                                primaryTypographyProps={{ style: { fontWeight: '500' } }}
+                                            />
+                                            : null}
                                     </div>
-                                    <Button style={{ color: 'var(--accentIconBorder) !important' }} variant="text" onClick={(event) => handleSelectAll(event, attribute.name)}>
+
+                                    {/* Sort dropdown button */}
+                                    {attribute.uniqValue && attribute.uniqValue.length > 1 && (() => {
+                                        const open = sortAnchor?.name === attribute.name;
+                                        return (
+                                            <Box onClick={e => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
+                                                <LightTooltip title={`Sort: ${modeLabels[sortMode]}`} arrow>
+                                                    <IconButton
+                                                        size="small"
+                                                        onClick={e => {
+                                                            e.stopPropagation();
+                                                            setSortAnchor(open ? null : { el: e.currentTarget, name: attribute.name });
+                                                        }}
+                                                        sx={{ fontSize: '1rem', opacity: open ? 1 : 0.65, px: 0.5 }}
+                                                    >
+                                                        📶
+                                                    </IconButton>
+                                                </LightTooltip>
+
+                                                {/* Dropdown menu — needs Menu imported from @mui/material or @vertigis/web/ui */}
+                                                <Menu
+                                                    anchorEl={sortAnchor?.el}
+                                                    open={open}
+                                                    onClose={() => setSortAnchor(null)}
+                                                    onClick={e => e.stopPropagation()}
+                                                    MenuListProps={{ dense: true }}
+                                                    PaperProps={{
+                                                        sx: {
+                                                            fontSize: '1.2rem',
+                                                            minWidth: 160,
+                                                            boxShadow: 3,
+                                                        }
+                                                    }}
+                                                    transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+                                                    anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                                                >
+                                                    {modes.map(mode => (
+                                                        <MenuItem
+                                                            key={mode}
+                                                            selected={sortMode === mode}
+                                                            onClick={e => {
+                                                                e.stopPropagation();
+                                                                setSortModes(prev => ({ ...prev, [attribute.name]: mode }));
+                                                                setSortAnchor(null);
+                                                            }}
+                                                            sx={{ fontSize: '1.2rem' }}
+                                                        >
+                                                            {modeLabels[mode]}
+                                                        </MenuItem>
+                                                    ))}
+                                                </Menu>
+                                            </Box>
+                                        );
+                                    })()}
+
+                                    {/* Select / Deselect All */}
+                                    <Button
+                                        style={{ color: 'var(--accentIconBorder) !important' }}
+                                        variant="text"
+                                        onClick={(event) => handleSelectAll(event, attribute.name)}
+                                    >
                                         {allButtonText}
                                     </Button>
-                                </ListItemButton> : <></>}
+                                </ListItemButton>
+                                : <></>}
                             {
                                 // Situation1: Search or range & search result found, only show 'DISPLAYED FILTER VALUE' which is controlled by showall to be all or first 4                           
                                 (limitInUse && filteredValues.length > 0) ?