I, as a user just won the latest bid on a job site, and now I need to add it to the company job list.
This form will allow the user to add a new job to the job site page. There will be a view edit and delete button at the bottom of each card.
Acceptance Criteria
Wireframe of the Job Site form.
The form will have everything on the ERD
This form will Populate when clicking add Job SIte on the navbar and when you select edit on a single card.
Dependecies
All testing data should be created and tested in Postman. (this will be helpful when testing the functionality).
All API calls should be written at this point other than postman.
28
Dev Notes
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import PropTypes from 'prop-types';
import FloatingLabel from 'react-bootstrap/FloatingLabel';
import Form from 'react-bootstrap/Form';
import { Button } from 'react-bootstrap';
import { useAuth } from '../../utils/context/authContext';
import { getAllJobSites } from '../../api/jobsiteData';
import { createEquipment, updateEquipment } from '../../api/equipData';
User Story
I, as a user just won the latest bid on a job site, and now I need to add it to the company job list. This form will allow the user to add a new job to the job site page. There will be a view edit and delete button at the bottom of each card.
Acceptance Criteria
Wireframe of the Job Site form.
The form will have everything on the ERD
This form will Populate when clicking add Job SIte on the navbar and when you select edit on a single card.
Dependecies
All testing data should be created and tested in Postman. (this will be helpful when testing the functionality). All API calls should be written at this point other than postman.
28
Dev Notes
import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; import PropTypes from 'prop-types'; import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form'; import { Button } from 'react-bootstrap'; import { useAuth } from '../../utils/context/authContext'; import { getAllJobSites } from '../../api/jobsiteData'; import { createEquipment, updateEquipment } from '../../api/equipData';
const initialState = { image: '', name: '', size: '', jobsite: '', operable: false, };
function EquipmentForm({ obj }) { const [formInput, setFormInput] = useState(initialState); const [jobsites, setJobSites] = useState([]); const router = useRouter(); const { user } = useAuth();
useEffect(() => { getAllJobSites(user.uid).then(setJobSites);
}, [obj, user]);
const handleChange = (e) => { const { name, value } = e.target; setFormInput((prevState) => ({ ...prevState,
};
const handleSubmit = (e) => { e.preventDefault(); if (obj.firebaseKey) { updateEquipment(formInput).then(() => router.push('/equipment ')); } else { const payload = { ...formInput, uid: user.uid }; createEquipment(payload).then(({ name }) => { const patchPayload = { firebaseKey: name }; updateEquipment(patchPayload).then(() => { router.push('/equipment/'); }); }); } };
return (
); }
EquipmentForm.propTypes = { obj: PropTypes.shape({ image: PropTypes.string, name: PropTypes.string, size: PropTypes.string, jobsite: PropTypes.string, operable: PropTypes.bool, jobsite_id: PropTypes.string, firebaseKey: PropTypes.string, }), };
EquipmentForm.defaultProps = { obj: initialState, };
export default EquipmentForm;