diff --git a/package.json b/package.json index 9505528f..934817e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "app-map-db", - "version": "2.1.29", + "version": "2.1.30", "private": true, "homepage": "https://mindapps.org", "enableLogRocket": true, diff --git a/src/components/application/GenericTable/ApplicationsGrid/pwatable.tsx b/src/components/application/GenericTable/ApplicationsGrid/pwatable.tsx index d7b330b2..430c6ec9 100644 --- a/src/components/application/GenericTable/ApplicationsGrid/pwatable.tsx +++ b/src/components/application/GenericTable/ApplicationsGrid/pwatable.tsx @@ -1,3 +1,4 @@ +import PwaSearchHeader from '../../../pages/PwaSearchHeader'; import ViewAppDialog from '../../GenericDialog/ViewApp'; import GenericTableContainer, { GenericTableContainerProps } from '../GenericTableContainer'; import ApplicationGrid from './ApplicationsGrid'; @@ -20,6 +21,7 @@ export const PwaApplicationsGrid = ({ data, HeaderComponent = undefined, ...othe return ( <> + ); diff --git a/src/components/pages/PwaSearchHeader.tsx b/src/components/pages/PwaSearchHeader.tsx new file mode 100644 index 00000000..f55ba1b8 --- /dev/null +++ b/src/components/pages/PwaSearchHeader.tsx @@ -0,0 +1,157 @@ +import * as React from 'react'; +import { Box, Grid, Chip } from '@mui/material'; +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; +import { useFullScreen } from '../../hooks'; +import TableSearchV2 from '../application/GenericTable/TableSearchV2'; +import MultiSelectCheck from '../application/DialogField/MultiSelectCheck'; +import { Platforms, withReplacement } from '../../database/models/Application'; +import { useHandleTableReset, useTableFilterValues, useTableSearchText } from '../application/GenericTable/store'; +import DialogButton from '../application/GenericDialog/DialogButton'; +import { categories } from '../../constants'; +import { useHeaderHeightSetRef } from '../layout/hooks'; + +const padding = 8; +const spacing = 1; + +const getMobilePadding = breakpoints => ({ + padding, + fontWeight: 900, + [breakpoints.down('sm')]: { + padding: getPadding('sm') + }, + [breakpoints.down('xs')]: { + padding: getPadding('xs') + } +}); + +const getPadding = (bp, multiplier = 1) => (bp === 'sm' ? padding / 2 : bp === 'xs' ? padding / 3 : padding) * multiplier; + +const useStyles = makeStyles(({ breakpoints, palette }: any) => + createStyles({ + header: { + background: palette.primary.light, + color: palette.common.white, + fontWeight: 900, + ...getMobilePadding(breakpoints) + }, + primaryText: { + fontSize: 30, + fontWeight: 900, + color: palette.primary.dark + }, + deleteIcon: { + color: 'white !important' + } + }) +); + +const tableId = 'Applications'; + +export default function PwaSearchHeader() { + const [searchtext, setSearchText] = useTableSearchText(tableId); + const [filters = {}, setFilterValues] = useTableFilterValues(tableId); + const handleReset = useHandleTableReset(tableId); + + const classes = useStyles(); + // useFilterList(); + + var sm = useFullScreen('sm'); + const fullScreen = useFullScreen(); + + const handleChange = React.useCallback( + id => (event: any) => { + const value = event?.target?.value; + if (id === 'searchtext') { + setSearchText(value); + } else { + setFilterValues(prev => ({ ...prev, [id]: value })); + } + }, + [setSearchText, setFilterValues] + ); + + const items = Object.keys(filters) + .filter(k => (k !== 'Platforms' && k !== 'SavedFilter') || (k === 'Platforms' && fullScreen)) + .map(k => ({ key: k, label: k, value: filters[k] })); + + const handleDelete = React.useCallback( + (key, value) => () => setFilterValues(prev => ({ ...prev, [key]: (prev[key] ?? []).filter(v => v !== value) })), + [setFilterValues] + ); + + let showClear = false; + const setRef = useHeaderHeightSetRef(); + + return ( + <> + + + + + + + + + {!fullScreen && ( + + 0 ? 'Platforms' : 'All Platforms'} + InputProps={{ style: { background: 'white' } }} + items={Platforms.map(label => ({ value: label, label })) as any} + fullWidth={true} + /> + + )} + + + + + + + + + {items.map((item, i) => { + const category = categories[item.key]; + if (item.value.length > 0) { + showClear = true; + } + return !Array.isArray(item?.value) ? ( + <> + ) : ( + item.value.map((label, i2) => ( + + + + )) + ); + })} + {showClear && ( + + + + Reset all filters + + + + )} + + + + + + + ); +} diff --git a/src/components/pwa/PwaApps.tsx b/src/components/pwa/PwaApps.tsx index 1b07da27..0d6a000c 100644 --- a/src/components/pwa/PwaApps.tsx +++ b/src/components/pwa/PwaApps.tsx @@ -1,5 +1,4 @@ import * as Tables from '../application/GenericTable'; -import SearchHeaderRedux from '../pages/SearchHeaderRedux'; import { useTheme } from '@mui/material'; import useAppTableData from '../pages/useAppTableData'; import useHeight from '../layout/ViewPort/hooks/useHeight'; @@ -12,7 +11,7 @@ export default function PwaApps() { const { layout } = useTheme() as any; const { tablefooterheight } = layout; //const tableHeight = height - headerHeight + tablefooterheight + 2 - 40; - const tableHeight = height - appBarHeight + tablefooterheight; + const tableHeight = height - appBarHeight + tablefooterheight - headerHeight; const { filtered } = useAppTableData(); // Trigger data query console.log({ headerHeight, appBarHeight, tablefooterheight, tableHeight });