Skip to content

Commit

Permalink
Merge pull request #1384 from hinyan17/development
Browse files Browse the repository at this point in the history 
Added spinners to CSV upload components
  • Loading branch information
@huss
huss authored Nov 14, 2024
2 parents 5cb4831 + d667977 commit f78ce0d
Show file tree
Hide file tree
Showing 2 changed files with 489 additions and 455 deletions.
229 changes: 123 additions & 106 deletions src/client/app/components/csv/MetersCSVUploadComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { useAppDispatch, useAppSelector } from '../../redux/reduxHooks';
import { authApi, authPollInterval } from '../../redux/api/authApi';
import { selectIsAdmin } from '../../redux/slices/currentUserSlice';
import { selectVisibleMeterAndGroupData } from '../../redux/selectors/adminSelectors';
import SpinnerComponent from '../SpinnerComponent';

/**
* Defines the CSV Meters page
Expand All @@ -26,6 +27,8 @@ export default function MetersCSVUploadComponent() {
const [meterData, setMeterData] = React.useState<MetersCSVUploadPreferences>(MetersCSVUploadDefaults);
const [selectedFile, setSelectedFile] = React.useState<File | null>(null);
const [isValidFileType, setIsValidFileType] = React.useState<boolean>(false);
// tracks if should show spinner (true while loading data, false otherwise)
const [showSpinner, setShowSpinner] = React.useState<boolean>(false);
const dispatch = useAppDispatch();
// Check for admin status
const isAdmin = useAppSelector(selectIsAdmin);
Expand Down Expand Up @@ -72,7 +75,10 @@ export default function MetersCSVUploadComponent() {
const handleSubmit = async (e: React.MouseEvent<HTMLFormElement>) => {
e.preventDefault();
if (selectedFile) {
// show spinner before calling api, then stop it immediately after
setShowSpinner(true);
const { success, message } = await submitMeters(meterData, selectedFile, dispatch);
setShowSpinner(false);
if (success) {
showSuccessNotification(message);
} else {
Expand All @@ -81,6 +87,11 @@ export default function MetersCSVUploadComponent() {
}
};

const spinContainerStyle = {
display: 'flex',
justifyContent: 'center'
};

const tooltipStyle = {
display: 'inline-block',
fontSize: '50%',
Expand All @@ -93,118 +104,124 @@ export default function MetersCSVUploadComponent() {

return (
<Container className="min-vh-100">
<TooltipHelpComponent page='help.csv.meters' />
<Form onSubmit={handleSubmit}>
<Row className="justify-content-md-center">
<Col md='auto'>
<div className="text-center">
<h2>
{translate('csv.upload.meters')}
<div style={tooltipStyle}>
<TooltipMarkerComponent page='help.csv.meters' helpTextId={tooltipStyle.tooltipReadings} />
</div>
</h2>
</div>
<FormFileUploaderComponent
onFileChange={handleFileChange}
isInvalid={!!selectedFile}
/>
<FormGroup>
<Row>
<Col>
<Label for='gzip'>
<div style={checkBox}>
<Input
type='checkbox'
id='gzip'
name='gzip'
onChange={handleCheckboxChange}
/>
<div className='ps-2'>
{translate('csv.common.param.gzip')}
{showSpinner ? (
<div style={spinContainerStyle}>
<SpinnerComponent loading width={50} height={50} />
</div>
) : (<>
<TooltipHelpComponent page='help.csv.meters' />
<Form onSubmit={handleSubmit}>
<Row className="justify-content-md-center">
<Col md='auto'>
<div className="text-center">
<h2>
{translate('csv.upload.meters')}
<div style={tooltipStyle}>
<TooltipMarkerComponent page='help.csv.meters' helpTextId={tooltipStyle.tooltipReadings} />
</div>
</h2>
</div>
<FormFileUploaderComponent
onFileChange={handleFileChange}
isInvalid={!!selectedFile}
/>
<FormGroup>
<Row>
<Col>
<Label for='gzip'>
<div style={checkBox}>
<Input
type='checkbox'
id='gzip'
name='gzip'
onChange={handleCheckboxChange}
/>
<div className='ps-2'>
{translate('csv.common.param.gzip')}
</div>
</div>
</div>
</Label>
</Col>
</Row>
<Row>
<Col>
<Label for='headerRow'>
<div style={checkBox}>
<Input
type='checkbox'
id='headerRow'
name='headerRow'
onChange={handleCheckboxChange}
/>
<div className='ps-2'>
{translate('csv.common.param.header.row')}
</Label>
</Col>
</Row>
<Row>
<Col>
<Label for='headerRow'>
<div style={checkBox}>
<Input
type='checkbox'
id='headerRow'
name='headerRow'
onChange={handleCheckboxChange}
/>
<div className='ps-2'>
{translate('csv.common.param.header.row')}
</div>
</div>
</div>
</Label>
</Col>
</Row>
<Row>
<Col>
<Label for='update'>
<div style={checkBox}>
<Input
type='checkbox'
id='update'
name='update'
onChange={handleCheckboxChange}
/>
<div className='ps-2'>
{translate('csv.common.param.update')}
</Label>
</Col>
</Row>
<Row>
<Col>
<Label for='update'>
<div style={checkBox}>
<Input
type='checkbox'
id='update'
name='update'
onChange={handleCheckboxChange}
/>
<div className='ps-2'>
{translate('csv.common.param.update')}
</div>
</div>
</Label>
</Col>
</Row>
</FormGroup>
{meterData.update && (
<FormGroup>
<Label for='meterIdentifier'>
<div className='pb-1'>
{translate('csv.readings.param.meter.identifier')}
</div>
</Label>
</Col>
</Row>
</FormGroup>
{meterData.update && (
<FormGroup>
<Label for='meterIdentifier'>
<div className='pb-1'>
{translate('csv.readings.param.meter.identifier')}
</div>
</Label>
<Input
id='meterIdentifier'
name='meterIdentifier'
type='select'
value={meterData.meterIdentifier || ''}
onChange={handleSelectedMeterChange}
invalid={!meterIsSelected}
>
{
<option value={''} key={-999} hidden disabled>
{translate('select.meter')}
</option>
}
{
Array.from(visibleMeters).map(meter => {
return (<option value={meter.identifier} key={meter.id}>{meter.identifier}</option>);
})
}
</Input>
</FormGroup>
)}
<div className='d-flex flex-row-reverse'>
<div className='p-3'>
<Button color='primary' type='submit' disabled={!isValidFileType || (meterData.update && !meterData.meterIdentifier)}>
{translate('csv.submit.button')}
</Button>
</div>
<div className='p-3'>
<Button color='secondary' type='reset' onClick={handleClear}>
{translate('csv.clear.button')}
</Button>
<Input
id='meterIdentifier'
name='meterIdentifier'
type='select'
value={meterData.meterIdentifier || ''}
onChange={handleSelectedMeterChange}
invalid={!meterIsSelected}
>
{
<option value={''} key={-999} hidden disabled>
{translate('select.meter')}
</option>
}
{
Array.from(visibleMeters).map(meter => {
return (<option value={meter.identifier} key={meter.id}>{meter.identifier}</option>);
})
}
</Input>
</FormGroup>
)}
<div className='d-flex flex-row-reverse'>
<div className='p-3'>
<Button color='primary' type='submit' disabled={!isValidFileType || (meterData.update && !meterData.meterIdentifier)}>
{translate('csv.submit.button')}
</Button>
</div>
<div className='p-3'>
<Button color='secondary' type='reset' onClick={handleClear}>
{translate('csv.clear.button')}
</Button>
</div>
</div>
</div>
</Col>
</Row>
</Form>
</Col>
</Row>
</Form>
</>)}
</Container>
);
}
Loading

0 comments on commit f78ce0d

Please sign in to comment.