Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6899 Rev 6903
Línea 1... Línea -...
1 
/* eslint-disable react/prop-types */
 - 
 
2 
import React from "react"
 - 
 
3 
import { useState, useEffect } from "react"
 1 
import React, { useState, useEffect } from 'react'
4 
import { Button, Modal } from "react-bootstrap"
 2 
import { axios } from '../../../utils'
5 
import { useForm } from "react-hook-form"
 3 
import { useForm } from 'react-hook-form'
6 
import { axios } from "../../../../../../../utils"
 4 
import { Button, Modal } from 'react-bootstrap'
7 
import FormErrorFeedback from "../../../../../../../shared/form-error-feedback/FormErrorFeedback"
 - 
 
8 
import Spinner from "../../../../../../../shared/loading-spinner/Spinner"
 5 
import { addNotification } from '../../../redux/notification/notification.actions'
- 
 
 6 
 
9 
import EditIcon from '@mui/icons-material/EditOutlined'
 7 
import EditIcon from '@mui/icons-material/EditOutlined'
- 
 
 8 
import IconButton from '@mui/material/IconButton'
- 
 
 9 
 
- 
 
 10 
import Spinner from '../../UI/Spinner'
- 
 
 11 
import FormErrorFeedback from '../../UI/FormErrorFeedback'
Línea 10... Línea 12...
10 
 
 12 
 
- 
 
 13 
const Accessibility = ({
- 
 
 14 
  accessibility: defaultValue,
- 
 
 15 
  privacy,
- 
 
 16 
  accessibilities,
- 
 
 17 
  onChange,
- 
 
 18 
  groupId,
- 
 
 19 
}) => {
11 
const Accessibility = (props) => {
 20 
  const [accessibility, setAccessibility] = useState('')
Línea 12... Línea 21...
12 
  const [isModalOpen, setIsModalOpen] = useState(false)
 21 
  const [isModalOpen, setIsModalOpen] = useState(false)
13 
 
 22 
 
14 
  const handleModalOpen = () => {
 23 
  const toggleModal = () => {
Línea -... Línea 24...
- 
 
 24 
    setIsModalOpen(true)
- 
 
 25 
  }
- 
 
 26 
 
- 
 
 27 
  useEffect(() => {
15 
    setIsModalOpen(true)
 28 
    setAccessibility(defaultValue)
16 
  }
 29 
  }, [defaultValue])
17 
 
 30 
 
18 
  return (
 31 
  return (
19 
    <>
 32 
    <>
20 
      <div className="experience__user-card">
 33 
      <div className="experience__user-card">
21 
        <div className="card__options-container">
 34 
        <div className="card__options-container">
22 
          <h4>Accesibilidad</h4>
 35 
          <h4>Accesibilidad</h4>
23 
          <button className='button-icon' onClick={handleModalOpen}>
 36 
          <IconButton onClick={toggleModal}>
24 
            <EditIcon />
 37 
            <EditIcon />
25 
          </button>
 38 
          </IconButton>
26 
        </div>
 39 
        </div>
27 
        <p>{props.accessibility}</p>
 40 
        <p>{accessibility}</p>
- 
 
 41 
      </div>
- 
 
 42 
      <Accessibility.Modal
28 
      </div>
 43 
        show={isModalOpen}
- 
 
 44 
        privacy={privacy}
- 
 
 45 
        accessibilities={accessibilities}
29 
      <Accessibility.Modal
 46 
        groupId={groupId}
30 
        show={isModalOpen}
 47 
        onChange={onChange}
31 
        {...props}
 48 
        onClose={toggleModal}
32 
      />
 49 
      />
Línea 33... Línea 50...
33 
    </>
 50 
    </>
- 
 
 51 
  )
- 
 
 52 
}
- 
 
 53 
 
- 
 
 54 
const AccessibilityModal = ({
- 
 
 55 
  show,
- 
 
 56 
  onClose,
- 
 
 57 
  privacy,
34 
  )
 58 
  accessibilities,
35 
}
 59 
  onChange,
36 
 
 - 
 
Línea 37... Línea 60...
37 
const AccessibilityModal = ({ show, groupId, privacy, accessibilities, addNotification, setSettedAccesibility }) => {
 60 
  groupId,
38 
  const { register, errors, handleSubmit, setValue, getValues, setError } = useForm()
 - 
 
39 
  const [isShow, setIsShow] = useState(show)
 - 
 
Línea 40... Línea 61...
40 
  const [loading, setLoading] = useState(false)
 61 
}) => {
41 
 
 62 
  const { register, errors, handleSubmit, setValue, getValues, setError } =
42 
  const closeModal = () => {
 63 
    useForm()
43 
    setIsShow(false)
 64 
 
- 
 
 65 
  const [loading, setLoading] = useState(false)
44 
  }
 66 
 
45 
 
 67 
  const onSubmitHandler = async (data) => {
46 
  const onSubmitHandler = async (data) => {
 68 
    setLoading(true)
47 
    setLoading(true)
 69 
    const formData = new FormData()
- 
 
 70 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
48 
    const formData = new FormData()
 71 
 
49 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
 - 
 
50 
    await axios
 - 
 
51 
      .post(`/group/my-groups/accessibility/${groupId}`, formData)
 - 
 
52 
      .then((response) => {
 72 
    await axios
- 
 
 73 
      .post(`/group/my-groups/accessibility/${groupId}`, formData)
53 
        const resData = response.data
 74 
      .then((response) => {
54 
        if (resData.success) {
 75 
        const { success, data } = response.data
55 
          setSettedAccesibility(resData.data)
 - 
 
56 
          closeModal()
 - 
 
57 
        } else {
 - 
 
58 
          const resError = resData.data
 - 
 
59 
          if (resError.constructor.name === "Object") {
 76 
 
60 
            Object.entries(resError).map(([key, value]) => {
 - 
 
61 
              if (key in getValues()) {
 - 
 
62 
                setError(key, {
 - 
 
63 
                  type: "manual",
 - 
 
64 
                  message: Array.isArray(value) ? value[0] : value,
 - 
 
65 
                })
 - 
 
66 
              }
 - 
 
67 
            })
 77 
        if (!success) {
- 
 
 78 
          const resError = data
- 
 
 79 
 
- 
 
 80 
          if (resError.constructor.name !== 'Object') {
- 
 
 81 
            addNotification({ style: 'danger', msg: resError })
- 
 
 82 
            return
- 
 
 83 
          }
- 
 
 84 
 
- 
 
 85 
          Object.entries(resError).map(([key, value]) => {
- 
 
 86 
            if (key in getValues()) {
- 
 
 87 
              setError(key, {
68 
          } else {
 88 
                type: 'manual',
- 
 
 89 
                message: Array.isArray(value) ? value[0] : value,
- 
 
 90 
              })
- 
 
 91 
            }
69 
            addNotification({
 92 
          })
70 
              style: "danger",
 93 
          return
71 
              msg: resError,
 94 
        }
Línea 72... Línea 95...
72 
            })
 95 
 
73 
          }
 96 
        onChange(data)
74 
        }
 - 
 
75 
      })
 97 
        onClose()
76 
    setLoading(false)
 98 
      })
77 
  }
 - 
 
78 
 
 99 
    setLoading(false)
79 
  useEffect(() => {
 100 
  }
Línea 80... Línea -...
80 
    axios.get(`/group/my-groups/accessibility/${groupId}`)
 - 
 
81 
      .then(({ data: response }) => {
 - 
 
82 
        if (response.success && response.data) {
 - 
 
83 
          setValue('accessibility', response.data)
 - 
 
84 
        }
 101 
 
85 
      })
 - 
 
86 
  }, [])
 - 
 
87 
 
 102 
  useEffect(() => {
88 
  useEffect(() => {
 - 
 
89 
    setIsShow(show)
 - 
 
90 
  }, [show])
 103 
    axios.get(`/group/my-groups/accessibility/${groupId}`).then((response) => {
91 
 
 104 
      const { data, success } = response.data
92 
  return (
 105 
      if (success && data) setValue('accessibility', data)
93 
    <Modal
 106 
    })
94 
      show={isShow}
 107 
  }, [])
95 
      onHide={closeModal}
 108 
 
96 
      style={{ overflowY: "scroll" }}
 109 
  return (
97 
    >
 110 
    <Modal show={show} onHide={onClose}>
98 
      <Modal.Header closeButton>
 111 
      <Modal.Header closeButton>
99 
        <Modal.Title>Accesibilidad</Modal.Title>
 112 
        <Modal.Title>Accesibilidad</Modal.Title>
100 
      </Modal.Header>
 113 
      </Modal.Header>
101 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
 114 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
- 
 
 115 
        <Modal.Body>
102 
        <Modal.Body>
 116 
          <select
103 
          <select
 117 
            name="accessibility"
104 
            name="accessibility"
 118 
            ref={register({ required: 'Por favor eliga una accesibilidad' })}
105 
            ref={register({ required: "Por favor eliga una accesibilidad" })}
 119 
          >
106 
          >
 120 
            <option value="" hidden>
107 
            <option value="" hidden>
 121 
              Accesibilidad
108 
              Accesibilidad
 122 
            </option>
109 
            </option>
 123 
            {accessibilities &&
110 
            {Object.entries(accessibilities).map(([key, value]) => {
 124 
              Object.entries(accessibilities).map(([key, value]) => {
111 
              if (privacy === 'Privado' && key === 'aj') {
 125 
                if (privacy === 'Privado' && key === 'aj') {
112 
                return
 126 
                  return
113 
              }
 127 
                }
- 
 
 128 
 
- 
 
 129 
                return (
114 
 
 130 
                  <option value={key} key={key}>
- 
 
 131 
                    {value}
- 
 
 132 
                  </option>
- 
 
 133 
                )
115 
              return (
 134 
              })}
116 
                <option value={key} key={key}>
 135 
          </select>
117 
                  {value}
 136 
          {errors.accessibility && (
118 
                </option>
 137 
            <FormErrorFeedback>
119 
              )
 138 
              {errors.accessibility.message}
120 
            })}
 139 
            </FormErrorFeedback>
121 
          </select>
 140 
          )}
122 
          {errors.accessibility && <FormErrorFeedback>{errors.accessibility.message}</FormErrorFeedback>}
 141 
          {loading && <Spinner />}
123 
        </Modal.Body>
 - 
 
124 
        <Modal.Footer>
 142 
        </Modal.Body>
125 
          <Button type="submit">Enviar</Button>
 143 
        <Modal.Footer>
126 
          <Button variant="danger" onClick={closeModal}>
 144 
          <Button type="submit">Enviar</Button>
Línea 127... Línea 145...
127 
            Cancelar
 145 
          <Button variant="danger" onClick={onClose}>