Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 9833 | Rev 9835 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
9812 stevensc 1 
import React, { useState, useEffect } from 'react'
9759 stevensc 2 
import { useForm } from 'react-hook-form'
9782 stevensc 3 
import Datetime from 'react-datetime'
9814 stevensc 4 
import axios from 'axios'
9791 stevensc 5 
import SearchLocationInput from '../../../shared/SearchLocationInput'
9812 stevensc 6 
import DescriptionInput from '../../../shared/DescriptionInput'
7 
import { useHistory, useParams } from 'react-router-dom'
9782 stevensc 8 
import "react-datetime/css/react-datetime.css"
9832 stevensc 9 
import { validate } from 'uuid'
9469 stevensc 10 
 
9779 stevensc 11 
const FormView = ({ actionLink, googleApiKey }) => {
9759 stevensc 12 
 
9812 stevensc 13 
  const history = useHistory()
14 
  let { action } = useParams()
15 
 
9832 stevensc 16 
  const { handleSubmit, register, setValue, errors } = useForm()
9802 stevensc 17 
 
9832 stevensc 18 
  const [inputErrors, setInputErrors] = useState({})
9779 stevensc 19 
  const [location, setLocation] = useState({})
9802 stevensc 20 
  const [isActive, setIsActive] = useState(false)
9833 stevensc 21 
  const [year, setYear] = useState('')
9779 stevensc 22 
  const [locationLabel, setLocationLabel] = useState('')
23 
  const [jobsDescriptions, setJobsDescriptions] = useState([
24 
    {
25 
      value: "8ff86a9a-651c-4dd0-86c1-b9c0716d09e0",
26 
      label: "Programador Junior"
27 
    }
28 
  ])
29 
  const [jobsCategory, setJobsCategory] = useState([
30 
    {
31 
      value: "7bd009b8-bd25-4602-bf85-9496af80afbd",
32 
      label: "Finanzas"
33 
    }
34 
  ])
35 
  const [industry, setIndustry] = useState([
36 
    {
37 
      value: "307c261f-2d27-4b3c-a86a-6f69a596edb8",
38 
      label: "Bienes raíces"
39 
    }
40 
  ])
9759 stevensc 41 
 
9779 stevensc 42 
 
9759 stevensc 43 
  const onSubmit = (data) => {
9831 stevensc 44 
    const submitData = {
45 
      ...data,
46 
      ...location,
47 
      last_date: year,
48 
      status: isActive ? "a" : "i"
49 
    }
50 
 
9834 stevensc 51 
    if (!location.formatted_address) { return console.log("Location empty") }
52 
    if (!year) { return console.log("Year empty") }
9833 stevensc 53 
 
54 
    console.log(submitData)
9759 stevensc 55 
  }
9802 stevensc 56 
 
9834 stevensc 57 
  useEffect(() => {
58 
    console.log(errors)
59 
  }, [errors])
60 
 
9831 stevensc 61 
  useEffect(() => register("description"), [])
62 
 
9812 stevensc 63 
  useEffect(() => {
9814 stevensc 64 
    if (action === "edit") {
65 
      axios.get(actionLink)
66 
        .then(({ data }) => console.log(data))
67 
    }
68 
  }, [action])
9812 stevensc 69 
 
9469 stevensc 70 
  return (
9759 stevensc 71 
    <section className="container">
72 
      <div className="row">
73 
        <div className="col-xs-12 col-md-12">
74 
          <form onSubmit={handleSubmit(onSubmit)}>
75 
            <div className="form-group">
76 
              <label>Nombre</label>
77 
              <input
78 
                type="text"
79 
                name="name"
80 
                className="form-control"
9761 stevensc 81 
                ref={register({ required: true, maxLength: 120 })}
9759 stevensc 82 
              />
83 
            </div>
9779 stevensc 84 
            <div className="form-group">
85 
              <label>Cargo a evaluar</label>
9832 stevensc 86 
              <select name="job_description_id" className="form-control" ref={register({ required: true })} onChange={(e) => setJobsDescriptions(e.target.value)}>
9779 stevensc 87 
                {
88 
                  jobsDescriptions.map(({ label, value }) => (
89 
                    <option value={value}>{label}</option>
90 
                  ))
91 
                }
92 
              </select>
93 
            </div>
94 
            <div className="form-group">
95 
              <label>Categoría de Empleo</label>
9832 stevensc 96 
              <select name="job_category_id" className="form-control" ref={register({ required: true })} onChange={(e) => setJobsCategory(e.target.value)}>
9779 stevensc 97 
                {
98 
                  jobsCategory.map(({ label, value }) => (
99 
                    <option value={value}>{label}</option>
100 
                  ))
101 
                }
102 
              </select>
103 
            </div>
104 
            <div className="form-group">
105 
              <label>Ubicación</label>
9791 stevensc 106 
              <SearchLocationInput
9779 stevensc 107 
                value={locationLabel}
108 
                setValue={setLocationLabel}
109 
                googleApiKey={googleApiKey}
110 
                updateData={setLocation}
111 
              />
112 
            </div>
113 
            <div className="form-group">
114 
              <label>Industria</label>
9832 stevensc 115 
              <select name="industry_id" className="form-control" ref={register({ required: true })} onChange={(e) => setIndustry(e.target.value)}>
9779 stevensc 116 
                {
117 
                  industry.map(({ label, value }) => (
118 
                    <option value={value}>{label}</option>
119 
                  ))
120 
                }
121 
              </select>
122 
            </div>
123 
            <div className="form-group">
124 
              <label>Último día de aplicación</label>
9791 stevensc 125 
              <Datetime
126 
                dateFormat="DD-MM-YYYY"
127 
                timeFormat={false}
128 
                onChange={(e) =>
129 
                  setYear(new Intl.DateTimeFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
130 
                }
131 
                inputProps={{ className: 'form-control' }}
132 
                closeOnSelect
133 
              />
9779 stevensc 134 
            </div>
9802 stevensc 135 
            <div className="form-group">
136 
              <label>Descripción</label>
137 
              <DescriptionInput
138 
                setValue={setValue}
139 
                name="description"
140 
              />
141 
            </div>
142 
            <div className="form-group">
143 
              <label>Estatus</label>
144 
              <div
145 
                className={`toggle btn btn-block btn-primary ${!isActive && "off"}`}
146 
                data-toggle="toggle"
147 
                role="button"
148 
                style={{ width: '130px' }}
149 
                onClick={() => setIsActive(!isActive)}
150 
              >
151 
                <input
152 
                  type="checkbox"
153 
                  checked={isActive}
154 
                />
155 
                <div className="toggle-group">
156 
                  <label for="status" className="btn btn-primary toggle-on">Activo</label>
157 
                  <label for="status" className="btn btn-light toggle-off">Inactivo</label>
158 
                  <span className="toggle-handle btn btn-light"></span>
159 
                </div>
160 
              </div>
161 
            </div>
162 
            <div className="form-group">
163 
              <button
164 
                type="submit"
9832 stevensc 165 
                className="btn btn-primary btn-form-save-close mr-2"
9802 stevensc 166 
              >
167 
                Guardar
168 
              </button>
169 
              <button
170 
                type="button"
171 
                className="btn btn-secondary btn-edit-cancel"
9812 stevensc 172 
                onClick={() => history.goBack()}
9802 stevensc 173 
              >
174 
                Cancelar
175 
              </button>
176 
            </div>
9759 stevensc 177 
          </form>
178 
        </div>
179 
      </div>
180 
    </section>
9469 stevensc 181 
  )
182 
}
183 
export default FormView