- Progress Commit

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

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

@@ -0,0 +1,107 @@
+import {Col, Form, Input, Row, Select, Switch} from "antd";
+import React 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";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TaskUpsertModalComponent);
+
+
+export function TaskUpsertModalComponent({form, bodyshop}) {
+  const {t} = useTranslation();
+  return (
+    <>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <Form.Item
+            label={t("tasks.fields.completed")}
+            name="completed"
+            valuePropName="checked"
+          >
+            <Switch/>
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item
+            label={t("tasks.fields.assigned_to")}
+            name="assigned_to"
+          >
+            <Select placeholder={t("tasks.labels.selectemployee")}>
+              {bodyshop.employees.map((employee) => (
+                <Select.Option key={employee.id} value={employee.user_email}>
+                  {employee.first_name} {employee.last_name}
+                </Select.Option>
+              ))}
+            </Select>
+          </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"
+          >
+            <FormDatePicker/>
+          </Form.Item>
+        </Col>
+        <Col span={24}>
+          <Form.Item
+            label={t("tasks.fields.remind_at")}
+            name="remind_at"
+          >
+            <FormDatePicker/>
+          </Form.Item>
+        </Col>
+      </Row>
+    </>
+  );
+}

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

@@ -0,0 +1,105 @@
+import {useMutation} from "@apollo/client";
+import {Form, Modal, notification} from "antd";
+import React, {useEffect} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {INSERT_NEW_TASK, UPDATE_TASK} from "../../graphql/tasks.queries";
+import {toggleModalVisible} from "../../redux/modals/modals.actions";
+import {selectTaskUpsert} from "../../redux/modals/modals.selectors";
+import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors";
+import TaskUpsertModalComponent from "./task-upsert-modal.component";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop,
+  taskUpsert: selectTaskUpsert,
+});
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("taskUpsert")),
+});
+
+export function TaskUpsertModalContainer({
+                                           bodyshop,
+                                           currentUser,
+                                           taskUpsert,
+                                           toggleModalVisible,
+                                         }) {
+  const {t} = useTranslation();
+  const [insertTask] = useMutation(INSERT_NEW_TASK);
+  const [updateTask] = useMutation(UPDATE_TASK);
+
+  const {open, context, actions} = taskUpsert;
+  const {jobId, existingTask} = context;
+  const {refetch} = actions;
+
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (existingTask && open) {
+      form.setFieldsValue(existingTask);
+    } else if (!existingTask && open) {
+      form.resetFields();
+    }
+  }, [existingTask, form, open]);
+
+  const handleFinish = async (formValues) => {
+    const {...values} = formValues;
+
+    if (existingTask) {
+      updateTask({
+        variables: {
+          taskId: existingTask.id,
+          task: values,
+        },
+      }).then((r) => {
+        window.dispatchEvent(new CustomEvent('taskUpdated'));
+        notification["success"]({
+          message: t("tasks.successes.updated"),
+        });
+      });
+      if (refetch) refetch();
+      toggleModalVisible();
+    } else {
+      await insertTask({
+        variables: {
+          taskInput: [
+            {...values, jobid: jobId, created_by: currentUser.email, bodyshopid: bodyshop.id},
+          ],
+        },
+      });
+
+      if (refetch) refetch();
+      form.resetFields();
+      toggleModalVisible();
+      window.dispatchEvent(new CustomEvent('taskUpdated'));
+      notification["success"]({
+        message: t("tasks.successes.create"),
+      });
+    }
+  };
+
+  return (
+    <Modal
+      title={existingTask ? t("tasks.actions.edit") : t("tasks.actions.new")}
+      open={open}
+      okText={t("general.actions.save")}
+      onOk={() => {
+        form.submit();
+      }}
+      onCancel={() => {
+        toggleModalVisible();
+      }}
+      destroyOnClose
+    >
+      <Form form={form} onFinish={handleFinish} layout="vertical">
+        <TaskUpsertModalComponent form={form}/>
+      </Form>
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TaskUpsertModalContainer);