Simplify available jobs page IO-454
This commit is contained in:
Patrick Fic
@@ -0,0 +1,233 @@
|
||||
import {
|
||||
DeleteFilled,
|
||||
DownloadOutlined,
|
||||
PlusCircleFilled,
|
||||
SyncOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useMutation } from "@apollo/react-hooks";
|
||||
import { Button, Input, notification, Space, Table } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
DELETE_ALL_AVAILABLE_JOBS,
|
||||
DELETE_AVAILABLE_JOB,
|
||||
} from "../../graphql/available-jobs.queries";
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
import { TimeAgoFormatter } from "../../utils/DateFormatter";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
export default function JobsAvailableComponent({
|
||||
loading,
|
||||
data,
|
||||
refetch,
|
||||
addJobAsNew,
|
||||
addJobAsSupp,
|
||||
}) {
|
||||
const [deleteAllAvailableJobs] = useMutation(DELETE_ALL_AVAILABLE_JOBS);
|
||||
const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB);
|
||||
const { t } = useTranslation();
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [state, setState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: { text: "" },
|
||||
});
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t("jobs.fields.cieca_id"),
|
||||
dataIndex: "cieca_id",
|
||||
key: "cieca_id",
|
||||
sorter: (a, b) => alphaSort(a, b),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.ro_number"),
|
||||
dataIndex: "job_id",
|
||||
key: "job_id",
|
||||
//width: "8%",
|
||||
// onFilter: (value, record) => record.ro_number.includes(value),
|
||||
// filteredValue: state.filteredInfo.text || null,
|
||||
sorter: (a, b) => alphaSort(a, b),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order,
|
||||
render: (text, record) =>
|
||||
record.job ? (
|
||||
<Link to={`/manage/jobs/${record.job.id}`}>
|
||||
{(record.job && record.job_ro_number) || t("general.labels.na")}
|
||||
</Link>
|
||||
) : (
|
||||
<div>
|
||||
{(record.job && record.job_ro_number) || t("general.labels.na")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.owner"),
|
||||
dataIndex: "ownr_name",
|
||||
key: "ownr_name",
|
||||
ellipsis: true,
|
||||
sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.vehicle"),
|
||||
dataIndex: "vehicle_info",
|
||||
key: "vehicle_info",
|
||||
sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.clm_no"),
|
||||
dataIndex: "clm_no",
|
||||
key: "clm_no",
|
||||
sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.ins_co_nm"),
|
||||
dataIndex: "ins_co_nm",
|
||||
key: "ins_co_nm",
|
||||
sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.clm_total"),
|
||||
dataIndex: "clm_amt",
|
||||
key: "clm_amt",
|
||||
sorter: (a, b) => a.clm_amt - b.clm_amt,
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order,
|
||||
render: (text, record) => (
|
||||
<CurrencyFormatter>{record.clm_amt}</CurrencyFormatter>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.uploaded_by"),
|
||||
dataIndex: "uploaded_by",
|
||||
key: "uploaded_by",
|
||||
sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.updated_at"),
|
||||
dataIndex: "updated_at",
|
||||
key: "updated_at",
|
||||
sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "updated_at" && state.sortedInfo.order,
|
||||
render: (text, record) => (
|
||||
<TimeAgoFormatter>{record.updated_at}</TimeAgoFormatter>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("general.labels.actions"),
|
||||
key: "actions",
|
||||
render: (text, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
onClick={() => {
|
||||
deleteJob({ variables: { id: record.id } }).then((r) => {
|
||||
notification["success"]({
|
||||
message: t("jobs.successes.deleted"),
|
||||
});
|
||||
refetch();
|
||||
});
|
||||
}}
|
||||
>
|
||||
<DeleteFilled />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => addJobAsNew(record)}
|
||||
disabled={record.issupplement}
|
||||
>
|
||||
<PlusCircleFilled />
|
||||
</Button>
|
||||
<Button onClick={() => addJobAsSupp(record)}>
|
||||
<DownloadOutlined />
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const availableJobs = data
|
||||
? searchText
|
||||
? data.available_jobs.filter(
|
||||
(j) =>
|
||||
(j.ownr_name || "")
|
||||
.toLowerCase()
|
||||
.includes(searchText.toLowerCase()) ||
|
||||
(j.vehicle_info || "")
|
||||
.toLowerCase()
|
||||
.includes(searchText.toLowerCase()) ||
|
||||
(j.clm_no || "").toLowerCase().includes(searchText.toLowerCase())
|
||||
)
|
||||
: data.available_jobs
|
||||
: [];
|
||||
|
||||
return (
|
||||
<Table
|
||||
loading={loading}
|
||||
title={() => {
|
||||
return (
|
||||
<div className="imex-table-header">
|
||||
<Space>
|
||||
<strong>{t("jobs.labels.availablejobs")}</strong>
|
||||
<Button
|
||||
onClick={() => {
|
||||
refetch();
|
||||
}}
|
||||
>
|
||||
<SyncOutlined />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
deleteAllAvailableJobs()
|
||||
.then((r) => {
|
||||
notification["success"]({
|
||||
message: t("jobs.successes.all_deleted", {
|
||||
count: r.data.delete_available_jobs.affected_rows,
|
||||
}),
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch((r) => {
|
||||
notification["error"]({
|
||||
message: t("jobs.errors.deleted") + " " + r.message,
|
||||
});
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("general.actions.deleteall")}
|
||||
</Button>
|
||||
</Space>
|
||||
<div className="imex-table-header__search">
|
||||
<Input.Search
|
||||
placeholder={t("general.labels.search")}
|
||||
onChange={(e) => {
|
||||
setSearchText(e.currentTarget.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
size="small"
|
||||
pagination={{ position: "top" }}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
dataSource={availableJobs}
|
||||
onChange={handleTableChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user