Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from "react";
2 
import { useState, useEffect } from "react";
3 
import { Button, Modal } from "react-bootstrap";
4 
import { useForm } from "react-hook-form";
5 
import styled from "styled-components";
6 
import {axios} from "../../../../../../utils";
7 
import DateTimeInput from "../../../../../../shared/datetime-input/DateTimeInput";
8 
import FormErrorFeedback from "../../../../../../shared/form-error-feedback/FormErrorFeedback";
9 
import Spinner from "../../../../../../shared/loading-spinner/Spinner";
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 
 
24 
const LastDateOfApplication = (props) => {
25 
  // props destructuring
26 
  const { companyId, jobId, lastDateOfApplication, addNotification } = props;
27 
  // react hook form
28 
  const {
29 
    register,
30 
    errors,
31 
    handleSubmit,
32 
    setValue,
33 
    clearErrors,
34 
    getValues,
35 
    setError,
36 
  } = useForm();
37 
 
38 
  // states
39 
  const [isModalOpen, setIsModalOpen] = useState(false);
40 
  const [loading, setLoading] = useState(false);
41 
  const [settedDate, setSettedDate] = useState("");
42 
  const [settedDateFormatted, setSettedDateFormatted] = useState(
43 
    lastDateOfApplication
44 
  );
45 
 
46 
  useEffect(() => {
47 
    register("last_date_of_application", {
48 
      required: "Por favor seleccione una fecha",
49 
    });
50 
  }, []);
51 
 
52 
  const handleEdit = async () => {
53 
    setLoading(true);
54 
    handleModalOpen();
55 
    await axios
56 
      .get(
57 
        `/my-company/${companyId}/job/edit/${jobId}/last-date-of-application`
58 
      )
59 
      .then((response) => {
60 
        const resData = response.data;
61 
        if (resData.success) {
62 
          setSettedDate(resData.data);
63 
        }
64 
      });
65 
    setLoading(false);
66 
  };
67 
 
68 
  const handleModalOpen = (event) => {
69 
    event && event.preventDefault();
70 
    setIsModalOpen(!isModalOpen);
71 
  };
72 
 
73 
  const onSubmitHandler = async (data) => {
74 
    setLoading(true);
75 
    const formData = new FormData();
76 
    Object.entries(data).map(([key, value]) => {
77 
      formData.append(key, value);
78 
    });
79 
    await axios
80 
      .post(
81 
        `/my-company/${companyId}/job/edit/${jobId}/last-date-of-application`,
82 
        formData
83 
      )
84 
      .then((response) => {
85 
        const resData = response.data;
86 
         (resData);
87 
        if (resData.success) {
88 
          setSettedDateFormatted(resData.data);
89 
          handleModalOpen();
90 
        } else {
91 
          const resError = resData.data;
92 
          if (resError.constructor.name === "Object") {
93 
            Object.entries(resError).map(([key, value]) => {
94 
              if (key in getValues()) {
95 
                setError(key, {
96 
                  type: "manual",
97 
                  message: Array.isArray(value) ? value[0] : value,
98 
                });
99 
              }
100 
            });
101 
          } else {
102 
            addNotification({
103 
              style: "danger",
104 
              msg: resError,
105 
            });
106 
          }
107 
        }
108 
      });
109 
    setLoading(false);
110 
  };
111 
 
112 
  const handleDateChange = (date) => {
113 
    clearErrors("last_date_of_application");
114 
    setValue("last_date_of_application", date);
115 
  };
116 
 
117 
  return (
118 
    <React.Fragment>
119 
      <div className="user-profile-ov st2">
120 
        <h3>
121 
          Último día de aplicación
122 
          <a
123 
            href="#"
124 
            title=""
125 
            className="btn-last-date-of-application-edit"
126 
            onClick={(e) => {
127 
              e.preventDefault();
128 
              handleEdit();
129 
            }}
130 
          >
131 
            <i className="fa fa-pencil"></i>
132 
          </a>
133 
          <a href="#" title="" className="esp-bx-open"></a>
134 
        </h3>
135 
        <span id="overview-last-date-of-application">
136 
          {settedDateFormatted}
137 
        </span>
138 
      </div>
139 
 
140 
      {/* modal */}
141 
      <Modal
142 
        show={isModalOpen}
143 
        onHide={handleModalOpen}
144 
        style={{ overflowY: "scroll" }}
145 
      >
146 
        <Modal.Header closeButton>
147 
          <Modal.Title>Industria</Modal.Title>
148 
        </Modal.Header>
149 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
150 
          <Modal.Body>
151 
            <DateTimeInput
152 
              onChange={handleDateChange}
153 
              settedDate={settedDate}
154 
            />
155 
            {errors.last_date_of_application && (
156 
              <FormErrorFeedback>
157 
                {errors.last_date_of_application.message}
158 
              </FormErrorFeedback>
159 
            )}
160 
          </Modal.Body>
161 
          <Modal.Footer>
162 
            <Button type="submit">Enviar</Button>
163 
            <Button variant="danger" onClick={handleModalOpen}>
164 
              Cancel
165 
            </Button>
166 
          </Modal.Footer>
167 
        </form>
168 
        {loading && (
169 
          <StyledSpinnerContainer>
170 
            <Spinner />
171 
          </StyledSpinnerContainer>
172 
        )}
173 
      </Modal>
174 
    </React.Fragment>
175 
  );
176 
};
177 
 
178 
export default LastDateOfApplication;