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

Antd V4 Icon Updates

Browse Source
This commit is contained in:
Patrick Fic
2020-02-28 09:52:51 -08:00
parent e2dfd6b60d
commit 93be1417be
22 changed files with 167 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/allocations-employee-label/allocations-employee-label.component.jsx
View File

@@ -1,4 +1,4 @@
import { Icon } from "antd"; import Icon from "@ant-design/icons";
import React from "react"; import React from "react";
import { MdRemoveCircleOutline } from "react-icons/md"; import { MdRemoveCircleOutline } from "react-icons/md";

3
client/src/components/chat-conversation/chat-conversation.component.jsx
View File

@@ -1,4 +1,5 @@
import { Button, Card, Input, Icon } from "antd"; import { Button, Card, Input } from "antd";
import Icon from '@ant-design/icons';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";

5
client/src/components/chat-open-button/chat-open-button.component.jsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { openConversation } from "../../redux/messaging/messaging.actions"; import { openConversation } from "../../redux/messaging/messaging.actions";
import { Icon } from "antd"; import { MessageFilled } from "@ant-design/icons";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser //currentUser: selectCurrentUser
}); });
@@ -14,9 +14,8 @@ export default connect(
mapDispatchToProps mapDispatchToProps
)(function ChatOpenButton({ openConversation, phone }) { )(function ChatOpenButton({ openConversation, phone }) {
return ( return (
<Icon <MessageFilled
style={{ margin: 4 }} style={{ margin: 4 }}
type="message"
onClick={() => openConversation(phone)} onClick={() => openConversation(phone)}
/> />
); );

5
client/src/components/chat-overlay/chat-overlay.component.jsx
View File

@@ -1,4 +1,5 @@
import { Badge, Card, Icon } from "antd"; import { Badge, Card } from "antd";
import { MessageFilled } from "@ant-design/icons";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export default function ChatWindowComponent({ export default function ChatWindowComponent({
@@ -23,7 +24,7 @@ export default function ChatWindowComponent({
</div> </div>
) : ( ) : (
<div> <div>
<Icon type="message" /> <MessageFilled />
<strong style={{ paddingLeft: "10px" }}> <strong style={{ paddingLeft: "10px" }}>
{t("messaging.labels.messaging")} {t("messaging.labels.messaging")}
</strong> </strong>

7
client/src/components/form-items-formatted/email-form-item.component.jsx
View File

@@ -1,4 +1,5 @@
import { Icon, Input } from "antd"; import { Input } from "antd";
import { MailFilled } from "@ant-design/icons";
import React, { forwardRef } from "react"; import React, { forwardRef } from "react";
function FormItemEmail(props, ref) { function FormItemEmail(props, ref) {
return ( return (
@@ -7,10 +8,10 @@ function FormItemEmail(props, ref) {
addonAfter={ addonAfter={
props.email ? ( props.email ? (
<a href={`mailto:${props.email}`}> <a href={`mailto:${props.email}`}>
<Icon type="mail" /> <MailFilled />
</a> </a>
) : ( ) : (
<Icon type="mail" /> <MailFilled />
) )
} }
/> />

15
client/src/components/header/header.component.jsx
View File

@@ -1,4 +1,5 @@
import { Avatar, Col, Icon, Menu, Row } from "antd"; import { Avatar, Col, Menu, Row } from "antd";
import {GlobalOutlined, HomeFilled, TeamOutlined, CalendarFilled, CarFilled} from "@ant-design/icons";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@@ -60,7 +61,7 @@ export default ({
<Menu.SubMenu <Menu.SubMenu
title={ title={
<span> <span>
<Icon type="global" /> <GlobalOutlined/>
<span>{t("menus.currentuser.languageselector")}</span> <span>{t("menus.currentuser.languageselector")}</span>
</span> </span>
} }
@@ -87,14 +88,14 @@ export default ({
> >
<Menu.Item key="home"> <Menu.Item key="home">
<Link to="/manage"> <Link to="/manage">
<Icon type="home" /> <HomeFilled />
{t("menus.header.home")} {t("menus.header.home")}
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.SubMenu title={t("menus.header.jobs")}> <Menu.SubMenu title={t("menus.header.jobs")}>
<Menu.Item key="schedule"> <Menu.Item key="schedule">
<Link to="/manage/schedule"> <Link to="/manage/schedule">
<Icon type="calendar" /> <CalendarFilled />
{t("menus.header.schedule")} {t("menus.header.schedule")}
</Link> </Link>
</Menu.Item> </Menu.Item>
@@ -110,13 +111,13 @@ export default ({
<Menu.SubMenu title={t("menus.header.customers")}> <Menu.SubMenu title={t("menus.header.customers")}>
<Menu.Item key="owners"> <Menu.Item key="owners">
<Link to="/manage/owners"> <Link to="/manage/owners">
<Icon type="team" /> <TeamOutlined/>
{t("menus.header.owners")} {t("menus.header.owners")}
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="vehicles"> <Menu.Item key="vehicles">
<Link to="/manage/vehicles"> <Link to="/manage/vehicles">
<Icon type="car" /> <CarFilled />
{t("menus.header.vehicles")} {t("menus.header.vehicles")}
</Link> </Link>
</Menu.Item> </Menu.Item>
@@ -158,7 +159,7 @@ export default ({
<Menu.SubMenu <Menu.SubMenu
title={ title={
<span> <span>
<Icon type="global" /> <GlobalOutlined />
<span>{t("menus.currentuser.languageselector")}</span> <span>{t("menus.currentuser.languageselector")}</span>
</span> </span>
} }

10
client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx
View File

@@ -1,5 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Button, Popover, Icon, Input, InputNumber, Form } from "antd"; import { Button, Popover, Input, InputNumber, Form } from "antd";
import { SelectOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export default function InvoiceAddLineButton({ export default function InvoiceAddLineButton({
@@ -35,15 +36,16 @@ export default function InvoiceAddLineButton({
initialValue: jobLine.act_price * (discount ? 1 - discount : 1) initialValue: jobLine.act_price * (discount ? 1 - discount : 1)
})(<InputNumber precision={2} name="actual" />)} })(<InputNumber precision={2} name="actual" />)}
</Form.Item> </Form.Item>
DISSC: {discount} {}
<Button onClick={() => setVisibility(false)}>??</Button> DISC: {discount}
<Button onClick={() => setVisibility(false)}>X</Button>
</div> </div>
); );
return ( return (
<Popover content={popContent} visible={visibility}> <Popover content={popContent} visible={visibility}>
<Button onClick={() => setVisibility(true)} disabled={!disabled}> <Button onClick={() => setVisibility(true)} disabled={!disabled}>
<Icon type="select" /> <SelectOutlined />
</Button> </Button>
</Popover> </Popover>
); );

50
client/src/components/job-detail-cards/job-detail-cards.component.jsx
View File

@@ -1,5 +1,11 @@
import { useQuery } from "@apollo/react-hooks"; import { useQuery } from "@apollo/react-hooks";
import { Button, Icon, PageHeader, Tag } from "antd"; import {
PrinterFilled,
FileImageFilled,
EditFilled,
ShoppingFilled
} from "@ant-design/icons";
import { Button, PageHeader, Tag } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@@ -33,10 +39,10 @@ export default function JobDetailCards({ selectedJob }) {
return <div>{t("jobs.errors.nojobselected")}</div>; return <div>{t("jobs.errors.nojobselected")}</div>;
} }
if (loading) return <LoadingSpinner />; if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type='error' />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<div className='job-cards-container'> <div className="job-cards-container">
<NoteUpsertModal <NoteUpsertModal
jobId={data.jobs_by_pk.id} jobId={data.jobs_by_pk.id}
visible={noteModalVisible} visible={noteModalVisible}
@@ -52,9 +58,9 @@ export default function JobDetailCards({ selectedJob }) {
ghost={false} ghost={false}
onBack={() => window.history.back()} onBack={() => window.history.back()}
tags={ tags={
<span key='job-status'> <span key="job-status">
{data.jobs_by_pk.status ? ( {data.jobs_by_pk.status ? (
<Tag color='blue'>{data.jobs_by_pk.status}</Tag> <Tag color="blue">{data.jobs_by_pk.status}</Tag>
) : null} ) : null}
</span> </span>
} }
@@ -73,39 +79,43 @@ export default function JobDetailCards({ selectedJob }) {
} }
extra={[ extra={[
<Button <Button
key='schedule' key="schedule"
//TODO Enabled logic based on status. //TODO Enabled logic based on status.
onClick={() => { onClick={() => {
scheduleModalState[1](true); scheduleModalState[1](true);
}}> }}
>
{t("jobs.actions.schedule")} {t("jobs.actions.schedule")}
</Button>, </Button>,
<Link <Link
key='documents' key="documents"
to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}> to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}
>
<Button> <Button>
<Icon type='file-image' /> <FileImageFilled />
{t("jobs.actions.addDocuments")} {t("jobs.actions.addDocuments")}
</Button> </Button>
</Link>, </Link>,
<Button key='printing'> <Button key="printing">
<Icon type='printer' /> <PrinterFilled />
{t("jobs.actions.printCenter")} {t("jobs.actions.printCenter")}
</Button>, </Button>,
<Button <Button
key='notes' key="notes"
actiontype='addNote' actiontype="addNote"
onClick={() => { onClick={() => {
setNoteModalVisible(!noteModalVisible); setNoteModalVisible(!noteModalVisible);
}}> }}
<Icon type='edit' /> >
<EditFilled />
{t("jobs.actions.addNote")} {t("jobs.actions.addNote")}
</Button>, </Button>,
<Button key='postinvoices'> <Button key="postinvoices">
<Icon type='shopping-cart' /> <ShoppingFilled />
{t("jobs.actions.postInvoices")} {t("jobs.actions.postInvoices")}
</Button> </Button>
]}> ]}
>
{ {
// loading ? ( // loading ? (
// <LoadingSkeleton /> // <LoadingSkeleton />
@@ -126,7 +136,7 @@ export default function JobDetailCards({ selectedJob }) {
// ) // )
} }
<section className='job-cards'> <section className="job-cards">
<JobDetailCardsCustomerComponent <JobDetailCardsCustomerComponent
loading={loading} loading={loading}
data={data ? data.jobs_by_pk : null} data={data ? data.jobs_by_pk : null}

14
client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx
View File

@@ -1,4 +1,5 @@
import { List, Icon } from "antd"; import { List } from "antd";
import { WarningFilled, EyeInvisibleFilled } from "@ant-design/icons";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component"; import CardTemplate from "./job-detail-cards.template.component";
@@ -16,21 +17,20 @@ export default function JobDetailCardsNotesComponent({ loading, data }) {
<CardTemplate <CardTemplate
loading={loading} loading={loading}
title={t("jobs.labels.cards.notes")} title={t("jobs.labels.cards.notes")}
extraLink={`/manage/jobs/${data.id}#notes`}> extraLink={`/manage/jobs/${data.id}#notes`}
>
{data ? ( {data ? (
<Container> <Container>
<List <List
size='small' size="small"
bordered bordered
dataSource={data.notes} dataSource={data.notes}
renderItem={item => ( renderItem={item => (
<List.Item> <List.Item>
{item.critical ? ( {item.critical ? (
<Icon style={{ margin: 4, color: "red" }} type='warning' /> <EyeInvisibleFilled style={{ margin: 4, color: "red" }} />
) : null}
{item.private ? (
<Icon style={{ margin: 4 }} type='eye-invisible' />
) : null} ) : null}
{item.private ? <WarningFilled style={{ margin: 4 }} /> : null}
{item.text} {item.text}
</List.Item> </List.Item>
)} )}

13
client/src/components/jobs-available-new/jobs-available-new.component.jsx
View File

@@ -1,4 +1,9 @@
import { Button, Icon, Input, notification, Table } from "antd"; import { Button, Input, notification, Table } from "antd";
import {
PlusCircleFilled,
DeleteFilled,
SyncOutlined
} from "@ant-design/icons";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { DateTimeFormatter } from "../../utils/DateFormatter"; import { DateTimeFormatter } from "../../utils/DateFormatter";
@@ -124,7 +129,7 @@ export default function JobsAvailableComponent({
}); });
}} }}
> >
<Icon type="delete" /> <DeleteFilled />
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
@@ -132,7 +137,7 @@ export default function JobsAvailableComponent({
setModalVisible(true); setModalVisible(true);
}} }}
> >
<Icon type="plus" /> <PlusCircleFilled />
</Button> </Button>
</span> </span>
) )
@@ -181,7 +186,7 @@ export default function JobsAvailableComponent({
refetch(); refetch();
}} }}
> >
<Icon type="sync" /> <SyncOutlined />
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {

13
client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx
View File

@@ -1,4 +1,9 @@
import { Input, Table, Button, Icon, notification } from "antd"; import { Input, Table, Button, notification } from "antd";
import {
PlusCircleFilled,
DeleteFilled,
SyncOutlined
} from "@ant-design/icons";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { alphaSort } from "../../utils/sorters"; import { alphaSort } from "../../utils/sorters";
@@ -138,7 +143,7 @@ export default function JobsAvailableSupplementComponent({
}); });
}} }}
> >
<Icon type="delete" /> <DeleteFilled />
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
@@ -146,7 +151,7 @@ export default function JobsAvailableSupplementComponent({
setModalVisible(true); setModalVisible(true);
}} }}
> >
<Icon type="plus" /> <PlusCircleFilled />
</Button> </Button>
</span> </span>
) )
@@ -184,7 +189,7 @@ export default function JobsAvailableSupplementComponent({
refetch(); refetch();
}} }}
> >
<Icon type="sync" /> <SyncOutlined />
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {

5
client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
View File

@@ -5,12 +5,13 @@ import {
Checkbox, Checkbox,
Descriptions, Descriptions,
Dropdown, Dropdown,
Icon,
Menu, Menu,
notification, notification,
PageHeader, PageHeader,
Tag Tag
} from "antd"; } from "antd";
import {DownCircleFilled} from "@ant-design/icons";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Moment from "react-moment"; import Moment from "react-moment";
@@ -64,7 +65,7 @@ export default connect(
const menuExtra = [ const menuExtra = [
<Dropdown overlay={statusmenu} key='changestatus'> <Dropdown overlay={statusmenu} key='changestatus'>
<Button> <Button>
{t("jobs.actions.changestatus")} <Icon type='down' /> {t("jobs.actions.changestatus")} <DownCircleFilled />
</Button> </Button>
</Dropdown>, </Dropdown>,
<Badge key='schedule' count={job.appointments_aggregate.aggregate.count}> <Badge key='schedule' count={job.appointments_aggregate.aggregate.count}>

25
client/src/components/jobs-documents/jobs-documents.component.jsx
View File

@@ -1,4 +1,5 @@
import { Icon, Modal, notification, Upload } from "antd"; import { Modal, notification, Upload } from "antd";
import { InboxOutlined } from "@ant-design/icons";
import axios from "axios"; import axios from "axios";
import React, { useState } from "react"; import React, { useState } from "react";
import { useMutation } from "react-apollo"; import { useMutation } from "react-apollo";
@@ -205,7 +206,7 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
}; };
return ( return (
<div className='clearfix'> <div className="clearfix">
<button <button
onClick={() => { onClick={() => {
const imageRequest = JSON.stringify({ const imageRequest = JSON.stringify({
@@ -217,31 +218,33 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net"; const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net";
const url = `${CloudFrontUrl}/${btoa(imageRequest)}`; const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;
console.log("url", url); console.log("url", url);
}}> }}
>
Test PDF Test PDF
</button> </button>
<Upload.Dragger <Upload.Dragger
customRequest={handleUpload} customRequest={handleUpload}
accept='.pdf,.jpg,.jpeg' accept=".pdf,.jpg,.jpeg"
listType='picture-card' listType="picture-card"
fileList={fileList} fileList={fileList}
multiple={true} multiple={true}
onPreview={handlePreview} onPreview={handlePreview}
onRemove={handleRemove} onRemove={handleRemove}
onChange={handleChange}> onChange={handleChange}
<p className='ant-upload-drag-icon'> >
<Icon type='inbox' /> <p className="ant-upload-drag-icon">
<InboxOutlined />
</p> </p>
<p className='ant-upload-text'> <p className="ant-upload-text">
Click or drag file to this area to upload Click or drag file to this area to upload
</p> </p>
<p className='ant-upload-hint'> <p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibit from uploading Support for a single or bulk upload. Strictly prohibit from uploading
company data or other band files company data or other band files
</p> </p>
</Upload.Dragger> </Upload.Dragger>
<Modal visible={previewVisible} footer={null} onCancel={handleCancel}> <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
<img alt='example' style={{ width: "100%" }} src={previewImage} /> <img alt="example" style={{ width: "100%" }} src={previewImage} />
</Modal> </Modal>
</div> </div>
); );

5
client/src/components/jobs-list/jobs-list.component.jsx
View File

@@ -1,4 +1,5 @@
import { Button, Icon, Input, Table } from "antd"; import { Button, Input, Table } from "antd";
import { SyncOutlined } from "@ant-design/icons";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link, withRouter } from "react-router-dom"; import { Link, withRouter } from "react-router-dom";
@@ -208,7 +209,7 @@ export default withRouter(function JobsList({
return ( return (
<div style={{ display: "flex" }}> <div style={{ display: "flex" }}>
<Button onClick={() => refetch()}> <Button onClick={() => refetch()}>
<Icon type="sync" /> <SyncOutlined />
</Button> </Button>
<Input.Search <Input.Search
placeholder="Search..." placeholder="Search..."

31
client/src/components/jobs-notes/jobs.notes.component.jsx
View File

@@ -1,5 +1,11 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Table, Button, Icon, notification } from "antd"; import { Table, Button, notification } from "antd";
import {
WarningFilled,
EyeInvisibleFilled,
DeleteFilled,
EditFilled
} from "@ant-design/icons";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Moment from "react-moment"; import Moment from "react-moment";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container"; import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
@@ -24,11 +30,9 @@ export default function JobNotesComponent({
<span> <span>
{" "} {" "}
{record.critical ? ( {record.critical ? (
<Icon style={{ margin: 4, color: "red" }} type='warning' /> <WarningFilled style={{ margin: 4, color: "red" }} />
) : null}
{record.private ? (
<Icon style={{ margin: 4 }} type='eye-invisible' />
) : null} ) : null}
{record.private ? <EyeInvisibleFilled style={{ margin: 4 }} /> : null}
</span> </span>
) )
}, },
@@ -48,7 +52,7 @@ export default function JobNotesComponent({
sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at), sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
render: (text, record) => ( render: (text, record) => (
<span> <span>
<Moment format='MM/DD/YYYY @ HH:mm'>{record.updated_at}</Moment> <Moment format="MM/DD/YYYY @ HH:mm">{record.updated_at}</Moment>
</span> </span>
) )
}, },
@@ -77,15 +81,17 @@ export default function JobNotesComponent({
message: t("notes.successes.deleted") message: t("notes.successes.deleted")
}); });
}); });
}}> }}
<Icon type='delete' /> >
<DeleteFilled />
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
setExistingNote(record); setExistingNote(record);
setNoteModalVisible(true); setNoteModalVisible(true);
}}> }}
<Icon type='edit' /> >
<EditFilled />
</Button> </Button>
</span> </span>
) )
@@ -105,14 +111,15 @@ export default function JobNotesComponent({
onClick={() => { onClick={() => {
setExistingNote(null); setExistingNote(null);
setNoteModalVisible(true); setNoteModalVisible(true);
}}> }}
>
{t("notes.actions.new")} {t("notes.actions.new")}
</Button> </Button>
<Table <Table
loading={loading} loading={loading}
pagination={{ position: "bottom" }} pagination={{ position: "bottom" }}
columns={columns.map(item => ({ ...item }))} columns={columns.map(item => ({ ...item }))}
rowKey='id' rowKey="id"
dataSource={data} dataSource={data}
/> />
</div> </div>

6
client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx
View File

@@ -1,4 +1,4 @@
import { Icon } from "antd"; import { BuildFilled, LoginOutlined } from "@ant-design/icons";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@@ -15,12 +15,12 @@ export default connect(
)(function ManageSignInButton({ currentUser }) { )(function ManageSignInButton({ currentUser }) {
return currentUser.authorized ? ( return currentUser.authorized ? (
<Link to="/manage"> <Link to="/manage">
<Icon type="build" /> <BuildFilled />
Manage Manage
</Link> </Link>
) : ( ) : (
<Link to="/signin"> <Link to="/signin">
<Icon type="login" /> <LoginOutlined />
Sign In Sign In
</Link> </Link>
); );

18
client/src/components/parts-order-modal/parts-order-modal.component.jsx
View File

@@ -1,4 +1,5 @@
import { AutoComplete, DatePicker, Icon, Input, List, Radio } from "antd"; import { AutoComplete, DatePicker, Input, List, Radio } from "antd";
import { HeartFilled } from "@ant-design/icons";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export default function PartsOrderModalComponent({ export default function PartsOrderModalComponent({
@@ -34,13 +35,14 @@ export default function PartsOrderModalComponent({
onSelect={handleSelect} onSelect={handleSelect}
defaultOpen defaultOpen
backfill backfill
optionLabelProp='value' optionLabelProp="value"
dataSource={vendorComplete} dataSource={vendorComplete}
placeholder={t("vendors.labels.search")}> placeholder={t("vendors.labels.search")}
>
{vendorComplete.map(v => ( {vendorComplete.map(v => (
<AutoComplete.Option value={v.name} key={v.id}> <AutoComplete.Option value={v.name} key={v.id}>
<div>{v.name}</div> <div>{v.name}</div>
<div> {v.favorite ? <Icon type='heart' /> : null}</div> <div> {v.favorite ? <HeartFilled /> : null}</div>
</AutoComplete.Option> </AutoComplete.Option>
))} ))}
</AutoComplete> </AutoComplete>
@@ -55,14 +57,15 @@ export default function PartsOrderModalComponent({
{t("parts_orders.labels.inthisorder")} {t("parts_orders.labels.inthisorder")}
<List <List
itemLayout='horizontal' itemLayout="horizontal"
dataSource={orderLines} dataSource={orderLines}
renderItem={item => ( renderItem={item => (
<List.Item <List.Item
actions={[ actions={[
<Input placeholder={t("parts_orders.fields.lineremarks")} /> <Input placeholder={t("parts_orders.fields.lineremarks")} />
//TODO Editable table/adding line remarks to the order. //TODO Editable table/adding line remarks to the order.
]}> ]}
>
{ {
// <List.Item.Meta // <List.Item.Meta
// avatar={ // avatar={
@@ -81,7 +84,8 @@ export default function PartsOrderModalComponent({
<Radio.Group <Radio.Group
defaultValue={sendType} defaultValue={sendType}
onChange={e => setSendType(e.target.value)}> onChange={e => setSendType(e.target.value)}
>
<Radio value={"e"}>{t("parts_orders.labels.email")}</Radio> <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
<Radio value={"p"}>{t("parts_orders.labels.print")}</Radio> <Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
</Radio.Group> </Radio.Group>

7
client/src/components/profile-sidebar/profile-sidebar.component.jsx
View File

@@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Layout, Menu, Icon } from "antd"; import { Layout, Menu } from "antd";
import { UserOutlined, BankFilled } from "@ant-design/icons";
export default function ProfileSideBar({ export default function ProfileSideBar({
sidebarSelection, sidebarSelection,
@@ -21,11 +22,11 @@ export default function ProfileSideBar({
mode="inline" mode="inline"
> >
<Menu.Item key="profile"> <Menu.Item key="profile">
<Icon type="user" /> <UserOutlined />
<span>{t("menus.profilesidebar.profile")}</span> <span>{t("menus.profilesidebar.profile")}</span>
</Menu.Item> </Menu.Item>
<Menu.Item key="shops"> <Menu.Item key="shops">
<Icon type="bank" /> <BankFilled />
<span>{t("menus.profilesidebar.shops")}</span> <span>{t("menus.profilesidebar.shops")}</span>
</Menu.Item> </Menu.Item>
</Menu> </Menu>

5
client/src/components/schedule-calendar/schedule-calendar.component.jsx
View File

@@ -1,7 +1,8 @@
import React from "react"; import React from "react";
//import "react-big-calendar/lib/css/react-big-calendar.css"; //import "react-big-calendar/lib/css/react-big-calendar.css";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component"; import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import { Button, Icon } from "antd"; import { Button } from "antd";
import { SyncOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import ScheduleAppointmentModalContainer from "../schedule-appointment-modal/schedule-appointment-modal.container"; import ScheduleAppointmentModalContainer from "../schedule-appointment-modal/schedule-appointment-modal.container";
@@ -19,7 +20,7 @@ export default function ScheduleCalendarComponent({
refetch(); refetch();
}} }}
> >
<Icon type="sync" /> <SyncOutlined />
</Button> </Button>
<Button <Button

12
client/src/components/sign-in-form/sign-in-form.component.jsx
View File

@@ -1,4 +1,5 @@
import { Button, Form, Icon, Input } from "antd"; import { Button, Form, Input } from "antd";
import { LockFilled } from "@ant-design/icons";
import React from "react"; import React from "react";
import { useApolloClient } from "react-apollo"; import { useApolloClient } from "react-apollo";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -7,7 +8,10 @@ import { createStructuredSelector } from "reselect";
import Logo from "../../assets/logo240.png"; import Logo from "../../assets/logo240.png";
import { UPSERT_USER } from "../../graphql/user.queries"; import { UPSERT_USER } from "../../graphql/user.queries";
import { emailSignInStart } from "../../redux/user/user.actions"; import { emailSignInStart } from "../../redux/user/user.actions";
import { selectCurrentUser, selectSignInError } from "../../redux/user/user.selectors"; import {
selectCurrentUser,
selectSignInError
} from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser, currentUser: selectCurrentUser,
@@ -86,9 +90,7 @@ export default connect(
] ]
})( })(
<Input <Input
prefix={ prefix={<LockFilled style={{ color: "rgba(0,0,0,.25)" }} />}
<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
}
type="password" type="password"
placeholder="Password" placeholder="Password"
/> />

17
client/src/components/vendors-form/vendors-form.component.jsx
View File

@@ -1,14 +1,6 @@
import { import { Button, Checkbox, Col, Form, Input, InputNumber, Row } from "antd";
Button,
Checkbox,
Col,
Form,
Icon,
Input,
InputNumber,
Row
} from "antd";
import React from "react"; import React from "react";
import { MinusCircleOutlined, PlusCircleFilled } from "@ant-design/icons";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import FormItemEmail from "../form-items-formatted/email-form-item.component"; import FormItemEmail from "../form-items-formatted/email-form-item.component";
import ResetForm from "../form-items-formatted/reset-form-item.component"; import ResetForm from "../form-items-formatted/reset-form-item.component";
@@ -75,9 +67,8 @@ export default function VendorsFormComponent({ form, vendor, handleDelete }) {
/> />
)} )}
{getFieldValue("keys").length > 1 ? ( {getFieldValue("keys").length > 1 ? (
<Icon <MinusCircleOutlined
className="dynamic-delete-button" className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => remove(k)} onClick={() => remove(k)}
/> />
) : null} ) : null}
@@ -104,7 +95,7 @@ export default function VendorsFormComponent({ form, vendor, handleDelete }) {
))} ))}
<Form.Item label={t("vendors.fields.favorite")}> <Form.Item label={t("vendors.fields.favorite")}>
<Button type="dashed" onClick={add} style={{ width: "60%" }}> <Button type="dashed" onClick={add} style={{ width: "60%" }}>
<Icon type="plus" /> Add field <PlusCircleFilled /> Add field
</Button> </Button>
</Form.Item> </Form.Item>

20
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -1,4 +1,12 @@
import { Form, Icon, Tabs } from "antd"; import { Form, Tabs } from "antd";
import {
BarsOutlined,
DollarCircleOutlined,
ToolFilled,
CalendarFilled,
FileImageFilled
} from "@ant-design/icons";
import Icon from "@ant-design/icons";
import React, { lazy, Suspense, useContext } from "react"; import React, { lazy, Suspense, useContext } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
@@ -140,7 +148,7 @@ export default function JobsDetailPage({
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
<Icon type="bars" /> <BarsOutlined />
{t("menus.jobsdetail.repairdata")} {t("menus.jobsdetail.repairdata")}
</span> </span>
} }
@@ -152,7 +160,7 @@ export default function JobsDetailPage({
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
<Icon type="dollar" /> <DollarCircleOutlined />
{t("menus.jobsdetail.financials")} {t("menus.jobsdetail.financials")}
</span> </span>
} }
@@ -164,7 +172,7 @@ export default function JobsDetailPage({
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
<Icon type="tool" /> <ToolFilled />
{t("menus.jobsdetail.partssublet")} {t("menus.jobsdetail.partssublet")}
</span> </span>
} }
@@ -188,7 +196,7 @@ export default function JobsDetailPage({
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
<Icon type="calendar" /> <CalendarFilled />
{t("menus.jobsdetail.dates")} {t("menus.jobsdetail.dates")}
</span> </span>
} }
@@ -200,7 +208,7 @@ export default function JobsDetailPage({
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
<Icon type="file-image" /> <FileImageFilled />
{t("jobs.labels.documents")} {t("jobs.labels.documents")}
</span> </span>
} }