Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7036 | Rev 7039 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7033 stevensc 1
import React, { useEffect, useRef, useState } from 'react'
7025 stevensc 2
import { useDispatch, useSelector } from 'react-redux'
7030 stevensc 3
import { Card, Col, Container, Row } from 'react-bootstrap'
7020 stevensc 4
import { axios, debounce, jsonToParams } from '../../utils'
7015 stevensc 5
import { addNotification } from '../../redux/notification/notification.actions'
7025 stevensc 6
import styled from 'styled-components'
7
 
8
import SearchInput from '../../components/UI/SearchInput'
7019 stevensc 9
import EmptySection from '../../components/UI/EmptySection'
7025 stevensc 10
import WidgetLayout from '../../components/widgets/WidgetLayout'
7020 stevensc 11
import PaginationComponent from '../../components/UI/PaginationComponent'
7030 stevensc 12
import {
13
  CardActions,
14
  CardContent,
15
  CardMedia,
16
  IconButton,
17
  Typography,
18
} from '@mui/material'
19
import { Delete, Edit } from '@mui/icons-material'
7033 stevensc 20
import KnowledgeEditModal from '../../components/knowledge/KnowledgeEditModal'
7015 stevensc 21
 
7024 stevensc 22
const KnowledgeCategories = styled(WidgetLayout)`
23
  padding: 1rem;
7027 stevensc 24
  ul {
25
    display: flex;
26
    flex-direction: column;
27
    gap: 0.5rem;
7033 stevensc 28
    li {
29
      cursor: pointer;
30
    }
31
    .selected {
32
      font-weight: 600;
33
    }
7027 stevensc 34
  }
7024 stevensc 35
`
36
 
7026 stevensc 37
const KnowledgeGrid = styled.div`
38
  display: grid;
39
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
40
  gap: 1rem;
41
`
42
 
7030 stevensc 43
const KnowledgeCard = styled(Card)`
7031 stevensc 44
  background-color: var(--bg-color);
45
  border-radius: var(--border-radius);
46
  overflow: hidden;
7032 stevensc 47
  height: fit-content;
7027 stevensc 48
`
49
 
7024 stevensc 50
const KnowledgeSearch = styled(SearchInput)`
51
  background-color: var(--bg-color);
52
`
53
 
7020 stevensc 54
const KnowledgeAreaPage = () => {
7015 stevensc 55
  const [knowledges, setKnowledges] = useState([])
56
  const [knowledgesCategories, setKnowledgesCategories] = useState([])
7020 stevensc 57
  const [search, setSearch] = useState('')
7023 stevensc 58
  const [category, setCategory] = useState('')
7020 stevensc 59
  const [currentPage, setCurrentPage] = useState(1)
60
  const [totalPages, setTotalPages] = useState(1)
61
  const [allowAdd, setAllowAdd] = useState(false)
7033 stevensc 62
  const [modalShow, setModalShow] = useState(null)
7034 stevensc 63
  const actionUrl = useRef('')
7015 stevensc 64
  const labels = useSelector(({ intl }) => intl.labels)
65
  const dispatch = useDispatch()
66
 
7033 stevensc 67
  const getKnowledgesInfo = (search = '', page = 1, category_id = '') => {
68
    const urlParams = { search, page, category_id }
7015 stevensc 69
    axios
7021 stevensc 70
      .get(`/knowledge-area?${jsonToParams(urlParams)}`, {
7015 stevensc 71
        headers: {
72
          'Content-Type': 'application/json',
73
        },
74
      })
75
      .then((response) => {
7019 stevensc 76
        const { data, success } = response.data
77
 
78
        if (!success) {
79
          const errorMessage =
80
            typeof data === 'string'
81
              ? data
82
              : 'Ha ocurrido un error, por favor intente más tarde.'
83
 
84
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
85
          return
86
        }
87
 
88
        setKnowledges(data.items)
7020 stevensc 89
        setKnowledgesCategories(data.categories)
90
        setCurrentPage(data.page)
91
        setTotalPages(data.total_pages)
92
        setAllowAdd(Boolean(data.link_add))
7015 stevensc 93
      })
94
      .catch((error) => {
95
        dispatch(
96
          addNotification({
97
            style: 'danger',
98
            msg: 'Ha ocurrido un error, por favor intente más tarde.',
99
          })
100
        )
101
        throw new Error(error)
102
      })
7020 stevensc 103
  }
7015 stevensc 104
 
7033 stevensc 105
  const editKnowledge = (url) => {
106
    actionUrl.current = url
107
    setModalShow('edit')
108
  }
109
 
110
  const closeModal = () => {
7036 stevensc 111
    actionUrl.current = ''
7033 stevensc 112
    setModalShow(null)
113
  }
114
 
7022 stevensc 115
  const handleInputChange = debounce((e) => setSearch(e.target.value), 500)
7020 stevensc 116
 
117
  useEffect(() => {
7023 stevensc 118
    getKnowledgesInfo(search, currentPage, category)
7030 stevensc 119
  }, [search, currentPage, category])
7020 stevensc 120
 
7015 stevensc 121
  return (
7033 stevensc 122
    <>
123
      <Container as="section" className="companies-info px-0">
124
        <div className="company-title">
125
          <h1 className="title mx-auto">{labels.knowledge_area_title}</h1>
126
          {allowAdd && (
127
            <h2 className="title cursor-pointer">
128
              {labels.knowledge_area_add}
129
            </h2>
130
          )}
131
        </div>
7015 stevensc 132
 
7033 stevensc 133
        <Row className="gap-3">
134
          <Col md="3">
135
            <KnowledgeCategories>
136
              <ul>
7038 stevensc 137
                <li>
7026 stevensc 138
                  <input
139
                    type="radio"
7033 stevensc 140
                    id="category-all"
141
                    value=""
7026 stevensc 142
                    onChange={(e) => setCategory(e.target.value)}
143
                    hidden
144
                  />
7038 stevensc 145
                  <label
146
                    className={!category && 'selected'}
147
                    htmlFor="category-all"
148
                  >
7033 stevensc 149
                    {labels.knowledge_area_category_all}
150
                  </label>
7026 stevensc 151
                </li>
7033 stevensc 152
                {knowledgesCategories.map(({ uuid, name }) => (
7038 stevensc 153
                  <li key={uuid}>
7033 stevensc 154
                    <input
155
                      type="radio"
156
                      id={`category-${name}`}
157
                      value={uuid}
158
                      onChange={(e) => setCategory(e.target.value)}
159
                      hidden
160
                    />
7038 stevensc 161
                    <label
162
                      className={category === uuid && 'selected'}
163
                      htmlFor={`category-${name}`}
164
                    >
165
                      {name}
166
                    </label>
7033 stevensc 167
                  </li>
168
                ))}
169
              </ul>
170
            </KnowledgeCategories>
171
          </Col>
7015 stevensc 172
 
7033 stevensc 173
          <Col className="px-0">
174
            <KnowledgeSearch
175
              onChange={handleInputChange}
176
              placeholder={labels.search}
177
            />
7015 stevensc 178
 
7033 stevensc 179
            <KnowledgeGrid className="mt-3">
180
              {knowledges.length ? (
181
                knowledges.map((knowledge, index) => (
182
                  <Item key={index} {...knowledge} onEdit={editKnowledge} />
183
                ))
184
              ) : (
185
                <EmptySection
186
                  message={labels.error_no_record_matched_your_query}
187
                />
188
              )}
189
            </KnowledgeGrid>
190
            <PaginationComponent
191
              onChangePage={(newPage) => setCurrentPage(newPage)}
192
              currentActivePage={currentPage}
193
              pages={totalPages}
194
              isRow
195
            />
196
          </Col>
197
        </Row>
198
      </Container>
199
      <KnowledgeEditModal
200
        show={modalShow === 'edit'}
201
        url={actionUrl.current}
202
        categories={knowledgesCategories}
203
        onComplete={getKnowledgesInfo}
204
        onClose={closeModal}
205
      />
206
    </>
7015 stevensc 207
  )
208
}
209
 
7019 stevensc 210
const Item = ({
211
  link_delete,
212
  link_view,
213
  link_edit,
214
  category,
215
  description,
216
  image,
217
  title,
7033 stevensc 218
  onEdit,
7019 stevensc 219
}) => {
220
  return (
7030 stevensc 221
    <>
222
      <KnowledgeCard>
223
        <CardMedia
224
          component="img"
225
          height="194"
226
          image={image}
227
          alt={`${title} image`}
228
        />
229
        <CardContent>
7032 stevensc 230
          <Typography variant="h5">{title}</Typography>
7031 stevensc 231
          <Typography variant="subtitle1" color="text.secondary">
232
            {category}
233
          </Typography>
7030 stevensc 234
          <Typography variant="body2" color="text.secondary">
235
            {description}
236
          </Typography>
237
        </CardContent>
238
        <CardActions disableSpacing>
239
          {link_edit && (
7033 stevensc 240
            <IconButton aria-label="edit" onClick={() => onEdit(link_edit)}>
7030 stevensc 241
              <Edit />
242
            </IconButton>
243
          )}
244
          {link_delete && (
245
            <IconButton aria-label="delete">
246
              <Delete />
247
            </IconButton>
248
          )}
249
        </CardActions>
250
      </KnowledgeCard>
251
    </>
7019 stevensc 252
  )
253
}
254
 
7015 stevensc 255
export default KnowledgeAreaPage