102 lines
3.0 KiB
JavaScript
102 lines
3.0 KiB
JavaScript
import { useQuery } from "@apollo/client";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useWindowDimensions } from "react-native";
|
|
import { SceneMap, TabView, TabBar } from "react-native-tab-view";
|
|
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
|
|
import ErrorDisplay from "../error-display/error-display.component";
|
|
import JobDocuments from "../job-documents/job-documents.component";
|
|
import JobLines from "../job-lines/job-lines.component";
|
|
import JobNotes from "../job-notes/job-notes.component";
|
|
import JobTombstone from "../job-tombstone/job-tombstone.component";
|
|
import LoadingDisplay from "../loading-display/loading-display.component";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import JobDocumentsLocalComponent from "../job-documents/job-documents-local.component";
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
});
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ScreenJobDetail);
|
|
|
|
export function ScreenJobDetail({ bodyshop, route }) {
|
|
const {
|
|
params: { jobId },
|
|
} = route;
|
|
const { t } = useTranslation();
|
|
const layout = useWindowDimensions();
|
|
const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
|
|
variables: {
|
|
id: jobId,
|
|
},
|
|
skip: !jobId,
|
|
});
|
|
|
|
const renderTabBar = (props) => (
|
|
<TabBar
|
|
{...props}
|
|
indicatorStyle={{ backgroundColor: "#ffffff" }}
|
|
// style={{ backgroundColor: "dodgerblue" }}
|
|
/>
|
|
);
|
|
|
|
const renderScene = SceneMap({
|
|
job: () =>
|
|
JobTombstone({
|
|
job: data.jobs_by_pk,
|
|
loading: loading,
|
|
refetch: refetch,
|
|
}),
|
|
lines: () =>
|
|
JobLines({
|
|
job: data.jobs_by_pk,
|
|
loading: loading,
|
|
refetch: refetch,
|
|
}),
|
|
|
|
documents: () => {
|
|
return bodyshop.uselocalmediaserver ? (
|
|
<JobDocumentsLocalComponent job={data.jobs_by_pk} bodyshop={bodyshop} />
|
|
) : (
|
|
<JobDocuments
|
|
job={data.jobs_by_pk}
|
|
loading={loading}
|
|
refetch={refetch}
|
|
/>
|
|
);
|
|
},
|
|
|
|
notes: () =>
|
|
JobNotes({
|
|
job: data.jobs_by_pk,
|
|
loading: loading,
|
|
refetch: refetch,
|
|
}),
|
|
});
|
|
|
|
const [index, setIndex] = React.useState(0);
|
|
const [routes] = React.useState([
|
|
{ key: "job", title: t("jobdetail.labels.job") },
|
|
{ key: "lines", title: t("jobdetail.labels.lines") },
|
|
{ key: "documents", title: t("jobdetail.labels.documents") },
|
|
{ key: "notes", title: t("jobdetail.labels.notes") },
|
|
]);
|
|
|
|
if (loading) return <LoadingDisplay />;
|
|
if (error) return <ErrorDisplay errorMessage={error.message} />;
|
|
|
|
return (
|
|
<TabView
|
|
style={{ flex: 1 }}
|
|
navigationState={{ index, routes }}
|
|
renderScene={renderScene}
|
|
onIndexChange={setIndex}
|
|
initialLayout={{ width: layout.width }}
|
|
renderTabBar={renderTabBar}
|
|
/>
|
|
);
|
|
}
|