From 1e872f7812fef30bccc5c68f67ee35ea1b110f35 Mon Sep 17 00:00:00 2001
From: Firesieht <firesieht@mail.ru>
Date: Sun, 23 Oct 2022 02:08:58 +0300
Subject: [PATCH] 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)+"..."}
                         </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]))
     }
 
@@ -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)} 
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