Merge pull request OpenEnergyDashboard#4 from andrew-cline/sagar

Added the button to identifier. Need to fix the logic
wootent · Mar 14, 2022 · 2ee835e · 2ee835e
2 parents 0a8641e + 65fcb98
commit 2ee835e
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 7 deletions.
diff --git a/src/client/app/actions/unit.ts b/src/client/app/actions/unit.ts
@@ -1,7 +1,9 @@
-import {ActionType, Dispatch, Thunk} from '../types/redux/actions';
+import {ActionType, Dispatch, Thunk, GetState} from '../types/redux/actions';
 import * as t from '../types/redux/unit'
 import {unitsApi} from '../utils/api';
 import { NamedIDItem } from '../types/items';
+import { showErrorNotification } from '../utils/notifications';
+import translate from '../utils/translate';
 
 function requestUnitsDetails(): t.RequestUnitsDetailsAction {
     return { type: ActionType.RequestUnitsDetails}
@@ -11,6 +13,47 @@ function receiveUnitsDetails(data: NamedIDItem[]): t.ReceiveUnitsDetailsAction{
     return {type: ActionType.ReceiveUnitsDetails, data}
 } 
 
+export function confirmUnitEdits(unit: number): t.ConfirmEditedUnitAction {
+	return { type: ActionType.ConfirmEditedUnit, unit};
+}
+
+export function submitUnitEdits(unit: number): t.SubmitEditedUnitAction {
+	return { type: ActionType.SubmitEditedUnit, unit };
+}
+
+export function confirmEditedUnits(): Thunk {
+	return async (dispatch: Dispatch, getState: GetState) => {
+		Object.keys(getState().units.editedUnits).forEach(unitIdS => {
+			const unitId = parseInt(unitIdS);
+			dispatch(confirmUnitEdits(unitId));
+		});
+	}
+}
+
+export function submitEditedUnits(): Thunk {
+	return async (dispatch: Dispatch, getState: GetState) => {
+		Object.keys(getState().units.editedUnits).forEach(unitIdS => {
+			const unitId = parseInt(unitIdS);
+			if (getState().units.submitting.indexOf(unitId) === -1) {
+				dispatch(submitEditedUnit(unitId));
+			}
+		});
+	};
+}
+
+export function submitEditedUnit(unitId: number): Thunk {
+	return async (dispatch: Dispatch, getState: GetState) => {
+		const submittingUnit = getState().units.editedUnits[unitId];
+		dispatch(submitUnitEdits(unitId));
+		try {
+			await unitsApi.edit(submittingUnit);
+			dispatch(confirmUnitEdits(unitId));
+		} catch (err) {
+			showErrorNotification(translate('failed.to.edit.unit'));
+		}
+	};
+}
+
 export function fetchUnitsDetails(): Thunk{
     return async (dispatch: Dispatch) => {
         dispatch(requestUnitsDetails());

diff --git a/src/client/app/components/unit/UnitViewComponent.tsx b/src/client/app/components/unit/UnitViewComponent.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react'; 
 import {Button} from 'reactstrap'; 
-import { UnitData } from '../../types/redux/unit';
+import { UnitData, EditUnitDetailsAction} from '../../types/redux/unit';
 import { FormattedMessage, injectIntl, WrappedComponentProps } from 'react-intl';
+import { confirmEditedUnits, fetchUnitsDetails, submitEditedUnits } from '../../actions/unit';
+import { updateUnsavedChanges } from '../../actions/unsavedWarning';
+import store from '../../index';
 
 
 
@@ -12,22 +15,33 @@ interface UnitViewProps {
 	isSubmitting: boolean;
 	loggedInAsAdmin: boolean;
 
-    //editUnitDetails(unit: UnitMetadata): EditUnitDetailsAction;
+    editUnitDetails(unit: UnitData): EditUnitDetailsAction; 
+}
+
+interface UnitViewState {
+	identifierFocus: boolean;
+	identifierInput: string;
 }
 
 type UnitViewPropsWithIntl = UnitViewProps & WrappedComponentProps;
 
-class UnitViewComponent extends React.Component<UnitViewPropsWithIntl, {}> {
+class UnitViewComponent extends React.Component<UnitViewPropsWithIntl, UnitViewState> {
     constructor(props: UnitViewPropsWithIntl){
         super(props); 
+        this.state = {
+			identifierFocus: false,
+			identifierInput: this.props.unit.identifier
+		};
+        this.toggleIdentifierInput = this.toggleIdentifierInput.bind(this);
+        this.handleIdentifierChange = this.handleIdentifierChange.bind(this);
     }
     public render() {
         const loggedInAsAdmin = this.props.loggedInAsAdmin;
         return (
             <tr>
                 {loggedInAsAdmin && <td> {this.props.unit.id} {this.formatStatus()} </td>}
                 {loggedInAsAdmin && <td> {this.props.unit.name} {this.formatStatus()} </td>}
-                {loggedInAsAdmin && <td> {this.props.unit.identifier} {this.formatStatus()} </td>}
+				<td> {this.unitIdentifierInput()} </td>
                 {loggedInAsAdmin && <td> {this.props.unit.unitRepresent} {this.formatStatus()} </td>}
                 {loggedInAsAdmin && <td> {this.props.unit.secInRate} {this.formatStatus()} </td>}
                 {loggedInAsAdmin && <td> {this.props.unit.typeOfUnit} {this.formatStatus()} </td>}
@@ -39,6 +53,94 @@ class UnitViewComponent extends React.Component<UnitViewPropsWithIntl, {}> {
         );
     }
 
+    private removeUnsavedChangesFunction(callback: () => void) {
+		// This function is called to reset all the inputs to the initial state
+		store.dispatch<any>(confirmEditedUnits()).then(() => {
+			store.dispatch<any>(fetchUnitsDetails()).then(callback);
+		});
+	}
+
+	private submitUnsavedChangesFunction(successCallback: () => void, failureCallback: () => void) {
+		// This function is called to submit the unsaved changes
+		store.dispatch<any>(submitEditedUnits()).then(successCallback, failureCallback);
+	}
+
+	private updateUnsavedChanges() {
+		// Notify that there are unsaved changes
+		store.dispatch(updateUnsavedChanges(this.removeUnsavedChangesFunction, this.submitUnsavedChangesFunction));
+	}
+
+	componentDidUpdate(prevProps: UnitViewProps) {
+		if (this.props.isEdited && !prevProps.isEdited) {
+			// When the props.isEdited changes from false to true, there are unsaved changes
+			this.updateUnsavedChanges();
+		}
+	}
+
+    private styleToggleBtn(): React.CSSProperties {
+		return { float: 'right' };
+	}
+
+    private handleIdentifierChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+		this.setState({ identifierInput: event.target.value });
+	}
+
+    private toggleIdentifierInput() {
+		if (this.state.identifierFocus) {
+			const identifier = this.state.identifierInput;
+
+			const editedUnit = {
+                ...this.props.unit,
+                identifier
+			};
+			this.props.editUnitDetails(editedUnit);
+		}
+		this.setState({ identifierFocus: !this.state.identifierFocus });
+	}
+
+    private unitIdentifierInput(){
+		let formattedIdentifier;
+		let buttonMessageId;
+		if(this.state.identifierFocus){
+			formattedIdentifier = <textarea
+				id={'identifier'}
+				autoFocus
+				value={this.state.identifierInput}
+				onChange={event => this.handleIdentifierChange(event)}
+			/>;
+			buttonMessageId = 'update';
+		} else {
+			formattedIdentifier = <div>{this.state.identifierInput}</div>;
+			buttonMessageId = 'edit';
+		}
+
+		let toggleButton;
+		const loggedInAsAdmin = this.props.loggedInAsAdmin;
+		if (loggedInAsAdmin) {
+			toggleButton = <Button style={this.styleToggleBtn()} color='primary' onClick={this.toggleIdentifierInput}>
+				<FormattedMessage id={buttonMessageId} />
+			</Button>;
+		} else {
+			toggleButton = <div />;
+		}
+
+		if (loggedInAsAdmin) {
+			return ( // add onClick
+				<div>
+					{formattedIdentifier}
+					{toggleButton}
+				</div>
+			);
+		} else {
+			return (
+				<div>
+					{this.state.identifierInput}
+					{toggleButton}
+				</div>
+			);
+		}
+	}
+
     private formatStatus(): string {
 		if (this.props.isSubmitting) {
 			return '(' + this.props.intl.formatMessage({id: 'submitting'}) + ')';

diff --git a/src/client/app/types/redux/actions.ts b/src/client/app/types/redux/actions.ts
@@ -114,7 +114,10 @@ export enum ActionType {
 	IncrementCounter = 'INCREMENT_COUNTER',
 
 	ReceiveUnitsDetails = 'RECEIVE_UNITS_DETAILS',
-	RequestUnitsDetails = 'REQUEST_UNITS_DETAISL'
+	RequestUnitsDetails = 'REQUEST_UNITS_DETAISL',
+	EditUnitDetails = 'EDIT_UNIT_DETAILS',
+	ConfirmEditedUnit = 'CONFIRM_EDITED_UNIT',
+	SubmitEditedUnit = 'SUBMIT_EDITED_UNIT',
 }
 
 /**

diff --git a/src/client/app/types/redux/unit.ts b/src/client/app/types/redux/unit.ts
@@ -49,6 +49,21 @@ interface UnitDataByID{
     [unitID: number]: UnitData;
 }
 
+export interface EditUnitDetailsAction {
+	type: ActionType.EditUnitDetails;
+	unit: UnitData;
+}
+
+export interface ConfirmEditedUnitAction {
+	type: ActionType.ConfirmEditedUnit;
+	unit: number;
+}
+
+export interface SubmitEditedUnitAction {
+	type: ActionType.SubmitEditedUnit;
+	unit: number;
+}
+
 export interface UnitState {
     isLoading: boolean;
     byUnitID: UnitDataByID;
@@ -59,4 +74,8 @@ export interface UnitState {
 
 export type UnitsAction = 
     | RequestUnitsDetailsAction
-    | ReceiveUnitsDetailsAction
+    | ReceiveUnitsDetailsAction
+    | EditUnitDetailsAction
+    | ConfirmEditedUnitAction
+    | SubmitEditedUnitAction; 
+
diff --git a/src/client/app/utils/api/UnitsApi.ts b/src/client/app/utils/api/UnitsApi.ts
@@ -12,4 +12,11 @@ export default class UnitsApi {
     public async details(): Promise<UnitData[]>{
             return await this.backend.doGetRequest<UnitData[]>('/api/units/');
     }
+
+    public async edit(unit: UnitData): Promise<{}> {
+		return await this.backend.doPostRequest<UnitData>(
+			'/api/unit/edit',
+			{ id: unit.id, identifier: unit.identifier, displayable: unit.displayable }
+		);
+	}
 }