seb/searchPopper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
sebseb7
2024-09-05 05:00:42 +02:00
parent c6928eb137
commit 41ebffe71c
3 changed files with 64 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -19,6 +19,7 @@
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
"@studysync/eslint-plugin-material-ui": "^1.2.1",
"async": "^3.2.6",
"awesome-debounce-promise": "^2.1.0",
"babel-loader": "^9.1.3",
"compression": "^1.7.4",
"css-loader": "^7.1.2",
@@ -26,7 +27,6 @@
"eslint-webpack-plugin": "^4.2.0",
"express": "^4.19.2",
"html-webpack-plugin": "^5.6.0",
"mssql": "^11.0.1",
"mysql": "^2.18.1",
"react": "^18.3.1",
"socket.io": "^4.7.5",

5
search.js
View File

@@ -202,7 +202,7 @@ function permute(nums) {
function runapp(socket){
socket.on("search", (text, callback) => {
socket.on("search", (text, offset, callback) => {
try{
@@ -215,8 +215,9 @@ function runapp(socket){
queries.push('%'+(per.join('%'))+'%');
qstr+= ' OR cName LIKE ? ';
}
queries.push(offset*10);
connection.query('SELECT tartikel.kArtikel,cArtNr,cName,cSeo FROM tartikel LEFT OUTER JOIN tartikelpict ON (tartikelpict.kArtikel = tartikel.kArtikel) WHERE 1=2 '+qstr+' limit 15',queries, function (error, results) {
connection.query('SELECT tartikel.kArtikel,cArtNr,cName,cSeo FROM tartikel LEFT OUTER JOIN tartikelpict ON (tartikelpict.kArtikel = tartikel.kArtikel) WHERE 1=2 '+qstr+' ORDER BY cName limit 11 OFFSET ?',queries, function (error, results) {
if (callback) callback(error,results);
});

86
src/Content.js
View File

@@ -6,12 +6,39 @@ import {
Avatar,
Typography,
Card,
InputAdornment
InputAdornment,
IconButton,
Grid
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import AwesomeDebouncePromise from "awesome-debounce-promise";
import React from "react";
function searchReal(searchtext,socket,setState,offset){
if(searchtext.trim().length > 2){
socket.emit('search',searchtext,offset,(err,res)=>{
if(!err){
if((offset != 0)&&(res.length == 0)){
searchReal(searchtext,socket,setState,offset-1)
}
setState({ result:res,offset:offset });
}
else{
console.log('Err',err);
setState({ result:[],offset:0 });
}
});
}
else{
setState({ result:[],offset:0 });
}
}
const searchDebounced = AwesomeDebouncePromise(searchReal, 150);
export default class Content extends React.Component {
constructor(props) {
@@ -20,27 +47,20 @@ export default class Content extends React.Component {
this.state = {
searchtext:'',
result:[],
offset:0,
anchorEl:null
};
}
handleSearch = (searchtext) => {
if(searchtext.trim().length > 2){
this.props.socket.emit('search',searchtext,(err,res)=>{
if(!err){
this.setState({ result:res });
console.log(res);
}
else{
console.log('Err',err);
this.setState({ result:[] });
}
});
}
else{
this.setState({ result:[] });
}
navigateNext = () => {
const setState = this.setState.bind(this);
searchDebounced(this.state.searchtext,this.props.socket,setState,this.state.offset+1);
this.setState({offset:this.state.offset+1});
}
navigateBefore = () => {
const setState = this.setState.bind(this);
searchDebounced(this.state.searchtext,this.props.socket,setState,this.state.offset-1);
this.setState({offset:this.state.offset-1});
}
render() {
@@ -51,17 +71,18 @@ export default class Content extends React.Component {
<TextField
spellCheck={false}
InputProps={{
startAdornment: (
<InputAdornment>
<SearchIcon style={{ marginRight:'20px'}}/>
endAdornment: (
<InputAdornment position="end">
<SearchIcon/>
</InputAdornment>
)
}}
value={this.state.searchtext}
inputRef={(input) => {input && input.focus()}}
onChange={(e) => {
this.setState({ anchorEl:e.target,searchtext: e.target.value });
this.handleSearch(e.target.value);
this.setState({ offset:0,anchorEl:e.target,searchtext: e.target.value });
const setState = this.setState.bind(this);
searchDebounced(e.target.value,this.props.socket,setState,0);
}}
autoComplete="off"
fullWidth
@@ -71,15 +92,28 @@ export default class Content extends React.Component {
open={this.state.result.length > 0}
anchorEl={this.state.anchorEl}
placement={'bottom-start'}
style={{ width:'100%'}} sx={{ maxWidth: 'sm' }}
>
<Paper style={{ padding: 20}}>
<Stack>
{this.state.result.map((line,i)=>(
<Paper style={{ width:'100%',margin:0, padding: 20}} sx={{ maxWidth: 'sm' }}>
<Stack spacing={1}>
{this.state.result.slice(0, 10).map((line,i)=>(
<Stack key={i} direction="row" spacing={2} style={{cursor: 'pointer',userSelect:'none'}} sx={{alignItems: "center"}} onClick={() => { window.location = 'https://t.growheads.de/'+line.cSeo }}>
<Avatar src={'https://t.growheads.de/media/image/product/'+(line.kArtikel)+'/xs/'+(line.cSeo)+'.jpg'} sx={{ width: 40, height: 40 }} variant="square"/>
<Typography>{line.cName}</Typography>
</Stack>
))}
<Grid container>
<Grid item xs={6}>
{ (this.state.offset!=0 &&
<IconButton onClick={this.navigateBefore}><NavigateBeforeIcon/></IconButton>
)}
</Grid>
<Grid item xs={6}>
{ (this.state.result[10] &&
<Grid container justifyContent="flex-end"><IconButton onClick={this.navigateNext}><NavigateNextIcon/></IconButton></Grid>
)}
</Grid>
</Grid>
</Stack>
</Paper>
</Popper>