magnum-opus-tender-hack/frontend
1
0
Fork 0
mirror of https://github.com/magnum-opus-tender-hack/frontend.git synced 2024-11-21 15:56:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Verstka2
This commit is contained in:
Ilia vasilenko 2022-10-23 02:12:56 +03:00 committed by GitHub
commit 8d180cb7f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 76 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
store/reducers/nodesInputReducer.ts
View File

@ -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;

5
styles/Home.module.css
View File

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

3
сomponents/card/card.module.css
View File

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

2
сomponents/card/index.tsx
View File

@ -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>

56
сomponents/search/index.tsx
View File

@ -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>

13
сomponents/search/search.module.css
View File

@ -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;
}