-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from DaleMcGrew/Dale_WC_Dec14-2024
Add Team working now. AddPerson working. addPersonToTeam is still work in progress.
- Loading branch information
Showing
17 changed files
with
986 additions
and
79 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
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
19 changes: 19 additions & 0 deletions
19
src/js/common/utils/prepareDataPackageFromAppObservableStore.js
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 |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import AppObservableStore from '../../stores/AppObservableStore'; | ||
|
|
||
| export default function prepareDataPackageFromAppObservableStore (acceptedVariables) { | ||
| // Extract data from AppObservableStore and put into data object, with Changed variable, to be sent to server | ||
| const data = {}; | ||
| for (let i = 0; i < acceptedVariables.length; i++) { | ||
| // Ex/ emailPersonalToBeSaved and emailPersonalChanged | ||
| // console.log(`prepareData: ${acceptedVariables[i]}ToBeSaved:`, AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}ToBeSaved`)); | ||
| if (AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}ToBeSaved`) && | ||
| AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}Changed`)) { | ||
| // If the value has changed, add it to the data dictionary | ||
| if (AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}Changed`) === true) { | ||
| data[`${acceptedVariables[i]}Changed`] = true; | ||
| data[`${acceptedVariables[i]}ToBeSaved`] = AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}ToBeSaved`); | ||
| } | ||
| } | ||
| } | ||
| return data; | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,173 @@ | ||
| import { Button, FormControl, TextField } from '@mui/material'; | ||
| import { withStyles } from '@mui/styles'; | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import PropTypes from 'prop-types'; | ||
| import AppObservableStore, { messageService } from '../../stores/AppObservableStore'; | ||
| import PersonActions from '../../actions/PersonActions'; | ||
| import PersonStore from '../../stores/PersonStore'; | ||
| import { renderLog } from '../../common/utils/logging'; | ||
| import prepareDataPackageFromAppObservableStore from '../../common/utils/prepareDataPackageFromAppObservableStore'; | ||
|
|
||
|
|
||
| const AddPersonForm = ({ classes }) => { // classes, teamId | ||
| renderLog('AddPersonForm'); // Set LOG_RENDER_EVENTS to log all renders | ||
| const [emailPersonal, setEmailPersonal] = React.useState(''); | ||
| const [firstName, setFirstName] = React.useState(''); | ||
| const [lastName, setLastName] = React.useState(''); | ||
| const [teamId, setTeamId] = React.useState(-1); | ||
|
|
||
| const onAppObservableStoreChange = () => { | ||
| setTeamId(AppObservableStore.getGlobalVariableState('addPersonDrawerTeamId')); | ||
| }; | ||
|
|
||
| const saveNewPersonSuccessful = () => { | ||
| AppObservableStore.setGlobalVariableState('addPersonDrawerOpen', false); | ||
| AppObservableStore.setGlobalVariableState('addPersonDrawerTeamId', -1); | ||
| AppObservableStore.setGlobalVariableState('emailPersonalChanged', false); | ||
| AppObservableStore.setGlobalVariableState('emailPersonalToBeSaved', ''); | ||
| AppObservableStore.setGlobalVariableState('firstNameChanged', false); | ||
| AppObservableStore.setGlobalVariableState('firstNameToBeSaved', ''); | ||
| AppObservableStore.setGlobalVariableState('lastNameChanged', false); | ||
| AppObservableStore.setGlobalVariableState('lastNameToBeSaved', ''); | ||
| }; | ||
|
|
||
| const onPersonStoreChange = () => { | ||
| const mostRecentPersonChanged = PersonStore.getMostRecentPersonChanged(); | ||
| // console.log('AddPersonForm onPersonStoreChange mostRecentPersonChanged:', mostRecentPersonChanged); | ||
| // TODO: Figure out why firstName, lastName, and emailPersonal are not being updated | ||
| // console.log('firstName:', firstName, ', lastName:', lastName, ', emailPersonal:', emailPersonal); | ||
| // console.log('emailPersonalToBeSaved:', AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved')); | ||
| if (mostRecentPersonChanged.emailPersonal === AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved')) { | ||
| saveNewPersonSuccessful(); | ||
| } | ||
| }; | ||
|
|
||
| const saveNewPerson = () => { | ||
| const acceptedVariables = ['emailPersonal', 'firstName', 'lastName']; | ||
| const data = prepareDataPackageFromAppObservableStore(acceptedVariables); | ||
| // console.log('saveNewPerson data:', data); | ||
| PersonActions.personSave('-1', data); | ||
| }; | ||
|
|
||
| const updateEmailPersonal = (event) => { | ||
| if (event.target.name === 'emailPersonalToBeSaved') { | ||
| const newEmailPersonal = event.target.value; | ||
| AppObservableStore.setGlobalVariableState('emailPersonalChanged', true); | ||
| AppObservableStore.setGlobalVariableState('emailPersonalToBeSaved', newEmailPersonal); | ||
| console.log('updateEmailPersonal:', newEmailPersonal); | ||
| setEmailPersonal(newEmailPersonal); | ||
| } | ||
| }; | ||
|
|
||
| const updateFirstName = (event) => { | ||
| if (event.target.name === 'firstNameToBeSaved') { | ||
| const newFirstName = event.target.value; | ||
| AppObservableStore.setGlobalVariableState('firstNameChanged', true); | ||
| AppObservableStore.setGlobalVariableState('firstNameToBeSaved', newFirstName); | ||
| console.log('updateFirstName:', newFirstName); | ||
| setFirstName(newFirstName); | ||
| } | ||
| }; | ||
|
|
||
| const updateLastName = (event) => { | ||
| if (event.target.name === 'lastNameToBeSaved') { | ||
| const newLastName = event.target.value; | ||
| AppObservableStore.setGlobalVariableState('lastNameChanged', true); | ||
| AppObservableStore.setGlobalVariableState('lastNameToBeSaved', newLastName); | ||
| console.log('updateLastName:', newLastName); | ||
| setLastName(newLastName); | ||
| } | ||
| }; | ||
|
|
||
| React.useEffect(() => { | ||
| const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange()); | ||
| onAppObservableStoreChange(); | ||
| const personStoreListener = PersonStore.addListener(onPersonStoreChange); | ||
| onPersonStoreChange(); | ||
| // console.log('Initial load emailPersonalToBeSaved:', AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved')); | ||
| if (AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved')) { | ||
| setEmailPersonal(AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved')); | ||
| } | ||
| if (AppObservableStore.getGlobalVariableState('firstNameToBeSaved')) { | ||
| setFirstName(AppObservableStore.getGlobalVariableState('firstNameToBeSaved')); | ||
| } | ||
| if (AppObservableStore.getGlobalVariableState('lastNameToBeSaved')) { | ||
| setLastName(AppObservableStore.getGlobalVariableState('lastNameToBeSaved')); | ||
| } | ||
|
|
||
| return () => { | ||
| appStateSubscription.unsubscribe(); | ||
| personStoreListener.remove(); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <AddPersonFormWrapper> | ||
| <FormControl classes={{ root: classes.formControl }}> | ||
| <TextField | ||
| // classes={{ root: classes.textField }} // Not working yet | ||
| id="firstNameToBeSaved" | ||
| label="First Name" | ||
| name="firstNameToBeSaved" | ||
| margin="dense" | ||
| variant="outlined" | ||
| placeholder="First Name" | ||
| value={firstName} | ||
| onChange={updateFirstName} | ||
| /> | ||
| <TextField | ||
| // classes={{ root: classes.textField }} // Not working yet | ||
| id="lastNameToBeSaved" | ||
| label="Last Name" | ||
| name="lastNameToBeSaved" | ||
| margin="dense" | ||
| variant="outlined" | ||
| placeholder="Last Name" | ||
| value={lastName} | ||
| onChange={updateLastName} | ||
| /> | ||
| <TextField | ||
| // classes={{ root: classes.textField }} // Not working yet | ||
| id="emailPersonalToBeSaved" | ||
| label="Email Address, Personal" | ||
| name="emailPersonalToBeSaved" | ||
| margin="dense" | ||
| variant="outlined" | ||
| placeholder="Email Address, Personal" | ||
| value={emailPersonal} | ||
| onBlur={updateEmailPersonal} | ||
| onChange={updateEmailPersonal} | ||
| /> | ||
| <Button | ||
| classes={{ root: classes.saveNewPersonButton }} | ||
| color="primary" | ||
| variant="contained" | ||
| onClick={saveNewPerson} | ||
| > | ||
| Save New Person | ||
| </Button> | ||
| </FormControl> | ||
| </AddPersonFormWrapper> | ||
| ); | ||
| }; | ||
| AddPersonForm.propTypes = { | ||
| classes: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| const styles = (theme) => ({ | ||
| formControl: { | ||
| width: '100%', | ||
| }, | ||
| saveNewPersonButton: { | ||
| width: 300, | ||
| [theme.breakpoints.down('md')]: { | ||
| width: '100%', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const AddPersonFormWrapper = styled('div')` | ||
| `; | ||
|
|
||
| export default withStyles(styles)(AddPersonForm); |
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 |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import { Button, FormControl, TextField } from '@mui/material'; | ||
| import { withStyles } from '@mui/styles'; | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import PropTypes from 'prop-types'; | ||
| import AppObservableStore, { messageService } from '../../stores/AppObservableStore'; | ||
| import TeamActions from '../../actions/TeamActions'; | ||
| import TeamStore from '../../stores/TeamStore'; | ||
| import { renderLog } from '../../common/utils/logging'; | ||
| import prepareDataPackageFromAppObservableStore from '../../common/utils/prepareDataPackageFromAppObservableStore'; | ||
|
|
||
|
|
||
| const AddTeamForm = ({ classes }) => { // classes, teamId | ||
| renderLog('AddTeamForm'); // Set LOG_RENDER_EVENTS to log all renders | ||
| const [teamName, setTeamName] = React.useState(''); | ||
|
|
||
| const onAppObservableStoreChange = () => { | ||
| }; | ||
|
|
||
| const saveNewTeamSuccessful = () => { | ||
| AppObservableStore.setGlobalVariableState('addTeamDrawerOpen', false); | ||
| AppObservableStore.setGlobalVariableState('teamNameChanged', false); | ||
| AppObservableStore.setGlobalVariableState('teamNameToBeSaved', ''); | ||
| }; | ||
|
|
||
| const onTeamStoreChange = () => { | ||
| const mostRecentTeamChanged = TeamStore.getMostRecentTeamChanged(); | ||
| console.log('AddTeamForm onTeamStoreChange mostRecentTeamChanged:', mostRecentTeamChanged); | ||
| // TODO: Figure out why teamName is not being updated locally | ||
| // console.log('teamName:', teamName); | ||
| if (mostRecentTeamChanged.teamName === AppObservableStore.getGlobalVariableState('teamNameToBeSaved')) { | ||
| saveNewTeamSuccessful(); | ||
| } | ||
| }; | ||
|
|
||
| const saveNewTeam = () => { | ||
| const acceptedVariables = ['teamName']; | ||
| const data = prepareDataPackageFromAppObservableStore(acceptedVariables); | ||
| // console.log('saveNewTeam data:', data); | ||
| TeamActions.teamSave('-1', data); | ||
| }; | ||
|
|
||
| const updateTeamName = (event) => { | ||
| if (event.target.name === 'teamNameToBeSaved') { | ||
| const newTeamName = event.target.value; | ||
| AppObservableStore.setGlobalVariableState('teamNameChanged', true); | ||
| AppObservableStore.setGlobalVariableState('teamNameToBeSaved', newTeamName); | ||
| // console.log('updateTeamName:', newTeamName); | ||
| setTeamName(newTeamName); | ||
| } | ||
| }; | ||
|
|
||
| React.useEffect(() => { | ||
| const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange()); | ||
| onAppObservableStoreChange(); | ||
| const teamStoreListener = TeamStore.addListener(onTeamStoreChange); | ||
| onTeamStoreChange(); | ||
| if (AppObservableStore.getGlobalVariableState('teamNameToBeSaved')) { | ||
| setTeamName(AppObservableStore.getGlobalVariableState('teamNameToBeSaved')); | ||
| } | ||
|
|
||
| return () => { | ||
| appStateSubscription.unsubscribe(); | ||
| teamStoreListener.remove(); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <AddTeamFormWrapper> | ||
| <FormControl classes={{ root: classes.formControl }}> | ||
| <TextField | ||
| // classes={{ root: classes.textField }} // Not working yet | ||
| id="teamNameToBeSaved" | ||
| label="Team Name" | ||
| name="teamNameToBeSaved" | ||
| margin="dense" | ||
| variant="outlined" | ||
| placeholder="Team Name" | ||
| value={teamName} | ||
| onChange={updateTeamName} | ||
| /> | ||
| <Button | ||
| classes={{ root: classes.saveNewTeamButton }} | ||
| color="primary" | ||
| variant="contained" | ||
| onClick={saveNewTeam} | ||
| > | ||
| Save New Team | ||
| </Button> | ||
| </FormControl> | ||
| </AddTeamFormWrapper> | ||
| ); | ||
| }; | ||
| AddTeamForm.propTypes = { | ||
| classes: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| const styles = (theme) => ({ | ||
| formControl: { | ||
| width: '100%', | ||
| }, | ||
| saveNewTeamButton: { | ||
| width: 300, | ||
| [theme.breakpoints.down('md')]: { | ||
| width: '100%', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const AddTeamFormWrapper = styled('div')` | ||
| `; | ||
|
|
||
| export default withStyles(styles)(AddTeamForm); |
Oops, something went wrong.