diff --git a/package.json b/package.json index 1f1ae80..f6cfa6f 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "clean": "rm -rf node_modules package-lock.json", "eject": "react-scripts eject", "geff-ham": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf lib/ && npm install", - "install-legacy-peer-deps": "npm install --legacy-peer-deps", + "npm-install": "npm install", "prepublishOnly": "tsc -p ./ --outDir lib/", "start": "BROWSER=none react-scripts start", "test": "react-scripts test", diff --git a/src/qqq/components/buttons/DefaultButtons.tsx b/src/qqq/components/buttons/DefaultButtons.tsx index 44d2459..7070f6b 100644 --- a/src/qqq/components/buttons/DefaultButtons.tsx +++ b/src/qqq/components/buttons/DefaultButtons.tsx @@ -111,6 +111,7 @@ export function QActionsMenuButton({isOpen, onClickHandler}: QActionsMenuButtonP variant={isOpen ? "contained" : "outlined"} color="dark" onClick={onClickHandler} + startIcon={games} fullWidth > actions  @@ -129,6 +130,7 @@ export function QSavedFiltersMenuButton({isOpen, onClickHandler}: QActionsMenuBu color="dark" onClick={onClickHandler} fullWidth + startIcon={filter_alt} > saved filters  keyboard_arrow_down diff --git a/src/qqq/components/misc/SavedFilters.tsx b/src/qqq/components/misc/SavedFilters.tsx index 258c4f2..6053f47 100644 --- a/src/qqq/components/misc/SavedFilters.tsx +++ b/src/qqq/components/misc/SavedFilters.tsx @@ -25,7 +25,7 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete"; import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError"; import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord"; -import {KeyboardArrowDown} from "@mui/icons-material"; +import {FiberManualRecord, KeyboardArrowDown} from "@mui/icons-material"; import {Alert, ClickAwayListener, Grow, MenuList, Paper, Popper} from "@mui/material"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; @@ -34,9 +34,13 @@ import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import DialogTitle from "@mui/material/DialogTitle"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; +import ListItemIcon from "@mui/material/ListItemIcon"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import TextField from "@mui/material/TextField"; +import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; import {GridFilterModel, GridSortItem} from "@mui/x-data-grid-pro"; import FormData from "form-data"; @@ -76,12 +80,12 @@ function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, const location = useLocation(); const [saveOptionsOpen, setSaveOptionsOpen] = useState(false); - const SAVE_OPTION = "Save Filter..."; - const SAVE_AS_OPTION = "Create A New Filter From This Filter..."; - const RENAME_OPTION = "Rename This Filter..."; - const CLEAR_OPTION = "Clear This Filter"; - const DELETE_OPTION = "Delete This Filter..."; - const dropdownOptions = [SAVE_AS_OPTION, RENAME_OPTION, CLEAR_OPTION, DELETE_OPTION]; + const SAVE_OPTION = "Save..."; + const DUPLICATE_OPTION = "Duplicate..."; + const RENAME_OPTION = "Rename..."; + const DELETE_OPTION = "Delete..."; + const CLEAR_OPTION = "Clear Current Filter"; + const dropdownOptions = [DUPLICATE_OPTION, RENAME_OPTION, DELETE_OPTION, CLEAR_OPTION]; const openSavedFiltersMenu = (event: any) => setSavedFiltersMenu(event.currentTarget); const closeSavedFiltersMenu = () => setSavedFiltersMenu(null); @@ -146,7 +150,6 @@ function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, setSaveOptionsOpen(false); setPopupAlertContent(null); closeSavedFiltersMenu(); - setSavedFilterNameInputValue(null); setSaveFilterPopupOpen(true); setIsSaveFilterAs(false); setIsRenameFilter(false); @@ -156,7 +159,7 @@ function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, { case SAVE_OPTION: break; - case SAVE_AS_OPTION: + case DUPLICATE_OPTION: setIsSaveFilterAs(true); break; case CLEAR_OPTION: @@ -165,6 +168,10 @@ function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, navigate(metaData.getTablePathByName(tableMetaData.name)); break; case RENAME_OPTION: + if(currentSavedFilter != null) + { + setSavedFilterNameInputValue(currentSavedFilter.values.get("label")); + } setIsRenameFilter(true); break; case DELETE_OPTION: @@ -322,9 +329,12 @@ function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, return (savedFilters); } + const hasStorePermission = metaData?.processes.has("storeSavedFilter"); + const hasDeletePermission = metaData?.processes.has("deleteSavedFilter"); + const hasQueryPermission = metaData?.processes.has("querySavedFilter"); + const renderSavedFiltersMenu = tableMetaData && ( + Filter Actions + { + hasStorePermission && + handleDropdownOptionClick(SAVE_OPTION)}> + save + Save... + + } + { + hasStorePermission && + handleDropdownOptionClick(RENAME_OPTION)}> + edit + Rename... + + } + { + hasStorePermission && + handleDropdownOptionClick(DUPLICATE_OPTION)}> + content_copy + Duplicate... + + } + { + hasDeletePermission && + handleDropdownOptionClick(DELETE_OPTION)}> + delete + Delete... + + } + { + handleDropdownOptionClick(CLEAR_OPTION)}> + clear + Clear Current Filter + + } + + Your Filters { savedFilters && savedFilters.length > 0 ? ( savedFilters.map((record: QRecord, index: number) => - handleSavedFilterRecordOnClick(record)}> + handleSavedFilterRecordOnClick(record)}> {record.values.get("label")} ) @@ -354,38 +401,27 @@ function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, ); - - const hasStorePermission = metaData?.processes.has("storeSavedFilter"); - const hasDeletePermission = metaData?.processes.has("deleteSavedFilter"); - const hasQueryPermission = metaData?.processes.has("querySavedFilter"); - return ( hasQueryPermission && tableMetaData ? ( {renderSavedFiltersMenu} - + - { - savedFiltersHaveLoaded && ( - currentSavedFilter ? ( - Current Filter:  - - {currentSavedFilter.values.get("label")} - { - filterIsModified && ( -  * - - ) - } - - - ) : ( -   -   - - ) + savedFiltersHaveLoaded && currentSavedFilter && ( + Current Filter:  + + {currentSavedFilter.values.get("label")} + { + filterIsModified && ( + + + + ) + } + + ) } @@ -407,7 +443,7 @@ function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, {dropdownOptions.map((option, index) => ( - (option === CLEAR_OPTION || ((option !== DELETE_OPTION || hasDeletePermission) && (option !== SAVE_AS_OPTION || hasStorePermission))) && ( + (option === CLEAR_OPTION || ((option !== DELETE_OPTION || hasDeletePermission) && (option !== DUPLICATE_OPTION || hasStorePermission))) && ( handleDropdownOptionClick(option)} @@ -488,8 +524,13 @@ function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, placeholder="Filter Name" label="Filter Name" inputProps={{width: "100%", maxLength: 100}} + value={savedFilterNameInputValue} sx={{width: "100%"}} onChange={handleSaveFilterInputChange} + onFocus={event => + { + event.target.select(); + }} /> ):( diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css index 26f903c..4cabed0 100644 --- a/src/qqq/styles/qqq-override-styles.css +++ b/src/qqq/styles/qqq-override-styles.css @@ -223,6 +223,11 @@ input[type="search"]::-webkit-search-results-decoration { display: none; } overflow: scroll; } +.MuiChip-root +{ + padding-top: 1px !important; +} + #outlined-multiline-static { padding-left: 10px; @@ -323,4 +328,4 @@ input[type="search"]::-webkit-search-results-decoration { display: none; } { color: rgb(123, 128, 154); font-weight: 400; -} \ No newline at end of file +}