Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7032 Rev 7033
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useRef, useState } from 'react'
2 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from 'react-redux'
3 
import { Card, Col, Container, Row } from 'react-bootstrap'
 3 
import { Card, Col, Container, Row } from 'react-bootstrap'
4 
import { axios, debounce, jsonToParams } from '../../utils'
 4 
import { axios, debounce, jsonToParams } from '../../utils'
5 
import { addNotification } from '../../redux/notification/notification.actions'
 5 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import styled from 'styled-components'
 6 
import styled from 'styled-components'
Línea 15... Línea 15...
15 
  CardMedia,
 15 
  CardMedia,
16 
  IconButton,
 16 
  IconButton,
17 
  Typography,
 17 
  Typography,
18 
} from '@mui/material'
 18 
} from '@mui/material'
19 
import { Delete, Edit } from '@mui/icons-material'
 19 
import { Delete, Edit } from '@mui/icons-material'
- 
 
 20 
import KnowledgeEditModal from '../../components/knowledge/KnowledgeEditModal'
Línea 20... Línea 21...
20 
 
 21 
 
21 
const KnowledgeCategories = styled(WidgetLayout)`
 22 
const KnowledgeCategories = styled(WidgetLayout)`
22 
  padding: 1rem;
 23 
  padding: 1rem;
23 
  ul {
 24 
  ul {
24 
    display: flex;
 25 
    display: flex;
25 
    flex-direction: column;
 26 
    flex-direction: column;
- 
 
 27 
    gap: 0.5rem;
- 
 
 28 
    li {
- 
 
 29 
      cursor: pointer;
- 
 
 30 
    }
- 
 
 31 
    .selected {
- 
 
 32 
      font-weight: 600;
26 
    gap: 0.5rem;
 33 
    }
27 
  }
 34 
  }
Línea 28... Línea 35...
28 
`
 35 
`
29 
 
 36 
 
Línea 50... Línea 57...
50 
  const [search, setSearch] = useState('')
 57 
  const [search, setSearch] = useState('')
51 
  const [category, setCategory] = useState('')
 58 
  const [category, setCategory] = useState('')
52 
  const [currentPage, setCurrentPage] = useState(1)
 59 
  const [currentPage, setCurrentPage] = useState(1)
53 
  const [totalPages, setTotalPages] = useState(1)
 60 
  const [totalPages, setTotalPages] = useState(1)
54 
  const [allowAdd, setAllowAdd] = useState(false)
 61 
  const [allowAdd, setAllowAdd] = useState(false)
- 
 
 62 
  const [modalShow, setModalShow] = useState(null)
- 
 
 63 
  const actionUrl = useRef(null)
55 
  const labels = useSelector(({ intl }) => intl.labels)
 64 
  const labels = useSelector(({ intl }) => intl.labels)
56 
  const dispatch = useDispatch()
 65 
  const dispatch = useDispatch()
Línea 57... Línea 66...
57 
 
 66 
 
58 
  const getKnowledgesInfo = (search, page, category) => {
 67 
  const getKnowledgesInfo = (search = '', page = 1, category_id = '') => {
59 
    const urlParams = { search, page, category }
 68 
    const urlParams = { search, page, category_id }
60 
    axios
 69 
    axios
61 
      .get(`/knowledge-area?${jsonToParams(urlParams)}`, {
 70 
      .get(`/knowledge-area?${jsonToParams(urlParams)}`, {
62 
        headers: {
 71 
        headers: {
63 
          'Content-Type': 'application/json',
 72 
          'Content-Type': 'application/json',
Línea 91... Línea 100...
91 
        )
 100 
        )
92 
        throw new Error(error)
 101 
        throw new Error(error)
93 
      })
 102 
      })
94 
  }
 103 
  }
Línea -... Línea 104...
- 
 
 104 
 
- 
 
 105 
  const editKnowledge = (url) => {
- 
 
 106 
    actionUrl.current = url
- 
 
 107 
    setModalShow('edit')
- 
 
 108 
  }
- 
 
 109 
 
- 
 
 110 
  const closeModal = () => {
- 
 
 111 
    actionUrl.current = null
- 
 
 112 
    setModalShow(null)
- 
 
 113 
  }
95 
 
 114 
 
Línea 96... Línea 115...
96 
  const handleInputChange = debounce((e) => setSearch(e.target.value), 500)
 115 
  const handleInputChange = debounce((e) => setSearch(e.target.value), 500)
97 
 
 116 
 
98 
  useEffect(() => {
 117 
  useEffect(() => {
Línea 99... Línea 118...
99 
    getKnowledgesInfo(search, currentPage, category)
 118 
    getKnowledgesInfo(search, currentPage, category)
- 
 
 119 
  }, [search, currentPage, category])
100 
  }, [search, currentPage, category])
 120 
 
101 
 
 121 
  return (
102 
  return (
 122 
    <>
103 
    <Container as="section" className="companies-info px-0">
 123 
      <Container as="section" className="companies-info px-0">
104 
      <div className="company-title">
 124 
        <div className="company-title">
- 
 
 125 
          <h1 className="title mx-auto">{labels.knowledge_area_title}</h1>
- 
 
 126 
          {allowAdd && (
105 
        <h1 className="title mx-auto">{labels.knowledge_area_title}</h1>
 127 
            <h2 className="title cursor-pointer">
106 
        {allowAdd && (
 128 
              {labels.knowledge_area_add}
107 
          <h2 className="title cursor-pointer">{labels.knowledge_area_add}</h2>
 129 
            </h2>
108 
        )}
 130 
          )}
109 
      </div>
 131 
        </div>
110 
 
 132 
 
111 
      <Row className="gap-3">
 - 
 
112 
        <Col md="3">
 - 
 
113 
          <KnowledgeCategories>
 - 
 
114 
            <ul>
 - 
 
115 
              <li className="knowledge-category-li knowledge-category-li-selected">
 - 
 
116 
                <input
 - 
 
117 
                  type="radio"
 - 
 
118 
                  id="category-all"
 - 
 
119 
                  value=""
 - 
 
120 
                  onChange={(e) => setCategory(e.target.value)}
 - 
 
121 
                  hidden
 - 
 
122 
                />
 - 
 
123 
                <label htmlFor="category-all">
 133 
        <Row className="gap-3">
124 
                  {labels.knowledge_area_category_all}
 - 
 
125 
                </label>
 134 
          <Col md="3">
126 
              </li>
 135 
            <KnowledgeCategories>
127 
              {knowledgesCategories.map(({ uuid, name }) => (
 136 
              <ul>
128 
                <li className="knowledge-category-li" key={uuid}>
 137 
                <li className={!category && 'selected'}>
129 
                  <input
 138 
                  <input
130 
                    type="radio"
 139 
                    type="radio"
131 
                    id={`category-${name}`}
 140 
                    id="category-all"
132 
                    value={uuid}
 141 
                    value=""
133 
                    onChange={(e) => setCategory(e.target.value)}
 142 
                    onChange={(e) => setCategory(e.target.value)}
- 
 
 143 
                    hidden
- 
 
 144 
                  />
134 
                    hidden
 145 
                  <label htmlFor="category-all">
- 
 
 146 
                    {labels.knowledge_area_category_all}
- 
 
 147 
                  </label>
- 
 
 148 
                </li>
- 
 
 149 
                {knowledgesCategories.map(({ uuid, name }) => (
- 
 
 150 
                  <li className={category === uuid && 'selected'} key={uuid}>
- 
 
 151 
                    <input
- 
 
 152 
                      type="radio"
- 
 
 153 
                      id={`category-${name}`}
- 
 
 154 
                      value={uuid}
- 
 
 155 
                      onChange={(e) => setCategory(e.target.value)}
- 
 
 156 
                      hidden
135 
                  />
 157 
                    />
136 
                  <label htmlFor={`category-${name}`}>{name}</label>
 158 
                    <label htmlFor={`category-${name}`}>{name}</label>
137 
                </li>
 159 
                  </li>
138 
              ))}
 160 
                ))}
139 
            </ul>
 161 
              </ul>
140 
          </KnowledgeCategories>
 162 
            </KnowledgeCategories>
141 
        </Col>
 163 
          </Col>
142 
 
 164 
 
143 
        <Col className="px-0">
 165 
          <Col className="px-0">
144 
          <KnowledgeSearch
 166 
            <KnowledgeSearch
145 
            onChange={handleInputChange}
 167 
              onChange={handleInputChange}
146 
            placeholder={labels.search}
 168 
              placeholder={labels.search}
147 
          />
 169 
            />
148 
 
 170 
 
149 
          <KnowledgeGrid className="mt-3">
 171 
            <KnowledgeGrid className="mt-3">
150 
            {knowledges.length ? (
 172 
              {knowledges.length ? (
151 
              knowledges.map((knowledge, index) => (
 173 
                knowledges.map((knowledge, index) => (
152 
                <Item key={index} {...knowledge} />
 174 
                  <Item key={index} {...knowledge} onEdit={editKnowledge} />
153 
              ))
 175 
                ))
154 
            ) : (
 176 
              ) : (
155 
              <EmptySection
 177 
                <EmptySection
156 
                message={labels.error_no_record_matched_your_query}
 178 
                  message={labels.error_no_record_matched_your_query}
157 
              />
 179 
                />
158 
            )}
 180 
              )}
159 
          </KnowledgeGrid>
 181 
            </KnowledgeGrid>
160 
          <PaginationComponent
 182 
            <PaginationComponent
161 
            onChangePage={(newPage) => setCurrentPage(newPage)}
 183 
              onChangePage={(newPage) => setCurrentPage(newPage)}
162 
            currentActivePage={currentPage}
 184 
              currentActivePage={currentPage}
163 
            pages={totalPages}
 185 
              pages={totalPages}
164 
            isRow
 186 
              isRow
165 
          />
 187 
            />
- 
 
 188 
          </Col>
- 
 
 189 
        </Row>
- 
 
 190 
      </Container>
- 
 
 191 
      <KnowledgeEditModal
- 
 
 192 
        show={modalShow === 'edit'}
- 
 
 193 
        url={actionUrl.current}
- 
 
 194 
        categories={knowledgesCategories}
- 
 
 195 
        onComplete={getKnowledgesInfo}
166 
        </Col>
 196 
        onClose={closeModal}
167 
      </Row>
 197 
      />
Línea 168... Línea 198...
168 
    </Container>
 198 
    </>
169 
  )
 199 
  )
Línea 175... Línea 205...
175 
  link_edit,
 205 
  link_edit,
176 
  category,
 206 
  category,
177 
  description,
 207 
  description,
178 
  image,
 208 
  image,
179 
  title,
 209 
  title,
- 
 
 210 
  onEdit,
180 
}) => {
 211 
}) => {
181 
  return (
 212 
  return (
182 
    <>
 213 
    <>
183 
      <KnowledgeCard>
 214 
      <KnowledgeCard>
184 
        <CardMedia
 215 
        <CardMedia
Línea 196... Línea 227...
196 
            {description}
 227 
            {description}
197 
          </Typography>
 228 
          </Typography>
198 
        </CardContent>
 229 
        </CardContent>
199 
        <CardActions disableSpacing>
 230 
        <CardActions disableSpacing>
200 
          {link_edit && (
 231 
          {link_edit && (
201 
            <IconButton aria-label="edit">
 232 
            <IconButton aria-label="edit" onClick={() => onEdit(link_edit)}>
202 
              <Edit />
 233 
              <Edit />
203 
            </IconButton>
 234 
            </IconButton>
204 
          )}
 235 
          )}
205 
          {link_delete && (
 236 
          {link_delete && (
206 
            <IconButton aria-label="delete">
 237 
            <IconButton aria-label="delete">