LastTop

src/components/AllStaffs/FullInfoAboutStaff.js

@@ -42,7 +42,7 @@ class FullInfoAboutStaff extends Component {
                 />
             </div>
         } else {
-            data = InfoStaff.map((el, key) => <div className="divCenter">
+            data = InfoStaff.map((el, key) => <div className="divCenter" key={key}>
                 <div className="flex-around">
                     <p><b>Название: </b>{el.title} </p>
                     <p><b>Цена: </b>{el.price}</p>
@@ -54,7 +54,7 @@ class FullInfoAboutStaff extends Component {
             )
             data1 = <div className="carusel">
                 <Carousel effect="fade">
-                    {arr.map(el => <div>
+                    {arr.map((el,key) => <div key={key}>
                         {el.state ? <img src={`http://127.0.0.1:2000/static/${el.newStr}`} className="fullImgStaff" alt="lorem" /> :
                             <img src={`${el.defaultStr}`} width="325" height="190" className="imgStaff" alt="lorem" />}
                     </div>)}

src/components/AllStaffs/index.js

@@ -5,10 +5,24 @@ import Loader from 'react-loader-spinner';
 import AddNewStaff from '../../components/BtnAddNewStaff'
 
 class AllStaffs extends Component {
-
+    constructor(props){
+        super(props)
+        this.state = {
+            trig: false, 
+            maxMin: false
+        }
+    }
+    sortStaffMinMax = () =>{
+        this.setState({trig: !this.state.trig})
+    }
+    sortStaffMaxMin = () =>{
+        this.setState({maxMin: !this.state.maxMin})
+    }
     render() {
-        const { inputStaffs, isFetching, isAdmin, getUser } = this.props
+        const { inputStaffs, isFetching, isAdmin, getUser, arr } = this.props
+       
         let data;
+
         if (isFetching === true) {
             data = <div className="loader">
                 <Loader type="Triangle"
@@ -17,9 +31,39 @@ class AllStaffs extends Component {
                     width="100"
                 />
             </div>
+        } else if(this.state.trig === true) {
+            data = <div className="staffs">
+           
+                {arr.map((el, key) => (
+                 <Link to={`/staff/${el.id}`} key={key}>
+                     <div className="staff">
+                     {el.state ?  <img src={el.img.substr(0,53)} width="325" height="190" className="imgStaff"  alt="lorem" /> : <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />}
+                         <div className="titlleAndPrice">
+                             <h4>{el.title}</h4>
+                             <h4>Цена: {el.price}</h4>
+                         </div>
+                     </div>
+                 </Link>
+             ))}
+             </div>
+
+        }else if (this.state.maxMin === true){
+             data = <div className="staffs">
+                  { arr.map((el, key) => (
+                    <Link to={`/staff/${el.id}`} key={key}>
+                        <div className="staff">
+                        {el.state ?  <img src={el.img.substr(0,53)} width="325" height="190" className="imgStaff"  alt="lorem" /> : <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />}
+                            <div className="titlleAndPrice">
+                                <h4>{el.title}</h4>
+                                <h4>Цена: {el.price}</h4>
+                            </div>
+                        </div>
+                    </Link>
+                )).reverse()}
+                </div>
         } else {
             data = <div className="staffs">
-                {inputStaffs.map((el, key) => (
+            {inputStaffs.map((el, key) => (
                     <Link to={`/staff/${el.id}`} key={key}>
                         <div className="staff">
                         {el.state ?  <img src={el.img.substr(0,53)} width="325" height="190" className="imgStaff"  alt="lorem" /> : <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />}
@@ -30,12 +74,16 @@ class AllStaffs extends Component {
                         </div>
                     </Link>
                 ))}
+                  
             </div>
         }
+        console.log(arr.reverse())
         return (
 
             <div className="contentStaffs">
                 {data}
+                <button className="topPrice" onClick={this.sortStaffMinMax}>Дорогие</button>
+                <button className="bottomPrice" onClick={this.sortStaffMaxMin}>Дешевые</button>
                 <AddNewStaff isAdmin={isAdmin} getUser={getUser} />
             </div>
 

src/components/Auth/authButtons.js

@@ -11,7 +11,7 @@ class Authbuttons extends Component {
                     </button>
                 </Link>
                 <Link to="/registration" >
-                    <button className="butftonAuth">
+                    <button className="buttonAuth">
                         Регистрация
                     </button>
                 </Link>

src/components/Auth/authorisation.js

@@ -39,7 +39,7 @@ const Form = props => {
 
                     <div className="center">
                         <button className="buttonInAuth" onClick={handleSubmit(submit)}>
-                            <Link to="/" className="colorLink" >Войти</Link>
+                            Войти
                         </button>
                     </div>
                 </form>

src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -3,6 +3,7 @@ import { Field, reduxForm } from 'redux-form';
 
 import FormData from 'form-data'
 
+
 class SendingForm extends Component {
     constructor(props) {
         super(props)
@@ -71,8 +72,8 @@ class SendingForm extends Component {
 
         const { AddNewStaffAction, getUser, photo } = this.props      
         if(!this.state.trig){
-
-            values.img = "http://rs.img.com.ua/crop?v2=1&w=600&h=0&url=%2F%2Fbm.img.com.ua%2Fberlin%2Fstorage%2Forig%2Fd224d3bd9bfe8bcb6b561da523d87364.jpg";
+            // http://rs.img.com.ua/crop?v2=1&w=600&h=0&url=%2F%2Fbm.img.com.ua%2Fberlin%2Fstorage%2Forig%2Fd224d3bd9bfe8bcb6b561da523d87364.jpg
+            values.img = "https://icoconvert.com/images/noimage2.png";
             values.state = 0
         } else {
             values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`;

src/components/FormsAdd/redForm/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { reduxForm } from 'redux-form';
 
 import FormData from 'form-data'
-
+import LinkHome from "../../Btn/linkHome"
 
 class FormRedactorStaff extends  Component  {
 
@@ -18,7 +18,62 @@ class FormRedactorStaff extends  Component  {
           
           pushPhoto(data)
     }
-    
+    onChange0 = e => {
+        const { pushPhoto, base64 } = this.props
+        this.setState({ trig: true })
+        let data = new FormData();
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base64(reader.result)
+        }
+        reader.readAsDataURL(file);
+    }
+    onChange1 = e => {
+        const { pushPhoto, base641 } = this.props
+        this.setState({ trig: true })
+        let data = new FormData();
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base641(reader.result)
+        }
+        reader.readAsDataURL(file);
+    }
+    onChange2 = e => {
+        const { pushPhoto, base642 } = this.props
+        this.setState({ trig: true })
+        let data = new FormData();
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base642(reader.result)
+        }
+        reader.readAsDataURL(file);
+    }
+    onChange3 = e => {
+        const { pushPhoto, base643 } = this.props
+        this.setState({ trig: true })
+        let data = new FormData();
+        if (e.target.files[0] === undefined) {
+            return
+        }
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base643(reader.result)
+        }
+        reader.readAsDataURL(file);
+
+    }
     changeHandler = (e) =>{
           const { inputchangeHandler } = this.props
           inputchangeHandler(e.target.value)
@@ -38,10 +93,11 @@ class FormRedactorStaff extends  Component  {
         
     }
     send = () =>{
-        const { inputData, inputData1, inputData2, inputData3, photo, EditStaffAction, InfoStaff, getUser } = this.props  
+        const { inputData, inputData1, inputData2, inputData3, photo, EditStaffAction, InfoStaff, getUser,  } = this.props  
         let values = {}
         if(!this.state.trig){
-            values.img = "http://rs.img.com.ua/crop?v2=1&w=600&h=0&url=%2F%2Fbm.img.com.ua%2Fberlin%2Fstorage%2Forig%2Fd224d3bd9bfe8bcb6b561da523d87364.jpg";
+            //http://rs.img.com.ua/crop?v2=1&w=600&h=0&url=%2F%2Fbm.img.com.ua%2Fberlin%2Fstorage%2Forig%2Fd224d3bd9bfe8bcb6b561da523d87364.jpg
+            values.img = "https://icoconvert.com/images/noimage2.png";
             values.state = 0
         }
         else{
@@ -74,7 +130,7 @@ class FormRedactorStaff extends  Component  {
     render(){
         
         
-         const { pristine, reset, submitting, InfoStaff, allCategory } = this.props
+         const { pristine, reset, submitting, InfoStaff, allCategory, base64Photo, addOrnot, base64Photo1, base64Photo2, base64Photo3, addOrnot1, addOrnot2, addOrnot3 } = this.props
          
          const category = allCategory.data.filter(el => el.parentId !== 0)
          let data;
@@ -87,30 +143,30 @@ class FormRedactorStaff extends  Component  {
             <select type="number"  name="categoryId"  className="input" defaultValue ={el.categoryId} onChange={this.changeHandler3}>
 
               <option >Выберите рубрику</option>
-                    {category.map(el => <option value={el.id}> {el.title}</option>)}
+                    {category.map((el,key) => <option value={el.id} key={key} > {el.title}</option>)}
                 </select>         
-                        <div className="file">
-                            <label className='upload-zone'>
-                               <i>&nbsp;</i>
-                                <input type='file' className='files'  onChange={this.onChange}/>
-                                
-                            </label>
-                            <label className='upload-zone zone2'>
-                            <i>&nbsp;</i>
-                                <input type='file' className='files'  onChange={this.onChange}/>
-                                
-                            </label>
-                            <label className='upload-zone zone3'>
-                            <i>&nbsp;</i>
-                                <input type='file' className='files'  onChange={this.onChange}/>
-                                
-                            </label>
-                            <label className='upload-zone zone4'>
-                            <i>&nbsp;</i>
-                                <input type='file' className='files'  onChange={this.onChange}/>
-                                
-                            </label>
-                        </div>   
+                <div className="file">
+                        <label className='upload-zone zone1'>
+                            {addOrnot ? <img src={base64Photo} style={{ "width": "80px", "height": "80px" }} alt=""></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange0} />
+
+                        </label>
+                        <label className='upload-zone zone2'>
+                            {addOrnot1 ? <img src={base64Photo1} style={{ "width": "80px", "height": "80px" }} alt=""></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange1} />
+
+                        </label>
+                        <label className='upload-zone zone3'>
+                            {addOrnot2 ? <img src={base64Photo2} style={{ "width": "80px", "height": "80px" }} alt=""></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange2} />
+
+                        </label>
+                        <label className='upload-zone zone4'>
+                            {addOrnot3 ? <img src={base64Photo3} style={{ "width": "80px", "height": "80px" }} alt=""></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange3} />
+
+                        </label>
+                    </div>
                         
                
                 <div className="buttonConteiner">
@@ -130,6 +186,7 @@ class FormRedactorStaff extends  Component  {
     return (
         
             <div className="formdiv">
+            <LinkHome />
               {data}  
             </div>
         

src/container/MainPage.js

@@ -29,35 +29,21 @@ class MainPage extends Component {
     }
 
     render() {
-        // const axios = require('axios')
-        // axios.post(
-        //             'http://127.0.0.1:2000/api/staffs',
-        //             {
-        //                 "title": "Авто",
-        //                 "description": "Током бахнет!",
-        //                 "staff": "Стаф. Не знаю, что вы хотите тут, но я сделал",
-        //                 "price": 4,
-        //                 "state": 1,
-        //                 "img": "http://site.com",
-        //                 "userId":  1,
-        //                 "categoryId": 4
-        //             }
-                    
-        //         )
-                
-        //         .then(function (response) { console.log(response) })
-        //         .catch((err)=>console.log(err))
-      
-        
         const { inputStaffs, isFetching, getUser } = this.props
         const {  name, isAdmin, id } = this.props
-
+        let arr = [];
+        function compareNumeric(a, b) {
+            if (a.price > b.price) return 1;
+            if (a.price < b.price) return -1;
+          }
+          arr = inputStaffs.slice()
+      arr.sort(compareNumeric);
         return (
             <Fragment>
                 <Header name={ name } getUser={ getUser } id={ id }/>
                 <div className="menuAndContent">
                     <LeftMenu isAdmin = {isAdmin} getUser={ getUser } />
-                    <AllStaffs inputStaffs={inputStaffs} isFetching={isFetching} isAdmin = {isAdmin} getUser={ getUser } />
+                    <AllStaffs inputStaffs={inputStaffs} arr={arr} isFetching={isFetching} isAdmin = {isAdmin} getUser={ getUser } />
                 </div>
             </Fragment>
         );

src/container/redactorForm.js

@@ -1,12 +1,14 @@
 import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from "redux";
+
 import { getUsersDataById } from "../actions/getUserById"
 import { getCategoriesData } from '../actions/categoryAction';
 import { getStaffsDataById } from "../actions/getStaffByIdAction"
-import { pushPhoto, inputchangeHandler, inputchangeHandler1, inputchangeHandler2, inputchangeHandler3, EditStaffAction, closeModal } from "../actions/addNewStaffAction"; 
+import {  inputchangeHandler, inputchangeHandler1, inputchangeHandler2, inputchangeHandler3, EditStaffAction, closeModal, pushPhoto, base64, base641, base642, base643 } from "../actions/addNewStaffAction"; 
+
 import FormRedactorStaff from '../components/FormsAdd/redForm'
 import EditModal from "../components/Modal/addNewStaffModal";
-import { connect} from 'react-redux';
-import { bindActionCreators } from "redux";
 
 class redactorForm extends Component {
     // componentDidUpdate(prevProps){
@@ -68,9 +70,17 @@ const mapStateToProps = state => ({
     inputData2: state.addStaff.inputData2,
     inputData3: state.addStaff.inputData3,
     showModal: state.addStaff.showModal,
+    base64Photo: state.addStaff.base64Photo,
+    base64Photo1: state.addStaff.base64Photo1,
+    base64Photo2: state.addStaff.base64Photo2,
+    base64Photo3: state.addStaff.base64Photo3,
+    addOrnot: state.addStaff.addOrnot,
+    addOrnot1: state.addStaff.addOrnot1,
+    addOrnot2: state.addStaff.addOrnot2,
+    addOrnot3: state.addStaff.addOrnot3
   });
   
-  const mapDispatchToProps = dispatch => bindActionCreators({ closeModal, getUsersDataById, getStaffsDataById, getCategoriesData, pushPhoto, inputchangeHandler, inputchangeHandler1, inputchangeHandler2, inputchangeHandler3, EditStaffAction }, dispatch);
+  const mapDispatchToProps = dispatch => bindActionCreators({ base64, base641, base642, base643, closeModal, getUsersDataById, getStaffsDataById, getCategoriesData, pushPhoto, inputchangeHandler, inputchangeHandler1, inputchangeHandler2, inputchangeHandler3, EditStaffAction }, dispatch);
   
   export default redactorForm = connect(
         mapStateToProps,

src/reducer/addStaff.js

@@ -27,7 +27,17 @@ export default ( state = initState, { type, payload } ) => {
         case types.ADD_NEW_STAFF_REQUEST: {
             return {
                 ...state,
-                isFetching: true
+                isFetching: true,
+                base64Photo: "",
+                base64Photo1: "",
+                base64Photo2: "",
+                base64Photo3: "",
+                photo: [],
+                addOrnot: false,
+                addOrnot1: false,
+                addOrnot2: false,
+                addOrnot3: false,
+                
             }
         }
         case types.ADD_NEW_STAFF_REQUEST_SUCCESS: {
@@ -56,7 +66,7 @@ export default ( state = initState, { type, payload } ) => {
         case types.PUSH_NEW_PHOTO_REQUEST: {
             return {
                 ...state,
-                isFetching: true
+                isFetching: true,
             }
         }
         case types.PUSH_NEW_PHOTO_REQUEST_SUCCESS: {
@@ -114,7 +124,16 @@ export default ( state = initState, { type, payload } ) => {
         case types.EDIT_STAFF_REQUEST: {
             return {
                 ...state,
-                isFetching: true
+                isFetching: true,
+                base64Photo: "",
+                base64Photo1: "",
+                base64Photo2: "",
+                base64Photo3: "",
+                photo: [],
+                addOrnot: false,
+                addOrnot1: false,
+                addOrnot2: false,
+                addOrnot3: false,
             }
         }
         case types.EDIT_STAFF_REQUEST_SUCCESS: {
@@ -138,7 +157,7 @@ export default ( state = initState, { type, payload } ) => {
             ...state,
             isFetching: false,
             base64Photo: payload,
-            addOrnot: true
+            addOrnot: !state.addOrnot
             }
           }
           case types.BASE1_64_REQUEST: {
@@ -146,7 +165,7 @@ export default ( state = initState, { type, payload } ) => {
             ...state,
             isFetching: false,
             base64Photo1: payload,
-            addOrnot1: true
+            addOrnot1: !state.addOrnot1
             }
           }
           case types.BASE2_64_REQUEST: {
@@ -154,7 +173,7 @@ export default ( state = initState, { type, payload } ) => {
             ...state,
             isFetching: false,
             base64Photo2: payload,
-            addOrnot2: true
+            addOrnot2: !state.addOrnot2
             }
           }
           case types.BASE3_64_REQUEST: {
@@ -162,7 +181,7 @@ export default ( state = initState, { type, payload } ) => {
             ...state,
             isFetching: false,
             base64Photo3: payload,
-            addOrnot3: true
+            addOrnot3: !state.addOrnot3
             }
           }
          default: return state;

src/style/components/_allStaff.scss

@@ -243,4 +243,67 @@
     flex-direction: column;
 }
  
+.topPrice{
+    position: fixed;
+    top: 20%;
+    right: 1em;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    display: block;
+    width: 80px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    color: #fff;
+    border: none;
+    box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 #FD7F71;
+    border-radius: 25px;
+    background: #FD7F71;
+    cursor: pointer;
+    transform: translate3d(0, 0, 0);
+    outline: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover > i {
+        color:#fff;
+        text-shadow: 3px 3px 3px rgba(0,0,0,.35);
+      }
+      &:focus > i {
+        color:#fff;
+      }
+      
+}
 
+.bottomPrice{
+    position:fixed;
+    top: 30%;
+    right: 1em;
+    transform: translate3d(0, 0, 0);
+    display: block;
+    width: 80px;
+    height: 50px;
+    line-height:50px;
+    text-align:center;
+    color: #fff;
+    border: none;
+    box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 #FD7F71;
+    border-radius: 25px;
+    background: #FD7F71;
+    cursor: pointer;
+    transform: translate3d(0, 0, 0);
+    outline: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover > i {
+        color:#fff;
+        text-shadow: 3px 3px 3px rgba(0,0,0,.35);
+      }
+      &:focus > i {
+        color:#fff;
+      }
+      
+}