Merge pull request #1284 from juanjoseguva/1198-CSV

CSV Changes with Redux Toolkit and Formatting Updates

src/client/app/components/FormFileUploaderComponent.tsx

@@ -3,14 +3,12 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Col, Input, FormGroup, FormText, Label } from 'reactstrap';
+import { Col, Input, FormGroup, Label } from 'reactstrap';
+import translate from '../utils/translate';
 
 interface FileUploader {
-	reference: React.RefObject<HTMLInputElement>;
-	required: boolean;
-	formText: string;
-	labelStyle?: React.CSSProperties;
+	isInvalid: boolean;
+	onFileChange: (file: File | null) => void;
 }
 
 /**
@@ -19,17 +17,28 @@ interface FileUploader {
  * @returns File uploader element
  */
 export default function FileUploaderComponent(props: FileUploader) {
+
+	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0] || null;
+		props.onFileChange(file);
+	};
+
 	return (
 		<FormGroup>
-			<Label style={props.labelStyle}>
-				<FormattedMessage id='csv.file' />
+			<Label for='csvfile'>
+				<div className='pb-1'>
+					{translate('csv.file')}
+				</div>
 			</Label>
 			<Col>
-				<Input innerRef={props.reference} type='file' name='csvfile' required={props.required} />
+				<Input
+					type='file'
+					name='csvfile'
+					id='csvfile'
+					onChange={handleFileChange}
+					invalid={!props.isInvalid}
+				/>
 			</Col>
-			<FormText color='muted'>
-				<FormattedMessage id={props.formText}/>
-			</FormText>
 		</FormGroup>
 	);
 }

src/client/app/components/HeaderButtonsComponent.tsx

@@ -58,7 +58,8 @@ export default function HeaderButtonsComponent() {
 		shouldGroupsButtonDisabled: true,
 		shouldMetersButtonDisabled: true,
 		shouldMapsButtonDisabled: true,
-		shouldCSVButtonDisabled: true,
+		shouldCSVMetersButtonDisabled: true,
+		shouldCSVReadingsButtonDisabled: true,
 		shouldUnitsButtonDisabled: true,
 		shouldConversionsButtonDisabled: true,
 		// Translated menu title that depend on whether logged in.
@@ -93,7 +94,8 @@ export default function HeaderButtonsComponent() {
 			shouldGroupsButtonDisabled: pathname === '/groups',
 			shouldMetersButtonDisabled: pathname === '/meters',
 			shouldMapsButtonDisabled: pathname === '/maps',
-			shouldCSVButtonDisabled: pathname === '/csv',
+			shouldCSVMetersButtonDisabled: pathname === '/csvMeters',
+			shouldCSVReadingsButtonDisabled: pathname === '/csvReadings',
 			shouldUnitsButtonDisabled: pathname === '/units',
 			shouldConversionsButtonDisabled: pathname === '/conversions'
 		}));
@@ -172,12 +174,19 @@ export default function HeaderButtonsComponent() {
 								to="/conversions">
 								<FormattedMessage id='conversions' />
 							</DropdownItem>
+							<DropdownItem
+								style={state.adminViewableLinkStyle}
+								disabled={state.shouldCSVMetersButtonDisabled}
+								tag={Link}
+								to="/csvMeters">
+								<FormattedMessage id='csvMeters' />
+							</DropdownItem>
 							<DropdownItem
 								style={state.csvViewableLinkStyle}
-								disabled={state.shouldCSVButtonDisabled}
+								disabled={state.shouldCSVReadingsButtonDisabled}
 								tag={Link}
-								to="/csv">
-								<FormattedMessage id='csv' />
+								to="/csvReadings">
+								<FormattedMessage id='csvReadings' />
 							</DropdownItem>
 							<DropdownItem
 								disabled={state.shouldGroupsButtonDisabled}

src/client/app/components/RouteComponent.tsx

@@ -4,7 +4,8 @@
 import * as React from 'react';
 import { IntlProvider } from 'react-intl';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import UploadCSVContainer from '../containers/csv/UploadCSVContainer';
+import ReadingsCSVUploadComponent from '../components/csv/ReadingsCSVUploadComponent';
+import MetersCSVUploadComponent from '../components/csv/MetersCSVUploadComponent';
 import MapCalibrationContainer from '../containers/maps/MapCalibrationContainer';
 import MapsDetailContainer from '../containers/maps/MapsDetailContainer';
 import { useAppSelector } from '../redux/reduxHooks';
@@ -55,19 +56,20 @@ const router = createBrowserRouter([
 				children: [
 					{ path: 'admin', element: <AdminComponent /> },
 					{ path: 'calibration', element: <MapCalibrationContainer /> },
+					{ path: 'conversions', element: <ConversionsDetailComponent /> },
+					{ path: 'csvMeters', element: <MetersCSVUploadComponent /> },
 					{ path: 'maps', element: <MapsDetailContainer /> },
 					{ path: 'units', element: <UnitsDetailComponent /> },
-					{ path: 'conversions', element: <ConversionsDetailComponent /> },
 					{ path: 'users', element: <UsersDetailComponent /> }
 				]
 			},
 			{
 				element: <RoleOutlet role={UserRole.CSV} />,
 				children: [
-					{ path: 'csv', element: <UploadCSVContainer /> }
+					{ path: 'csvReadings', element: <ReadingsCSVUploadComponent /> }
 				]
 			},
 			{ path: '*', element: <NotFound /> }
 		]
 	}
-]);
+]);

src/client/app/components/TooltipHelpComponent.tsx

@@ -44,8 +44,9 @@ export default function TooltipHelpComponent(props: TooltipHelpProps) {
 		'help.admin.unitcreate': { link: `${helpUrl}/adminUnitCreating/` },
 		'help.admin.unitedit': { link: `${helpUrl}/adminUnitEditing/` },
 		'help.admin.unitview': { link: `${helpUrl}/adminUnitViewing/` },
-		'help.admin.user': { link: `${helpUrl}/adminUser/` },
-		'help.csv.header': { link: `${helpUrl}/adminDataAcquisition/` },
+		'help.admin.users': { link: `${helpUrl}/adminUser/` },
+		'help.csv.meters': { link: `${helpUrl}/adminMetersImport/` },
+		'help.csv.readings': { link: `${helpUrl}/adminReadingsImport/` },
 		'help.home.area.normalize': { link: `${helpUrl}/areaNormalization/` },
 		'help.home.bar.days.tip': { link: `${helpUrl}/barGraphic/#usage` },
 		'help.home.bar.interval.tip': { link: `${helpUrl}/barGraphic/#usage` },