diff --git a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx index b39d70d5b..7b1fd410e 100644 --- a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx +++ b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx @@ -18,6 +18,11 @@ import { createStructuredSelector } from "reselect"; import { selectBodyshop } from "../../redux/user/user.selectors"; import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util"; import _ from "lodash"; + +const graphProps = { + strokeWidth: 3, +}; + const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, }); @@ -51,7 +56,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) { } const theValue = { - date: moment(val).format("D dd"), + date: moment(val).format("D ddd"), paintHrs: _.round(dayhrs.painthrs, 1), bodyHrs: _.round(dayhrs.bodyhrs, 1), accTargetHrs: _.round( @@ -81,36 +86,37 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) { margin={{ top: 20, right: 20, bottom: 20, left: 20 }} > - - + + diff --git a/client/src/components/scoreboard-display/scoreboard-display.component.jsx b/client/src/components/scoreboard-display/scoreboard-display.component.jsx index 6c126c736..29b3065cc 100644 --- a/client/src/components/scoreboard-display/scoreboard-display.component.jsx +++ b/client/src/components/scoreboard-display/scoreboard-display.component.jsx @@ -1,12 +1,33 @@ import { Col, Row } from "antd"; -import React from "react"; +import React, { useEffect } from "react"; import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component"; import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component"; import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component"; -export default function ScoreboardDisplayComponent({ scoreboardSubscription }) { - const { data } = scoreboardSubscription; +import { connect } from "react-redux"; +import { createStructuredSelector } from "reselect"; +import { selectBodyshop } from "../../redux/user/user.selectors"; +import moment from "moment"; +import { useApolloClient } from "@apollo/client"; +import { GET_BLOCKED_DAYS } from "../../graphql/scoreboard.queries"; +const mapStateToProps = createStructuredSelector({ + //currentUser: selectCurrentUser + bodyshop: selectBodyshop, +}); +const mapDispatchToProps = (dispatch) => ({ + //setUserLanguage: language => dispatch(setUserLanguage(language)) +}); +export default connect( + mapStateToProps, + mapDispatchToProps +)(ScoreboardDisplayComponent); +export function ScoreboardDisplayComponent({ + bodyshop, + scoreboardSubscription, +}) { + const { data } = scoreboardSubscription; + const client = useApolloClient(); const scoreBoardlist = (data && data.scoreboard) || []; const sbEntriesByDate = {}; @@ -19,6 +40,29 @@ export default function ScoreboardDisplayComponent({ scoreboardSubscription }) { sbEntriesByDate[entryDate].push(i); }); + useEffect(() => { + //Update the locals. + async function setMomentSettings() { + const { + data: { appointments }, + } = await client.query({ + query: GET_BLOCKED_DAYS, + variables: { + start: moment().startOf("month"), + end: moment().endOf("month"), + }, + }); + + moment.updateLocale("ca", { + workingWeekdays: translateSettingsToWorkingDays(bodyshop.workingdays), + holidays: appointments.map((h) => moment(h.start).format("MM-DD-YYYY")), + holidayFormat: "MM-DD-YYYY", + }); + } + + setMomentSettings(); + }, [client, bodyshop]); + return ( @@ -35,3 +79,30 @@ export default function ScoreboardDisplayComponent({ scoreboardSubscription }) { ); } + +function translateSettingsToWorkingDays(workingdays) { + const days = []; + + if (workingdays.monday) { + days.push(1); + } + if (workingdays.tuesday) { + days.push(2); + } + if (workingdays.wednesday) { + days.push(3); + } + if (workingdays.thursday) { + days.push(4); + } + if (workingdays.friday) { + days.push(5); + } + if (workingdays.saturday) { + days.push(6); + } + if (workingdays.sunday) { + days.push(0); + } + return days; +} diff --git a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js index 47d40c759..97f1813b9 100644 --- a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js +++ b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js @@ -1,8 +1,8 @@ import moment from "moment-business-days"; -moment.updateLocale("ca", { - workingWeekdays: [1, 2, 3, 4, 5], -}); +// moment.updateLocale("ca", { +// workingWeekdays: [1, 2, 3, 4, 5, 6], +// }); export const CalculateWorkingDaysThisMonth = () => { return moment().endOf("month").businessDaysIntoMonth(); diff --git a/client/src/graphql/scoreboard.queries.js b/client/src/graphql/scoreboard.queries.js index e2b5794d5..16a1c6103 100644 --- a/client/src/graphql/scoreboard.queries.js +++ b/client/src/graphql/scoreboard.queries.js @@ -62,3 +62,23 @@ export const QUERY_SCOREBOARD_ENTRY = gql` } } `; + +export const GET_BLOCKED_DAYS = gql` + query GET_BLOCKED_DAYS($start: timestamptz, $end: timestamptz) { + appointments( + where: { + _and: [ + { block: { _eq: true } } + { canceled: { _eq: false } } + { start: { _gte: $start } } + { end: { _lte: $end } } + ] + } + ) { + id + block + start + end + } + } +`;