50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
import { useMutation } from "@apollo/client";
|
|
import { DatePicker, message, Spin } from "antd";
|
|
import moment from "moment";
|
|
import React, { useState } from "react";
|
|
import { UPDATE_JOB } from "../../../graphql/jobs.queries";
|
|
import ipcTypes from "../../../ipc.types";
|
|
import { DateFormat } from "../../../util/constants";
|
|
const { ipcRenderer } = window;
|
|
export default function CloseDateDisplayMolecule({ jobId, close_date }) {
|
|
const [editMode, setEditMode] = useState(false);
|
|
const [value, setValue] = useState(moment(close_date));
|
|
const [loading, setLoading] = useState(false);
|
|
const [updateJob] = useMutation(UPDATE_JOB);
|
|
|
|
const handleChange = async (newDate) => {
|
|
ipcRenderer.send(ipcTypes.default.app.toMain.track, {
|
|
event: "SET_CLOSED_DATE",
|
|
});
|
|
setLoading(true);
|
|
setValue(newDate);
|
|
const result = await updateJob({
|
|
variables: { jobId: jobId, job: { close_date: newDate } },
|
|
});
|
|
|
|
if (!result.errors) {
|
|
message.success("Close date updated.");
|
|
} else {
|
|
message.error("Error updating job.");
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
if (editMode)
|
|
return (
|
|
<div onBlur={() => setEditMode(false)}>
|
|
<DatePicker
|
|
value={value && value.isValid() ? value : null}
|
|
onChange={handleChange}
|
|
/>
|
|
{loading && <Spin size="small" />}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div style={{ cursor: "pointer" }} onClick={() => setEditMode(true)}>
|
|
{value && value.isValid() ? value.format(DateFormat) : "No date set"}
|
|
</div>
|
|
);
|
|
}
|