Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 9831 | Rev 9833 | 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)
9782 stevensc 21 
  const [year, setYear] = useState(new Date())
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 
 
9832 stevensc 51 
    if (!location.formatted_address) { return setInputErrors({ ...inputErrors, location: "Empty location" }) }
52 
    if (!year) { return setInputErrors({ ...inputErrors, year: "Empty last day" }) }
9759 stevensc 53 
  }
9802 stevensc 54 
 
9831 stevensc 55 
  useEffect(() => register("description"), [])
56 
 
9812 stevensc 57 
  useEffect(() => {
9814 stevensc 58 
    if (action === "edit") {
59 
      axios.get(actionLink)
60 
        .then(({ data }) => console.log(data))
61 
    }
62 
  }, [action])
9812 stevensc 63 
 
9469 stevensc 64 
  return (
9759 stevensc 65 
    <section className="container">
66 
      <div className="row">
67 
        <div className="col-xs-12 col-md-12">
68 
          <form onSubmit={handleSubmit(onSubmit)}>
69 
            <div className="form-group">
70 
              <label>Nombre</label>
71 
              <input
72 
                type="text"
73 
                name="name"
74 
                className="form-control"
9761 stevensc 75 
                ref={register({ required: true, maxLength: 120 })}
9759 stevensc 76 
              />
9832 stevensc 77 
              {errors.name && <p>{errors.name}</p>}
9759 stevensc 78 
            </div>
9779 stevensc 79 
            <div className="form-group">
80 
              <label>Cargo a evaluar</label>
9832 stevensc 81 
              <select name="job_description_id" className="form-control" ref={register({ required: true })} onChange={(e) => setJobsDescriptions(e.target.value)}>
9779 stevensc 82 
                {
83 
                  jobsDescriptions.map(({ label, value }) => (
84 
                    <option value={value}>{label}</option>
85 
                  ))
86 
                }
87 
              </select>
88 
            </div>
89 
            <div className="form-group">
90 
              <label>Categoría de Empleo</label>
9832 stevensc 91 
              <select name="job_category_id" className="form-control" ref={register({ required: true })} onChange={(e) => setJobsCategory(e.target.value)}>
9779 stevensc 92 
                {
93 
                  jobsCategory.map(({ label, value }) => (
94 
                    <option value={value}>{label}</option>
95 
                  ))
96 
                }
97 
              </select>
98 
            </div>
99 
            <div className="form-group">
100 
              <label>Ubicación</label>
9791 stevensc 101 
              <SearchLocationInput
9779 stevensc 102 
                value={locationLabel}
103 
                setValue={setLocationLabel}
104 
                googleApiKey={googleApiKey}
105 
                updateData={setLocation}
106 
              />
9832 stevensc 107 
              {inputErrors.location && <p>{inputErrors.location}</p>}
9779 stevensc 108 
            </div>
109 
            <div className="form-group">
110 
              <label>Industria</label>
9832 stevensc 111 
              <select name="industry_id" className="form-control" ref={register({ required: true })} onChange={(e) => setIndustry(e.target.value)}>
9779 stevensc 112 
                {
113 
                  industry.map(({ label, value }) => (
114 
                    <option value={value}>{label}</option>
115 
                  ))
116 
                }
117 
              </select>
118 
            </div>
119 
            <div className="form-group">
120 
              <label>Último día de aplicación</label>
9791 stevensc 121 
              <Datetime
122 
                dateFormat="DD-MM-YYYY"
123 
                timeFormat={false}
124 
                onChange={(e) =>
125 
                  setYear(new Intl.DateTimeFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
126 
                }
127 
                inputProps={{ className: 'form-control' }}
128 
                closeOnSelect
129 
              />
9832 stevensc 130 
              {inputErrors.year && <p>{inputErrors.year}</p>}
9779 stevensc 131 
            </div>
9802 stevensc 132 
            <div className="form-group">
133 
              <label>Descripción</label>
134 
              <DescriptionInput
135 
                setValue={setValue}
136 
                name="description"
137 
              />
138 
            </div>
139 
            <div className="form-group">
140 
              <label>Estatus</label>
141 
              <div
142 
                className={`toggle btn btn-block btn-primary ${!isActive && "off"}`}
143 
                data-toggle="toggle"
144 
                role="button"
145 
                style={{ width: '130px' }}
146 
                onClick={() => setIsActive(!isActive)}
147 
              >
148 
                <input
149 
                  type="checkbox"
150 
                  checked={isActive}
151 
                />
152 
                <div className="toggle-group">
153 
                  <label for="status" className="btn btn-primary toggle-on">Activo</label>
154 
                  <label for="status" className="btn btn-light toggle-off">Inactivo</label>
155 
                  <span className="toggle-handle btn btn-light"></span>
156 
                </div>
157 
              </div>
158 
            </div>
159 
            <div className="form-group">
160 
              <button
161 
                type="submit"
9832 stevensc 162 
                className="btn btn-primary btn-form-save-close mr-2"
9802 stevensc 163 
              >
164 
                Guardar
165 
              </button>
166 
              <button
167 
                type="button"
168 
                className="btn btn-secondary btn-edit-cancel"
9812 stevensc 169 
                onClick={() => history.goBack()}
9802 stevensc 170 
              >
171 
                Cancelar
172 
              </button>
173 
            </div>
9759 stevensc 174 
          </form>
175 
        </div>
176 
      </div>
177 
    </section>
9469 stevensc 178 
  )
179 
}
180 
export default FormView