Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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