admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed old whiteboard components + react-trello

Browse Source
This commit is contained in:
Patrick Fic
2020-02-12 14:50:54 -08:00
parent e417b1c9c0
commit 7e61bffce5
8 changed files with 10 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
client/src/components/white-board-card/white-board-card.component.jsx
View File

@@ -1,117 +0,0 @@
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>
);
}

23
client/src/components/white-board-kanban/white-board-kanban.component.jsx
View File

@@ -1,23 +0,0 @@
import React from "react";
import Board from "react-trello";
import WhiteBoardCard from "../white-board-card/white-board-card.component";
export default function WhiteBoardKanBan({ data, eventBus }) {
const setEventBus = handle => {
eventBus = handle;
};
return (
<Board
tagStyle={{ fontSize: "80%" }}
data={data}
style={{ backgroundColor: "none" }}
laneDraggable={false}
eventBusHandle={setEventBus}
components={{ Card: WhiteBoardCard }}
onCardClick={(cardId, metadata) =>
alert(`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`)
}
/>
);
}

46
client/src/components/white-board-kanban/white-board-kanban.container.jsx
View File

@@ -1,46 +0,0 @@
import React from "react";
import { useSubscription } from "@apollo/react-hooks";
import { SUBSCRIPTION_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import Alert from "../../components/alert/alert.component";
import WhiteBoardKanBan from "./white-board-kanban.component";
export default function WhiteBoardKanBanContainer() {
const { loading, error, data } = useSubscription(
SUBSCRIPTION_JOBS_IN_PRODUCTION,
{
fetchPolicy: "network-only"
}
);
if (loading) return <LoadingSpinner />;
if (error) return <Alert message={error.message} />;
let eventBus;
let i = data.job_status.reduce((acc, value) => {
//Create a lane object for each row.
let newLane = {
id: value.name,
title: value.name,
label: "0",
cards: value.jobs.reduce((acc, value) => {
acc.push({
id: value.id,
title: value.ro_number,
description: value.est_number,
label: value.id,
metadata: value
});
return acc;
}, [])
};
acc.push(newLane);
return acc;
}, []);
let laneData = {
lanes: i
};
return <WhiteBoardKanBan eventBus={eventBus} data={laneData} />;
}

24
client/src/components/white-board-left-sider/white-board-left-sider.component.jsx
View File

@@ -1,24 +0,0 @@
import React from "react";
import { Menu, Icon } from "antd";
export default function WhiteBoardLeftSiderComponent({visible}) {
return (
<Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
<Menu.Item key="1">
<Icon type="user" />
<span className="nav-text">nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span className="nav-text">nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span className="nav-text">nav 3</span>
</Menu.Item>
<Menu.Item key="4">
<Icon type="user" />
<span className="nav-text">nav 4</span>
</Menu.Item>
</Menu>
);
}

7
client/src/components/white-board-left-sider/white-board-left-sider.container.jsx
View File

@@ -1,7 +0,0 @@
import React from "react";
import WhiteBoardLeftSiderComponent from "./white-board-left-sider.component";
export default function WhiteBoardPageContainer() {
return <WhiteBoardLeftSiderComponent />;
}