Files
imexmobile/components/job-lines/job-lines.component.jsx
2021-03-09 20:56:13 -08:00

78 lines
2.1 KiB
JavaScript

import Dinero from "dinero.js";
import { Card, CardItem, Text } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, StyleSheet, View } from "react-native";
export default function JobLines({ job, loading, refetch }) {
const { t } = useTranslation();
if (!job) {
<Card>
<Text>Job is not defined.</Text>
</Card>;
}
const onRefresh = async () => {
return refetch();
};
return (
<View>
<FlatList
data={job.joblines}
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
contentContainerStyle={localStyles.listContentContainer}
keyExtractor={(item) => item.id}
renderItem={(object) => (
<Card>
<CardItem style={localStyles.flexRow}>
<Text style={localStyles.growWithEllipsis}>{`${
object.item.line_desc
}${
object.item.part_qty > 1 ? ` x ${object.item.part_qty}` : ""
}`}</Text>
{object.item.part_type && (
<Text style={localStyles.sideMargins}>
{t(`jobdetail.part_types.${object.item.part_type}`)}
</Text>
)}
<Text style={localStyles.sideMargins}>
{Dinero({
amount: Math.round((object.item.act_price || 0) * 100),
}).toFormat()}
</Text>
</CardItem>
<CardItem style={localStyles.flexRow}>
{object.item.mod_lbr_ty && (
<Text>
{t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
</Text>
)}
</CardItem>
</Card>
)}
/>
</View>
);
}
const localStyles = StyleSheet.create({
listContentContainer: {
flex: 1,
},
flexRow: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
},
sideMargins: {
marginLeft: 5,
marginRight: 5,
},
growWithEllipsis: {
flex: 1,
},
});