126 lines
4.0 KiB
JavaScript
126 lines
4.0 KiB
JavaScript
import { useQuery } from "@apollo/client";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { FlatList, RefreshControl } from "react-native";
|
|
import { Button, List, Modal, Portal, Provider } from "react-native-paper";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
|
|
import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
|
|
import {
|
|
selectCurrentCameraJob,
|
|
selectCurrentCameraJobId,
|
|
} from "../../redux/app/app.selectors";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import ErrorDisplay from "../error-display/error-display.component";
|
|
import LoadingDisplay from "../loading-display/loading-display.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
cameraJobId: selectCurrentCameraJobId,
|
|
cameraJob: selectCurrentCameraJob,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setCameraJobId: (id) => dispatch(setCameraJobId(id)),
|
|
setCameraJob: (job) => dispatch(setCameraJob(job)),
|
|
});
|
|
|
|
export function CameraSelectJob({
|
|
bodyshop,
|
|
cameraJobId,
|
|
setCameraJobId,
|
|
cameraJob,
|
|
setCameraJob,
|
|
}) {
|
|
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
|
|
variables: {
|
|
statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
|
|
},
|
|
skip: !bodyshop,
|
|
});
|
|
const { t } = useTranslation();
|
|
if (loading) return <LoadingDisplay />;
|
|
if (error) return <ErrorDisplay errorMessage={error.message} />;
|
|
|
|
const [visible, setVisible] = React.useState(false);
|
|
|
|
const showModal = () => setVisible(true);
|
|
const hideModal = () => setVisible(false);
|
|
const containerStyle = { backgroundColor: "white", padding: 20 };
|
|
const onRefresh = async () => {
|
|
return refetch();
|
|
};
|
|
return (
|
|
<Provider>
|
|
<Portal>
|
|
<Modal
|
|
visible={visible}
|
|
onDismiss={hideModal}
|
|
contentContainerStyle={containerStyle}
|
|
>
|
|
<FlatList
|
|
refreshControl={
|
|
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
|
}
|
|
data={data.jobs}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={(object) => (
|
|
<List.Item
|
|
onPress={() => {
|
|
setCameraJobId(object.item.id);
|
|
setCameraJob(object.item);
|
|
hideModal();
|
|
}}
|
|
description={`${
|
|
object.item.ro_number ? `${object.item.ro_number} - ` : ``
|
|
}${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""} ${
|
|
object.item.ownr_co_nm || ""
|
|
} - ${object.item.v_model_yr || ""} ${
|
|
object.item.v_make_desc || ""
|
|
} ${object.item.v_model_desc || ""}`}
|
|
key={object.item.id}
|
|
/>
|
|
)}
|
|
/>
|
|
</Modal>
|
|
</Portal>
|
|
<Button style={{ marginTop: 30 }} onPress={showModal}>
|
|
{cameraJobId
|
|
? `${cameraJob.ro_number ? `${cameraJob.ro_number} - ` : ``}${
|
|
cameraJob.ownr_fn || ""
|
|
} ${cameraJob.ownr_ln || ""} ${cameraJob.ownr_co_nm || ""} - ${
|
|
cameraJob.v_model_yr || ""
|
|
} ${cameraJob.v_make_desc || ""} ${cameraJob.v_model_desc || ""}`
|
|
: t("mediabrowser.labels.selectjob")}
|
|
</Button>
|
|
</Provider>
|
|
);
|
|
|
|
// return (
|
|
// <View
|
|
// style={{
|
|
// marginHorizontal: 10,
|
|
// }}
|
|
// >
|
|
// <Picker
|
|
// selectedValue={cameraJobId}
|
|
// onValueChange={(value, idx) => {
|
|
// logImEXEvent("imexmobile_setcamerajobid");
|
|
// setCameraJobId(value);
|
|
// setCameraJob(data.jobs[idx]);
|
|
// }}
|
|
// >
|
|
// <Picker.Item
|
|
// label={t("mediabrowser.labels.selectjob")}
|
|
// value={null}
|
|
// key="null"
|
|
// />
|
|
|
|
// </Picker>
|
|
// </View>
|
|
// );
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(CameraSelectJob);
|