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 });