Admin: AppResources full-text search

packages/client/src/model/gringlobal/AppResourceFilter.ts

@@ -26,6 +26,7 @@ class AppResourceFilter {
   public formName: StringFilter;
   public valueMember: StringFilter;
   public properties: StringFilter;
+  public _text: string;
 
 
 }

packages/ui-express/src/appresource/ui/admin/AppRecourseBrowsePage.tsx

@@ -18,11 +18,14 @@ import PageTitle from '@gringlobal/client/ui/common/PageTitle';
 import SysLang from '@gringlobal/client/model/gringlobal/SysLang';
 import { AppResourceLink } from 'ui/common/Links';
 import Number from '@gringlobal/client/ui/common/Number';
+import Filters from 'appresource/ui/admin/c/Filters';
+import AppResourceFilter from '@gringlobal/client/model/gringlobal/AppResourceFilter';
 
 
 
 interface IBrowsePageProps extends React.ClassAttributes<any>, WithTranslation, WithBrowsePageBase {
   onSortChange: (sortBy: string, dir: SortDirection) => void;
+  applyFilter: (filter: AppResourceFilter) => void;
   loadMore: () => void;
   data: FilteredPage<AppResource>;
 }
@@ -74,13 +77,17 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
   };
 
   public render() {
-    const { data, t, onSortChange, loadMore } = this.props;
+    const { data, t, onSortChange, applyFilter, loadMore } = this.props;
     const columns = AppResourceTableConfig.getColumns(data && data.content ? data.content[0] : null);
 
     return (
       <>
         <PageTitle title={ t('appresource.admin.p.browse.title') }/>
         <ContentHeader title={ t('appresource.admin.p.browse.title') }>
+          <Filters
+            onSubmit={ applyFilter }
+            filter={ data && data.filter }
+          />
         </ContentHeader>
         <Table
           tableKey="appresource-list"

packages/ui-express/src/appresource/ui/admin/c/Filters.tsx

+import * as React from 'react';
+import { Form, Field, FormProps, FormRenderProps } from 'react-final-form';
+import { useTranslation } from 'react-i18next';
+
+// UI
+import { TextField } from '@gringlobal/client/ui/common/form/TextField';
+import { withStyles, WithStyles } from '@material-ui/core/styles';
+import AppResourceFilter from '@gringlobal/client/model/gringlobal/AppResourceFilter';
+
+const styles = (theme) => ({
+  textField: {
+    'margin': '-1px 0',
+    '& input': {
+      backgroundColor: 'white',
+      padding: '6px 10px 7px',
+      minWidth: '300px',
+      [theme.breakpoints.down('sm')]: {
+        minWidth: '120px',
+      },
+    },
+  },
+});
+
+interface IAppResourceFilters extends React.ClassAttributes<any>, FormProps {
+  filter: AppResourceFilter;
+}
+
+function appResourceFiltersInternal(props: FormRenderProps & WithStyles) {
+  const { handleSubmit, classes } = props;
+  const { t } = useTranslation();
+
+  return (
+    <form onSubmit={ handleSubmit }>
+      <Field
+        placeholder={ t('appresource.admin.c.filters.text') }
+        name="_text"
+        type="text"
+        component={ TextField }
+        className={ classes.textField }
+      />
+    </form>
+  );
+}
+
+const AppResourceFiltersInternal = withStyles(styles)(appResourceFiltersInternal);
+
+export default class AppResourceFilters extends React.Component<IAppResourceFilters, any> {
+
+  public render() {
+    const { onSubmit, filter } = this.props;
+    // console.log('filter: ', filter);
+    return (
+      <Form
+        initialValues={ { _text: filter && filter._text ? filter._text : null } } // { ...filter }
+        onSubmit={ onSubmit }
+        render={ (props) => <AppResourceFiltersInternal { ...props } /> }
+      />
+    );
+  }
+
+}