Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4638 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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