Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 10115 | Rev 11156 | 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'
9839 stevensc 10 
import { addNotification } from '../../../redux/notification/notification.actions'
11 
import { useDispatch } from 'react-redux'
9469 stevensc 12 
 
9779 stevensc 13 
const FormView = ({ actionLink, googleApiKey }) => {
9759 stevensc 14 
 
9812 stevensc 15 
  const history = useHistory()
9839 stevensc 16 
  const { action } = useParams()
17 
  const dispatch = useDispatch()
9812 stevensc 18 
 
9839 stevensc 19 
 
9874 stevensc 20 
  const { handleSubmit, register, setValue, errors, watch } = useForm()
9802 stevensc 21 
 
9832 stevensc 22 
  const [inputErrors, setInputErrors] = useState({})
9779 stevensc 23 
  const [location, setLocation] = useState({})
9802 stevensc 24 
  const [isActive, setIsActive] = useState(false)
9833 stevensc 25 
  const [year, setYear] = useState('')
9779 stevensc 26 
  const [locationLabel, setLocationLabel] = useState('')
27 
  const [jobsDescriptions, setJobsDescriptions] = useState([
28 
    {
29 
      value: "8ff86a9a-651c-4dd0-86c1-b9c0716d09e0",
30 
      label: "Programador Junior"
31 
    }
32 
  ])
33 
  const [jobsCategory, setJobsCategory] = useState([
34 
    {
35 
      value: "7bd009b8-bd25-4602-bf85-9496af80afbd",
36 
      label: "Finanzas"
37 
    }
38 
  ])
39 
  const [industry, setIndustry] = useState([
40 
    {
41 
      value: "307c261f-2d27-4b3c-a86a-6f69a596edb8",
42 
      label: "Bienes raíces"
43 
    }
44 
  ])
9759 stevensc 45 
 
9779 stevensc 46 
 
9759 stevensc 47 
  const onSubmit = (data) => {
9838 stevensc 48 
 
49 
    const formData = new FormData()
9831 stevensc 50 
    const submitData = {
51 
      ...data,
52 
      ...location,
53 
      last_date: year,
54 
      status: isActive ? "a" : "i"
55 
    }
56 
 
9837 stevensc 57 
    if (!location.formatted_address) {
9838 stevensc 58 
      return setInputErrors(prev => ({ ...prev, location: "Es requerida una ubicación" }))
9837 stevensc 59 
    }
60 
    if (!year) {
9838 stevensc 61 
      return setInputErrors(prev => ({ ...prev, year: "Este campo es requerido" }))
9837 stevensc 62 
    }
9833 stevensc 63 
 
9838 stevensc 64 
    Object.entries(submitData).forEach((entries) => {
65 
      formData.append(entries[0], entries[1])
66 
    })
67 
 
68 
    axios.post(actionLink, formData)
69 
      .then(({ data }) => {
70 
        if (!data.success) {
71 
          dispatch(addNotification({
72 
            style: "error",
73 
            msg: "Ha ocurrido un error"
74 
          }))
75 
          return
76 
        }
9842 stevensc 77 
        history.goBack()
9838 stevensc 78 
        dispatch(addNotification({
79 
          style: "success",
80 
          msg: `Registro ${action === "edit" ? "actualizado" : "guardado"}`
81 
        }))
82 
      })
9839 stevensc 83 
      .catch((err) => dispatch(addNotification({
84 
        style: "error",
85 
        msg: "Ha ocurrido un error"
86 
      })))
9838 stevensc 87 
 
9759 stevensc 88 
  }
9802 stevensc 89 
 
9831 stevensc 90 
  useEffect(() => register("description"), [])
91 
 
9812 stevensc 92 
  useEffect(() => {
9814 stevensc 93 
    if (action === "edit") {
94 
      axios.get(actionLink)
9869 stevensc 95 
        .then(({ data }) => {
10114 stevensc 96 
          const respData = data.data
97 
 
9869 stevensc 98 
          if (data.success) {
10114 stevensc 99 
            setValue("name", respData.name)
100 
            setValue("description", respData.description)
101 
            setLocationLabel(respData.formatted_address)
102 
            setYear(respData.last_date)
103 
            respData.status === "a" ? setIsActive(true) : setIsActive(false)
104 
 
10254 stevensc 105 
            Object.entries(respData.job_category.category_options).map(([value, label]) => {
10114 stevensc 106 
              setJobsCategory(prev => [...prev, { value: value, label: label }])
107 
            })
10254 stevensc 108 
 
109 
            Object.entries(respData.industry.industry_options).map(([value, label]) => {
110 
              setIndustry(prev => [...prev, { value: value, label: label }])
111 
            })
112 
 
113 
            Object.entries(respData.job_description.description_options).map(([value, label]) => {
114 
              setJobsDescriptions(prev => [...prev, { value: value, label: label }])
115 
            })
116 
 
9869 stevensc 117 
          }
118 
        })
9814 stevensc 119 
    }
120 
  }, [action])
9812 stevensc 121 
 
9469 stevensc 122 
  return (
9759 stevensc 123 
    <section className="container">
124 
      <div className="row">
125 
        <div className="col-xs-12 col-md-12">
126 
          <form onSubmit={handleSubmit(onSubmit)}>
127 
            <div className="form-group">
128 
              <label>Nombre</label>
129 
              <input
130 
                type="text"
131 
                name="name"
132 
                className="form-control"
9761 stevensc 133 
                ref={register({ required: true, maxLength: 120 })}
9759 stevensc 134 
              />
9837 stevensc 135 
              {errors.name && <p>Este campo es requerido</p>}
9759 stevensc 136 
            </div>
9779 stevensc 137 
            <div className="form-group">
138 
              <label>Cargo a evaluar</label>
10115 stevensc 139 
              <select name="job_description_id" className="form-control" ref={register({ required: true })}>
9779 stevensc 140 
                {
141 
                  jobsDescriptions.map(({ label, value }) => (
142 
                    <option value={value}>{label}</option>
143 
                  ))
144 
                }
145 
              </select>
146 
            </div>
147 
            <div className="form-group">
148 
              <label>Categoría de Empleo</label>
10115 stevensc 149 
              <select name="job_category_id" className="form-control" ref={register({ required: true })}>
9779 stevensc 150 
                {
151 
                  jobsCategory.map(({ label, value }) => (
152 
                    <option value={value}>{label}</option>
153 
                  ))
154 
                }
155 
              </select>
156 
            </div>
157 
            <div className="form-group">
158 
              <label>Ubicación</label>
9791 stevensc 159 
              <SearchLocationInput
9779 stevensc 160 
                value={locationLabel}
161 
                setValue={setLocationLabel}
162 
                googleApiKey={googleApiKey}
163 
                updateData={setLocation}
164 
              />
9838 stevensc 165 
              {inputErrors.location && <p>{inputErrors.location}</p>}
9779 stevensc 166 
            </div>
167 
            <div className="form-group">
168 
              <label>Industria</label>
10115 stevensc 169 
              <select name="industry_id" className="form-control" ref={register({ required: true })}>
9779 stevensc 170 
                {
171 
                  industry.map(({ label, value }) => (
172 
                    <option value={value}>{label}</option>
173 
                  ))
174 
                }
175 
              </select>
176 
            </div>
177 
            <div className="form-group">
178 
              <label>Último día de aplicación</label>
9791 stevensc 179 
              <Datetime
180 
                dateFormat="DD-MM-YYYY"
181 
                timeFormat={false}
9873 stevensc 182 
                initialValue={action === "edit" ? Date.UTC(year) : Date.now()}
9791 stevensc 183 
                onChange={(e) =>
184 
                  setYear(new Intl.DateTimeFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
185 
                }
186 
                inputProps={{ className: 'form-control' }}
187 
                closeOnSelect
188 
              />
9838 stevensc 189 
              {inputErrors.year && <p>{inputErrors.year}</p>}
9779 stevensc 190 
            </div>
9802 stevensc 191 
            <div className="form-group">
192 
              <label>Descripción</label>
193 
              <DescriptionInput
194 
                setValue={setValue}
195 
                name="description"
9873 stevensc 196 
                defaultValue={action === "edit" ? watch("description") : ''}
9802 stevensc 197 
              />
198 
            </div>
199 
            <div className="form-group">
200 
              <label>Estatus</label>
201 
              <div
202 
                className={`toggle btn btn-block btn-primary ${!isActive && "off"}`}
203 
                data-toggle="toggle"
204 
                role="button"
205 
                style={{ width: '130px' }}
206 
                onClick={() => setIsActive(!isActive)}
207 
              >
208 
                <input
209 
                  type="checkbox"
210 
                  checked={isActive}
211 
                />
212 
                <div className="toggle-group">
213 
                  <label for="status" className="btn btn-primary toggle-on">Activo</label>
214 
                  <label for="status" className="btn btn-light toggle-off">Inactivo</label>
215 
                  <span className="toggle-handle btn btn-light"></span>
216 
                </div>
217 
              </div>
218 
            </div>
219 
            <div className="form-group">
220 
              <button
221 
                type="submit"
9832 stevensc 222 
                className="btn btn-primary btn-form-save-close mr-2"
9802 stevensc 223 
              >
224 
                Guardar
225 
              </button>
226 
              <button
227 
                type="button"
228 
                className="btn btn-secondary btn-edit-cancel"
9812 stevensc 229 
                onClick={() => history.goBack()}
9802 stevensc 230 
              >
231 
                Cancelar
232 
              </button>
233 
            </div>
9759 stevensc 234 
          </form>
235 
        </div>
236 
      </div>
237 
    </section>
9469 stevensc 238 
  )
239 
}
240 
export default FormView