303 lines
9.4 KiB
JavaScript
303 lines
9.4 KiB
JavaScript
import Icon, {
|
|
CarFilled,
|
|
DollarCircleFilled,
|
|
FileAddFilled,
|
|
FileFilled,
|
|
GlobalOutlined,
|
|
HomeFilled,
|
|
TeamOutlined,
|
|
UserOutlined
|
|
} from "@ant-design/icons";
|
|
import { Avatar, Col, Layout, Menu, Row } from "antd";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { FaCalendarAlt, FaCarCrash } from "react-icons/fa";
|
|
import { connect } from "react-redux";
|
|
import { Link } from "react-router-dom";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { setModalContext } from "../../redux/modals/modals.actions";
|
|
import { signOutStart } from "../../redux/user/user.actions";
|
|
import {
|
|
selectBodyshop,
|
|
selectCurrentUser
|
|
} from "../../redux/user/user.selectors";
|
|
import "./header.styles.scss";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser,
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setInvoiceEnterContext: (context) =>
|
|
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
|
|
setTimeTicketContext: (context) =>
|
|
dispatch(setModalContext({ context: context, modal: "timeTicket" })),
|
|
setPaymentContext: (context) =>
|
|
dispatch(setModalContext({ context: context, modal: "payment" })),
|
|
signOutStart: () => dispatch(signOutStart()),
|
|
});
|
|
|
|
const logoSpan = {
|
|
xs: {
|
|
span: 0,
|
|
},
|
|
md: {
|
|
span: 1,
|
|
},
|
|
lg: {
|
|
span: 2,
|
|
},
|
|
};
|
|
|
|
const menuSpan = {
|
|
xs: {
|
|
span: 24,
|
|
},
|
|
md: {
|
|
span: 22,
|
|
offset: 1,
|
|
},
|
|
lg: {
|
|
span: 21,
|
|
offset: 1,
|
|
},
|
|
};
|
|
|
|
function Header({
|
|
bodyshop,
|
|
handleMenuClick,
|
|
currentUser,
|
|
signOutStart,
|
|
setInvoiceEnterContext,
|
|
setTimeTicketContext,
|
|
setPaymentContext,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const { Header } = Layout;
|
|
|
|
return (
|
|
<Header>
|
|
<Row>
|
|
<Col {...logoSpan}>
|
|
<img
|
|
className='header-shop-logo'
|
|
alt={bodyshop ? bodyshop.shopname : "ImEX Online Logo"}
|
|
src={
|
|
bodyshop && bodyshop.logo_img_path
|
|
? bodyshop.logo_img_path
|
|
: "./logo192.png"
|
|
}
|
|
/>
|
|
</Col>
|
|
<Col {...menuSpan}>
|
|
<Menu
|
|
mode='horizontal'
|
|
theme='dark'
|
|
className='header-main-menu'
|
|
onClick={handleMenuClick}>
|
|
<Menu.Item key='home'>
|
|
<Link to='/manage'>
|
|
<HomeFilled />
|
|
{t("menus.header.home")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.SubMenu
|
|
title={
|
|
<span>
|
|
<Icon component={FaCarCrash} />
|
|
<span>{t("menus.header.jobs")}</span>
|
|
</span>
|
|
}>
|
|
<Menu.Item key='schedule'>
|
|
<Link to='/manage/schedule'>
|
|
<Icon component={FaCalendarAlt} />
|
|
{t("menus.header.schedule")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='production'>
|
|
<Link to='/manage/production/list'>
|
|
<Icon component={FaCalendarAlt} />
|
|
{t("menus.header.productionlist")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='activejobs'>
|
|
<Link to='/manage/jobs'>{t("menus.header.activejobs")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='alljobs'>
|
|
<Link to='/manage/jobs/all'>{t("menus.header.alljobs")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='availablejobs'>
|
|
<Link to='/manage/available'>
|
|
{t("menus.header.availablejobs")}
|
|
</Link>
|
|
</Menu.Item>
|
|
</Menu.SubMenu>
|
|
<Menu.SubMenu title={t("menus.header.customers")}>
|
|
<Menu.Item key='owners'>
|
|
<Link to='/manage/owners'>
|
|
<TeamOutlined />
|
|
{t("menus.header.owners")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='vehicles'>
|
|
<Link to='/manage/vehicles'>
|
|
<CarFilled />
|
|
{t("menus.header.vehicles")}
|
|
</Link>
|
|
</Menu.Item>
|
|
</Menu.SubMenu>
|
|
<Menu.SubMenu
|
|
title={
|
|
<span>
|
|
<CarFilled />
|
|
<span>{t("menus.header.courtesycars")}</span>
|
|
</span>
|
|
}>
|
|
<Menu.Item key='courtesycarsall'>
|
|
<Link to='/manage/courtesycars'>
|
|
<CarFilled />
|
|
{t("menus.header.courtesycars-all")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='contracts'>
|
|
<Link to='/manage/courtesycars/contracts'>
|
|
<FileFilled />
|
|
{t("menus.header.courtesycars-contracts")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='newcontract'>
|
|
<Link to='/manage/courtesycars/contracts/new'>
|
|
<FileAddFilled />
|
|
{t("menus.header.courtesycars-newcontract")}
|
|
</Link>
|
|
</Menu.Item>
|
|
</Menu.SubMenu>
|
|
<Menu.SubMenu
|
|
title={
|
|
<span>
|
|
<DollarCircleFilled />
|
|
<span>{t("menus.header.accounting")}</span>
|
|
</span>
|
|
}>
|
|
<Menu.Item
|
|
key='enterpayments'
|
|
onClick={() => {
|
|
setPaymentContext({
|
|
actions: {},
|
|
context: {},
|
|
});
|
|
}}>
|
|
{t("menus.header.enterpayment")}
|
|
</Menu.Item>
|
|
|
|
<Menu.Item
|
|
key='enterinvoices'
|
|
onClick={() => {
|
|
setInvoiceEnterContext({
|
|
actions: {},
|
|
context: {},
|
|
});
|
|
}}>
|
|
{t("menus.header.enterinvoices")}
|
|
</Menu.Item>
|
|
<Menu.Item key='invoices'>
|
|
<Link to='/manage/invoices'>{t("menus.header.invoices")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
key='entertimetickets'
|
|
onClick={() => {
|
|
setTimeTicketContext({
|
|
actions: {},
|
|
context: {},
|
|
});
|
|
}}>
|
|
{t("menus.header.entertimeticket")}
|
|
</Menu.Item>
|
|
<Menu.Item key='receivables'>
|
|
<Link to='/manage/accounting/receivables'>
|
|
{t("menus.header.accounting-receivables")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='payables'>
|
|
<Link to='/manage/accounting/payables'>
|
|
{t("menus.header.accounting-payables")}
|
|
</Link>
|
|
</Menu.Item>
|
|
</Menu.SubMenu>
|
|
<Menu.SubMenu title={t("menus.header.shop")}>
|
|
<Menu.Item key='shop'>
|
|
<Link to='/manage/shop'>{t("menus.header.shop_config")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='shop-templates'>
|
|
<Link to='/manage/shop/templates'>
|
|
{t("menus.header.shop_templates")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='shop-vendors'>
|
|
<Link to='/manage/shop/vendors'>
|
|
{t("menus.header.shop_vendors")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key='shop-csi'>
|
|
<Link to='/manage/shop/csi'>{t("menus.header.shop_csi")}</Link>
|
|
</Menu.Item>
|
|
</Menu.SubMenu>
|
|
<Menu.SubMenu
|
|
title={
|
|
<div>
|
|
{currentUser.photoURL ? (
|
|
<Avatar
|
|
src={currentUser.photoURL}
|
|
style={{
|
|
margin: "10px",
|
|
}}
|
|
/>
|
|
) : (
|
|
<Avatar
|
|
style={{
|
|
backgroundColor: "#87d068",
|
|
margin: "10px",
|
|
}}
|
|
icon={<UserOutlined />}
|
|
/>
|
|
)}
|
|
|
|
{currentUser.displayName || t("general.labels.unknown")}
|
|
</div>
|
|
}>
|
|
<Menu.Item danger onClick={() => signOutStart()}>
|
|
{t("user.actions.signout")}
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
<Link to='/manage/profile'>
|
|
{t("menus.currentuser.profile")}
|
|
</Link>
|
|
</Menu.Item>
|
|
<Menu.SubMenu
|
|
title={
|
|
<span>
|
|
<GlobalOutlined />
|
|
<span>{t("menus.currentuser.languageselector")}</span>
|
|
</span>
|
|
}>
|
|
<Menu.Item actiontype='lang-select' key='en-US'>
|
|
{t("general.languages.english")}
|
|
</Menu.Item>
|
|
<Menu.Item actiontype='lang-select' key='fr-CA'>
|
|
{t("general.languages.french")}
|
|
</Menu.Item>
|
|
<Menu.Item actiontype='lang-select' key='es-MX'>
|
|
{t("general.languages.spanish")}
|
|
</Menu.Item>
|
|
</Menu.SubMenu>
|
|
</Menu.SubMenu>
|
|
</Menu>
|
|
</Col>
|
|
</Row>
|
|
</Header>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Header);
|