@jescon-technologies/react-native-ui-kit 0.0.3 → 0.0.5

package/src/Custom/TableComponent/CMoreButtonTable.js

@@ -0,0 +1,197 @@
+import React, { useState } from 'react';
+import { Text, View, Dimensions } from 'react-native';
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+} from 'react-native-popup-menu';
+import { normalize } from '../../CommonStyle/componentStyle';
+import NetworkServiceCall from '../../Common/NetworkServiceCall';
+import { Global } from '../../Common/Global';
+import { APIURL } from '../../Common/apiConstants';
+import { notifyMessage } from '../../CommonStyle/ComponentFunctions';
+
+export default function CMoreButtonTable(props) {
+    const [data, setData] = useState(props.moreData);
+    const navigation = useNavigation();
+    return (
+        <View
+            style={{
+                borderTopWidth: 0.5, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderBottomWidth: 0.5, borderLeftWidth: 0.5, borderRightWidth: 0.5,
+                paddingLeft: 5, width: Dimensions.get('screen').width * (0.1), paddingTop: 5, paddingBottom: 5, height: Dimensions.get('screen').height * 0.035,
+            }}
+        >
+            <Menu>
+                <MenuTrigger>
+                    <MaterialCommunityIcons
+                        name={'dots-horizontal-circle'}
+                        color="black"
+                        size={normalize(20)}
+                    />
+                    <Text
+                        style={{
+                            color: 'black',
+                            fontSize: normalize(5),
+                            alignSelf: 'center',
+                        }}>
+                        More
+                    </Text>
+                </MenuTrigger>
+                <MenuOptions
+                    customStyles={{
+                        optionsContainer: { width: '35%' },
+                        optionText: {},
+                    }}>
+                    <View>
+                        {[{ 'iconname': 'eye-dropper', 'function': 1, 'displaytext': 'Lab Results' },
+                        // { "iconname": "capsules", "function": 2, "displaytext": "Prescription" },
+                        // { "iconname": "capsules", "function": 4, "displaytext": "Medications Chart" },
+                        // { "iconname": "file-prescription", "function": 5, "displaytext": "MDR" },
+                        { 'iconname': 'chart-line', 'function': 3, 'displaytext': 'Patient Chart' }].map((params, key) => {
+                            return (
+                                <MenuOption
+                                    key={key}
+                                    onSelect={() =>
+                                        moreButton(params.function, data)
+                                    }
+                                    style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                    <FontAwesome5
+                                        name={params.iconname}
+                                        color={'blue'}
+                                        size={normalize(20)}
+                                        style={{ width: normalize(25) }}
+                                    />
+                                    <Text adjustsFontSizeToFit
+                                        style={{
+                                            fontSize: normalize(13),
+                                            fontWeight: 'bold',
+                                            marginLeft: '10%',
+                                        }}>
+                                        {params.displaytext}
+                                    </Text>
+                                </MenuOption>
+                            );
+                        })}
+                    </View>
+                </MenuOptions>
+            </Menu>
+        </View>
+    );
+
+    function moreButton(key, Pdata) {
+        console.log('KEYYYYYYYYYYYYYYY', JSON.stringify(key));
+        switch (key) {
+            case 2:
+                Global.PatientDetails = null;
+                navigation.navigate('Prescription', { hopapatient: Pdata.hopapatient });
+                break;
+            case 3: GeneratePatientChart(Pdata);
+                break;
+            case 4: GenerateMedicationsChart(Pdata);
+                break;
+            case 5: getMDR(Pdata);
+                break;
+            default:
+                navigation.navigate('CLabChart', { hopapatient: Pdata.hopapatient });
+                // navigation.navigate('LabResults', { patientdata: Pdata.patientid })
+                break;
+        }
+    }
+
+    function getMDR(params) {
+        Global.PatientDetails = {
+            'datalistid': 1,
+            'bordercolor': '#143A81',
+            'apimethod': 'GET',
+            'detailapi': "emr/emrcommonget/exec rnlapatientcharttemplate 83986,190048,3,126150,3637,3,0,'',0,NULL,A",
+            'hopapatient': params.hopapatient,
+            'verified': false,
+            'homrpatientchartdetailstatus': 1,
+            'homrpatientchart': 83986,
+            'leftcontent': [
+                {
+                    'contentid': 1,
+                    'displaytext': 'Registration Date',
+                    'value': 'Aug 11 2018 12:00AM',
+                },
+                {
+                    'contentid': 2,
+                    'displaytext': 'CRD/CON/PKG',
+                    'value': ' CON',
+                },
+            ],
+            'profilecontent': [
+                {
+                    'heading1': (params.patientno).toString(),
+                    'heading2': params.patientname,
+                    'logo2': params.clinicalunit,
+                    'leftlogo2': 'IP',
+                    'subheading1': params.gender == 'F' ? 'FEMALE' : 'MALE',
+                    'subheading2': params.age + 'Y',
+                    'subheading3': 'PUTHUKKARA',
+                    'subheading4': '9995890650',
+                    'hopapatient': 126150,
+                    'bedno': params.bedno,
+                    'postoffice': 'PERAMANGALAM',
+                    'tokenno': 1,
+                    'tokencolor': 'rgb(255,255,255)',
+                    'logo1': 'REVISIT',
+                    'chartuser': '',
+                    'infectioncontrol': 0,
+                    'patientchart': [
+                        {
+                            'itemname': 'Patient Chart',
+                            'buttonapimethod': 'POST',
+                            'buttonapi': '',
+                            'apiarguments': 126150,
+                            'homrpatientchart': 83986,
+                        },
+                    ],
+                },
+            ],
+            'rightcontent': [
+                {
+                    'contentid': 1,
+                    'displaytext': 'Last Visited',
+                    'value': 'Jun 24 2022 12:00AM',
+                },
+                {
+                    'contentid': 2,
+                    'displaytext': 'Father/Husband',
+                    'value': 'RAPPAI.P.D-',
+                },
+            ],
+        };
+        navigation.navigate('DrugResistancy', { hopapatient: params.hopapatient });
+    }
+
+    function GenerateMedicationsChart(params) {
+        console.log('YYYYYYYYYYYTTTTTTTTTTTTTTT', params);
+        // Global.PatientDetails = null
+        navigation.navigate('MedicationsIP', { patientdata: params });
+    }
+
+    function GeneratePatientChart(item) {
+        Global.PatientDetails = null;
+        props.callBack != undefined ? props.callBack(true) : null;
+        let buttonapi = APIURL + 'emr/emrcommonget/rnhtlamedicalrecord ' + item.hopapatient;
+        console.log('Patient......................................', buttonapi);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    props.callBack != undefined ? props.callBack(false) : null;
+                    navigation.navigate('ChartScreen', { pdf: response, moredata: data.item });
+                }
+                else {
+                    props.callBack != undefined ? props.callBack(false) : null;
+                    notifyMessage('Patient chart not found.',4);
+                }
+            });
+    }
+}

package/src/Custom/TableComponent/CTable.js

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Text, View, Dimensions, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
+import CTextBody from './CTextBody';
+import CTextHeader from './CTextHeader';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { normalize } from '../../CommonStyle/componentStyle';
+import { useState } from 'react';
+import Icons from '../../Common/Icons';
+import { Global } from '../../Common/Global';
+import { APIURL } from '../../Common/apiConstants';
+import { ArrayCheck, getLoading, ValueCheck } from '../../CommonStyle/ComponentFunctions';
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+import Loader from '../Loader';
+
+
+const CTable = (props) => {
+
+    const [data, setData] = useState(props.data);
+    const [isLoading, setIsLoading] = useState(false);
+    const navigation = useNavigation();
+
+    function getSort() {
+        setData();
+        setTimeout(() => {
+            if (ArrayCheck(data)) {
+                data.sort((a, b) => (a.patientname > b.patientname) ? 1 : ((b.patientname > a.patientname) ? -1 : 0));
+                setData(data);
+            }
+        });
+    }
+
+    return (
+        <View style={{ flex: 1, marginBottom: normalize(50) }}>
+            <View style={{
+                backgroundColor: '#e5e3e3',
+                paddingVertical: 3,
+                paddingHorizontal: 6,
+                marginTop: 5,
+                marginBottom: 2,
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+            }}>
+                <View style={{ width: normalize(30), alignItems: 'center', marginRight: 5 }}>
+                    <FontAwesome5 name={'user-injured'} color={Global.AppTheme.primary_color} size={normalize(20)} />
+                </View>
+                <Text
+                    style={{
+                        textShadowRadius: 2,
+                        fontSize: normalize(14),
+                        fontWeight: '600',
+                        color: Global.AppTheme.primary_color,
+                        flex: 1,
+                    }}>
+                    Patient Information {ValueCheck(props.date) ? '- ' + props.date : ''}
+                </Text>
+            </View>
+            {isLoading ?
+                <Loader displaytext={true} /> : null}
+            <View style={{ flexDirection: 'row', marginLeft: normalize(5), marginRight: normalize(5) }}>
+                <View>
+                    <View style={{ flexDirection: 'row' }}>
+                        <CTextHeader text={'Chart'} widthArr={Dimensions.get('screen').width * (0.1)} />
+                        <CTextHeader text={'Lab'} widthArr={Dimensions.get('screen').width * (0.1)} />
+                        <View style={{ flexDirection: 'row-reverse' }}>
+                            <CTextHeader text={' Name'} widthArr={Dimensions.get('screen').width * (0.34)} />
+                            <TouchableOpacity style={{ width: Dimensions.get('screen').width * (0.06), alignItems: 'center' }}
+                                onPress={() => getSort()}>
+                                <Icons.FontAwesome name={'sort'} color={'black'} size={normalize(20)} />
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                    {ArrayCheck(data) ? data.map((item, k) => {
+                        return (
+                            <View key={k} style={{ flexDirection: 'row', marginTop: 1, backgroundColor: 'white' }}>
+
+                                <View style={{ width: Dimensions.get('screen').width * (0.1), paddingTop: normalize(2.5) }}>
+                                    <TouchableOpacity onPress={() => GeneratePatientChart(item)}
+                                        style={{ backgroundColor: '#adc3ff', alignSelf: 'center', padding: normalize(5), paddingHorizontal: normalize(8), borderRadius: 1000 }}>
+                                        <Icons.FontAwesome5 name={'file-medical'} size={normalize(15)} color={Global.AppTheme.primary_color} style={{}} />
+                                    </TouchableOpacity>
+                                </View>
+
+                                <View style={{ width: Dimensions.get('screen').width * (0.1), paddingTop: normalize(2.5) }}>
+                                    <TouchableOpacity onPress={() => getLabResults(item)}
+                                        style={{ backgroundColor: '#adc3ff', alignSelf: 'center', padding: normalize(3), borderRadius: 1000 }}>
+                                        <Icons.Entypo name={'lab-flask'} size={normalize(20)} color={Global.AppTheme.primary_color} style={{}} />
+                                    </TouchableOpacity>
+                                </View>
+
+                                {/* <CMoreButtonTable moreData={item} callBack={val => (val == undefined ? null : setIsLoading(val))} /> */}
+                                <CTextBody widthArr={0.4} displaytext={item.patientname} />
+                            </View>);
+                    }) : <View style={{ height: normalize(400) }} />}
+                </View>
+
+                <ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
+                    <View style={{ flex: 1, marginTop: 0, marginRight: normalize(20) }}>
+                        <View style={{ flexDirection: 'row' }}>
+                            <CTextHeader text={' ID'} widthArr={Dimensions.get('screen').width * (0.2)} />
+                            <CTextHeader text={' Gender'} widthArr={Dimensions.get('screen').width * (0.123)} />
+                            <CTextHeader text={' Age'} widthArr={Dimensions.get('screen').width * (0.123)} />
+                            <CTextHeader text={' Place'} widthArr={Dimensions.get('screen').width * (0.31)} />
+                            <CTextHeader text={' Mobile'} widthArr={Dimensions.get('screen').width * (0.31)} />
+                            <CTextHeader text={' Address'} widthArr={Dimensions.get('screen').width * (0.3)} />
+                            <CTextHeader text={' Clinical unit'} widthArr={Dimensions.get('screen').width * (0.3)} />
+                        </View>
+                        {ArrayCheck(data) ? data.map((item, h) => {
+                            return (
+                                <View key={h} style={{ flexDirection: 'row', marginTop: 1, backgroundColor: 'white' }}>
+                                    <CTextBody widthArr={0.2} displaytext={item.patientid} />
+                                    <CTextBody widthArr={0.12} gender={item.gender} />
+                                    <CTextBody widthArr={0.12} displaytext={item.age} />
+                                    <CTextBody widthArr={0.3} displaytext={item.place} />
+                                    <CTextBody widthArr={0.3} displaytext={ValueCheck(item.mobileno) && item.mobileno != '0' && item.mobileno != '00' ? item.mobileno : ''} />
+                                    <CTextBody widthArr={0.3} displaytext={item.address} />
+                                    <CTextBody widthArr={0.3} displaytext={item.clinicalunit} />
+                                </View>);
+                        }) : <View style={{ height: normalize(400) }} />}
+                    </View>
+                </ScrollView>
+            </View>
+        </View>
+    );
+
+    function GeneratePatientChart(item) {
+        Global.PatientDetails = null;
+        setIsLoading(true);
+        let buttonapi = APIURL + 'emr/emrcommonget/rnhtlamedicalrecord ' + item.hopapatient;
+        console.log('Patient......................................', buttonapi);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    setIsLoading(false);
+                    navigation.navigate('ChartScreen', { pdf: response, moredata: data.item, type: 0 });
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Patient chart not found.', 4);
+                }
+            });
+        getLoading(v => setIsLoading(false));
+    }
+
+    function getLabResults(Pdata) {
+
+        var patientData = {
+            'datalistid': 1,
+            'bordercolor': '#143A81',
+            'hopapatient': Pdata.hopapatient,
+            'verified': false,
+            'homrpatientchartdetailstatus': 0,
+            'homrpatientchart': 0,
+            'profilecontent': [
+                {
+                    'patientno': Pdata.patientid,
+                    'patientname': Pdata.patientname,
+                    'heading3': '',
+                    'patienttype': 'OP',
+                    'gender': Pdata.gender == 'F' ? 'FEMALE' : 'MALE',
+                    'age': Pdata.age,
+                    'mobileno': Pdata.mobileno,
+                    'badgecolor': 'rgb(255,255,255)',
+                    'logo1': '',
+                },
+            ],
+            'rightcontent': [
+                {
+                    'contentid': 1,
+                    'displaytext': 'Last Visited',
+                    'value': ValueCheck(Pdata.lastvisited) ? Pdata.lastvisited : '',
+                },
+            ],
+        };
+
+        Global.PatientDetails = patientData;
+        console.log('PATIENT DATATTATTATATATTTATATATATA', JSON.stringify(Pdata));
+        // navigation.navigate('CLabChart', { hopapatient: Pdata.hopapatient })
+        navigation.navigate('LabResults');
+        // navigation.navigate('CValueSummary')
+    }
+};
+export default CTable;

package/src/Custom/TableComponent/CTextBody.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Text, View, Dimensions, Image } from 'react-native';
+import { normalize } from '../../CommonStyle/componentStyle';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { APIURL } from '../../Common/apiConstants';
+
+export default function CTextBody(props) {
+    return (
+        <View
+            style={{
+                borderWidth: 1, justifyContent: 'center', backgroundColor: props.color != undefined ? props.color : '#fff' , borderColor:'lightgrey',borderRadius:5,elevation:3
+                ,paddingLeft: 5, width: Dimensions.get('screen').width * (props.widthArr), paddingTop:normalize(5) , paddingBottom: normalize(5), height: Dimensions.get('screen').height * 0.035,elevation:3,marginHorizontal:normalize(2),marginVertical:normalize(2),
+            }}
+        >
+            {props.gender != undefined ?
+                <Image
+                    source={props.gender == 'M' ? {uri: `${APIURL}file/getCommonFile/image/Male(2).png`} : {uri: `${APIURL}file/getCommonFile/image/FemaleI(1).png`}}
+                    style={{
+                        width: normalize(20), height: normalize(20), resizeMode: 'contain',
+                        position: 'absolute', left: normalize(12),
+                    }}
+                /> : null}
+
+            {props.insurance != undefined ?
+                <Text style={{ position: 'absolute', bottom: 0, fontSize: normalize(10), right: 2 }}>{props.insurance}</Text> : null}
+
+            <Text adjustsFontSizeToFit numberOfLines={1} style={{
+                fontSize: normalize(13), fontWeight: 'bold',
+                color: props.status != undefined && props.status != null ? getBedStatusColor(props.status) : 'black',
+            }}>{props.displaytext}</Text>
+        </View>
+    );
+    function getBedStatusColor(params) {
+        switch (params) {
+            case 1: return 'green'; //patient there
+            case 0: return 'orange'; //Discharged soon to be empty
+            default: return '#ea4b68'; //vaccant
+        }
+    }
+}

package/src/Custom/TableComponent/CTextHeader.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Text, View, Dimensions, TouchableOpacity } from 'react-native';
+import { ValueCheck } from '../../CommonStyle/ComponentFunctions';
+import { normalize } from '../../CommonStyle/componentStyle';
+
+export default function CTextHeader(props) {
+    return (
+        <TouchableOpacity onPress={() => console.log('JJJJ')}
+            disabled={props.Sort != undefined ? false : true}
+            style={{
+                borderWidth: 1, borderColor: props.borderColor, marginHorizontal: props.marginHorizontal, borderRadius: props.borderRadius, elevation: props.elevation
+                , width: props.widthArr, height: normalize(20), backgroundColor: props.bgColor, justifyContent: 'center',
+            }}>
+            <Text style={{ color: props.color, fontSize: props.fontSize ? props.fontSize : normalize(11), alignSelf: props.alignself ? props.alignself : 'center', fontWeight: props.fontweight ? props.fontweight : 'normal', borderWidth: 0, textAlign: props.textAlign ? props.textAlign : null }} adjustsFontSizeToFit>{props.text}  {ValueCheck(props.star) ? <Text style={{ color: 'red', fontWeight: 'bold', fontSize: normalize(13) }}>*</Text> : null}</Text>
+        </TouchableOpacity>
+    );
+}