Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2023-12-14 13:20:43 -05:00
parent a67fb3576c
commit 83e4fb3dc4
19 changed files with 623 additions and 594 deletions

View File

@@ -1,100 +1,101 @@
import { Card, List, Typography } from "antd";
import {Card, List, Typography} from "antd";
import React from "react";
import { useQuery } from "@apollo/client";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import {useQuery} from "@apollo/client";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {Link} from "react-router-dom";
import {createStructuredSelector} from "reselect";
import {QUERY_ACTIVE_TIME_TICKETS} from "../../graphql/timetickets.queries";
import {selectTechnician} from "../../redux/tech/tech.selectors";
import {DateTimeFormatter} from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import DataLabel from "../data-label/data-label.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import TechClockOffButton from "../tech-job-clock-out-button/tech-job-clock-out-button.component";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
import {OwnerNameDisplayFunction} from "../owner-name-display/owner-name-display.component";
const mapStateToProps = createStructuredSelector({
technician: selectTechnician,
technician: selectTechnician,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function TechClockedInList({ technician }) {
const { loading, error, data, refetch } = useQuery(
QUERY_ACTIVE_TIME_TICKETS,
{
variables: {
employeeId: technician.id,
},
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
}
);
export function TechClockedInList({technician}) {
const {loading, error, data, refetch} = useQuery(
QUERY_ACTIVE_TIME_TICKETS,
{
variables: {
employeeId: technician?.id,
},
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
skip: !technician,
}
);
const { t } = useTranslation();
const {t} = useTranslation();
if (loading) return <LoadingSpinner/>;
if (error) return <AlertComponent message={error.message} type="error"/>;
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
{data.timetickets.length > 0 ? (
return (
<div>
<Typography.Title level={2}>
{t("timetickets.labels.alreadyclockedon")}
</Typography.Title>
<List
grid={{
gutter: 32,
xs: 1,
sm: 2,
md: 3,
lg: 4,
xl: 5,
xxl: 6,
}}
dataSource={data.timetickets || []}
renderItem={(ticket) => (
<List.Item>
<Card
title={
<Link to={`/tech/joblookup?selected=${ticket.job.id}`}>
{`${
ticket.job.ro_number || t("general.labels.na")
} ${OwnerNameDisplayFunction(ticket.job)}`}
</Link>
}
actions={[
<TechClockOffButton
jobId={ticket.jobid}
timeTicketId={ticket.id}
completedCallback={refetch}
/>,
]}
>
<div>
{`
{data?.timetickets?.length > 0 ? (
<div>
<Typography.Title level={2}>
{t("timetickets.labels.alreadyclockedon")}
</Typography.Title>
<List
grid={{
gutter: 32,
xs: 1,
sm: 2,
md: 3,
lg: 4,
xl: 5,
xxl: 6,
}}
dataSource={data.timetickets || []}
renderItem={(ticket) => (
<List.Item>
<Card
title={
<Link to={`/tech/joblookup?selected=${ticket.job.id}`}>
{`${
ticket.job.ro_number || t("general.labels.na")
} ${OwnerNameDisplayFunction(ticket.job)}`}
</Link>
}
actions={[
<TechClockOffButton
jobId={ticket.jobid}
timeTicketId={ticket.id}
completedCallback={refetch}
/>,
]}
>
<div>
{`
${ticket.job.v_model_yr || ""} ${
ticket.job.v_make_desc || ""
} ${ticket.job.v_model_desc || ""}`}
</div>
<DataLabel label={t("timetickets.fields.clockon")}>
<DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
</DataLabel>
<DataLabel label={t("timetickets.fields.cost_center")}>
{ticket.cost_center === "timetickets.labels.shift"
? t(ticket.cost_center)
: ticket.cost_center}
</DataLabel>
</Card>
</List.Item>
)}
></List>
ticket.job.v_make_desc || ""
} ${ticket.job.v_model_desc || ""}`}
</div>
<DataLabel label={t("timetickets.fields.clockon")}>
<DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
</DataLabel>
<DataLabel label={t("timetickets.fields.cost_center")}>
{ticket.cost_center === "timetickets.labels.shift"
? t(ticket.cost_center)
: ticket.cost_center}
</DataLabel>
</Card>
</List.Item>
)}
></List>
</div>
) : null}
</div>
) : null}
</div>
);
);
}
export default connect(mapStateToProps, mapDispatchToProps)(TechClockedInList);