search Yepp

src/Components/OrderList.js

@@ -1,21 +1,13 @@
-import React, { Component, useEffect, useState } from 'react';
-import Button from '@mui/material/Button';
-import { alpha } from '@mui/material/styles';
-import { Container, Avatar, Typography, Grid, CardActionArea, Card, CardContent, CardMedia, AvatarGroup, CardActions, Collapse, IconButton, Paper, List, ListItem, Box, Link, TablePagination } from '@mui/material';
-//CssBaseline, TextField, FormControlLabel, Checkbox, Link, Divider
-import { getFullImageUrl } from "../utills";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { Good } from './Good';
-import { OrderGood } from './OrderGood';
-import { Table, TableBody, TableContainer, TableHead, TableRow, TableCell } from "@mui/material";
+import React, { useEffect } from 'react';
+import { Container, Typography, Paper, Link } from '@mui/material';
+import { Table, TableBody, TableContainer, TableHead, TableRow } from "@mui/material";
 import { StyledTableCell, StyledTableRow } from './StyledTableElements';
-import { visuallyHidden } from '@mui/utils';
-import TableSortLabel from '@mui/material/TableSortLabel';
 import { COrdersPagination } from './Pagination';
 import { actionFindOrders, actionOrdersCount } from '../reducers';
 import { connect } from 'react-redux';
+import { COrdersSearchInput } from './SearchInput';
 
-function stableSort(array, comparator) {
+/*function stableSort(array, comparator) {
     const stabilizedThis = array.map((el, index) => [el, index]);
     stabilizedThis.sort((a, b) => {
         const order = comparator(a[0], b[0]);
@@ -39,18 +31,22 @@ function descendingComparator(a, b, orderBy) {
         return 1;
     }
     return 0;
-}
-const OrderList = ({ orders, fromPage = 0, pageSize = 5, loadData, loadOrdersCount }) => {
+}*/
+const OrderList = ({ orders, searchStr, fromPage = 0, pageSize = 5, loadData, loadOrdersCount }) => {
     /*const [order, setOrder] = React.useState('asc');
     const [orderBy, setOrderBy] = React.useState('calories');
     const [page, setPage] = React.useState(0);
     const [rowsPerPage, setRowsPerPage] = React.useState(5);*/
 
     useEffect(() => {
-        loadData(fromPage, pageSize);
-        loadOrdersCount();
-    }, [fromPage, pageSize]);
+        loadData(fromPage, pageSize, searchStr);
+        loadOrdersCount(searchStr);
+    }, [fromPage, pageSize, searchStr]);
 
+    /*<StyledTableCell align={headCell.align}>{headCell.label}</StyledTableCell>*/
+    /*    const createSortHandler = (property) => (event) => {
+            onRequestSort(event, property);
+          };*/
 
     let headCells = [
         {
@@ -94,13 +90,10 @@ const OrderList = ({ orders, fromPage = 0, pageSize = 5, loadData, loadOrdersCou
             align: "right"
         },
     ]
-    {/*<StyledTableCell align={headCell.align}>{headCell.label}</StyledTableCell>*/ }
-    /*    const createSortHandler = (property) => (event) => {
-            onRequestSort(event, property);
-          };*/
     return (
         <>
             <Container maxWidth="lg">
+                <COrdersSearchInput />
                 <TableContainer component={Paper} >
                     <Table sx={{ overflow: 'scroll' }} >
                         <TableHead>
@@ -137,7 +130,7 @@ const OrderList = ({ orders, fromPage = 0, pageSize = 5, loadData, loadOrdersCou
                                 {
                                     orders.map((order, index) => {
                                         return (
-                                            <StyledTableRow>
+                                            <StyledTableRow key={order._id}>
                                                 <StyledTableCell align="right" >
                                                     <Typography>
                                                         {(fromPage * pageSize) + index + 1}.
@@ -198,10 +191,10 @@ const OrderList = ({ orders, fromPage = 0, pageSize = 5, loadData, loadOrdersCou
 
 const COrdersList = connect(
     state => {
-        let a = '';
         return (
             {
                 orders: state.promise.orders?.payload,
+                searchStr: state.frontend.ordersSearchStr,
                 fromPage: state.frontend.ordersPaging.fromPage,
                 pageSize: state.frontend.ordersPaging.pageSize,
             })

src/Components/Pagination.js

@@ -5,6 +5,7 @@ import { actionFindOrders, actionOrdersCount } from '../reducers';
 import { actionSetOrdersPaging } from '../reducers/frontEndReducer';
 
 const Pagination = ({ allEntitiesCount, changePage, changePageFE, changeRowsPerPage, changeRowsPerPageFE }) => {
+    allEntitiesCount = allEntitiesCount ?? 0;
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(5);
     const handleChangePage = (event, newPage) => {

src/Components/RootCats.js

@@ -7,7 +7,7 @@ export const CatsList = ({ cats = [] }) => {
     return (
         <List>
             {cats.map(cat => (
-                <CatItem cat={cat} />
+                <CatItem cat={cat} key={cat._id} />
             ))}
         </List>
     )

src/Components/SearchInput.js

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import InputBase from '@mui/material/InputBase';
+import SearchIcon from '@mui/icons-material/Search';
+import { connect } from 'react-redux';
+import { actionSetOrderSearch } from '../reducers/frontEndReducer';
+
+const Search = styled('div')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginLeft: 0,
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(1),
+    width: 'auto',
+  },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: 'inherit',
+  '& .MuiInputBase-input': {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: '12ch',
+      '&:focus': {
+        width: '20ch',
+      },
+    },
+  },
+}));
+
+function SearchInput({ onChange }) {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Toolbar>
+        <Typography
+          variant="h6"
+          noWrap
+          component="div"
+          sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
+        >
+        </Typography>
+        <Search>
+          <SearchIconWrapper>
+            <SearchIcon />
+          </SearchIconWrapper>
+          <StyledInputBase
+            placeholder="Search…"
+            inputProps={{ 'aria-label': 'search' }}
+            onChange={e => onChange(e.target.value)}
+          />
+        </Search>
+      </Toolbar>
+    </Box>
+  );
+}
+
+export const COrdersSearchInput = connect(
+  state => {
+
+  },
+  {
+    onChange: seacrhStr => actionSetOrderSearch(seacrhStr)
+  }
+)(SearchInput);

src/jql/gqlOrders.js

@@ -1,6 +1,6 @@
 import { gql } from "../utills/gql";
-import {actionPromise} from "../reducers";
-import {actionCartClear} from '../reducers';
+import { actionPromise } from "../reducers";
+import { actionCartClear } from '../reducers';
 
 const orderUpsert = (order, id = null) => {
     const orderUpsertQuery = `mutation OrderUpsert($order: OrderInput) {
@@ -40,9 +40,21 @@ export const actionOrderFullUpsert = (then) =>
     actionPromise('orderUpsert', orderFullUpsert(then));
 
 
+const createQuery = (searchStr, searchFieldNames) => {
+    if (!searchStr)
+        return `{${searchStr ?? ''}}`;
+    let result = {};
+    for (let searchFieldName of searchFieldNames) {
+        result[searchFieldName] = searchFieldName === '_id' ? searchStr : `/${searchStr}/`;
+    }
+    return JSON.stringify(result);
+}
+
+const createOrderSearch = query => createQuery(query, ["_id"]);
+
 export const gqlFindOrders = (fromPage, pageSize, query = '') => {
-    
-    let params = { q: `[{${query ?? ''}}, {\"skip\":[${fromPage * pageSize}], \"limit\":[${pageSize}]}]` };
+    query = createOrderSearch(query);
+    let params = { q: `[${query}, {\"skip\":[${fromPage * pageSize}], \"limit\":[${pageSize}]}]` };
     const findOrdersQuery = `query OrderFind($q: String) {
                             OrderFind(query: $q) {
                                 _id total
@@ -59,7 +71,8 @@ export const gqlFindOrders = (fromPage, pageSize, query = '') => {
 }
 
 export const gqlOrdersCount = (query = '') => {
-    const catQuery = `query OrdersCount { OrderCount(query: "[{${query ?? ''}}]") }`;
+    query = createOrderSearch(query);
+    const catQuery = `query OrdersCount { OrderCount(query: "[${query}]") }`;
     return gql(catQuery);
 }
 
@@ -79,4 +92,4 @@ export const gqlOrdersCount = (query = '') => {
                                 }`;
         return gql(findOrdersQuery);
     }
-*/    
+*/

src/reducers/frontEndReducer.js

@@ -6,9 +6,13 @@ export function frontEndReducer(state = { sidebar: {}, ordersPaging: { fromPage:
         if (action.type === 'SET_ORDERS_PAGING') {
             return { ...state, ordersPaging: { fromPage: action.page.fromPage, pageSize: action.page.pageSize } };
         }
+        if (action.type === 'SET_ORDERS_SEARCH') {
+            return { ...state, ordersSearchStr: action.searchStr };
+        }
     }
     return state;
 }
 export const actionSetSidebar = open => ({ type: 'SET_SIDE_BAR', open });
 
-export const actionSetOrdersPaging = (page = { fromPage: 0, pageSize: 5 }) => ({ type: 'SET_ORDERS_PAGING', page });
+export const actionSetOrdersPaging = (page = { fromPage: 0, pageSize: 5 }) => ({ type: 'SET_ORDERS_PAGING', page });
+export const actionSetOrderSearch = searchStr => ({ type: 'SET_ORDERS_SEARCH', searchStr });