Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7033 | Rev 7037 | 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 { CKEditor } from 'ckeditor4-react'
2 
import React, { useEffect, useState } from 'react'
3 
import { Button, Form, Modal } from 'react-bootstrap'
4 
import { useDispatch, useSelector } from 'react-redux'
5 
import { CKEDITOR_OPTIONS, axios } from '../../utils'
6 
import { useForm } from 'react-hook-form'
7 
import FormErrorFeedback from '../UI/FormErrorFeedback'
8 
import { addNotification } from '../../redux/notification/notification.actions'
9 
 
10 
const KnowledgeEditModal = ({
11 
  show,
12 
  categories = [],
13 
  url,
14 
  onComplete,
15 
  onClose,
16 
}) => {
17 
  const [loading, setLoading] = useState(false)
18 
  const labels = useSelector(({ intl }) => intl.labels)
19 
  const dispatch = useDispatch()
20 
 
21 
  const { handleSubmit, register, setValue, errors, getValues, watch } =
22 
    useForm()
23 
 
24 
  const onSubmit = handleSubmit((data) => {
25 
    setLoading(true)
26 
    const formData = new FormData()
27 
 
28 
    axios
29 
      .post(url, formData)
30 
      .then((response) => {
31 
        const { data, success } = response.data
32 
        if (!success) {
33 
          if (typeof data === 'string') {
34 
            dispatch(addNotification({ style: 'danger', msg: data }))
35 
            return
36 
          }
37 
 
38 
          Object.entries(data).map(([key, value]) => {
39 
            key in getValues() &&
40 
              dispatch(
41 
                addNotification({
42 
                  style: 'danger',
43 
                  msg: `${key}: ${Array.isArray(value) ? value[0] : value}`,
44 
                })
45 
              )
46 
          })
47 
          return
48 
        }
49 
 
50 
        onComplete()
51 
        onClose()
52 
      })
53 
      .finally(() => setLoading(false))
54 
  })
55 
 
56 
  useEffect(() => {
57 
    register('category_id')
58 
    register('description', { required: true })
59 
    register('title', { required: true })
60 
  }, [])
61 
 
62 
  useEffect(() => {
63 
    axios.get(url).then((response) => {
64 
      const { data, success } = response
65 
 
66 
      if (!success) {
67 
        const errorMessage =
68 
          typeof data === 'string' ? data : 'Ha ocurrido un error'
69 
 
70 
        addNotification({
71 
          style: 'danger',
72 
          msg: errorMessage,
73 
        })
74 
      }
75 
 
76 
      setValue('category_id', data.category_id)
77 
      setValue('description', data.description)
78 
      setValue('title', data.title)
79 
    })
80 
  }, [show])
81 
 
82 
  return (
83 
    <Modal show={show}>
84 
      <Modal.Header>
85 
        <Modal.Title>Editar conocimiento</Modal.Title>
86 
      </Modal.Header>
87 
      <Modal.Body>
88 
        <Form onSubmit={onSubmit}>
89 
          <Form.Group>
90 
            <Form.Label>{labels.category}</Form.Label>
7035 stevensc 91 
            <Form.Control as="select" ref={register} name="category_id">
7033 stevensc 92 
              {categories.map(({ name, uuid }) => (
93 
                <option key={uuid}>{name}</option>
94 
              ))}
95 
            </Form.Control>
96 
            {errors.description && (
97 
              <FormErrorFeedback>{labels.error_field_empty}</FormErrorFeedback>
98 
            )}
99 
          </Form.Group>
100 
 
101 
          <Form.Group>
102 
            <Form.Label>{labels.title}</Form.Label>
7035 stevensc 103 
            <Form.Control type="text" name="title" ref={register} />
7033 stevensc 104 
            {errors.description && (
105 
              <FormErrorFeedback>{labels.error_field_empty}</FormErrorFeedback>
106 
            )}
107 
          </Form.Group>
108 
 
109 
          <CKEditor
110 
            onChange={(e) => setValue('description', e.editor.getData())}
7035 stevensc 111 
            onInstanceReady={(e) => e.editor.setData(getValues('description'))}
7033 stevensc 112 
            config={CKEDITOR_OPTIONS}
113 
          />
114 
          {errors.description && (
115 
            <FormErrorFeedback>{labels.error_field_empty}</FormErrorFeedback>
116 
          )}
117 
 
118 
          <Button variant="primary" type="submit">
119 
            {labels.accept}
120 
          </Button>
7035 stevensc 121 
          <Button className="btn-secondary mt-3" onClick={onClose}>
122 
            {labels.cancel}
7033 stevensc 123 
          </Button>
124 
        </Form>
125 
      </Modal.Body>
126 
    </Modal>
127 
  )
128 
}
129 
 
130 
export default KnowledgeEditModal