91 lines
2.9 KiB
JavaScript
91 lines
2.9 KiB
JavaScript
import Icon, { SearchOutlined, ScheduleOutlined } from "@ant-design/icons";
|
|
import { Layout, Menu } from "antd";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { FaBusinessTime } from "react-icons/fa";
|
|
import { FiLogIn, FiLogOut } from "react-icons/fi";
|
|
import { MdTimer } from "react-icons/md";
|
|
import { connect } from "react-redux";
|
|
import { Link } from "react-router-dom";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { techLogout } from "../../redux/tech/tech.actions";
|
|
import { selectTechnician } from "../../redux/tech/tech.selectors";
|
|
import { BsKanban } from "react-icons/bs";
|
|
|
|
const { Sider } = Layout;
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
technician: selectTechnician,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
techLogout: () => dispatch(techLogout()),
|
|
});
|
|
|
|
export function TechSider({ technician, techLogout }) {
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const { t } = useTranslation();
|
|
const onCollapse = (collapsed) => {
|
|
setCollapsed(collapsed);
|
|
};
|
|
|
|
return (
|
|
<Sider
|
|
style={{
|
|
height: "100vh",
|
|
position: "sticky",
|
|
top: 0,
|
|
left: 0,
|
|
}}
|
|
collapsible
|
|
collapsed={collapsed}
|
|
onCollapse={onCollapse}
|
|
>
|
|
<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
|
|
<Menu.Item
|
|
key="1"
|
|
disabled={!!technician}
|
|
icon={<Icon component={FiLogIn} />}
|
|
>
|
|
<Link to={`/tech/login`}>{t("menus.tech.login")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key="2" disabled={!!!technician} icon={<SearchOutlined />}>
|
|
<Link to={`/tech/joblookup`}>{t("menus.tech.joblookup")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
key="3"
|
|
disabled={!!!technician}
|
|
icon={<Icon component={FaBusinessTime} />}
|
|
>
|
|
<Link to={`/tech/jobclock`}>{t("menus.tech.jobclockin")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
key="4"
|
|
disabled={!!!technician}
|
|
icon={<Icon component={MdTimer} />}
|
|
>
|
|
<Link to={`/tech/shiftclock`}>{t("menus.tech.shiftclockin")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key="5" disabled={!!!technician} icon={<ScheduleOutlined />}>
|
|
<Link to={`/tech/list`}>{t("menus.tech.productionlist")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
key="6"
|
|
disabled={!!!technician}
|
|
icon={<Icon component={BsKanban} />}
|
|
>
|
|
<Link to={`/tech/board`}> {t("menus.tech.productionboard")}</Link>
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
key="7"
|
|
disabled={!!!technician}
|
|
onClick={() => techLogout()}
|
|
icon={<Icon component={FiLogOut} />}
|
|
>
|
|
{t("menus.tech.logout")}
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Sider>
|
|
);
|
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(TechSider);
|