118 lines
3.3 KiB
JavaScript
118 lines
3.3 KiB
JavaScript
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { Menu, Dropdown, Card, Icon, Avatar, Row, Col } from "antd";
|
|
import { useTranslation } from "react-i18next";
|
|
import styled from "styled-components";
|
|
import Moment from "react-moment";
|
|
import CarImage from "../../assets/car.svg";
|
|
|
|
//The following styled div is required because of a smooth-dnd style used by react-trello to prevent wrapping of columns.
|
|
const WrappedSpan = styled.span`
|
|
white-space: normal;
|
|
`;
|
|
|
|
export default function WhiteBoardCard({ metadata }) {
|
|
// const {
|
|
// onClick,
|
|
// className,
|
|
// name,
|
|
// cardStyle,
|
|
// body,
|
|
// dueOn,
|
|
// cardColor,
|
|
// subTitle,
|
|
// tagStyle,
|
|
// escalationText,
|
|
// tags,
|
|
// showDeleteButton,
|
|
// onDelete
|
|
// } = this.props;
|
|
const { t } = useTranslation();
|
|
|
|
const menu = (
|
|
<Menu>
|
|
<Menu.Item key='images'>
|
|
<Icon type='file-image' />
|
|
{t("jobs.actions.viewJobImages")}
|
|
</Menu.Item>
|
|
<Menu.Item key='printing'>
|
|
<Icon type='printer' />
|
|
{t("jobs.actions.printCenter")}
|
|
</Menu.Item>
|
|
<Menu.Item key='notes'>
|
|
<Icon type='edit' />
|
|
{t("jobs.actions.notes")}
|
|
</Menu.Item>
|
|
<Menu.Item key='postinvoices'>
|
|
<Icon type='shopping-cart' />
|
|
{t("jobs.actions.postInvoices")}
|
|
</Menu.Item>
|
|
<Menu.Item key='receiveparts'>
|
|
<Icon type='inbox' />
|
|
{t("jobs.actions.receiveParts")}
|
|
</Menu.Item>
|
|
<Menu.Item key='partstatus'>
|
|
<Icon type='tool' />
|
|
{t("jobs.actions.partStatus")}
|
|
</Menu.Item>
|
|
</Menu>
|
|
);
|
|
|
|
|
|
return (
|
|
<div>
|
|
<Card
|
|
title={
|
|
(metadata.ro_number ?? metadata.est_number) +
|
|
" | " +
|
|
(metadata.owner?.first_name ?? "") +
|
|
" " +
|
|
(metadata.owner?.last_name ?? "")
|
|
}
|
|
style={{ width: 300, marginTop: 10 }}
|
|
bodyStyle={{ padding: 10 }}
|
|
actions={[
|
|
<Link to={`/manage/jobs/${metadata.id}`}>
|
|
<Icon type='eye' key='view' />
|
|
</Link>,
|
|
<Icon type='message' key='message' />,
|
|
<Dropdown overlay={menu} trigger={["click"]}>
|
|
<Icon type='ellipsis' />
|
|
</Dropdown>
|
|
]}>
|
|
<Row>
|
|
<Col span={6}>
|
|
<Avatar size='large' alt='Vehicle Image' src={CarImage} />
|
|
</Col>
|
|
<Col span={18}>
|
|
<Row>
|
|
<WrappedSpan>
|
|
{metadata.vehicle?.v_model_yr ?? t("general.labels.na")}{" "}
|
|
{metadata.vehicle?.v_make_desc ?? t("general.labels.na")}{" "}
|
|
{metadata.vehicle?.v_model_desc ?? t("general.labels.na")}
|
|
</WrappedSpan>
|
|
</Row>
|
|
{metadata.vehicle?.v_vin ? (
|
|
<Row>
|
|
<WrappedSpan>
|
|
VIN: {metadata.vehicle?.v_vin ?? t("general.labels.na")}
|
|
</WrappedSpan>
|
|
</Row>
|
|
) : null}
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={12}>
|
|
{t("general.labels.in")}:
|
|
<Moment format='MM/DD/YYYY'>{metadata.actual_in}</Moment>
|
|
</Col>
|
|
<Col span={12}>
|
|
{t("general.labels.out")}:
|
|
<Moment format='MM/DD/YYYY'>{metadata.scheduled_completion}</Moment>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|