Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7029 Rev 7030
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
2 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from 'react-redux'
3 
import { 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 7... Línea 7...
7 
 
 7 
 
8 
import SearchInput from '../../components/UI/SearchInput'
 8 
import SearchInput from '../../components/UI/SearchInput'
9 
import EmptySection from '../../components/UI/EmptySection'
 9 
import EmptySection from '../../components/UI/EmptySection'
10 
import WidgetLayout from '../../components/widgets/WidgetLayout'
 10 
import WidgetLayout from '../../components/widgets/WidgetLayout'
- 
 
 11 
import PaginationComponent from '../../components/UI/PaginationComponent'
- 
 
 12 
import {
- 
 
 13 
  CardActions,
- 
 
 14 
  CardContent,
- 
 
 15 
  CardMedia,
- 
 
 16 
  IconButton,
- 
 
 17 
  Typography,
- 
 
 18 
} from '@mui/material'
Línea 11... Línea 19...
11 
import PaginationComponent from '../../components/UI/PaginationComponent'
 19 
import { Delete, Edit } from '@mui/icons-material'
12 
 
 20 
 
13 
const KnowledgeCategories = styled(WidgetLayout)`
 21 
const KnowledgeCategories = styled(WidgetLayout)`
14 
  padding: 1rem;
 22 
  padding: 1rem;
Línea 23... Línea 31...
23 
  display: grid;
 31 
  display: grid;
24 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 32 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
25 
  gap: 1rem;
 33 
  gap: 1rem;
26 
`
 34 
`
Línea 27... Línea 35...
27 
 
 35 
 
28 
const KnowledgeCard = styled(WidgetLayout)`
 - 
 
29 
  display: flex;
 - 
 
30 
  flex-direction: column;
 - 
 
31 
  gap: 0.5rem;
 - 
 
32 
  height: 100%;
 - 
 
33 
  padding-bottom: 1rem;
 - 
 
34 
 
 - 
 
35 
  & > {
 - 
 
36 
    * {
 - 
 
37 
      margin: 0 1rem;
 - 
 
38 
    }
 - 
 
39 
    a {
 - 
 
40 
      width: fit-content;
 - 
 
41 
 
 - 
 
42 
      img {
 - 
 
43 
        width: 100%;
 - 
 
44 
        height: auto;
 - 
 
45 
      }
 - 
 
46 
 
 - 
 
47 
      h2 {
 - 
 
48 
        color: $title-color;
 - 
 
49 
        font-weight: 800;
 - 
 
50 
      }
 - 
 
51 
    }
 - 
 
52 
    h3 {
 - 
 
53 
      color: $subtitle-color;
 - 
 
54 
      font-weight: 400;
 - 
 
55 
    }
 - 
 
56 
    p {
 - 
 
57 
      color: $font-color;
 - 
 
58 
      font-weight: 400;
 - 
 
59 
      text-align: justify;
 - 
 
60 
      text-justify: inter-word;
 - 
 
61 
    }
 - 
 
62 
  }
 - 
 
63 
  .knowledge-record-card-actions {
 - 
 
64 
    display: flex;
 - 
 
65 
    align-items: center;
 - 
 
66 
    gap: 0.5rem;
 - 
 
67 
 
 - 
 
68 
    & > * {
 - 
 
69 
      flex: 1;
 - 
 
70 
      max-width: calc(100% / 3);
 - 
 
71 
    }
 - 
 
72 
  }
 - 
 
73 
  .reaction-btn {
 - 
 
74 
    align-items: center;
 - 
 
75 
    border-radius: 10px;
 - 
 
76 
    display: inline-flex;
 - 
 
77 
    gap: 0.5rem;
 - 
 
78 
    justify-content: center;
 - 
 
79 
    padding: 10px;
 - 
 
80 
    position: relative;
 - 
 
81 
    width: -webkit-fill-available;
 - 
 
82 
    transition: background-color 200ms ease;
 - 
 
83 
    &:hover {
 - 
 
84 
      background-color: #f5f5f5;
 - 
 
85 
    }
 - 
 
86 
  }
 - 
 
87 
 
 - 
 
88 
  .reactions {
 - 
 
89 
    position: absolute;
 - 
 
90 
    bottom: calc(100% + 0.5rem);
 36 
const KnowledgeCard = styled(Card)`
91 
    background-color: $bg-color;
 - 
 
92 
    box-shadow: 0px 0px 3px #000;
 - 
 
93 
    gap: 0.5rem;
 - 
 
94 
    left: 50%;
 - 
 
95 
    display: none;
 - 
 
96 
    padding: 0.2rem;
 - 
 
97 
    width: fit-content;
 - 
 
98 
    border-radius: 20px;
 - 
 
99 
    transform: translateX(-50%);
 - 
 
100 
 
 - 
 
101 
    &.active {
 - 
 
102 
      display: flex;
 - 
 
103 
    }
 - 
 
104 
  }
 37 
  background-color: var(--bg-color) !important;
Línea 105... Línea 38...
105 
`
 38 
`
106 
 
 39 
 
107 
const KnowledgeSearch = styled(SearchInput)`
 40 
const KnowledgeSearch = styled(SearchInput)`
Línea 159... Línea 92...
159 
 
 92 
 
Línea 160... Línea 93...
160 
  const handleInputChange = debounce((e) => setSearch(e.target.value), 500)
 93 
  const handleInputChange = debounce((e) => setSearch(e.target.value), 500)
161 
 
 94 
 
162 
  useEffect(() => {
 95 
  useEffect(() => {
Línea 163... Línea 96...
163 
    getKnowledgesInfo(search, currentPage, category)
 96 
    getKnowledgesInfo(search, currentPage, category)
164 
  }, [search, currentPage])
 97 
  }, [search, currentPage, category])
165 
 
 98 
 
166 
  return (
 99 
  return (
Línea 241... Línea 174...
241 
  description,
 174 
  description,
242 
  image,
 175 
  image,
243 
  title,
 176 
  title,
244 
}) => {
 177 
}) => {
245 
  return (
 178 
  return (
- 
 
 179 
    <>
246 
    <KnowledgeCard>
 180 
      <KnowledgeCard>
247 
      <a
 181 
        <CardMedia
248 
        href={link_view}
 182 
          component="img"
249 
        target="_blank"
 183 
          height="194"
250 
        className="knowledge-record-card-actions-view"
 184 
          image={image}
251 
        rel="noreferrer"
 185 
          alt={`${title} image`}
252 
      >
 186 
        />
253 
        <img src={image} alt={`${title} image`} />
 187 
        <CardContent>
254 
      </a>
 188 
          <h3>{category}</h3>
255 
      <div className="d-flex align-items-center justify-content-between">
 189 
          <a href={link_view} target="_blank" rel="noreferrer">
256 
        {link_edit && (
 190 
            <h2>{title}</h2>
- 
 
 191 
          </a>
257 
          <button data-link="{{>link_edit}}" className="btn-knowledge-edit">
 192 
          <Typography variant="body2" color="text.secondary">
258 
            <i className="fa fa-pencil" aria-hidden="true" />
 193 
            {description}
259 
          </button>
 194 
          </Typography>
260 
        )}
 195 
        </CardContent>
261 
 
 - 
 
- 
 
 196 
        <CardActions disableSpacing>
262 
        {link_delete && (
 197 
          {link_edit && (
263 
          <button data-link="{{>link_delete}}" className="btn-knowledge-delete">
 198 
            <IconButton aria-label="edit">
264 
            <i className="fa fa-trash" aria-hidden="true" />
 199 
              <Edit />
265 
          </button>
 200 
            </IconButton>
266 
        )}
 201 
          )}
267 
      </div>
 202 
          {link_delete && (
268 
      <h3>{category}</h3>
 203 
            <IconButton aria-label="delete">
269 
      <a href={link_view} target="_blank" rel="noreferrer">
 204 
              <Delete />
270 
        <h2>{title}</h2>
 205 
            </IconButton>
271 
      </a>
 206 
          )}
272 
      <p>{description}</p>
 207 
        </CardActions>
273 
    </KnowledgeCard>
 208 
      </KnowledgeCard>
- 
 
 209 
    </>
274 
  )
 210 
  )
275 
}
 211 
}
Línea 276... Línea 212...
276 
 
 212