BOD-7 #comment Fixed up employee list + form screen to follow other screens and resolve antd breaking changes.

bodyshop_translations.babel

@@ -1300,6 +1300,32 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>labels</name>
+                                <children>
+                                    <concept_node>
+                                        <name>actions</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>
                                 <name>successes</name>
                                 <children>

client/src/components/owner-find-modal/owner-find-modal.component.jsx

@@ -17,51 +17,26 @@ export default function OwnerFindModalComponent({
       title: t("owners.fields.ownr_ln"),
       dataIndex: "ownr_ln",
       key: "ownr_ln"
-      //width: "8%",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      //   // filteredValue: state.filteredInfo.text || null,
-      //   sorter: (a, b) => alphaSort(a, b),
-      //   sortOrder:
-      //     state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
     },
     {
       title: t("owners.fields.ownr_fn"),
       dataIndex: "ownr_fn",
       key: "ownr_fn"
-      //   ellipsis: true,
-      //   sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
-      //   //width: "25%",
-      //   sortOrder:
-      //     state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order
     },
     {
       title: t("owners.fields.ownr_addr1"),
       dataIndex: "ownr_addr1",
       key: "ownr_addr1"
-      //   sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
-      //   sortOrder:
-      //     state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order
-      //ellipsis: true
     },
     {
       title: t("owners.fields.ownr_city"),
       dataIndex: "ownr_city",
       key: "ownr_city"
-      //   sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
-      //   sortOrder:
-      //     state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
-      //width: "12%",
-      //ellipsis: true
     },
     {
       title: t("owners.fields.ownr_ea"),
       dataIndex: "ownr_ea",
       key: "ownr_ea"
-      //   sorter: (a, b) => a.clm_amt - b.clm_amt,
-      //   sortOrder:
-      //     state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order
-      //width: "12%",
-      //ellipsis: true
     },
     {
       title: t("owners.fields.ownr_ph1"),
@@ -70,11 +45,6 @@ export default function OwnerFindModalComponent({
       render: (text, record) => (
         <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
       )
-      //   sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
-      //   sortOrder:
-      //     state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order
-      //width: "12%",
-      //ellipsis: true
     }
   ];
 
@@ -118,7 +88,6 @@ export default function OwnerFindModalComponent({
         checked={selectedOwner ? false : true}
         onClick={() => setSelectedOwner(null)}
       >
-        
         {t("owners.labels.create_new")}
       </Checkbox>
     </div>

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

@@ -1,6 +1,6 @@
 import { Button, DatePicker, Form, Input, InputNumber, Switch } from "antd";
 import moment from "moment";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 export default function ShopEmployeesFormComponent({
@@ -9,8 +9,11 @@ export default function ShopEmployeesFormComponent({
   handleFinish
 }) {
   const { t } = useTranslation();
+  useEffect(() => {
+    if (selectedEmployee) form.resetFields();
+  }, [selectedEmployee, form]);
 
-  if (!selectedEmployee) return "//TODO No employee selected.";
+  if (!selectedEmployee) return null;
 
   return (
     <Form
@@ -76,7 +79,7 @@ export default function ShopEmployeesFormComponent({
       </Form.Item>
       <Form.Item
         label={t("employees.fields.flat_rate")}
-        name="active"
+        name="flat_rate"
         valuePropName="checked"
       >
         <Switch />

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

@@ -1,51 +1,98 @@
-import { Button, List } from "antd";
+import { Button, Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 export default function ShopEmployeesListComponent({
   loading,
   employees,
+  selectedEmployee,
   setSelectedEmployee,
   handleDelete
 }) {
   const { t } = useTranslation();
+
+  const handleOnRowClick = record => {
+    if (record) {
+      setSelectedEmployee(record);
+    } else setSelectedEmployee({});
+  };
+  const columns = [
+    {
+      title: t("employees.fields.employee_number"),
+      dataIndex: "employee_number",
+      key: "employee_number"
+    },
+    {
+      title: t("employees.fields.first_name"),
+      dataIndex: "first_name",
+      key: "first_name"
+    },
+    {
+      title: t("employees.fields.last_name"),
+      dataIndex: "last_name",
+      key: "last_name"
+    },
+    {
+      title: t("employees.fields.cost_center"),
+      dataIndex: "cost_center",
+      key: "cost_center"
+    },
+    {
+      title: t("employees.fields.base_rate"),
+      dataIndex: "base_rate",
+      key: "base_rate",
+      render: (text, record) => (
+        <CurrencyFormatter>{record.base_rate}</CurrencyFormatter>
+      )
+    },
+    {
+      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>
-      <Button
-        type="primary"
-        onClick={() => {
-          setSelectedEmployee({});
+      <Table
+        title={() => {
+          return (
+            <Button
+              type="primary"
+              onClick={() => {
+                setSelectedEmployee({});
+              }}
+            >
+              {t("employees.actions.new")}
+            </Button>
+          );
         }}
-      >
-        {t("employees.actions.new")}
-      </Button>
-      <List
         loading={loading}
-        itemLayout="horizontal"
+        size="small"
+        pagination={{ position: "top" }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey="id"
         dataSource={employees}
-        renderItem={item => (
-          <List.Item
-            actions={[
-              <Button key="edit" onClick={() => setSelectedEmployee(item)}>
-                {t("general.actions.edit")}
-              </Button>,
-              <Button key="delete" onClick={() => handleDelete(item.id)}>
-                {t("general.actions.delete")}
-              </Button>
-            ]}
-          >
-            <List.Item.Meta
-              title={`${item.first_name || ""} ${item.last_name ||
-                ""} | ${item.employee_number || ""}`}
-              description={
-                <span>
-                  {item.cost_center} @{" "}
-                  <CurrencyFormatter>{item.base_rate}</CurrencyFormatter>
-                </span>
-              }
-            />
-          </List.Item>
-        )}
+        rowSelection={{
+          onSelect: props => {
+            setSelectedEmployee(props);
+          },
+          type: "radio",
+          selectedRowKeys: [(selectedEmployee && selectedEmployee.id) || null]
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: event => {
+              handleOnRowClick(record);
+            }
+          };
+        }}
       />
     </div>
   );

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

@@ -1,4 +1,3 @@
-import { Col, Row } from "antd";
 import React from "react";
 import ShopEmployeesFormComponent from "./shop-employees-form.component";
 import ShopEmployeesListComponent from "./shop-employees-list.component";
@@ -7,28 +6,24 @@ export default function ShopEmployeeComponent({
   loading,
   employees,
   employeeState,
-  handleSubmit,
+  handleFinish,
   handleDelete
 }) {
   const [selectedEmployee, setSelectedEmployee] = employeeState;
   return (
-    <Row>
-      <Col span={6}>
-        <ShopEmployeesListComponent
-          employees={employees}
-          loading={loading}
-          setSelectedEmployee={setSelectedEmployee}
-          handleDelete={handleDelete}
-        />
-      </Col>
-
-      <Col span={18}>
-        <ShopEmployeesFormComponent
-          handleSubmit={handleSubmit}
-          form={form}
-          selectedEmployee={selectedEmployee}
-        />
-      </Col>
-    </Row>
+    <div>
+      <ShopEmployeesListComponent
+        employees={employees}
+        loading={loading}
+        selectedEmployee={selectedEmployee}
+        setSelectedEmployee={setSelectedEmployee}
+        handleDelete={handleDelete}
+      />
+      <ShopEmployeesFormComponent
+        handleFinish={handleFinish}
+        form={form}
+        selectedEmployee={selectedEmployee}
+      />
+    </div>
   );
 }

client/src/components/shop-employees/shop-employees.container.jsx

@@ -47,6 +47,7 @@ function ShopEmployeesContainer({ bodyshop }) {
   };
 
   const handleFinish = values => {
+    console.log("values", values);
     if (employeeState[0].id) {
       //Update a record.
       updateEmployee({

client/src/translations/en_us/common.json

@@ -113,6 +113,9 @@
 				"last_name": "Last Name",
 				"termination_date": "Termination Date"
 			},
+			"labels": {
+				"actions": "Actions"
+			},
 			"successes": {
 				"delete": "Employee deleted successfully.",
 				"save": "Employee saved successfully."

client/src/translations/es/common.json

@@ -113,6 +113,9 @@
 				"last_name": "Apellido",
 				"termination_date": "Fecha de conclusión"
 			},
+			"labels": {
+				"actions": ""
+			},
 			"successes": {
 				"delete": "Empleado eliminado con éxito.",
 				"save": "Empleado guardado con éxito."

client/src/translations/fr/common.json

@@ -113,6 +113,9 @@
 				"last_name": "Nom de famille",
 				"termination_date": "Date de résiliation"
 			},
+			"labels": {
+				"actions": ""
+			},
 			"successes": {
 				"delete": "L'employé a bien été supprimé.",
 				"save": "L'employé a enregistré avec succès."