- Timestamp:
- 06/09/24 14:24:03 (2 weeks ago)
- Branches:
- main
- Children:
- b248810
- Parents:
- 19398ad
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js
r19398ad r28b3398 1 1 import React, {useState} from "react"; 2 2 import "./Form.css"; 3 4 import { Editor } from 'primereact/editor'; 3 5 4 6 import 'react-responsive-modal/styles.css'; … … 19 21 export const AddJobAdModal = () => { 20 22 const [modal, setModal] = useState(false); 23 const [text, setText] = useState(""); 21 24 const dispatch = useDispatch(); 22 25 const auth = useSelector(state => state.auth.currentUser) … … 52 55 employmentStatus: values.employmentStatus.value, 53 56 }, (success, response) => { 54 if (success) {57 if (success) { 55 58 console.log("Job Advertisement added") 56 59 toggleModal() … … 66 69 67 70 return (<div className="modal-wrap"> 68 <button onClick={toggleModal} className="btn-open-modal">POST ADVERTISEMENT</button> 69 <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal"> 70 <div className="head-modal"> 71 <h3>Post Job Advertisement</h3> 72 <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i> 73 </div> 71 <div className="col"> 72 <button onClick={toggleModal} className="add-new-card"> 73 <h3>+ Post Advertisement</h3> 74 </button> 75 </div> 76 {/*<button onClick={toggleModal} className="btn-open-modal">POST ADVERTISEMENT</button>*/} 77 <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal"> 78 <div className="head-modal"> 79 <h3>Post Job Advertisement</h3> 80 <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i> 81 </div> 74 82 75 76 77 78 83 <div className="modal-content"> 84 <form onSubmit={handleSubmit(addJobAdvertisement)}> 85 <div className="row"> 86 <div className="col-md-7"> 79 87 80 81 82 88 <label className="label">Job title:</label> 89 <input type="text" {...register("title")}/> 90 <p style={{color: "red"}}>{errors.title?.message}</p> 83 91 84 <label className="label">Job description:</label> 85 <textarea type="text" placeholder="Describe the job position and all the requirements" 86 className="description-textarea" {...register("description")}/> 87 <p style={{color: "red"}}>{errors.description?.message}</p> 88 </div> 89 90 <div className="col-md-5"> 91 <label className="label">Hourly rate:</label> 92 <input {...register("startingSalary")}/> 93 <p style={{color: "red"}}>{errors.startingSalary?.message}</p> 94 95 <label className="label">Industry:</label> 96 <Controller 97 name="industry" 98 control={control} 99 render={({ field }) => (<Select 100 {...field} 101 options={industryOptions} 102 />)} 103 /> 104 <p style={{color: "red"}}>{errors.industry?.message}</p> 105 106 <label className="label">Job type:</label> 107 <Controller 108 name="jobType" 109 control={control} 110 render={({ field }) => (<Select 111 {...field} 112 options={jobTypeOptions} 113 />)} 114 /> 115 <p style={{color: "red"}}>{errors.jobType?.message}</p> 116 117 <label className="label">Employment status</label> 118 <Controller 119 name="employmentStatus" 120 control={control} 121 render={({ field }) => (<Select 122 {...field} 123 options={employmentStatusOptions} 124 />)} 125 /> 126 <p style={{color: "red"}}>{errors.employmentStatus?.message}</p> 127 128 <label htmlFor="start">Active until:</label> 129 <input type="date" defaultValue={minimumDate.toLocaleDateString('en-CA')} 130 min={minimumDate.toLocaleDateString('en-CA')} onChange={(event) => console.log(event.target.value)} 131 {...register("date")}/> 92 <label className="label">Job description:</label> 93 {/*<textarea type="text" placeholder="Describe the job position and all the requirements"*/} 94 {/* className="description-textarea" {...register("description")}/>*/} 132 95 133 96 134 </div> 97 <Controller 98 name="description" 99 control={control} 100 render={({ field }) => ( 101 <Editor 102 value={field.value} 103 onTextChange={(e) => field.onChange(e.htmlValue)} 104 style={{ height: '300px', fontSize: "16px", fontFamily: "Segoe UI" }} 105 /> 106 )} 107 /> 108 <p style={{color: "red"}}>{errors.description?.message}</p> 135 109 </div> 136 110 137 <div className="aligned"> 138 <button className="submit-btn"> Submit</button> 111 <div className="col-md-5"> 112 <label className="label">Hourly rate:</label> 113 <input {...register("startingSalary")}/> 114 <p style={{color: "red"}}>{errors.startingSalary?.message}</p> 115 116 <label className="label">Industry:</label> 117 <Controller 118 name="industry" 119 control={control} 120 render={({field}) => (<Select 121 {...field} 122 options={industryOptions} 123 />)} 124 /> 125 <p style={{color: "red"}}>{errors.industry?.message}</p> 126 127 <label className="label">Job type:</label> 128 <Controller 129 name="jobType" 130 control={control} 131 render={({field}) => (<Select 132 {...field} 133 options={jobTypeOptions} 134 />)} 135 /> 136 <p style={{color: "red"}}>{errors.jobType?.message}</p> 137 138 <label className="label">Employment status</label> 139 <Controller 140 name="employmentStatus" 141 control={control} 142 render={({field}) => (<Select 143 {...field} 144 options={employmentStatusOptions} 145 />)} 146 /> 147 <p style={{color: "red"}}>{errors.employmentStatus?.message}</p> 148 149 <label htmlFor="start">Active until:</label> 150 <input type="date" defaultValue={minimumDate.toLocaleDateString('en-CA')} 151 min={minimumDate.toLocaleDateString('en-CA')} 152 onChange={(event) => console.log(event.target.value)} 153 {...register("date")}/> 154 155 139 156 </div> 157 </div> 140 158 141 </form> 142 </div> 143 </Modal> 144 </div>) 159 <div className="aligned"> 160 <button className="submit-btn"> Submit</button> 161 </div> 162 163 </form> 164 </div> 165 </Modal> 166 </div>) 145 167 }
Note:
See TracChangeset
for help on using the changeset viewer.
