honeywellScanner/ManualEntry.tsx

import React from 'react';
import {
    IonContent,
    IonInput,
    IonButton,
    IonItem,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar, IonRow, IonCol, IonTabBar, IonLabel, IonTabButton, IonButtons, IonIcon, IonText, IonRouterLink
} from '@ionic/react';
import { scan, logOut, chevronBackOutline } from "ionicons/icons";
import { Interface } from 'readline';
import { getDataByCursor, saveScannedData, updateDataByCursor } from '../../services/indexedDb';

interface IProps {
    history: any
}
interface IState {
    minId: string;
    barcode: string
}
/**
  * 
 Apart from being able to scan a barcode with the app, 
 as an alternative, This module allow user to enter the barcode number 
 or MIN of a product in order to submit the product for an online return.
 @category Category
 */
class ManualEntry extends React.Component<IProps, IState>{

    constructor(props: any) {
        super(props);

        this.state = {
            minId: '',
            barcode: '',
        }
    }

    backToScan = () => {
        this.props.history.push({
            pathname: '/dashboard/scanner'
        })
    }

    onChangeBarcode = (evt: any) => {
        let barCode = evt.target.value;
        const re = /^[0-9\b]+$/;
        if (evt.target.value === '' || re.test(evt.target.value)) {
            this.setState({ barcode: barCode })
        }

    }


    onChangeMin = (evt: any) => {
        let min = evt.target.value;
        this.setState({ minId: min })
    }

/**
   * This function checks if entered input is barcode or min , And entry is present in returns data
   * If entry is present then push data with returnId in new table and entry is not present then it 
   * makes that product invalid and pushes data without return id.
   * After storing it clears repective field and redirects to view barcode list page.
   */
    SubmitProduct = () => {
        let Product = '';
        var _this = this;
        var prodType = ''
        if (this.state.minId == undefined || this.state.minId == '' || this.state.minId == null) {
            Product = this.state.barcode
            prodType = 'barcode';
        }
        else {
            Product = "min-" + this.state.minId;
            prodType = 'min'
        }
        getDataByCursor(Product).then(function (resp) {
        
            saveScannedData(resp).then(function (data) {
                if (resp.validFlag == true) {
                    let productNew = resp.returnId;
                    updateDataByCursor('returnId', productNew).then(function (dataNew) {
                        _this.setState({ minId: "" })
                        _this.setState({ barcode: "" })
                        _this.props.history.push({
                            pathname: '/dashboard/barcodeList'
                        })
                    }).catch(function () {
                    });
                }
                else {
                    _this.setState({ minId: "" })
                    _this.setState({ barcode: "" })
                    _this.props.history.push({
                        pathname: '/dashboard/barcodeList'
                    })
                }
            })

        }).catch(function () {
        });

      

    }
    render() {
        return (
            <IonPage>
                <IonHeader>
                    <IonToolbar className="bg-green">
                        <IonIcon icon={chevronBackOutline} className="text-yellow" size="large" slot="start" onClick={this.backToScan} />
                        <IonTitle className="text-yellow">Scan Barcode</IonTitle>
                    </IonToolbar>
                </IonHeader>


                {/* Enter Barcode Details Manually  */}
                <IonContent className="ion-padding">
                    <IonRow >
                        <IonCol>
                            <IonLabel className="text-green">Enter the Barcode Number</IonLabel>
                            <IonInput className="custom-input-box" placeholder="Ex. 220382100007" onIonChange={(e: any) => { this.onChangeBarcode(e) }} value={this.state.barcode} type="number"> </IonInput>
                        </IonCol>
                    </IonRow>
                    <IonRow>
                        <IonCol>
                            <IonLabel className="text-green">Quantity: 1</IonLabel>
                        </IonCol>
                    </IonRow>
                    <IonRow>
                        <IonCol className="ion-text-center">
                            <IonLabel className="text-green">OR</IonLabel>
                        </IonCol>
                    </IonRow>
                    <IonRow >
                        <IonCol>
                            <IonLabel className="text-green">Enter the MIN Id</IonLabel>
                            <IonInput className="custom-input-box" pattern="[0-9]*" onIonChange={(e: any) => { this.onChangeMin(e) }} value={this.state.minId} placeholder="Enter MIN ID" type="number"> </IonInput>
                        </IonCol>
                    </IonRow>
                    <IonRow>
                        <IonCol className="ion-text-center">
                            <IonButton onClick={this.SubmitProduct} disabled={this.state.barcode.length < 1 && this.state.minId.length < 1} className="bg-yellow text-green capitalize_case">
                                Submit a Product
                            </IonButton>
                        </IonCol>
                    </IonRow>
                </IonContent>
                {/* <IonTabBar slot="bottom" className="bg-green">
                    <IonTabButton className="text-yellow"  onClick={this.backToScan} >
                        <IonIcon icon={scan} />
                        <IonLabel>Scan</IonLabel>
                    </IonTabButton>

                    <IonTabButton className="text-yellow">
                        <IonIcon onClick={this.logout} icon={logOut} />
                        <IonLabel>Logout</IonLabel>
                    </IonTabButton>
                </IonTabBar> */}
            </IonPage>
        )
    }
}

export default ManualEntry;