Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2501 | Rev 2617 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2501 Rev 2616
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
2 
import {axios} from '../../utils'
 2 
import { axios } from '../../utils'
3 
import Slider from "react-slick";
 3 
import Slider from "react-slick";
4 
// import "slick-carousel/slick/slick.css";
4 
// import "slick-carousel/slick/slick.css";
5 
// import "slick-carousel/slick/slick-theme.css";
 5 
// import "slick-carousel/slick/slick-theme.css";
Línea 6... Línea 6...
6 
 
 6 
 
7 
const  SampleNextArrow = (props) => {
 7 
const SampleNextArrow = (props) => {
8 
    const { className, style, onClick } = props;
 8 
    const { className, style, onClick } = props;
9 
    return (
 9 
    return (
10 
        <div
 10 
        <div
11 
            className={className}
 11 
            className={className}
12 
            style={{ ...style, display: "block", backgroundColor: "transparent" }}
 12 
            style={{ ...style, display: "block", backgroundColor: "transparent" }}
13 
            onClick={onClick}
 13 
            onClick={onClick}
14 
        />
 14 
        />
15 
    );
 15 
    );
Línea 16... Línea 16...
16 
}
 16 
}
17 
 
 17 
 
18 
const  SamplePrevArrow = (props) => {
 18 
const SamplePrevArrow = (props) => {
19 
    const { className, style, onClick } = props;
 19 
    const { className, style, onClick } = props;
20 
    return (
 20 
    return (
21 
        <div
 21 
        <div
Línea 32... Línea 32...
32 
    const [title, setTitle] = React.useState('Cápsulas de Microaprendizaje')
 32 
    const [title, setTitle] = React.useState('Cápsulas de Microaprendizaje')
33 
    const [capsules, setCapsules] = React.useState([])
 33 
    const [capsules, setCapsules] = React.useState([])
34 
    const [search, setSearch] = React.useState('')
 34 
    const [search, setSearch] = React.useState('')
35 
    const load = async (_search = search, _entity = category) => {
 35 
    const load = async (_search = search, _entity = category) => {
36 
        try {
 36 
        try {
37 
            const res = await axios.get('/marketplace?search='+_search+'&entity='+_entity)
 37 
            const res = await axios.get('/marketplace?search=' + _search + '&entity=' + _entity)
38 
            if(res.data.success){
 38 
            if (res.data.success) {
39 
                setCapsules(res.data.data)
 39 
                setCapsules(res.data.data)
40 
            }
 40 
            }
41 
        } catch (error) {
 41 
        } catch (error) {
42 
            console.log('>>: error > ', error)
 42 
            console.log('>>: error > ', error)
43 
        }
 43 
        }
44 
    }
 44 
    }
45 
    const getCategories = async () => {
 45 
    const getCategories = async () => {
46 
        const categories = await axios.get('/marketplace/categories')
 46 
        const categories = await axios.get('/marketplace/categories')
47 
        if(categories.data.data){
 47 
        if (categories.data.data) {
48 
            const _categories = Object.keys(categories.data.data).map(element => {
 48 
            const _categories = Object.keys(categories.data.data).map(element => {
49 
                return {
 49 
                return {
50 
                    label: categories.data.data[element],
 50 
                    label: categories.data.data[element],
51 
                    value: element
 51 
                    value: element
52 
                }
 52 
                }
Línea 55... Línea 55...
55 
        }
 55 
        }
56 
    }
 56 
    }
57 
    const checkParams = () => {
 57 
    const checkParams = () => {
58 
        const url = window.location.href
 58 
        const url = window.location.href
59 
        const hasEntity = url.includes('?entity=')
 59 
        const hasEntity = url.includes('?entity=')
60 
        if(hasEntity){
 60 
        if (hasEntity) {
61 
            const value = url.split('?entity=')[1]
 61 
            const value = url.split('?entity=')[1]
62 
            if(value)
 62 
            if (value)
63 
                setCategory(value)
 63 
                setCategory(value)
64 
        }
 64 
        }
65 
    }
 65 
    }
66 
    React.useEffect(() => {
 66 
    React.useEffect(() => {
67 
        load()
 67 
        load()
Línea 86... Línea 86...
86 
        nextArrow: <SampleNextArrow />,
 86 
        nextArrow: <SampleNextArrow />,
87 
        prevArrow: <SamplePrevArrow />,
 87 
        prevArrow: <SamplePrevArrow />,
88 
        responsive: [{
 88 
        responsive: [{
89 
            breakpoint: 600,
 89 
            breakpoint: 600,
90 
            settings: {
 90 
            settings: {
91 
              slidesToShow: 2,
 91 
                slidesToShow: 2,
92 
              slidesToScroll: 2,
 92 
                slidesToScroll: 2,
93 
              initialSlide: 2
 93 
                initialSlide: 2
94 
            }
 94 
            }
95 
        }]
 95 
        }]
96 
    };
 96 
    };
97 
    return (
 97 
    return (
98 
        <React.Fragment>
 98 
        <React.Fragment>
99 
            <section
 - 
 
100 
                className="companies-info"
 99 
            <section className="companies-info">
101 
            >
 - 
 
102 
                <div className="container">
 100 
                <div className="container">
103 
                    <div className="company-title">
 101 
                    <div className="company-title">
- 
 
 102 
                        <form name="form-capsule-search" id="form-capsule-search">
104 
                        <div className="section_admin_title_buttons">
 103 
                            <div className="section_admin_title_buttons">
105 
                        <div className="">
 104 
                                <div className="form-group">
- 
 
 105 
                                    <input
- 
 
 106 
                                        type="text"
106 
                            <div className="">
 107 
                                        name="search"
- 
 
 108 
                                        id="search"
107 
                                <form name="form-capsule-search" id="form-capsule-search">
 109 
                                        className="form-control"
- 
 
 110 
                                        onChange={e => {
- 
 
 111 
                                            const value = e.target.value
- 
 
 112 
                                            setSearch(value)
- 
 
 113 
                                            load(value)
- 
 
 114 
                                        }}
- 
 
 115 
                                        value={search}
- 
 
 116 
                                        placeholder="Realiza una busqueda"
108 
                                    <div
 117 
                                    />
- 
 
 118 
                                </div>
- 
 
 119 
                                <div className="form-group">
- 
 
 120 
                                    <select
- 
 
 121 
                                        name="select"
109 
                                        className="row"
 122 
                                        className="form-control"
- 
 
 123 
                                        value={category}
- 
 
 124 
                                        onChange={e => {
- 
 
 125 
                                            setCategory(e.target.value)
- 
 
 126 
                                            load(search, e.target.value)
- 
 
 127 
                                        }}
110 
                                    >
 128 
                                    >
111 
                                        <div
 - 
 
112 
                                            className="col-12 col-md-8 col-sm-12"
 - 
 
113 
                                        >
 - 
 
114 
                                            <div className="form-group">
 - 
 
115 
                                                <input
 - 
 
116 
                                                    type="text"
 - 
 
117 
                                                    name="search"
 - 
 
118 
                                                    id="search"
 - 
 
119 
                                                    className="form-control"
 - 
 
120 
                                                    onChange={e => {
 - 
 
121 
                                                        const value = e.target.value
 - 
 
122 
                                                        setSearch(value)
 - 
 
123 
                                                        load(value)
 - 
 
124 
                                                    }}
 - 
 
125 
                                                    value={search}
 - 
 
126 
                                                    placeholder="Realiza una busqueda"
 - 
 
127 
                                                />
 - 
 
128 
                                            </div>
 - 
 
129 
                                        </div>
 - 
 
130 
                                        <div
 - 
 
131 
                                            className="col-12 col-md-4 col-sm-12"
 - 
 
132 
                                        >
 - 
 
133 
                                            <div className="form-group">
 - 
 
134 
                                                <select
 - 
 
135 
                                                    name="select"
 - 
 
136 
                                                    className="form-control"
 - 
 
137 
                                                    id="select"
 - 
 
138 
                                                    value={category}
 - 
 
139 
                                                    onChange={e => {
 - 
 
140 
                                                        const value = e.target.value
 - 
 
141 
                                                        setCategory(value)
 - 
 
142 
                                                        load(search, value)
 - 
 
143 
                                                    }}
 - 
 
144 
                                                >
 - 
 
145 
                                                    <option value="" disabled selected>Seleccione una categoria</option>
 129 
                                        <option value="" disabled selected>Seleccione una categoria</option>
146 
                                                    {
 130 
                                        {
147 
                                                        categories.map((element, i) => {
 131 
                                            categories.map((element, i) =>
148 
                                                            return(
 - 
 
149 
                                                                <option
 - 
 
150 
                                                                    value={element.value}
 - 
 
151 
                                                                    key={i.toString()}
 132 
                                                <option value={element.value} key={i.toString()}>
152 
                                                                >
 133 
                                                    {element.label}
153 
                                                                    {
 - 
 
154 
                                                                        element.label
 - 
 
155 
                                                                    }
 - 
 
156 
                                                                </option>
 - 
 
157 
                                                            )
 - 
 
158 
                                                        })
 - 
 
159 
                                                    }
 - 
 
160 
                                                </select>
 134 
                                                </option>
161 
                                            </div>
 135 
                                            )
162 
                                        </div>
 136 
                                        }
163 
                                    </div>
 137 
                                    </select>
164 
                                </form>
 138 
                                </div>
165 
                            </div>
 139 
                            </div>
166 
                        </div>
 - 
 
167 
                        </div>
 140 
                        </form>
168 
                    </div>
 141 
                    </div>
169 
                    <div className="list-col">
 142 
                    <div className="list-col">
170 
                        <h3 className="text-primary p-2"> {title} </h3>
 143 
                        <h3 className="text-primary p-2">{title}</h3>
171 
                        <Slider {...settings}>
 144 
                        <Slider {...settings}>
172 
                            {
 145 
                            {
173 
                                capsules.map((element, i) => {
 146 
                                capsules.map((element, i) => {
174 
                                    return(
 147 
                                    return (
175 
                                        <div className="w-100" key={element.name}>
 148 
                                        <div className="w-100" key={element.name}>
176 
                                            <div className="company_profile_info">
 149 
                                            <div className="company_profile_info">
177 
                                                <div className="microlearning-up-info">
 150 
                                                <div className="microlearning-up-info">
178 
                                                    <img src={element.image} alt={element.name} />
 151 
                                                    <img src={element.image} alt={element.name} />
179 
                                                    <h3>{element.name}</h3>
 152 
                                                    <h3>{element.name}</h3>
Línea 183... Línea 156...
183 
                                                    element.link_enroll && (
 156 
                                                    element.link_enroll && (
184 
                                                        <ul>
 157 
                                                        <ul>
185 
                                                            <li>
 158 
                                                            <li>
186 
                                                                <a
 159 
                                                                <a
187 
                                                                    onClick={() => enroll(element.link_enroll)}
 160 
                                                                    onClick={() => enroll(element.link_enroll)}
188 
                                                                    title={'Seleccionar: '+element.name}
 161 
                                                                    title={'Seleccionar: ' + element.name}
189 
                                                                    className="view-more-pro btn-capsule-enroll cursor-pointer"
 162 
                                                                    className="view-more-pro btn-capsule-enroll cursor-pointer"
190 
                                                                >
 163 
                                                                >
191 
                                                                    {props.backendVars.labelEnroll}
 164 
                                                                    {props.backendVars.labelEnroll}
192 
                                                                </a>
 165 
                                                                </a>
193 
                                                            </li>
 166 
                                                            </li>
194 
                                                        </ul>
 167 
                                                        </ul>
195 
                                                    )
 168 
                                                    )
196 
                                                }
 169 
                                                }
197 
                                            </div>
170 
                                            </div>
198 
                                        </div>
 171 
                                        </div>
199 
                                    )
 172 
                                    )
200 
                                })
 173 
                                })
201 
                            }
 174 
                            }
202 
                        </Slider>
 175 
                        </Slider>
203 
                    </div>
 176 
                    </div>
204 
                </div>
177 
                </div>
205 
            </section>
178 
            </section>
206 
        </React.Fragment>
 179 
        </React.Fragment>
207 
    );
 180 
    );
208 
}
 181 
}
209 

            182