831 lines
No EOL
41 KiB
JavaScript
831 lines
No EOL
41 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import styled from 'styled-components';
|
|
import { useCallFeed } from '../hooks/useCallFeed';
|
|
import { Platform, Linking, View, ScrollView, Text, TouchableOpacity } from 'react-native';
|
|
import { useLocalSearchParams, router } from 'expo-router';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { AccidentAndEmergency } from "healthicons-react-native/dist/outline";
|
|
import { Phone } from "healthicons-react-native/dist/filled";
|
|
import {
|
|
PageHeader,
|
|
PageFooter,
|
|
} from '../components/generalHelpers.jsx';
|
|
import ActionSheet from 'react-native-actions-sheet';
|
|
|
|
const DepartmentActionSheet = styled(ActionSheet)``;
|
|
|
|
export default function Call() {
|
|
const { callDetails } = useLocalSearchParams();
|
|
const actionSheetRef = useRef(null);
|
|
const callFeed = useCallFeed();
|
|
|
|
const {
|
|
departments,
|
|
callIconMap,
|
|
callColorSelector,
|
|
formatCallTimePast,
|
|
formatCallDateTime
|
|
} = callFeed;
|
|
|
|
const {
|
|
departmentTypeMap,
|
|
accountDetails,
|
|
selectedDepartment,
|
|
setSelectedDepartment,
|
|
updateSelectedDepartment,
|
|
selectedDepartmentColorPicker,
|
|
deptList,
|
|
} = departments;
|
|
|
|
const decoded = atob(callDetails);
|
|
|
|
const { Incident, Address, Person, Response } = JSON.parse(decoded);
|
|
const { CallThemes } = accountDetails;
|
|
const {
|
|
IncID,
|
|
IncNumber,
|
|
JurisdictionNumber,
|
|
ServiceNumber,
|
|
ServiceID,
|
|
IncDate,
|
|
IncNature,
|
|
IncNatureCode,
|
|
IncNatureCodeDesc,
|
|
Notes,
|
|
Status,
|
|
Origin,
|
|
} = Incident;
|
|
const {
|
|
StreetAddress,
|
|
AddressApartment,
|
|
Town,
|
|
State,
|
|
ZipCode,
|
|
Latitude,
|
|
Longitude,
|
|
County,
|
|
Intersection1,
|
|
Intersection2,
|
|
LocationName,
|
|
WeatherCondition,
|
|
} = Address;
|
|
const {
|
|
Name,
|
|
Age,
|
|
Gender,
|
|
Statement,
|
|
Conscious,
|
|
Breathing,
|
|
CallBackNumber,
|
|
} = Person;
|
|
const {
|
|
Units
|
|
} = Response;
|
|
|
|
const SelectedIcon = callIconMap[IncNature] || AccidentAndEmergency;
|
|
|
|
const ownDepartmentResponse = Units?.map((unit) => {
|
|
if (unit?.Department === selectedDepartment?.dept ||
|
|
selectedDepartment?.addDepts?.includes(unit?.Department)) {
|
|
return unit;
|
|
}
|
|
return null;
|
|
})?.filter((filterItem) => {
|
|
return filterItem;
|
|
});
|
|
|
|
const mutualAidDepartmentResponse = Units?.map((unit) => {
|
|
if (unit?.Department !== selectedDepartment?.dept &&
|
|
!selectedDepartment?.addDepts?.includes(unit?.Department)) {
|
|
return unit;
|
|
}
|
|
return null;
|
|
})?.filter((filterItem) => {
|
|
return filterItem;
|
|
});;
|
|
|
|
const formatResponseTimes = (time) => {
|
|
if (time === null) {
|
|
return '';
|
|
}
|
|
const initTime = new Date(time);
|
|
const hours = initTime.getHours().toString().padStart(2, '0');
|
|
const minutes = initTime.getMinutes().toString().padStart(2, '0');
|
|
return `${hours}:${minutes}`;
|
|
};
|
|
|
|
const openMaps = (latitude, longitude) => {
|
|
const daddr = `${latitude},${longitude}`;
|
|
const company = Platform.OS === "ios" ? "apple" : "google";
|
|
Linking.openURL(`http://maps.${company}.com/maps?daddr=${daddr}`);
|
|
};
|
|
|
|
const callNumber = (number) => {
|
|
const formattedNumber = number.replace(/[()\-\s]/g, '');
|
|
Linking.openURL(`tel:${formattedNumber}`);
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<PageHeader>
|
|
<View
|
|
style={{
|
|
flexDirection: 'column',
|
|
height: 80,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
paddingBottom: 7
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
style={{
|
|
borderRadius: 6,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: '#333',
|
|
shadowOpacity: .8,
|
|
shadowRadius: 2,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 2,
|
|
}}
|
|
onPress={() => {
|
|
actionSheetRef.current?.show();
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: selectedDepartmentColorPicker(selectedDepartment?.type),
|
|
fontWeight: 600,
|
|
fontSize: '14'
|
|
}}
|
|
>
|
|
{selectedDepartment?.deptAbv}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</PageHeader>
|
|
<ScrollView>
|
|
<StatusBar style="dark" />
|
|
<SafeAreaView />
|
|
<View style={{ flexDirection: 'column', padding: 20 }}>
|
|
<View key="callDateAndTime"
|
|
style={{
|
|
paddingBottom: 6,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between'
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 12 }}>{formatCallDateTime(IncDate)}</Text>
|
|
<Text style={{ fontSize: 12 }}>{formatCallTimePast(IncDate)}</Text>
|
|
</View>
|
|
<View key="callDetails" style={{ padding: 2 }}>
|
|
<View
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: callColorSelector(
|
|
IncNatureCode,
|
|
IncNature,
|
|
Status
|
|
),
|
|
shadowOpacity: 1,
|
|
shadowRadius: 5,
|
|
padding: 10,
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'column' }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<SelectedIcon
|
|
color={callColorSelector(
|
|
IncNatureCode,
|
|
IncNature,
|
|
Status
|
|
)}
|
|
opacity={0.3}
|
|
width={56}
|
|
height={56}
|
|
/>
|
|
<View style={{ flexDirection: 'column' }}>
|
|
<Text
|
|
style={{
|
|
color: 'black',
|
|
fontWeight: 600,
|
|
fontSize: 16
|
|
}}
|
|
>
|
|
{`${IncNature}`}
|
|
</Text>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
<Text
|
|
style={{
|
|
color: 'black',
|
|
fontSize: 12,
|
|
textShadowColor: callColorSelector(
|
|
IncNatureCode,
|
|
IncNature,
|
|
Status
|
|
),
|
|
textShadowRadius: 1
|
|
}}
|
|
>
|
|
{`${IncNatureCodeDesc}`}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
{Status === 'CLOSED' ? (
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
color: '#'
|
|
}}
|
|
>
|
|
This Incident is Closed.
|
|
</Text>
|
|
) : <Text></Text> }
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
textAlign: 'right'
|
|
}}
|
|
>
|
|
{`Incident #: ${ServiceNumber}`}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ margin: 6 }}/>
|
|
<View key="callLocation" style={{ padding: 2 }}>
|
|
<View
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: 'grey',
|
|
shadowOpacity: 1,
|
|
shadowRadius: 1,
|
|
padding: 10,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'top',
|
|
justifyContent: 'space-between'
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'column' }}>
|
|
{LocationName ? (
|
|
<Text
|
|
style={{
|
|
color: 'black',
|
|
fontWeight: 600,
|
|
fontSize: 16
|
|
}}
|
|
>
|
|
{`${LocationName}`}
|
|
</Text>
|
|
) : null }
|
|
<TouchableOpacity
|
|
onLongPress={() => {
|
|
return openMaps(Latitude, Longitude);
|
|
}}
|
|
>
|
|
<Text
|
|
style={[{
|
|
color: 'black',
|
|
}, LocationName ? {} : {fontSize: 12, fontWeight: 600}]}
|
|
>
|
|
{`${StreetAddress}`}
|
|
</Text>
|
|
<Text
|
|
style={[{
|
|
color: 'black',
|
|
}, LocationName ? {} : {fontSize: 12, fontWeight: 600}]}
|
|
>
|
|
{`${Town}, ${State}`}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
{AddressApartment ? (
|
|
<View>
|
|
<View style={{ margin: 10 }} />
|
|
<Text
|
|
style={[{
|
|
color: 'black',
|
|
}, LocationName ? {} : {fontSize: 12, fontWeight: 600}]}
|
|
>
|
|
{`${AddressApartment}`}
|
|
</Text>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
<View style={{ flexDirection: 'column' }}>
|
|
<View
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: 'grey',
|
|
shadowOpacity: 1,
|
|
shadowRadius: 1,
|
|
padding: 25,
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 12 }}>Map</Text>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#ECEDEE',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: 'grey',
|
|
shadowOpacity: 1,
|
|
shadowRadius: 1,
|
|
marginTop: 6,
|
|
paddingLeft: 6,
|
|
paddingVertical: 6,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center'
|
|
}}
|
|
onPress={() => {
|
|
return openMaps(Latitude, Longitude);
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 10 }}>Nav</Text>
|
|
<Ionicons name="chevron-forward-outline" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ margin: 6 }}/>
|
|
<View key="callCrossStreets"
|
|
style={{
|
|
padding: 2,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
marginHorizontal: 2,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: 'grey',
|
|
shadowOpacity: 1,
|
|
shadowRadius: 1,
|
|
paddingVertical: 14,
|
|
width: "48%"
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
textAlign: 'center'
|
|
}}
|
|
>
|
|
{Intersection1}
|
|
</Text>
|
|
</View>
|
|
<View style={{ paddingHorizontal: "3%" }}/>
|
|
<View
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: 'grey',
|
|
shadowOpacity: 1,
|
|
shadowRadius: 1,
|
|
paddingVertical: 14,
|
|
width: "48%"
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
textAlign: 'center'
|
|
}}
|
|
>
|
|
{Intersection2}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{ margin: 6 }}/>
|
|
<View key="callerInformation" style={{ padding: 2 }}>
|
|
<View
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: 'grey',
|
|
shadowOpacity: 1,
|
|
shadowRadius: 1,
|
|
padding: 10,
|
|
}}
|
|
>
|
|
{selectedDepartment?.supervisor ? (
|
|
<View>
|
|
<View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginHorizontal: 10
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'column' }}>
|
|
<Text
|
|
style={{
|
|
color: 'black',
|
|
fontWeight: 600,
|
|
fontSize: 16
|
|
}}
|
|
>
|
|
{`${Name}`}
|
|
</Text>
|
|
<TouchableOpacity
|
|
onLongPress={() => {
|
|
return callNumber(CallBackNumber);
|
|
}}
|
|
>
|
|
<Text
|
|
style={{ color: 'black', fontSize: 12 }}
|
|
>
|
|
{`${CallBackNumber}`}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<TouchableOpacity
|
|
onLongPress={() => {
|
|
return callNumber(CallBackNumber);
|
|
}}
|
|
>
|
|
<Phone
|
|
color='blue'
|
|
opacity={0.3}
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<View
|
|
style={{
|
|
marginVertical: 5,
|
|
height: 1,
|
|
width: '100%',
|
|
backgroundColor: 'grey'
|
|
}}
|
|
/>
|
|
</View>
|
|
) : null }
|
|
<View style={{ alignItems: 'center' }}>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<Text style={{ fontSize: 14 }}>
|
|
{`${Age} `}
|
|
</Text>
|
|
<Text style={{ fontSize: 14 }}>
|
|
{`${Gender} - `}
|
|
</Text>
|
|
<Text style={{ fontSize: 14 }}>
|
|
{`Conscious: ${Conscious} | `}
|
|
</Text>
|
|
<Text style={{ fontSize: 14 }}>
|
|
{`Breathing: ${Breathing}`}
|
|
</Text>
|
|
</View>
|
|
<Text style={{ fontSize: 12 }}>
|
|
{`${Statement}`}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ alignItems: 'center' }}>
|
|
<View
|
|
style={{
|
|
marginVertical: 10,
|
|
height: 2,
|
|
width: '95%',
|
|
backgroundColor: 'grey'
|
|
}}
|
|
/>
|
|
</View>
|
|
<View key="respondingUnitInformation" style={{ padding: 2 }}>
|
|
<View
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: 'grey',
|
|
shadowOpacity: 1,
|
|
shadowRadius: 1,
|
|
padding: 10,
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'column' }}>
|
|
{Units?.length > 0 ? (
|
|
<View>
|
|
{ownDepartmentResponse?.length > 0 ? (
|
|
<View>
|
|
<View>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
|
|
<Text style={{ fontWeight: '600', textAlign: 'center', flex: 1 }}>Units</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>Disp</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>Resp</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>Arr</Text>
|
|
{selectedDepartment?.type === 'EMS' || selectedDepartment?.type === 'Rescue' ? (
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>Trans</Text>
|
|
) : null}
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>BIS</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
marginVertical: 5,
|
|
height: 1,
|
|
width: '95%',
|
|
backgroundColor: 'grey',
|
|
alignSelf: 'center'
|
|
}}
|
|
/>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
{ownDepartmentResponse?.map((unit) => {
|
|
return (
|
|
<View key={unit?.Unit}
|
|
style={{
|
|
flex: 1,
|
|
alignSelf: 'stretch',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontWeight: 600,
|
|
textAlign: 'center',
|
|
flex: 1
|
|
}}
|
|
>
|
|
{unit?.Unit}
|
|
</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.Dispatched)}
|
|
</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.Responding)}
|
|
</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.OnScene)}
|
|
</Text>
|
|
{selectedDepartment?.type === 'EMS' ||
|
|
selectedDepartment?.type === 'Rescue' ? (
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.Transporting)}
|
|
</Text>
|
|
) : null }
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.InService)}
|
|
</Text>
|
|
</View>
|
|
)
|
|
})}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View style={{ alignItems: 'center' }}>
|
|
<Text
|
|
style={{
|
|
textAlign: 'center'
|
|
}}
|
|
>
|
|
{`No ${selectedDepartment?.dept} Units Responding`}
|
|
</Text>
|
|
</View>
|
|
) }
|
|
{mutualAidDepartmentResponse?.length > 0 ? (
|
|
<View>
|
|
<View
|
|
style={{
|
|
marginVertical: 5,
|
|
height: 2,
|
|
width: '100%',
|
|
backgroundColor: 'grey',
|
|
}}
|
|
/>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
|
|
<Text style={{ fontWeight: '600', textAlign: 'center', flex: 1 }}>M/A</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>Disp</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>Resp</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>Arr</Text>
|
|
{selectedDepartment?.type === 'EMS' || selectedDepartment?.type === 'Rescue' ? (
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>Trans</Text>
|
|
) : null}
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>BIS</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
marginVertical: 5,
|
|
height: 1,
|
|
width: '95%',
|
|
backgroundColor: 'grey',
|
|
alignSelf: 'center'
|
|
}}
|
|
/>
|
|
{mutualAidDepartmentResponse?.map((unit) => {
|
|
return (
|
|
<View key={unit?.Unit}
|
|
style={{
|
|
flex: 1,
|
|
alignSelf: 'stretch',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontWeight: 600,
|
|
textAlign: 'center',
|
|
flex: 1
|
|
}}
|
|
>
|
|
{unit?.Unit}
|
|
</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.Dispatched)}
|
|
</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.Responding)}
|
|
</Text>
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.OnScene)}
|
|
</Text>
|
|
{selectedDepartment?.type === 'EMS' ||
|
|
selectedDepartment?.type === 'Rescue' ? (
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.Transporting)}
|
|
</Text>
|
|
) : null }
|
|
<Text style={{ textAlign: 'center', flex: 1 }}>
|
|
{formatResponseTimes(unit?.InService)}
|
|
</Text>
|
|
</View>
|
|
)
|
|
})}
|
|
</View>
|
|
) : null }
|
|
</View>
|
|
) : (
|
|
<View style={{ alignItems: 'center' }}>
|
|
<Text>No Units Responding</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ margin: 6 }}/>
|
|
<Text
|
|
style={{
|
|
color: 'grey',
|
|
fontWeight: 600,
|
|
paddingLeft: 10
|
|
}}
|
|
>
|
|
Incident Notes
|
|
</Text>
|
|
<View style={{ margin: 2 }}/>
|
|
<View key="incidentNotes" style={{ padding: 2 }}>
|
|
<View
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: 'grey',
|
|
shadowOpacity: 1,
|
|
shadowRadius: 1,
|
|
padding: 10,
|
|
minHeight: 200
|
|
}}
|
|
>
|
|
{Notes?.split('\n').map((note, index) => (
|
|
<View key={index}>
|
|
<Text>{note}</Text>
|
|
{index < Notes.split('\n').length - 1 && (
|
|
<View
|
|
style={{
|
|
height: 1,
|
|
backgroundColor: 'grey',
|
|
marginVertical: 10
|
|
}}
|
|
/>
|
|
)}
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
<PageFooter>
|
|
<View
|
|
style={{
|
|
flexDirection: 'column',
|
|
height: 100,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
paddingTop: 7
|
|
}}
|
|
/>
|
|
</PageFooter>
|
|
<DepartmentActionSheet
|
|
ref={actionSheetRef}
|
|
gestureEnabled
|
|
containerStyle={{
|
|
height: "50%",
|
|
width: "100%",
|
|
backgroundColor: '#ECEDEE',
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'column', padding: 20 }}>
|
|
{deptList?.map((item) => {
|
|
return (
|
|
<View style={{ padding: 2 }} key={item?.deptId}>
|
|
<TouchableOpacity
|
|
style={{
|
|
borderRadius: 6,
|
|
elevation: 3,
|
|
backgroundColor: item?.selected ? 'grey' : '#fff',
|
|
shadowOffset: { width: 1, height: 1 },
|
|
shadowColor: '#333',
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 2,
|
|
marginHorizontal: 20,
|
|
marginVertical: 6,
|
|
padding: 10
|
|
}}
|
|
onPress={() => {
|
|
actionSheetRef.current?.hide();
|
|
return updateSelectedDepartment(
|
|
selectedDepartment?.deptId,
|
|
item?.deptId
|
|
)
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
<Text
|
|
style={{
|
|
color: selectedDepartmentColorPicker(
|
|
item?.type
|
|
),
|
|
fontWeight: 600,
|
|
fontSize: '16'
|
|
}}
|
|
>
|
|
{item?.dept}
|
|
</Text>
|
|
{item?.primary ? <Ionicons name="star" size={16} color="yellow" style={{
|
|
paddingLeft: 20,
|
|
shadowColor: '#333',
|
|
shadowOffset: 1,
|
|
shadowOpacity: 1,
|
|
shadowRadius: 6
|
|
}} /> : null}
|
|
</View>
|
|
<Text>{`${item?.deptAbv} - ${departmentTypeMap[item?.type]}`}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
</DepartmentActionSheet>
|
|
</React.Fragment>
|
|
);
|
|
} |