Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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