I, as a user just bought a new piece of equipment for the company now I need to add it to the equipment fleet. This form will do just that it will allow the user to add equipment to the All Equipment list. The form will also be what your user sees when they go and click on the edit button on an equipment card.
Acceptance Criteria
Wireframe of the Equipment form.
The form will have everything on the red other than attachments and mechanic ID information
This form will Populate when clicking add equipment 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.
Dev Notes
Example of form from hackathon.
This will similar to what it will look like, but try and venture out and look at different layouts.
import React, { useState, useEffect } 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 { getTags } from '../../api/tagData';
import { createArt, updateArt } from '../../api/artData';
User Story
I, as a user just bought a new piece of equipment for the company now I need to add it to the equipment fleet. This form will do just that it will allow the user to add equipment to the All Equipment list. The form will also be what your user sees when they go and click on the edit button on an equipment card.
Acceptance Criteria
Wireframe of the Equipment form.
The form will have everything on the red other than attachments and mechanic ID information
This form will Populate when clicking add equipment 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.
Dev Notes
Example of form from hackathon. This will similar to what it will look like, but try and venture out and look at different layouts.
import React, { useState, useEffect } 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 { getTags } from '../../api/tagData'; import { createArt, updateArt } from '../../api/artData';
const initialState = { imageUrl: '', title: '', description: '', tagIds: [], };
function ArtForm({ obj }) { const [formInput, setFormInput] = useState(initialState); const [tags, setTags] = useState([]); const router = useRouter(); const { user } = useAuth();
useEffect(() => { getTags(user.uid).then(setTags); if (obj.id) { setFormInput({ ...obj, tagIds: obj.artworkTags.map((tag) => tag.tag.id) }); } }, [obj, user]);
const handleChange = (e) => { const { name, type, checked, value, } = e.target; if (type === 'checkbox') { const currentTagIds = [...formInput.tagIds]; const tagId = parseInt(e.target.value, 10); // Assuming value attribute holds tag id if (checked) { currentTagIds.push(tagId); } else { const index = currentTagIds.indexOf(tagId); currentTagIds.splice(index, 1); } setFormInput((prevState) => ({ ...prevState, tagIds: currentTagIds, })); } else { // Handle other input types (text, url, etc.) setFormInput((prevState) => ({ ...prevState,
};
const handleSubmit = (e) => { e.preventDefault(); if (obj.id) { updateArt(formInput).then(() => router.push('/')); } else { const payload = { ...formInput, uid: user.uid }; createArt(payload).then((title) => { const patchPayload = { id: title }; updateArt(patchPayload).then(() => { router.push('/'); }); }); } };
return (
); }
ArtForm.propTypes = { obj: PropTypes.shape({ imageUrl: PropTypes.string, title: PropTypes.string, description: PropTypes.string, tags: PropTypes.string, tagsIds: PropTypes.arrayOf(PropTypes.number), id: PropTypes.number, artworkTags: PropTypes.arrayOf, }), };
ArtForm.defaultProps = { obj: initialState, };
export default ArtForm;