Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7019 Rev 7020
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from '../../utils'
 2 
import { axios, debounce, jsonToParams } from '../../utils'
3 
import { useDispatch, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from 'react-redux'
4 
import { addNotification } from '../../redux/notification/notification.actions'
 4 
import { addNotification } from '../../redux/notification/notification.actions'
5 
import EmptySection from '../../components/UI/EmptySection'
 5 
import EmptySection from '../../components/UI/EmptySection'
- 
 
 6 
import { Col, Container, Row } from 'react-bootstrap'
- 
 
 7 
import PaginationComponent from '../../components/UI/PaginationComponent'
- 
 
 8 
import SearchInput from '../../components/UI/SearchInput'
Línea 6... Línea -...
6 
 
 - 
 
7 
const mock = {
 - 
 
8 
  items: [
 - 
 
9 
    {
 - 
 
10 
      image:
 - 
 
11 
        '/storage/type/knowledge-area/code/facd46a7-70dd-4a8f-9827-605b8f32aaeb/filename/646e347a5124e-area1.png/',
 - 
 
12 
      title: 'Programa #1',
 - 
 
13 
      description:
 - 
 
14 
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq...',
 - 
 
15 
      category: 'Programas de Desarrollo',
 - 
 
16 
      link_view: '/knowledge-area/view/facd46a7-70dd-4a8f-9827-605b8f32aaeb',
 - 
 
17 
      link_edit: '/knowledge-area/edit/facd46a7-70dd-4a8f-9827-605b8f32aaeb',
 - 
 
18 
      link_delete:
 - 
 
19 
        '/knowledge-area/delete/facd46a7-70dd-4a8f-9827-605b8f32aaeb',
 - 
 
20 
    },
 - 
 
21 
    {
 - 
 
22 
      image:
 - 
 
23 
        '/storage/type/knowledge-area/code/174ae74a-3e97-4820-a35e-8315d3a698ff/filename/646e39ca08a08-profile_1.png/',
 - 
 
24 
      title: 'Desarrollo web',
 - 
 
25 
      description: 'Prueba de desarrollo',
 - 
 
26 
      category: 'Programas de Desarrollo',
 - 
 
27 
      link_view: '/knowledge-area/view/174ae74a-3e97-4820-a35e-8315d3a698ff',
 - 
 
28 
      link_edit: '/knowledge-area/edit/174ae74a-3e97-4820-a35e-8315d3a698ff',
 - 
 
29 
      link_delete:
 - 
 
30 
        '/knowledge-area/delete/174ae74a-3e97-4820-a35e-8315d3a698ff',
 - 
 
31 
    },
 - 
 
32 
  ],
 - 
 
33 
  total: 2,
 - 
 
34 
  page: 1,
 - 
 
35 
  total_pages: 10,
 - 
 
36 
}
 - 
 
37 
 
 9 
 
38 
const KnowledgeAreaPage = ({ allowAdd = true, content_edit = true }) => {
 10 
const KnowledgeAreaPage = () => {
39 
  const [knowledges, setKnowledges] = useState([])
 11 
  const [knowledges, setKnowledges] = useState([])
- 
 
 12 
  const [knowledgesCategories, setKnowledgesCategories] = useState([])
- 
 
 13 
  const [search, setSearch] = useState('')
- 
 
 14 
  const [currentPage, setCurrentPage] = useState(1)
- 
 
 15 
  const [totalPages, setTotalPages] = useState(1)
40 
  const [knowledgesCategories, setKnowledgesCategories] = useState([])
 16 
  const [allowAdd, setAllowAdd] = useState(false)
41 
  const labels = useSelector(({ intl }) => intl.labels)
 17 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 42... Línea 18...
42 
  const dispatch = useDispatch()
 18 
  const dispatch = useDispatch()
- 
 
 19 
 
43 
 
 20 
  const getKnowledgesInfo = (search, page) => {
44 
  useEffect(() => {
 21 
    const urlParams = { search, page }
45 
    axios
 22 
    axios
46 
      .get('/knowledge-area', {
 23 
      .get(`/knowledge-area${jsonToParams(urlParams)}`, {
47 
        headers: {
 24 
        headers: {
48 
          'Content-Type': 'application/json',
 25 
          'Content-Type': 'application/json',
49 
        },
 26 
        },
Línea 60... Línea 37...
60 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 37 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
61 
          return
 38 
          return
62 
        }
 39 
        }
Línea 63... Línea 40...
63 
 
 40 
 
- 
 
 41 
        setKnowledges(data.items)
- 
 
 42 
        setKnowledgesCategories(data.categories)
- 
 
 43 
        setCurrentPage(data.page)
- 
 
 44 
        setTotalPages(data.total_pages)
64 
        setKnowledges(data.items)
 45 
        setAllowAdd(Boolean(data.link_add))
65 
      })
 46 
      })
66 
      .catch((error) => {
 47 
      .catch((error) => {
67 
        dispatch(
 48 
        dispatch(
68 
          addNotification({
 49 
          addNotification({
69 
            style: 'danger',
 50 
            style: 'danger',
70 
            msg: 'Ha ocurrido un error, por favor intente más tarde.',
 51 
            msg: 'Ha ocurrido un error, por favor intente más tarde.',
71 
          })
 52 
          })
72 
        )
 53 
        )
73 
        throw new Error(error)
 54 
        throw new Error(error)
74 
      })
 55 
      })
- 
 
 56 
  }
- 
 
 57 
 
- 
 
 58 
  const handleInputChange = debounce((value) => setSearch(value), 500)
- 
 
 59 
 
- 
 
 60 
  useEffect(() => {
- 
 
 61 
    getKnowledgesInfo(search, currentPage)
Línea 75... Línea 62...
75 
  }, [])
 62 
  }, [search, currentPage])
76 
 
 63 
 
77 
  return (
 64 
  return (
78 
    <section className="companies-info container px-0">
 65 
    <Container as="section" className="companies-info px-0">
79 
      <div className="company-title">
 66 
      <div className="company-title">
80 
        <h1 className="title mx-auto">{labels.knowledge_area_title}</h1>
 67 
        <h1 className="title mx-auto">{labels.knowledge_area_title}</h1>
81 
        {content_edit && allowAdd && (
 68 
        {allowAdd && (
82 
          <h2 className="title cursor-pointer" id="knowledge-add-a">
 69 
          <h2 className="title cursor-pointer" id="knowledge-add-a">
83 
            {labels.knowledge_area_add}
 70 
            {labels.knowledge_area_add}
84 
          </h2>
 71 
          </h2>
Línea 85... Línea 72...
85 
        )}
 72 
        )}
86 
      </div>
 - 
 
87 
 
 73 
      </div>
88 
      <div className="row gap-3" id="row-list">
 - 
 
89 
        <div className="knowledge-category-list col-12 col-md-3">
 74 
 
90 
          <ul>
 75 
      <Row className="gap-3">
91 
            <li className="knowledge-category-li knowledge-category-li-selected">
 76 
        <Col md="3">
92 
              <a className="knowledge-category-a" href="">
 77 
          <h2 className="knowledge-category-a">
93 
                {labels.knowledge_area_category_all}
 78 
            {labels.knowledge_area_category_all}
94 
              </a>
 79 
          </h2>
95 
            </li>
 80 
          <ul className="knowledge-category-list">
96 
            {knowledgesCategories.map((category, index) => (
 81 
            {knowledgesCategories.map((category, index) => (
97 
              <li className="knowledge-category-li" key={index}>
 82 
              <li className="knowledge-category-li" key={index}>
98 
                <a className="knowledge-category-a" href="">
 83 
                <a className="knowledge-category-a" href="">
99 
                  {category.name}
 84 
                  {category.name}
100 
                </a>
 85 
                </a>
101 
              </li>
 86 
              </li>
Línea 102... Línea 87...
102 
            ))}
 87 
            ))}
103 
          </ul>
 - 
 
104 
        </div>
 - 
 
105 
 
 88 
          </ul>
106 
        <div className="col px-0">
 - 
 
107 
          <div className="search-box">
 89 
        </Col>
108 
            <form id="form-filter" name="form-filter">
 90 
 
109 
              <input
 - 
 
110 
                type="text"
 - 
 
111 
                name="search"
 - 
 
112 
                id="search"
 - 
 
113 
                className="form-control"
 91 
        <Col className="px-0">
Línea 114... Línea 92...
114 
              />
 92 
          <SearchInput
115 
              <button className="btn btn-search">{labels.search}</button>
 93 
            onChange={handleInputChange}
116 
            </form>
 94 
            placeholder={labels.search}
117 
          </div>
 95 
          />
Línea 125... Línea 103...
125 
              <EmptySection
 103 
              <EmptySection
126 
                message={labels.error_no_record_matched_your_query}
 104 
                message={labels.error_no_record_matched_your_query}
127 
              />
 105 
              />
128 
            )}
 106 
            )}
129 
          </div>
 107 
          </div>
130 
 
 - 
 
- 
 
 108 
          <PaginationComponent
131 
          {/* <div id="knowledge-record-pagination"></div> */}
 109 
            onChangePage={(newPage) => setCurrentPage(newPage)}
- 
 
 110 
            currentActivePage={currentPage}
- 
 
 111 
            pages={totalPages}
- 
 
 112 
            isRow
- 
 
 113 
          />
132 
        </div>
 114 
        </Col>
133 
      </div>
 115 
      </Row>
134 
    </section>
 116 
    </Container>
135 
  )
 117 
  )
136 
}
 118 
}
Línea 137... Línea 119...
137 
 
 119 
 
138 
const Item = ({
 120 
const Item = ({