admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor to using RNP & UI Updates.

Browse Source
This commit is contained in:
Patrick Fic
2021-03-11 19:10:27 -07:00
parent 59f6605a40
commit a912b4f1d7
26 changed files with 689 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
components/job-lines/job-lines.component.jsx
View File

@@ -2,7 +2,7 @@ import Dinero from "dinero.js";
import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
import { Card } from "react-native-paper";
import { Card, DataTable } from "react-native-paper";
export default function JobLines({ job, loading, refetch }) {
const { t } = useTranslation();
@@ -18,60 +18,64 @@ export default function JobLines({ job, loading, refetch }) {
return (
<View>
<DataTable>
<DataTable.Header>
<DataTable.Title style={{ flex: 4 }}>
{t("jobdetail.labels.lines_desc")}
</DataTable.Title>
<DataTable.Title style={{ flex: 2 }}>
{t("jobdetail.labels.lines_lbr_ty")}
</DataTable.Title>
<DataTable.Title style={{ flex: 1 }}>
{t("jobdetail.labels.lines_lb_hrs")}
</DataTable.Title>
<DataTable.Title style={{ flex: 2 }}>
{t("jobdetail.labels.lines_part_type")}
</DataTable.Title>
<DataTable.Title style={{ flex: 1 }}>
{t("jobdetail.labels.lines_qty")}
</DataTable.Title>
<DataTable.Title style={{ flex: 1 }}>
{t("jobdetail.labels.lines_price")}
</DataTable.Title>
</DataTable.Header>
</DataTable>
<FlatList
data={job.joblines}
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
contentContainerStyle={localStyles.listContentContainer}
keyExtractor={(item) => item.id}
renderItem={(object) => (
<Card>
<Card.Content 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>
</Card.Content>
<Card.Content style={localStyles.flexRow}>
{object.item.mod_lbr_ty && (
<Text>
{t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
</Text>
)}
</Card.Content>
</Card>
<DataTable.Row>
<DataTable.Cell style={{ flex: 4 }}>
{object.item.line_desc}
</DataTable.Cell>
<DataTable.Cell style={{ flex: 2 }}>
{object.item.mod_lbr_ty &&
t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
</DataTable.Cell>
<DataTable.Cell style={{ flex: 1 }}>
{object.item.mod_lb_hrs}
</DataTable.Cell>
<DataTable.Cell style={{ flex: 2 }}>
{object.item.part_type &&
t(`jobdetail.part_types.${object.item.part_type}`)}
</DataTable.Cell>
<DataTable.Cell style={{ flex: 1 }}>
{object.item.part_qty}
</DataTable.Cell>
<DataTable.Cell style={{ flex: 1 }}>
{Dinero({
amount: Math.round((object.item.act_price || 0) * 100),
}).toFormat()}
</DataTable.Cell>
</DataTable.Row>
)}
/>
</View>
);
}
const localStyles = StyleSheet.create({
listContentContainer: {
flex: 1,
},
flexRow: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
},
sideMargins: {
marginLeft: 5,
marginRight: 5,
},
growWithEllipsis: {
flex: 1,
},
});
const localStyles = StyleSheet.create({});