diff --git a/store/reducers/nodesInputReducer.ts b/store/reducers/nodesInputReducer.ts index 38bc161..75b815b 100644 --- a/store/reducers/nodesInputReducer.ts +++ b/store/reducers/nodesInputReducer.ts @@ -29,14 +29,16 @@ interface INodesInput { value: INode }[], current_word: string, - products: IProduct[] + products: IProduct[], + loading: boolean } const initialState: INodesInput = { nodes: [], hints: [], current_word: "", - products: [] + products: [], + loading:false } const nodesInputSlice = createSlice({ @@ -52,11 +54,15 @@ const nodesInputSlice = createSlice({ deleteNode(state, action: PayloadAction) { state.nodes = state.nodes.filter((e) => e.value != action.payload) }, + setLoading(state, action: PayloadAction){ + state.loading = action.payload + } }, extraReducers: (builder) => { builder.addCase(search.fulfilled, (state, action) => { state.products = action.payload; + state.loading = false }) builder.addCase(createHints.fulfilled, (state, action) => { state.hints = action.payload; @@ -64,13 +70,15 @@ const nodesInputSlice = createSlice({ } }) -export const {setCurrentWord, createNode, deleteNode} = nodesInputSlice.actions; +export const {setCurrentWord, createNode, deleteNode, setLoading} = nodesInputSlice.actions; export const hints = createSelector((state: INodesInput) => state.hints, hints => hints) export const currentWord = createSelector((state: INodesInput) => state.current_word, word => word) export const products = createSelector((state: INodesInput) => state.products, products => products) export const nodes = createSelector((state: INodesInput) => state.nodes, nodes => nodes) +export const loading = createSelector((state: INodesInput) => state.loading, loading => loading) + export default nodesInputSlice.reducer; \ No newline at end of file diff --git a/styles/Home.module.css b/styles/Home.module.css index b8f4c65..e8a3937 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -7,3 +7,8 @@ } +@media screen and (max-width: 800px) { + .container{ + padding: 75px 30px; + } +} \ No newline at end of file diff --git a/сomponents/card/card.module.css b/сomponents/card/card.module.css index e5e6d6c..22b173f 100644 --- a/сomponents/card/card.module.css +++ b/сomponents/card/card.module.css @@ -112,5 +112,6 @@ flex-direction: column; gap:15px; font-size: 16px; +} + -} \ No newline at end of file diff --git a/сomponents/card/index.tsx b/сomponents/card/index.tsx index 1b92a05..439d8ec 100644 --- a/сomponents/card/index.tsx +++ b/сomponents/card/index.tsx @@ -14,7 +14,7 @@ export const ProductCard: React.FC = (props) =>{ return( props.characteristic == undefined? null:
-
{props.name}
+
{props.name.length > 100? props.name.slice(0,100) + "...":props.name}
{props.score} прсмотров
{props.characteristic.length} характеристик
diff --git a/сomponents/search/index.tsx b/сomponents/search/index.tsx index c5018f0..eeda8ef 100644 --- a/сomponents/search/index.tsx +++ b/сomponents/search/index.tsx @@ -1,10 +1,15 @@ import React, { useState } from "react"; import { AutoComplete, Input, Tag, Tooltip } from 'antd'; +import { InputNumber, Popover, Radio } from 'antd'; import { useAppDispatch, useAppSelector } from "../../hooks"; -import { createNode, deleteNode, hints, INode, nodes, products } from "../../store/reducers/nodesInputReducer"; +import { createNode, deleteNode, hints, INode, loading, nodes, products, setLoading } from "../../store/reducers/nodesInputReducer"; import { createHints, search } from "../../store/reducers/asyncActions"; import styles from "./search.module.css" +import {CalculatorOutlined} from '@ant-design/icons'; +import 'antd/dist/antd.css'; + + function parse_types(type: string) { if (type == 'Name') return 'Наименование' if (type == 'Category') return 'Категория' @@ -14,14 +19,15 @@ function parse_types(type: string) { export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ const [data, setData] = useState("") const [tags, setTags] = useState(new Array()) - const [loading, setLoading] = useState(false) const dispatch = useAppDispatch(); const getNodes = useAppSelector(nodes); const getProducts = useAppSelector(products); const getHints = useAppSelector(hints); + const getLoading = useAppSelector(loading) + const [disableInput, setDisableInput] = useState(false) const [autoCompleteValue, setAutoCompleteValue] = useState("") const onChange = (text:string) =>{ - if (text.length >= 3 && text.length%3 == 0){ + if (text.length >= 3 && text.length%2 == 0){ dispatch( createHints({word:text, hints:getHints.length == 0? []: getHints.map((el)=>el.value)}) ) @@ -30,7 +36,8 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ } const addTag = (value:INode) => { let color = "red" - switch((value as any).type ){ + + switch(value.type){ case "Category": color = "gold" break @@ -54,6 +61,36 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ > {value.value.length <13? value.value:value.value.slice(0,10)+"..."} + + if (value.type.split("_")[1] == "numeric"){ + let popver =
+
{value.type.split("_")[0]}
+ + + = + + + setDisableInput(true)} size="small" min={1} max={100000} defaultValue={100}/> + +
+ + tag = e?null:setDisableInput(false)} content={popver} title="Задать значение"> + { + dispatch( + deleteNode(value.value) + ) + }} + > + + {value.value.length < 13? value.value:value.value.slice(0,10)+"..."} + + + } + setTags(tags.concat([tag])) } @@ -73,8 +110,8 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ } const onEnter = (value:any) => { - setLoading(true) console.log(getNodes); + dispatch(setLoading(true)) dispatch( search( getNodes.concat( @@ -106,6 +143,9 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ } return( null} + disabled={disableInput} options={getHints.map((e) => { const pre_str = e.value.value.slice(0, e.coordinate) const after_str = e.value.value.slice(e.coordinate+autoCompleteValue.length, e.value.value.length) @@ -128,7 +168,9 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ dropdownMatchSelectWidth={252} > null} + style={{ width: "60vw" }} color="red-6" className={styles.search} onChange={(e)=>onChange(e.target.value)} @@ -136,7 +178,7 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ onSearch={(e) => onEnter(e)} size="large" placeholder="Поиск товара" - loading={loading && getProducts.length == 0} + loading={getLoading} enterButton /> diff --git a/сomponents/search/search.module.css b/сomponents/search/search.module.css index 66af200..f66abb4 100644 --- a/сomponents/search/search.module.css +++ b/сomponents/search/search.module.css @@ -4,6 +4,7 @@ border: 1px solid #BDBDBD; border-radius: 0px 17px 17px 0px !important; background-color: #DB2B21; + z-index: 0; } .search button:hover{ @@ -14,13 +15,19 @@ .search.ant-input-group-addonn{ background-color: #e7eef7 !important; - + } -.search input{ -} + .search.ant-input-affix-wrapper-lg{ background-color: #FBFBFB !important; border-radius: 17px !important; +} +.popover{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap:3px; } \ No newline at end of file