diff --git a/client/src/components/jobs-available-supplement/jobs-available-supplement.container.jsx b/client/src/components/jobs-available-supplement/jobs-available-supplement.container.jsx index d84157583..99efe73dc 100644 --- a/client/src/components/jobs-available-supplement/jobs-available-supplement.container.jsx +++ b/client/src/components/jobs-available-supplement/jobs-available-supplement.container.jsx @@ -87,7 +87,6 @@ export function JobsAvailableSupplementContainer({ selectedJob, estData.data.available_jobs_by_pk.est_data.joblines.data ); - console.log("onModalOk -> suppDelta", suppDelta); delete supp.joblines; await client.mutate({ diff --git a/client/src/components/production-list-columns/production-list-columns.alert.component.jsx b/client/src/components/production-list-columns/production-list-columns.alert.component.jsx index ddd9012d8..e65d43d20 100644 --- a/client/src/components/production-list-columns/production-list-columns.alert.component.jsx +++ b/client/src/components/production-list-columns/production-list-columns.alert.component.jsx @@ -18,7 +18,9 @@ export default function ProductionListColumnAlert({ record }) { production_vars: { ...record.production_vars, alert: - (record.production_vars && !record.production_vars.alert) || true, + !!record.production_vars && !!record.production_vars.alert + ? !record.production_vars.alert + : true, }, }, }, diff --git a/client/src/components/production-list-table/production-list-table.component.jsx b/client/src/components/production-list-table/production-list-table.component.jsx index 1bae0d2d1..c310e626b 100644 --- a/client/src/components/production-list-table/production-list-table.component.jsx +++ b/client/src/components/production-list-table/production-list-table.component.jsx @@ -1,4 +1,4 @@ -import { Table, Button, Menu, Dropdown } from "antd"; +import { Table, Button, Menu, Dropdown, Input } from "antd"; import React, { useState } from "react"; import { SyncOutlined } from "@ant-design/icons"; import ProductionListSaveConfigButton from "../production-list-save-config-button/production-list-save-config-button.component"; @@ -18,6 +18,8 @@ const mapDispatchToProps = (dispatch) => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); +const OneCalendarDay = 60 * 60 * 24 * 1000; + export function ProductionListTable({ columnState, loading, @@ -26,6 +28,7 @@ export function ProductionListTable({ refetch, }) { const [columns, setColumns] = columnState; + const [searchText, setSearchText] = useState(""); const [state, setState] = useState( bodyshop.production_config.tableState || { sortedInfo: {}, @@ -49,6 +52,8 @@ export function ProductionListTable({ setColumns(columns.filter((i) => i.key !== key)); }; + const Now = new Date(); + const headerItem = (col) => ( + setSearchText(e.target.value)} + placeholder={t("general.labels.search")} + value={searchText} + /> )} columns={columns.map((c) => { @@ -94,9 +104,51 @@ export function ProductionListTable({ })} rowKey='id' loading={loading} - dataSource={data} + dataSource={ + searchText === "" + ? data + : data.filter( + (j) => + (j.ro_number || "") + .toString() + .toLowerCase() + .includes(searchText.toLowerCase()) || + (j.ownr_fn || "") + .toLowerCase() + .includes(searchText.toLowerCase()) || + (j.ownr_ln || "") + .toLowerCase() + .includes(searchText.toLowerCase()) || + (j.status || "") + .toLowerCase() + .includes(searchText.toLowerCase()) || + (j.ins_co_nm || "") + .toLowerCase() + .includes(searchText.toLowerCase()) || + (j.clm_no || "") + .toLowerCase() + .includes(searchText.toLowerCase()) || + (j.v_model_desc || "") + .toLowerCase() + .includes(searchText.toLowerCase()) || + (j.v_make_desc || "") + .toLowerCase() + .includes(searchText.toLowerCase()) + ) + } onChange={handleTableChange} - rowClassName={(record, index) => (index % 2 === 0 ? "red" : "blue")} //TODO What could be good usage here? + rowClassName={(record, index) => { + const classes = []; + if (!!record.scheduled_completion) { + if (new Date(record.scheduled_completion) - Now < OneCalendarDay) + console.log( + "new Date(record.scheduled_completion) - Now < OneCalendarDay", + new Date(record.scheduled_completion) - Now < OneCalendarDay + ); + classes.push("production-completion-1"); + } + return classes.join(" "); + }} //TODO What could be good usage here? onRow={(record, index) => (record.refetch = refetch)} /> diff --git a/client/src/components/production-list-table/production-list-table.styles.scss b/client/src/components/production-list-table/production-list-table.styles.scss index 9e260d7ef..df8b2727e 100644 --- a/client/src/components/production-list-table/production-list-table.styles.scss +++ b/client/src/components/production-list-table/production-list-table.styles.scss @@ -13,3 +13,12 @@ .blue { color: blue; } + +.production-completion-1 { + animation: production-completion-1-blinker 5s linear infinite; +} +@keyframes production-completion-1-blinker { + 50% { + background: rgba(207, 12, 12, 0.555); + } +}