Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7035 | Rev 7038 | 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 
 
7037 stevensc 21 
  const { handleSubmit, register, setValue, errors, getValues } = useForm()
7033 stevensc 22 
 
23 
  const onSubmit = handleSubmit((data) => {
24 
    setLoading(true)
25 
    const formData = new FormData()
7037 stevensc 26 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
7033 stevensc 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('description', { required: true })
58 
  }, [])
59 
 
60 
  useEffect(() => {
61 
    axios.get(url).then((response) => {
62 
      const { data, success } = response
63 
 
64 
      if (!success) {
65 
        const errorMessage =
66 
          typeof data === 'string' ? data : 'Ha ocurrido un error'
67 
 
7037 stevensc 68 
        dispatch(
69 
          addNotification({
70 
            style: 'danger',
71 
            msg: errorMessage,
72 
          })
73 
        )
74 
        return
7033 stevensc 75 
      }
76 
 
77 
      setValue('category_id', data.category_id)
78 
      setValue('description', data.description)
79 
      setValue('title', data.title)
80 
    })
81 
  }, [show])
82 
 
83 
  return (
84 
    <Modal show={show}>
7037 stevensc 85 
      <Modal.Header className="pb-0">
7033 stevensc 86 
        <Modal.Title>Editar conocimiento</Modal.Title>
87 
      </Modal.Header>
88 
      <Modal.Body>
89 
        <Form onSubmit={onSubmit}>
90 
          <Form.Group>
91 
            <Form.Label>{labels.category}</Form.Label>
7035 stevensc 92 
            <Form.Control as="select" ref={register} name="category_id">
7033 stevensc 93 
              {categories.map(({ name, uuid }) => (
94 
                <option key={uuid}>{name}</option>
95 
              ))}
96 
            </Form.Control>
7037 stevensc 97 
            {errors.category_id && (
7033 stevensc 98 
              <FormErrorFeedback>{labels.error_field_empty}</FormErrorFeedback>
99 
            )}
100 
          </Form.Group>
101 
 
102 
          <Form.Group>
103 
            <Form.Label>{labels.title}</Form.Label>
7035 stevensc 104 
            <Form.Control type="text" name="title" ref={register} />
7037 stevensc 105 
            {errors.title && (
7033 stevensc 106 
              <FormErrorFeedback>{labels.error_field_empty}</FormErrorFeedback>
107 
            )}
108 
          </Form.Group>
109 
 
110 
          <CKEditor
111 
            onChange={(e) => setValue('description', e.editor.getData())}
7035 stevensc 112 
            onInstanceReady={(e) => e.editor.setData(getValues('description'))}
7033 stevensc 113 
            config={CKEDITOR_OPTIONS}
114 
          />
115 
          {errors.description && (
116 
            <FormErrorFeedback>{labels.error_field_empty}</FormErrorFeedback>
117 
          )}
118 
 
7037 stevensc 119 
          <Button className="mt-3 mr-3" variant="primary" type="submit">
7033 stevensc 120 
            {labels.accept}
121 
          </Button>
7035 stevensc 122 
          <Button className="btn-secondary mt-3" onClick={onClose}>
123 
            {labels.cancel}
7033 stevensc 124 
          </Button>
125 
        </Form>
126 
      </Modal.Body>
127 
    </Modal>
128 
  )
129 
}
130 
 
131 
export default KnowledgeEditModal