QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #61 from Kingsrook/feature/dot-menu-sort-filter-change

Browse Source 
Feature/dot menu sort filter change
This commit is contained in:
darin.kelkhoff
2024-06-04 19:56:48 -05:00
committed by GitHub
parent dc131d5189 7b562aea50
commit b8aa36455d
1 changed files with 163 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/CommandMenu.tsx
View File

@ -36,7 +36,7 @@ import Icon from "@mui/material/Icon";
import Typography from "@mui/material/Typography";
import {makeStyles} from "@mui/styles";
import {Command} from "cmdk";
import React, {useContext, useEffect, useRef} from "react";
import React, {useContext, useEffect, useRef, useState} from "react";
import {useNavigate} from "react-router-dom";
import QContext from "QContext";
import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
@ -62,8 +62,13 @@ const useStyles = makeStyles((theme: any) => ({
}
}));
const A_FIRST = -1;
const B_FIRST = 1;
const CommandMenu = ({metaData}: Props) =>
{
const [searchString, setSearchString] = useState("");
const navigate = useNavigate();
const pathParts = location.pathname.replace(/\/+$/, "").split("/");
@ -71,7 +76,7 @@ const CommandMenu = ({metaData}: Props) =>
const classes = useStyles();
function evalueKeyPress(e: KeyboardEvent)
function evaluateKeyPress(e: KeyboardEvent)
{
///////////////////////////////////////////////////////////////////////////
// if a dot pressed, not from a "text" element, then toggle command menu //
@ -107,20 +112,20 @@ const CommandMenu = ({metaData}: Props) =>
const down = (e: KeyboardEvent) =>
{
evalueKeyPress(e);
}
evaluateKeyPress(e);
};
document.addEventListener("keydown", down)
document.addEventListener("keydown", down);
return () =>
{
document.removeEventListener("keydown", down)
}
}, [tableMetaData, dotMenuOpen, keyboardHelpOpen])
document.removeEventListener("keydown", down);
};
}, [tableMetaData, dotMenuOpen, keyboardHelpOpen]);
useEffect(() =>
{
setDotMenuOpen(false);
}, [location.pathname])
}, [location.pathname]);
function goToItem(path: string)
{
@ -162,6 +167,49 @@ const CommandMenu = ({metaData}: Props) =>
return (null);
}
/*******************************************************************************
** sort a section (e.g, tables, apps).
**
** put labels that start-with the search word first.
*******************************************************************************/
function comparator(labelA: string, labelB: string)
{
if (searchString != "")
{
let aStartsWith = labelA.toLowerCase().startsWith(searchString.toLowerCase());
let bStartsWith = labelB.toLowerCase().startsWith(searchString.toLowerCase());
if (aStartsWith && !bStartsWith)
{
return A_FIRST;
}
else if (bStartsWith && !aStartsWith)
{
return B_FIRST;
}
const indexOfSpace = searchString.indexOf(" ");
if (indexOfSpace > 0)
{
aStartsWith = labelA.toLowerCase().startsWith(searchString.substring(0, indexOfSpace).toLowerCase());
bStartsWith = labelB.toLowerCase().startsWith(searchString.substring(0, indexOfSpace).toLowerCase());
if (aStartsWith && !bStartsWith)
{
return A_FIRST;
}
else if (bStartsWith && !aStartsWith)
{
return B_FIRST;
}
}
}
return (labelA.localeCompare(labelB));
}
/*******************************************************************************
**
*******************************************************************************/
@ -171,13 +219,13 @@ const CommandMenu = ({metaData}: Props) =>
metaData.tables.forEach((value: QTableMetaData, key: string) =>
{
tableNames.push(value.name);
})
});
tableNames = tableNames.sort((a: string, b: string) =>
{
const labelA = metaData.tables.get(a).label ?? "";
const labelB = metaData.tables.get(b).label ?? "";
return (labelA.localeCompare(labelB));
})
return comparator(labelA, labelB);
});
const path = location.pathname;
return tableMetaData && !path.endsWith("/edit") && !path.endsWith("/create") && !path.endsWith("#audit") && !path.endsWith("copy") &&
@ -212,6 +260,7 @@ const CommandMenu = ({metaData}: Props) =>
);
}
/*******************************************************************************
**
*******************************************************************************/
@ -221,13 +270,13 @@ const CommandMenu = ({metaData}: Props) =>
metaData.tables.forEach((value: QTableMetaData, key: string) =>
{
tableNames.push(value.name);
})
});
tableNames = tableNames.sort((a: string, b: string) =>
{
const labelA = metaData.tables.get(a).label ?? "";
const labelB = metaData.tables.get(b).label ?? "";
return (labelA.localeCompare(labelB));
})
return comparator(labelA, labelB);
});
return (
<Command.Group heading="Tables">
{
@ -243,6 +292,7 @@ const CommandMenu = ({metaData}: Props) =>
);
}
/*******************************************************************************
**
*******************************************************************************/
@ -252,14 +302,14 @@ const CommandMenu = ({metaData}: Props) =>
metaData.apps.forEach((value: QAppMetaData, key: string) =>
{
appNames.push(value.name);
})
});
appNames = appNames.sort((a: string, b: string) =>
{
const labelA = getFullAppLabel(metaData.appTree, a, 1, "") ?? "";
const labelB = getFullAppLabel(metaData.appTree, b, 1, "") ?? "";
return (labelA.localeCompare(labelB));
})
return comparator(labelA, labelB);
});
return (
<Command.Group heading="Apps">
@ -276,26 +326,30 @@ const CommandMenu = ({metaData}: Props) =>
);
}
/*******************************************************************************
**
*******************************************************************************/
function RecentlyViewedSection()
{
const history = HistoryUtils.get();
const options = [] as any;
history.entries.reverse().forEach((entry, index) =>
options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
)
);
let appNames: string[] = [];
metaData.apps.forEach((value: QAppMetaData, key: string) =>
{
appNames.push(value.name);
})
});
appNames = appNames.sort((a: string, b: string) =>
{
const labelA = metaData.apps.get(a).label ?? "";
const labelB = metaData.apps.get(b).label ?? "";
return (labelA.localeCompare(labelB));
})
return comparator(labelA, labelB);
});
const entryMap = new Map<string, boolean>();
return (
@ -311,24 +365,85 @@ const CommandMenu = ({metaData}: Props) =>
);
}
const containerElement = useRef(null)
const containerElement = useRef(null);
/*******************************************************************************
**
*******************************************************************************/
function closeKeyboardHelp()
{
setKeyboardHelpOpen(false);
}
/*******************************************************************************
**
*******************************************************************************/
function closeDotMenu()
{
setDotMenuOpen(false);
}
/*******************************************************************************
** filter function for cmd-k library
**
*******************************************************************************/
function doFilter(value: string, search: string)
{
setSearchString(search);
/////////////////////
// split on spaces //
/////////////////////
const searchParts = search.toLowerCase().split(" ");
if (searchParts.length == 1)
{
//////////////////////////////////////////////
// if only 1 word, just do an includes test //
//////////////////////////////////////////////
return (value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0);
}
else
{
////////////////////////////////////////
// else split the value on spaces too //
////////////////////////////////////////
const valueParts = value.toLowerCase().split(" ");
if (searchParts.length > valueParts.length)
{
//////////////////////////////////////////////////////////////////////////////////
// if there are more words in the search than in the value, then it can't match //
// e.g. "order c" can't ever match, say "order" //
//////////////////////////////////////////////////////////////////////////////////
return (0);
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// iterate over the search parts - if any don't match the corresponding value parts, then it's a non-match //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
for (let i = 0; i < searchParts.length; i++)
{
if (!valueParts[i].includes(searchParts[i]))
{
return (0);
}
}
/////////////////////////////////
// if no failure, return a hit //
/////////////////////////////////
return (1);
}
}
return (
<React.Fragment>
<Box ref={containerElement} className="raycast" sx={{position: "relative", zIndex: 10_000}}>
{
<Dialog open={dotMenuOpen} onClose={closeDotMenu}>
<Command.Dialog open={dotMenuOpen} onOpenChange={setDotMenuOpen} container={containerElement.current} label="Test Global Command Menu">
<Command.Dialog open={dotMenuOpen} onOpenChange={setDotMenuOpen} container={containerElement.current} filter={(value, search) => doFilter(value, search)}>
<Box sx={{display: "flex"}}>
<Command.Input placeholder="Search for Tables, Actions, or Recently Viewed Items..." />
<Button onClick={closeDotMenu}><Icon>close</Icon></Button>
@ -381,6 +496,6 @@ const CommandMenu = ({metaData}: Props) =>
</Dialog>
}
</React.Fragment>
)
}
);
};
export default CommandMenu;