Сделаны поиск через запросы

This commit is contained in:
DyCTaTOR 2024-01-03 20:12:42 +03:00
parent 5425b572f8
commit 64c4778474
7 changed files with 23 additions and 26 deletions

View File

@ -5,8 +5,8 @@ import useDirections from '../hooks/DirectionHooks';
import Input from '../../input/Input.jsx'; import Input from '../../input/Input.jsx';
const Directions = () => { const Directions = () => {
const { directions } = useDirections();
const [searchValue, setSearchValue] = useState(''); const [searchValue, setSearchValue] = useState('');
const { directions } = useDirections(searchValue);
return ( return (
<> <>
@ -18,14 +18,7 @@ const Directions = () => {
<TableDirect> <TableDirect>
{ {
directions.map((item) => { directions.map((item) => {
if (searchValue === '' return <Direction key={item.id} item={item} />;
|| item.name.toLowerCase().includes(searchValue.toLowerCase())
|| item.department.toLowerCase().includes(searchValue.toLowerCase())
|| item.things.toLowerCase().includes(searchValue.toLowerCase())
|| item.code.toLowerCase().includes(searchValue.toLowerCase())) {
return <Direction key={item.id} item={item} />;
}
return null;
}) })
} }
</TableDirect> </TableDirect>

View File

@ -1,18 +1,19 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import DirectionsApiService from './DirectionsApiService'; import DirectionsApiService from './DirectionsApiService';
const useDirections = () => { const useDirections = (searchValue) => {
const [directions, setDirections] = useState([]); const [directions, setDirections] = useState([]);
const getDirections = async () => { const getDirections = async () => {
const data = await DirectionsApiService.getAll(); const expand = `?q=${searchValue}`;
const data = await DirectionsApiService.getAll(expand);
setDirections(data ?? []); setDirections(data ?? []);
}; };
useEffect(() => { useEffect(() => {
getDirections(); getDirections();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, [searchValue]);
return { return {
directions, directions,

View File

@ -1,5 +1,5 @@
import ApiService from '../../api/ApiService'; import ApiService from '../../api/ApiService';
const LinesApiService = new ApiService('directions'); const DirectionsApiService = new ApiService('directions');
export default LinesApiService; export default DirectionsApiService;

View File

@ -1,4 +1,5 @@
import { useState } from 'react'; import { useSearchParams } from 'react-router-dom';
import { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import {
Button, Container, Button, Container,
@ -16,9 +17,11 @@ import Input from '../../input/Input.jsx';
// должно все перерисовываться // должно все перерисовываться
const UpdateNews = () => { const UpdateNews = () => {
const [searchValue, setSearchValue] = useState(''); const [searchParams, setSearchParams] = useSearchParams();
const { lines, handleLinesChange } = useLines(); const [searchValue, setSearchValue] = useState(searchParams.get('q') || '');
const { lines, handleLinesChange } = useLines(searchValue);
const { const {
isDeleteModalShow, isDeleteModalShow,
showDeleteModal, showDeleteModal,
@ -34,6 +37,9 @@ const UpdateNews = () => {
handleFormSubmit, handleFormSubmit,
handleFormClose, handleFormClose,
} = useLinesFormModal(handleLinesChange); } = useLinesFormModal(handleLinesChange);
useEffect(() => {
setSearchParams({ q: searchValue });
}, [searchValue]);
return ( return (
<> <>
@ -47,18 +53,15 @@ const UpdateNews = () => {
<Button variant='info' onClick={() => showFormModal()}> <Button variant='info' onClick={() => showFormModal()}>
Добавить товар</Button> Добавить товар</Button>
</div> </div>
<div className="mainDiv row"> <div className="mainDiv row">
{ {
lines.map((item) => { lines.map((item) => {
if (searchValue === ''
|| item.description.toLowerCase().includes(searchValue.toLowerCase())) {
return <UpdateNew key={item.id} return <UpdateNew key={item.id}
item={item} item={item}
onDelete={() => showDeleteModal(item.id)} onDelete={() => showDeleteModal(item.id)}
onEdit={() => showFormModal(item.id)} onEdit={() => showFormModal(item.id)}
/>; />;
}
return null;
})} })}
</div> </div>
<ModalConfirm show={isDeleteModalShow} <ModalConfirm show={isDeleteModalShow}

View File

@ -1,20 +1,21 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import LinesApiService from '../service/LinesApiService'; import LinesApiService from '../service/LinesApiService';
const useLines = (typeFilter) => { const useLines = (searchValue) => {
const [linesRefresh, setLinesRefresh] = useState(false); const [linesRefresh, setLinesRefresh] = useState(false);
const [lines, setLines] = useState([]); const [lines, setLines] = useState([]);
const handleLinesChange = () => setLinesRefresh(!linesRefresh); const handleLinesChange = () => setLinesRefresh(!linesRefresh);
const getLines = async () => { const getLines = async () => {
const data = await LinesApiService.getAll(); const expand = `?q=${searchValue}`;
const data = await LinesApiService.getAll(expand);
setLines(data ?? []); setLines(data ?? []);
}; };
useEffect(() => { useEffect(() => {
getLines(); getLines();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [linesRefresh, typeFilter]); }, [linesRefresh, searchValue]);
return { return {
lines, lines,

View File

@ -70,7 +70,6 @@ const useLinesItemForm = (id, linesChangeHandle) => {
await LinesApiService.update(id, body); await LinesApiService.update(id, body);
} }
if (linesChangeHandle) linesChangeHandle(); if (linesChangeHandle) linesChangeHandle();
toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
setModified(true); setModified(true);
return true; return true;
} }

View File

@ -48,7 +48,7 @@ const Entry = () => {
<label className="form-label"><b>Пароль</b></label> <label className="form-label"><b>Пароль</b></label>
<Input name="password" value = { password } onChange={(e) => setPassword(e.target.value)} <Input name="password" value = { password } onChange={(e) => setPassword(e.target.value)}
type="password" required /> type="password" required />
<Button as={Link} to='/page4' className = "btn btn-danger">Назад</Button> <Button as={Link} to='/page4' className = "btn btn-info">Назад</Button>
<Button className="btn btn-primary w-auto" type="submit" >Создать</Button> <Button className="btn btn-primary w-auto" type="submit" >Создать</Button>
</Form> </Form>
</div> </div>