@jescon-technologies/react-native-ui-kit 0.0.4 → 0.0.6

package/src/Screens/SearchScreen.js

@@ -0,0 +1,582 @@
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import React, { useContext, useEffect, useState} from 'react';
+import { FlatList } from 'react-native';
+//import { useNavigation } from '@react-navigation/native';
+import moment from 'moment';
+
+// Custom Components
+import FilterInput from '../CustomComponents/FilterInput';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import HeaderBlock from './HeaderBlock';
+import CContainerView from '../CustomComponents/CContainerView';
+import CDetailView from '../CustomComponents/CDetailView';
+import Loader from '../Custom/Loader';
+import { normalize } from '../CommonStyle/componentStyle';
+import CFooterView from '../CustomComponents/CFooterView';
+import ContextBio from '../Handlers/ContextBio';
+import HShadowCountButton from '../HOC/HShadowCountButton';
+import { CButtonShadow, CShadowDynamic } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../../../../../src/Common/Global';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import CCard from '../Custom/CCard';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import HShadowButton from '../HOC/HShadowButton';
+
+const CSearchScreen = ({ route }) => {
+  console.log('SearchScreen route params:', JSON.stringify(route));
+  const { searchKey } = route?.params || {};
+  const { filteredData, setFilteredData } = useContext(ContextBio);
+  const [inputs, setInputs] = useState([]);
+  const [enteredInputs, setEnteredInputs] = useState([]);
+  const [operators, setOperators] = useState([]);
+  const [txtOperators, setTxtOperators] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [valuesVisibility, setValuesVisibility] = useState(false);
+  const [selectedInput, setSelectedInput] = useState(null);
+  const [option, setOption] = useState(null);
+  const navigation = useNavigation();
+  const FooterArr = [
+    {
+      keyid: 2,
+      displaytext: 'Search',
+      size: 10,
+      iconname: 'search',
+      iconcolor: '#a30e0e',
+      fontcolor: '#a30e0e',
+      shadowcolor: '#ffe5e5',
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: 'D02',
+      count: false,
+      countValue: 0,
+    },
+    {
+      keyid: 1,
+      displaytext: !valuesVisibility ? 'View' : 'Hide',
+      size: 10,
+      iconname: 'file-alt',
+      iconcolor: '#a30e0e',
+      fontcolor: '#a30e0e',
+      shadowcolor: '#ffe5e5',
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: 'D01',
+      count: false,
+      countValue: 0,
+    },
+    {
+      keyid: 3,
+      displaytext: 'Clear All',
+      size: 10,
+      iconname: 'eraser',
+      iconcolor: '#a30e0e',
+      fontcolor: '#a30e0e',
+      shadowcolor: '#ffe5e5',
+      selected: false,
+      visibility: true,
+      iconsize: 20,
+      functionid: 'D03',
+      count: false,
+      countValue: 0,
+    },
+  ];
+
+  const clearAllInputs = () => {
+    const clearedInputs = inputs.map(input => ({
+      ...input,
+      searchvalue: Array.isArray(input.searchvalue) ? [] : '',
+      selected: false,
+    }));
+
+    setInputs(clearedInputs);
+    setEnteredInputs([]);
+    setFilteredData([]);
+  };
+
+  const onPressFooter = val => {
+    switch (val.functionid) {
+      case 'D01':
+        setValuesVisibility(!valuesVisibility);
+        break;
+      case 'D02':
+        handleSearch();
+        break;
+      case 'D03':
+        clearAllInputs();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleInputSelect = inputIndex => {
+    setSelectedInput(inputIndex);
+  };
+
+  const handleCardPress = itemData => {
+    navigation.navigate('Dashboard', {
+      patientData: itemData,
+    });
+  };
+
+  const handleInputChange = (index, text) => {
+    const newInputs = [...inputs];
+    newInputs[index].searchvalue = text;
+
+    setEnteredInputs(prev => {
+      const updated = prev.filter(item => item.index !== index);
+      return [...updated, { ...newInputs[index], index }];
+    });
+    setInputs(newInputs);
+  };
+
+  const handleSearch = () => {
+    const updatedInputs = inputs.map(input => ({
+      ...input,
+      selected: Object.keys(input.searchvalue || {}).length > 0,
+    }));
+
+    const groups = {
+      procedurename: 'rnsusearchdetail',
+      search: updatedInputs,
+      searchkey: searchKey,
+    };
+    const dataset = { groups };
+
+    console.log('Search dataset:', JSON.stringify(dataset));
+    const buttonapi = `${APIURL}insurancesaveresponse/RnResponse`;
+    console.log('buttonapi', JSON.stringify(buttonapi))
+    setSearchLoading(true);
+    NetworkServiceCall('post', buttonapi, dataset).then(function (response) {
+      console.log('RESPONSEDATA-------', JSON.stringify(response))
+      if (response.httpstatus == 200) {
+        setFilteredData(response.data.response.cardcontent);
+        addTextOperators('');
+        addOperators('');
+        setValuesVisibility(false);
+      } else {
+        console.log('Search failed');
+      }
+      setSearchLoading(false);
+    });
+  };
+
+  const addOptionsToSelectInputs = data => {
+    setOption(data);
+    const updatedInputs = inputs.map(input => {
+      if (input.searchtype === 'select') {
+        return { ...input, searchoperators: data };
+      }
+      return input;
+    });
+
+    return updatedInputs;
+  };
+
+  const addOptionsUpdate = data => {
+    setInputs(addOptionsToSelectInputs(data));
+  };
+
+  const addOperators = data => {
+    setOperators(data);
+    const updatedInputs = inputs.map(input => {
+      if (
+        input.searchtype === 'number' ||
+        input.searchtype === 'date' ||
+        input.searchtype === 'text' ||
+        input.searchtype === 'mobile'
+      ) {
+        return { ...input, searchoperators: data };
+      }
+      return input;
+    });
+
+    return updatedInputs;
+  };
+
+  const addOperatorsUpdate = data => {
+    setInputs(addOperators(data));
+  };
+
+  const addTextOperators = data => {
+    setTxtOperators(data);
+    const updatedInputs = inputs.map(input => {
+      if (input.searchtype === 'text' || input.searchtype === 'mobile') {
+        return { ...input, searchoperators: data };
+      }
+      return input;
+    });
+    return updatedInputs;
+  };
+
+  const addTextOperatorsUpdate = data => {
+    setInputs(addTextOperators(data));
+  };
+
+  function showOperatorsLabel(value) {
+    const operator = operators.value === value;
+    return operator ? operators.displayvalue : null;
+  }
+
+  function showTextOperatorsLabel(value) {
+    const operator = txtOperators?.value === value;
+    return operator ? txtOperators.displayvalue : null;
+  }
+
+  function genderOptionLabel(value) {
+    const opt = option?.value === value;
+    return opt ? option.displayvalue : null;
+  }
+
+  function getSearchLabels() {
+    setLoading(true);
+    const buttonapi = `${APIURL}insuranceadvanceget/emrcommonget/rnsusearchlayout ${searchKey}`;
+
+    NetworkServiceCall('get', buttonapi, '').then(function (response) {
+      if (response.httpstatus == 200 && response.data) {
+        setInputs(response.data.search);
+      } else {
+        //notifyMessage('No Labels found');
+      }
+      setLoading(false);
+    });
+  }
+
+  useEffect(() => {
+    getSearchLabels();
+  }, []);
+
+  return (
+    <CContainerView>
+      { <HeaderBlock
+        navigation={navigation.navigate}
+        callback={() => navigation.navigate('Dashboard')}
+      /> }
+
+      <CDetailView hideCard={true}>
+        {loading ? (
+          <View style={styles.centerContainer}>
+            <Loader />
+          </View>
+        ) : (
+          <View style={styles.container}>
+            <View style={styles.inputsContainer}>
+              <ScrollView
+                horizontal={true}
+                contentContainerStyle={styles.scrollContent}
+                showsHorizontalScrollIndicator={false}>
+                <View style={styles.inputsRow}>
+                  {inputs?.map((input, index) => (
+                    <View style={{padding:Platform.OS === 'web'&& '1%'}}>
+                    <FilterInput
+                      key={input?.searchlabel + index}
+                      onSelect={() => handleInputSelect(index)}
+                      selected={selectedInput === index}
+                      label={input?.searchlabel}
+                      iconName={input?.searchicon}
+                      iconSize={24}
+                      btnBorderColor={'#094485'}
+                      inputValue={input?.searchvalue}
+                      type={input?.searchtype}
+                      addTextOperators={addTextOperatorsUpdate}
+                      addOptionsUpdate={addOptionsUpdate}
+                      addOperatorsUpdate={addOperatorsUpdate}
+                      onChangeText={text => handleInputChange(index, text)}
+                    />
+                    </View>
+                  ))}
+                </View>
+              </ScrollView>
+
+              {valuesVisibility && (
+                <View style={styles.valuesContainer}>
+                  <Text style={styles.valuesTitle}>Current Filters:</Text>
+                  <ScrollView>
+                    {enteredInputs.map((input, index) => (
+                      <View key={input.searchlabel + index} style={styles.valueItem}>
+                        {input.searchtype !== 'date' &&
+                          input.searchtype !== 'number' &&
+                          input.searchtype !== 'text' &&
+                          input.searchtype !== 'mobile' ? (
+                          input.searchvalue ? (
+                            <Text style={styles.valueText}>
+                              <Text style={styles.valueLabel}>{input.searchlabel}:</Text>{' '}
+                              {genderOptionLabel(input.searchvalue.firstValue)}
+                            </Text>
+                          ) : null
+                        ) : null}
+
+                        {input.searchtype === 'date' &&
+                          Object.keys(input.searchvalue).length > 0 ? (
+                          <Text style={styles.valueText}>
+                            <Text style={styles.valueLabel}>{input.searchlabel}:</Text>{' '}
+                            {moment(input.searchvalue.firstValue).format(
+                              'DD-MM-YYYY',
+                            )}{' '}
+                            , {showOperatorsLabel(input?.searchvalue.operator)}{' '}
+                            ,{' '}
+                            {moment(input.searchvalue.secondValue).format(
+                              'DD-MM-YYYY',
+                            )}
+                          </Text>
+                        ) : null}
+
+                        {input.searchtype === 'number' &&
+                          Object.keys(input.searchvalue).length > 0 ? (
+                          <Text style={styles.valueText}>
+                            <Text style={styles.valueLabel}>{input.searchlabel}:</Text>{' '}
+                            {input.searchvalue.firstValue}{' '}
+                            , {showOperatorsLabel(input?.searchvalue.operator)}{' '}
+                            , {input.searchvalue.secondValue}
+                          </Text>
+                        ) : null}
+
+                        {(input.searchtype === 'text' ||
+                          input.searchtype === 'mobile') &&
+                          Object.keys(input.searchvalue).length > 0 ? (
+                          <Text style={styles.valueText}>
+                            <Text style={styles.valueLabel}>{input.searchlabel}:</Text>{' '}
+                            {input.searchvalue.firstValue}{' '}
+                            {showTextOperatorsLabel(
+                              input?.searchvalue.operator,
+                            )}
+                          </Text>
+                        ) : null}
+                      </View>
+                    ))}
+                  </ScrollView>
+                </View>
+              )}
+            </View>
+
+            <View style={styles.resultsContainer}>
+              <View style={styles.resultsHeader}>
+                <Text style={styles.resultsTitle}>Search Results</Text>
+                {filteredData?.length > 0 && (
+                  <Text style={styles.resultsCount}>
+                    {filteredData.length} {filteredData.length === 1 ? 'result' : 'results'}
+                  </Text>
+                )}
+              </View>
+
+              {searchLoading ? (
+                <View style={styles.centerContainer}>
+                  <Loader />
+                </View>
+              ) : filteredData?.length > 0 ? (
+                <FlatList
+                  data={filteredData}
+                  keyExtractor={(item, index) =>
+                    item?.backgroundColor?.toString() + index
+                  }
+                  renderItem={({ item, i }) => (
+                    <CCard
+                      onPress={() => {
+                        handleCardPress(item);
+                      }}
+                      data={[
+                        {
+                          datalistid: i + 1,
+                          bordercolor: '#143A81',
+                          hopapatient: item?.hopapatient,
+                          verified: false,
+                          homrpatientchartdetailstatus: 0,
+                          homrpatientchart: 0,
+                          flag: item?.flag,
+                          profilecontent: [
+                            {
+                              patientno: item?.id,
+                              patientname: item?.name,
+                              heading3: '',
+                              patienttype: 'IP',
+                              gender:
+                                item?.description == 'F' ? 'FEMALE' : 'MALE',
+                              age: item?.detail,
+                              mobileno: item?.mobileno,
+                              badgecolor: 'rgb(255,255,255)',
+                              badgenumber: item?.bedno,
+                              logo1: '',
+                              place: item?.district,
+                              clinicalunit: item?.clinicalunit,
+                              admitteddoctor: item?.admitteddoctor,
+                              subheading3: item?.housename,
+                            },
+                          ],
+                        },
+                      ]}
+                    />
+                  )}
+                  contentContainerStyle={styles.listContent}
+                  showsVerticalScrollIndicator={false}
+                />
+              ) : (
+                <View style={styles.emptyState}>
+                  <Text style={styles.emptyStateText}>
+                    No results found. Try adjusting your search criteria.
+                  </Text>
+                </View>
+              )}
+            </View>
+          </View>
+        )}
+      </CDetailView>
+
+      <CFooterView style={styles.footerButtons}>
+        {FooterArr.map((item, i) =>
+          item.visibility ? (
+            <HShadowButton
+              key={item.keyid}
+              useicon={true}
+              usetext={true}
+              disabled={false}
+              buttonstyle={[styles.footerButton, CShadowDynamic(-3, 3, 5, 0, Global.AppTheme.primary_color)]}
+              iconcolor={Global.AppTheme.primary_color}
+              icongroup={item.icongroup ? item.icongroup : 5}
+              iconname={item.iconname}
+              iconsize={normalize(24)}
+              displaytext={item.displaytext}
+              count={item.count}
+              countValue={item.countValue}
+              buttonCallback={() => onPressFooter(item)}
+              textstyle={styles.footerButtonText}
+            />
+          ) : null,
+        )}
+      </CFooterView>
+    </CContainerView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+  },
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inputsContainer: {
+    paddingVertical: 5,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e9ecef',
+  },
+  scrollContent: {
+    paddingHorizontal: 10,
+  },
+  inputsRow: {
+    flexDirection: 'row',
+  },
+  valuesContainer: {
+    backgroundColor: '#f8f9fa',
+    borderWidth: 1,
+    margin: 10,
+    marginTop: 5,
+    borderRadius: 8,
+    borderColor: '#dee2e6',
+    padding: 15,
+    maxHeight: 150,
+  },
+  valuesTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#094485',
+    marginBottom: 10,
+  },
+  valueItem: {
+    paddingVertical: 3,
+  },
+  valueText: {
+    color: '#495057',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  valueLabel: {
+    fontWeight: '600',
+    color: '#343a40',
+  },
+  resultsContainer: {
+    flex: 2,
+    padding: 10,
+  },
+  resultsHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 15,
+    paddingHorizontal: 5,
+  },
+  resultsTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#094485',
+  },
+  resultsCount: {
+    fontSize: 14,
+    color: '#6c757d',
+  },
+  listContent: {
+    paddingBottom: 10,
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 40,
+  },
+  emptyStateText: {
+    fontSize: 16,
+    color: '#6c757d',
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  footerButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: "flex-start",
+  },
+  footerButton: {
+    borderRadius: 10,
+    borderWidth: 0.5,
+    height: Dimensions.get('screen').height * 0.054,
+    width: Dimensions.get('screen').height * 0.07,
+    backgroundColor: '#fff',
+    paddingHorizontal: 0,
+    paddingBottom: 0,
+    paddingTop: 0,
+    borderColor: Global.AppTheme.primary_color,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: normalize(3),
+    elevation: 4, // raiseLevel equivalent for Android
+    shadowColor: '#ffe5e5', // optional for iOS shadow
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+  },
+  footerButtonText: {
+    color: Global.AppTheme.primary_color,
+    fontSize: normalize(10),
+    fontWeight: '600',
+    textAlign: 'center',
+    alignSelf: 'center',
+  },
+});
+
+
+export default CSearchScreen;