diff --git a/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx b/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx
index b4ef383e5..9db494f92 100644
--- a/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx
+++ b/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
import axios from "axios";
import _ from "lodash";
import queryString from "query-string";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -16,16 +16,32 @@ import useLocalStorage from "../../utils/useLocalStorage";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
-import { selectIsPartsEntry } from "../../redux/application/application.selectors";
+import { selectDarkMode, selectIsPartsEntry } from "../../redux/application/application.selectors";
import * as Sentry from "@sentry/react";
import getPartsBasePath from "../../utils/getPartsBasePath.js";
+import { toggleDarkMode } from "../../redux/application/application.actions.js";
+import { FaMoon, FaSun } from "react-icons/fa";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
- isPartsEntry: selectIsPartsEntry
+ isPartsEntry: selectIsPartsEntry,
+ darkMode: selectDarkMode
});
-export function SimplifiedPartsJobsListComponent({ bodyshop, refetch, loading, jobs, total, isPartsEntry }) {
+const mapDispatchToProps = (dispatch) => ({
+ toggleDarkMode: () => dispatch(toggleDarkMode())
+});
+
+export function SimplifiedPartsJobsListComponent({
+ bodyshop,
+ refetch,
+ loading,
+ jobs,
+ total,
+ isPartsEntry,
+ darkMode,
+ toggleDarkMode
+}) {
const search = queryString.parse(useLocation().search);
const [openSearchResults, setOpenSearchResults] = useState([]);
const [searchLoading, setSearchLoading] = useState(false);
@@ -36,6 +52,10 @@ export function SimplifiedPartsJobsListComponent({ bodyshop, refetch, loading, j
const { t } = useTranslation();
+ const handleDarkModeToggle = useCallback(() => {
+ toggleDarkMode();
+ }, [toggleDarkMode]);
+
const columns = [
{
title: t("jobs.fields.ro_number"),
@@ -206,6 +226,11 @@ export function SimplifiedPartsJobsListComponent({ bodyshop, refetch, loading, j
{t("general.labels.settings")}
+ : }
+ onClick={handleDarkModeToggle}
+ title={darkMode ? t("user.actions.light_theme") : t("user.actions.dark_theme")}
+ />
{search.search && (
<>
@@ -262,4 +287,4 @@ export function SimplifiedPartsJobsListComponent({ bodyshop, refetch, loading, j
);
}
-export default connect(mapStateToProps)(SimplifiedPartsJobsListComponent);
+export default connect(mapStateToProps, mapDispatchToProps)(SimplifiedPartsJobsListComponent);