- Progress commit

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/task-upsert-modal/task-upsert-modal.component.jsx

@@ -1,10 +1,12 @@
 import {Col, Form, Input, Row, Select, Switch} from "antd";
-import React from "react";
+import React, {useCallback} from "react";
 import {useTranslation} from "react-i18next";
 import {FormDatePicker} from "../form-date-picker/form-date-picker.component.jsx";
 import {createStructuredSelector} from "reselect";
 import {selectBodyshop} from "../../redux/user/user.selectors.js";
+
 import {connect} from "react-redux";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -18,12 +20,54 @@ export default connect(
 )(TaskUpsertModalComponent);
 
 
-export function TaskUpsertModalComponent({form, bodyshop}) {
+export function TaskUpsertModalComponent({
+                                           form,
+                                           bodyshop,
+                                           selectedJobId,
+                                           setSelectedJobId,
+                                           selectedJobDetails,
+                                           loading,
+                                           error,
+                                           data
+                                         }) {
   const {t} = useTranslation();
+
+  console.dir(data)
+  
+  if (loading || error) return <LoadingSkeleton active/>;
+
   return (
     <>
       <Row gutter={[16, 16]}>
-        <Col span={8}>
+        <Col span={18}>
+          <Form.Item
+            label={t("tasks.fields.title")}
+            name="title"
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+          >
+            <Input placeholder={t("tasks.labels.titleplaceholder")}/>
+          </Form.Item>
+        </Col>
+        <Col span={4}>
+          <Form.Item
+            label={t("tasks.fields.priority")}
+            name="priority"
+            initialValue={1}
+          >
+            <Select
+              options={[
+                {value: 3, label: t("tasks.fields.priority.low")},
+                {value: 2, label: t("tasks.fields.priority.medium")},
+                {value: 1, label: t("tasks.fields.priority.high")},
+              ]}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={2}>
           <Form.Item
             label={t("tasks.fields.completed")}
             name="completed"
@@ -32,6 +76,8 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
             <Switch/>
           </Form.Item>
         </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
         <Col span={8}>
           <Form.Item
             label={t("tasks.fields.assigned_to")}
@@ -47,45 +93,6 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
           </Form.Item>
         </Col>
         <Col span={8}>
-          <Form.Item
-            label={t("tasks.fields.priority")}
-            name="priority"
-            initialValue={1}
-          >
-            <Select
-              options={[
-                {value: 3, label: t("tasks.fields.priority.low")},
-                {value: 2, label: t("tasks.fields.priority.medium")},
-                {value: 1, label: t("tasks.fields.priority.high")},
-              ]}
-            />
-          </Form.Item>
-        </Col>
-        <Col span={24}>
-          <Form.Item
-            label={t("tasks.fields.title")}
-            name="title"
-            rules={[
-              {
-                required: true,
-              },
-            ]}
-          >
-            <Input placeholder={t("tasks.labels.titleplaceholder")}/>
-          </Form.Item>
-        </Col>
-        <Col span={24}>
-          <Form.Item
-            label={t("tasks.fields.description")}
-            name="description"
-          >
-            <Input.TextArea
-              rows={4}
-              placeholder={t("tasks.labels.descriptionplaceholder")}
-            />
-          </Form.Item>
-        </Col>
-        <Col span={24}>
           <Form.Item
             label={t("tasks.fields.due_date")}
             name="due_date"
@@ -93,7 +100,7 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
             <FormDatePicker/>
           </Form.Item>
         </Col>
-        <Col span={24}>
+        <Col span={8}>
           <Form.Item
             label={t("tasks.fields.remind_at")}
             name="remind_at"
@@ -101,13 +108,55 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
             <FormDatePicker/>
           </Form.Item>
         </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Form.Item
+            label={t("tasks.fields.description")}
+            name="description"
+          >
+            <Input.TextArea
+              rows={8}
+              placeholder={t("tasks.labels.descriptionplaceholder")}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Form.Item
+            name="jobid"
+            label="Job ID"
+            
+            rules={[
+              {
+                required: true,
+                message: 'Please select a Job ID',
+              },
+            ]}
+          >
+            <Select placeholder="Select a Job ID" defaultValue={selectedJobId} onSelect={setSelectedJobId}>
+              {data.jobs.map((job) => (
+                <Select.Option key={job.id} value={job.id}>
+                  {job.ro_number}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
         <Col span={8}>
           <Form.Item
             label={t("tasks.fields.joblineid")}
             name="joblineid"
           >
-            <Select placeholder={t("tasks.labels.joblineidplaceholder")}>
-              {/* Add your options here */}
+            <Select placeholder={t("tasks.labels.joblineidplaceholder")} disabled={!selectedJobDetails}>
+              {selectedJobDetails?.joblines?.map((jobline) => (
+                <Select.Option key={jobline.id} value={jobline.id}>
+                  {jobline.line_desc}
+                </Select.Option>
+              ))}
             </Select>
           </Form.Item>
         </Col>
@@ -116,7 +165,7 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
             label={t("tasks.fields.partsorderid")}
             name="partsorderid"
           >
-            <Select placeholder={t("tasks.labels.partsorderidplaceholder")}>
+            <Select placeholder={t("tasks.labels.partsorderidplaceholder")} disabled={!selectedJobDetails}>
               {/* Add your options here */}
             </Select>
           </Form.Item>
@@ -126,7 +175,7 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
             label={t("tasks.fields.billid")}
             name="billid"
           >
-            <Select placeholder={t("tasks.labels.billidplaceholder")}>
+            <Select placeholder={t("tasks.labels.billidplaceholder")} disabled={!selectedJobDetails}>
               {/* Add your options here */}
             </Select>
           </Form.Item>