@jescon-technologies/react-native-ui-kit 0.0.1 → 0.0.2

package/src/Media/DocumentScreen.js

@@ -0,0 +1,367 @@
+import React, {useState, useEffect, memo, useContext} from 'react';
+import {
+  SafeAreaView,
+  Image,
+  StyleSheet,
+  Dimensions,
+  Button,
+  FlatList,
+  Text,
+  View,
+  TouchableOpacity,
+  PermissionsAndroid,
+  ActivityIndicator,
+  Platform,
+} from 'react-native';
+import {audioURL, pdfURL, APIURL} from '../Common/apiConstants';
+import Fontisto from 'react-native-vector-icons/Fontisto';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import {Global} from '../Common/Global';
+// import DocumentPicker from 'react-native-document-picker';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import {notifyMessage} from '../CommonStyle/ComponentFunctions';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+
+function DocumentScreen(props) {
+  const {responseJSON, setResponseJSON} = useContext(
+    EmrResponseComponentContext,
+  );
+  const navigation = useNavigation();
+  const windowWidth = Dimensions.get('window').width;
+  const windowHeight = Dimensions.get('window').height;
+
+  const [data, setData] = useState(
+    props.data?.savedpdf ? props?.data.savedpdf : null,
+  );
+  const [refreshCount, setrefreshCount] = useState(1);
+  const [mediaUrlLink, setMediaUrlLink] = useState(false);
+  const [isAudioShow, setAudioShow] = useState(false);
+  const [deleteAudio, setDeleteAudio] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [process, setProcess] = useState('');
+  const [disablesave, setDisablesave] = useState(true);
+
+  useEffect(() => {
+    props.setData(data);
+  }, [data]);
+
+  function deleteSelectedAudio(itemid) {
+    data
+      .filter(item => item.deletestatus === true)
+      .forEach(item => data.splice(data.indexOf(item), 1));
+    setDeleteAudio(!deleteAudio);
+    props.editStatus(1);
+    setrefreshCount(refreshCount + 1);
+    console.log('audiooooooooooooooooooooo', data);
+  }
+
+  function changeStatus(data) {
+    data.item.deletestatus = !data.item.deletestatus;
+    setrefreshCount(refreshCount + 1);
+  }
+
+  function renderDocument(data) {
+    return (
+      <View style={{flexDirection: 'row'}}>
+        <View style={{alignItems: 'center', flexDirection: 'row'}}>
+          <TouchableOpacity
+            onLongPress={() => setDeleteAudio(true)}
+            style={{flexDirection: 'row'}}
+            onPress={() =>
+              navigation.navigate('PdfViewer', {
+                document: pdfURL + data.item.filename,
+              })
+            }>
+            <Image
+              style={{
+                height: windowHeight * 0.15,
+                width: windowWidth * 0.3,
+                margin: 5,
+                resizeMode: 'cover',
+                borderRadius: 10,
+              }}
+              source={{
+                uri: 'https://play-lh.googleusercontent.com/nufRXPpDI9XP8mPdAvOoJULuBIH_OK4YbZZVu8i_-eDPulZpgb-Xp-EmI8Z53AlXHpqX',
+              }}
+            />
+          </TouchableOpacity>
+          {deleteAudio ? (
+            <TouchableOpacity onPress={() => changeStatus(data)}>
+              <View style={{justifyContent: 'center', alignItems: 'center'}}>
+                <Fontisto
+                  name={
+                    !data.item.deletestatus
+                      ? 'checkbox-passive'
+                      : 'checkbox-active'
+                  }
+                  size={25}
+                  color={!data.item.deletestatus ? 'lightgrey' : 'blue'}
+                />
+              </View>
+            </TouchableOpacity>
+          ) : null}
+        </View>
+      </View>
+    );
+  }
+
+  function firebasepdfsave() {
+    data.map(item => {
+      if (item.uritype == false) {
+        firebaseupload(item);
+      }
+    });
+  }
+
+  const firebaseupload = async item => {
+    // console.log("firebaseupload", item.uri)
+  };
+
+  const isPermitted = async () => {
+    if (Platform.OS === 'android') {
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+        );
+        return granted === PermissionsAndroid.RESULTS.GRANTED;
+      } catch (err) {
+        alert('Write permission err', err);
+        return false;
+      }
+    } else {
+      return true;
+    }
+  };
+
+  const getResolvedPath = async (uri, filen) => {
+    setLoading(true);
+    const fileBase64 = await ReactNativeBlobUtil.fs.readFile(uri, 'base64');
+    const relativePath = ReactNativeBlobUtil.fs.dirs.CacheDir;
+    const fileName = `${filen}`;
+    const path = `${relativePath}/${fileName}`;
+
+    await ReactNativeBlobUtil.fs.writeFile(path, fileBase64, 'base64');
+    return {relativePath, fileName, path};
+  };
+
+  const browsePDF = async () => {
+    if (await isPermitted()) {
+      try {
+        const fileDetails = await DocumentPicker.pick({
+          type: [DocumentPicker.types.pdf],
+        });
+        const {relativePath, fileName, path} = await getResolvedPath(
+          fileDetails[0].uri,
+          fileDetails[0].name,
+        );
+
+        let fileid_autogenerate =
+          data != null && data.length > 0 ? data.length : 0;
+        let dataset = {
+          fileid: fileid_autogenerate + 1,
+          uri: 'file://' + path,
+          filename: fileDetails[0].name,
+          uritype: false,
+        };
+
+        setLoading(false);
+        Media_Upload(dataset);
+
+      } catch (error) {
+        notifyMessage(
+          DocumentPicker.isCancel(error)
+            ? 'Canceled'
+            : 'Unknown Error: ' + JSON.stringify(error),
+          2,
+        );
+      }
+    }
+  };
+
+  async function Media_Upload(image) {
+    setLoading(true);
+    console.log('imageeeeeeeeeee upload', JSON.stringify(image));
+    let date = new Date().getDate();
+    let month = new Date().getMonth() + 1;
+    let year = new Date().getFullYear();
+    let hours = new Date().getHours();
+    let min = new Date().getMinutes();
+    let sec = new Date().getSeconds();
+    let millisec = new Date().getMilliseconds();
+    let uniquename = '.pdf';
+
+    let fileid_autogenerate = data != null && data.length > 0 ? data.length : 0;
+    let dataset2 = {
+      fileid: fileid_autogenerate + 1,
+      filename: uniquename,
+      filetype: 'application/pdf',
+      uri: image.uri,
+      uritype: false,
+    };
+
+    if (!dataset2.uritype) {
+      if (dataset2.uri) {
+        var formData = new FormData();
+        formData.append('file', {
+          uri: dataset2.uri,
+          type: dataset2.filetype,
+          name: dataset2.filename,
+        });
+
+        console.log('formData>>>>>>>>>>>>>', JSON.stringify(formData));
+        let buttonapi = APIURL + 'file/fileupload/emr/document';
+        console.log('buttonapi', buttonapi);
+
+        NetworkServiceCall('multiform', buttonapi, formData)
+          .then(function (responsedata) {
+            console.log(
+              'responsedata>>>>>>>>>>>>>>>',
+              JSON.stringify(responsedata),
+            );
+            if (responsedata.httpstatus == 200) {
+              dataset2.filename = responsedata.data.fileuri;
+              setData(
+                data != null
+                  ? prevData => [...prevData, dataset2.filename]
+                  : [dataset2.filename],
+              );
+              responseJSON.consultationEdit.editStatus = true;
+              setrefreshCount(refreshCount + 1);
+              props.editStatus(1);
+              props.data.usertype =
+                Global.PatientDetails != undefined &&
+                Global.PatientDetails.usertype != undefined &&
+                Global.PatientDetails.usertype != null
+                  ? Global.PatientDetails.usertype
+                  : 'Z';
+              props.data.suuser =
+                Global.userData != undefined &&
+                Global.userData.suuser != undefined &&
+                Global.userData.suuser != null
+                  ? Global.userData.suuser
+                  : 0;
+              setLoading(false);
+            } else {
+              setLoading(false);
+            }
+          })
+          .catch(error => {
+            console.log('errorrrrrrrrrr', JSON.stringify(error));
+            setLoading(false);
+          });
+      }
+    }
+  }
+
+  return (
+    <View style={{flex: 1}}>
+      <View style={styles.itemContainer}>
+        {/* Delete Button */}
+        {deleteAudio && (
+          <TouchableOpacity
+            style={styles.deleteButton}
+            onPress={deleteSelectedAudio}>
+            <AntDesign name="delete" size={30} color={'red'} />
+            <Text style={styles.deleteText}>Delete Selected</Text>
+          </TouchableOpacity>
+        )}
+
+        {/* Documents Grid */}
+        <FlatList
+          data={data}
+          renderItem={renderDocument}
+          contentContainerStyle={{alignItems: 'center', paddingTop: 10}}
+          keyExtractor={item => item.id}
+          numColumns={3}
+        />
+
+        {/* Loading Indicator */}
+        {loading && (
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color="#0000ff" />
+          </View>
+        )}
+      </View>
+
+      {/* Bottom Action Bar */}
+      <View style={styles.bottomActionBar}>
+        <TouchableOpacity
+          style={styles.actionButton}
+          onPress={browsePDF}>
+          <MaterialIcons name="insert-drive-file" color={'white'} size={24} />
+          <Text style={styles.actionButtonText}>Browse PDF</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.actionButton, disablesave && styles.disabledButton]}
+          disabled={disablesave}
+          onPress={firebasepdfsave}>
+          <FontAwesome name="save" color={'white'} size={24} />
+          <Text style={styles.actionButtonText}>Save All</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  deleteButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 10,
+    backgroundColor: '#ffebee',
+    marginHorizontal: 10,
+    borderRadius: 5,
+    marginTop: 10,
+  },
+  deleteText: {
+    marginLeft: 10,
+    color: 'red',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  loadingContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  },
+  bottomActionBar: {
+    flexDirection: 'row',
+    backgroundColor: 'darkblue',
+    height: 60,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  actionButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 10,
+  },
+  actionButtonText: {
+    color: 'white',
+    fontSize: 12,
+    marginTop: 5,
+    textAlign: 'center',
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+});
+
+export default memo(DocumentScreen);