IO-827 Update employee config screen.

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -10975,6 +10975,69 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>flat_rate</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>rate_type</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>straight_time</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>

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

@@ -1,5 +1,5 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Form, Input, InputNumber, Select, Switch } from "antd";
+import { Button, Card, Form, Input, InputNumber, Select, Switch } from "antd";
 import moment from "moment";
 import React, { useEffect } from "react";
 import { useApolloClient } from "@apollo/client";
@@ -26,6 +26,7 @@ export function ShopEmployeesFormComponent({
   handleFinish,
 }) {
   const { t } = useTranslation();
+
   const client = useApolloClient();
   useEffect(() => {
     if (selectedEmployee) form.resetFields();
@@ -34,9 +35,17 @@ export function ShopEmployeesFormComponent({
   if (!selectedEmployee) return null;
 
   return (
+    <Card
+      extra={
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("general.actions.save")}
+        </Button>
+      }
+    >
       <Form
         onFinish={handleFinish}
         autoComplete={"off"}
+        layout="vertical"
         form={form}
         initialValues={{
           ...selectedEmployee,
@@ -48,10 +57,7 @@ export function ShopEmployeesFormComponent({
             : null,
         }}
       >
-      <Button type="primary" htmlType="submit">
+        <LayoutFormRow>
-        {t("general.actions.save")}
-      </Button>
-
           <Form.Item
             name="first_name"
             label={t("employees.fields.first_name")}
@@ -100,6 +106,8 @@ export function ShopEmployeesFormComponent({
           >
             <Input />
           </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow>
           <Form.Item
             label={t("employees.fields.active")}
             valuePropName="checked"
@@ -132,7 +140,39 @@ export function ShopEmployeesFormComponent({
           >
             <FormDatePicker />
           </Form.Item>
+          <Form.Item
+            label={t("employees.fields.user_email")}
+            name="user_email"
+            validateTrigger="onBlur"
+            rules={[
+              ({ getFieldValue }) => ({
+                async validator(rule, value) {
+                  const user_email = getFieldValue("user_email");
 
+                  if (user_email && value) {
+                    const response = await client.query({
+                      query: QUERY_USERS_BY_EMAIL,
+                      variables: {
+                        email: user_email,
+                      },
+                    });
+
+                    if (response.data.users.length === 1) {
+                      return Promise.resolve();
+                    }
+                    return Promise.reject(
+                      t("bodyshop.validation.useremailmustexist")
+                    );
+                  } else {
+                    return Promise.resolve();
+                  }
+                },
+              }),
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        </LayoutFormRow>
         <Form.List name={["rates"]}>
           {(fields, { add, remove, move }) => {
             return (
@@ -200,40 +240,8 @@ export function ShopEmployeesFormComponent({
             );
           }}
         </Form.List>
-
-      <Form.Item
-        label={t("employees.fields.user_email")}
-        name="user_email"
-        validateTrigger="onBlur"
-        rules={[
-          ({ getFieldValue }) => ({
-            async validator(rule, value) {
-              const user_email = getFieldValue("user_email");
-
-              if (user_email && value) {
-                const response = await client.query({
-                  query: QUERY_USERS_BY_EMAIL,
-                  variables: {
-                    email: user_email,
-                  },
-                });
-
-                if (response.data.users.length === 1) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(
-                  t("bodyshop.validation.useremailmustexist")
-                );
-              } else {
-                return Promise.resolve();
-              }
-            },
-          }),
-        ]}
-      >
-        <Input />
-      </Form.Item>
       </Form>
+    </Card>
   );
 }
 export default connect(

client/src/components/shop-employees/shop-employees-list.component.jsx

@@ -34,12 +34,13 @@ export default function ShopEmployeesListComponent({
     },
 
     {
-      title: t("employees.fields.base_rate"),
+      title: t("employees.labels.rate_type"),
-      dataIndex: "base_rate",
+      dataIndex: "rate_type",
-      key: "base_rate",
+      key: "rate_type",
-      render: (text, record) => (
+      render: (text, record) =>
-        <CurrencyFormatter>{record.base_rate}</CurrencyFormatter>
+        record.flat_rate
-      ),
+          ? t("employees.labels.flat_rate")
+          : t("employees.labels.straight_time"),
     },
     // {
     //   title: t("employees.labels.actions"),

client/src/translations/en_us/common.json

@@ -711,7 +711,10 @@
 				"user_email": "User Email"
 			},
 			"labels": {
-				"actions": "Actions"
+				"actions": "Actions",
+				"flat_rate": "Flat Rate",
+				"rate_type": "Rate Type",
+				"straight_time": "Straight Time"
 			},
 			"successes": {
 				"delete": "Employee deleted successfully.",

client/src/translations/es/common.json

@@ -711,7 +711,10 @@
 				"user_email": ""
 			},
 			"labels": {
-				"actions": ""
+				"actions": "",
+				"flat_rate": "",
+				"rate_type": "",
+				"straight_time": ""
 			},
 			"successes": {
 				"delete": "Empleado eliminado con éxito.",

client/src/translations/fr/common.json

@@ -711,7 +711,10 @@
 				"user_email": ""
 			},
 			"labels": {
-				"actions": ""
+				"actions": "",
+				"flat_rate": "",
+				"rate_type": "",
+				"straight_time": ""
 			},
 			"successes": {
 				"delete": "L'employé a bien été supprimé.",