Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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