@@ -1,36 +1,33 @@
|
||||
import Icon, { FieldTimeOutlined } from "@ant-design/icons";
|
||||
import { Tabs } from "antd";
|
||||
import Icon, {FieldTimeOutlined} from "@ant-design/icons";
|
||||
import {Tabs} from "antd";
|
||||
import queryString from "query-string";
|
||||
import React, { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FaShieldAlt } from "react-icons/fa";
|
||||
import { connect } from "react-redux";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import React, {useEffect} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {FaShieldAlt} from "react-icons/fa";
|
||||
import {connect} from "react-redux";
|
||||
import {useLocation, useNavigate} from "react-router-dom";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
|
||||
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
|
||||
import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
|
||||
import ScoreboardTimeTicketsStats from "../../components/scoreboard-timetickets-stats/scoreboard-timetickets.component";
|
||||
import ScoreboardTimeTickets from "../../components/scoreboard-timetickets/scoreboard-timetickets.component";
|
||||
import {
|
||||
setBreadcrumbs,
|
||||
setSelectedHeader,
|
||||
} from "../../redux/application/application.actions";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
|
||||
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||
|
||||
/**
|
||||
* Mapping state to props
|
||||
*/
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
/**
|
||||
* Mapping dispatch to props
|
||||
*/
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
|
||||
setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
|
||||
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
|
||||
setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -39,74 +36,74 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
* @param {Function} props.setBreadcrumbs - Function to set breadcrumbs.
|
||||
* @param {Function} props.setSelectedHeader - Function to set selected header.
|
||||
*/
|
||||
export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
|
||||
const { t } = useTranslation();
|
||||
const searchParams = queryString.parse(useLocation().search);
|
||||
const { tab } = searchParams;
|
||||
const history = useNavigate();
|
||||
export function ScoreboardContainer({setBreadcrumbs, setSelectedHeader}) {
|
||||
const {t} = useTranslation();
|
||||
const searchParams = queryString.parse(useLocation().search);
|
||||
const {tab} = searchParams;
|
||||
const history = useNavigate();
|
||||
|
||||
/**
|
||||
* useEffect hook to set document title, selected header and breadcrumbs
|
||||
*/
|
||||
useEffect(() => {
|
||||
document.title = t("titles.scoreboard");
|
||||
setSelectedHeader("scoreboard");
|
||||
setBreadcrumbs([
|
||||
{
|
||||
link: "/manage/scoreboard",
|
||||
label: t("titles.bc.scoreboard"),
|
||||
},
|
||||
]);
|
||||
}, [t, setBreadcrumbs, setSelectedHeader]);
|
||||
/**
|
||||
* useEffect hook to set document title, selected header and breadcrumbs
|
||||
*/
|
||||
useEffect(() => {
|
||||
document.title = t("titles.scoreboard");
|
||||
setSelectedHeader("scoreboard");
|
||||
setBreadcrumbs([
|
||||
{
|
||||
link: "/manage/scoreboard",
|
||||
label: t("titles.bc.scoreboard"),
|
||||
},
|
||||
]);
|
||||
}, [t, setBreadcrumbs, setSelectedHeader]);
|
||||
|
||||
/**
|
||||
* Render the component
|
||||
*/
|
||||
return (
|
||||
<FeatureWrapper featureName="scoreboard">
|
||||
<RbacWrapper action="scoreboard:view">
|
||||
<Tabs
|
||||
activeKey={tab || "sb"}
|
||||
destroyInactiveTabPane
|
||||
onChange={(key) => {
|
||||
searchParams.tab = key;
|
||||
history({
|
||||
search: queryString.stringify(searchParams),
|
||||
});
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
key: "sb",
|
||||
icon: <Icon component={FaShieldAlt} />,
|
||||
label: t("scoreboard.labels.jobs"),
|
||||
forceRender: true,
|
||||
children: <ScoreboardDisplay />,
|
||||
},
|
||||
{
|
||||
key: "tickets",
|
||||
icon: <FieldTimeOutlined />,
|
||||
label: t("scoreboard.labels.timeticketsemployee"),
|
||||
forceRender: true,
|
||||
children: <ScoreboardTimeTickets />,
|
||||
},
|
||||
{
|
||||
key: "ticketsstats",
|
||||
icon: <FieldTimeOutlined />,
|
||||
label: t("scoreboard.labels.allemployeetimetickets"),
|
||||
forceRender: true,
|
||||
children: <ScoreboardTimeTicketsStats />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</RbacWrapper>
|
||||
</FeatureWrapper>
|
||||
);
|
||||
/**
|
||||
* Render the component
|
||||
*/
|
||||
return (
|
||||
<FeatureWrapper featureName="scoreboard">
|
||||
<RbacWrapper action="scoreboard:view">
|
||||
<Tabs
|
||||
activeKey={tab || "sb"}
|
||||
destroyInactiveTabPane
|
||||
onChange={(key) => {
|
||||
searchParams.tab = key;
|
||||
history({
|
||||
search: queryString.stringify(searchParams),
|
||||
});
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
key: "sb",
|
||||
icon: <Icon component={FaShieldAlt}/>,
|
||||
label: t("scoreboard.labels.jobs"),
|
||||
forceRender: true,
|
||||
children: <ScoreboardDisplay/>,
|
||||
},
|
||||
{
|
||||
key: "tickets",
|
||||
icon: <FieldTimeOutlined/>,
|
||||
label: t("scoreboard.labels.timeticketsemployee"),
|
||||
forceRender: true,
|
||||
children: <ScoreboardTimeTickets/>,
|
||||
},
|
||||
{
|
||||
key: "ticketsstats",
|
||||
icon: <FieldTimeOutlined/>,
|
||||
label: t("scoreboard.labels.allemployeetimetickets"),
|
||||
forceRender: true,
|
||||
children: <ScoreboardTimeTicketsStats/>,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</RbacWrapper>
|
||||
</FeatureWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Connecting the component to Redux store
|
||||
*/
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ScoreboardContainer);
|
||||
Reference in New Issue
Block a user