bodyshop/client/src/components/shop-employees/shop-employees-form.component.jsx

import { Button, Form, Input, InputNumber, Select, Switch } from "antd";
import moment from "moment";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function ShopEmployeesFormComponent({
  bodyshop,
  form,
  selectedEmployee,
  handleFinish,
}) {
  const { t } = useTranslation();
  useEffect(() => {
    if (selectedEmployee) form.resetFields();
  }, [selectedEmployee, form]);

  if (!selectedEmployee) return null;

  return (
    <Form
      onFinish={handleFinish}
      autoComplete={"off"}
      form={form}
      initialValues={{
        ...selectedEmployee,
        hire_date: selectedEmployee.hire_date
          ? moment(selectedEmployee.hire_date)
          : null,
        termination_date: selectedEmployee.termination_date
          ? moment(selectedEmployee.termination_date)
          : null,
      }}
    >
      <Button type="primary" htmlType="submit">
        {t("general.actions.save")}
      </Button>

      <Form.Item
        name="first_name"
        label={t("employees.fields.first_name")}
        rules={[
          {
            required: true,
            message: t("general.validation.required"),
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.last_name")}
        name="last_name"
        rules={[
          {
            required: true,
            message: t("general.validation.required"),
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="employee_number"
        label={t("employees.fields.employee_number")}
        rules={[
          {
            required: true,
            message: t("general.validation.required"),
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.pin")}
        name="pin"
        rules={[
          {
            required: true,
            message: t("general.validation.required"),
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.active")}
        valuePropName="checked"
        name="active"
      >
        <Switch />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.flat_rate")}
        name="flat_rate"
        valuePropName="checked"
      >
        <Switch />
      </Form.Item>
      <Form.Item
        name="hire_date"
        label={t("employees.fields.hire_date")}
        rules={[
          {
            required: true,
            message: t("general.validation.required"),
          },
        ]}
      >
        <FormDatePicker />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.termination_date")}
        name="termination_date"
      >
        <FormDatePicker />
      </Form.Item>
      {
        //TODO Make this a picklist.
      }
      <Form.Item
        label={t("employees.fields.cost_center")}
        name="cost_center"
        rules={[
          {
            required: true,
            message: t("general.validation.required"),
          },
        ]}
      >
        <Select>
          {bodyshop.md_responsibility_centers.costs.map((c) => (
            <Select.Option key={c.name} value={c.name}>
              {c.name}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item
        label={t("employees.fields.base_rate")}
        name="base_rate"
        rules={[
          {
            required: true,
            message: t("general.validation.required"),
          },
        ]}
      >
        <CurrencyInput />
      </Form.Item>
      <Form.Item label={t("employees.fields.user_email")} name="user_email">
        <Input />
      </Form.Item>
    </Form>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ShopEmployeesFormComponent);