-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Replaced number buttons with a number type input. Reworked submission…
… to backend
- Loading branch information
Showing
4 changed files
with
25 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,25 @@ | ||
| import React, {useState} from 'react'; | ||
| import React, { useState } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| function ViolationModal({closeModal, vendorId, vendorName, handleSubmit}) { // added vendor object so we can send message to vendor | ||
| const [activeButtons, setButtons] = useState([]); | ||
| const [violationData, setViolationData] = useState({type: '', description: '', vendor_id: vendorId}); | ||
| import Modal from './Modal'; | ||
| import Violation from '../objects/Violation'; | ||
|
|
||
| export default function ViolationModal({ closeModal, vendorId, vendorName, handleSubmit }) { // added vendor object so we can send message to vendor | ||
| const [violationData, setViolationData] = useState(new Violation(-1, -1, '', vendorId)); | ||
|
|
||
| // ask if theres a way to disable the header button when the modal opens | ||
|
|
||
| // const handleSubmit = () => { | ||
| // console.log(`Posting message(${message}) to ${vendor.name}`); | ||
| // console.log('... As long as someone finishes my code'); | ||
| // if (activeButtons.length == 0) { | ||
| // alert('Must select a violated policy to submit!'); | ||
| // return; | ||
| // } | ||
| // setViolations(); | ||
| // closeModal(false); | ||
| // }; | ||
|
|
||
| const handleButtonClick = (content) => { | ||
| // idea: | ||
| // search through active button list | ||
| // if button already present, set the buttons to be all those except that button | ||
| // otherwise, add button to list | ||
| if (activeButtons.includes(content)) { // to remove button that was added | ||
| setButtons(activeButtons.filter((value) => value !== content)); | ||
| return; | ||
| } else if (activeButtons.length == 1) { // only add one button at a time | ||
| return; | ||
| } | ||
| setButtons([...activeButtons, content]); // add button | ||
| setViolationData({...violationData, type: content}); | ||
| }; | ||
| // changed the code a little bit, easier to use react state and functions than form | ||
| return ( | ||
| <form action="" className="absolute inset-y-12 inset-x-1/6 mt-auto bg-white drop-shadow-xl rounded-md w-4/6 h-max overflow-y-auto" onSubmit={() => handleSubmit(violationData)}> | ||
| <h2 className="w-full text-center bg-blue rounded-md h-8 mb-4 text-white">Add Violations To: {vendorName}</h2> | ||
| <textarea type='text' id="description" name="description" value={violationData.description} className="w-11/12 min-h-[1/5] px-2 pt-1 ml-3 mb-0 rounded-lg border border-2 border-blue placeholder:text-blue placeholder:italic" onChange={(e) => setViolationData({...violationData, description: e.target.value})} placeholder="Enter Message Here ..."></textarea> | ||
| <h2 className="text-center text-blue">Select Violated Policies</h2> | ||
| <div className="grid grid-cols-3 gap-x-0 gap-y-1 mb-1"> | ||
| <PolicyButton onClick={() => handleButtonClick(1)} content={1} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(2)} content={2} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(3)} content={3} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(4)} content={4} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(5)} content={5} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(6)} content={6} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(7)} content={7} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(8)} content={8} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(9)} content={9} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(10)} content={10} activebuttons={activeButtons}/> | ||
| <PolicyButton onClick={() => handleButtonClick(11)} content={11} activebuttons={activeButtons}/> | ||
| </div> | ||
| return <Modal blurOnClick={() => closeModal(false)} backgroundColor={`bg-greywhite w-4/5 h-[65vh] overflow-x-clip`}> | ||
| <form action="" className="flex flex-col gap-4 h-full w-full items-center" onSubmit={() => handleSubmit(violationData)}> | ||
| <h2 className="text-2xl text-center text-black font-bold">{vendorName}</h2> | ||
| <h2 className="text-center text-sm text-slate-400">Fill out the form once for each violation - do not try to submit multiple violations in one form.</h2> | ||
| <p>Policy Number</p> | ||
| <input id='policynum' className={`drop-shadow-xl rounded-lg border-2 border-blue text-center`} placeholder={1} type='number' max={11} min={1} onChange={e => setViolationData({...violationData, type: e.target.value})}/> | ||
| <p>Violation Description</p> | ||
| <textarea type='text' id="description" name="description" value={violationData.description} className="w-5/6 h-40 px-2 py-2 pt-1 rounded-lg border-2 border-blue placeholder:italic" onChange={(e) => setViolationData({ ...violationData, description: e.target.value })} placeholder="Violation description..."></textarea> | ||
| <footer className='flex flex-row justify-center mt-6 pb-2'> | ||
| <button type="submit" className={`py-2 px-3 mb-1 mr-2 text-white drop-shadow-xl rounded-lg ${activeButtons.length == 0 ? 'hidden' : 'bg-blue'}`}>Submit</button> | ||
| <button type="submit" className={`py-2 px-3 mb-1 mr-2 text-white drop-shadow-xl rounded-lg bg-blue`}>Submit</button> | ||
| <button className="bg-red py-2 px-3 mb-1 text-white drop-shadow-xl rounded-lg" onClick={() => closeModal(false)}>Cancel</button> | ||
| </footer> | ||
| </form> | ||
| ); | ||
| } | ||
|
|
||
| function PolicyButton({activebuttons, content, onClick}) { | ||
| return ( | ||
| <button type='button' value={content} name="policy" id="policy" className={`${activebuttons.includes(content) ? 'bg-red' : 'bg-blue'} text-white m-1 p-2 rounded-lg drop-shadow_xl`} onClick={onClick}> {content}</button> // used Harley's VendorButtons as inspo | ||
| ); | ||
| } | ||
|
|
||
| export default ViolationModal; | ||
|
|
||
| ViolationModal.propTypes = { | ||
| closeModal: PropTypes.func.isRequired, | ||
| vendorId: PropTypes.number.isRequired, | ||
| vendorName: PropTypes.string.isRequired, | ||
| handleSubmit: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| PolicyButton.propTypes = { | ||
| content: PropTypes.number.isRequired, | ||
| onClick: PropTypes.func.isRequired, | ||
| activebuttons: PropTypes.array.isRequired, | ||
| }; | ||
| </Modal> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters