Merge pull request #8 from magnum-opus-tender-hack/verstka2

Verstka2

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<string>) {
             state.nodes = state.nodes.filter((e) => e.value != action.payload)
         },
+        setLoading(state, action: PayloadAction<boolean>){
+            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;

styles/Home.module.css

@@ -7,3 +7,8 @@
 
 }
 
+@media screen and (max-width: 800px) {
+  .container{
+    padding: 75px 30px;
+  }
+}

сomponents/card/card.module.css

@@ -112,5 +112,6 @@
     flex-direction: column;
     gap:15px;
     font-size: 16px;
-
 }
+
+

сomponents/card/index.tsx

@@ -14,7 +14,7 @@ export const ProductCard: React.FC<IProduct> = (props) =>{
     return(
         props.characteristic == undefined? null:
         <div  className={styles.card}>
-            <div className={styles.name}>{props.name}</div>
+            <div className={styles.name}>{props.name.length > 100? props.name.slice(0,100) + "...":props.name}</div>
             <div className={styles.prWrap}>
                 <div className={styles.score}> <span className={styles.red}>{props.score}</span> прсмотров</div>
                 <div className={styles.characteristic}> <span className={styles.blue}>{props.characteristic.length}</span> характеристик</div>

сomponents/search/index.tsx

@@ -1,23 +1,25 @@
 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, 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';
 
 
 export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
     const [data, setData] = useState("")
     const [tags, setTags] = useState(new Array<JSX.Element>())
-    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)})
             )
@@ -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)+"..."}
                         </Tag>
+        
+        if (value.type.split("_")[1] == "numeric"){
+            let popver = <div className={styles.popover}>
+                <div>{value.type.split("_")[0]}</div>
+                <Radio.Group defaultValue="=" size="small">
+                    <Radio.Button value=">=">≥</Radio.Button>
+                    <Radio.Button value="=">=</Radio.Button>
+                    <Radio.Button value="<=">≤</Radio.Button>
+                </Radio.Group>
+                <InputNumber autoFocus  onClick={()=>setDisableInput(true)} size="small" min={1} max={100000} defaultValue={100}/>
+
+            </div>
+
+            tag =   <Popover onOpenChange={(e)=> e?null:setDisableInput(false)} content={popver} title="Задать значение">
+                    <Tag
+                        color={"cyan"}
+                        closable
+                        style={{ marginRight: 3 }}
+                        onClose={() => {
+                            dispatch(
+                                deleteNode(value.value)
+                            )
+                        }}
+                        >
+                            <CalculatorOutlined></CalculatorOutlined>
+                            {value.value.length < 13? value.value:value.value.slice(0,10)+"..."}
+                        </Tag>
+            </Popover>
+        }
+        
         setTags(tags.concat([tag]))
     }
 
@@ -69,8 +102,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(
@@ -102,6 +135,9 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
     }
     return(
         <AutoComplete
+            autoFocus={false}
+            onBlur={()=>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}
         >
             <Input.Search  prefix={tags}
-            style={{ width: "50vw" }}
+            autoFocus={false}
+            onBlur={()=>null}
+            style={{ width: "60vw" }}
             color="red-6"
             className={styles.search}
             onChange={(e)=>onChange(e.target.value)} 
@@ -130,7 +168,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 />
         </AutoComplete>
 

с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{
@@ -17,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;
+}