Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2654 | Rev 2722 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from 'react'
2616 stevensc 2 
import { axios } from '../../utils'
1 www 3 
import Slider from "react-slick";
2621 stevensc 4 
import styled from 'styled-components';
1 www 5 
// import "slick-carousel/slick/slick.css";
6 
// import "slick-carousel/slick/slick-theme.css";
7 
 
2627 stevensc 8 
const StyledSlider = styled(Slider)`c
2622 stevensc 9 
    .slick-list {
10 
        padding: 0 !important;
11 
    }
12 
    .slick-slide {
13 
        margin: 0 27px;
14 
    }
15 
    .slick-track {
16 
        display: flex;
17 
    }
2623 stevensc 18 
    .slick-prev:before, .slick-next:before {
2624 stevensc 19 
        color: #FBFBFB !important;
20 
        font-size: 24px;
2623 stevensc 21 
    }
2624 stevensc 22 
    .slick-prev, .slick-next {
23 
        width: 24px;
2627 stevensc 24 
        height: 22px;
2625 stevensc 25 
        position: relative;
2624 stevensc 26 
    }
2721 stevensc 27 
    @media (max-width:768px) {
28 
        .slick-prev{
29 
            left: auto;
30 
            margin-left: auto;
31 
            margin-right: .5rem;
32 
        }
33 
        .slick-next {
34 
            right: 0;
35 
        }
36 
    }
2620 stevensc 37 
`;
38 
 
2616 stevensc 39 
const SampleNextArrow = (props) => {
1 www 40 
    const { className, style, onClick } = props;
41 
    return (
42 
        <div
43 
            className={className}
2625 stevensc 44 
            style={{ ...style, display: "block", backgroundColor: "#D9D9D9", borderRadius: '100px' }}
1 www 45 
            onClick={onClick}
46 
        />
47 
    );
48 
}
49 
 
2616 stevensc 50 
const SamplePrevArrow = (props) => {
1 www 51 
    const { className, style, onClick } = props;
52 
    return (
53 
        <div
54 
            className={className}
2625 stevensc 55 
            style={{ ...style, display: "block", backgroundColor: "#D9D9D9", borderRadius: '100px' }}
1 www 56 
            onClick={onClick}
57 
        />
58 
    );
59 
}
60 
 
61 
export default props => {
62 
    const [categories, setCategories] = React.useState([])
63 
    const [category, setCategory] = React.useState('capsules')
64 
    const [title, setTitle] = React.useState('Cápsulas de Microaprendizaje')
65 
    const [capsules, setCapsules] = React.useState([])
66 
    const [search, setSearch] = React.useState('')
67 
    const load = async (_search = search, _entity = category) => {
68 
        try {
2616 stevensc 69 
            const res = await axios.get('/marketplace?search=' + _search + '&entity=' + _entity)
70 
            if (res.data.success) {
1 www 71 
                setCapsules(res.data.data)
72 
            }
73 
        } catch (error) {
74 
            console.log('>>: error > ', error)
75 
        }
76 
    }
77 
    const getCategories = async () => {
78 
        const categories = await axios.get('/marketplace/categories')
2616 stevensc 79 
        if (categories.data.data) {
1 www 80 
            const _categories = Object.keys(categories.data.data).map(element => {
81 
                return {
82 
                    label: categories.data.data[element],
83 
                    value: element
84 
                }
85 
            })
86 
            setCategories(_categories)
87 
        }
88 
    }
89 
    const checkParams = () => {
90 
        const url = window.location.href
91 
        const hasEntity = url.includes('?entity=')
2616 stevensc 92 
        if (hasEntity) {
1 www 93 
            const value = url.split('?entity=')[1]
2616 stevensc 94 
            if (value)
1 www 95 
                setCategory(value)
96 
        }
97 
    }
98 
    React.useEffect(() => {
99 
        load()
100 
        getCategories()
101 
        checkParams()
102 
    }, [])
103 
 
104 
    const enroll = async url => {
105 
        try {
106 
            const res = await axios.post(url)
107 
            load()
108 
        } catch (error) {
109 
            console.log('>>: error > ', error)
110 
        }
111 
    }
112 
    const settings = {
113 
        // dots: true,
114 
        infinite: true,
115 
        speed: 1500,
116 
        slidesToShow: capsules.length < 4 ? 1 : 4,
117 
        slidesToScroll: 1,
118 
        nextArrow: <SampleNextArrow />,
119 
        prevArrow: <SamplePrevArrow />,
2627 stevensc 120 
        responsive: [
121 
            {
122 
                breakpoint: 768,
123 
                settings: {
124 
                    slidesToShow: 2,
125 
                    slidesToScroll: 2,
126 
                    initialSlide: 0
127 
                }
128 
            },
129 
            {
130 
                breakpoint: 1024,
131 
                settings: {
132 
                    slidesToShow: 3,
133 
                    slidesToScroll: 3,
134 
                    initialSlide: 0
135 
                }
1 www 136 
            }
2627 stevensc 137 
        ]
1 www 138 
    };
139 
    return (
140 
        <React.Fragment>
2616 stevensc 141 
            <section className="companies-info">
1 www 142 
                <div className="container">
143 
                    <div className="company-title">
2618 stevensc 144 
                        <form name="form-capsule-search">
2654 stevensc 145 
                            <div className="market_admin_title_buttons">
2619 stevensc 146 
                                <div className="form-group search_input">
2616 stevensc 147 
                                    <input
148 
                                        type="text"
149 
                                        name="search"
150 
                                        id="search"
151 
                                        className="form-control"
152 
                                        onChange={e => {
153 
                                            const value = e.target.value
154 
                                            setSearch(value)
155 
                                            load(value)
156 
                                        }}
157 
                                        value={search}
158 
                                        placeholder="Realiza una busqueda"
159 
                                    />
160 
                                </div>
2619 stevensc 161 
                                <div className="form-group search_categories">
2616 stevensc 162 
                                    <select
163 
                                        name="select"
164 
                                        className="form-control"
165 
                                        value={category}
166 
                                        onChange={e => {
167 
                                            setCategory(e.target.value)
168 
                                            load(search, e.target.value)
169 
                                        }}
1 www 170 
                                    >
2617 stevensc 171 
                                        <option value="" disabled>Seleccione una categoria</option>
2616 stevensc 172 
                                        {
173 
                                            categories.map((element, i) =>
174 
                                                <option value={element.value} key={i.toString()}>
175 
                                                    {element.label}
176 
                                                </option>
177 
                                            )
178 
                                        }
179 
                                    </select>
180 
                                </div>
2618 stevensc 181 
                            </div>
182 
                        </form>
1 www 183 
                    </div>
2501 stevensc 184 
                    <div className="list-col">
2623 stevensc 185 
                        <h3 className="p-2" style={{ fontWeight: '700' }}>{title}</h3>
2621 stevensc 186 
                        <StyledSlider {...settings}>
1 www 187 
                            {
188 
                                capsules.map((element, i) => {
2616 stevensc 189 
                                    return (
1 www 190 
                                        <div className="w-100" key={element.name}>
2620 stevensc 191 
                                            <div className="marketplace_card">
1 www 192 
                                                <div className="microlearning-up-info">
193 
                                                    <img src={element.image} alt={element.name} />
194 
                                                    <h3>{element.name}</h3>
195 
                                                    <h4>{props.backendVars.labelStatus} : {element.status}</h4>
2622 stevensc 196 
                                                    {
197 
                                                        element.link_enroll &&
1 www 198 
                                                        <ul>
199 
                                                            <li>
200 
                                                                <a
201 
                                                                    onClick={() => enroll(element.link_enroll)}
2616 stevensc 202 
                                                                    title={'Seleccionar: ' + element.name}
2622 stevensc 203 
                                                                    className="btn btn-primary cursor-pointer"
1 www 204 
                                                                >
205 
                                                                    {props.backendVars.labelEnroll}
206 
                                                                </a>
207 
                                                            </li>
208 
                                                        </ul>
2622 stevensc 209 
                                                    }
210 
                                                </div>
2616 stevensc 211 
                                            </div>
1 www 212 
                                        </div>
213 
                                    )
214 
                                })
215 
                            }
2621 stevensc 216 
                        </StyledSlider>
1 www 217 
                    </div>
2616 stevensc 218 
                </div>
219 
            </section>
1 www 220 
        </React.Fragment>
221 
    );
222 
}