From e49b629d9981972cfe6444e031227b344baf5325 Mon Sep 17 00:00:00 2001 From: Firesieht Date: Sun, 23 Oct 2022 00:17:15 +0300 Subject: [PATCH 1/2] fix spinner --- store/reducers/nodesInputReducer.ts | 14 +++++++++++--- сomponents/card/index.tsx | 2 +- сomponents/search/index.tsx | 10 +++++----- сomponents/search/search.module.css | 3 ++- 4 files changed, 19 insertions(+), 10 deletions(-) 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/с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 635f284..156a5bf 100644 --- a/сomponents/search/index.tsx +++ b/сomponents/search/index.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { AutoComplete, Input, Tag } 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" @@ -10,14 +10,14 @@ import styles from "./search.module.css" 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 [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)}) ) @@ -69,8 +69,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( @@ -130,7 +130,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..6a928e3 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,7 +15,7 @@ .search.ant-input-group-addonn{ background-color: #e7eef7 !important; - + } .search input{ From 1e872f7812fef30bccc5c68f67ee35ea1b110f35 Mon Sep 17 00:00:00 2001 From: Firesieht Date: Sun, 23 Oct 2022 02:08:58 +0300 Subject: [PATCH 2/2] add visual of popover --- styles/Home.module.css | 5 ++++ сomponents/card/card.module.css | 3 +- сomponents/search/index.tsx | 46 ++++++++++++++++++++++++++--- сomponents/search/search.module.css | 10 +++++-- 4 files changed, 57 insertions(+), 7 deletions(-) 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/search/index.tsx b/сomponents/search/index.tsx index 156a5bf..8282004 100644 --- a/сomponents/search/index.tsx +++ b/сomponents/search/index.tsx @@ -1,10 +1,11 @@ import React, { useState } from "react"; -import { AutoComplete, Input, Tag } from 'antd'; +import { AutoComplete, Input, InputNumber, Popover, Radio, Tag } from 'antd'; import { useAppDispatch, useAppSelector } from "../../hooks"; 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'; export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ @@ -15,6 +16,7 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ 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%2 == 0){ @@ -26,7 +28,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 @@ -50,6 +53,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])) } @@ -102,6 +135,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) @@ -122,7 +158,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)} diff --git a/сomponents/search/search.module.css b/сomponents/search/search.module.css index 6a928e3..f66abb4 100644 --- a/сomponents/search/search.module.css +++ b/сomponents/search/search.module.css @@ -18,10 +18,16 @@ } -.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