Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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