UI fixes for manual job creation + owners pages + vehicles pages + all jobs BOD-155

client/src/components/jobs-create-owner-info/jobs-create-owner-info.component.jsx

@@ -1,8 +1,13 @@
+import { Col, Row, Typography } from "antd";
 import React from "react";
-import { Row, Col, Typography } from "antd";
+import { useTranslation } from "react-i18next";
 import JobsCreateOwnerInfoNewComponent from "./jobs-create-owner-info.new.component";
 import JobsCreateOwnerInfoSearchComponent from "./jobs-create-owner-info.search.component";
-import { useTranslation } from "react-i18next";
+
+const colSpan = {
+  sm: { span: 24 },
+  lg: { span: 12 },
+};
 
 export default function JobsCreateOwnerInfoComponent({ loading, owners }) {
   const { t } = useTranslation();
@@ -11,15 +16,15 @@ export default function JobsCreateOwnerInfoComponent({ loading, owners }) {
       <Row>
         <Typography.Title>{t("jobs.labels.create.ownerinfo")}</Typography.Title>
       </Row>
-      <Row gutter={4}>
-        <Col span={16}>
+      <Row gutter={[32, 32]}>
+        <Col {...colSpan}>
           <JobsCreateOwnerInfoSearchComponent
             loading={loading}
             owners={owners}
           />
         </Col>
 
-        <Col span={8}>
+        <Col {...colSpan}>
           <JobsCreateOwnerInfoNewComponent />
         </Col>
       </Row>

client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx

@@ -1,18 +1,18 @@
-import React, { useContext } from "react";
-import JobsCreateOwnerInfoComponent from "./jobs-create-owner-info.component";
-import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
-import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
 import { useQuery } from "@apollo/react-hooks";
+import React, { useContext } from "react";
+import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
+import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import AlertComponent from "../alert/alert.component";
+import JobsCreateOwnerInfoComponent from "./jobs-create-owner-info.component";
 
 export default function JobsCreateOwnerContainer() {
   const [state] = useContext(JobCreateContext);
   const { loading, error, data } = useQuery(QUERY_SEARCH_OWNER_BY_IDX, {
     variables: { search: `%${state.owner.search}%` },
-    skip: !state.owner.search
+    skip: !state.owner.search,
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
   return (
     <JobsCreateOwnerInfoComponent
       loading={loading}

client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function JobsCreateOwnerInfoNewComponent() {
   const [state, setState] = useContext(JobCreateContext);
@@ -20,103 +21,111 @@ export default function JobsCreateOwnerInfoNewComponent() {
             owner: {
               ...state.owner,
               new: !state.owner.new,
-              selectedid: null
-            }
+              selectedid: null,
+            },
           });
-        }}
-      >
+        }}>
         {t("jobs.labels.create.newowner")}
       </Checkbox>
 
-      <Form.Item
-        label={t("owners.fields.ownr_ln")}
-        name={["owner", "data", "ownr_ln"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.ownr_fn")}
-        name={["owner", "data", "ownr_fn"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.allow_text_message")}
-        valuePropName="checked"
-        name={["owner", "data", "allow_text_message"]}
-      >
-        <Switch disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.ownr_addr1")}
-        name={["owner", "data", "ownr_addr1"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.ownr_addr2")}
-        name={["owner", "data", "ownr_addr2"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.ownr_city")}
-        name={["owner", "data", "ownr_city"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.ownr_ctry")}
-        name={["owner", "data", "ownr_ctry"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
+      <LayoutFormRow header={t("owners.forms.name")} grow>
+        <Form.Item
+          label={t("owners.fields.ownr_ln")}
+          name={["owner", "data", "ownr_ln"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("owners.fields.ownr_fn")}
+          name={["owner", "data", "ownr_fn"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+      </LayoutFormRow>
 
-      <Form.Item
-        label={t("owners.fields.ownr_ea")}
-        rules={[
-          {
-            type: "email",
-            message: "This is not a valid email address."
-          }
-        ]}
-        name={["owner", "data", "ownr_ea"]}
-      >
-        <FormItemEmail
-          //TODO Fix this email={getFieldValue("ownr_ea")}
-          disabled={!state.owner.new}
-        />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.ownr_ph1")}
-        name={["owner", "data", "ownr_ph1"]}
-      >
-        <FormItemPhone customInput={Input} disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.ownr_st")}
-        name={["owner", "data", "ownr_st"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.ownr_zip")}
-        name={["owner", "data", "ownr_zip"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.preferred_contact")}
-        name={["owner", "data", "preferred_contact"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("owners.fields.ownr_title")}
-        name={["owner", "data", "ownr_title"]}
-      >
-        <Input disabled={!state.owner.new} />
-      </Form.Item>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("owners.fields.ownr_title")}
+          name={["owner", "data", "ownr_title"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("owners.fields.ownr_co_nm")}
+          name={["owner", "data", "ownr_co_nm"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow header={t("owners.forms.address")} grow>
+        <Form.Item
+          label={t("owners.fields.ownr_addr1")}
+          name={["owner", "data", "ownr_addr1"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("owners.fields.ownr_addr2")}
+          name={["owner", "data", "ownr_addr2"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("owners.fields.ownr_city")}
+          name={["owner", "data", "ownr_city"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("owners.fields.ownr_st")}
+          name={["owner", "data", "ownr_st"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("owners.fields.ownr_zip")}
+          name={["owner", "data", "ownr_zip"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("owners.fields.ownr_ctry")}
+          name={["owner", "data", "ownr_ctry"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow header={t("owners.forms.contact")} grow>
+        <Form.Item
+          label={t("owners.fields.ownr_ea")}
+          rules={[
+            {
+              type: "email",
+              message: "This is not a valid email address.",
+            },
+          ]}
+          name={["owner", "data", "ownr_ea"]}>
+          <FormItemEmail
+            //TODO Fix this email={getFieldValue("ownr_ea")}
+            disabled={!state.owner.new}
+          />
+        </Form.Item>
+        <Form.Item
+          label={t("owners.fields.ownr_ph1")}
+          name={["owner", "data", "ownr_ph1"]}>
+          <FormItemPhone customInput={Input} disabled={!state.owner.new} />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("owners.fields.preferred_contact")}
+          name={["owner", "data", "preferred_contact"]}>
+          <Input disabled={!state.owner.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("owners.fields.allow_text_message")}
+          valuePropName='checked'
+          name={["owner", "data", "allow_text_message"]}>
+          <Switch disabled={!state.owner.new} />
+        </Form.Item>
+      </LayoutFormRow>
     </div>
   );
 }

client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx

@@ -7,12 +7,12 @@ import { alphaSort } from "../../utils/sorters";
 
 export default function JobsCreateOwnerInfoSearchComponent({
   loading,
-  owners
+  owners,
 }) {
   const [state, setState] = useContext(JobCreateContext);
   const [tableState, setTableState] = useState({
     sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
   });
 
   const { t } = useTranslation();
@@ -25,7 +25,7 @@ export default function JobsCreateOwnerInfoSearchComponent({
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       sortOrder:
         tableState.sortedInfo.columnKey === "ownr_ln" &&
-        tableState.sortedInfo.order
+        tableState.sortedInfo.order,
     },
     {
       title: t("owners.fields.ownr_fn"),
@@ -34,7 +34,7 @@ export default function JobsCreateOwnerInfoSearchComponent({
       sorter: (a, b) => alphaSort(a.ownr_fn, b.ownr_fn),
       sortOrder:
         tableState.sortedInfo.columnKey === "ownr_fn" &&
-        tableState.sortedInfo.order
+        tableState.sortedInfo.order,
     },
     {
       title: t("owners.fields.ownr_addr1"),
@@ -43,7 +43,7 @@ export default function JobsCreateOwnerInfoSearchComponent({
       sorter: (a, b) => alphaSort(a.ownr_addr1, b.ownr_addr1),
       sortOrder:
         tableState.sortedInfo.columnKey === "ownr_addr1" &&
-        tableState.sortedInfo.order
+        tableState.sortedInfo.order,
     },
     {
       title: t("owners.fields.ownr_city"),
@@ -52,7 +52,7 @@ export default function JobsCreateOwnerInfoSearchComponent({
       sorter: (a, b) => alphaSort(a.ownr_city, b.ownr_city),
       sortOrder:
         tableState.sortedInfo.columnKey === "ownr_city" &&
-        tableState.sortedInfo.order
+        tableState.sortedInfo.order,
     },
     {
       title: t("owners.fields.ownr_ea"),
@@ -61,7 +61,7 @@ export default function JobsCreateOwnerInfoSearchComponent({
       sorter: (a, b) => alphaSort(a.ownr_ea, b.ownr_ea),
       sortOrder:
         tableState.sortedInfo.columnKey === "ownr_ea" &&
-        tableState.sortedInfo.order
+        tableState.sortedInfo.order,
     },
     {
       title: t("owners.fields.ownr_ph1"),
@@ -73,51 +73,54 @@ export default function JobsCreateOwnerInfoSearchComponent({
       sorter: (a, b) => alphaSort(a.ownr_ph1, b.ownr_ph1),
       sortOrder:
         tableState.sortedInfo.columnKey === "ownr_ph1" &&
-        tableState.sortedInfo.order
-    }
+        tableState.sortedInfo.order,
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
     setTableState({ ...tableState, filteredInfo: filters, sortedInfo: sorter });
   };
-  //TODO Implement searching & pagination
 
   return (
     <Table
       loading={loading}
       title={() => {
         return (
-          <Input.Search
-            placeholder="Search..."
-            onSearch={value => {
-              setState({
-                ...state,
-                owner: { ...state.owner, search: value }
-              });
-            }}
-            enterButton
-          />
+          <div className='imex-table-header'>
+            <Input.Search
+              className='imex-table-header__search'
+              placeholder={t("general.labels.search")}
+              onSearch={(value) => {
+                setState({
+                  ...state,
+                  owner: { ...state.owner, search: value },
+                });
+              }}
+              enterButton
+            />
+          </div>
         );
       }}
-      size="small"
+      size='small'
+      scroll={{ x: true }}
       pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
-      rowKey="id"
+      columns={columns}
+      rowKey='id'
       dataSource={owners}
       onChange={handleTableChange}
       rowSelection={{
-        onSelect: props => {
+        onSelect: (props) => {
           setState({
             ...state,
-            owner: { ...state.owner, new: false, selectedid: props.id }
+            owner: { ...state.owner, new: false, selectedid: props.id },
           });
         },
         type: "radio",
-        selectedRowKeys: [state.owner.selectedid]
+        selectedRowKeys: [state.owner.selectedid],
       }}
       onRow={(record, rowIndex) => {
         return {
-          onClick: event => {
+          onClick: (event) => {
             if (record) {
               if (record.id) {
                 setState({
@@ -125,18 +128,18 @@ export default function JobsCreateOwnerInfoSearchComponent({
                   owner: {
                     ...state.owner,
                     new: false,
-                    selectedid: record.id
-                  }
+                    selectedid: record.id,
+                  },
                 });
-       
+
                 return;
               }
             }
             setState({
               ...state,
-              owner: { ...state.owner, selectedid: null }
+              owner: { ...state.owner, selectedid: null },
             });
-          }
+          },
         };
       }}
     />