Fixed full components
This commit is contained in:
MaxOvs19
@ -1,86 +0,0 @@
|
||||
.search {
|
||||
margin-top: 73px;
|
||||
}
|
||||
.search__title {
|
||||
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||
font-size: 2.4em;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.search__box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.search__box {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.search__box > button {
|
||||
color: white;
|
||||
width: 131px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
font-family: 'Muller', sans-serif;
|
||||
font-size: 1.6em;
|
||||
letter-spacing: 0.8px;
|
||||
text-align: center;
|
||||
background-color: #73c141;
|
||||
}
|
||||
|
||||
.search__box > button:hover {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #73c141;
|
||||
box-shadow: inset 0 0 0 3px #73c141;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.search__box > button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
[class$='-placeholder'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class$='-control'] {
|
||||
border-color: #e8e8e8 !important;
|
||||
box-shadow: 0 0 0 0 #e8e8e8 !important;
|
||||
}
|
||||
|
||||
[class$='-value__label'] {
|
||||
font-size: 1.4em !important;
|
||||
}
|
||||
|
||||
[class$='-option'] {
|
||||
font-size: 1.6em !important;
|
||||
color: gray !important;
|
||||
}
|
||||
|
||||
.search__submit {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search__submit:hover .loader path {
|
||||
fill: #6aaf5c;
|
||||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
.select {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
import React, {useState} from 'react'
|
||||
import {useSelector, useDispatch} from 'react-redux'
|
||||
import Select from 'react-select'
|
||||
import {Loader} from '../Loader/Loader'
|
||||
import {apiRequest} from "../../api/request";
|
||||
import {
|
||||
selectedItems,
|
||||
selectItems,
|
||||
selectTags,
|
||||
profiles,
|
||||
setPositionId
|
||||
} from '../../redux/outstaffingSlice'
|
||||
|
||||
import './TagSelect.css'
|
||||
|
||||
|
||||
const TagSelect = () => {
|
||||
|
||||
const [searchLoading, setSearchLoading] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
|
||||
const itemsArr = useSelector(selectItems);
|
||||
const tagsArr = useSelector(selectTags);
|
||||
|
||||
const handleSubmit = ({dispatch, setSearchLoading}) => {
|
||||
setSearchLoading(true);
|
||||
|
||||
dispatch(setPositionId(null));
|
||||
const filterItemsId = itemsArr.map((item) => item.id).join();
|
||||
const params = filterItemsId ? {skill: filterItemsId} : '';
|
||||
|
||||
|
||||
apiRequest('/profile', {
|
||||
params: {...params, limit: 1000},
|
||||
}).then((res) => {
|
||||
dispatch(profiles(res));
|
||||
setSearchLoading(false)
|
||||
})
|
||||
|
||||
// dispatch(selectedItems([]));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='search'>
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<h2 className='search__title'>
|
||||
Найти специалиста по навыкам
|
||||
</h2>
|
||||
<div className='search__box'>
|
||||
<Select
|
||||
value={itemsArr}
|
||||
onChange={(value) => dispatch(selectedItems(value))}
|
||||
isMulti
|
||||
name='tags'
|
||||
className='select'
|
||||
classNamePrefix='select'
|
||||
options={
|
||||
tagsArr &&
|
||||
tagsArr.flat().map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
value: item.value,
|
||||
label: item.value
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleSubmit({dispatch, setSearchLoading})}
|
||||
type='submit'
|
||||
className='search__submit'
|
||||
>
|
||||
{searchLoading ? <Loader width={30} height={30}/> : 'Поиск'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default TagSelect
|
||||
79
src/components/Select/TagSelect.jsx
Normal file
79
src/components/Select/TagSelect.jsx
Normal file
@ -0,0 +1,79 @@
|
||||
import React, { useState } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import Select from "react-select";
|
||||
|
||||
import { Loader } from "../Loader/Loader";
|
||||
import { apiRequest } from "../../api/request";
|
||||
import {
|
||||
selectedItems,
|
||||
selectItems,
|
||||
selectTags,
|
||||
profiles,
|
||||
setPositionId,
|
||||
} from "../../redux/outstaffingSlice";
|
||||
|
||||
import "./tagSelect.scss";
|
||||
|
||||
const TagSelect = () => {
|
||||
const [searchLoading, setSearchLoading] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const itemsArr = useSelector(selectItems);
|
||||
const tagsArr = useSelector(selectTags);
|
||||
|
||||
const handleSubmit = ({ dispatch, setSearchLoading }) => {
|
||||
setSearchLoading(true);
|
||||
|
||||
dispatch(setPositionId(null));
|
||||
const filterItemsId = itemsArr.map((item) => item.id).join();
|
||||
const params = filterItemsId ? { skill: filterItemsId } : "";
|
||||
|
||||
apiRequest("/profile", {
|
||||
params: { ...params, limit: 1000 },
|
||||
}).then((res) => {
|
||||
dispatch(profiles(res));
|
||||
setSearchLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="search">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<h2 className="search__title">Найти специалиста по навыкам</h2>
|
||||
<div className="search__box">
|
||||
<Select
|
||||
value={itemsArr}
|
||||
onChange={(value) => dispatch(selectedItems(value))}
|
||||
isMulti
|
||||
name="tags"
|
||||
className="select"
|
||||
classNamePrefix="select"
|
||||
options={
|
||||
tagsArr &&
|
||||
tagsArr.flat().map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
value: item.value,
|
||||
label: item.value,
|
||||
};
|
||||
})
|
||||
}
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleSubmit({ dispatch, setSearchLoading })}
|
||||
type="submit"
|
||||
className="search__submit"
|
||||
>
|
||||
{searchLoading ? <Loader width={30} height={30} /> : "Поиск"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagSelect;
|
||||
81
src/components/Select/tagSelect.scss
Normal file
81
src/components/Select/tagSelect.scss
Normal file
@ -0,0 +1,81 @@
|
||||
.search {
|
||||
margin-top: 73px;
|
||||
|
||||
&__title {
|
||||
font-family: "GT Eesti Pro Display", sans-serif;
|
||||
font-size: 2.4em;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&__box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
color: white;
|
||||
width: 131px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
font-family: "Muller", sans-serif;
|
||||
font-size: 1.6em;
|
||||
letter-spacing: 0.8px;
|
||||
text-align: center;
|
||||
background-color: #73c141;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #73c141;
|
||||
box-shadow: inset 0 0 0 3px #73c141;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 85%;
|
||||
|
||||
@media (max-width: 990px) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class$="-placeholder"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class$="-control"] {
|
||||
border-color: #e8e8e8 !important;
|
||||
box-shadow: 0 0 0 0 #e8e8e8 !important;
|
||||
}
|
||||
|
||||
[class$="-value__label"] {
|
||||
font-size: 1.4em !important;
|
||||
}
|
||||
|
||||
[class$="-option"] {
|
||||
font-size: 1.6em !important;
|
||||
color: gray !important;
|
||||
}
|
||||
|
||||
.search__submit:hover .loader path {
|
||||
fill: #6aaf5c;
|
||||
}
|
||||
Reference in New Issue
Block a user