admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-1612 Add employee vacation tracking.

Browse Source
This commit is contained in:
Patrick Fic
2022-01-05 11:45:37 -08:00
parent 6457acc61e
commit 50926547b3
17 changed files with 678 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/schedule-calendar/schedule-calendar.container.jsx
View File

@@ -10,6 +10,7 @@ import ScheduleCalendarComponent from "./schedule-calendar.component";
import { calculateScheduleLoad } from "../../redux/application/application.actions";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import moment from "moment";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
@@ -26,7 +27,12 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
const { loading, error, data, refetch } = useQuery(
QUERY_ALL_ACTIVE_APPOINTMENTS,
{
variables: { start: range.start.toDate(), end: range.end.toDate() },
variables: {
start: range.start.toDate(),
end: range.end.toDate(),
startd: range.start,
endd: range.end,
},
skip: !!!range.start || !!!range.end,
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
@@ -39,15 +45,29 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
let normalizedData = data.appointments.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return Object.assign(
{},
e,
{ start: new Date(e.start) },
{ end: new Date(e.end) }
);
});
let normalizedData = [
...data.appointments.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return Object.assign(
{},
e,
{ start: new Date(e.start) },
{ end: new Date(e.end) }
);
}),
...data.employee_vacation.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return {
...e,
title: `${
(e.employee.first_name && e.employee.first_name.substr(0, 1)) || ""
} ${e.employee.last_name || ""} OUT`,
color: "red",
start: moment(e.start).startOf("day").toDate(),
end: moment(e.end).startOf("day").toDate(),
};
}),
];
return (
<ScheduleCalendarComponent

34
client/src/components/schedule-day-view/schedule-day-view.container.jsx
View File

@@ -11,6 +11,8 @@ export default function ScheduleDayViewContainer({ day }) {
variables: {
start: moment(day).startOf("day"),
end: moment(day).endOf("day"),
startd: moment(day).startOf("day").format("YYYY-MM-DD"),
endd: moment(day).add(1, "day").format("YYYY-MM-DD"),
},
skip: !moment(day).isValid(),
fetchPolicy: "network-only",
@@ -23,15 +25,29 @@ export default function ScheduleDayViewContainer({ day }) {
let normalizedData;
if (data) {
normalizedData = data.appointments.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return Object.assign(
{},
e,
{ start: new Date(e.start) },
{ end: new Date(e.end) }
);
});
normalizedData = [
...data.appointments.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return Object.assign(
{},
e,
{ start: new Date(e.start) },
{ end: new Date(e.end) }
);
}),
...data.employee_vacation.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return {
...e,
title: `${
(e.employee.first_name && e.employee.first_name.substr(0, 1)) || ""
} ${e.employee.last_name || ""} OUT`,
color: "red",
start: moment(e.start).startOf("day").toDate(),
end: moment(e.end).startOf("day").toDate(),
};
}),
];
}
return (

1
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

@@ -190,7 +190,6 @@ export function ScheduleJobModalComponent({
<Col span={12}>
<Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
{() => {
console.log("render");
const values = form.getFieldsValue();
return (
<div className="schedule-job-modal">

124
client/src/components/shop-employees/shop-employees-add-vacation.component.jsx Normal file
View File

@@ -0,0 +1,124 @@
import { useMutation } from "@apollo/client";
import { Button, Card, Form, notification, Popover, Space } from "antd";
import moment from "moment";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { INSERT_VACATION } from "../../graphql/employees.queries";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
export default function ShopEmployeeAddVacation({ employee }) {
const { t } = useTranslation();
const [insertVacation] = useMutation(INSERT_VACATION);
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
const [visibility, setVisibility] = useState(false);
const handleFinish = async (values) => {
logImEXEvent("employee_add_vacation");
setLoading(true);
let result;
result = await insertVacation({
variables: { vacation: { ...values, employeeid: employee.id } },
update(cache, { data }) {
cache.modify({
id: cache.identify({ id: employee.id, __typename: "employees" }),
fields: {
employee_vacations(ex) {
return [data.insert_employee_vacation_one, ...ex];
},
},
});
},
});
if (!!result.errors) {
notification["error"]({
message: t("employees.errors.adding", {
message: JSON.stringify(result.errors),
}),
});
} else {
notification["success"]({
message: t("employees.successes.added"),
});
}
setLoading(false);
setVisibility(false);
};
const overlay = (
<Card>
<Form form={form} layout="vertical" onFinish={handleFinish}>
<Form.Item
label={t("employees.fields.vacation.start")}
name="start"
rules={[
{
required: true,
//message: t("general.validation.required"),
},
]}
>
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("employees.fields.vacation.end")}
name="end"
rules={[
{
required: true,
//message: t("general.validation.required"),
},
({ getFieldValue }) => ({
async validator(rule, value) {
if (value) {
const { start } = form.getFieldsValue();
if (moment(start).isAfter(moment(value))) {
return Promise.reject(
t("employees.labels.endmustbeafterstart")
);
} else {
return Promise.resolve();
}
} else {
return Promise.resolve();
}
},
}),
]}
>
<FormDatePicker />
</Form.Item>
<Space wrap>
<Button type="primary" htmlType="submit">
{t("general.actions.save")}
</Button>
<Button onClick={() => setVisibility(false)}>
{t("general.actions.cancel")}
</Button>
</Space>
</Form>
</Card>
);
const handleClick = (e) => {
setVisibility(true);
};
return (
<Popover content={overlay} visible={visibility}>
<Button
loading={loading}
disabled={!employee?.active}
onClick={handleClick}
>
{t("employees.actions.addvacation")}
</Button>
</Popover>
);
}

172
client/src/components/shop-employees/shop-employees-form.component.jsx
View File

@@ -1,20 +1,41 @@
import { DeleteFilled } from "@ant-design/icons";
import { Button, Card, Form, Input, InputNumber, Select, Switch } from "antd";
import { useApolloClient, useMutation, useQuery } from "@apollo/client";
import {
Button,
Card,
Form,
Input,
InputNumber,
notification,
Select,
Switch,
Table,
} from "antd";
import { useForm } from "antd/es/form/Form";
import moment from "moment";
import querystring from "query-string";
import React, { useEffect } from "react";
import { useApolloClient } from "@apollo/client";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useHistory, useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
CHECK_EMPLOYEE_NUMBER,
DELETE_VACATION,
INSERT_EMPLOYEES,
QUERY_EMPLOYEE_BY_ID,
QUERY_USERS_BY_EMAIL,
UPDATE_EMPLOYEE,
} from "../../graphql/employees.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CiecaSelect from "../../utils/Ciecaselect";
import { DateFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import CiecaSelect from "../../utils/Ciecaselect";
import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -23,20 +44,129 @@ const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function ShopEmployeesFormComponent({
bodyshop,
form,
selectedEmployee,
handleFinish,
}) {
export function ShopEmployeesFormComponent({ bodyshop }) {
const { t } = useTranslation();
const [form] = useForm();
const history = useHistory();
const search = querystring.parse(useLocation().search);
const [deleteVacation] = useMutation(DELETE_VACATION);
const { error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
variables: { id: search.employeeId },
skip: !search.employeeId || search.employeeId === "new",
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
});
const client = useApolloClient();
useEffect(() => {
if (selectedEmployee) form.resetFields();
}, [selectedEmployee, form]);
if (data && data.employees_by_pk) form.setFieldsValue(data.employees_by_pk);
else {
form.resetFields();
}
}, [form, data, search.employeeId]);
if (!selectedEmployee) return null;
const [updateEmployee] = useMutation(UPDATE_EMPLOYEE);
const [insertEmployees] = useMutation(INSERT_EMPLOYEES);
const handleFinish = (values) => {
if (search.employeeId && search.employeeId !== "new") {
//Update a record.
logImEXEvent("shop_employee_update");
updateEmployee({
variables: {
id: search.employeeId,
employee: {
...values,
user_email: values.user_email === "" ? null : values.user_email,
},
},
})
.then((r) => {
notification["success"]({
message: t("employees.successes.save"),
});
})
.catch((error) => {
notification["error"]({
message: t("employees.errors.save", {
message: JSON.stringify(error),
}),
});
});
} else {
//New record, insert it.
logImEXEvent("shop_employee_insert");
insertEmployees({
variables: { employees: [{ ...values, shopid: bodyshop.id }] },
refetchQueries: ["QUERY_EMPLOYEES"],
}).then((r) => {
search.employeeId = r.data.insert_employees.returning[0].id;
history.push({ search: querystring.stringify(search) });
notification["success"]({
message: t("employees.successes.save"),
});
});
}
};
if (!search.employeeId) return null;
if (error) return <AlertComponent message={error.message} type="error" />;
const columns = [
{
title: t("employees.fields.vacation.start"),
dataIndex: "start",
key: "start",
render: (text, record) => <DateFormatter>{text}</DateFormatter>,
},
{
title: t("employees.fields.vacation.end"),
dataIndex: "end",
key: "end",
render: (text, record) => <DateFormatter>{text}</DateFormatter>,
},
{
title: t("employees.fields.vacation.length"),
dataIndex: "length",
key: "length",
render: (text, record) =>
moment(record.end).diff(moment(record.start), "days", true).toFixed(1),
},
{
title: t("general.labels.actions"),
dataIndex: "actions",
key: "actions",
render: (text, record) => (
<Button
onClick={async () => {
await deleteVacation({
variables: { id: record.id },
update(cache) {
cache.modify({
id: cache.identify({
id: data.employees_by_pk.id,
__typename: "employees",
}),
fields: {
employee_vacations(ex, { readField }) {
return ex.filter(
(vacaref) => record.id !== readField("id", vacaref)
);
},
},
});
},
});
}}
>
<DeleteFilled />
</Button>
),
},
];
return (
<Card
@@ -51,15 +181,6 @@ export function ShopEmployeesFormComponent({
autoComplete={"off"}
layout="vertical"
form={form}
initialValues={{
...selectedEmployee,
hire_date: selectedEmployee.hire_date
? moment(selectedEmployee.hire_date)
: null,
termination_date: selectedEmployee.termination_date
? moment(selectedEmployee.termination_date)
: null,
}}
>
<LayoutFormRow>
<Form.Item
@@ -288,6 +409,15 @@ export function ShopEmployeesFormComponent({
}}
</Form.List>
</Form>
<Table
title={() => (
<ShopEmployeeAddVacation employee={data && data.employees_by_pk} />
)}
columns={columns}
rowKey={"id"}
dataSource={data ? data.employees_by_pk.employee_vacations : []}
/>
</Card>
);
}

41
client/src/components/shop-employees/shop-employees-list.component.jsx
View File

@@ -1,19 +1,22 @@
import { Button, Table } from "antd";
import queryString from "query-string";
import React from "react";
import { useTranslation } from "react-i18next";
export default function ShopEmployeesListComponent({
loading,
employees,
selectedEmployee,
setSelectedEmployee,
handleDelete,
}) {
import { useHistory, useLocation } from "react-router-dom";
export default function ShopEmployeesListComponent({ loading, employees }) {
const { t } = useTranslation();
const history = useHistory();
const search = queryString.parse(useLocation().search);
const handleOnRowClick = (record) => {
if (record) {
setSelectedEmployee(record);
} else setSelectedEmployee({});
search.employeeId = record.id;
history.push({ search: queryString.stringify(search) });
} else {
delete search.employeeId;
history.push({ search: queryString.stringify(search) });
}
};
const columns = [
{
@@ -41,18 +44,6 @@ export default function ShopEmployeesListComponent({
? t("employees.labels.flat_rate")
: t("employees.labels.straight_time"),
},
// {
// title: t("employees.labels.actions"),
// dataIndex: "actions",
// key: "actions",
// render: (text, record) => (
// <div>
// <Button key="delete" onClick={() => handleDelete(record.id)}>
// {t("general.actions.delete")}
// </Button>
// </div>
// )
// }
];
return (
<div>
@@ -62,7 +53,8 @@ export default function ShopEmployeesListComponent({
<Button
type="primary"
onClick={() => {
setSelectedEmployee({});
search.employeeId = "new";
history.push({ search: queryString.stringify(search) });
}}
>
{t("employees.actions.new")}
@@ -76,10 +68,11 @@ export default function ShopEmployeesListComponent({
dataSource={employees}
rowSelection={{
onSelect: (props) => {
setSelectedEmployee(props);
search.employeeId = props.id;
history.push({ search: queryString.stringify(search) });
},
type: "radio",
selectedRowKeys: [(selectedEmployee && selectedEmployee.id) || null],
selectedRowKeys: [search.employeeId],
}}
onRow={(record, rowIndex) => {
return {

29
client/src/components/shop-employees/shop-employees.component.jsx
View File

@@ -1,29 +0,0 @@
import React from "react";
import ShopEmployeesFormComponent from "./shop-employees-form.component";
import ShopEmployeesListComponent from "./shop-employees-list.component";
export default function ShopEmployeeComponent({
form,
loading,
employees,
employeeState,
handleFinish,
handleDelete
}) {
const [selectedEmployee, setSelectedEmployee] = employeeState;
return (
<div>
<ShopEmployeesListComponent
employees={employees}
loading={loading}
selectedEmployee={selectedEmployee}
setSelectedEmployee={setSelectedEmployee}
handleDelete={handleDelete}
/>
<ShopEmployeesFormComponent
handleFinish={handleFinish}
form={form}
selectedEmployee={selectedEmployee}
/>
</div>
);
}

114
client/src/components/shop-employees/shop-employees.container.jsx
View File

@@ -1,120 +1,32 @@
import { useMutation, useQuery } from "@apollo/client";
import { Form, notification } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery } from "@apollo/client";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
DELETE_EMPLOYEE,
INSERT_EMPLOYEES,
QUERY_EMPLOYEES,
UPDATE_EMPLOYEE,
} from "../../graphql/employees.queries";
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import ShopEmployeeComponent from "./shop-employees.component";
import ShopEmployeesFormComponent from "./shop-employees-form.component";
import ShopEmployeesListComponent from "./shop-employees-list.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
function ShopEmployeesContainer({ bodyshop }) {
const [form] = Form.useForm();
const { t } = useTranslation();
const employeeState = useState(null);
const { loading, error, data, refetch } = useQuery(QUERY_EMPLOYEES, {
const { loading, error, data } = useQuery(QUERY_EMPLOYEES, {
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
});
const [updateEmployee] = useMutation(UPDATE_EMPLOYEE);
const [insertEmployees] = useMutation(INSERT_EMPLOYEES);
const [deleteEmployee] = useMutation(DELETE_EMPLOYEE);
const handleDelete = (id) => {
logImEXEvent("shop_employee_delete");
deleteEmployee({ variables: { id: id } })
.then((r) => {
notification["success"]({
message: t("employees.successes.delete"),
});
employeeState[1](null);
refetch().then((r) => form.resetFields());
})
.catch((error) => {
notification["error"]({
message: t("employees.errors.delete", {
message: JSON.stringify(error),
}),
});
});
};
const handleFinish = (values) => {
if (employeeState[0].id) {
//Update a record.
logImEXEvent("shop_employee_update");
updateEmployee({
variables: {
id: employeeState[0].id,
employee: {
...values,
user_email: values.user_email === "" ? null : values.user_email,
},
},
})
.then((r) => {
notification["success"]({
message: t("employees.successes.save"),
});
employeeState[1](null);
refetch().then((r) => form.resetFields());
})
.catch((error) => {
notification["error"]({
message: t("employees.errors.save", {
message: JSON.stringify(error),
}),
});
});
} else {
//New record, insert it.
logImEXEvent("shop_employee_insert");
insertEmployees({
variables: { employees: [{ ...values, shopid: bodyshop.id }] },
}).then((r) => {
notification["success"]({
message: t("employees.successes.save"),
});
employeeState[1](null);
refetch().catch((error) => {
notification["error"]({
message: t("employees.errors.save", {
message: JSON.stringify(error),
}),
});
});
});
}
};
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<ShopEmployeeComponent
handleFinish={handleFinish}
handleDelete={handleDelete}
form={form}
loading={loading}
employeeState={employeeState}
employees={data ? data.employees : []}
/>
<div>
<ShopEmployeesListComponent
employees={data ? data.employees : []}
loading={loading}
/>
<ShopEmployeesFormComponent />
</div>
);
}
export default connect(mapStateToProps, null)(ShopEmployeesContainer);